MINIMALNOMAD.DEV

A portfolio and blog site built with Next.js 14 App Router.

Architecture & Routing — Built on the Next.js 14 App Router with file-system based routing. English routes live at the root level while Korean routes are nested under /kr, each with their own navigation component. A ClientLayout detects the locale from the URL path and switches between English and Korean navigation without any i18n library. Every content section follows a layout + page + dynamic slug pattern, where the layout provides a persistent sidebar with category filtering and real-time search.

Data Layer — Content is managed through a JSON + Markdown architecture. Post metadata such as title, date, category and featured status lives in JSON files, while the actual content is stored as Markdown files. A dedicated service layer handles all data access using Node's file system promises, with sorting by date and filtering by featured status. This separation keeps the content portable and easy to maintain.

Markdown Rendering — Posts are rendered with react-markdown, enhanced with remark-gfm for GitHub-flavored syntax and rehype-raw for inline HTML support. The MarkdownViewer component provides custom renderers for images using next/image with responsive sizing, styled code blocks, blockquotes, and embedded videos. Everything is wrapped in Framer Motion's AnimatePresence for smooth page transitions.

Infinite Scroll — Grid components implement IntersectionObserver-based infinite scroll. A sentinel element at the bottom of each grid triggers incremental loading with 9 initial items and 6 per batch. The implementation uses requestAnimationFrame and debounce logic to prevent rapid-fire triggers during layout reflow.

SEO & Monetization — Every page generates dynamic meta, Open Graph, and Twitter Card tags via Next.js generateMetadata. The site includes a programmatic sitemap and robots configuration for crawler control. Alternate hrefLang links are set in the root layout for proper multilingual indexing. Google AdSense loads via next/script with an afterInteractive strategy, and Google Tag Manager is integrated through @next/third-parties.

Animations & UI — The landing page features a per-character spring animation built with Framer Motion, where each letter scales and rotates in with staggered delays. The navigation bar detects scroll position and applies a visual change for a sticky header effect on mobile. All images use a CSS opacity transition on load to prevent layout shift.

Styling — The entire UI uses CSS Modules with CSS custom properties for consistent theming. The layout features a fixed 250px sidebar on desktop that collapses to a horizontal top navigation on mobile at the 800px breakpoint. Content grids are fully responsive, stepping down from 4 columns to 3 and then 2 on smaller screens.