2026 Blog Site Update

2026 Blog Site Update

Time for another round of spring cleaning on the blog. Every couple of years I find myself staring at the old site thinking "it's time," and this year that feeling hit hard. The old design was starting to feel safe — too safe. So I blew it up and started over.

Let's talk about what's new.


The Stack

Here's what I landed on:

  • Framework: Next.js (App Router, v16)
  • Language: TypeScript
  • Runtime: Bun
  • Styling: Tailwind CSS + shadcn/ui
  • Animations: Framer Motion
  • CMS: Notion API
  • Data Fetching: TanStack Query
  • Code Highlighting: Shiki
  • Deployment: Vercel
  • Nothing too shocking if you've been following along. I've been a Notion junkie for years and I'm still using their API as a headless CMS — it works really well for my workflow since I'm already living in Notion anyway. I write blog posts and manage my reading list right there in Notion, and the site just pulls it in. It's a low-friction setup that I keep coming back to.

    The bigger change this cycle was embracing the Next.js App Router fully. No more hedging. Server Components are great and I'm leaning into them.


    Bun

    I switched my runtime and package manager over to Bun. The speed improvements are real — installs are noticeably faster, and the dev server feels snappier. It's a drop-in replacement for Node in most cases, so the migration was painless. If you haven't tried it yet, give it a shot.


    shadcn/ui

    This is the big addition on the component side. Rather than rolling my own component library from scratch (again), I reached for shadcn/ui. If you haven't used it before, the concept is a little different from a traditional library — you own the components. You copy the source into your project and modify them freely. That means no fighting against a library's opinions; you're just working with code you control.

    Combined with Tailwind, this gives me a solid design system baseline without locking me into anything.


    The Design: Mathematical Brutalism / Refined Drama

    This is where it gets fun.

    I was tired of looking at safe, rounded, "modern" design. Everything on the web looks the same right now. I wanted something that felt like me — someone who sits at the intersection of art, math, and code. So I pushed the design toward what I'm calling Mathematical Brutalism / Refined Drama.

    What does that actually mean?

  • Extreme typography scaling. Headlines are big. Like, really big. The kind that take up the whole viewport and make you feel something.
  • High contrast. No muddy grays. Clear, intentional color pairings.
  • Asymmetric layouts that break the grid. Not in a chaotic way — in a deliberate, considered way.
  • Subtle noise textures. Adds tactility without being distracting.
  • Refined motion. Animations should feel intentional, not gratuitous.
  • Framer Motion powers most of the animation. I also took the time to implement LazyMotion with the domAnimation bundle to keep the client-side JavaScript footprint lean. The bundle size matters, especially on first load.


    What's on the Site

    Blog

    Still here, still powered by Notion. Blog posts are written in Notion pages, pulled via the API, and rendered using a custom NotionRenderer component. It handles blocks, code snippets (with syntax highlighting via Shiki), images, and all the usual Notion content types.

    Reading List

    This is one of my favorite parts of the site. I maintain a Notion database of every book I read, and the site pulls it in and displays it. It's a simple thing but I love having a public record of what I'm reading. The book cards have a nice staggered entrance animation that I spent way too long tweaking.

    Music

    I'm a musician outside of the day job, so I added a music showcase page. It pulls in my tracks and gives them room to breathe — album art, waveforms, an audio player. The audio player gave me some grief on mobile (audio always does), but I eventually got it responsive across all screen sizes.


    Accessibility and Performance

    After shipping a first version, I ran a full accessibility audit and addressed the issues that came up — ARIA attributes, keyboard navigation for interactive elements, focus management. It's easy to deprioritize this stuff, but it matters.

    On the performance side, image handling got some love too. Nothing worse than images popping in as blank boxes and then suddenly appearing. I added skeleton loaders and proper loading states so the experience is smoother.


    Deployment

    Deployed on Vercel as always. Push to main, done. It's still the easiest way to ship a Next.js app and I have no desire to complicate that part of the process.


    What's Next

    A few things I have my eye on:

  • The /lab page. I have a hidden experiments section that I want to start populating with interactive demos and creative coding projects.
  • More writing. The whole point of rebuilding the blog is to write more. We'll see how that goes.
  • That's the tour. If you have questions or want to dig into any part of the stack, hit me up on Bluesky or GitHub.

    Thanks for reading.

    CL

    Chad Lumley

    Creative Technologist

    Staff Frontend Engineer, artist, and musician exploring the intersection of mathematics, design, and code. Writing about creative technology and the spaces where disciplines collide.