AfterDay Project — About This Site

Overview

For a long time, I wanted to run a personal project completely separate from work. After thinking about the direction for a while, one principle became clear.

“Time that belongs only to after the day is done.”

Fully disconnected from work — a space to document the things I’m curious about, want to build, and want to grow from.

That’s how AfterDay Project began.

This post is an attempt to organize the process and the thinking behind it.

What the site contains

The first question was: what goes in it? It came down to three pillars.

Tools

There are utilities that come up again and again in development. Every time, having to search and navigate through ad-heavy sites to use them got old.

The thought came naturally:

Why not just build them myself?

The tools currently here include:

Password generator
Unix timestamp converter
IP address lookup
Image optimizer

More will be added as they become useful.

Daily UI

A space for building UI components one by one.

Interesting interactions I come across at work or during research — I implement them, experiment, and write them down.

This is less a place to show finished results and more a lab where process accumulates.

Insight

A place to record what I notice while working on things.

Problems I wrestled with at work
Thoughts on technology choices
Realizations from moving through a fast-changing industry
Honest reflection on what went well and what didn’t

The hope is that as these stack up, they’ll shape a clearer sense of direction.

Technology choices

Next.js → Astro

I started with Next.js (React) since it was familiar. The routing made sense and I could use what I already knew.

But over time, some friction started showing.

Bundle size grows even when client-side JS is barely needed
Managing Markdown-based content is clunky
Treating it as a purely static site comes with limitations

The conclusion was clear.

Next.js is overkill for this project.

So I switched to Astro.

Astro is optimized for static sites while still allowing React, Vue, or Svelte when needed. The idea of staying lean by default and only adding what’s actually necessary fit this project well.

Tailwind CSS v4 setup

Astro’s official Tailwind integration is for v3, so v4 requires a manual setup.

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

In the CSS file, one line is enough.

@import 'tailwindcss';

Node.js version issue

Astro 5 uses Vite 8, which depends on rolldown — a native bundler that requires Node 20 or higher.

The existing environment (Node 21.7.3) wouldn’t run it, so I pinned Node 22 using Volta.

volta pin node@22

Content Collections API change

In Astro 5, entry.render() was deprecated. The new way is to import render from astro:content directly.

import { render } from 'astro:content';
const { Content } = await render(entry);

Canvas API for image processing

Image optimization, cropping, and favicon generation are all handled with the Canvas API.

No server upload needed
Better for privacy
No serverless environment constraints

Multilingual support

Japanese is the primary language, with Korean and English also supported.

Using Astro’s [lang] routing and a simple utility, it was possible to implement without reaching for an i18n library.

Markdown-based content

Adding a file to src/content/insight/ automatically generates a listing entry and a static page.

A tricky part of Daily UI

Getting the iframe demo preview to work inside Daily UI cards was harder than expected.

function updateIframeScales() {
  document.querySelectorAll('.scale-wrapper').forEach(wrapper => {
    const scale = wrapper.offsetWidth / 1280;
    wrapper.querySelectorAll('.demo-iframe').forEach(iframe => {
      iframe.style.transform = `scale(${scale})`;
    });
  });
}

Going forward

At this stage, consistency matters more than adding features.

Keep adding content steadily
Expand the tools bit by bit
Don’t stop writing

This project isn’t aimed at a finished state. It’s closer to a space that keeps changing and accumulating.

True to the name AfterDay — how the time after the day ends gets used is what shapes the direction of this site.