Welcome to my new portfolio site and technical blog! In this post, I want to pull back the curtain and share exactly how I designed, architected, and built this website.
When building a personal site in 2026, it’s easy to over-engineer. However, my goal was to build a system that is extremely fast, highly maintainable, requires near-zero server maintenance, and costs virtually nothing to host. To achieve this, I chose a modern static-first approach coupled with serverless cloud features.
Here is a breakdown of the architecture, stack, and key integration patterns.
1. Core Framework: Astro.js
For content-driven portfolios and blogs, Astro.js is arguably the best tool available. Astro is a static site generator (SSG) that outputs raw HTML/CSS by default. It uses an “island architecture” which strips away all client-side JavaScript unless you explicitly mark a component as interactive.
Why Astro?
- Unbeatable Performance: Perfect page speed scores out-of-the-box because pages load as static HTML.
- Type-Safe Content Collections: Astro allows you to define schemas for markdown and data directories using Zod. For this site, I configured type-safe schemas for both the blog posts (markdown files) and talks/presentations (JSON files).
- Component Flexibility: I can write layout components using standard HTML, CSS, and JSX-like syntax without forcing a massive JavaScript runtime down to the browser.
2. Infrastructure & Hosting: Firebase
To host the compiled static build, I chose Firebase Hosting. It sits on top of Google Cloud’s globally distributed CDN, which caches content close to the end-users for sub-millisecond connection speeds.
Deployment is integrated directly with GitHub Actions. Every time code is pushed to the repository, a CI/CD pipeline builds the Astro site, runs quality audits, and pushes the production assets directly to the live Firebase Hosting environment.
3. Dynamic Elements: Serverless Cloud Functions
While the portfolio is static, I needed a few dynamic features:
- Contact Form Processing: Sending form submissions securely without exposing private API keys on the client.
- Email Alerts: Triggering automated mail notifications to my inbox upon form submission.
To solve this, I built a serverless Cloud Function (written in Node.js/TypeScript) hosted on GCP. When a user submits the contact form, the static site sends an HTTPS request to this backend function. The function validates the data, authorizes the client, and uses the SendGrid API to route the message securely. It keeps the frontend lightweight and zero-ops.
4. Clientside Unified Search: Pagefind
Instead of spinning up a costly Elasticsearch instance or relying on external heavy API search services, I integrated Pagefind.
Pagefind is a static search library. During the build pipeline, after Astro compiles the pages, Pagefind runs on the static directory and builds a highly compressed, split search index. On the site, a unified Search page reads this index locally. When visitors search for topics like “Serverless” or “AI”, Pagefind retrieves results instantly (under 50ms) entirely on the client side, without any runtime API server costs.
5. Rich Design System & Animations
To provide a premium developer-oriented design, I built a custom design system using vanilla CSS:
- Glassmorphism: The header navigation bar uses
backdrop-filter: blur()to float smoothly over the content as you scroll. - Theme Persistence: Light and dark themes are managed via CSS variables. An inline blocking script in the
<head>checkslocalStorageorprefers-color-schemeto load the correct theme instantly, completely eliminating FOUC (Flash of Unstyled Content). - SVG Specialty Areas: Replaced standard emojis with custom, scalable, and responsive SVGs that react dynamically to theme changes and hover animations.
6. GitHub Presentations & Podcasts Integration
To keep my Talks & Presentations page up-to-date, I integrated a custom dataset detailing over 30 speaking sessions, workshops, and podcasts.
The list is rendered dynamically from Astro Data Collections. To elevate the user experience, the system parses the resource URLs to provide customized badges:
- Direct “Listen on Spotify” buttons with branding for podcast episodes.
- “Listen to Podcast” badges with headphone icons for other audio platforms.
- Responsive YouTube/Vimeo video embeds built directly into the presentation cards.
7. AI-Assisted Engineering: Collaborative Pair Programming with Antigravity
Perhaps the most modern aspect of this site’s development was the collaborative execution model. I didn’t write all of this code alone; I pair-programmed the entire site with Antigravity, a powerful agentic AI coding assistant designed by the Google DeepMind team.
Instead of acting as a simple auto-complete engine, Antigravity functioned as a proactive engineering partner:
- Feature Specification & Design: Assisted in writing the feature specification documents, architectural maps, and execution tasks to keep the project on track.
- Component Implementation: Wrote the Astro layout templates, interactive CSS theme toggles, and base wrappers.
- Refactoring for Quality: Replaced standard text emojis with modern, hand-crafted inline SVGs that render beautifully on all operating systems and devices, solving standard browser rendering inconsistencies.
- Dynamic Data Fetching: Created the automated pipelines and parsing rules to fetch, tag, and structure the 30+ presentations and podcasts from my GitHub repository.
- Unified Search: Coded the clientside Pagefind integration and mapped the Core Specialty Areas on the About page to pre-filtered query parameters.
This collaborative workflow demonstrates how human architects and agentic AI models can build robust, optimized web solutions in a fraction of the time.
Conclusion
This site represents my approach to modern web engineering: static-first, serverless-driven, heavily automated, and optimized for performance. By using Astro, Firebase, and Pagefind, the site delivers a rich, interactive, and responsive experience with zero server overhead.
If you want to see how a specific part of the system is coded, feel free to inspect the repository or reach out via the Contact page!