>로딩 중 // PROJECT DETAILS

PARSING ARCHITECTURE, DIAGRAMS & API ENDPOINTS

>로딩 중 // 로딩 중

뷰 초기화 중

프로젝트 목록으로 돌아가기

라이브 데모 GitHub에서 보기

Completednextjsreacttypescripttailwind

Jitin K 포트폴리오

마이크로서비스, 분산 시스템, 최신 프론트엔드 역량을 집약한 풀스택 엔지니어 포트폴리오 웹사이트.

문제 및 해결책

역동적인 인터랙션, 완벽한 다국어 현지화 및 최상위 Core Web Vitals 점수를 동시에 달성하는 것.

기능

Next.js App Router와 next-intl 기반 9개 언어 지원
React Flow 인터랙티브 시스템 아키텍처 다이어그램
키네틱 타이포그래피와 몰입형 프리로더
요청 제한 및 SMTP 발송을 지원하는 보안 컨택트 API
프로젝트 폴더 구조 뷰어

기술 스택

기술	버전	목적	선택 이유
Next.js	^16.1.6	App Router framework	Server Components, file-based routing, API routes, image optimization
React	^19.2.4	UI library	Server Components and concurrent rendering
TypeScript	^5	Type safety	Typed project content catches slug/data mismatches at compile time
Tailwind CSS	^4	Utility-first styling	CSS-first config with @theme/oklch tokens, no JS config file
Framer Motion	^12	Animations	Stagger/fade/hover primitives with useInView and useReducedMotion
@xyflow/react + dagre	^12.11.5 / ^0.8.5	Architecture diagrams	Data-driven interactive graphs with automatic layout
Nodemailer	^7.0.11	Contact email delivery	Simple Gmail SMTP transport from a single API route
@upstash/ratelimit + @vercel/kv	^2.1.0 / ^3.0.0	Distributed rate limiting	Shared sliding-window counter across serverless instances
Radix UI + shadcn/ui	primitives + copied source	Accessible UI primitives	Accessible tooltips/labels with full style control via copied components
Vercel	—	Hosting & analytics	Zero-config Next.js deploys, CDN, Web Analytics

아키텍처

Browser

Next.js Client

RootLayout: Navbar + Footer + Providers

InteractiveHexagonBg

SVG + rAF

Home: Profile + Projects + Techstack

/projects

ProjectCard grid

/projects/[slug]

Server

lib/projects

typed static data

ReactFlowDiagram + FolderTree

/contact

Client Form

POST /api/contact

Upstash Ratelimit / Memory Map

Nodemailer → Gmail SMTP

Vercel CDN + Analytics

App Router Pages

Root layout (server): fonts, metadata, Providers, Navbar, Footer, hexagon background
Home (server): composes Profile, Recent Projects (first 4), Techstack, About sections
/projects (client): stagger-animated grid of all ProjectCards
/projects/[slug] (server): joins projects[] + projectDetails[] by slug at request time
/about, /contact (client) and styled not-found page

Component Layer

components/projects/: Project, ProjectCard, ReactFlowDiagram, FolderTree, MermaidDiagram
components/animation/: Framer Motion wrappers (stagger, fade-up, hover glow, border trail)
components/pattern/: InteractiveHexagonBg (rAF-optimized SVG grid), CssPattern, AnimatedHero
components/ui/: shadcn/ui primitives (Badge, Button, Input, Label, Textarea, Tooltip)
components/terminal/: Terminal typing preview component

Data & API Layer

