← back to projects

PERSONAL PROJECT · NEXT.JS, REACT, TYPESCRIPT · 2025

Personal Website

A portfolio system built with Next.js, React, and TypeScript, for professional case studies and personal projects alike.

I built the site you’re looking at right now: reusable page templates, a typed project data model, and a design system that holds both polished work and playful side projects.

  • Next.js · React · TS
  • Cloudflare Pages
  • Design tokens
  • Reusable components

AT A GLANCE

2

page templates

One for experience pages, one for personal projects, with shared components underneath.

8

case studies live

Four experience pages and four personal builds, all on the same system.

1

design system

Type, spacing, and color tokens shared across every page.

CF

Cloudflare Pages

Deployed and iterated on continuously as new projects ship.

WHY I REBUILT IT

My work ranges from healthcare data systems to a browser game with a gacha mechanic. A template-driven site couldn’t hold both without feeling stiff or scattered, so I designed one system with two registers: structured pages for professional experience, thematic ones for personal projects.

DESIGN DIRECTION

Clean layouts, readable type, and consistent spacing carry the whole site; project-specific color and motif give each page its own identity without breaking the system.

Reusable cards
Consistent nav
Project themes
Spacing scale

SITE ARCHITECTURE

A small set of reusable page types, organized so new projects can be added without reinventing the site.

  1. IDENTITYHome
  2. INDEXExperience
  3. TEMPLATEExperience page
  4. TEMPLATEProject page
OUTREACHContact

PAGE SYSTEM

A recruiter-facing case study and a personal browser-game page need different registers: two templates sharing one grammar of cards, tags, and sections.

EXPERIENCE PAGES

Cobbs Creek Healthcare · Capcom · Infosys · MIT Media Lab

PERSONAL PROJECTS

Job Pilot · Mimi Noms · Birthday Shrine · this page

TECHNICAL STACK

FRAMEWORK

  • Next.js
  • React · TS

COMPONENTS

  • Cards · tags
  • Sections

DEPLOY

  • Cloudflare Pages
  • Static export

CONTACT

  • Turnstile · Resend
  • Cloudflare Worker

SCREENS

Home page hero with the oversized Jenny Zhao wordmark and availability line
HOME PAGE
Experience index with the timeline of roles from Cobbs Creek Healthcare to MIT Media Lab
EXPERIENCE INDEX
Contact page with the forest-green hero and direct links
CONTACT PAGE

ROADMAP

CURRENT

Home, experience + project indexes, case studies, contact pipeline (Turnstile → Worker → Resend), visual system

NEXT

Real screenshots across every case study, richer project media

LATER

Notes section, project filters, richer animation

Structured enough for recruiters, flexible enough for whatever I build next.

Get in touch->

Jenny Zhao · Personal Website · 2025