Portfolio Website

A reflection of who I am as both designer and developer

My portfolio website serves as both a personal brand and a creative playground to showcase my design and development work. I wanted it to feel minimal, intentional, and modern; a reflection of who I am as both a designer and developer. Every interaction, transition, and layout choice was guided by the goal of blending clarity and usability.

Creating cohesive storytelling across disconnected work

Before building this site, my work existed across disconnected platforms without cohesive storytelling or visual consistency. I needed a centralized space that not only displayed my projects but also communicated my design process and technical skills through detailed case studies. The challenge was creating a portfolio that balanced aesthetic minimalism with rich content.

How might I create a portfolio that reflects my design identity while functioning as a technically polished, responsive, and interactive website?

Building a cohesive online presence

My objective was to build a cohesive online presence showcasing projects with clear case study narratives and polished front-end development skills. I wanted to design a clean, minimal interface that highlights content without overwhelming users, and implement subtle microinteractions and animations that enhance (not distract from) content. Lastly, I needed to ensure full responsive design across desktop, tablet, and mobile breakpoints as well as code the entire site from scratch to demonstrate front-end development proficiency.

From research to implementation

From research to implementation

Research & Inspiration

I analyzed portfolios from other product and ui/ux designers to understand current trends and case studies. Key insights included: prioritizing case studies over project galleries, showing process not just outcomes, and using subtle animations without overwhelming content.

Figma Design

I began with wireframes to define structure and flow, focusing on visual hierarchy and navigation clarity.

• Planned layout grids and consistent spacing for scalability
• Tested color contrasts and typography for accessibility

Creating a modern, approachable aesthetic

The design aesthetic emphasizes balance—soft borders and grids create depth while keeping content legible and in focus.

• Typography: Satoshi font conveys a clean, modern, and professional feel for both headings and body text
• Color Palette: Shades of grey with white creates a modern, approachable, and cohesive visual language
• Layout: Grid-based sections and consistent spacing maintain clarity, readability, and visual rhythm across the page

Translating design into interactive experiences

Using HTML, CSS, and JavaScript, I translated the Figma designs into a functional, interactive site. My focus was on smooth microinteractions, reusability, and performance optimization.

• Developed a dynamic cursor that reacts to hover states
• Used scroll-based transformations for immersive visuals
• Built responsive grids with Flexbox and CSS Grid

A technically polished showcase of skills

I developed a fully responsive, interactive portfolio site that highlights both my design and technical skills. Through this project, I improved my knowledge of DOM manipulation, CSS animations, and JavaScript while building a modular system that allows future projects to be easily added or updated.

Merging storytelling with code

Creating my portfolio from scratch was both a technical and creative challenge. It taught me how to merge storytelling with code; how motion, typography, and structure can communicate as much as content. This project also reminded me that a portfolio is a living piece of work, constantly evolving as I continue to learn and grow as a designer and developer.