A portfolio site created using HTML,CSS, and JavaScript

As a new UX designer, I was looking for a way to diversify my skill set and better understand how developers would receive and translate my designs into code. With these goals in mind I decided to build my own responsive portfolio website using HTML, CSS, and JavaScript. Having a understanding of front end development will make me a better member of my team as I collaborate with developers in the future. Over two months I learned HTML, CSS, and JavaScript in order to build my own portfolio website.

I began the design process by creating a general layout and mockup of how I intend my site to look based off of initial wireframes.

Through this process I learned how to use HTML to build the overall structure of the website, CSS for the stylistic choices, and JavaScript to create a animated hamburger menu for mobile screens.

I used a mobile first design approach to create my website. To make sure that my site was responsive to different screen sizes, I used media queries in CSS to create breakpoints where the layout would adjust to fit the screen size.

Small screens (up to 640px width): most mobile screens.

Medium screens (up to 1024px width): large mobile and most tablet screen.

Large screens (up to 1440px width): large tablets and most laptops/desktops.

I wanted to pick blue tones because psychology points to blue in nature being a calming and grounding color. I thought yellow would be a nice contrast to highlight key buttons and points.

I conducted usability testing with 5 participants which resulted in some major errors to be addressed. Overall the participants were able to complete the direct tasks with little to no difficulty. The major problems that they ran into were mainly UI changes rather than overall structural or navigation. I though that this testing revealed a lot of insightful comments and I used this data to help guide me as I made improvements.

The final step was to do a code check to make sure that my work was error free.

✅ W3C Validator Check - The code was checked through a W3C validator and all of the errors were corrected.

✅ Linter Extensions- The code was entered into linter extensions using VS Code and all errors were corrected.

✅ Color Accessibility- To make sure that my site was accessible to all users I checked my site for any color accessibility issues.

The following are some steps that I would like to take in the future to add to my current site.

Include more UX/UI projects that I have completed to showcase my diversified skill set.

Add additional animations to further demonstrate my proficiency in this area.

Work on some more UI aspects of the site in order to make the layout more clean and aesthetically pleasing.