System Requirements Document for magma-portfolio

1. Introduction

magma-portfolio is a one-page portfolio website for Jassinta Roid Triniti, a Social Media Specialist, Content Creator, Videographer, and Graphic Designer. The site presents her personal brand and body of work — writing samples, a cassette disc, content marketing strategy, campus projects, a podcast, and an archive of locker items — as a single long, non-reloading page that is ready to deploy to Vercel as a static build.

The product intent is a playful, girly, textured portfolio that feels like a school locker, paper, stickers, a magazine, and a scrapbook: elegant yet cheerful. It is built for a Portfolio Visitor (a recruiter, client, or collaborator evaluating her work) and serves the Portfolio Owner by faithfully presenting her identity and work and by receiving inbound contact.

All website-facing text is in English. Specific work or article titles that are originally Indonesian are displayed as-is. All code, variable names, component names, and code comments are in English.

2. System Overview

magma-portfolio is a client-only static web application. It is a single long page with no page reload; navigation between sections uses smooth scroll plus a table of contents. Locker-item "pop-up" views (Participation, Achievement, etc.) are full-screen overlays, not new routes, with a close button, Esc key support, and browser Back button support via hashes such as #/participation.

The site is built with React 18 + Vite + TypeScript + Tailwind CSS, animated with Framer Motion (or GSAP + ScrollTrigger where better suited to scroll-driven work, choosing one consistent approach per need), with Lenis (or equivalent) for smooth/inertial scroll that can be disabled during the Opening scroll-lock and while an overlay is open. The flipbook uses page-flip (StPageFlip) or react-pageflip, rendering PDFs with pdfjs-dist. The 3D locker uses CSS 3D transforms (perspective, transform-style: preserve-3d) and not Three.js, to stay light on phones. Fonts come from Fontshare (Sentient) and Google Fonts (the rest). The build outputs a static dist/ folder deployable to Vercel without a server.

There are no API keys on the client side and the website requires no API.

2a. Product Interpretation and Delivery Boundary

The entire accepted portfolio experience is delivered as one first-party, anonymously reachable long page. There is no account, no sign-in, and no server-side component: the visitor lands, scrolls, opens overlays, flips the flipbook, and reaches out through the Contact section. The Portfolio Owner does not operate a separate authenticated surface in the current scope; her role is the source of the portfolio content and the recipient of inbound contact.

Everything described in this document is current scope. No future-horizon features were accepted in the authoritative requirement thread; nothing in this document is deferred.

2b. Source Content Inventory

