System Requirements Document for creative-portfolio

1. Introduction

This document specifies a one-page portfolio website for Jassinta Roid Triniti, a Social Media Specialist, Content Creator, Videographer, and Graphic Designer based in Indonesia. The site is a playful, girly, textured personal portfolio built around the metaphor of a school locker that opens into a scrapbook of a life's work — paper, stickers, washi tape, torn edges, and candy colour.

The product intent is to give brand owners, agency recruiters, and potential clients (reached primarily through Instagram and TikTok) a single scrollable destination where they can understand Jassinta's capabilities, review her writing, photography, magazine art, strategy, campus projects, podcast work, and archive, and reach her contact section. The site must be ready to deploy on Vercel.

The audience is the anonymous portfolio visitor — a recruiter, brand owner, or prospective client — plus the portfolio owner herself, whose work and credentials are represented, and a visitor who uses the interactive Magazine Art workspace to compose a fashion magazine collage.

2. System Overview

The product is a single-page, colour-blocked, scroll-driven portfolio. It opens on a full-viewport bank of five CSS-3D school lockers. The centre locker carries the hero headline and an "OPEN ▶" button; activating it releases the scroll lock and reveals the locker contents, which act as navigation into paper overlays for credentials, photography, letters, strategy, and notes. Below the opening, the page continues through nine named sections in a fixed order, each with its own ground colour, typography treatment, and collage composition.

All content is first-party and publicly reachable; there is no account, login, or role-based permission model. The site is a static front-end deployed to Vercel, with assets served from public/assets/. Interactive state that must persist during a session (the Magazine Art composition) is local to the active interaction; the export is a PNG produced in the browser.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The portfolio is a first-party, publicly accessible website. Every page and overlay is owned by the application and reachable without identity establishment. There is no sign-in, no account creation, and no differentiated permission model — the source establishes no shared product state that different participants control differently. The only durable, participant-specific state is the Magazine Art composition, which is local to the active interaction and exported as a PNG; it is not bound to an account.

Current boundary. The current product is the one-page portfolio described in this document: the Opening locker bank, the nine named sections, and the seven locker-item overlays (Participation, Achievement, Magazine Art, Photography, My Message, My Strategy, Notes). All of these are current.

Future boundary. Sections 10–15 of the source brief (Content Marketing, Example Strategy, Project Campus, Podcast, Archive, Contact) are named in the navigation order and given ground colours, but their detailed content was not supplied. They remain current destinations in the navigation and page contract; their internal content is not specified here and must not be invented. Any future expansion of those sections is out of scope for this document.

Exclusions. No adjacent account management, no authentication, no CMS, no server-side data store, no analytics dashboard, and no capability beyond the accepted portfolio presentation and the Magazine Art composition/export are in scope.

2b. Source Content Inventory

The following content is supplied by authoritative content_source attachments and must be reproduced verbatim where indicated.

My Message letter script — the letter body is used exactly as attached, with blush highlighter applied to quotes, closing line "Let's create something worth remembering" set in Sentient bold italic hot-pink, and a signature.

Writing Portfolio hero narrative — the hero narrative text is used exactly as attached.

11 writing works — titles, dates, and URLs are used exactly as attached, grouped as:

• Independen Media ×4
• innalar.com ×4
• Ikapunija Media ×3 (2024, no online link)

2c. Page Content and Component Coverage

Opening

• Information/state: Five CSS-3D lockers in steel-lilac #B9B8CC against a powder-pink #FDE4EC wall with a rose-quartz #F7CAD0 floor and static confetti. Door ratio 1090:2500, height 80–88svh, outermost lockers may be cropped. Perspective 1800px. Realistic volume: ceiling, three walls, thick shelf, frame, slab door, recessed vent, embossed handle/lock/number. Centre locker carries four lines of Sentient set in cqw units, each word on its own rotated (±1–2°) colour block: "Content that" Regular on bubblegum #FF8DC7 and baby-blue #BFE3F5; "is Felt," Bold Italic on butter #FFF1A8 and lilac #D4C1F5; "Shared," Bold on pastel-mint #A8E6CF; "Remembered" Italic on peach-fizz #FFB38A. "OPEN ▶" sticker button beneath. DM Mono labels.
• Primary action: Activate "OPEN ▶".
• Supporting actions: Horizontal scroll-snap on mobile with dots 1–5; pointer parallax ±3°; idle sway on mobile.
• Domain entities: Locker, door, shelf, item, section.
• Component responsibilities: StickerButton for OPEN; TocInline (2 columns) on the open state; Overlay for item destinations; HoverLabel for item labels.
• States: Loading — locker volumes render progressively. Empty — not applicable. Success — confetti ≤24, pink glitter paper-wipe 500–700ms, scene change, items pop in progressively, scroll-lock released, focus moved. Error/recovery — reduced-motion collapses to a 250ms crossfade. No TornEdge on this section.

Personal Brand

• Information/state: Pure-white #FFFFFF ground (mandatory). Hero: Anton left-aligned, line-height 0.9, clamp(3.5rem,2rem+9vw,11rem), reading "WHICH / COMPANIES / HAVE I / WORKED / FOR?" with slow parallax; photo right with medium parallax. DocumentCanvas holds ten physical papers: 1px black border, 3–4 layer shadow, grain, rotations -3, 4, -5, 2, 3, -2, 5, -4, 1, -3, "01 / 10" numbering, tag, REF-ARC-00X, staple-red staple, logo contain with monogram fallback. Companies: Elsthetic, Elspresso, Aishi Aesthetic Academy, Karamina Tour, ELS Corp, Aishi Beauty, Lassiewear, inNalar.com, Independen Media, Ikapunija Media. No logo may be covered.
• Primary action: Read the company collaboration papers.
• Supporting actions: Desktop hover rise 8px, rotation ±1.5°, number/tag cherry-red; mobile 2 columns with parallax off.
• Domain entities: Document, company, logo, reference number, staple.
• Component responsibilities: SectionHero, DocumentCanvas, Document, Logo, data.ts.
• States: Loading — papers render with grain. Empty — not applicable. Success — all ten papers visible with logos contained. Error/recovery — monogram fallback when a logo fails to load.

Writing Portfolio

• Information/state: Hero "Storytelling" Bold Italic + "Through Screens" Bold with the attached narrative. Six 1:1 images (imn_1, imn_2, innalar_1, innalar_2, ikapunija_1, ikapunija_2), width clamp(110px,19vw,280px), white frames, rotation ±9°, text safe zone, clip-path stagger reveal 120ms, float. Tablet 4, mobile 2+2. Cassette: 3D round disc with thick edge, spindle hole, image as mask; large centre slowly rotating; small side discs with rotateY, translateZ, 1px blur. Info panel top-left (title, Author, Date DD/MM/YYYY, Media) updating slide-up + fade; big title below. Contents bottom-right, TornEdge. Mobile info on top. Eleven works: Independen Media ×4, innalar.com ×4, Ikapunija Media ×3 (2024, no link).
• Primary action: Navigate the cassette carousel and open a work.
• Supporting actions: Wheel/drag/arrows/keyboard navigation with snap; click opens a new-tab link (noopener noreferrer); items 9–11 open a lightbox with a "No online link" chip.
• Domain entities: Work, title, author, date, media, URL, disc.
• Component responsibilities: SectionHero, Carousel, PhotoFrame, TornEdge, Overlay.
• States: Loading — discs render with mask. Empty — not applicable. Success — info panel updates per slide; linked works open in a new tab; unlinked works show the lightbox chip. Error/recovery — lightbox fallback for items without a link.

