My Website | Projects

When I decided to build my new website, I had a clear premise: I didn’t want to make just another portfolio; I wanted to build a laboratory. A digital space that wouldn’t just show what I’m capable of doing, but where the site itself was the demonstration of those capabilities.

I wanted it to be ridiculously fast, bilingual from its conception, type-safe, and visually immersive, all without sacrificing a shred of accessibility. This is how I designed the architecture of this project.

1. The Search for Radical Performance: Why I chose Astro

The problem with most modern frameworks (like pure React or Next.js) is that they often send too many “megabytes” of JavaScript to the browser just to display a static home page. This affects load times, especially on mobile devices.

The solution was Astro v5. Astro changes the game with its “Islands” architecture. By default, the site compiles as static HTML (Zero JS). The browser doesn’t have to download or execute heavy JavaScript bundles unless there’s an interactive component that strictly needs it. This ensures perfect Core Web Vitals scores and near-instant loading, crucial for user retention.

To maintain the fluid feel of a Single Page Application (SPA) without losing the benefits of Astro, I implemented the ClientRouter. This allows for smooth page transitions (View Transitions) without reloading the browser, giving it a native app feel.

2. Write Once, Render in Two Languages: i18n Architecture

Supporting Spanish and English couldn’t be a last-minute “patch”; it had to be the core of the routing.

To avoid the nightmare of duplicating code, I designed an abstraction pattern:

The physical routes (src/pages/ for Spanish and src/pages/en/ for English) act solely as “routers”.
The actual logic for each page lives in src/components/pages/.
This means that if I update the home page design, I do it in a single file, and both language versions inherit the change immediately.

A strongly typed centralized dictionary (ui.ts) ensures that every UI text is translated correctly, while the SEO component dynamically injects hreflang tags so that Google understands exactly which version to show each user without penalizing for duplicate content.

3. The Design System: Tailwind CSS v4 and the Dark Mode Obsession

For the design, I used the latest version of Tailwind CSS v4. Its new engine drastically simplifies configuration (it now lives entirely in pure CSS using @theme) and allows for extremely agile development under the Mobile-First principle.

But the real UX challenge was Dark Mode. Nothing ruins an experience more than the dreaded Flash of Unstyled Content (FOUC) —that white flash on the screen before the site realizes you prefer dark mode—. To solve this, I wrote a super-lightweight blocking render script directly in the HTML <head>. This script checks localStorage or system preferences and applies the theme before the browser paints the first pixel on the screen.

Additionally, I introduced a Theme Forcing system: immersive pages, like my links section (Link.me), can be forcibly locked in dark mode to preserve the original artistic intent regardless of the user’s global preference.

4. Flexing with Raw JavaScript

A good framework gives you structure, but raw JavaScript (Vanilla JS) demonstrates true mastery. I decided to include two complex technical pieces built from scratch:

The 3D Galaxy Engine: Instead of importing a heavy 3D library, I built a particle engine directly on an HTML5 <canvas>. It uses logarithmic spiral arm mathematics, 3D isometric projection, and 60fps rendering (via requestAnimationFrame) to create a dynamic and fascinating background. It’s a demonstration of direct graphical performance in the browser.
60fps Collision Detection: The tech stack carousel on the home page doesn’t use simple CSS hover effects. I implemented a raycasting algorithm (document.elementFromPoint) that runs every frame. This allows the site to know exactly which tech icon your cursor is over, even if you don’t move it and it’s the carousel moving beneath it. When a collision occurs, the brand’s exact color (e.g., orange shadow for HTML, blue for TypeScript) is dynamically injected.

5. Content as Data: Zod and Content Collections

Finally, blog and portfolio management had to be error-proof. I use Astro’s Content Collections backed by Zod schemas.

This transforms my Markdown files into a safe database. If I try to publish a project and forget to add the icon or description field, the build process fails and notifies me immediately. This eliminates silent errors in production. Additionally, a custom plugin intercepts the Markdown during compilation to automatically calculate the reading time for each article.

Conclusion

This website is my business card. Not just because of the content it hosts, but because every layer of its architecture —from the absence of unnecessary JavaScript to the 3D engine mathematics and content type-safety— was intentionally designed to build a robust, maintainable, and exceptionally fast digital tool.