lib/projects/*.ts: one file per project exporting ProjectType + ProjectDetailType
lib/projects/index.ts: aggregates projects[] and projectDetails[] arrays
lib/types.ts: TECH_ICONS registry, PROFILE_DATA, and all content type definitions
POST /api/contact: server-side validation, rate limiting, Nodemailer → Gmail SMTP

프로젝트 구조

app

about

, app

contact

api

contact

projects

[slug]

components

animation

navbar

, components

footer

, components

profile

, components

theme

pattern

projects

terminal

lib

projects

types.tsTECH_ICONS, PROFILE_DATA, ProjectType, ProjectDetailType

utils.tscn() classname utility

public

API 엔드포인트

Portfolio API (포트 3000)

메서드	경로	목적
POST	/api/contact	Validate contact form input, rate-limit by IP, send email via Gmail SMTP

주요 설계 결정

Static TypeScript Data Instead of CMS

결정: Store all project content as typed constants in lib/projects/*.ts joined by slug

이유: Type safety, zero runtime fetch cost, no database or CMS dependency

이점: Compile-time checks, ships with bundle, server-renderable, free hosting footprint

트레이드오프: Content changes require code changes and redeployment

Server/Client Component Split

결정: Detail pages and layout are server components; lists, diagrams, and forms are client components

이유: Minimize client JS while keeping interactive features

이점: Smaller bundle, faster first paint, SEO-friendly detail pages

트레이드오프: Mental overhead of the serialization boundary

Tailwind CSS v4 CSS-First Config

결정: Configure theme via @theme directives in globals.css instead of tailwind.config.js

이유: Tailwind v4 removes the JS config in favor of CSS-native tokens

이점: One file for design tokens, oklch dark/light variables, simpler setup

트레이드오프: Different from v3 muscle memory

React Flow + Dagre for Diagrams

결정: Derive architecture diagrams from data (nodes/edges) with Dagre auto-layout

이유: Diagrams stay consistent with content and render interactively

이점: No hand-drawn images, zoom/pan, themable, ER table nodes supported

트레이드오프: Client bundle cost on pages that render diagrams

Layered Contact API Protection

결정: Validate + HTML-escape inputs, then rate-limit via Upstash sliding window with in-memory fallback

이유: Serverless instances don't share memory; shared KV store gives consistent limits

이점: XSS-safe output, 5 req/min/IP abuse protection, graceful degradation

트레이드오프: Requires KV env vars for full protection; no CSRF token yet

Gmail SMTP via Nodemailer

결정: Send contact emails through an existing Gmail account

이유: Simplest delivery path for a personal portfolio with no backend infra

이점: One route handler, no third-party email SaaS

트레이드오프: App password rotation, self-email only, SMTP rate limits

테스트

None configured•단위 테스트 0개

테스트 항목

부족한 커버리지

Unit tests for contact API validation and escapeHtml()
Unit tests for slug join logic between projects[] and projectDetails[]
Component tests for ProjectCard and detail page sections
E2E tests for contact form and project navigation flows
CI pipeline with lint, typecheck, and build gates (GitHub Actions)

주요 과제

다크 모드 및 다국어 전환 시 하이드레이션 불일치 방지
접근성(모션 줄이기) 설정을 존중하는 유려한 애니메이션 구현

주요 학습

Next.js App Router 환경에서의 현대적 국제화(i18n) 구축
Vercel 공식 가이드라인 기반의 웹 성능 최적화

>로딩 중 // PROJECT DETAILS

PARSING ARCHITECTURE, DIAGRAMS & API ENDPOINTS

프로젝트 목록으로 돌아가기

라이브 데모 GitHub에서 보기

Completednextjsreacttypescripttailwind

Jitin K 포트폴리오

마이크로서비스, 분산 시스템, 최신 프론트엔드 역량을 집약한 풀스택 엔지니어 포트폴리오 웹사이트.

문제 및 해결책

역동적인 인터랙션, 완벽한 다국어 현지화 및 최상위 Core Web Vitals 점수를 동시에 달성하는 것.

기능

Next.js App Router와 next-intl 기반 9개 언어 지원
React Flow 인터랙티브 시스템 아키텍처 다이어그램
키네틱 타이포그래피와 몰입형 프리로더
요청 제한 및 SMTP 발송을 지원하는 보안 컨택트 API
프로젝트 폴더 구조 뷰어

기술 스택

기술	버전	목적	선택 이유
Next.js	^16.1.6	App Router framework	Server Components, file-based routing, API routes, image optimization
React	^19.2.4	UI library	Server Components and concurrent rendering
TypeScript	^5	Type safety	Typed project content catches slug/data mismatches at compile time
Tailwind CSS	^4	Utility-first styling	CSS-first config with @theme/oklch tokens, no JS config file
Framer Motion	^12	Animations	Stagger/fade/hover primitives with useInView and useReducedMotion
@xyflow/react + dagre	^12.11.5 / ^0.8.5	Architecture diagrams	Data-driven interactive graphs with automatic layout
Nodemailer	^7.0.11	Contact email delivery	Simple Gmail SMTP transport from a single API route
@upstash/ratelimit + @vercel/kv	^2.1.0 / ^3.0.0	Distributed rate limiting	Shared sliding-window counter across serverless instances
Radix UI + shadcn/ui	primitives + copied source	Accessible UI primitives	Accessible tooltips/labels with full style control via copied components
Vercel	—	Hosting & analytics	Zero-config Next.js deploys, CDN, Web Analytics

아키텍처

Browser

Next.js Client

RootLayout: Navbar + Footer + Providers

InteractiveHexagonBg

SVG + rAF

Home: Profile + Projects + Techstack

/projects

ProjectCard grid

/projects/[slug]

Server

lib/projects

typed static data

ReactFlowDiagram + FolderTree

/contact

Client Form

POST /api/contact

Upstash Ratelimit / Memory Map

Nodemailer → Gmail SMTP

Vercel CDN + Analytics

App Router Pages

Root layout (server): fonts, metadata, Providers, Navbar, Footer, hexagon background
Home (server): composes Profile, Recent Projects (first 4), Techstack, About sections
/projects (client): stagger-animated grid of all ProjectCards
/projects/[slug] (server): joins projects[] + projectDetails[] by slug at request time
/about, /contact (client) and styled not-found page

Component Layer

components/projects/: Project, ProjectCard, ReactFlowDiagram, FolderTree, MermaidDiagram
components/animation/: Framer Motion wrappers (stagger, fade-up, hover glow, border trail)
components/pattern/: InteractiveHexagonBg (rAF-optimized SVG grid), CssPattern, AnimatedHero
components/ui/: shadcn/ui primitives (Badge, Button, Input, Label, Textarea, Tooltip)
components/terminal/: Terminal typing preview component

Data & API Layer

lib/projects/*.ts: one file per project exporting ProjectType + ProjectDetailType
lib/projects/index.ts: aggregates projects[] and projectDetails[] arrays
lib/types.ts: TECH_ICONS registry, PROFILE_DATA, and all content type definitions
POST /api/contact: server-side validation, rate limiting, Nodemailer → Gmail SMTP

프로젝트 구조

app

about

, app

contact

api

contact

projects

[slug]

components

animation

navbar

, components

footer

, components

profile

, components

theme

pattern

projects

terminal

lib

projects

types.tsTECH_ICONS, PROFILE_DATA, ProjectType, ProjectDetailType

utils.tscn() classname utility

public

API 엔드포인트

Portfolio API (포트 3000)

메서드	경로	목적
POST	/api/contact	Validate contact form input, rate-limit by IP, send email via Gmail SMTP

주요 설계 결정

Static TypeScript Data Instead of CMS

결정: Store all project content as typed constants in lib/projects/*.ts joined by slug

이유: Type safety, zero runtime fetch cost, no database or CMS dependency

이점: Compile-time checks, ships with bundle, server-renderable, free hosting footprint

트레이드오프: Content changes require code changes and redeployment

Server/Client Component Split

결정: Detail pages and layout are server components; lists, diagrams, and forms are client components

이유: Minimize client JS while keeping interactive features

이점: Smaller bundle, faster first paint, SEO-friendly detail pages

트레이드오프: Mental overhead of the serialization boundary

Tailwind CSS v4 CSS-First Config

결정: Configure theme via @theme directives in globals.css instead of tailwind.config.js

이유: Tailwind v4 removes the JS config in favor of CSS-native tokens

이점: One file for design tokens, oklch dark/light variables, simpler setup

트레이드오프: Different from v3 muscle memory

React Flow + Dagre for Diagrams

결정: Derive architecture diagrams from data (nodes/edges) with Dagre auto-layout

이유: Diagrams stay consistent with content and render interactively

이점: No hand-drawn images, zoom/pan, themable, ER table nodes supported

트레이드오프: Client bundle cost on pages that render diagrams

Layered Contact API Protection

결정: Validate + HTML-escape inputs, then rate-limit via Upstash sliding window with in-memory fallback

이유: Serverless instances don't share memory; shared KV store gives consistent limits

이점: XSS-safe output, 5 req/min/IP abuse protection, graceful degradation

트레이드오프: Requires KV env vars for full protection; no CSRF token yet

Gmail SMTP via Nodemailer

결정: Send contact emails through an existing Gmail account

이유: Simplest delivery path for a personal portfolio with no backend infra

이점: One route handler, no third-party email SaaS

트레이드오프: App password rotation, self-email only, SMTP rate limits

테스트

None configured•단위 테스트 0개

테스트 항목

부족한 커버리지

Unit tests for contact API validation and escapeHtml()
Unit tests for slug join logic between projects[] and projectDetails[]
Component tests for ProjectCard and detail page sections
E2E tests for contact form and project navigation flows
CI pipeline with lint, typecheck, and build gates (GitHub Actions)

주요 과제

다크 모드 및 다국어 전환 시 하이드레이션 불일치 방지
접근성(모션 줄이기) 설정을 존중하는 유려한 애니메이션 구현

주요 학습

Next.js App Router 환경에서의 현대적 국제화(i18n) 구축
Vercel 공식 가이드라인 기반의 웹 성능 최적화