top of page

OVERVIEW | About the Project

I'm #BeingMikistarr, an experienced graphic designer and digital marketer with over a decade of experience. In 2023, I embarked on a journey to expand my skill set by completing CareerFoundry's UX Design bootcamp, where I conceptualized two apps and documented my experience on this very portfolio site. As a benefit of my program I was able to enroll in a frontend web development specialization, challenging me to create a new responsive portfolio website to showcase my coding skills using HTML5, CSS3, and JavaScript.



  • Design a mobile-first, responsive portfolio website showcasing 1-2 key projects.

  • Use Visual Studio Code to write page coding.

  • Implement a dynamic navigation system using JavaScript for mobile devices.

  • Create CSS animation to demonstrate ability.

  • Utilize GitHub for version control and to track coding changes efficiently.

CHALLENGE | Purpose of Project

While it may not seem like a significant issue, I had already invested a substantial amount of time in the development and redesign of a website that had served me well over the years. Now, I was confronted with the daunting task of creating a new, hand-coded version. I didn't know where to start! However, I soon realized that this project provided an opportunity to deconstruct and gain a deeper understanding of the structure of my current website.



Visual Studio Code

Github Desktop

Github Online




Stationary photo

Phase One: Rapid Prototyping

To streamline this project, I needed to condense my existing design. Leveraging my well-established branding, I aimed to replicate the visual identity of my previous site. This provided insights into column layouts, header layering, and section structuring. I initiated my project by organizing files and including high and low-resolution assets required for the site.

Mockup homepage
New page mockup
New page mockup
Project page mockup

Phase Two: Building the Foundation

With HTML, I constructed the main pages—


This phase emphasized the importance of solid section structuring, organization, comprehensive note-taking, and adherence to proper syntax.

Example of coding

Phase Three: Creating
the Look

Following the skeletal structure, I applied external stylesheets to craft the site's visual aesthetics.



This lesson underscored the significance of clear note-taking, logical class and ID naming conventions, media queries, and the fundamentals of mobile-first design. Chrome's developer tools proved invaluable for real-time debugging.

CSS code example

REVIEW | Completing the Project

With a functional foundation and branding elements in place, I delved into JavaScript to develop a mobile-friendly hamburger menu and implemented modals to enhance user interactivity.

Usability Testing

I conducted usability testing with five participants, who navigated through four scenarios: evaluating the homepage, exploring a project, downloading the resume, and contacting the designer. I rated feedback based on Jakob Nielsen's Severity Rating Scale, addressing critical issues immediately and devising a plan for less severe ones.

Example of javascript

Accessibility and Browser Compatibility Testing

Prior to testing browser compatibility, all code was validated using: 

  • WC3 Validator

  • Stylelint (extension)

  • HTML Hint (extension)

  • Standard JS (extension


After cleaning up minor coding errors, the site underwent accessibility and cross-browser compatibility testing in popular browsers (Safari, Chrome, Firefox, IE Edge) across mobile, tablet, and desktop viewports. Given the simplicity of the site, it's no surprise that all tests yielded successful results.

Code validation results
Accessibilty results

After six weeks of dedicated learning and practice, I successfully created a responsive portfolio website. While not intended to replace this — my primary portfolio —it stands as a testament to my evolving capabilities as a web developer and UX designer. 

Portfolio homepage in various devices

CONCLUSION | The Finished Project

bottom of page