Rebuilding the Portfolio with Astro

The previous portfolio was a single index.html file — functional, fast, and easy to maintain. But it was time to evolve: Markdown blog, React for interactive components, Three.js for 3D animation, and Tailwind for styling.

Why Astro?

Astro is a static generation framework that lets you mix components from different frameworks (React, Svelte, Vue) without shipping unnecessary JavaScript to the client. The islands architecture philosophy means only the components that need interactivity become JavaScript in the browser.

For a portfolio, this is ideal:

• Static content (text, projects, bio) is pure HTML — loads fast and indexes well.
• Interactive components (the carousel, the Three.js scene) become “islands” with client:load.

The Three.js Animation

The 3D scene uses three independent groups rotating at different speeds and directions:

1. Core — wireframe icosahedron with rings, representing a system’s central structure.
2. Orbital — nodes connected by lines, like a dependency graph.
3. Satellites — external points orbiting in the opposite direction.

Mouse interaction slightly moves the camera, creating parallax without overwhelming the user with animation.

Markdown and Blog

With Astro’s content collections, any .md file in src/content/blog/ automatically becomes a route. Zod-typed frontmatter ensures every post has a title, description, and date.

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});

JetBrains Mono

The font this project needed from the start. Monospace, with ligatures, readable at any size. It replaces the three fonts the previous prototype used with a single cohesive family.

---

Next steps: more projects, case studies, and keeping both language versions in sync.