This is Milestone 4 of the Portfolio project, in this milestone below features have been added.

• Used media queries in CSS file to make my desktop version look like template 4 in Figma.
• checked for linters and there is no error.
• used grid and flex for layout.
• replicated the Figma design as much as possible.

This is the second milestone of my Portfolio project, in this milestone below features are added

• languages, skills, and frameworks sections are added
• social media icons
• a section for all projects
• each project section contain a project screenshot, title, description, and button to see the project
• already checked for linter errors
• used flex layout in all sections
• use ul and li for categories in Languages, Frameworks, and Skills.
• hover interaction for project button.

Setup And Mobile Version Skeleton -Milestone 1 I received the comments from my code reviewer and mistakenly closed the first pull request and now I realized that I was not supposed to close the pull request, in this pull request I made the below changes.

• Changed the color of the menu icon to white as per Figma standard
• managed the space between header and content section
• removed extra space in my all files

This is the mobile menu milestone of the Portfolio project, in this milestone below features are added.

• HTML div for mobile navigation
• CSS Style for mobile menu
• JavaScript to show and hide the menu in mobile
• Fix the linters issue

Portfolio: Accessibility

Page titles: no issues found Image text alternatives: missing description Text headings: issue found and fixed Color contrast: issue found and fixed Resize: 

header text  logo text mobile menu first title sub-title first paragraph  feature list  link to work section title  project  description  project tags comment section title comment text  inputs for the contact form  footer email

Interaction: navigation links Moving content: no issues found. Multimedia: no issues found. The basic structure of the page: no issues found

This is pair programming work for creating a contact form with formspree submission, in this form bellow points has been considered.

• a contact form with 2 inputboxincluding name, email, and one textarea for user message
• all the controls are required
• we have used flex for form
• we added social icons section with email in the footer section
• we have checked for lintersand there is no error.
• a hover functionality for submit button

Setup And Mobile Version Skeleton (Protofoli Project) -Milestone 1 I received the comments from my code reviewer and mistakenly closed the first pull request and now I realized that I was not supposed to close the pull request, in this pull request I made the below changes.

• Changed the color of the menu icon to white as per Figma standard
• managed the space between header and content section
• removed extra space in my all files

This is the local storage milestone of the Portfolio project, in this milestone below features are added.

• Javascript Object to store form data
• Javascript function to store data in local storage
• Function to get data from local storage and show it in the form.
• Fix the lintersissue

This is the contact form validation milestone of the Portfolio project, in this milestone below features are added.

• Javascript validation
• HTML element for error message
• CSS for error message
• Fix the lintersissue

This is the project detail popup milestone of the Portfolio project, in this milestone below features are added.

• Javascript array which contains all required information of the project
• Updated main page, now its population project section from project array
• project popup for each project detail button
• close event for popupwindow
• Fix the lintersissue

Hello Mifta, your code seems great, very clean, and functional. Regarding the bug, I found that when you click on the menu button and then in the contact button the menu does not hide, and this is because in your menu.js file when you are calling the addEventListener method to the object contactbtn, the listener parameter has not the right syntax. So, you can remove the parenthesis to the hidemenu object for it to be called as expected.

**You have done a great job. Congratulations 👏🏽

Your portfolio looks very good and professional. The way you handled events using JS is amazing.

You can try to include the following:

• The buttons of the card do not have a cursor-pointer. It is better to include them for accessibility reasons.
• The id for your data sources can be integers to emulate the database. Each field in the database will have unique ids.
• Create the folder for the script files
• The innerHTML property may not be recommended as it increases reload time and other reasons.
• You could eliminate some unnecessary elements in your object file -- The button values e.g. See Live, See Source

Hello @miftah1991! Until now you have done a great job with your application. You were brave to choose a difficult project and have taken the challenge very well. There is always room for improvement, so after going through your code I and @JuanLPalacios have the following recommendations that may improve the overall user experience.

Juan Luis Palacious Perez Recommendations:

1. There is some extra margin in the body because of which there is extra spacing. For making the style more beautiful body margin can be set to zero.
2. The background of div with .content class has a fixed size because of which the image is being cut-off. This background can be set by using background-size: contain property.
3. The Portfolio seems to have many empty classes that can be removed to make the document readable.

Saadat Ali Recommendations:

1. .work-socio is outside the Section. It should be moved to one of the sections.
2. The Formatting of the code can be improved so that it becomes more readable.
3. Some tags inside the document miss the closing Tags which can lead to broken Html structure. These tags can be closed.
4. CSS is doing great. It can be written in a more generalized way. This means All the portfolio cards can have the same CSS.

This is a very nice project you have here! :100: Things to highlight are:

• Good semantics :+1:
• CSS organized in separate files
• Alignments and sizes :straight_ruler: match the Figma template.
• Try to use consistent descriptive proper pseudo-names 👍🏽 instead of recent-projects ◀️ recent-projects
• Good use of linters making sure they where correct before merging the pull request