Responsive Personal Website
2024
HTML / CSS / JS SCRIPT
VS COde
github
Figma
responsive design
Solo Project
My role
I designed and built this site end-to-end — sole designer, sole developer. Every decision from information architecture to code implementation was mine to make and mine to own-to-end product design for SaveUp from:
Context and Challenge
The Problem
Coming from a music background, I needed a way to establish credibility as a designer a place where the work could speak before the résumé did.
A traditional résumé couldn't fully capture the story or demonstrate the technical range. I needed a portfolio that showed design thinking and proved I understood how design decisions translate into functional code.
Challenge 01
Storytelling
Framing a non-linear career path in a way that feels intentional and credible - not defensive or over-explained.
Challenge 02
Skill Demonstration
Proving design fluency while simultaneously demonstrating that I understand how the code behind it works.
Challenge 03
Accessibility & Usability
Building a site that works across all devices and meets usability standards - not just one that looks good at one viewport.
Process and INsights
Gathering Materials
Selected the projects, assets, and personal narrative I wanted to feature establishing what the site needed to communicate before designing how.
Planning & Content Structure
Mapped the sections: About, Projects, Skills, Contact, and defined how they'd flow together to create a coherent, engaging narrative.
Building the Website
User Testing and Iteration
Tested with five users to identify friction in navigation, readability, and calls to action. Refined spacing, hierarchy, and flow based on what the feedback actually said.
Cross-Platform Testing
Used VS Code linters, W3C validator, and color contrast checkers to ensure consistent performance across devices, browsers, and accessibility standards.
Final Iteration & Launch
Incorporated all feedback, polished the details, and published a working showcase of both design thinking and front-end implementation in one place.
the result
Design
Clear storytelling , career transition framed with intention, not apology
Accessible color contrast and typography across all viewports
Case studies that emphasize process, not just final screens
Development
Fully responsive across mobile, tablet, and desktop
Smooth scrolling and interactive navigation built in vanilla JS
Back-to-top button and performance-conscious implementation
Outcome
A live, working product
Demonstrated ability to own a project from concept to shipped code
Deepened understanding of how design decisions translate into implementation constraints
Insights
WHAT I LEARNED
Iteration is the work.Feedback from testing led to the most meaningful improvements, not the initial design decisions
Building from scratch is the fastest way to understand why certain design decisions are harder to implement than they look in only design tools
Framing a career transition is a design problem — the narrative structure matters as much as the visual one
NEXT STEPS
Migrate to a more robust framework as the project portfolio grows
Add motion and micro-interactions to improve the experience of moving between sections
Continue refining the case study structure as each project deepens in documentation