Multilingual Developer Portfolio & Blog CMS (This website)

Overview

A fully featured, production-ready portfolio and blogging platform built with the modern Next.js 16 App Router architecture.

The project combines a polished public-facing website with a complete administration CMS, allowing content creators to manage portfolio projects, blog posts, and media assets through a unified interface. Designed with scalability, internationalization, SEO, and developer experience in mind, the platform can be easily adapted for personal, freelance, or agency portfolios.

Live Site: https://hwanhoon.kim

Key Features

• Multi-page portfolio powered by Next.js Parallel Routes and Intercepting Routes

  • Portfolio cards open inside a centered modal
  • Each project retains a dedicated, shareable, and SEO-friendly URL

• Advanced image gallery system

  • Full lightbox experience
  • Zoom and fullscreen support
  • Slideshow mode
  • Thumbnail navigation
  • Keyboard and touch swipe controls
  • Optimized image delivery with next/image

• Markdown and Tiptap-powered blogging platform

  • Cover images
  • Tag system
  • Pagination
  • Rich-text editor
  • Automatic draft persistence using localStorage

• Dedicated admin CMS (/admin)

  • Portfolio management
  • Blog post management
  • Cloudflare R2 image library management
  • Clerk authentication with email allowlist protection

• Internationalization support

  • English, French, and Korean
  • Powered by next-intl
  • Locale-specific content stored in PostgreSQL
  • Automatic English fallback
  • Easily extensible language architecture

• Built-in SEO optimization

  • Dynamic metadata generation
  • hreflang alternates
  • Sitemap generation
  • Robots.txt configuration
  • Open Graph integration
  • JSON-LD structured data

• Cloudflare R2 image storage and upload pipeline

• Light, dark, and system theme support

• Accessibility-first implementation with ARIA attributes, semantic landmarks, focus management, and skip links

Architecture & Technical Highlights

End-to-End Type Safety

The entire platform is built with TypeScript and follows a strongly typed architecture.

• Drizzle ORM for database access
• Zod for runtime validation
• Type-safe Server Actions for all administrative mutations

Modern Next.js Architecture

The application embraces the latest Next.js patterns.

• React Server Components by default
• Client Components only where interactivity is required
• App Router architecture
• Streaming and server-first rendering

Internationalized Data Model

Content is organized using a normalized translation schema.

• Core entities stored separately from translations
• Locale-specific content managed through dedicated translation tables
• SQL-level fallback to English using COALESCE
• Minimal effort required to add new languages

Performance & Developer Experience

• Turbopack-powered development workflow
• Biome for linting and formatting
• Optimized image delivery
• Server-side rendering and static optimization
• Scalable content architecture

Result

This project evolved beyond a personal portfolio into a reusable multilingual CMS platform capable of managing portfolios, blogs, and media assets at scale.

It demonstrates expertise in modern Next.js development, internationalization, SEO, cloud storage integration, type-safe database management, content management systems, and production-grade frontend architecture.