Content Marketing Specialist

• Information/state: Named portfolio section with plum-night #2A0F2E ground and film grain. Detailed content not supplied.
• Primary action: Read the content marketing specialist presentation.
• Supporting actions: ToC continuation; Contents top-right.
• Domain entities: Section, content marketing work.
• Component responsibilities: SectionHero, TornEdge, TocOverlay.
• States: Loading — section renders with grain. Empty — content pending. Success — section visible in scroll order. Error/recovery — not applicable.

Example Strategy

• Information/state: Named strategy section. Detailed content not supplied.
• Primary action: Read the example content strategy.
• Supporting actions: ToC continuation.
• Domain entities: Section, strategy.
• Component responsibilities: SectionHero, TocOverlay.
• States: Loading — section renders. Empty — content pending. Success — section visible in scroll order. Error/recovery — not applicable.

Project Campus

• Information/state: Named campus project section with vanilla #FFF8EE ground and walnut #7A4A32 shelf. Detailed content not supplied.
• Primary action: Read the campus project presentation.
• Supporting actions: ToC continuation; TornEdge below.
• Domain entities: Section, campus project.
• Component responsibilities: SectionHero, TornEdge, TocOverlay.
• States: Loading — section renders. Empty — content pending. Success — section visible in scroll order. Error/recovery — not applicable.

Podcast

• Information/state: Named podcast section with blush #FFD6E8 ground. Detailed content not supplied.
• Primary action: Read the podcast presentation.
• Supporting actions: ToC continuation.
• Domain entities: Section, podcast.
• Component responsibilities: SectionHero, TocOverlay.
• States: Loading — section renders. Empty — content pending. Success — section visible in scroll order. Error/recovery — not applicable.

Archive

• Information/state: Named archive section with plum-night #2A0F2E ground and film grain. Detailed content not supplied. React.lazy loaded.
• Primary action: Browse the archive.
• Supporting actions: ToC continuation; Contents top-right; TornEdge below.
• Domain entities: Section, archive item.
• Component responsibilities: SectionHero, TornEdge, TocOverlay.
• States: Loading — lazy chunk loads. Empty — content pending. Success — section visible in scroll order. Error/recovery — not applicable.

Contact

• Information/state: Named contact destination with plum-night #2A0F2E ground, film grain, and bubblegum #FF8DC7 glow. Detailed content not supplied.
• Primary action: Reach the contact section.
• Supporting actions: ToC continuation; Contents top-right; footer continuation.
• Domain entities: Section, contact.
• Component responsibilities: SectionHero, TocOverlay, shared Footer.
• States: Loading — section renders. Empty — content pending. Success — section visible in scroll order. Error/recovery — not applicable.

Participation

• Information/state: Carousel of white-framed photos on aged-paper #F3E3B8 with Pushpin; frames keep native ratio; active title and year below. Data in achievements.ts (category, title, year, file, width, height) with 5 Participation records.
• Primary action: Browse participation records.
• Supporting actions: Carousel arrows, drag, keyboard, dots.
• Domain entities: Participation record, photo, frame, pin, title, year.
• Component responsibilities: Overlay, Carousel, PhotoFrame, Pushpin.
• States: Loading — photos load lazily. Empty — not applicable. Success — active title and year update per slide. Error/recovery — native-ratio frame prevents crop.

Achievement

• Information/state: Carousel of white-framed photos on aged-paper #F3E3B8 with Pushpin; frames keep native ratio; active title and year below. Data in achievements.ts with 3 Achievement records.
• Primary action: Browse achievement records.
• Supporting actions: Carousel arrows, drag, keyboard, dots.
• Domain entities: Achievement record, photo, frame, pin, title, year.
• Component responsibilities: Overlay, Carousel, PhotoFrame, Pushpin.
• States: Loading — photos load lazily. Empty — not applicable. Success — active title and year update per slide. Error/recovery — native-ratio frame prevents crop.

Magazine Art

• Information/state: Title "Let's put together a fashion magazine!". Page-flip book of 4 sheets (8 sides), pink cover; mobile 1 page. Per-page collage layer. Three-tab tray: Photos (17 photos, no frames), Text (VOGUE Bodoni Moda, Fashion Pinyon Script, OOTD Bebas Neue, recolorable), Elements (13 SVG: ribbon, pastel camera, sparkle, butterfly, lips, perfume, heel, pearls, rose, washi, cherries, tiara). React.lazy loaded.
• Primary action: Compose a magazine page by adding photos, text, and elements.
• Supporting actions: Click = add; drag; scale/rotate/delete/z-order handles; pinch; clamp; undo/redo; clear; save PNG.
• Domain entities: Page, sheet, collage layer, photo, text, element, composition state.
• Component responsibilities: Overlay, page-flip book, tray tabs, transform handles, export.
• States: Loading — lazy chunk loads. Empty — blank page ready for composition. Success — composition retained during the active interaction; PNG exported. Error/recovery — undo/redo and clear restore prior states.

Photography

• Information/state: Carousel of 17 photos on paper with pins, no crop (desktop 3–4, tablet 2–3, mobile 1.2–1.5). Credit in DM Mono: Model: Chindy; Photograph & Editing: Jassinta Roid Triniti.
• Primary action: Browse the photography works.
• Supporting actions: Carousel arrows, drag, keyboard, dots.
• Domain entities: Photo, pin, credit.
• Component responsibilities: Overlay, Carousel, PhotoFrame, Pushpin.
• States: Loading — photos load lazily. Empty — not applicable. Success — all 17 photos visible at native ratio. Error/recovery — contain prevents crop.

My Message

• Information/state: Open envelope; blue lined paper with pink margin and binder holes; Caveat ≥22px (mobile ≥19px); scroll inside the paper. Script exactly as attached; blush highlighter quotes; closing "Let's create something worth remembering" Sentient bold italic hot-pink; signature.
• Primary action: Read the letter.
• Supporting actions: Scroll inside the paper.
• Domain entities: Envelope, letter, quote, signature.
• Component responsibilities: Overlay, PaperNote.
• States: Loading — envelope and paper render. Empty — not applicable. Success — full letter readable with highlighted quotes and signature. Error/recovery — inner scroll keeps the letter contained.

My Strategy

• Information/state: Scrapbook flow with pink dashed path, sticky notes, icons, big numbers, scroll animation, cycle arrow back to step 1, hover/tap detail. Intro: "My strategy for managing social media content usually consists of several stages." Seven steps: Define the Target Market, Define the Style Guide, Build the Content Plan, Shoot & Record, Edit to the Style Guide, Post on Schedule, Analyze & Optimize (chips Engagement, Awareness, Conversion).
• Primary action: Read the seven-stage strategy flow.
• Supporting actions: Hover/tap reveals step detail; scroll animation reveals steps; cycle arrow returns to step 1.
• Domain entities: Step, sticky note, icon, number, chip.
• Component responsibilities: Overlay, PaperNote, StickerButton.
• States: Loading — flow renders. Empty — not applicable. Success — all seven steps visible with chips. Error/recovery — reduced-motion collapses scroll animation.

Notes

