Portfolio V3
Personal Engineering Portfolio & Architecture Showcase
“How do you design a memorable engineering portfolio?”
Case Study Index (5 Sections)↓
Overview & Design Philosophy
Many developer portfolios rely on generic templates filled with repetitive copy and fake metrics. Portfolio V3 is engineered as a bespoke web platform designed to present real software trade-offs, architecture decisions, and learning retrospectives clearly.
Design surfaces around content purpose: use adaptive templates so a platform, a research project, and a utility tool each tell their story using layout structures natural to their domain.
Typography & Motion Design
Monochrome dark mode design system with HSL-tailored accent colors per project category, built on Tailwind CSS v4 variables.
Uses Inter font family paired with Space Grotesk headings, formatted via Framer Motion spring physics curves (`APPLE_EASE`).
Performance & Core Web Vitals
Optimized using Next.js App Router static compilation and dynamic image sizes, achieving 60fps animation performance.
Engineering Decisions
Duplicating project descriptions across cards, home pages, and search indexes led to inconsistent text updates.
Built a unified registry in `lib/projects/registry.ts` with multi-layer descriptions, deriving all site views through pure accessors.
Requires careful initial data modeling for multi-surface prose.
Achieved 100% data consistency across every page and component on the site.
Challenges & Solutions
Maintaining 60fps Animation Performance
Issue: Heavy backdrop filters and unoptimized motion transitions caused scroll stutter on mobile devices.
Decision/Solution: Used CSS hardware acceleration primitives (`will-change`, `transform-gpu`) and simplified backdrop filters for lower-tier viewports.
What's Next
Key Takeaways
Single-source data registries eliminate content duplication bugs across complex web applications.
Design systems feel premium when micro-interactions respond predictably to user input.
Related Engineering Projects
ThinkTech STEM Society Website
Built the official website for ThinkTech STEM Society, creating a centralized catalog for student workshops, projects, and announcements.
TechSpace Website
Built a community website for TechSpace to manage student technical workshops, display schedules, and share learning resources.