Case StudyLive

Personal Portfolio v4

Motion-first personal site with 3D scenes, a blog, and design opinions baked in.

RoleDesign + Frontend

Timeline2026

Next.js

TypeScript

Tailwind CSS

Framer Motion

LIVE SITE

Problem

Most portfolio templates are interchangeable — same layout, same card grid, no personality. I wanted something that actually represents how I think and work, not just a list of links.

Approach

Built from scratch with Next.js App Router, prioritizing motion, theme depth, and real content. Added a 3D banner system, GitHub graph, blog engine, and case study format — so the site itself demonstrates what I build.

Outcomes

Multiple lazy-loaded banner modes including a 3D scene, terminal, tech grid, and GitHub contribution graph.
Dark/light theme system with smooth transitions across all sections.
Component-based blog routes and a full case study format for projects.

Project Overview

This portfolio is a Next.js App Router application. It includes a homepage, project list, dynamic project routes, blog routes, contact page, keymap page, tools/setup/terminal pages, animated hero banners, theme switching, search, GitHub activity, visitor count, and optional WakaTime/YouTube API routes.

The main users are hiring managers, senior engineers, recruiters, and peers. The site exists to make project depth easy to scan while still giving technical readers enough substance to dive deeper.

Problem Statement

Most developer portfolios look interchangeable: hero, cards, skills, contact. They often fail to show how the developer thinks about UX, interaction, architecture, or product narrative. My problem was not only showing projects; it was making the portfolio itself evidence of engineering and design judgment.

Pain points addressed:

• Projects need structured case-study storytelling, not just screenshots.

• Navigation should be fast for keyboard-oriented technical users.

• Visual polish must not block basic readability or mobile behavior.

• Content should be maintainable without a CMS for a solo portfolio.

Goals & Success Criteria

Functional goals:

• Render homepage sections, projects, blogs, contact, tools/setup, terminal, and keymap pages.

• Provide dynamic project routes and custom rich case-study components.

• Add search modal and keyboard shortcuts for fast navigation.

• Integrate GitHub contribution visuals and small API-backed widgets.

• Generate project-specific Open Graph images.

Non-functional goals:

• Keep content typed and centralized in config files.

• Preserve responsive behavior across desktop and mobile.

• Use motion intentionally without making the page feel heavy.

• Degrade gracefully when external APIs fail.

Success criteria:

• A hiring manager can understand my strongest projects in under a minute.

• A senior engineer can find detailed project architecture and tradeoffs quickly.

• The app remains maintainable as project/blog content grows.

• Achieving 95+ Lighthouse scores across performance and accessibility.

My Role & Responsibilities

I designed and implemented the site end-to-end: app routes, layout components, design system choices, animated sections, project config, blog config, search data, keyboard shortcut logic, API routes, dynamic OG images, and custom case-study components.

The repo currently uses TSX/config for rich content rather than Markdown/MDX. These generated MDX files are standalone content artifacts; integrating them into the live app would require a content loader or conversion into existing TSX case-study components.

Tech Stack & Architecture

Next.js is a strong fit because the app needs static pages, dynamic routes, metadata, API handlers, and OG image generation. Tailwind CSS v4 supports fast visual iteration with custom tokens. Framer Motion and Three.js are used where visual identity matters, while config files keep content separated from rendering components.

Architecture Diagram

Mermaid Code Block

flowchart LR
    Visitor --> App[Next.js App Router]
    App --> Pages[Home / Projects / Blog / Contact / Tools]
    Pages --> Components[Sections, Layout, Widgets, Banners]
    Components --> Config[Typed config data]
    App --> API[API routes]
    API --> GitHub[GitHub contribution API]
    API --> WakaTime[WakaTime API]
    API --> YouTube[YouTube API]
    API --> Visitors[Local visitor count JSON]

Key Features

• Config-driven content

Projects, blogs, profile, keymaps, tools, setup, terminal content, and search data live in modules.

• Rich case-study routing

Dynamic project routes select custom case-study components for major projects and a generic fallback for others.

Development Process & Challenges

The main challenge was balancing personality with performance. A portfolio can easily become visually noisy or slow. I used lazy loading around heavier hero banners and kept content mostly static/config-driven so visual experimentation does not require backend complexity.

Another challenge was keyboard shortcuts. Single-key shortcuts are powerful but dangerous if they fire inside forms or while selecting text. The shortcut utilities explicitly avoid editable contexts and default-prevented/repeated events.

Iterative design required constant refactoring to keep the portfolio’s aesthetics and technical implementation in sync.

UX & Product Decisions

The portfolio is designed for skim-first reading. Sections create visual variety, while projects carry concise metadata and deeper case-study paths. Search and keymap features support technical users who expect command-palette-like navigation.

Future Improvements

• Add an MDX/content pipeline for case studies instead of hardcoding rich TSX pages.

• Replace local visitor-count JSON with durable storage or analytics.

• Add tests for shortcut behavior, project route rendering, and search filtering.

• Audit and remove unused dependencies such as Cloudinary if not used.

Visuals & Diagrams

User Flow Diagram

User Path Logic

flowchart TD
    A[Hiring manager lands on homepage] --> B[Scans hero and project cards]
    B --> C{Interested in a project?}
    C -->|Yes| D[Open /projects/slug]
    D --> E[Read custom or generic case study]
    C -->|No| F[Open search or keymap]
    F --> G[Jump to blog, contact, tools, or project]
    E --> H[Open live/repo/contact links]