NOA

Site

2026.04

In Progress

NOA-NOTES Dev Journal

A running log of design and engineering decisions made on this site itself.

A journal tracking the design and engineering of this site (NOA-NOTES). The focus is on the why behind each change, not just the what.

2026.04 — Hero and Navbar redesign

Removing the Hero copy

Removed "夢想、設計、実装、発信。" (Dream, Design, Implement, Publish.). It was just narrating what the site itself already shows — adding nothing. Moved "— Personal Portfolio —" directly below the title instead. The reading order now flows naturally: "NOA-NOTES = Personal Portfolio."

Navbar breakpoint change

Changed from sm (640px) to min-[900px]. With five Japanese nav items, the layout broke visually below ~800px. The hamburger now takes over below 900px.

Removing the divider

Removed the ｜ separator between nav links and the search button. The search button's border rounded-full pill shape provides enough visual separation on its own.

Hamburger menu spacing

Reduced item gap from gap-[var(--space-lg)] (42px) to gap-0. The py-3 touch target already handles the spacing — extra gap was redundant. Padding for the search and language switcher sections unified to py-3 (symmetric top and bottom).

SearchOverlay fixes

  • Added 250ms debounce on search input (previously fired a request on every keystroke)
  • Added response.ok check before parsing JSON
  • Replaced hardcoded bg-[#FAF9F6] with bg-canvas