Command Palette

Search for a command to run...

hijero
Projects

hijero.me — Personal Portfolio

Period: 2025.05 ~ PresentView Demo

Tech Stack

Next.jsReact 19Notion APITypeScriptTailwind CSS v4shadcn/uinext-intlSupabase

Overview

A personal blog and portfolio built from scratch on Next.js 16+ App Router and React 19. View counts are tracked via SHA-256 server fingerprinting without cookies, and a static JSON index generated by a prebuild hook powers a serverless Cmd+K global search. The Notion API serves as the resume CMS with 30-minute ISR revalidation, while a Turborepo monorepo isolates the UI package for better reusability and build performance.

  • Turborepo monorepo + pnpm workspaces — UI package isolation, Turbo topology-sorted build order
  • next-intl v4: /ko/, /en/ URL split, Accept-Language auto-detection, hreflang & multilingual sitemap
  • SHA-256(IP|UA|Accept-Language) server fingerprinting — 24h dedup without cookies or personal data
  • prebuild hook generates static JSON search index → serverless instant Cmd+K Command Palette search

Problem

Running a blog and portfolio separately doubles maintenance overhead and scatters i18n, SEO, search, and view tracking. A single codebase needed to cover both roles while supporting privacy-first view tracking, serverless search, and Notion-based resume management.

Key Features

  • View Count Tracking

    SHA-256(IP|UA|Accept-Language) server fingerprinting. 24h dedup without cookies or personal data. Supabase RPC transaction guarantee.

  • MDX Blog Pipeline

    rehype-pretty-code syntax highlighting, rehype-slug TOC + IntersectionObserver live section tracking, tag-intersection related post recommendations.

  • Build-time Search Index

    pnpm prebuild hook parses MDX frontmatter → generates static JSON. Serverless instant Cmd+K Command Palette search.

  • next-intl v4 Multilingual

    /ko/, /en/ URL split. Auto Accept-Language detection. Build-time translation key enforcement. hreflang & sitemap complete.

  • Notion CMS ISR Integration

    @notionhq/client + exponential backoff (1→2→4s) retries. React.cache() deduplication. 30-min ISR auto-revalidation. Static fallback on failure.

Outcome

Achieved Lighthouse performance 95+ and SEO 100, then deployed to Vercel.

  • Lighthouse performance 95+, SEO 100
  • Multilingual sitemap + hreflang for search engine locale signaling
  • Full Open Graph tags for social sharing previews
  • Serverless operation on Supabase Free Tier + Vercel

Development Timeline

  1. Project Init & i18n Routing

    Split /ko/ and /en/ URLs via next-intl v4. Set up Turborepo monorepo + pnpm workspaces.

  2. Navigation System

    Built desktop RailNav (80px fixed sidebar), mobile Sheet drawer, and PinnedGNB with theme/locale toggle.

  3. MDX Blog Pipeline

    Code highlighting via rehype-pretty-code, automatic TOC anchors via rehype-slug. Built with SSG for zero loading delay.

  4. Post Detail & Supabase View Count

    Tracks post view counts via Supabase. Implemented server action with 24h dedup and related-post tag recommendation.

  5. Resume & Notion CMS Integration

    Manages resume project data via Notion API. Notion pages serve as the single source of truth with no separate CMS.

  6. Global Search & SEO Deploy

    Static JSON index at build time enables Cmd+K search with no server. Achieved Lighthouse performance 95+, SEO 100, then deployed to Vercel.

  7. Projects Page & Ongoing Improvements

    Split work/personal project sections, added soloProject badge and page transition animation. Ongoing feature improvements continue.