Building This Website
This portfolio is more than just a showcase of work; it's a testament to modern web development practices, combining performance, design, and SEO from the ground up.
The Tech Stack
- Astro
For zero-JavaScript default and extreme performance.
- Sanity CMS
For structured, headless content management.
- Cloudflare Pages
For edge deployment and speed.
- Gemini AI
Powering real-time translation and content generation.
Challenges & Solutions
Bilingual Support
We implemented a custom routing system `/[lang]/...` and integrated Google's Gemini API to assist with translations, ensuring content reaches a wider audience without manual duplication.
Contact Form Security
Initially exploring custom reCAPTCHA v3, we pivoted to Web3Forms for a robust, serverless solution that handles spam protection natively, keeping the site static and fast.
Performance vs. Design
Achieving a glassmorphism design with rich visual effects usually comes at a performance cost. By using optimized CSS variables and minimal client-side JavaScript, we maintained high Lighthouse scores.
Scaling Styles
Started with Vanilla CSS for granular control, but adopted Tailwind CSS v4 to enforce a unified design system. This reduced code duplication and improved maintainability while preserving the custom glassmorphism aesthetic.
Content Architecture
Instead of hardcoded text, we leveraged Sanity CMS to build a structured, headless content backend. This allows for real-time updates and scalable data schemas without needing to redeploy the code.
Global Delivery
Deployed via Cloudflare Pages to utilize their global edge network. This ensures sub-second load times worldwide and reliable social media card rendering compared to standard serverless functions.
The Outcome
The result is a lightning-fast, SEO-optimized portfolio that serves as a living case study of the principles I apply to client projects: technical excellence backing great content.
Mobile Result
Desktop Result