← Back to blog

Building this site

There’s something meta about writing the first post of a blog about the site that hosts the blog. I’ll try not to get lost in the recursion and just record the decisions I made building alysson.dev.

Stack

Astro 6 with static output, MDX for posts, Motion (motion/react, formerly Framer Motion) only where animation needs JavaScript, plain CSS with variables on :root, and Bun as the package manager. No Tailwind, no preprocessor, no bigger framework - the site needs to serve as a craft showcase and minimal dependencies fits that goal.

Configuration is in astro.config.mjs. The only integrations I needed were @astrojs/mdx, @astrojs/react (for motion islands), and @astrojs/sitemap (for SEO).

The “Alysson” signature

This is the effect that opens the homepage. Rendered from the SVG paths of the Pacifico letters (extracted via opentype.js), with motion-react animating pathLength + fillOpacity per glyph with a stagger.

Pacifico was chosen to match the logo on my resume. The effect is not true centerline calligraphy (think Apple’s “hello” animation) - the stroke traces the outline of the filled letters, then the fill comes in. A pure centerline approach would require an SVG hand-drawn letter by letter.

Splash with SEO in mind

The first thing on page load is the signature block centered in the viewport, and on mobile it morphs down to “Aly” size during the transition to the top via CSS keyframes. That would be terrible for LCP if it ran for everyone - Lighthouse would measure invisible content for ~4 seconds.

The fix: gate the splash via inline JavaScript in <head>:

if (!isBot && !prefersReduce && !sessionStorage.getItem('seen-splash-v1')) {
  document.documentElement.dataset.splash = '';
  sessionStorage.setItem('seen-splash-v1', '1');
}

And every splash CSS rule is gated by :global(html[data-splash]):

:global(html[data-splash]) .signature-stack {
  animation: hero-settle 0.85s cubic-bezier(0.4, 0, 0.2, 1) 3.4s both;
}

Result: bots, Lighthouse, repeat visitors (same session), and users with prefers-reduced-motion get the page in its natural layout immediately. Only fresh human visitors see the splash. It’s not cloaking because the HTML served is identical in every case - only the entrance animation differs.

Next steps

The site keeps evolving. On the radar: