Refactoring with AI Agents

Welcome to the new look of hendrik.page! 🚀

If you've visited before, you might notice things look a lot different. Gone is the simple dark theme, replaced by an immersive, visually appealing environment. But the most interesting part isn't just what changed, but how it changed.

This entire redesign was built in a single session using advanced AI coding agents.

The Agentic Workflow

We often think of AI coding tools as fancy autocomplete—they finish your line or generate a function. But an agentic workflow is different. It's less like using a tool and more like pair programming with a tireless, highly skilled engineer.

I didn't just ask for "a space theme." We iterated:

1. Concept: I pitched the idea of a scientist exploring the code universe.
2. Execution: The agent refactored the Tailwind configuration, updated the CSS, and wrote the JavaScript for the particle system.
3. Refinement: We tweaked the particle speed, changed the "About Me" icon to an astronaut, and refined the typography to look like a terminal.

It was a conversation. I provided the vision and critique ("make the stars more subtle"), and the agent handled the implementation details.

Before & After

Let's look at the transformation.

The Old Design

The original design was clean and functional, but a bit safe.

The New Space Design

The new design leans fully into the persona. We have a full-screen starfield, glassmorphism styling, and "tech" details.

Technical Deep Dive

Here are a few technical highlights from the refactor.

1. The Interactive Starfield

The background isn't a video—it's a dynamic HTML5 Canvas animation. We used vanilla JavaScript to generate 80 "star" particles.

// A snippet of the star generation logic
this.size = Math.random() * 2; // Varying sizes for depth
this.speedX = Math.random() * 0.5 - 0.25; // Slow drift
this.color = 'rgba(255, 255, 255, ' + (Math.random() * 0.5 + 0.2) + ')';

We also added a parallax effect, where the stars shift slightly based on your mouse position, creating a feeling of 3D depth.

2. Glassmorphism

To make the content readable against the starry background without losing the vibe, we used Glassmorphism. This involves a semi-transparent background with a heavy backdrop blur.

.card-glass {
    background-color: rgba(30, 41, 59, 0.4); /* Translucent Slate */
    backdrop-filter: blur(12px); /* The "Frost" Effect */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

3. "Tech" Typography

To sell the "Scientist Coder" aesthetic, we switched the metadata (dates, tags) to a monospace font and reduced the size, mimicking the look of a technical readout or a HUD.

Conclusion

This refactor proved that AI agents can do more than just write code snippets—they can help architect a coherent design language and implement complex frontend features.

The blog is no longer just a collection of text; it's a reflection of the journey. Exploring the universe of code, one project at a time.