bydom.io

The site is the portfolio

After 24 years of building digital products for clients, I realized my own website was always the worst thing in my portfolio. Agency sites get attention. Client work gets polish. Personal sites get neglected. I wanted to change that by making bydom.io a project worth showcasing on its own terms.

The concept is simple: a personal digital lab that demonstrates the craft rather than just describing it. The Dark Editorial Lab aesthetic combines the immersive atmosphere of a creative studio with the typographic precision of agency work. Every interaction, every animation, every micro-detail is intentional.

Why this stack

Astro 6 was the obvious choice for a content-driven site with interactive islands. The homepage is mostly static HTML and CSS, which means it loads fast and scores well on Core Web Vitals. But the particle portrait hero needs WebGL, and the scroll animations need JavaScript, so those sections hydrate as React islands using client:load and client:visible directives.

---
// The island pattern: static Astro shell, interactive React islands
import ParticleHero from "../components/ParticleHero";
import ScrollAnimations from "../components/ScrollAnimations";
---

<section id="hero">
  <!-- Only this component ships React + Three.js to the browser -->
  <ParticleHero client:load />
</section>

<section id="projects">
  <!-- Hydrates only when scrolled into view -->
  <ScrollAnimations client:visible />
</section>

Content lives in MDX collections with Zod-validated frontmatter. Projects and journal posts are just markdown files in a folder. No CMS, no database, no API layer. The content pipeline is the file system.

Built with Claude Code

This entire site is being built collaboratively with Claude Code using a phased execution system. The design spec defines every section, token, and interaction. The implementation plan breaks it into phases. Claude Code executes each phase while I review, direct, and make creative decisions.

It is a different way of working. Instead of writing every line, I architect the system and guide the implementation. The speed is remarkable. What would take weeks of evening-and-weekend coding compresses into focused sessions measured in hours.

What is coming

The current version has the foundation: layout, typography, content pipeline, and responsive design. The roadmap includes three major additions.

First, the particle portrait hero: a Three.js scene that renders a photo as 25,000 interactive particles using React Three Fiber. Mouse interaction disperses the particles, and scrolling triggers a scatter animation. Second, GSAP-powered scroll animations that bring sections into view with the editorial confidence the design demands. Third, kinetic typography layered on the hero section for v1.1.

The site will keep evolving. That is the point. It is a living lab, not a finished product.