juandiegoguerra/portfolio-setup-and-mobile-first

First milestones of the process of creating your portfolio website.

Setup Portfolio and Mobile First README!

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ
• 📝 License

📖 [Setup-Portfolio-and-Mobile-First]

[Setup-Portfolio-and-Mobile-First is a project in where you built your own portfolio website using Frontend Dev Tools.]

🛠 Built With

Tech Stack

Relevant tech stack of the project.

Programming Tools

• HTML
• CSS
• Javascript

Dev Tools

• Git
• GitHub

Text Editor

• VS Code

Key Features

Key features of the application.

• [Learn_how_to_built_your_personal_portfolio_Site]
• [Learn_how_to_use_flexbox_to_place_elements]
• [Learn_how_to_use_images_and_backgrounds]

(back to top)

🚀 Live Demo

Live Demo of "My Portfolio" project using Github Pages.

• Web Project: JD's Portfolio Demo

(back to top)

💻 Getting Started

How to make use of the project.

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

Git, Github web or Github desktop, VS Code and Node.js (to use npm commands) "not sure how to use npm? Read" this.

Setup

Clone this repository to your desired folder:

• 1️⃣ Open Git Bash.
• 2️⃣ Change the current working directory to the location where you want the cloned directory.
• 3️⃣ Type: git clone https://github.com/JuanDiegoGuerra/Portfolio-Setup-and-Mobile-first.git
• 4️⃣ Press Enter to create your local clone.

Install

Install this project with:

NOTE: If you are running on Windows, you need to initialize npm to create package.json file.

npm init -y

"Webhint " npm install --save-dev [email protected]

"Stylelint " npm install --save-dev [email protected] [email protected] [email protected] [email protected]

"Yarn " yarn install --audit

Usage

To run the project, execute the following command:

"Run this code and then fix the validation errors (if needed).

npx hint .

Run npx stylelint "**/*.{css,scss}" on the root of your directory of your project. Fix linter errors

Run tests

No test needed for this project.

Deployment

You can deploy this project using:

VS Code and Google Chrome.

(back to top)

👥 Authors

👤 Juan Diego Guerra

• GitHub: @JuanDiegoGuerra

(back to top)

🔭 Future Features

Features that will be added to the project.

• [ 1 ] [Better_transitions]
• [ 2 ] [Better_javascript_actions]
• [ 3 ] [More_content_in_general]

(back to top)

🤝 Contributing

Big thanks to my coding partners 👨🏽‍🚀

• GitHub: @enmanuelbayen
• GitHub: @Alejuda
• GitHub: @CesarHerr

-> Feel free to check the issues page.

(back to top)

⭐️ Show your support

You can support following me.

• If you like this project you can follow me 🤩! I will be adding more useful material 😁.

(back to top)

🙏 Acknowledgments

Credits to:

• I would like to thank my gf 😳 because she fed me when I was starving after coding for a lot of hours 🤭.
• I would like to thank to my reviewer too because he inspired me finish this challenge as it has to be 💪🏼.

(back to top)

❓ FAQ (Frequently Asked Questions)

You could face some problems when doing this project for the first time, so please check this FAQ.

• [Why_is_my_Lighthouse_linter_not_working_?]

  • [If you have this specific problem, go to your ".yml" file and check the node-version of the specific linter. Best version for this project is "14" (in my case it was "18x" and I changed it)]

• [Wich_files_should_I_add_in_my_gitignore_?]

  • [Feel free to add any file you think is not necessary to be on your repo, but be careful when you add or create new files that might not be necessary in your repo but aren't written in your gitignore.]

(back to top)

📝 License

This project is MIT licensed.

(back to top)

portfolio-setup-and-mobile-first's Issues

Peer-to-peer code review

• It would be better if you delete the style.css file that you're not using to avoid confusion.
• And the mobile_first.css should be more organized.
• You may remove <strong> tags in index.html.

Hide and Seek

Kindly please remove some of these issues

• Update the contact link from "hamb menu".
• Fix the animation on chronometer card project.
• Remove "pop up alert" from the "Get my resume button".

Peer to peer review issues and bug

• Strong tags should not be used for styling, but to put semantic emphasis.
• There are repeated elements in the HTML that is used for styling. CSS should be used for styling.
• There is a bug in responsiveness when resizing and on the form description

Replace img tag with a tag

Portfolio-Setup-and-Mobile-first/index.html

Lines 280 to 283 in 67a7a24

	<li class="icon-2">
	<a href="https://github.com/JuanDiegoGuerra" rel="noopener" target="_blank">
	<img src="img/social media icons.png" alt="github link" id="footer-social">
	</a>

It would be better to replace the img tag with a tag so that you can include a link to all the social media icons.

Peer to peer code review (morning sessions)

Great job with the navbar! One thing you could change to make your code even cleaner is to change the "addEventListener" to "onclick".
This is so that the click is only attached to one function. It can save you a lot of trouble down the line.