Cloud & SRECASE STUDY // PORTFOLIO-INFRASTRUCTURE

Production Portfolio & Zero-Downtime Cloud Architecture

Engineered a high-performance, accessible, and ultra-fast personal portfolio website utilizing modern Next.js static export architecture and Google Cloud Firebase Hosting.

Role: Architect & Engineer2026 Production Build

95+ Across All

Target Lighthouse

$0 (Free Tier / Low-Cost)

Hosting Cost

100% Automated

Deployment

Google Global CDN

CDN Edge

Problem & Engineering Context

Previous personal portfolio hosted on legacy template platforms lacked modern aesthetic polish, engineering credibility, technical depth, theme flexibility, and automated CI/CD deployment pipelines.

As a Cloud/SRE engineer, the personal website itself should reflect core engineering values: extreme reliability, fast loading times, clean architecture, zero-downtime deployment, and thoughtful UI polish.

Strategic Approach

Built from scratch with Next.js App Router, TypeScript, and Tailwind CSS. Configured static asset generation with immutable caching headers deployed globally via Firebase Hosting and GitHub Actions.

Technical Architecture

Global Edge Hosting Pipeline

GitHub Actions validates type safety, lints code, and runs static export builds before deploying assets to Google Cloud / Firebase Hosting edge nodes.

Strict TypeScript typing across all content, components, and route parameters.
Dual-theme CSS custom variable architecture with zero flash of unstyled content (FOUC).
Static compilation with zero runtime server overhead for maximum security and minimal latency.
Automated deployment trigger on main branch merge with custom domain SSL termination.

Implementation Details

01.Created modular component hierarchy (Navigation, Hero, Metrics, Experience, Projects, Skills, Certifications, Blog, Contact, Footer).
02.Implemented an interactive SVG/Canvas telemetry signal visualization simulating distributed systems health.
03.Configured automated GitHub Actions workflows for continuous integration and Firebase deployment.
04.Engineered comprehensive SEO metadata, dynamic sitemaps, robots.txt, and OpenGraph social cards.

Key Challenges & Resolutions

Achieving rich, dynamic interactions and telemetry animations while maintaining top-tier Lighthouse performance and WCAG AA accessibility.

Ensuring responsive layout perfection across mobile, tablet, and ultra-wide displays.

Measurable Outcomes

Blazing-fast global load times served via Google Cloud's worldwide CDN.

Seamless dual-theme switching respecting user system preferences.

Extensible Markdown/MDX content architecture making future articles and project additions effortless.

Key Engineering Takeaways

💡 A personal portfolio should be engineered with the same quality standards, automated testing, and CI/CD rigor as enterprise production applications.

TECHNOLOGIES EMPLOYED

Next.js 14TypeScriptTailwind CSSFirebase HostingGoogle CloudGitHub ActionsFramer Motion

Other Engineering Case Studies

Observability

Observability as Code (OaC)

Enterprise-scale Terraform-driven automation for managing 400+ alert conditions and 100+ production dashboards with zero drift.

Observability

Payments Reliability & Golden Signals Telemetry

End-to-end distributed tracing, golden signal telemetry, and proactive anomaly detection for mission-critical payment processing pipelines.