Next.js Architecture
Uses Next.js App Router, file-based routing, static project pages, and a scalable structure suited for larger front-end applications.
// Personal Portfolio / Current Version Project
Portfolio V2
A modern developer portfolio rebuilt with Next.js, TypeScript, Tailwind CSS, and a structured project data system to better support scalable case-study presentation.
2026
Front-End
01 / Overview
Portfolio V2 is the current version of my personal developer portfolio. After building my first portfolio with React and Vite, I rebuilt this version with Next.js, TypeScript, and Tailwind CSS to move closer to a more scalable, production-oriented front-end architecture. The decision to use Next.js came from wanting to grow beyond a purely client-side React app and better understand patterns that are useful in larger real-world projects, including file-based routing, static generation, structured content, metadata handling, optimized project pages, and a clearer foundation for future full-stack development. The portfolio is designed as a reusable project presentation system with structured data, dynamic project detail pages, responsive layouts, and a more refined visual direction.
Structured Project System
Organizes project content through typed data objects to generate reusable listing pages, detail pages, feature sections, process sections, and tech stacks.
Production-Oriented Growth
Rebuilt from a React-only portfolio to better practice patterns that support real-world projects, maintainability, and future full-stack development.
02 / Key Features
01
Next.js App Router Structure
Uses Next.js file-based routing to organize home, about, project listing, and dynamic project detail pages in a clearer application structure.
02
Typed Project Data
Defines project content with TypeScript types, making project pages easier to scale, maintain, and reuse across the portfolio.
03
Dynamic Project Detail Pages
Generates individual project case-study pages using project slugs, structured content, overview highlights, features, process steps, and results.
04
Modern Portfolio Presentation
Creates a refined visual system for presenting selected work with responsive layouts, project cards, hero sections, and consistent detail sections.
05
Scalable Front-End Foundation
Moves beyond a simple client-side React portfolio by practicing architecture patterns that are more suitable for larger production applications.
06
Full-Stack Learning Direction
Uses Next.js as a step toward deeper full-stack development knowledge, including routing, rendering strategies, metadata, and future server-side capabilities.
03 / Process
01
April 2026
Review & Direction
Reviewed the limitations of the first portfolio version and decided to rebuild with a more scalable structure for project presentation and future growth.
02
April 2026
Framework Decision
Chose Next.js to move beyond a React-only portfolio and practice routing, rendering, metadata, and architecture patterns used in larger production projects.
03
May 2026
Data Architecture
Created typed project data structures to manage project summaries, overview items, features, tech stacks, process steps, and results consistently.
04
May 2026
Interface Design
Designed responsive home, about, project listing, and project detail pages with a more polished visual system and reusable layout sections.
05
June 2026
Deployment
Prepared the portfolio for Vercel deployment, verified lint and production build, and organized project assets for live presentation.
04 / Tech Stack
Next.js
React
TypeScript
Tailwind CSS
App Router
Static Generation
Typed Data
Lucide Icons
React Icons
Vercel
Git
05 / Results
🧭
V2
Current Portfolio
▲
Next
App Router
🧩
Typed
Project Data
🚀
Live
Vercel Deploy
© 2026 Hyosang Han's Portfolio. All rights reserved.