• Information/state: Spiral notebook in Caveat: "The 3 Keys to Marketing & Content Success: Awareness, Engagement, Conversion", with different-colour highlighters.
• Primary action: Read the three keys.
• Supporting actions: None beyond reading.
• Domain entities: Notebook, key, highlighter.
• Component responsibilities: Overlay, PaperNote.
• States: Loading — notebook renders. Empty — not applicable. Success — three keys readable with distinct highlighters. Error/recovery — not applicable.

3. Functional Requirements

FR-01 — One-page portfolio delivery. As Jassinta Roid Triniti (Portfolio Owner), I should have a one-page portfolio website presenting my work as a Social Media Specialist, Content Creator, Videographer, and Graphic Designer, ready to deploy on Vercel, so that my capabilities are represented accurately and deployably. Provenance: explicit. Lifecycle: initiator — owner; observable result — site live on Vercel; failure/recovery — build failure surfaces at deploy; continuation — visitor reaches Contact. Acceptance: the site builds and deploys to Vercel with all named sections present.

FR-02 — Playful, girly, textured theme. As a Portfolio Visitor / Recruiter, I should experience a playful, girly, textured theme built from school locker, paper, sticker, and scrapbook motifs, so that the portfolio feels personal and handmade rather than corporate. Provenance: explicit. Lifecycle: initiator — visitor; observable result — themed surfaces render; continuation — visitor scrolls the page. Acceptance: locker, paper, sticker, and scrapbook motifs are visible across the page.

FR-03 — Design system tokens. As Jassinta Roid Triniti (Portfolio Owner), I should have the full hex colour token set (pink, purple, mint/blue, paper, neutral, gradients) exposed as CSS variables and Tailwind tokens, so that the palette is applied consistently. Provenance: explicit. Lifecycle: initiator — owner; observable result — tokens available as CSS vars and Tailwind; continuation — components consume tokens. Acceptance: every listed hex value is available as a CSS variable and a Tailwind token.

FR-04 — Section background assignments. As a Portfolio Visitor / Recruiter, I should see each section on its assigned ground: Writing hero powder-pink; Cassette blush→lilac; Content Marketing/Archive/Contact plum-night + film grain; Strategy hero lilac; Campus vanilla + walnut shelf; Podcast blush; Personal Brand pure-white (mandatory). Provenance: explicit. Lifecycle: initiator — visitor; observable result — correct ground per section; continuation — scroll continues. Acceptance: each section renders on its assigned ground; Personal Brand is pure-white.

FR-05 — Typography. As a Portfolio Visitor / Recruiter, I should read headlines in Sentient clamp(2.1rem,1.2rem+3.6vw,4.125rem) lh 1.02 balance, narrative in Poppins italic clamp(1rem,.85rem+.7vw,1.556rem) max 58ch with 1.5rem spacing, giant text in Anton, letters in Caveat, and labels in DM Mono. Provenance: explicit. Lifecycle: initiator — visitor; observable result — type renders per role; continuation — reading continues. Acceptance: each type role uses its specified family and clamp.

FR-06 — Light textures. As a Portfolio Visitor / Recruiter, I should see light textures: grain SVG feTurbulence (multiply .06–.10; dark screen .05), paper grain, pink glitter, die-cut sticker, washi, and lined paper. Provenance: explicit. Lifecycle: initiator — visitor; observable result — textures render at specified opacities; continuation — scroll continues. Acceptance: each texture appears at its specified blend and opacity.

