Command Palette

Search for a command to run...

hijero
Projects

hijero.me — Personal Branding Web Application

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 and slash(/) command-based 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 view count deduplication without cookies or personal data
  • prebuild hook generates static JSON search index → serverless instant Cmd+K and slash(/) command-based global search

Problem

Managing a blog and portfolio as separate sites meant double the upkeep, and platforms like Tistory or Velog never offered the level of customization I wanted. I decided to build a fully owned site that unified my writing, portfolio, and Notion-managed resume under a single branded domain. The rapid maturity of AI-assisted development gave me the confidence to pull it off faster than ever before — and became a hands-on playground for AI-native development practice.

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 & Dark Mode

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

  • 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

Shipped to Vercel with Lighthouse performance 95+ and SEO 100. The site runs cookie-free view tracking via server fingerprinting, a serverless Cmd+K global search powered by a static JSON index, dark/light mode via next-themes, bilingual routing with next-intl v4, and a Notion-backed resume CMS with ISR — all from a single codebase.

  • 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
  • Privacy-first view tracking via SHA-256 server fingerprinting — no cookies, no personal data
  • Serverless Cmd+K global search — instant results from a static JSON index with no backend
  • Dark/light mode with next-themes + bilingual (ko/en) routing with next-intl v4

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. Wired next-themes for system-preference-aware dark/light mode.

  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

    Implemented cookie-free view tracking via SHA-256(IP|UA|Accept-Language) server fingerprinting. 24h dedup server action and tag-intersection related post recommendations.

  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.