Log Horizon — Studio Portfolio

A cinematic, atmospheric single-page portfolio for Log Horizon, an independent creative engineering studio. Built for clients — not developers — with dark glassmorphism, procedural ambient audio, and a smooth video scene switcher.

• Hero — Studio positioning and primary CTAs
• Selected Work — 11 curated projects filterable by category
• Scope Planner — Realistic delivery estimator with dynamic timeline weights
• About — The Log Horizon generalist engineering ethos
• Technical Essays — Field notes and deep-dive articles
• Contact — Direct email and social links

The entire visual language lives in src/styles/index.css.

• .liquid-glass — dark frosted glass surface for all cards
• .liquid-glass-pill — compact variant for nav and toolbar
• .liquid-glass-interactive — adds hover lift (disabled on touch devices)
• font-display — Instrument Serif (headings)
• font-body — Inter (body copy)

The ambient mountain breeze is built entirely with the Web Audio API — no audio file, no CDN dependency. It uses a brown-pink noise buffer routed through a 480 Hz bandpass filter with a 0.06 Hz LFO for natural wind speed variation and a 0.09 Hz swell oscillator for gust dynamics.

The AudioContext is created synchronously inside the first click handler — the only pattern that reliably clears browser autoplay policy on Chrome, Safari, and Firefox.

Click the speaker icon in the bottom-right toolbar to start it.

npm install
npm run dev

Tests:

npm run test

Production build:

npm run build

The dist/ output is static and can be deployed to any CDN, Vercel, Netlify, or traditional web server.

MIT — Log Horizon Studio