Toolbar & Header

I tried to make as similar as possible template #3

here I include:

• index.html
• style.css
• .gitignore
• folders and images for the background of the page

Here I add:

• A validation for the email form in order to alert the user to put all the text in lowercase.
• I add a red border in the email input in order to make it more visual where the error is

Functionality:

• When the user submits the form, you check if the email is in lower case.
• If the validation is OK, the form is sent.
• If the validation is not OK, shows an error message to the user near the submit button informing them of the error, and the form is not sent.

Here I implement:

• A pop-up window that includes the project details.
• All the details are rendered dynamically :sunglasses:
• Here I create an object with all the information of the main page and the pop-up :muscle:
• Render dynamically all the works section and all the pop-up details. :smiley:

The pop-up functionality is:

• When the user clicks (or taps) the button to check project details, the popup with details about the project appears.
• When the user clicks (or taps) the close (X) button or anywhere in the overlay, the popup disappears.

Here I add :

• the menu for the mobile version
• the script.js file for the functionality of the menu
• the js linters.
• edited the CSS file in order to work as supposed.

the mobile menu fulfilled these requirements:

• When the user clicks (or taps) the hamburger button, the mobile menu appears.
• When the user clicks (or taps) the close (X) button, the mobile menu disappears.
• When the user clicks (or taps) any of the mobile menu options, the mobile menu disappears.
• When the user clicks (or taps) any of the mobile menu options, a correct part of the page is displayed.

Accessibility

-Page titles- No issues found -Image text alternatives- No issues found -Text headings- No issues found -Color contrast- Changes were made in order to get a 100% of accessibility (e.g.

https://github.com/Juanse7793/Portfolio/compare/accessibility?expand=1#diff-b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7aR170-R171

https://github.com/Juanse7793/Portfolio/compare/accessibility?expand=1#diff-b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7aR533-R534)

-The basic structure of the page- No issues found

Here I add the desktop version for the portfolio

• Changes added to the index.html file
• Changes added to the style.css file
• Media queries added
• Background images added

I choose template number 5.

Works & About me Sections

in this branch I added:

• works and about me sections in the index.html file
• add the style.css for those sections
• add images and background images

the template I used is #3

Hello @Juanse7793

• Salute 🖖 on your job sofar, although I found the following bugs 🐛 in your new branch. 1 you have used a single quote ' and a double quote " at the same time. that caused an exception to your project. https://github.com/Juanse7793/Portfolio/blob/dd9ffe9ad96b1af2a91e010e1a092eb0c0007857/portfolioScript.js#L18 2 you missed the right side operand in your for loop ➿ I+= ➿ that ends up in wrong termination of the program. https://github.com/Juanse7793/Portfolio/blob/dd9ffe9ad96b1af2a91e010e1a092eb0c0007857/portfolioScript.js#L84
• Fixing these issues will make your script flawless.

Positive Observations 🙌

• Nicely structured HTML code. 🤓
• Very semantic. 💪
• Easy to understand CSS classes. 🙂
• Great git-flow! 🎉

Improvements ♲

• Should maybe 🧐 try to name CSS animations in lower-case exmple-code
• Try not to repeat the same values in the media queries because they are already inherited. 👪
• You could use javascript modules to make separation of concerns, for example placing the data in another .js file and importing it in your main javascript file. data object

https://github.com/Juanse7793/Portfolio/blob/35ddb9fa67e5ceac417825c96e084ee895826685/style.css#L181

I advise you to increase the contrast of the language while being hovered in order to improve visibility.