MILEZ

MILEZ is a media project founded by Japanese actor Junichi Okada, dedicated to spotlighting Japan’s traditions, craftsmanship, and culture for audiences both in Japan and abroad. I served as the web production lead, managing client communication, budget, schedule, and technical direction while collaborating with specialists in design, front-end development, and sound design. I also handled backend development and continue to maintain the site.

The core concept was to make each article feel more spatial than a standard web page. WebGL-driven fluid animations run through page transitions and scroll interactions, giving the interface a continuous visual texture. Each article can also trigger ambient audio tied to its subject, such as field recordings or environmental sounds, so the reading experience can be supported by both image and sound.

Within each article, photos and footage are shown at a large scale, with parallax, horizontal scrolling, and WebGL-based filters layered on top. The goal was to give editors a richer presentation system without making every article a one-off build.

The article index is built as an infinitely rotating interface, with thumbnails arranged in a ring that loops continuously. Instead of a conventional archive grid, visitors can keep rotating through the list and discover articles one by one. This carries the visual language of the homepage into navigation while still keeping the archive simple to browse.

The site’s background textures draw from the work of kamisoe, a Kyoto-based karakami (decorated paper) studio run by artist Ko Kado in Nishijin. Handcrafted using traditional woodblock printing techniques, the washi paper brings a quiet, tactile depth to an otherwise digital experience. Photography of the paper was handled by Tokyo-based photographer Kai Tamaki.

Because the client produces photo, video, and audio content in the field, delivering that media reliably across different network conditions was a central technical challenge. I implemented a layered optimization strategy with asset compression, lazy loading, and progressive rendering, so high-quality media could remain practical on mobile connections.

The site is built on Astro.js with a headless setup powered by microCMS. Content is fetched from microCMS at build time, generated as a fully static site, and served from Cloudflare Pages’ CDN. Whenever content changes, a webhook triggers GitHub Actions to rebuild and redeploy automatically — balancing editorial ease for the client with full flexibility on the development side.

This static-first architecture feeds directly into performance, too. With no server-side processing in the request path, pages are delivered straight from the CDN edge, keeping initial load light even on a site this heavy with WebGL and high-quality media.

To keep interested readers connected to the project over time, I also built out a simple newsletter system. Email delivery runs on Resend, with signups captured straight from the on-site form and managed as a single reader list.

The editorial team can prepare and send each issue from their dashboard without developer involvement in day-to-day operation. By leaning on Resend for delivery and list management, the setup keeps deliverability and infrastructure maintenance out of the custom codebase while supporting regular publishing.