The only authoritative external reference is the Fontshare Sentient stylesheet (https://api.fontshare.com/v2/css?f[]=sentient@300,301,400,401,500,501,700,701&display=swap), used as a brand source. Verified facts:

• Brand name: Sentient (official Fontshare typeface).
• Host/owner: Fontshare.
• Variants hosted: weights 300, 400, 500, 700 with matching italics 301, 401, 501, 701. Odd-numbered variants (301, 401, 501, 701) are italics.
• Loading behavior: the CSS loads with font-display: swap; intended use is with preconnect for minimal layout shift.
• Logo: not verified.

2c. Page Content and Component Coverage

Landing

The single long page. It is anonymously reachable and owns every accepted portfolio responsibility, organized as full-bleed colour bands separated by blob curves, with a floating capsule table-of-contents rail at desktop that collapses to a bottom pill dock on mobile.

• Information / state: the visitor's scroll position across the ordered bands; the currently open overlay (if any) reflected in the URL hash; the flipbook's current spread; the Opening's locked/unlocked state.
• Primary actions: open the locker (unlock the Opening); scroll to a section via the table of contents; open a locker-item overlay; close an overlay (button, Esc, or browser Back); flip flipbook pages; use the Contact section to reach out.
• Supporting actions: hover/press feedback on capsule buttons; reduced-motion fallbacks for marquees and morphs.
• Domain entities: section bands, locker items (Participation, Achievement, etc.), work items (writing samples, cassette disc, content marketing strategy, campus projects, podcast, archive items), flipbook pages, contact channels.
• Component responsibilities:
  • Opening (closed): pearl→warm-grey corridor wall, steel-lilac capsule locker centred at ~60% viewport height in CSS 3D with the door slightly ajar and a hot-pink glow seam; five candy word-blocks — SOCIAL, CONTENT, VIDEO, DESIGN, STORY — in bubblegum, butter, pastel-mint, baby-blue and lilac orbiting on a slow 20s float; the name "JASSINTA ROID TRINITI" in Sentient at the fluid headline scale with "Triniti" in cherry-red italic; a single hot-pink capsule button "Open the locker". The stage is scroll-locked until the door opens.
  • Opening (open): candy-pink locker body, berry interior, blush shelves with small glossy objects; the page unlocks and the band scrolls away.
  • Personal Brand: pure-white canvas, ink text, cherry-red accent; one giant Anton headline spanning the full viewport width, set in pure white on pure white paper with only a cherry-red hairline underline; white document paper.
  • Writing Portfolio hero: powder-pink ground with paper grain, ink text, hot-pink accent.
  • Cassette disc: blush→lilac ground with grain, ink text, hot-pink accent.
  • Content Marketing: plum-night gradient with film grain, milk-white text, hot-pink glow accent.
  • Example Strategy hero: lilac ground with grain, ink text, hot-pink accent.
  • Example Strategy video reveal: plum-night gradient with a pink-checkerboard floor in CSS 3D perspective, a hot-pink light sweep scrubbed left-to-right with scroll, and the video frame rising out of the floor as a glossy capsule; milk-white text.
  • Project Campus: vanilla ground with walnut wooden shelves, ink text, cherry-red accent.
  • Podcast: blush ground, ink text, cherry-red accent.
  • Archive: plum-night gradient, milk-white text, hot-pink accent; archive cards in DM Mono / Special Elite labels.
  • Contact: plum-night gradient with glow, milk-white text, bubblegum accent.
  • Flipbook: page-flip/react-pageflip spread rendering PDF pages via pdfjs-dist.
  • Overlay shell: full-screen plum-night capsule with a rounded close pill, hash route (#/participation), Esc and browser Back handling.
  • Table of contents: floating capsule rail at desktop, bottom pill dock on mobile, with the blob curve mirrored in the rail.
• States:
  • Loading: fonts load with font-display: swap, preconnect, and fallbacks; no large layout shift.
  • Empty: missing assets (/assets/...) show a tidy themed fallback per each section's rules — never a broken icon or error text.
  • Success: the visitor completes a full non-reloading browse and reaches a contact action.
  • Error / recovery: if an overlay hash is invalid or an asset is absent, the page stays usable and shows the themed fallback; closing an overlay restores the previous scroll position and re-enables Lenis.

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — One-page portfolio delivery. As a Portfolio Visitor, I should land on a single long page that never reloads, so that I can browse Jassinta's work continuously.

• Provenance: explicit.
• Trigger/input: page load at the site root.
• Observable result: one long page; no page reload during navigation.
• Access state: anonymous.
• Failure/recovery: if a section fails to render, the rest of the page remains usable.
• Continuation: the visitor scrolls or uses the table of contents.

FR-2 — Smooth scroll with table of contents. As a Portfolio Visitor, I should navigate between sections using smooth scroll and a table of contents, so that I can jump to the work I care about.

• Provenance: explicit.
• Trigger/input: selecting an entry in the table of contents.
• Observable result: the page scrolls smoothly to that section.
• Access state: anonymous.
• Failure/recovery: if Lenis is disabled (Opening lock or overlay open), navigation still resolves to the correct section.
• Continuation: the visitor reads the section and continues.

FR-3 — Locker-item overlays. As a Portfolio Visitor, I should open locker items (Participation, Achievement, etc.) as full-screen overlays, so that I can inspect an item without leaving the page.

• Provenance: explicit.
• Trigger/input: activating a locker item.
• Observable result: a full-screen overlay opens; the URL hash becomes e.g. #/participation.
• Access state: anonymous.
• Failure/recovery: an unknown hash does not break the page.
• Continuation: the visitor closes the overlay and returns to the page.

FR-4 — Overlay close, Esc, and browser Back. As a Portfolio Visitor, I should close an overlay with a close button, the Esc key, or the browser Back button, so that closing behaves the way I expect.

• Provenance: explicit.
• Trigger/input: close button, Esc keypress, or browser Back.
• Observable result: the overlay closes and the hash clears.
• Access state: anonymous.
• Failure/recovery: if the overlay is already closed, the inputs are no-ops.
• Continuation: the visitor resumes scrolling.

FR-5 — Opening scroll-lock and unlock. As a Portfolio Visitor, I should see a locked Opening stage until I open the locker, so that the first screen is a deliberate moment.

• Provenance: explicit.
• Trigger/input: page load; then activating "Open the locker".
• Observable result: the stage is scroll-locked; on activation the door swings open and the page unlocks.
• Access state: anonymous.
• Failure/recovery: with prefers-reduced-motion, the door opens without the morph and the page still unlocks.
• Continuation: the visitor scrolls into the next band.

FR-6 — Lenis disable during lock and overlays. As a Portfolio Visitor, I should have smooth scroll disabled while the Opening is locked or an overlay is open, so that the locked stage and overlays behave correctly.

• Provenance: explicit.
• Trigger/input: entering the Opening lock or opening an overlay.
• Observable result: Lenis is disabled; it re-enables on unlock or overlay close.
• Access state: anonymous.
• Failure/recovery: if Lenis fails to initialize, native scrolling remains functional.
• Continuation: normal scrolling resumes.

FR-7 — Flipbook with PDF rendering. As a Portfolio Visitor, I should flip through a PDF flipbook, so that I can read the document as a physical-feeling object.

• Provenance: explicit.
• Trigger/input: page-flip gestures or controls on the flipbook.
• Observable result: pages turn; PDF pages render via pdfjs-dist.
• Access state: anonymous.
• Failure/recovery: if the PDF is missing, a tidy themed fallback is shown instead of a broken viewer.
• Continuation: the visitor continues flipping or scrolls on.

FR-8 — CSS 3D locker. As a Portfolio Visitor, I should see the locker rendered in CSS 3D, so that it feels dimensional without being heavy on my phone.

• Provenance: explicit.
• Trigger/input: page load and the open action.
• Observable result: the locker renders with perspective and transform-style: preserve-3d; the door swings on a 900ms cubic-bezier(0.2, 0.9, 0.1, 1) with the hot-pink glow seam brightening through the arc.
• Access state: anonymous.
• Failure/recovery: with prefers-reduced-motion, the morphs stop and the glow freezes.
• Continuation: the page unlocks.

FR-9 — Section colour map. As a Portfolio Visitor, I should see each section in its specified colour band, so that the page reads as a designed object.

• Provenance: explicit.
• Trigger/input: scrolling into each band.
• Observable result: each section uses its specified background, text, and accent from the section colour map (Opening closed/open, Personal Brand, Writing Portfolio hero, Cassette disc, Content Marketing, Example Strategy hero and video reveal, Project Campus, Podcast, Archive, Contact).
• Access state: anonymous.
• Failure/recovery: n/a.
• Continuation: the visitor continues through the bands.

FR-10 — Personal Brand pure-white canvas. As a Portfolio Visitor, I should see the Personal Brand section on a pure-white canvas, so that the giant type reads as embossed paper.

• Provenance: explicit.
• Trigger/input: scrolling into Personal Brand.
• Observable result: background is --pure-white #FFFFFF; the giant Anton headline is set in pure white on pure white paper with only a cherry-red hairline underline.
• Access state: anonymous.
• Failure/recovery: n/a.
• Continuation: the visitor scrolls on.

FR-11 — Fluid typography. As a Portfolio Visitor, I should see headlines and narration at the specified fluid sizes, so that text is readable at every viewport.

• Provenance: explicit.
• Trigger/input: viewport resize.
• Observable result: headline uses clamp(2.1rem, 1.2rem + 3.6vw, 4.125rem) with line-height 1.02, letter-spacing -0.01em, text-wrap: balance; narration uses clamp(1rem, 0.85rem + 0.7vw, 1.556rem) in Poppins italic with line-height 1.5, text-wrap: pretty, max width ~58ch; the gap token --headline-narration-gap: 1.5rem separates narration from headline.
• Access state: anonymous.
• Failure/recovery: fallback fonts prevent layout shift.
• Continuation: n/a.

FR-12 — Font loading. As a Portfolio Visitor, I should see the intended typefaces without layout shift, so that the page feels stable.

• Provenance: explicit.
• Trigger/input: page load.
• Observable result: Sentient loads from Fontshare with font-display: swap, preconnect, and fallbacks; other fonts load from Google Fonts.
• Access state: anonymous.
• Failure/recovery: fallbacks ('Fraunces', Georgia, serif, system-ui, sans-serif, etc.) render if a font fails.
• Continuation: n/a.

FR-13 — Asset fallbacks. As a Portfolio Visitor, I should see a tidy themed fallback when an asset is missing, so that the page never shows a broken icon or error text.

• Provenance: explicit.
• Trigger/input: an asset referenced via /assets/... fails to load.
• Observable result: a themed fallback per that section's rules.
• Access state: anonymous.
• Failure/recovery: the fallback itself is the recovery.
• Continuation: the visitor continues.

FR-14 — Contact. As a Portfolio Visitor, I should reach out through the Contact section, so that I can start a conversation with Jassinta.

• Provenance: explicit.
• Trigger/input: activating a contact channel in the Contact section.
• Observable result: the visitor's chosen contact channel opens.
• Access state: anonymous.
• Failure/recovery: if a channel is unavailable, the remaining channels still work.
• Continuation: the visitor leaves the site having made contact.

FR-15 — Modular architecture. As the Portfolio Owner, I should have content data separated from components, so that I can update the portfolio without touching component code.

• Provenance: explicit.
• Trigger/input: editing src/data/*.ts.
• Observable result: one component per section; no content data inside components.
• Access state: n/a (build-time).
• Failure/recovery: n/a.
• Continuation: n/a.

FR-16 — Static Vercel build. As the Portfolio Owner, I should get a static dist/ build, so that I can deploy to Vercel without a server.

• Provenance: explicit.
• Trigger/input: running the build.
• Observable result: a static dist/ folder.
• Access state: n/a (build-time).
• Failure/recovery: n/a.
• Continuation: n/a.

FR-17 — No client-side API keys. As the Portfolio Owner, I should have no API keys on the client side, so that the site requires no API and stays safe.

• Provenance: explicit.
• Trigger/input: n/a.
• Observable result: no API keys in client code; no API calls.
• Access state: n/a.
• Failure/recovery: n/a.
• Continuation: n/a.

FR-18 — English-only UI and code. As a Portfolio Visitor, I should read all website text in English, so that the portfolio is internationally legible.

• Provenance: explicit.
• Trigger/input: n/a.
• Observable result: all website-facing text is English; code, variable names, component names, and comments are English; specific work/article titles that are originally Indonesian are displayed as-is.
• Access state: anonymous.
• Failure/recovery: n/a.
• Continuation: n/a.

FR-19 — Staged workflow and summaries. As the Portfolio Owner, I should receive a short summary after each stage, so that I know what was built, what remains TODO, and how to test it.

• Provenance: explicit.
• Trigger/input: completing a stage.
• Observable result: a summary of what was built, what remains TODO, and how to test it.
• Access state: n/a (process).
• Failure/recovery: n/a.
• Continuation: the next stage.

FR-20 — Literal, complete implementation. As the Portfolio Owner, I should have the specification followed literally and completely, so that no feature is silently dropped.

• Provenance: explicit.
• Trigger/input: n/a.
• Observable result: no summarizing, shortening, or dropping of features; if a feature is hard, the best possible version is built with a clear // TODO: comment rather than silently removing it.
• Access state: n/a (process).
• Failure/recovery: the // TODO: comment is the recovery.
• Continuation: n/a.

FR-21 — Ambiguity resolution and DECISIONS.md. As the Portfolio Owner, I should have ambiguous decisions recorded, so that the reasoning is traceable.

• Provenance: explicit.
• Trigger/input: an ambiguity arises.
• Observable result: the decision written in the specification is chosen; if not written, the option closest to the theme (girly, playful, textured) is chosen and recorded in DECISIONS.md.
• Access state: n/a (process).
• Failure/recovery: n/a.
• Continuation: n/a.

FR-22 — Stage isolation. As the Portfolio Owner, I should have other section files untouched during a stage, so that work stays contained.

• Provenance: explicit.
• Trigger/input: working on a stage.
• Observable result: other section files are not modified except for minimal integration.
• Access state: n/a (process).
• Failure/recovery: n/a.
• Continuation: n/a.

4. User Personas

Portfolio Visitor

A recruiter, client, or collaborator who lands on the one-page portfolio to evaluate Jassinta Roid Triniti's work across social media, content creation, videography, and graphic design. They arrive anonymously, often on a phone, and their primary goal is a complete, non-reloading browse of the portfolio that ends in a contact action.

Their distinct accepted responsibilities: scrolling through the sections via the table of contents and smooth scroll; opening the full-screen locker overlays (Participation, Achievement, etc.) to inspect individual items; flipping through the PDF flipbook; and finishing by using the Contact section to reach out. Their relevant inputs and decisions are which sections to visit, which locker items to open, and which contact channel to use. They interact with the Portfolio Owner only indirectly — through the content she authored and through the contact action they take. Their observable success is a complete browse that ends in a contact action.

What makes this role's work different: they are the sole active human actor in the running product. Every accepted interaction — the Opening lock, the overlays, the flipbook, the contact action — is theirs to initiate and complete.

Portfolio Owner (Jassinta Roid Triniti)

The Social Media Specialist, Content Creator, Videographer, and Graphic Designer whose personal brand the site presents. She is the source of the portfolio content — writing samples, cassette disc, content marketing strategy, campus projects, podcast, and archive items — and the recipient of inbound contact.

Her primary goal is a deployed Vercel site that faithfully presents her work and identity in the playful, girly, textured theme. Her distinct accepted responsibilities are authoring the content data in src/data/*.ts, defining the section colour map and typography, and receiving inbound contact. Her relevant inputs and decisions are the content itself, the ambiguity decisions recorded in DECISIONS.md, and the staged build order. She interacts with the Portfolio Visitor only through the content she authored and the contact she receives. Her observable success is a static dist/ build deployed to Vercel that presents her work faithfully.

What makes this role's work different: she does not operate a running surface in the current scope. Her work is authoring and shipping, not browsing.

5. Core User Flows

Flow 1 — Portfolio Visitor: full browse ending in contact

1. The visitor lands on the single long page at the site root. The Opening stage is scroll-locked: a pearl→warm-grey corridor wall with a steel-lilac capsule locker centred at ~60% viewport height, its door slightly ajar with a hot-pink glow seam, five candy word-blocks (SOCIAL, CONTENT, VIDEO, DESIGN, STORY) orbiting on a slow 20s float, the name "JASSINTA ROID TRINITI" in Sentient with "Triniti" in cherry-red italic, and a single hot-pink capsule button "Open the locker".
2. The visitor activates "Open the locker". The door swings on a 900ms cubic-bezier(0.2, 0.9, 0.1, 1) with the hot-pink glow seam brightening through the arc; the locker body becomes candy-pink, the interior berry, the shelves blush. The page unlocks and Lenis re-enables.
3. The visitor scrolls into the Personal Brand band: a pure-white canvas with one giant Anton headline spanning the full viewport width, set in pure white on pure white paper with only a cherry-red hairline underline.
4. The visitor continues through the Writing Portfolio hero (powder-pink with paper grain), the Cassette disc (blush→lilac with grain), Content Marketing (plum-night gradient with film grain), the Example Strategy hero (lilac with grain), and the Example Strategy video reveal (plum-night gradient with a pink-checkerboard floor, a hot-pink light sweep scrubbed left-to-right with scroll, and the video frame rising out of the floor as a glossy capsule).
5. The visitor continues through Project Campus (vanilla with walnut wooden shelves), Podcast (blush), and Archive (plum-night gradient with DM Mono / Special Elite archive cards).
6. At any point, the visitor opens a locker item (Participation, Achievement, etc.). A full-screen plum-night capsule overlay opens with a rounded close pill; the URL hash becomes e.g. #/participation; Lenis is disabled.
7. The visitor closes the overlay with the close pill, the Esc key, or the browser Back button. The overlay closes, the hash clears, Lenis re-enables, and the previous scroll position is restored.
8. The visitor flips through the PDF flipbook. Pages turn; PDF pages render via pdfjs-dist. If the PDF is missing, a tidy themed fallback is shown instead of a broken viewer.
9. The visitor reaches the Contact section (plum-night gradient with glow, milk-white text, bubblegum accent) and activates a contact channel. The chosen channel opens.
10. Failure/recovery: if an asset referenced via /assets/... is missing, a tidy themed fallback per that section's rules is shown — never a broken icon or error text. If an overlay hash is invalid, the page stays usable. With prefers-reduced-motion, the morphs stop, the glow freezes, and marquee items wrap into rows.
11. Continuation: the visitor leaves the site having made contact.

Flow 2 — Portfolio Owner: author, build, and deploy

1. The owner authors content data in src/data/*.ts — writing samples, cassette disc, content marketing strategy, campus projects, podcast, and archive items — keeping content out of components.
2. The owner resolves ambiguities: the decision written in the specification is chosen; if not written, the option closest to the theme (girly, playful, textured) is chosen and recorded in DECISIONS.md.
3. The owner works in stages when asked ("Stage N"), touching other section files only for minimal integration.
4. After each stage, the owner receives a short summary of what was built, what remains TODO, and how to test it.
5. The owner runs the build, producing a static dist/ folder.
6. The owner deploys dist/ to Vercel without a server.
7. Failure/recovery: if a feature is hard, the best possible version is built with a clear // TODO: comment rather than silently removing it.
8. Continuation: the owner receives inbound contact from Portfolio Visitors through the Contact section.

6. Visuals Colors and Theme

The creative direction is Sensual pop minimalism after Karim Rashid — glossy candy colour, organic curves, optimism as a material. The muse is Karim Rashid. The brief's own palette is Rashid's: bubblegum, candy-pink, lilac, mint, glossy surfaces, plum-night as the dark ground. His language of organic capsule shapes, blob forms and liquid morphing is exactly the "playful, girly, textured" register the client asked for.

Headline: Optimism as a material — a glossy candy pop world that still reads as a designed object.

Colour tokens (exact hex by role)

Pink (primary girly palette)

Purple / Lavender

Mint / Green / Pastel Blue

Yellow / Cream / Paper

Neutrals & Metals

Named gradients

• --grad-plum-night: linear-gradient(160deg, #2A0F2E 0%, #4B1D4F 55%, #7A2E5C 100%)
• --grad-cotton-candy: linear-gradient(135deg, #FFD6E8 0%, #E3D4FA 50%, #CDEBF8 100%)
• --grad-bubblegum: linear-gradient(135deg, #FF8DC7 0%, #FF2E93 100%)
• --grad-lilac-mint: linear-gradient(135deg, #D4C1F5 0%, #D4F2E4 100%)

Two-mode system

Light mode (Opening wall, Personal Brand, Writing Portfolio, Project Campus): ground #F4EFF1 → #D9D3D6 wall; surfaces #FFB3D9 candy locker / #B9B8CC steel-lilac / #FFFDF9 milk-white paper; ink text #1B1017; primary #FF2E93 hot-pink; cherry-red #E5173F as the italic headline accent; mint #A8E6CF and butter #FFF1A8 as small candy blocks.

Dark mode (Content Marketing, Archive, Contact, video reveal): ground #2A0F2E plum-night → #4B1D4F aubergine → #7A2E5C berry; milk-white #FFFDF9 text; accent #DA9AF2 orchid glow behind #FF2E93 hot-pink; surfaces #7A2E5C berry with #BFA8E5 lavender hairlines.

Proportion: 70% ground, 20% pastel surface blocks, 8% ink/milk text, 2% hot-pink. Hot-pink is a signal, never a wash — it appears only on the primary CTA, the locker glow seam, and one accent word per headline.

Section colour map

Typography

Sentient is loaded via Fontshare at https://api.fontshare.com/v2/css?f[]=sentient@300,301,400,401,500,501,700,701&display=swap with font-display: swap, preconnect, and fallbacks to avoid layout shift. Odd-numbered variants (301, 401, 501, 701) are italics.

Type scale: 1.25 modular with a 66px display ceiling. Steps: 66 / 48 / 34 / 24.9 / 18 / 16 / 13. Labels and archive text: 13px DM Mono, uppercase, letter-spacing 0.12em.

Fluid rules:

• Headline 66px: font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.125rem); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance;
• Narration 24.9px: font-size: clamp(1rem, 0.85rem + 0.7vw, 1.556rem); Poppins italic; line-height: 1.5; text-wrap: pretty; max width ~58ch.
• Narration-to-headline gap: --headline-narration-gap: 1.5rem.

Shape language

Organic pop geometry. Capsules and pill buttons with fully rounded ends, blob section dividers that bulge into the next band, glossy capsule cards with a soft top highlight, curved locker-door edges rather than hard rectangles, and one continuous "liquid" SVG curve that runs down the page edge as a spine. Corners are either fully round (999px) or deliberately sharp — never a timid 8px. The locker is a rounded capsule volume in CSS 3D with a chrome handle and a hot-pink glow seam that widens as the door swings.

Spacing rhythm

Full-bleed colour bands separated by bulbous blob curves rather than straight edges. Content sits in a 7-of-12 column with a floating capsule table-of-contents on the right at desktop, collapsing to a bottom pill dock on mobile.

Imagery style

Glossy 3D props and candy-coloured objects shot as if lit in a softbox: a lipstick, a cassette, a polaroid stack, a chrome key, a pair of headphones — all rendered as flat-illustrated glossy shapes with a single specular highlight, never stock photography. Real work imagery (thumbnail grids, video stills, magazine spreads) sits inside capsule frames with a hard pastel offset shadow. The locker interior is berry #7A2E5C with blush #FFD6E8 shelves and small glossy objects on each shelf. Textures: film grain over plum-night bands, subtle paper grain over powder-pink bands, nothing else.

7. Signature Design Concept

The public entry is a scroll-locked CSS-3D capsule locker that is the entire first screen.

A pearl-to-warm-grey corridor wall fills the viewport. Dead centre sits a single steel-lilac capsule locker at roughly 60% of viewport height, rendered in CSS 3D with perspective on the stage and transform-style: preserve-3d on the door. The door is slightly ajar, and a hot-pink glow seam bleeds out of the gap. Around the locker, five flat candy word-blocks — SOCIAL, CONTENT, VIDEO, DESIGN, STORY — in bubblegum, butter, pastel-mint, baby-blue and lilac, each a rounded capsule, orbit the locker on a slow 20s float, never overlapping the name or the CTA. Below the locker, left-aligned on a 7-column measure, the name JASSINTA ROID TRINITI in Sentient at clamp(2.1rem, 1.2rem + 3.6vw, 4.125rem) with "Triniti" in cherry-red italic, and a single hot-pink capsule button "Open the locker" pinned beneath it.

There is no centred stack, no gradient blob, no blue button — the locker is the hero, the type sits beside it, and the whole stage is scroll-locked until the door opens. Activating the button swings the door on a 900ms cubic-bezier(0.2, 0.9, 0.1, 1) with the hot-pink glow seam brightening through the arc, the chrome handle rotating with the hinge, before the page unlocks and the band scrolls away.

This concept only recomposes accepted content, states and controls: the locker, the word-blocks, the name, the CTA, and the scroll-lock are all specified in the authoritative requirements.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the steel-lilac capsule locker at ~60% viewport height, door slightly ajar with a hot-pink glow seam, orbited by five candy word-blocks (SOCIAL, CONTENT, VIDEO, DESIGN, STORY).
• Input → transformation → outcome thesis: the visitor activates "Open the locker" → the door swings on a 900ms cubic-bezier(0.2, 0.9, 0.1, 1) with the hot-pink glow seam brightening through the arc and the chrome handle rotating with the hinge → the page unlocks and the band scrolls away into the Personal Brand section.
• Motion vocabulary: liquid and glossy, never bouncy-cute. Section entrances are soft scale-and-rise (0.96 → 1, 24px, 500ms) as the band enters the viewport; blob dividers morph their control points slowly on scroll; capsule buttons squash 4% on press and release with a slow ease-out; the plum-night video reveal scrubs a checkerboard floor and a hot-pink light sweep tied to scroll position. Lenis drives everything, disabled during the Opening lock and whenever an overlay is open.
• Composed first frame: pearl-to-warm-grey corridor wall; the locker centred with its door ajar and the glow seam bleeding out; the five candy word-blocks mid-orbit around it; the name "JASSINTA ROID TRINITI" in Sentient with "Triniti" in cherry-red italic, left-aligned on a 7-column measure below the locker; the hot-pink capsule button "Open the locker" pinned beneath the name.
• Reduced-motion state: prefers-reduced-motion stops the morphs, freezes the glow, and shows all marquee items wrapped in rows. The door opens without the morph and the page still unlocks.

9. Non-Functional Requirements

NFR-1 — Performance. 60fps on a mid-range laptop. Provenance: explicit. Rationale: the brief's quality principles.

NFR-2 — No unintended horizontal scrollbar. No unintended horizontal scrollbar at any viewport. Provenance: explicit. Rationale: the brief's quality principles.

NFR-3 — No container overflow. No elements escape their container. Provenance: explicit. Rationale: the brief's quality principles.

NFR-4 — No large layout shifts. No large layout shifts; fonts load with font-display: swap, preconnect, and fallbacks. Provenance: explicit. Rationale: the brief's quality principles.

NFR-5 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut as the direction asks, as long as it covers no readable text or control. Moving and scrollable content (marquees, tickers, carousels, horizontally scrollable rows) may cross the viewport or container edge by design; with prefers-reduced-motion it stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row (overflow-x: auto). Provenance: explicit (creative direction). Rationale: accessibility and legibility.

NFR-6 — Static deployability. The build outputs a static dist/ folder deployable to Vercel without a server. Provenance: explicit. Rationale: the brief's deployment requirement.

NFR-7 — No client-side API keys. No API keys on the client side; the website requires no API. Provenance: explicit. Rationale: the brief's security constraint.

NFR-8 — CSS 3D only for the locker. The 3D locker uses CSS 3D transforms (perspective, transform-style: preserve-3d), not Three.js, to stay light on phones. Provenance: explicit. Rationale: the brief's performance constraint.

NFR-9 — Lenis disableability. Lenis (or equivalent) must be disableable during the Opening scroll-lock and while an overlay is open. Provenance: explicit. Rationale: the brief's scroll constraint.

NFR-10 — English-only UI and code. All website-facing text is fully in English; all code, variable names, component names, and code comments are in English. Specific work/article titles that are originally Indonesian are displayed as-is. Provenance: explicit. Rationale: the brief's language constraint.

NFR-11 — Content data separation. Content data lives in src/data/*.ts, not inside components. Provenance: explicit. Rationale: the brief's modular architecture constraint.

NFR-12 — Asset path and fallback. Assets (images/videos/PDFs) are referenced via /assets/... paths; when a file is missing, a tidy fallback is shown (not a broken icon, not error text) per each section's rules. Provenance: explicit. Rationale: the brief's asset constraint.

NFR-13 — No forbidden display typefaces. Nothing is set in Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins-as-heading, or system-ui for any display type. Provenance: explicit (creative direction). Rationale: the direction's typography rule.

NFR-14 — No blue/indigo primary or accent. Blue or indigo must not appear as a primary or accent; baby-blue and periwinkle may appear only as 1-of-5 candy blocks, never as a CTA or link colour. The generic indigo/blue-on-white SaaS template is forbidden. Provenance: explicit (creative direction). Rationale: the direction's palette rule.

NFR-15 — Flat offset shadows only. Shadows are always flat offset capsules in a named pastel, never soft blurred drop shadows. Provenance: explicit (creative direction). Rationale: the direction's shape language.

NFR-16 — No glassmorphism. Translucency is done with flat pastel at 60% opacity and hairline lavender borders, not backdrop-filter. Provenance: explicit (creative direction). Rationale: the direction's surface rule.

10. Tech Stack

• Frontend: React 18 + Vite + TypeScript + Tailwind CSS. (explicit)
• Animation: Framer Motion (or GSAP + ScrollTrigger where better suited to scroll-driven work), choosing one consistent approach per need. (explicit)
• Smooth/inertial scroll: Lenis (or equivalent), disableable during the Opening scroll-lock and while an overlay is open. (explicit)
• Flipbook: page-flip (StPageFlip) or react-pageflip, rendering PDFs with pdfjs-dist. (explicit)
• 3D locker: CSS 3D transforms (perspective, transform-style: preserve-3d), not Three.js. (explicit)
• Fonts: Fontshare (Sentient) and Google Fonts (the rest). (explicit)
• Build output: static dist/ folder, deployable to Vercel without a server. (explicit)
• Storage: none required — the site is client-only with no API and no server-side state. (required_inference: the explicit no-API and static-build constraints make any storage unnecessary.)
• Docker / Kubernetes: not required — the static dist/ build deploys to Vercel without a server. (required_inference: the explicit static-deployment constraint makes container orchestration unnecessary.)

11. Assumptions and Constraints

Assumptions

• A-1: The Portfolio Visitor is anonymous; no account, sign-in, or session continuity is required. [Assumption — grounded in the explicit one-page, no-API, static-build constraints.]
• A-2: The Portfolio Owner does not operate a running authenticated surface in the current scope; her role is authoring content data and receiving inbound contact. [Assumption — grounded in the explicit content-data and contact requirements.]
• A-3: Contact channels are external destinations (e.g. email, social profiles) opened from the Contact section; the site itself does not host a messaging backend. [Assumption — grounded in the explicit no-API constraint.]
• A-4: Where the specification is silent on a visual or interaction detail, the option closest to the theme (girly, playful, textured) is chosen and recorded in DECISIONS.md. [Assumption — explicit rule.]

Constraints

• C-1: One-page website only: a single long page with no page reload; locker-item pop-ups are full-screen overlays, not new routes. (explicit)
• C-2: No API keys on the client side; the website requires no API. (explicit)
• C-3: The 3D locker must use CSS 3D transforms, not Three.js, to stay light on phones. (explicit)
• C-4: Lenis smooth/inertial scroll must be disableable during the Opening scroll-lock and while an overlay is open. (explicit)
• C-5: All website-facing text must be fully in English; all code, variable names, component names, and code comments must be in English. Specific work/article titles that are originally Indonesian are displayed as-is. (explicit)
• C-6: Content data must live in src/data/*.ts, not inside components. (explicit)
• C-7: Assets must be referenced via /assets/... paths; missing files must show a tidy fallback, not a broken icon or error text. (explicit)
• C-8: The build must output a static dist/ folder deployable to Vercel without a server. (explicit)
• C-9: Quality targets: 60fps on a mid-range laptop; no unintended horizontal scrollbar; no elements escaping their container; no large layout shifts. (explicit)
• C-10: Do not summarize, shorten, or drop features; if a feature is hard, build the best possible version and add a clear // TODO: comment rather than silently removing it. (explicit)
• C-11: When working on one stage, do not modify other section files except for minimal integration. (explicit)
• C-12: The Personal Brand canvas must be pure white (--pure-white #FFFFFF). (explicit)
• C-13: Blue or indigo must not appear as a primary or accent; baby-blue and periwinkle may appear only as 1-of-5 candy blocks, never as a CTA or link colour. (explicit — creative direction)
• C-14: Nothing is set in Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins-as-heading, or system-ui for any display type. (explicit — creative direction)
• C-15: Shadows are always flat offset capsules in a named pastel, never soft blurred drop shadows. (explicit — creative direction)
• C-16: Translucency is done with flat pastel at 60% opacity and hairline lavender borders, not backdrop-filter. (explicit — creative direction)

12. Glossary

• Band: A full-bleed colour section of the long page, separated from the next by a blob curve.
• Blob divider: A wide SVG curve whose control points morph slowly on scroll, separating colour bands.
• Capsule: A fully rounded (999px) shape used for buttons, cards, and the locker volume.
• DECISIONS.md: The file recording ambiguity decisions chosen closest to the girly, playful, textured theme.
• Flipbook: The page-flip/react-pageflip spread rendering PDF pages via pdfjs-dist.
• Locker item: A portfolio item (Participation, Achievement, etc.) opened as a full-screen overlay.
• Lenis: The smooth/inertial scroll library, disableable during the Opening lock and while an overlay is open.
• Opening: The scroll-locked first screen with the CSS-3D capsule locker.
• Overlay: A full-screen plum-night capsule view opened from a locker item, addressed by hash (e.g. #/participation).
• Plum-night: The main dark ground #2A0F2E, used in the --grad-plum-night gradient.
• Sentient: The Fontshare display serif used for headlines, loaded with font-display: swap, preconnect, and fallbacks.
• Table of contents: The floating capsule rail at desktop (bottom pill dock on mobile) for section navigation.
• Word-block: One of the five candy capsules (SOCIAL, CONTENT, VIDEO, DESIGN, STORY) orbiting the locker.