7xz

work / fora

FORA

A portfolio site for FORA, a composer working in fantasy and narrative scoring: KO/EN toggle, responsive, an audio player, SEO.

Year
2026
Category
web
Stack
HTML · CSS · Vanilla JS
Status
shipped
Demo
https://forapreview.netlify.app/

A composer’s portfolio is entirely about getting people to listen. The client is FORA, who writes fantasy and dark background music. What was needed was a static site, light and without a framework, that plays the key tracks straight away, serves both Korean and English visitors, and shows up in search.

This was commission work. The client supplied the tracks, the brand imagery, and a brief; the site design and build were mine.

FORA homeFORA about and work experience

How it was built

Plain HTML, CSS, and vanilla JS, with no build step. The brief asked for a one-page site with Home, About, Portfolio, Services, Process, and Contact, five featured tracks with genre and mood tags, one fantasy track shown as video, and a way to keep the list current without a developer.

The audio player draws a live frequency visualiser with the Web Audio API; the featured fantasy track is a YouTube embed; sections reveal on scroll with IntersectionObserver. There is a KO/EN toggle, a responsive layout, and meta tags plus OG images for SEO. The five tracks and the credits list both live in portfolio-config.js, so the client edits one data file to update either.

Where it stands

Deployed statically to forasound.com; the client let the domain lapse, so it’s since gone offline. The build itself is unaffected — it’s live again at the Netlify preview. The repo was handed to the client, so there is no public copy. Because the track config is a data file, the client can maintain it without touching code.

esc
  • Pages

    • Home page
    • Work page
    • Log page
    • About page
    • Now page
    • Colophon page
    • Search page
    • lab · live neural network page
  • Work

    • 7xz Lab 2026 · live work
    • Neural network foundational theory 2026 · research work
    • Context-Aware Zone Alert 2025 · shipped work
    • FORA 2026 · shipped work
    • Discord Components V2 Reference 2026 · reference work
    • News Credibility Auditor 2025 · archived work
  • Log

    • AI 딥보이스 탐지 대회 참가 기록, DACON 2026.09.29 · research log
    • 이론적 아름다움과 유체역학으로 가지치기를 시도, NavierFlow 2026.05.18 · research log
    • AI STT앱 개발 시도기, Project L mate 2026.03.04 · project log
    • 포트폴리오 사이트 구축기 2025.11.30 · project log
  • Actions

    • Toggle theme action
    • Toggle content language (KR / EN) action
    • Search everything action