Portfolio Site v2

Project Overview

A highly optimized, server-side generated (SSG) web portfolio engineered with Nuxt 4, Vue 3, and TailwindCSS. Features dynamic i18n localization, native WebGL particle animations, and a responsive dark glass aesthetic.

Architecture & Performance

• Static Site Generation (SSG): Built using Nuxt's Nitro engine to pre-render HTML at build time, ensuring sub-100ms Time To First Byte (TTFB).
• Lazy Loading & Code Splitting: Extensively utilizes Nuxt's lazy-loading boundaries (Lazy components) to defer non-critical components below the fold, resulting in highly optimized initial JavaScript payloads.
• Image Optimization: Employs nuxt/image for automated format conversion (WebP/AVIF), responsive sizing, and native lazy-loading to optimize the Largest Contentful Paint (LCP).

Localization & State

• Vue I18n: Advanced translation architecture utilizing nested JSON structures, linked messages, and explicit AST resolution ($tm() and $rt()) to dynamically render localized tech stacks and responsibilities without repetitive markup.
• Python Sync Tooling: Custom Python scripts automatically parse the base en.json schema and incrementally synchronize the nested structure across 10 other language files.

Security & Hardening

• Edge-Level Security: Strict Content Security Policy (CSP), HSTS, and X-Frame-Options defined in nuxt.config.ts and mirrored in netlify.toml.
• Form Resilience: Serverless Netlify forms hardened with Honeypot fields, strict Regex pattern constraints, and maximum length limits to prevent quota exhaustion and XSS vulnerabilities.
• External Integrity: All external project and social links strictly enforce rel="noopener noreferrer" to prevent reverse tabnabbing.