Portfolio Website UX & Dev


As a UX designer in 2020, I wanted to deepen my knowledge with front-end development skills. At the time, I also needed a new website portfolio showcasing my design work. This project married those two goals over six weeks. I built my website with HTML, CSS, and JavaScript, backing up and doing version control on GitHub. My site went through user testing followed by a new iteration.

Key Takeaways:

Context & Challenge


I wanted to learn more about front-end development so that I could communicate easily with developers and design with their workflow in mind. My first development project was my own UX Design portfolio website.

Duration: 6 weeks

Roles: Front-end development, UI design, UX design, Testing


As an emerging UX designer, I needed a website to display my work and represent me professionally. At the start, I only had case studies on Behance.


  • Build a responsive portfolio website that elegantly shows off my work and allows visitors to easily contact me.
  • Learn development basics.


  1. Phase 1: Compiling the Content
  2. Phase 2: HTML pages & GitHub
  3. Phase 3: Styling with CSS
  4. Phase 4: Adding Interactivity with JavaScript
  5. Phase 5: User Testing
  6. Phase 6: Reiterating the Website
  7. Final Product
  8. Conclusion/Reflections

Phase 1 - Compiling the Content

Since I was my own client, I had to write all the copy and create the images. I made a google doc with all the text for each webpage. I exported and compressed all my images at 600px & 1200px to deliver appropriate sizes for device breakpoints, facilitating fastest load times.

Phase 2 - HTML & GitHub

My course supplied me with basic wireframes for each webpage. I began structuring my HTML pages with the mobile wireframe in mind, wrapping sections in <div> tags so I could adjust the layout for larger screen sizes later.

Once my HTML pages were created, I set-up my first GitHub repo. This provided version control, a website backup, and also taught me about the developer’s workflow.

Github repository

Phase 3 - Styling with CSS

I started with a normalizing CDN at the head of my pages, creating consistent default styles for all browsers. Then, I wrote my foundational type styles.

Then, I began styling interactions (anchors, buttons ...), as well as the layout (containers, wrappers...).

I used media queries to create medium and large device breakpoints with different layouts and font-sizes. Content was divided into columns on larger devices using a mix of css flexbox and width/float.

Then, I added CSS transitions and animations to my buttons and an svg to challenge my creativity and add personality.

/*Snippet of CSS file*/
* {
box-sizing: border-box;
body {
background-color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #332509;
h1, h2, h3, h4, h5 { line-height: 1.4;

<link rel=“stylesheet” type=“text/css” href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.
css"><link rel="stylesheet" type="text/css" href="css/style.css">
Navigation animations


Phase 4 - Adding Interactivity with JavaScript

I first added interactivity to my mobile navigation, having it collapse into a typical hamburger menu. I also added a scroll-to-top button that would appear after scrolling 20px down on all devices.

//Snippet of JS file function menuToggle () { var x = document.getElementById('myNavtoggle'); if (x.className === 'navtoggle') { x.className += ' responsive'; } else { x.className = 'navtoggle'; } }

Mobile menu animation

Phase 5 - User Testing

Applying my UX skills, I put my website through user testing.

Testing Goals

  • Evaluate ease of navigation and discoverability of important content.
  • Gather user attitudes toward the layout and style.

Participant Criteria

Age: Ideally 25-45
Technical Experience: moderate to high (defined in documentation)
Job: Works either in a tech based company; any type of design company, agency, or team; or as a recruiter/hiring manager.

I recruited 6 participants from my personal network that fit my target user criteria.


  • View work samples, box-check skills, easily follow the thought process
  • Find the CV
  • Find the LinkedIn profile
  • Find the contact information

3 starting situations
7 total scenario tasks

Open Questions

  • Anything stand out to you as likable or dislikable on the website?
  • How did you feel about the layout?
  • How did you feel about the colors and typography?
  • Is there anything missing, or that you would add?

Summary of Usability Problems

usability testing errors and their severity

List of Requirements for Next Iteration

Phase 6: Reiterating the Website

I implemented all listed requirements, as well as additional requirements that came out of testing and were earmarked for a later iteration.


Website version 1 before user testing


Website iteration 2 post user testing

Final Product

After testing and reiterating, my website was worthy of launching. The UI is soft and minimal. Animations are smooth and slick. The color scheme is professional and unique with a dark gold, off-black, and white. My case studies tell a story and display my process and methods clearly.


I’m always amazed with how many great insights I get when testing a product. I did not expect the errors or the feedback that I received in testing, but was so grateful to have received them. My website improved greatly after testing.

Other Key Takeaways:

Next Steps

I’m inspired to learn more about advanced CSS, SCSS, and dive deeper into JavaScript!