haraiyaa

Next.js
React
Tailwind CSS
Framer Motion

Portfolio site for illustrator haraiyaa (@haraiyaa_) — quiet pictures of ponds at dusk. A static, content-driven site with no database, CMS, or backend.

01At a glance

Role: Design + development
Type: Static, content-driven site — no database, no CMS, no backend
Stack: Next.js 16 (App Router) · React 19 · Tailwind CSS v4 · Framer Motion 12
Routes: 4 — Home, Gallery, About, Contact
Images: Placeholder images seeded from picsum.photos
Fonts: Fraunces (display) + Hanken Grotesk (body)
Tests: None — Playwright used for visual QA only

02Concept

“A pond, held at dusk.”

▪One blue hue, ramped across 10 steps (pond-50 → pond-900)
▪One warm accent (bill, marigold-yellow) — used sparingly, duck's bill only
▪No secondary colors. No green/red status colors.
▪Recurring mascot: a duck, built from the same tokens everywhere (nav, footer, scroll-to-top, contact card)

03Color

pond-50 · #eef6f8pond-50#eef6f8Text on dark buttons

pond-100 · #d6eaf0pond-100#d6eaf0Card surfaces, light borders

pond-200 · #a9d6depond-200#a9d6deSelection highlight, hero blobs

pond-300 · #6cc1ccpond-300#6cc1ccDuck body, gradients

pond-400 · #3fa6b5pond-400#3fa6b5Link underline, muted labels

pond-500 · #2d8295pond-500#2d8295Brand blue — links, eyebrow text

pond-600 · #246173pond-600#246173Hover states

pond-700 · #1d4b5dpond-700#1d4b5dBody copy tone

pond-800 · #163a49pond-800#163a49Nav text, footer icons

pond-900 · #0f2a43pond-900#0f2a43Headings, dark sections, CTA bg

bill · #f4b740bill#f4b740Single warm accent

canvas · #f6f9fbcanvas#f6f9fbPage background

ink · #0f2a43ink#0f2a43Body text

04Content model

Single source of truth: lib/artworks.ts

▪Artwork type: id, title, category, year, medium, seed, width, height, description
▪imageUrl() derives aspect-correct picsum URLs from seed + width/height
▪Homepage hero + featured grid reference artwork by hardcoded id — renaming an id silently breaks those

05Pages

Home

hero → stats row → featured grid → (commission band, disabled)

Gallery

category filters + CSS-columns masonry + lightbox

About

intro + timeline + dark artist-statement band

Contact

form + channels panel — built but unlinked from nav (hidden route)

07Motion

▪Reveal.tsx — shared entrance primitive: fade + directional slide, 0.7s, easing [0.16, 1, 0.3, 1], staggered by index
▪Respects prefers-reduced-motion — zeroes offset/duration instead of disabling
▪Cursor trail — two-layer custom cursor, dot + spring-trailing aura, pointer: fine only
▪Cursor color adapts to background luminance in real time, with hover-bloom on interactive elements

08Stack

Next.js 16.2.4: App Router
React 19.2.4: UI runtime
Tailwind v4: CSS-first theming, no config file
Framer Motion ^12: Animation
react-intersection-observer ^10: Scroll triggers
yet-another-react-lightbox ^3.32: Gallery lightbox

09Known gaps

▪Contact route built but unlinked from nav - client request
▪Contact form has no backend - client takeover
▪Favicon hardcodes colors instead of sharing design tokens
▪Gallery filter/lightbox state not URL-synced - no deep links
▪Commission CTA band commented out - client request