Highlights • Personal

Personal Website | jennie-chen.com

  • ui/ux
  • front-end development
  • web design
  • figma
  • prototyping
  • 2026

Overview

This project is my personal portfolio website, designed and built from scratch to function not just as a container for my work, but as a UX artifact in itself. I wanted an evolving system that reflects my aesthetics, design intuition, and personality, which, in my opinion, is communicated better through interaction rather than a static presentation.

Unlike one-off design projects, this site is ongoing. I treat it as a living artifact that evolves alongside my work, skills, and career goals.

Design Iterations

The site went through three major design iterations.

V1: Early Sketches & Content

The first iteration focused on brainstorming the site’s structure and content (pages, navigation, etc.), alongside visual exploration through sketches and light prototyping. At this stage, I was heavily focused on avoiding a “generic” portfolio, and only later realized that this direction made the site difficult to expand as new content and pages were added.

While this iteration helped clarify what I didn’t want, the resulting direction felt misaligned with both my personal style and long-term goals for the site.

V1 Sketch V1 Figma

V2: Figma Prototypes & Feedback

Although the designs were more polished, some interaction choices prioritized novelty over clarity (for example, a roulette-style role selector), which made the experience unnecessarily difficult for users. In addition, the overall color theme felt misaligned with the tone I wanted to convey, leading me to reset both the interaction model and visual direction.

V2 Sketch V2 Figma

V3: Current Direction

The current version began again with sketches, followed by a component-based Figma design and full implementation. This iteration prioritizes:

  • Clear information hierarchy
  • Modular components
  • Aesthetic restraint
  • Flexibility for future changes

During implementation, new ideas emerged, one of which is a more expressive CV page, which triggered additional mini design cycles (sketches → feedback → implementation). Several of these changes are still in progress.

V3 Sketch V3 Figma

Technical Implementation

The site is implemented using:

  • Astro for static site generation
  • Vanilla HTML, CSS, and JavaScript
  • Deployed via Netlify

The technical stack was chosen to stay lightweight and flexible.

Ongoing Work

Current areas of active development include:

  • Improving the CV filtering experience, including:
    • Side-panel filters
    • Fewer, more meaningful skill tags
  • Adding image carousels to improve project browsing
  • Fixing layout and interaction bugs
  • Improving accessibility
  • Continued content polish and refinement

My Role

  • Led the end-to-end design process across multiple iterations
  • Created sketches, Figma prototypes, and component systems
  • Implemented the site from scratch and iterated during development
  • Actively maintain and evolve the site as a long-term project