NOA-NOTES Dev Journal

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