Portfolio Project

This portfolio is more than just a collection of work; it is a technical playground designed to explore the balance between static site performance and rich, dynamic interactivity.

Built on Astro, the site adheres to a “zero-JavaScript-by-default” architecture, selectively hydrating interactive “islands” only where necessary. This ensures lightning-fast load times while still allowing for complex creative coding elements.

Technical Highlights

1. The “No-Framework” Approach

All styling is handled via scoped CSS modules and a robust system of CSS variables (var(--bg-body), var(--text-main)). This keeps the stylesheet lightweight and maintainable while ensuring a unique, non-generic look.

2. Advanced Interactivity (GSAP & p5.js)

The site moves beyond static HTML through targeted client-side libraries:

• Generative Header: A custom p5.js sketch of falling sand creates a dynamic visual hook on the homepage.
• Draggable Elements: The “About” page features a playground of stickers powered by GSAP Draggable, allowing users to physically organize the chaotic elements of my personality. One of the stickers features an IPod that plays music when clicked.
• Micro-interactions: The navigation uses GSAP to create a fluid “ripple” effect that tracks mouse position, adding a tactile feel to the UI.

3. System-Aware Dark Mode

I implemented a comprehensive dark mode that respects user preferences automatically.

• Implementation: A blocking inline script in the <head> prevents the “flash of unstyled content” (FOUC) by checking localStorage before the page paints.
• Design: Colors are mapped to semantic CSS variables, allowing the interface to instantly switch from “Sand” to “Charcoal” without a single line of extra CSS for components.

4. Type-Safe Content Architecture

Leveraging Astro’s Content Collections, the site uses Zod schemas to strictly validate all project data.

• Image Optimization: The schema automatically validates and processes all project images using Astro’s image() helper, ensuring every screenshot is served in the most efficient format (WebP/AVIF) and size for the user’s device.
• Data Integrity: This prevents broken builds by ensuring every project has the required tags, dates, and descriptive text.

5. SEO & Social Discovery

The site includes a fully configured Open Graph (OG) protocol. Links shared on platforms like LinkedIn, WhatsApp, or Discord automatically generate a rich preview card with a custom thumbnail, ensuring the portfolio looks professional even before it’s clicked.