FR-07 — Component library. As Jassinta Roid Triniti (Portfolio Owner), I should have the components HoverLabel (paper price-tag), StickerButton, Pushpin, PaperNote, PhotoFrame (always contain), TornEdge, TocOverlay/TocInline, SectionHero, Overlay (focus trap, Esc, hash #/participation, role=dialog, body lock), and Carousel (arrows, drag, keyboard, dots). Provenance: explicit. Lifecycle: initiator — owner; observable result — components available and used; continuation — pages compose from them. Acceptance: each component exists with its specified behavior.

FR-08 — TornEdge placement. As a Portfolio Visitor / Recruiter, I should see TornEdge only below Opening-terbuka, Cassette, Content Marketing, Video Reveal, Campus, and Archive, with 3-octave seeded SVG noise per section, blending with the background, white fibers offset 3–8px, drop-shadow, and height clamp(36px,6vw,90px). Provenance: explicit. Lifecycle: initiator — visitor; observable result — torn seam renders only at allowed boundaries; continuation — scroll continues. Acceptance: TornEdge appears only at the six allowed boundaries.

FR-09 — Navigation order. As a Portfolio Visitor / Recruiter, I should navigate in the order Opening, Personal Brand, Writing Portfolio, Content Marketing Specialist, Example Strategy, Project Campus, Podcast, Archive, Contact. Provenance: explicit. Lifecycle: initiator — visitor; observable result — sections appear in order; continuation — ToC jumps between them. Acceptance: the nine sections appear in the specified order.

FR-10 — ToC behavior. As a Portfolio Visitor / Recruiter, I should use a ToC list with smooth-scroll click and a pink active marker via IntersectionObserver, positioned bottom-right on Cassette & Video Reveal, top-right on Content Marketing, Archive, Contact, as a floating top-right button elsewhere, and as TocInline 2 columns on Opening-terbuka. Provenance: explicit. Lifecycle: initiator — visitor; observable result — active section marked pink; continuation — visitor jumps to any section. Acceptance: ToC position and active marker match the specification per section.

FR-11 — Scroll lock. As a Portfolio Visitor / Recruiter, I should have scroll locked while the locker is closed, so that the opening experience is not skipped. Provenance: explicit. Lifecycle: initiator — visitor; observable result — scroll locked until OPEN ▶; continuation — scroll-lock released on open. Acceptance: scroll is locked before OPEN ▶ and released after.

FR-12 — Footer. As a Portfolio Visitor / Recruiter, I should see a footer in DM Mono reading "2026 | Jassinta Roid Triniti | Creative Portfolio". Provenance: explicit. Lifecycle: initiator — visitor; observable result — footer renders; continuation — footer links to Contact. Acceptance: footer text matches exactly.

FR-13 — Responsive breakpoints. As a Portfolio Visitor / Recruiter, I should experience the layout at breakpoints <480, 768, 1024, 1440, ≥1920 (max-width), using svh/dvh, safe-area, clamp, and container queries. Provenance: explicit. Lifecycle: initiator — visitor; observable result — layout adapts per breakpoint; continuation — reading continues. Acceptance: each breakpoint renders without overflow.

FR-14 — Input and motion adaptation. As a Portfolio Visitor / Recruiter, I should have mouse effects only under hover:hover, touch equivalents ≥44px, reduced-motion respected, relayout via ResizeObserver + visualViewport debounced 100ms, overflow-x: clip, native media aspect ratios, lazy load, video playing only when visible (max ~6), and React.lazy for Flipbook, Magazine, Archive. Provenance: explicit. Lifecycle: initiator — visitor; observable result — effects and loads adapt to input and motion preference; continuation — interaction continues. Acceptance: hover effects gated on hover:hover; touch targets ≥44px; reduced-motion honored; lazy chunks load on demand.

FR-15 — Accessibility and performance targets. As a Portfolio Visitor / Recruiter, I should have full keyboard support, aria-labels, pink 3px focus, English alt text, and Lighthouse mobile Performance ≥70 and Accessibility ≥90. Provenance: explicit. Lifecycle: initiator — visitor; observable result — keyboard and screen-reader access; continuation — navigation continues. Acceptance: Lighthouse mobile meets both thresholds; focus ring is pink 3px; alt text is English.

FR-16 — Asset structure. As Jassinta Roid Triniti (Portfolio Owner), I should have assets under public/assets/{items,locker,video,img,strategy,photos,achievements,brand,pdf} with lowercase filenames without spaces (e.g. vintage_cindy_1..17.jpg, logo_1..10.png, foto_jassinta_duduk.png, comic_rush.pdf). Provenance: explicit. Lifecycle: initiator — owner; observable result — assets resolve at their paths; continuation — pages load media. Acceptance: all assets resolve from the specified directories with lowercase, space-free names.

FR-17 — Opening closed locker bank. As a Portfolio Visitor / Recruiter, I should see five CSS-3D lockers with door ratio 1090:2500, height 80–88svh, outermost may be cropped; on mobile 1 locker per screen with horizontal scroll-snap and dots 1–5. Provenance: explicit. Lifecycle: initiator — visitor; observable result — locker bank renders; continuation — visitor scrolls or opens. Acceptance: five lockers render with the specified ratio and height; mobile shows one per screen with dots.

FR-18 — Realistic locker volume. As a Portfolio Visitor / Recruiter, I should see realistic locker volume: ceiling, three walls, thick shelf, frame, slab door, recessed vent, embossed handle/lock/number, in steel-lilac, perspective 1800px, parallax ±3°, idle sway on mobile. Provenance: explicit. Lifecycle: initiator — visitor; observable result — volume renders with parallax; continuation — visitor interacts. Acceptance: all volume parts render; parallax and idle sway behave as specified.

FR-19 — Centre locker headline. As a Portfolio Visitor / Recruiter, I should see the centre locker headline in Sentient 4 lines (cqw sizing), each word on a colour block rotated ±1–2°: "Content that" Regular bubblegum/baby-blue; "is Felt," Bold Italic butter/lilac; "Shared," Bold pastel-mint; "Remembered" Italic peach-fizz. Provenance: explicit. Lifecycle: initiator — visitor; observable result — headline renders per word block; continuation — visitor activates OPEN ▶. Acceptance: each word sits on its specified colour block with the specified weight and rotation.

FR-20 — OPEN ▶ interaction. As a Portfolio Visitor / Recruiter, I should trigger on OPEN ▶: confetti ≤24, pink glitter paper-wipe 500–700ms, scene change, items pop in progressively, scroll-lock released, focus moved; reduced-motion crossfade 250ms; no TornEdge. Provenance: explicit. Lifecycle: initiator — visitor; observable result — scene changes and scroll unlocks; continuation — visitor explores locker contents. Acceptance: the sequence runs as specified; reduced-motion uses a 250ms crossfade.

FR-21 — Locker open L1. As a Portfolio Visitor / Recruiter, I should see L1 with a door and a card "I Can Help You With:" listing Social Media Manager, Social Media Strategy, SEO Writing, Video Content, Graphic Designer, Editorial Planning, Copywriting, etc. Provenance: explicit. Lifecycle: initiator — visitor; observable result — card renders; continuation — visitor reads capabilities. Acceptance: the card lists the specified items.

FR-22 — Locker open L2. As a Portfolio Visitor / Recruiter, I should see L2 without a door: Certificates (top shelf), Trophies (right, in front of certificates), Magazine (behind camera, not floating), Camera (shelf 2), Shoes (bottom). Provenance: explicit. Lifecycle: initiator — visitor; observable result — items rest on shelves; continuation — visitor opens item overlays. Acceptance: each item is placed as specified; the magazine does not float.

FR-23 — Locker open L3. As a Portfolio Visitor / Recruiter, I should see L3 with a door and a video card intro_video.mp4 1080×1920 without crop, muted autoplay, "Tap for sound", mute/pause buttons, stopping when off-screen. Provenance: explicit. Lifecycle: initiator — visitor; observable result — video plays muted and stops off-screen; continuation — visitor toggles sound or pauses. Acceptance: video is uncropped, muted-autoplays, and stops when off-screen.

FR-24 — Locker open L4. As a Portfolio Visitor / Recruiter, I should see L4 without a door: Polaroid (top shelf, hanging), Letter (bottom right), Notes (below letter), Book (center-left), Umbrella (leaning), Bag (bottom). Provenance: explicit. Lifecycle: initiator — visitor; observable result — items placed as specified; continuation — visitor opens item overlays. Acceptance: each item is placed as specified.

FR-25 — Locker open L5. As a Portfolio Visitor / Recruiter, I should see L5 with a door and a card "Platform I Am Proficient in:" listing Instagram, TikTok, Facebook, Google Business Profile, Canva, Capcut, Adobe Suites. Provenance: explicit. Lifecycle: initiator — visitor; observable result — card renders; continuation — visitor reads platforms. Acceptance: the card lists the specified platforms.

FR-26 — Card styling. As a Portfolio Visitor / Recruiter, I should see cards filling the door, text wrapping, Sentient bold titles, and Poppins lists with pastel heart/star icons. Provenance: explicit. Lifecycle: initiator — visitor; observable result — cards render per style; continuation — visitor reads. Acceptance: cards fill the door with wrapped text and pastel icons.

FR-27 — Locker body and door colours. As a Portfolio Visitor / Recruiter, I should see L2/L4 with candy-pink body, berry→aubergine interior, blush shelves; doors alternating lilac/candy-pink/pastel-mint; walls powder-pink, floor rose-quartz, static confetti; footer + TocInline + TornEdge. Provenance: explicit. Lifecycle: initiator — visitor; observable result — colours render per locker; continuation — visitor explores. Acceptance: each locker uses its specified colours.

FR-28 — Item extrusion and interaction. As a Portfolio Visitor / Recruiter, I should see items with 4–10 layer translateZ extrusion, contact shadow, tilt parallax, resting on shelves; alpha hit-test >20 (silhouette); hover/focus follows silhouette (rise 6–10px, +3%, pink glow, HoverLabel); mobile tap 1 = label, tap 2 = open; SVG/CSS fallback; Polaroid, umbrella, bag, shoes are decoration without labels. Provenance: explicit. Lifecycle: initiator — visitor; observable result — items respond to hover/focus/tap; continuation — visitor opens overlays. Acceptance: hit-testing follows the silhouette; decoration items have no labels.

FR-29 — Item mapping. As a Portfolio Visitor / Recruiter, I should open overlays via: Certificates→Participation, Trophies→Achievement, Magazine→Magazine Art, Camera→Photography, Letter→My Message, Book→My Strategy, Notes→Notes, all using Overlay. Provenance: explicit. Lifecycle: initiator — visitor; observable result — correct overlay opens; continuation — visitor reads the overlay. Acceptance: each item opens its mapped overlay.

FR-30 — Participation/Achievement carousel. As a Portfolio Visitor / Recruiter, I should browse a carousel of white-framed photos on aged-paper with Pushpin, frames keeping native ratio, active title and year below, from achievements.ts (category, title, year, file, width, height) with 5 Participation + 3 Achievement. Provenance: explicit. Lifecycle: initiator — visitor; observable result — active title and year update; continuation — visitor browses all records. Acceptance: 5 Participation and 3 Achievement records render with native-ratio frames.

FR-31 — My Message letter. As a Portfolio Visitor / Recruiter, I should read an open envelope with blue lined paper, pink margin, binder holes, Caveat ≥22px (mobile ≥19px), scroll inside the paper, script exactly as attached, blush highlighter quotes, closing "Let's create something worth remembering" Sentient bold italic hot-pink, and a signature. Provenance: explicit. Lifecycle: initiator — visitor; observable result — letter readable with highlights and signature; continuation — visitor closes the overlay. Acceptance: the letter matches the attachment; Caveat sizes meet the minimums.

FR-32 — Magazine Art workspace. As a Magazine Collage Creator (Visitor), I should compose a fashion magazine on a 4-sheet (8-side) page-flip book with pink cover (mobile 1 page), per-page collage layer, and a 3-tab tray: Photos (17 photos, no frames), Text (VOGUE Bodoni Moda, Fashion Pinyon Script, OOTD Bebas Neue, recolorable), Elements (13 SVG: ribbon, pastel camera, sparkle, butterfly, lips, perfume, heel, pearls, rose, washi, cherries, tiara). Provenance: explicit. Lifecycle: initiator — visitor; observable result — composition appears on the page; continuation — visitor adds more items. Acceptance: the book, tray tabs, and item sets match the specification.

FR-33 — Magazine interactions. As a Magazine Collage Creator (Visitor), I should click to add, drag, use scale/rotate/delete/z-order handles, pinch, clamp, undo/redo, clear, and save PNG. Provenance: explicit. Lifecycle: initiator — visitor; observable result — composition updates and exports as PNG; continuation — visitor continues editing or exports. Acceptance: each interaction works; PNG export produces the composed page.

FR-34 — Photography carousel. As a Portfolio Visitor / Recruiter, I should browse 17 photos on paper with pins, no crop (desktop 3–4, tablet 2–3, mobile 1.2–1.5), with credit in DM Mono: Model: Chindy; Photograph & Editing: Jassinta Roid Triniti. Provenance: explicit. Lifecycle: initiator — visitor; observable result — photos render uncropped with credit; continuation — visitor browses all photos. Acceptance: 17 photos render at native ratio with the specified credit.

FR-35 — My Strategy flow. As a Portfolio Visitor / Recruiter, I should read a scrapbook flow with pink dashed path, sticky notes, icons, big numbers, scroll animation, cycle arrow back to step 1, hover/tap detail, intro "My strategy for managing social media content usually consists of several stages.", and 7 steps: Define the Target Market, Define the Style Guide, Build the Content Plan, Shoot & Record, Edit to the Style Guide, Post on Schedule, Analyze & Optimize (chips Engagement, Awareness, Conversion). Provenance: explicit. Lifecycle: initiator — visitor; observable result — all seven steps visible with chips; continuation — cycle arrow returns to step 1. Acceptance: the intro and seven steps render with the specified chips.

FR-36 — Notes page. As a Portfolio Visitor / Recruiter, I should read a spiral notebook in Caveat: "The 3 Keys to Marketing & Content Success: Awareness, Engagement, Conversion", with different-colour highlighters. Provenance: explicit. Lifecycle: initiator — visitor; observable result — three keys readable with distinct highlighters; continuation — visitor closes the overlay. Acceptance: the text matches exactly with distinct highlighters.

FR-37 — Personal Brand structure. As Jassinta Roid Triniti (Portfolio Owner), I should have the structure PersonalBrand > Hero, DocumentCanvas > Document×10 > Logo, data.ts. Provenance: explicit. Lifecycle: initiator — owner; observable result — structure renders; continuation — visitor reads papers. Acceptance: the component structure matches.

FR-38 — Personal Brand hero. As a Portfolio Visitor / Recruiter, I should see Anton left-aligned, lh .9, clamp(3.5rem,2rem+9vw,11rem): WHICH / COMPANIES / HAVE I / WORKED / FOR?, slow parallax; photo right with medium parallax. Provenance: explicit. Lifecycle: initiator — visitor; observable result — hero renders with parallax; continuation — visitor scrolls to papers. Acceptance: the hero text and parallax match the specification.

FR-39 — Ten physical papers. As a Portfolio Visitor / Recruiter, I should see 10 physical papers: 1px black border, 3–4 layer shadow, grain, rotations -3,4,-5,2,3,-2,5,-4,1,-3, "01 / 10", tag, REF-ARC-00X, staple-red staple, logo contain + monogram fallback. Provenance: explicit. Lifecycle: initiator — visitor; observable result — papers render with rotations and refs; continuation — visitor reads each paper. Acceptance: all ten papers render with the specified rotations and reference numbers.

FR-40 — Company list. As a Portfolio Visitor / Recruiter, I should see Elsthetic, Elspresso, Aishi Aesthetic Academy, Karamina Tour, ELS Corp, Aishi Beauty, Lassiewear, inNalar.com, Independen Media, Ikapunija Media, with no logo covered. Provenance: explicit. Lifecycle: initiator — visitor; observable result — all ten companies visible with uncovered logos; continuation — visitor reads each paper. Acceptance: all ten companies render; no logo is covered.

FR-41 — Personal Brand interaction. As a Portfolio Visitor / Recruiter, I should experience desktop parallax rAF + lerp; hover rise 8px, rotation ±1.5°, number/tag cherry-red; mobile 2 columns, parallax off. Provenance: explicit. Lifecycle: initiator — visitor; observable result — hover and parallax behave as specified; continuation — visitor reads papers. Acceptance: desktop hover and parallax match; mobile shows 2 columns with parallax off.

FR-42 — Writing Portfolio hero. As a Portfolio Visitor / Recruiter, I should see "Storytelling" Bold Italic + "Through Screens" Bold, the attached narrative, and 6 1:1 images (imn_1,2; innalar_1,2; ikapunija_1,2), width clamp(110px,19vw,280px), white frames, rotation ±9°, text safe zone, clip-path stagger reveal 120ms, float; tablet 4, mobile 2+2. Provenance: explicit. Lifecycle: initiator — visitor; observable result — hero and images render with stagger; continuation — visitor scrolls to the cassette. Acceptance: the hero text matches the attachment; six images render with the specified width and rotation.

FR-43 — Cassette carousel. As a Portfolio Visitor / Recruiter, I should see a 3D round disc (thick edge, spindle hole, image as mask), large centre slowly rotating, small side discs (rotateY, translateZ, 1px blur), info panel top-left (title, Author, Date DD/MM/YYYY, Media) updating slide-up + fade, big title below, wheel/drag/arrows/keyboard navigation + snap, click = new-tab link (noopener noreferrer), items without link (9–11) = lightbox + chip "No online link", Contents bottom-right, TornEdge, mobile info on top. Provenance: explicit. Lifecycle: initiator — visitor; observable result — info panel updates per slide; linked works open in a new tab; unlinked works show the lightbox chip; continuation — visitor browses all eleven works. Acceptance: the disc, info panel, and navigation behave as specified; items 9–11 show the lightbox chip.

FR-44 — Eleven writing works. As a Portfolio Visitor / Recruiter, I should see 11 works: Independen Media ×4, innalar.com ×4, Ikapunija Media ×3 (2024, no link), with titles, dates, and URLs from the attachment. Provenance: explicit. Lifecycle: initiator — visitor; observable result — all eleven works render with attached metadata; continuation — visitor opens a work. Acceptance: titles, dates, and URLs match the attachment.

FR-45 — Anonymous entry and scroll-lock release. As a Portfolio Visitor / Recruiter, I should reach Opening before the portfolio sections and release the closed-locker scroll lock through OPEN ▶. Provenance: required_inference. Lifecycle: initiator — visitor; observable result — scroll lock released; continuation — visitor scrolls into the portfolio. Acceptance: Opening is the first section; OPEN ▶ releases the lock.

FR-46 — ToC continuation. As a Portfolio Visitor / Recruiter, I should use the ToC to continue across all nine named portfolio sections. Provenance: required_inference. Lifecycle: initiator — visitor; observable result — ToC jumps to the selected section; continuation — visitor reads the section. Acceptance: the ToC lists all nine sections and jumps to each.

FR-47 — Locker item overlay continuation. As a Portfolio Visitor / Recruiter, I should continue from locker items to Participation, Achievement, Magazine Art, Photography, My Message, My Strategy, and Notes. Provenance: required_inference. Lifecycle: initiator — visitor; observable result — the mapped overlay opens; continuation — visitor reads the overlay and closes it. Acceptance: each item opens its mapped overlay.

FR-48 — Magazine composition state and export. As a Magazine Collage Creator (Visitor), I should have the Magazine Art workspace retain composition state during the active local interaction and export the result as PNG. Provenance: required_inference. Lifecycle: initiator — visitor; observable result — composition retained during the interaction; PNG exported; continuation — visitor continues editing or leaves. Acceptance: composition persists during the interaction; PNG export succeeds.

4. User Personas

Portfolio Visitor / Recruiter

Product context. A brand owner, agency recruiter, or prospective client who arrives from Instagram or TikTok to evaluate Jassinta's fit for social media, content, video, and graphic design work. They are anonymous and have no account.

Primary goal. Understand Jassinta's capabilities, review her credentials and work samples, and reach the Contact section.

Distinct accepted responsibilities. Navigate the section ToC; open the locker doors; open overlays for Participation/Achievement, Magazine Art, Photography, My Message, My Strategy, and Notes; browse the cassette carousel and open linked works or lightboxes; read the Personal Brand company papers; read the Writing Portfolio hero and images.

Relevant inputs or decisions. Which section to visit next; whether to open a locker item; whether to open a linked writing work or view the lightbox; whether to continue to Contact.

Interactions with other accepted participants. Reads the owner's letter, strategy, notes, and credentials; views the owner's photography and magazine art; may hand off to the Magazine Collage Creator role when they choose to compose.

Observable success. They can reach the Contact section and understand her capabilities and platforms.

Jassinta Roid Triniti (Portfolio Owner)

Product context. The portfolio subject whose work, achievements, writing, photography, and brand collaborations are presented. She is not an interactive user of the site in the current scope; her presence is represented through content.

Primary goal. Have her content, credentials, and contact presence represented accurately and deployably on Vercel.

Distinct accepted responsibilities. Her work is presented across the nine sections and seven overlays; her letter, strategy, notes, photography, magazine art, and company collaborations are the substance of the portfolio.

Relevant inputs or decisions. The content she supplies (letter script, writing works, company list, photography credits, strategy steps, notes text) determines what the site presents.

Interactions with other accepted participants. The Portfolio Visitor / Recruiter reads her letter, strategy, notes, and credentials; the Magazine Collage Creator composes using her photos and elements.

Observable success. The site is live and presents her personal brand, writing portfolio, and creative work as intended.

Magazine Collage Creator (Visitor)

Product context. A visitor who uses the Magazine Art page to build a fashion magazine collage. They are anonymous and have no account.

Primary goal. Compose a magazine page and export it as a PNG.

Distinct accepted responsibilities. Add photos, text, and elements; drag, scale, rotate, delete, and manage z-order; pinch; clamp; undo/redo; clear; save PNG.

Relevant inputs or decisions. Which photos, text styles, and elements to add; how to arrange them; when to export.

Interactions with other accepted participants. Uses the owner's photos and elements; their composition is local to the active interaction.

Observable success. The composed magazine page can be exported as an image.

5. Core User Flows

Flow 1 — Portfolio Visitor / Recruiter: open the locker and explore the portfolio

1. The visitor lands on Opening. Scroll is locked; the five CSS-3D lockers render in steel-lilac against the powder-pink wall with the rose-quartz floor and static confetti.
2. The visitor reads the centre locker headline: "Content that" on bubblegum/baby-blue, "is Felt," on butter/lilac, "Shared," on pastel-mint, "Remembered" on peach-fizz.
3. The visitor activates OPEN ▶. Confetti (≤24) fires, a pink glitter paper-wipe runs 500–700ms, the scene changes, items pop in progressively, the scroll lock releases, and focus moves. Under reduced-motion, a 250ms crossfade replaces the sequence.
4. The visitor sees the open locker bank with L1–L5. L1 shows the "I Can Help You With:" card; L3 shows the intro_video.mp4 card (muted autoplay, "Tap for sound", mute/pause, stops off-screen); L5 shows the "Platform I Am Proficient in:" card. L2 and L4 show items resting on shelves.
5. The visitor hovers or focuses an item (desktop) or taps once for the label and twice to open (mobile). The item rises 6–10px, scales +3%, glows pink, and shows its HoverLabel. Polaroid, umbrella, bag, and shoes are decoration without labels.
6. The visitor opens Certificates → Participation. The overlay opens with focus trap, Esc close, hash #/participation, role=dialog, and body lock. The carousel shows white-framed photos on aged-paper with Pushpin; the active title and year update below.
7. The visitor closes the overlay and opens Trophies → Achievement, then Camera → Photography (17 uncropped photos with the DM Mono credit), then Letter → My Message (the letter with blush highlighter quotes and the closing line), then Book → My Strategy (the seven-step flow with chips), then Notes → Notes (the three keys with distinct highlighters).
8. The visitor uses the ToC to continue to Personal Brand, reads the Anton hero and the ten company papers, and confirms no logo is covered.
9. The visitor continues to Writing Portfolio, reads the hero, and navigates the cassette carousel. Linked works open in a new tab (noopener noreferrer); items 9–11 open a lightbox with the "No online link" chip.
10. The visitor continues through Content Marketing Specialist, Example Strategy, Project Campus, Podcast, Archive, and reaches Contact. The footer reads "2026 | Jassinta Roid Triniti | Creative Portfolio".
11. Failure/recovery: if a logo fails to load, the monogram fallback appears; if a writing work has no link, the lightbox chip appears instead of a broken link; under reduced-motion, all entrances collapse to a 250ms crossfade and loops stop.

Flow 2 — Magazine Collage Creator (Visitor): compose and export a magazine page

1. The visitor opens Magazine Art from the locker (Magazine item) or via the ToC. The overlay opens with focus trap, Esc close, role=dialog, and body lock.
2. The visitor sees the title "Let's put together a fashion magazine!" and the 4-sheet (8-side) page-flip book with pink cover. On mobile, one page is shown.
3. The visitor selects the Photos tab and clicks a photo to add it to the active page. The photo appears without a frame.
4. The visitor selects the Text tab and adds VOGUE (Bodoni Moda), Fashion (Pinyon Script), or OOTD (Bebas Neue), then recolors the text.
5. The visitor selects the Elements tab and adds one of the 13 SVGs (ribbon, pastel camera, sparkle, butterfly, lips, perfume, heel, pearls, rose, washi, cherries, tiara).
6. The visitor drags, scales, rotates, deletes, and changes z-order using the handles; pinches on touch; clamps items within the page.
7. The visitor uses undo/redo to correct a step, or clear to reset the page.
8. The visitor clicks save PNG. The composed page exports as an image.
9. Failure/recovery: undo/redo and clear restore prior states; the composition is retained during the active local interaction.
10. Continuation: the visitor closes the overlay and returns to the locker bank or continues via the ToC.

Flow 3 — Jassinta Roid Triniti (Portfolio Owner): have the portfolio represented and deployed

1. The owner supplies the letter script, writing works (titles, dates, URLs), company list, photography credits, strategy steps, and notes text.
2. The owner's content is placed in the site: the letter in My Message, the works in the Writing Portfolio cassette, the companies in Personal Brand, the credits in Photography, the steps in My Strategy, and the keys in Notes.
3. The owner's assets are placed under public/assets/{items,locker,video,img,strategy,photos,achievements,brand,pdf} with lowercase, space-free filenames.
4. The site builds and deploys to Vercel.
5. Observable success: the site is live and presents the owner's personal brand, writing portfolio, and creative work as intended.
6. Failure/recovery: if a build fails, the deploy surfaces the error; if a logo fails to load, the monogram fallback appears.

6. Visuals Colors and Theme

Muse and headline. Jessica Walsh — scrapbook maximalism, colour-saturated and unapologetically girly. The headline idea: a school locker you open to find a life's work pasted inside a scrapbook.

Mode. Light mode, colour-blocked sections, never white-first except Personal Brand (pure-white #FFFFFF, mandatory).

Core tokens (exact hex by role).

• Background: #FDE4EC (powder-pink)
• Surface: #FFF8EE (vanilla)
• Text: #1B1017 (ink)
• Primary: #FF2E93 (hot-pink)
• Accent: #7B4FB8 (grape-soda)
• Muted: #E8A5B8 (dusty-rose)

Section grounds.

• Opening walls: #FDE4EC (powder-pink); floor #F7CAD0 (rose-quartz)
• Writing hero: #FDE4EC (powder-pink)
• Cassette: #FFD6E8 (blush) → #D4C1F5 (lilac)
• Content Marketing / Archive / Contact: #2A0F2E (plum-night) + film grain
• Strategy hero: #D4C1F5 (lilac)
• Campus: #FFF8EE (vanilla) + #7A4A32 (walnut) shelf
• Podcast: #FFD6E8 (blush)
• Personal Brand: #FFFFFF (pure-white, mandatory)

Sticker palette. Bubblegum #FF8DC7, baby-blue #BFE3F5, butter #FFF1A8, pastel-mint #A8E6CF, peach-fizz #FFB38A.

Secondary text. Grape-soda #7B4FB8 and berry #7A2E5C on light grounds; on plum-night grounds, milk-white #FFFDF9 with hot-pink #FF2E93 and champagne #EBD08C highlights.

Paper neutrals. Aged-paper #F3E3B8, lemon-chiffon #FFF6C9, honey #F6D76B for tags, notes, and labels. Ink #1B1017 for all reading text on paper.

Ratio. ~60% colour-block ground, ~30% paper surfaces, ~10% hot accent — accent is scarce so it stays hot.

Typography.

• Headings: Anton, all-caps, flush-left, line-height 0.9, tracking -0.01em, at giant scale.
• Editorial headlines: Sentient, clamp(2.1rem,1.2rem+3.6vw,4.125rem), line-height 1.02, text-wrap balance, per-word colour blocks rotated ±1–2°.
• Handwriting: Caveat, ≥22px desktop / ≥19px mobile.
• Labels: DM Mono, uppercase, tracking 0.14em, 11–12px.
• Body: Fraunces, italic narrative, clamp(1rem,.85rem+.7vw,1.556rem), max 58ch, 1.5rem paragraph spacing.
• Scale: 1.333 modular with a poster jump — Anton display clamp(3.5rem,2rem+9vw,11rem); Sentient h1 clamp(2.1rem,1.2rem+3.6vw,4.125rem); h2 clamp(1.6rem,1.1rem+2vw,2.75rem); h3 clamp(1.25rem,1rem+1vw,1.75rem); body Fraunces clamp(1rem,.85rem+.7vw,1.556rem); label DM Mono 11–12px; Caveat clamp(1.2rem,1rem+1vw,1.75rem).

Shape language. Sticker-and-paper geometry: die-cut silhouettes with a 2px white cut-line and soft offset shadow, chunky 16–28px radii on cards, pill buttons, capsule chips, torn paper edges, washi-tape strips at ±4–8°, pushpins, spiral bindings, envelope flaps, 3D locker volumes with slab doors and recessed vents. Nothing razor-sharp except the Personal Brand document papers (1px black border, corner staple). Colour-block section boundaries are hard-edged or torn, never gradient-blobbed.

Spacing rhythm. 1.5rem paragraph spacing; section seams carried by TornEdge at clamp(36px,6vw,90px); collage elements rotate 1–9° off a strict 12-column grid.

Imagery style. Collage-first: paper photos with white borders and pins, Polaroids, cut-out sticker SVGs, washi tape, halftone and grain overlays, confetti. Photography is art-directed, high-saturation, and girly — the 17 vintage Cindy shots, the seated portrait, magazine spreads — always contained inside its frame at native aspect ratio, never cropped to fit. Surreal props and colour fields stand in for stock imagery; no generic SaaS illustration, no gradient blobs.

Avoid. Bootstrap-blue or indigo primaries on white; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for headings or body; gradient-blob heroes and grids of identical hover-lift cards; cropping any photograph to fill a frame; neutral greys, muted corporate palettes, or white-first sections outside Personal Brand; flat single-layer sticker art without the white cut-line and offset shadow; bouncy or springy easing on entrance motion; covering, clipping, or running readable text and controls off an edge.

7. Signature Design Concept

The public entry is a full-viewport bank of five CSS-3D school lockers in steel-lilac #B9B8CC against a powder-pink #FDE4EC wall with a rose-quartz #F7CAD0 floor and static confetti, perspective 1800px, outermost doors bled off both viewport edges. The centre locker's door face is the hero canvas: four stacked lines of Sentient set in cqw units, each word sitting on its own rotated colour block — "Content that" on bubblegum #FF8DC7 and baby-blue #BFE3F5, "is Felt," bold italic on butter #FFF1A8 and lilac #D4C1F5, "Shared," bold on pastel-mint #A8E6CF, "Remembered" italic on peach-fizz #FFB38A — with a hot-pink #FF2E93 "OPEN ▶" sticker button pinned beneath, labels in DM Mono. Nothing is centred, nothing is a gradient, and the composition could not be mistaken for a SaaS hero. Activating OPEN ▶ fires confetti (≤24), runs a pink glitter paper-wipe (500–700ms), changes the scene, pops items in progressively, releases the scroll lock, and moves focus; under reduced-motion it collapses to a 250ms crossfade.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief.

• Focal subject: the centre locker door face with the four-line Sentient headline on rotated colour blocks and the "OPEN ▶" sticker button.
• Input → transformation → outcome thesis: pointer movement across the locker bank (or idle sway on mobile) → the locker volumes tilt ±3° in parallax and the door face holds its composed collage → the visitor reads the headline and activates OPEN ▶, which fires confetti (≤24), runs a pink glitter paper-wipe (500–700ms), changes the scene, pops items in progressively, releases the scroll lock, and moves focus.
• Motion vocabulary: sticker pop-in with staggered 60–120ms delays, rotate-and-settle entrances, colour-flip hovers, marquee ticker of platform names, paper-wipe pink-glitter transition (500–700ms), slow rotating cassette disc, scroll-linked parallax on documents and floating photos.
• Composed first frame: five steel-lilac lockers on a powder-pink wall with a rose-quartz floor and static confetti; the centre door carries the four-line headline on rotated colour blocks with the hot-pink OPEN ▶ sticker beneath; DM Mono labels sit at the edges.
• Reduced-motion state: every entrance collapses to a 250ms crossfade and all loops stop; the headline, colour blocks, and OPEN ▶ remain fully readable and operable.

9. Non-Functional Requirements

NFR-01 — Responsive breakpoints. The layout must support breakpoints <480, 768, 1024, 1440, ≥1920 (max-width), using svh/dvh, safe-area, clamp, and container queries. Provenance: explicit. Rationale: the source specifies these breakpoints and units.

NFR-02 — Input adaptation. Mouse effects must run only under hover:hover; touch must have tap equivalents ≥44px. Provenance: explicit. Rationale: the source specifies input gating and touch target size.

NFR-03 — Reduced motion. Reduced-motion must be respected; the locker opening uses a 250ms crossfade. Provenance: explicit. Rationale: the source specifies reduced-motion behavior.

NFR-04 — Relayout. Layout must be recalculated via ResizeObserver + visualViewport, debounced 100ms. Provenance: explicit. Rationale: the source specifies relayout behavior.

NFR-05 — Overflow. overflow-x: clip must be applied. Provenance: explicit. Rationale: the source specifies horizontal overflow handling.

NFR-06 — Media aspect ratios. Media aspect ratios must always be native; PhotoFrame always uses contain. Provenance: explicit. Rationale: the source specifies no-crop behavior.

NFR-07 — Lazy loading. Assets must lazy load; video must play only when visible, with a maximum of ~6 videos; React.lazy must be used for Flipbook, Magazine, and Archive. Provenance: explicit. Rationale: the source specifies loading behavior.

NFR-08 — Lighthouse mobile targets. Performance ≥70 and Accessibility ≥90 on mobile. Provenance: explicit. Rationale: the source specifies these thresholds.

NFR-09 — Accessibility. Full keyboard support, aria-labels, pink 3px focus, and English alt text. Provenance: explicit. Rationale: the source specifies accessibility requirements.

NFR-10 — Overlay accessibility. Overlay must include focus trap, Esc close, hash #/participation, role=dialog, and body lock. Provenance: explicit. Rationale: the source specifies overlay behavior.

NFR-11 — External link safety. Writing work links must open in a new tab with noopener noreferrer. Provenance: explicit. Rationale: the source specifies link behavior.

NFR-12 — Asset naming. Asset filenames must be lowercase without spaces under public/assets/{items,locker,video,img,strategy,photos,achievements,brand,pdf}. Provenance: explicit. Rationale: the source specifies asset structure.

NFR-13 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, cards' text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering them. Provenance: explicit (creative direction). Rationale: the direction requires readable text and controls to remain whole at every viewport.

10. Tech Stack

• Frontend: React (single-page application), with React.lazy for Flipbook, Magazine, and Archive.
• Styling: Tailwind CSS with CSS variables for the full colour token set.
• Motion: CSS 3D transforms and scroll-linked parallax (rAF + lerp on desktop).
• Deployment: Vercel.
• Assets: static files under public/assets/{items,locker,video,img,strategy,photos,achievements,brand,pdf}.
• Data: local TypeScript data modules (achievements.ts, data.ts).

11. Assumptions and Constraints

Assumptions.

• The attached My Message script, Writing Portfolio hero narrative, and 11 writing works list are available and authoritative; their exact text is used verbatim.
• The 17 photography files (vintage_cindy_1..17.jpg), 10 logo files (logo_1..10.png), foto_jassinta_duduk.png, and comic_rush.pdf are available under the specified asset directories.
• The intro_video.mp4 file is available at 1080×1920.
• Sections 10–15 (Content Marketing, Example Strategy, Project Campus, Podcast, Archive, Contact) are named destinations in the navigation and page contract; their detailed content is not supplied and is not invented here.

Constraints.

• Personal Brand section background must be pure-white #FFFFFF (mandatory).
• Scroll is locked while the locker is closed.
• TornEdge may only appear below Opening-terbuka, Cassette, Content Marketing, Video Reveal, Campus, and Archive.
• No logo may be covered on the Personal Brand company papers.
• Polaroid, umbrella, bag, and shoes are decoration without labels.
• PhotoFrame always uses contain; media aspect ratios are always native (no crop).
• L3 intro_video.mp4 1080×1920 must not be cropped.
• Magazine Art Photos tab uses 17 photos without frames.
• Writing works 9–11 (Ikapunija Media, 2024) have no online link and instead show a lightbox with a "No online link" chip.
• Mouse effects only under hover:hover; touch equivalents must be ≥44px.
• Reduced-motion must be respected (locker opening uses a 250ms crossfade).
• Video plays only when visible, maximum ~6 videos.
• Lighthouse mobile targets: Performance ≥70, Accessibility ≥90.
• Asset filenames must be lowercase without spaces under public/assets/{items,locker,video,img,strategy,photos,achievements,brand,pdf}.
• Overlay must include focus trap, Esc close, hash #/participation, role=dialog, and body lock.
• Writing work links open in a new tab with noopener noreferrer.
• The generic indigo/blue-on-white SaaS template is forbidden for this project.

12. Glossary

• Locker bank: the five CSS-3D school lockers that form the Opening section.
• Opening-terbuka: the open state of the locker bank after OPEN ▶ is activated.
• TornEdge: a seeded 3-octave SVG noise seam with white paper fibers, used only at specified section boundaries.
• Overlay: a paper-artefact dialog with focus trap, Esc close, hash routing, role=dialog, and body lock.
• ToC: the table of contents list with smooth-scroll click and pink active marker.
• TocInline: the two-column ToC used on Opening-terbuka.
• HoverLabel: a paper price-tag label shown on item hover/focus.
• StickerButton: a die-cut sticker-style button with a 2px white cut-line and offset shadow.
• Pushpin: a pin component used to attach photos to paper surfaces.
• PaperNote: a paper note component used for sticky notes and letters.
• PhotoFrame: a frame component that always contains media at native aspect ratio.
• SectionHero: the hero component used at the top of each section.
• Carousel: a carousel component with arrows, drag, keyboard, and dots.
• Cassette: the 3D round disc carousel in the Writing Portfolio section.
• achievements.ts: the data module holding Participation and Achievement records (category, title, year, file, width, height).
• data.ts: the data module holding Personal Brand company records.
• Flipbook: the page-flip book used in Magazine Art.
• Magazine: the Magazine Art workspace.
• Archive: the Archive section.
• REF-ARC-00X: the reference number format on Personal Brand document papers.
• cqw: container query width units used for the centre locker headline sizing.
• svh/dvh: small viewport height and dynamic viewport height units.
• Film grain: a grain overlay applied to plum-night sections.
• Paper-wipe: the pink glitter transition that runs 500–700ms when the locker opens.