Back to Blog
🌆

Multilingual Portfolio Website

Published on·4 min read
Portfolio

🏢 Project Overview

A premium, interactive, and fully localized portfolio website and technical blog engineered for a professional full-stack engineer. To pursue bleeding-edge web standards and bleeding-fast compilation speeds, the entire ecosystem is built with Next.js 16 (App Router), React 19, and TypeScript. By eschewing bulky third-party component libraries, the system utilizes raw Vanilla CSS with CSS custom properties to shape a responsive glassmorphic design language. Seamlessly backed by the Notion API, the platform integrates real-time webhooks for instantaneous, zero-redeploy cache invalidation (On-demand ISR).

  • Project Type: Next.js 16 Cutting-Edge Multilingual Personal Ecosystem
  • Core Tech Stack: Next.js 16 (App Router), React 19, TypeScript, Vanilla CSS (Modern Custom Properties), Notion API (v5), HMAC Webhooks, On-demand ISR

🛑 Challenges & Situation

  1. Flawless Multilingual Localization: Architecting absolute native routing capabilities for English, Traditional Chinese, and Japanese without incurring payload penalties during initial First Contentful Paints, mandating dynamic language sniffing via header middleware.
  2. Zero-Redeploy Serverless Content Syncing: Traditional static generation cycles mandate static interval countdowns or physical redeploy build-hooks to surface markdown edits. The ecosystem required a closed-loop layer to intercept background edits and issue pinpoint target-specific cache updates on localized static pages within fractions of a second.
  3. Balancing Raw Styling with Modern Component Tree: Leveraging React 19 and Next.js 16 Server Components while writing extensible, lightning-weight style structures via native CSS variables capable of toggling between dark, light, and OS system themes natively.

🛠️ Technical Actions

1. Event-Driven Stale Cache Eviction Infrastructure (On-demand ISR Pipeline)

  • Bidirectional Handshake Endpoint: Configured a secure Serverless route at /api/webhooks/notion to successfully execute Notion's verification handshakes and handshake hand-offs.
  • HMAC Cryptographic Verification: Implemented an automated hash verification routine to validate the origin of incoming page.content_updated and page.properties_updated webhooks, locking down the pipeline against forged validation attempts.
  • Granular Revalidation Tagging: Upon background page synchronization, the webhook script safely parses out the mutated Slug and target Language segments, triggering Next.js revalidateTag routines. This translates to instantaneous frontend updates on localized listings or home project grids without executing continuous bulk project builds.

2. Algorithmic Localization & Middleware Traversal (Internationalization)

  • Dynamic Localized Routing Segments: Structured the complete layout hierarchy inside dynamic /[lang] directories, abstracting localized copy structures into modular files (en.json, zh-TW.json, ja.json).
  • Interceptive Routing Middleware: Wrote optimized localization interceptors inside proxy.js to parse incoming browser Accept-Language headers and automatically route clients to proper locales, initializing deep dictionary contexts through React 19 context bindings.

3. Cutting-Edge React 19 & Next.js 16 Core Engine Split

  • Static Pre-Rendering Compilations: Employed Next.js generateStaticParams hooks at compilation time to pre-bake deep multilingual routes into raw indexable HTML, asserting peak crawlability for search engine algorithms (SEO).
  • Strict Server/Client Separation Boundary: Offloaded the core layout trees and heavy text render engines entirely to React Server Components, paring down client-side bundle weight. Hydrated interactive micro-modules—such as ReadingProgress.tsx, the tag filters in BlogList.tsx, and ShareButtons.tsx—with targeted 'use client' barriers.

4. Bespoke Glassmorphism UI engineered via Vanilla CSS

  • Utility-Free Design System Architecture: Completely omitted Tailwind CSS or component templates, authoring modular layout structures exclusively using modern CSS Custom Properties (CSS variables) for maximum style extensibility.
  • Fluid Mechanics & Custom Micro-Animations: Capitalized on advanced HSL color shifting and backdrop-filter rules to shape high-fidelity frosted-glass components. Seamlessly bound layout reveals with ScrollReveal, a real-time terminal hero typewriter, and canvas-driven floating particle frames to achieve premium cinematic engagement with minimal execution lag.

📈 Results & Impact

  • Autonomous Zero-Overhead Management Flow: Successfully engineered a bulletproof personal Jamstack deployment where multilingual editing, tagging, and deployment pipelines run completely free of administrative oversight.
  • Blazing Fast Metrics & Sovereign LightHouse Ranks: Stripping external component framework logic down to pure Vanilla CSS and leveraging asynchronous React 19 architectures pushed structural layouts to pristine Core Web Vitals metrics.
  • Ultimate Validation of Software Pragmatism: From enforcing strict TypeScript parameters (strict: true) to securing background server webhook streams, the portfolio serves as an elite living artifact demonstrating rigorous backend engineering principles.