Mission & Vision

This portfolio is not just a business card; it's a technical demonstration ecosystem. The goal was to build a platform that serves as a real-world example of modern front-end architecture: modular, high-performance, and purely based on web standards.

Architectural Strategy

I used Astro 5.1 as the main engine. The choice is based on its Islands Architecture pattern, which allows the site to be 100% static by default, selectively hydrating only interactive components (like the language switcher or timeline animations).

  • SSG (Static Site Generation): The site is pre-rendered at build time, guaranteeing instantaneous response times.
  • Zero JS by Default: Minimizes client-side execution cost, eliminating the "hydration bloat" typical of other frameworks.
  • Internationalization (i18n): Robust multi-layer implementation for scalable ES/EN support.
Project Architecture Diagram Flow from Client to Cloudflare, Nginx and Astro Static Content Visitor Browser HTTPS/2 Cloudflare Edge Network DDoS Protection SSL Termination VPS (Ubuntu) Nginx Reverse Proxy :80 / :443 Astro SSG Build Container :3000

AI Augmented Engineering (Agentic Coding)

The construction of this ecosystem has been an exercise in Agentic Augmented Engineering. By using Gemini 3 Flash alongside the Antigravity engine, the development process has transcended simple code autocompletion.

Antigravity: The orchestrator that allows the agent to reason about the entire codebase, execute tests in real-time, and propose complex architectural refactors.

Gemini 3 Flash: The cognitive brain capable of understanding deep technical requirements and generating fluid layouts with surgical precision.

Performance & Core Web Vitals

Optimization was not optional, but the main driver of the design. We continuously monitor with Unlighthouse to ensure a score of 100 across all metrics.

100 Performance
100 Accessibility
100 Best Practices
100 SEO
<500ms Load Time
0ms TBT
0 CLS

Applied techniques: Astro's native image optimization, inlined critical CSS, and local fonts via `font-display: swap`.

Custom Design System (Vanilla Design)

Instead of using preconfigured utilities, I opted for a "Vanilla" Design System based purely on native CSS and design tokens.

  • Synthetic Dark Mode: A high-contrast color palette based on pure blacks and energy accents (`#10B981`).
  • Glassmorphism: Use of `backdrop-filter` to create visual hierarchy without bloating the payload.
  • Fluid Typography: Dynamic typographic scales calculated with CSS math functions (`clamp`).

Quality & Testing

Maintainability is ensured through a continuous QA strategy:

  • Unit Testing: Implementation of unit tests with Vitest for translation engines and business logic.
  • Style Rules: Strict CSS and TypeScript rules to maintain a consistent and scalable codebase.
  • UX Audit: Usability testing to ensure scroll animations do not interfere with fluid navigation.

Infrastructure & CI/CD

The deployment pipeline completely automates the cycle from commit to production.

  • GitHub Actions & GHCR: Automated build and publishing of optimized Docker images.
  • Watchtower: Orchestrator on the VPS that detects new versions and updates containers with Zero Downtime.
  • Nginx & Cloudflare: Security and performance layer with reverse proxy, strict SSL encryption, and global acceleration.
CI/CD Pipeline Diagram Automated deployment flow from GitHub Push to Production Server via Watchtower GIT Push main Actions Build & Test GHCR Docker Image Production Server Watchtower Check Update Web App Restarted Docker Compose

Project Tech Stack

Astro 5.1
Vanilla CSS 3
Gemini 3 Flash
Antigravity
Vitest
Unlighthouse