First project of Microverse curriculum to draft our future portfolio.
We are trying to apply what we have studied regarding:
- Understanding how to parse a Figma design to create a UI.
- Using Flexbox to place elements in the page.
- Building a personal portfolio site.
- Using images and backgrounds to enhance the look of the website.
- HTML, CSS
- GitHub: @juanmanuelbyc
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Show your support
This project doesn't have or require any license.
This is how this project looks like
Checkout the online version
Form local storage
Feature development to apply our learning about local Storage.
Email lowercase validation
This feature implements a simple validation:
-The content of the email field has to be in lower case.
We also implement the following interactions:
When the user submits the form, we check if the email is in lower case. If the validation is OK, the form is sent. If the validation is not OK, we show an error message to the user near the submit button informing them of the error and the form is not sent.
Pop up projects info
The main objective of this feature is to implement the following interactions:
Mobile menu js query
Create a dropdown mobile menu and apply some js query to make it responsive to user interaction
The most important project requirements are:
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.
We are going through these aspects:
Page titles - Changed the title to "Juan Diaz Portfolio" https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R9
Image text alternatives - updated https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R40-R44
Text heading - Fixed heading hierarchy for the main heading at the beginning of the page https://github.com/juanmanuelbyc/Microverse-Student-Project-1/pull/8/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R30
Color contrast - fixed several text colors (also there's others that won't pass contrast text. But changing them would make them way different than Figma design)
Resize - no issues found Interaction - no issues found Moving content - no issues found Multimedia - no issues found The basic structure of the page - no issues found
Add contact me section
In this Group Project, the contact form is added in the footer section with the following fields and requirements:
Name field accepts up to 30 chars. Email field accepts only emails. Message field accepts up to 500 chars. All fields have placeholder text. All fields have the correct type. A user cannot submit the form if one or more of the fields is empty. Formspree service is used to submit the form in the generated link Contact Form elements are layout in Flexbox. Implement the button Hover interactions This project is completed with the help of my coding partners:
Abel Gebeyehu (https://github.com/AbelG101) samlorlah https://github.com/samlorlah
NOTE: I am using Figma Template
For the sake of doing the peer project with @juanmanuelbyc, we get to create a bug in our project and the peer will use Developer tools to debug the code here is my debug process :
Morning Session Code Review.
Morning Session: Code Review
HTML is structured very nicely but there are a few changes that were recommended in the meeting:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700;800&display=swap');)