Project Overview
A high-performance, headless, and immersive multidisciplinary portfolio designed to showcase expertise across IT, Graphic Design, Translation, and Operations.
Tech Stack
Framework: Astro (for ultra-fast, zero-JS-by-default static generation).
CMS: Sanity.io (structured, dynamic content management via GROQ queries).
Styling & Effects: Tailwind CSS, Custom CSS, and Vanilla JavaScript (for lightweight, bloat-free interactions).
Key Engineering Highlights
Immersive Micro-Interactions: Features a custom 3D photo tilt, a magnetic CTA button, and an interactive Vanta.js fog background. All are built with lightweight Vanilla JS to avoid heavy library bloat.
Scroll-Driven Storytelling: The "About" section uses IntersectionObserver and requestAnimationFrame for buttery-smooth, 60fps word-by-word text reveals and parallax photo cards, fully respecting prefers-reduced-motion for accessibility.
Dynamic Architecture: Category pages leverage Astro’s dynamic routing ([slug].astro) to render unique layouts (including glassmorphic experience accordions, responsive "bento" tool grids, and snap-scrolling project sliders) from a single, reusable template.
Performance First: Animations are strictly GPU-accelerated (will-change, transform). Images utilize native lazy loading and Sanity’s on-the-fly optimization (auto('format'), fit('crop')).
Security & Polish: Includes a session-aware preloader with a dramatic clip-path wipe transition. The contact email is completely obfuscated in the HTML source and reconstructed at runtime via JavaScript to prevent spam bot scraping.
Design Philosophy
"Editorial meets Digital." The UI pairs elegant serif typography (Instrument Serif) with geometric sans-serifs (Inter, Satoshi). Generous whitespace, subtle grain overlays, and modern glassmorphism create a sophisticated, premium atmosphere that lets the work speak for itself.