System Requirements Document for portfolio-creative

1. Introduction

This document specifies the system requirements for portfolio-creative, a creative portfolio website for Jassinta Roid Triniti. The product is a Next.js 14 (App Router) TypeScript + Tailwind CSS application whose public face is a five-door tall-cabinet locker unit: visitors land on a closed locker with a typographic headline and an [OPEN] button, and opening the lockers reveals an interactive shelf arrangement of physical objects — a pastel 35mm camera, Polaroids on a jute string, a spiral notebook, a lilac envelope, a fashion magazine, retro sneakers, a shoulder bag, pastel books, and a framed certificate — each of which opens a detail modal. Beyond the locker, the site presents a realistic multi-page campus flipbook, a four-column example-strategy video reveal, marketing content, writing articles, an archive of works, and the companies the owner has worked with.

The audience is twofold: Portfolio Visitors (recruiters, clients, and curious browsers) who explore the work, and the Portfolio Owner / Content Curator (Jassinta Roid Triniti) who maintains the master data that drives every locker item, modal, flipbook page, and archive entry.

The product intent is a tactile, paper-and-metal, pastel-vintage portfolio that feels physically constructed rather than templated: torn-paper section transitions with no visible gaps, tall locker proportions that fit the viewport without cutoff, and artwork that is never cropped, overlapped, or distorted.

2. System Overview

Current delivery. A first-party Next.js 14 (App Router) TypeScript + Tailwind CSS web application. The public entry is the Landing page, which renders the closed five-locker unit, the middle-locker typography, the [OPEN] button, and the state-specific footer. Opening the lockers transitions to the Portfolio destination, which renders the open-locker shelf arrangement exactly per ASCII diagram C7.1 and hosts the item detail modals and the locker intro video. Additional public destinations present the campus flipbook (Campus), the four-column campaign reveal (Strategy), marketing content (Marketing), writing articles (Articles), the categorized works archive (Archive), and the named companies (Companies). A protected Content workspace lets the owner maintain the durable master data. Sign Up and Login provide first-use enrollment and returning verification for the owner.

Actors. Two accepted human personas: Portfolio Visitor and Portfolio Owner / Content Curator. Backend execution persists and retrieves the portfolio master data; it is a supporting system actor, not a persona.

Accepted behavior. The locker unit's two states, the exact shelf placement rules, the nine item detail visuals, the realistic flipbook, the ordered four-column video row, the zero-gap torn-paper divider, and the complete uncut master data (10 companies, 11 articles, 15 marketing contents, 4 campaigns, 34 archive works) are all current commitments.

Ownership. All public browsing destinations are first-party application pages reachable without identity establishment. The Content workspace is protected and requires the owner's verified identity. The locker reference photos at amazon.com/salp/elleslocker are used only as visual inspiration and structure reference for the closed/open locker layout; they supply no product names, copy, or capabilities.

Narrow exclusions. No adjacent account-management capabilities (password reset flows, profile editing, social login, role administration) are specified. No e-commerce, checkout, or payment behavior is specified. No third-party CMS is specified; the master data lives in the application's own data module and backend.

2a. Product Interpretation and Delivery Boundary

The product is delivered as a first-party web application. Public portfolio browsing — the locker, the flipbook, the strategy videos, marketing, articles, archive, and companies — is anonymous and requires no account. The only protected surface is the Content workspace, which the owner reaches after establishing identity through Sign Up (first use) or Login (returning). Identity is application-owned because the owner must privately own and resume durable, actor-specific master data that drives the public site.

The locker reference photos are used strictly as visual inspiration and structure reference for the closed and open locker layout; they contribute no product names, copy, facts, or capabilities. All item visuals are specified by the user's own reference photos and must match them exactly.

Everything described in this document is current. No future-horizon features are specified by the source.

2b. Source Content Inventory

No reference directive declares content_source authority. The only external reference (amazon.com/salp/elleslocker) is declared visual_inspiration and structure_reference only, so no source content inventory is included.

2c. Page Content and Component Coverage

Landing

• Information/state: Anonymous public entry. Renders the closed five-locker unit (State 1, isOpened === false) with a paper texture overlay on the locker backdrop. Middle locker (locker 3) is pink (lockerPink #F4A6BE) with a thick white paper cutout in front; outer doors are metallic grey (lockerGrey #7E858B). Middle-locker typography: line 1 "Content that" (Sentient Regular, inkBlack #1A1A1A); line 2 "is Felt," (Sentient Bold Italic on peachCream #FFDAB9); line 3 "Shared," (Sentient Italic on rosePetal #E8A0BF); line 4 "Remembered" (Sentient Bold on butterYellow #FFF4C1). Footer: "2026" (left), "Jassinta Roid Triniti" (center), "Creative Portfolio" (right). Bottom area is clean with no torn paper.
• Primary actions: [OPEN] button (hot pink #FF69B4, bold white text) below the typography; opening transitions to the open-locker state and unlocks scrolling.
• Supporting actions: None specified.
• Domain entities: Locker unit (5 doors), middle-locker headline, footer.
• Component responsibilities: LockerSection.tsx owns both states; scroll lock (overflow: hidden on body) is active in State 1; the locker row is scaled with height: min(86vh, calc(100vw * (2500 / 5450))) so the whole unit fits 100% on screen without vertical cutoff and without scroll when first opened.
• States: Loading — locker assets load before the closed state is shown. Empty — not applicable (static entry). Success — closed locker renders centered and fully visible. Error — if an asset fails, the locker frame and typography still render. Recovery — retry asset load; the [OPEN] interaction remains available.

Sign Up

• Information/state: Anonymous first-use enrollment for the Portfolio Owner / Content Curator. Collects the minimum identity information needed to establish the owner's account.
• Primary actions: Submit enrollment to create the owner's identity.
• Supporting actions: Navigate to Login for returning verification.
• Domain entities: Owner identity.
• Component responsibilities: Enrollment form; validation; submission to the backend.
• States: Loading — submission in progress. Empty — initial blank form. Success — identity established, owner proceeds to the Content workspace. Error — invalid or incomplete input is reported inline. Recovery — correct input and resubmit.

Login

• Information/state: Anonymous returning verification for the Portfolio Owner / Content Curator.
• Primary actions: Submit credentials to verify identity.
• Supporting actions: Navigate to Sign Up for first-use enrollment.
• Domain entities: Owner identity, session.
• Component responsibilities: Credential form; verification against the backend; session establishment.
• States: Loading — verification in progress. Empty — initial blank form. Success — verified, owner proceeds to the Content workspace. Error — invalid credentials reported. Recovery — re-enter credentials.

Portfolio

• Information/state: Anonymous interactive open-locker destination (State 2, isOpened === true) following ASCII diagram C7.1 exactly. Locker 1: closed door with a card reading "I Can Help You With:" and dash list items. Locker 2: open, with certificate and trophy on the shelf, plus a collection of magazines, camera, and shoes. Locker 3: open, with a video intro card including sound & pause controls. Locker 4: open, with photos, a letter, notes, a collection of books, and an umbrella leaning. Locker 5: closed door with a card reading "Platform I Am Proficient in:" and dash list items. Footer: "© 2026" (left) and "Jassinta Roid Triniti" (right). Interior is lockerInterior #FCE7EE with wood/cream shelves paperCream #FAF3E0.
• Primary actions: Open each item's detail modal; play/pause the locker intro video with sound controls.
• Supporting actions: Navigate to Campus, Strategy, Marketing, Articles, Archive, and Companies.
• Domain entities: Locker shelves, item detail modals (camera, Polaroids, notes, letter, magazine, shoes, bag, books, certificate), intro video.
• Component responsibilities: LockerSection.tsx renders the open state; each item modal renders its exact visual per the user's reference photos; strict physical placement — Polaroids hung on a string, non-floating items resting on shelves, umbrella leaning, depth layering.
• States: Loading — item assets load. Empty — not applicable. Success — all shelves and items render with correct placement and no overlap or clipping. Error — a failed item asset leaves its shelf slot intact. Recovery — retry asset load.

Campus

• Information/state: Anonymous destination for the multi-page campus flipbook.
• Primary actions: Flip pages forward and backward.
• Supporting actions: None specified.
• Domain entities: Flipbook pages.
• Component responsibilities: Flipbook component simulating genuine physical paper movement with 3D page curl deformation and dynamic shading.
• States: Loading — pages load. Empty — not applicable. Success — pages flip with realistic curl and shading. Error — a failed page asset leaves the flipbook navigable. Recovery — retry page load.

Strategy

• Information/state: Anonymous destination presenting the 4 example-strategy campaigns (Hard Selling, Entertainment, Education, Fun) with script, photo reference, metrics, see-more link, and 5 footage photos each.
• Primary actions: Play each campaign video; follow the see-more link.
• Supporting actions: Browse the 5 footage photos per campaign.
• Domain entities: Campaign (name, script, photo reference, metrics, see-more link, 5 footage photos).
• Component responsibilities: Four-column row rendering all 4 campaign videos side-by-side horizontally in the order Hard Selling → Entertainment → Education → Fun.
• States: Loading — videos and footage load. Empty — not applicable. Success — all 4 videos render in the required 4-column order. Error — a failed video leaves its column intact. Recovery — retry video load.

Marketing

• Information/state: Anonymous browse destination for the 15 marketing contents: Facial Messo, Ceramide, Pico Glow Laser, 6 Flyer Kecantikan, 3 Umroh Karamina, and 3 Konten Elspresso, each with metrics, social accounts, and text information.
• Primary actions: Browse each marketing content entry and its metrics, social accounts, and text information.
• Supporting actions: Follow outbound links to social accounts.
• Domain entities: Marketing content (name, metrics, social accounts, text information).
• Component responsibilities: Marketing content list/grid rendering all 15 entries in full.
• States: Loading — entries load. Empty — not applicable. Success — all 15 entries render with complete metadata. Error — a failed entry asset leaves its card intact. Recovery — retry load.

Articles

• Information/state: Anonymous browse destination for the 11 writing articles, each with title, date, author, media, maskFile, and link.
• Primary actions: Browse each article entry and follow its link.
• Supporting actions: None specified.
• Domain entities: Writing article (title, date, author, media, maskFile, link).
• Component responsibilities: Article list rendering all 11 entries with complete metadata.
• States: Loading — entries load. Empty — not applicable. Success — all 11 entries render with complete metadata. Error — a failed entry asset leaves its card intact. Recovery — retry load.

Archive

• Information/state: Anonymous revisitable categorized archive for the 34 works in Writing, Video, Feed, Bumper, and Book Trailer formats, each with ratio and link.
• Primary actions: Browse and filter the 34 works by format; follow each work's link.
• Supporting actions: None specified.
• Domain entities: Archive work (format, ratio, link).
• Component responsibilities: Archive grid/list rendering all 34 works with their formats, ratios, and links.
• States: Loading — works load. Empty — not applicable. Success — all 34 works render with correct ratios and links. Error — a failed work asset leaves its card intact. Recovery — retry load.

Companies

• Information/state: Anonymous browse destination for the 10 named companies: Elsthetic, Elspresso, Aishi Aesthetic Academy, Karamina Tour, ELS Corp, Aishi Beauty, Lassiewear, innalar.com, Independen Media, Ikapunija Media.
• Primary actions: Browse each company entry.
• Supporting actions: None specified.
• Domain entities: Company (name).
• Component responsibilities: Company list rendering all 10 named entries.
• States: Loading — entries load. Empty — not applicable. Success — all 10 companies render. Error — a failed entry asset leaves its card intact. Recovery — retry load.

Content

• Information/state: Protected curator workspace for maintaining the durable master data: 10 companies, 11 writing articles, 15 marketing contents, 4 example-strategy campaigns, and the 34-piece archive with their ratios and links. Access requires the owner's verified identity.
• Primary actions: Create, read, update, and delete master data entries across all five collections.
• Supporting actions: Navigate between collections.
• Domain entities: Company, Writing Article, Marketing Content, Example Strategy Campaign, Archive Work.
• Component responsibilities: Collection editors bound to the backend; validation; persistence.
• States: Loading — collections load. Empty — a collection with no entries shows an empty state. Success — changes persist and are reflected on the public destinations. Error — failed saves are reported. Recovery — retry save.

3. Functional Requirements

FR-1 — Project foundation. As the Portfolio Owner / Content Curator, I should have a Next.js 14 (App Router) TypeScript + Tailwind CSS creative portfolio website, so that my work is presented on a modern, maintainable foundation. (explicit)

• Trigger/input: Project initialization.
• Observable result: A Next.js 14 App Router TypeScript project with Tailwind CSS configured.
• Access state: N/A (build-time).
• Failure/recovery: N/A.
• Continuation: All subsequent modules build on this foundation.

FR-2 — Color palette registration. As the Portfolio Owner / Content Curator, I should have the full color palette registered in tailwind.config.ts, so that every surface uses the exact specified colors. (explicit)

• Trigger/input: Tailwind configuration.
• Observable result: tailwind.config.ts registers blushPink #F8C8DC, rosePetal #E8A0BF, hotPink #FF69B4, deepRose #C24B6E, softLavender #E6D5F3, lilacMist #C8A2C8, plumNight #4A2040, plumDark #2D1228, dustyMauve #B07AA1, peachCream #FFDAB9, warmCoral #FF7F7F, mintCream #D4EDDA, butterYellow #FFF4C1, skyBlueSoft #B3D9FF, offWhite #FFF8F0, warmWhite #FFFEF5, paperCream #FAF3E0, inkBlack #1A1A1A, charcoalSoft #3D3D3D, mutedGray #9E9E9E, lockerGrey #7E858B, lockerPink #F4A6BE, lockerInterior #FCE7EE, lockerMetalEdge #5C6267.
• Access state: N/A.
• Failure/recovery: N/A.
• Continuation: Components consume the registered tokens.

FR-3 — Typography registration. As the Portfolio Owner / Content Curator, I should have the full typography system registered, so that headlines, narration, letters, and metadata render in their specified fonts and sizes. (explicit)

• Trigger/input: Tailwind configuration.
• Observable result: Headlines use Sentient (Kia) at clamp(2.5rem, 5vw, 4.125rem) (66px desktop), tracking tight, align center; emphasis words use Sentient Bold Italic (deepRose #C24B6E); connective words use Sentient Bold (inkBlack #1A1A1A); narration uses Poppins Italic at clamp(1.1rem, 2vw, 1.55rem) (24.9px desktop) in charcoalSoft #3D3D3D placed 1.5px below the headline; letters and notes use a handwriting font (Caveat / Dancing Script); metadata/code uses JetBrains Mono or Fira Code.
• Access state: N/A.
• Failure/recovery: N/A.
• Continuation: All text surfaces consume the registered typography.

FR-4 — Torn paper divider component. As the Portfolio Owner / Content Curator, I should have src/components/Shared/TornPaperDivider.tsx as a 3-layer torn-paper divider, so that every section transition looks like real torn paper with no visible gap. (explicit)

• Trigger/input: Rendered between sections.
• Observable result: Negative vertical margins -mt-[2px] -mb-[2px] with lineHeight: 0 so no 1px empty gap ever appears; 3 organic wavy SVG path variants; layer 1 soft realistic drop-shadow drop-shadow-[0_8px_10px_rgba(0,0,0,0.08)]; layer 2 white deckle edge fiber stroke="#FFFFFF" at 3.5px thickness; layer 3 solid fill using the preceding section's fillColor.
• Access state: N/A.
• Failure/recovery: N/A.
• Continuation: Every torn-paper transition on the site uses this component.

FR-5 — Master data module. As the Portfolio Owner / Content Curator, I should have src/data/portfolioData.ts containing all master data in full with no shortened arrays, so that every locker item, modal, flipbook page, and archive entry renders from complete data. (explicit)

• Trigger/input: Data module import.
• Observable result: COMPANIES_DATA (10 companies: Elsthetic, Elspresso, Aishi Aesthetic Academy, Karamina Tour, ELS Corp, Aishi Beauty, Lassiewear, innalar.com, Independen Media, Ikapunija Media); WRITING_ARTICLES (11 articles with title, date, author, media, maskFile, link); CONTENT_MARKETING_DATA (15 marketing contents: Facial Messo, Ceramide, Pico Glow Laser, 6 Flyer Kecantikan, 3 Umroh Karamina, 3 Konten Elspresso, each with metrics, social accounts, and text information); EXAMPLE_STRATEGY_DATA (4 campaigns: Hard Selling, Entertainment, Education, Fun, each with script, photo reference, metrics, see-more link, and 5 footage photos); ARCHIVE_DATA (34 total works in Writing, Video, Feed, Bumper, Book Trailer formats with ratio and link).
• Access state: N/A.
• Failure/recovery: N/A.
• Continuation: Public destinations and the Content workspace read from this data.

FR-6 — Locker section component. As the Portfolio Owner / Content Curator, I should have src/components/Opening/LockerSection.tsx with all interactive detail modals, so that the locker unit and its item details are implemented as one cohesive component. (explicit)

• Trigger/input: Rendered on Landing and Portfolio.
• Observable result: The component renders both locker states and hosts all item detail modals.
• Access state: Anonymous.
• Failure/recovery: Failed assets leave the locker frame intact.
• Continuation: Visitors open the lockers and item modals.

FR-7 — Locker section styling. As the Portfolio Visitor, I should see the locker section styled with a paper texture overlay over the locker backdrop, so that the locker feels physically constructed. (explicit)

• Trigger/input: Locker section render.
• Observable result: Paper texture overlay over the locker backdrop; outer locker doors in metallic grey lockerGrey #7E858B with the middle door pink lockerPink #F4A6BE; open locker interior lockerInterior #FCE7EE with wood/cream shelves paperCream #FAF3E0.
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: The styled locker is the entry surface.

FR-8 — Middle locker typography. As the Portfolio Visitor, I should see the four-line headline on the middle locker with its specified fonts and background colors, so that the entry message reads exactly as designed. (explicit)

• Trigger/input: Locker section render.
• Observable result: Line 1 "Content that" (Sentient Regular, inkBlack #1A1A1A); line 2 "is Felt," (Sentient Bold Italic on peachCream #FFDAB9); line 3 "Shared," (Sentient Italic on rosePetal #E8A0BF); line 4 "Remembered" (Sentient Bold on butterYellow #FFF4C1); [OPEN] button hot pink #FF69B4 with bold white text.
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: The [OPEN] button opens the lockers.

FR-9 — Locker proportions. As the Portfolio Visitor, I should see the five-locker unit scaled to fit the viewport without vertical cutoff, so that the whole locker stands tall like a cabinet and fits 100% on screen without scroll when first opened. (explicit)

• Trigger/input: Viewport render.
• Observable result: Each single locker door base size 1090 × 2500 px (tall cabinet ratio 1:2.29); the 5-locker unit totals 5450 × 2500 px; in the browser the locker row is scaled with height: min(86vh, calc(100vw * (2500 / 5450))).
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: The locker fits the viewport before scrolling is unlocked.

FR-10 — State 1 (closed locker). As the Portfolio Visitor, I should see the closed locker state with scroll lock, centered doors, the [OPEN] button, and the state-specific footer, so that the entry experience is exactly as specified. (explicit)

• Trigger/input: isOpened === false.
• Observable result: Scroll lock active (overflow: hidden on body); 5 closed locker doors center-aligned; locker 3 (middle) pink with a thick white paper cutout in front; [OPEN] button below the typography; footer with "2026" (left), "Jassinta Roid Triniti" (center), "Creative Portfolio" (right); bottom area clean with no torn paper.
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: The visitor presses [OPEN].

FR-11 — State 2 (open locker). As the Portfolio Visitor, I should see the open locker state following ASCII diagram C7.1 exactly, so that each locker's contents and cards are placed as specified. (explicit)

• Trigger/input: isOpened === true.
• Observable result: Locker 1 closed door with a card reading "I Can Help You With:" and dash list items; locker 2 open with certificate and trophy on the shelf, plus a collection of magazines, camera, and shoes; locker 3 open with a video intro card including sound & pause controls; locker 4 open with photos, a letter, notes, a collection of books, and an umbrella leaning; locker 5 closed door with a card reading "Platform I Am Proficient in:" with dash list items; footer "© 2026" (left) and "Jassinta Roid Triniti" (right).
• Access state: Anonymous.
• Failure/recovery: Failed assets leave their shelf slots intact.
• Continuation: The visitor opens item detail modals or navigates to other destinations.

FR-12 — Locker door and shelf placement rules. As the Portfolio Visitor, I should see lockers 1, 3, and 5 with closed doors and attached cards, and lockers 2 and 4 open with strict physical placement, so that the locker reads as a real physical cabinet. (explicit)

• Trigger/input: Open locker render.
• Observable result: Lockers 1, 3, and 5 have closed doors with cards attached; lockers 2 and 4 are open with Polaroids hung on a string, non-floating items resting on shelves, umbrella leaning, and depth layering.
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: Items remain selectable for detail modals.

FR-13 — 3D item details. As the Portfolio Visitor, I should see each locker item rendered to match the user's reference photos exactly, so that the portfolio's physical objects are recognizable and faithful. (explicit)

• Trigger/input: Item render on the open locker shelves.
• Observable result: Pastel vintage 35mm camera "PASTELCA" (mint green, baby pink body, lavender lens, soft purple buttons); 3 Polaroids pinned with wooden clothespins on a horizontal jute string; spiral-bound soft pink notebook with bold magenta "NOTES" title; elegant soft lilac/lavender paper envelope letter; pastel pink fashion magazine "Belleza." with white serif typography; vintage retro runner sneakers in beige/cream suede with dark brown stripes; feminine baby pink shoulder bag with silver buckle and two small flap pockets; stack and row of soft pastel spine books (dusty pink, lavender, sage, baby blue, peach); classic vintage ornate gold carved picture frame certificate with parchment paper and gold foil seal.
• Access state: Anonymous.
• Failure/recovery: A failed item asset leaves its shelf slot intact.
• Continuation: The visitor opens the item's detail modal.

FR-14 — Realistic flipbook. As the Portfolio Visitor, I should experience multi-page book flipping that simulates genuine physical paper movement with 3D page curl deformation and dynamic shading, so that the campus flipbook feels like a real book. (explicit)

• Trigger/input: Page flip on Campus.
• Observable result: Pages curl in 3D with dynamic shading during the flip.
• Access state: Anonymous.
• Failure/recovery: A failed page asset leaves the flipbook navigable.
• Continuation: The visitor continues flipping or navigates away.

FR-15 — Example strategy video reveal. As the Portfolio Visitor, I should see all 4 campaign videos arranged side-by-side horizontally in a 4-column row in the order Hard Selling → Entertainment → Education → Fun, so that the campaign comparison is presented as specified. (explicit)

• Trigger/input: Strategy destination render.
• Observable result: 4 campaign videos in a 4-column horizontal row in the required order.
• Access state: Anonymous.
• Failure/recovery: A failed video leaves its column intact.
• Continuation: The visitor plays videos or follows see-more links.

FR-16 — Torn paper divider zero-gap rule. As the Portfolio Visitor, I should see every torn paper transition rendered with the 3-layer TornPaperDivider with no empty gaps, so that section transitions look continuous. (explicit)

• Trigger/input: Section transition render.
• Observable result: Every torn paper transition uses the 3-layer TornPaperDivider with negative vertical margins (-mt-[2px] -mb-[2px]), white deckle edge fibers, and exact matching fillColor from the preceding section; no empty gaps.
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: Sections read as one continuous torn-paper document.

FR-17 — Zero inventions and no code cutting. As the Portfolio Owner / Content Curator, I should receive production-ready, complete TypeScript code with no summarized or omitted data, so that the delivered implementation is complete and runnable. (explicit)

• Trigger/input: Code generation.
• Observable result: Production-ready, complete TypeScript code; no summarized or omitted data.
• Access state: N/A.
• Failure/recovery: N/A.
• Continuation: The delivered code runs without missing data.

FR-18 — Asset integrity. As the Portfolio Visitor, I should see every media container and placeholder strictly fit its designated pixel aspect ratio, so that artwork is never covered, overlapped, cropped, distorted, or pushed out of view. (explicit)

• Trigger/input: Media render.
• Observable result: Every media container/placeholder strictly fits its designated pixel aspect ratio; artwork is never covered, overlapped, cropped, distorted, or pushed out of view.
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: All artwork remains fully visible.

FR-19 — Layout fidelity to ASCII art. As the Portfolio Owner / Content Curator, I should have all page layouts, modal dialogs, locker shelves, item placements, and component structures render exactly matching the provided ASCII diagrams and detailed positioning rules, so that the delivered layout matches the specification. (explicit)

• Trigger/input: Page and modal render.
• Observable result: Layouts, modals, shelves, item placements, and component structures match the ASCII diagrams and positioning rules exactly.
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: All destinations render per specification.

FR-20 — Public anonymous browsing. As a Portfolio Visitor, I should reach Landing and browse all public portfolio destinations without establishing identity, so that I can explore the work immediately. (required_inference)

• Trigger/input: Visit the site.
• Observable result: Landing and all public destinations (Portfolio, Campus, Strategy, Marketing, Articles, Archive, Companies) render without identity establishment.
• Access state: Anonymous.
• Failure/recovery: N/A.
• Continuation: The visitor explores the portfolio.

FR-21 — Owner self-service enrollment. As the Portfolio Owner / Content Curator, I should complete self-service enrollment before first-time content maintenance, so that I can establish my identity and own my durable master data. (required_inference)

• Trigger/input: First use of the Content workspace.
• Observable result: An account is created and the owner's identity is established.
• Access state: Anonymous entry on Sign Up.
• Failure/recovery: Invalid or incomplete input is reported inline; the owner corrects and resubmits.
• Continuation: The owner proceeds to the Content workspace.

FR-22 — Owner returning verification. As the Portfolio Owner / Content Curator, I should complete returning verification through Login before accessing the Content workspace, so that my durable master data remains bound to my identity. (required_inference)

• Trigger/input: Return visit to the Content workspace.
• Observable result: Identity is verified and a session is established.
• Access state: Anonymous entry on Login.
• Failure/recovery: Invalid credentials are reported; the owner re-enters credentials.
• Continuation: The owner proceeds to the Content workspace.

FR-23 — Content workspace persistence. As the Portfolio Owner / Content Curator, I should have the Content workspace persist and retrieve the portfolio master data through backend execution, so that my changes survive and drive the public site. (required_inference)

• Trigger/input: Create, read, update, or delete a master data entry.
• Observable result: Changes persist and are reflected on the public destinations.
• Access state: Protected; requires verified owner identity.
• Failure/recovery: Failed saves are reported; the owner retries.
• Continuation: The owner continues maintaining data.

4. User Personas

Portfolio Visitor

Product context. A recruiter, client, or curious visitor who lands on the site and encounters the closed five-locker unit with the typographic headline and [OPEN] button. They have no account and no prior relationship with the site.

Primary goal. Discover and understand the breadth of Jassinta's creative work — writing, video, feed, bumper, and book-trailer pieces — without any artwork being cropped, overlapped, or cut off.

Distinct accepted responsibilities. Opening the lockers; browsing the open locker shelves; opening the item detail modals (camera, Polaroids, notes, letter, magazine, shoes, bag, books, certificate); playing and pausing the locker intro video with sound controls; flipping through the campus flipbook; watching the 4 campaign strategy videos in their 4-column order; browsing the 15 marketing contents with their metrics and social accounts; browsing the 11 writing articles and following their links; browsing the 34-piece archive by format and following its links; browsing the 10 named companies.

Relevant inputs or decisions. Which locker item to open; whether to play the intro video; which campaign video to watch; which article or archive link to follow.

Interactions with other accepted participants. None directly; the visitor consumes content the Portfolio Owner / Content Curator maintains.

Observable success. The visitor discovers the full breadth of the portfolio, with every item, modal, flipbook page, and archive entry rendering from complete data and no artwork cropped, overlapped, or cut off.

Portfolio Owner / Content Curator

Product context. Jassinta Roid Triniti as the portfolio owner, responsible for the master data that drives the entire site. She works in a protected Content workspace after establishing her identity.

Primary goal. Keep every locker item, modal, flipbook page, and archive entry rendering from complete, uncut data with correct assets and metadata.

Distinct accepted responsibilities. Maintaining the 10 companies; maintaining the 11 writing articles with their titles, dates, authors, media, maskFiles, and links; maintaining the 15 marketing contents with their metrics, social accounts, and text information; maintaining the 4 example-strategy campaigns with their scripts, photo references, metrics, see-more links, and 5 footage photos each; maintaining the 34-piece archive with their formats, ratios, and links.

Relevant inputs or decisions. Which collection to edit; which entry to create, update, or delete; whether the change is complete and correct.

Interactions with other accepted participants. Her maintained data is what the Portfolio Visitor browses; her changes are reflected on the public destinations.

Observable success. Every public destination renders from complete, uncut data with correct assets and metadata, and her changes persist across sessions.

5. Core User Flows

Flow 1 — Portfolio Visitor opens the lockers and explores the portfolio

1. The Portfolio Visitor arrives at Landing. The closed five-locker unit renders centered, scaled with height: min(86vh, calc(100vw * (2500 / 5450))) so the whole locker fits 100% on screen without vertical cutoff. Scroll is locked (overflow: hidden on body). The middle locker is pink with a thick white paper cutout in front, and the four-line headline reads "Content that / is Felt, / Shared, / Remembered" with its specified fonts and background colors. The footer shows "2026" (left), "Jassinta Roid Triniti" (center), "Creative Portfolio" (right). The bottom area is clean with no torn paper.
2. The visitor presses the [OPEN] button (hot pink #FF69B4, bold white text) below the typography.
3. The lockers open into Portfolio (State 2, isOpened === true), following ASCII diagram C7.1 exactly. Locker 1 shows a closed door with a card reading "I Can Help You With:" and dash list items. Locker 2 is open with certificate and trophy on the shelf, plus a collection of magazines, camera, and shoes. Locker 3 is open with a video intro card including sound & pause controls. Locker 4 is open with photos, a letter, notes, a collection of books, and an umbrella leaning. Locker 5 shows a closed door with a card reading "Platform I Am Proficient in:" with dash list items. The footer shows "© 2026" (left) and "Jassinta Roid Triniti" (right). Scrolling is now unlocked.
4. The visitor selects an item — for example the camera — and its detail modal opens, rendering the pastel vintage 35mm camera "PASTELCA" (mint green, baby pink body, lavender lens, soft purple buttons) exactly per the reference photo. The visitor closes the modal and selects another item, such as the Polaroids pinned with wooden clothespins on a horizontal jute string, or the spiral-bound soft pink notebook with the bold magenta "NOTES" title.
5. The visitor plays the locker intro video in locker 3, using the sound and pause controls.
6. The visitor navigates to Campus and flips through the multi-page flipbook, which simulates genuine physical paper movement with 3D page curl deformation and dynamic shading.
7. The visitor navigates to Strategy and sees all 4 campaign videos arranged side-by-side horizontally in a 4-column row in the order Hard Selling → Entertainment → Education → Fun, each with its script, photo reference, metrics, see-more link, and 5 footage photos.
8. The visitor navigates to Marketing and browses the 15 marketing contents (Facial Messo, Ceramide, Pico Glow Laser, 6 Flyer Kecantikan, 3 Umroh Karamina, 3 Konten Elspresso) with their metrics, social accounts, and text information.
9. The visitor navigates to Articles and browses the 11 writing articles with their titles, dates, authors, media, maskFiles, and links, following a link out to the published piece.
10. The visitor navigates to Archive and browses the 34 works by format (Writing, Video, Feed, Bumper, Book Trailer) with their ratios and links, following a link out to a work.
11. The visitor navigates to Companies and browses the 10 named companies: Elsthetic, Elspresso, Aishi Aesthetic Academy, Karamina Tour, ELS Corp, Aishi Beauty, Lassiewear, innalar.com, Independen Media, Ikapunija Media.
12. Throughout, every torn paper transition uses the 3-layer TornPaperDivider with negative vertical margins (-mt-[2px] -mb-[2px]), white deckle edge fibers, and exact matching fillColor from the preceding section, leaving no empty gaps. Every media container strictly fits its designated pixel aspect ratio, and no artwork is covered, overlapped, cropped, distorted, or pushed out of view.
13. Failure/recovery: If an item asset fails to load, its shelf slot remains intact and the visitor can retry. If a video fails, its column remains intact. If a flipbook page fails, the flipbook remains navigable.
14. Continuation: The visitor continues exploring or leaves the site.

Flow 2 — Portfolio Owner / Content Curator enrolls for first use

1. The Portfolio Owner / Content Curator arrives at Sign Up anonymously.
2. She enters the minimum identity information needed to establish her account.
3. She submits the enrollment.
4. Observable result: Her identity is established and she proceeds to the Content workspace.
5. Failure/recovery: If her input is invalid or incomplete, the form reports the error inline and she corrects and resubmits.
6. Continuation: She begins maintaining master data.

Flow 3 — Portfolio Owner / Content Curator returns and verifies identity

1. The Portfolio Owner / Content Curator arrives at Login anonymously.
2. She enters her credentials.
3. She submits the verification.
4. Observable result: Her identity is verified, a session is established, and she proceeds to the Content workspace.
5. Failure/recovery: If her credentials are invalid, the form reports the error and she re-enters them.
6. Continuation: She resumes maintaining master data.

Flow 4 — Portfolio Owner / Content Curator maintains master data

1. The Portfolio Owner / Content Curator is in the Content workspace with her verified identity.
2. She selects a collection — companies, writing articles, marketing contents, example-strategy campaigns, or archive works.
3. She creates, reads, updates, or deletes an entry. For example, she updates a writing article's title, date, author, media, maskFile, and link, or adds a new archive work with its format, ratio, and link.
4. She saves the change.
5. Observable result: The change persists through backend execution and is reflected on the corresponding public destination — the updated article appears on Articles, the new archive work appears on Archive.
6. Failure/recovery: If the save fails, the workspace reports the error and she retries.
7. Continuation: She continues maintaining data or leaves the workspace.

6. Visuals Colors and Theme

The user supplied an explicit, complete color and typography system. It is authoritative and is reproduced here as concrete tokens.

Color tokens (exact hex by role):

Mode. Light, paper-and-metal. Backgrounds are paper-toned (offWhite, warmWhite, paperCream) with a paper texture overlay on the locker backdrop. Depth comes from soft shadows and torn-paper layering, not from dark surfaces.

Font families. Headings: Sentient (Kia). Body/narration: Poppins Italic. Letters and notes: handwriting (Caveat / Dancing Script). Metadata/code: JetBrains Mono or Fira Code.

Type scale. Headlines clamp(2.5rem, 5vw, 4.125rem) (66px desktop), tracking tight, align center. Emphasis words Sentient Bold Italic in deepRose #C24B6E; connective words Sentient Bold in inkBlack #1A1A1A. Narration clamp(1.1rem, 2vw, 1.55rem) (24.9px desktop) in charcoalSoft #3D3D3D, placed 1.5px below the headline.

Radius/shape language. Soft, rounded, paper-like edges; torn-paper section boundaries with organic wavy SVG paths; the locker unit is a tall rectangular cabinet with a 1:2.29 door ratio.

Spacing rhythm. Sections are separated by the 3-layer TornPaperDivider with negative vertical margins (-mt-[2px] -mb-[2px]) so no gap appears. The locker row is scaled with height: min(86vh, calc(100vw * (2500 / 5450))).

Imagery style. Pastel vintage physical objects photographed with shallow depth of field: mint green and baby pink camera, Polaroids on a jute string with wooden clothespins, spiral pink notebook, lilac envelope, pastel pink magazine, beige/cream suede sneakers, baby pink shoulder bag, pastel spine books, ornate gold carved frame certificate. Artwork is never cropped, overlapped, or distorted.

7. Signature Design Concept

The signature concept is the tall pastel locker as a physical cabinet of a creative life. The public entry is not a hero banner but a five-door tall-cabinet locker unit standing at full viewport height, scaled with height: min(86vh, calc(100vw * (2500 / 5450))) so it fits 100% on screen without vertical cutoff and without scroll. The middle door is pink (lockerPink #F4A6BE) with a thick white paper cutout in front, carrying the four-line headline "Content that / is Felt, / Shared, / Remembered" in Sentient with its specified background colors. The [OPEN] button sits below the typography in hot pink #FF69B4 with bold white text.

Opening the lockers reveals the cabinet's interior: lockerInterior #FCE7EE walls with paperCream #FAF3E0 wood/cream shelves. Lockers 1, 3, and 5 keep their closed doors with attached cards — "I Can Help You With:" and "Platform I Am Proficient in:" — while lockers 2 and 4 swing open to show their contents with strict physical placement: Polaroids hung on a string, non-floating items resting on shelves, an umbrella leaning, and depth layering. Each object is a faithful pastel-vintage artifact, and each opens a detail modal.

The concept recomposes only accepted content, states, and controls: the closed and open locker states, the nine item visuals, the intro video card, the two card lists, and the state-specific footers. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The five-door tall-cabinet locker unit, with the pink middle door and its thick white paper cutout carrying the four-line headline.
• Input → transformation → outcome thesis: The visitor presses [OPEN]; the closed doors give way to the open-locker shelf arrangement; the outcome is the Portfolio destination with its items, cards, and intro video revealed, and scrolling unlocked.
• Motion vocabulary: Restrained, physical, paper-and-metal. Doors swing with weight; the paper cutout shifts slightly; torn-paper dividers settle into place with no gap; item modals fade and scale in gently. No bounce, no elastic overshoot, no decorative particles.
• Composed first frame: The closed locker unit centered and fully visible at height: min(86vh, calc(100vw * (2500 / 5450))), the pink middle door with its white paper cutout, the four-line headline in Sentient, the hot pink [OPEN] button below, and the footer "2026 / Jassinta Roid Triniti / Creative Portfolio". The bottom area is clean with no torn paper.
• Reduced-motion state: When the visitor prefers reduced motion, the locker opens with a short cross-fade between the closed and open states, the flipbook pages turn without curl animation, and all other transitions become instant. The layout, proportions, and content remain identical.

9. Non-Functional Requirements

NFR-1 — Locker viewport fit. The five-locker unit must be scaled with height: min(86vh, calc(100vw * (2500 / 5450))) so the entire locker fits 100% on screen without vertical cutoff and without scroll when first opened. (explicit)

NFR-2 — Locker aspect ratio. Each single locker door has a base size of 1090 × 2500 px (tall cabinet ratio 1:2.29); the 5-locker unit totals 5450 × 2500 px. (explicit)

NFR-3 — Scroll lock in State 1. Scroll lock must be active (overflow: hidden on body) while isOpened === false. (explicit)

NFR-4 — Zero-gap torn paper. Every torn paper transition must use the 3-layer TornPaperDivider with negative vertical margins (-mt-[2px] -mb-[2px]) and lineHeight: 0 so no 1px empty gap ever appears. (explicit)

NFR-5 — Asset integrity. Every media container/placeholder must strictly fit its designated pixel aspect ratio; artwork must never be covered, overlapped, cropped, distorted, or pushed out of view. (explicit)

NFR-6 — Layout fidelity. All page layouts, modal dialogs, locker shelves, item placements, and component structures must render exactly matching the provided ASCII diagrams and detailed positioning rules. (explicit)

NFR-7 — Complete data. The master data module must contain all entries in full with no shortened arrays: 10 companies, 11 writing articles, 15 marketing contents, 4 example-strategy campaigns, and 34 archive works. (explicit)

NFR-8 — Production-ready code. The delivered code must be production-ready, complete TypeScript with no summarized or omitted data and no placeholder comments. (explicit)

NFR-9 — Realistic flipbook fidelity. Multi-page book flipping must simulate genuine physical paper movement with 3D page curl deformation and dynamic shading. (explicit)

NFR-10 — Strategy video ordering. All 4 campaign videos must be arranged side-by-side horizontally in a 4-column row in the order Hard Selling → Entertainment → Education → Fun. (explicit)

NFR-11 — Owner data continuity. The Content workspace must persist and retrieve the portfolio master data through backend execution so the owner's changes survive and drive the public site. (required_inference)

10. Tech Stack

• Framework: Next.js 14 (App Router) with TypeScript. (explicit)
• Styling: Tailwind CSS, with the full color palette and typography system registered in tailwind.config.ts. (explicit)
• Component library: React components, including src/components/Shared/TornPaperDivider.tsx and src/components/Opening/LockerSection.tsx. (explicit)
• Data module: src/data/portfolioData.ts as the master data source. (explicit)
• Backend: Backend execution to persist and retrieve the portfolio master data for the Content workspace. (required_inference)
• Storage: Application-owned storage for the durable master data (companies, articles, marketing contents, campaigns, archive works) and owner identity. (required_inference)
• Fonts: Sentient (Kia), Poppins Italic, Caveat / Dancing Script, JetBrains Mono or Fira Code. (explicit)

11. Assumptions and Constraints

Assumptions

• A-1. The owner's identity is application-owned because she must privately own and resume durable, actor-specific master data that drives the public site. (required_inference)
• A-2. Self-service enrollment is the correct first-use path because no invitation, provisioning, or pre-existing account boundary is established by the source. (required_inference)
• A-3. The locker reference photos at amazon.com/salp/elleslocker are used only as visual inspiration and structure reference for the closed and open locker layout; they contribute no product names, copy, facts, or capabilities. (explicit reference directive)
• A-4. The nine item visuals are specified by the user's own reference photos and must match them exactly. (explicit)

Constraints

• C-1. Layout strictly follows the provided ASCII art and physical rules: all page layouts, modal dialogs, locker shelves, item placements, and component structures must render exactly matching the ASCII diagrams and detailed positioning rules. (explicit)
• C-2. Lockers 1, 3, and 5 have closed doors with cards attached to them; lockers 2 and 4 are open with strict physical placement (Polaroids hung on a string, non-floating items resting on shelves, umbrella leaning, depth layering). (explicit)
• C-3. Placeholder and asset integrity (zero-overlap / no-clipping): every media container/placeholder must strictly fit its designated pixel aspect ratio; artwork must never be covered, overlapped, cropped, distorted, or pushed out of view. (explicit)
• C-4. Locker proportions (tall cabinet): each single locker door base aspect ratio is 1090px width by 2500px height (tall cabinet ratio 1:2.29); in the browser scale the 5-locker unit to min(86vh, 100vw * 2500 / 5450) so the entire locker fits majestically on screen without vertical cutoff before scrolling is unlocked. (explicit)
• C-5. 3D item details must match the user photos exactly (camera, Polaroids, notes, letter, magazine, shoes, bag, books, certificate as specified). (explicit)
• C-6. Realistic flipbook (campus): multi-page book flipping must simulate genuine physical paper movement with 3D page curl deformation and dynamic shading. (explicit)
• C-7. Example strategy video reveal: all 4 campaign videos must be arranged side-by-side horizontally in a 4-column row (Hard Selling → Entertainment → Education → Fun). (explicit)
• C-8. Torn paper divider zero-gap rule: every torn paper transition must use the provided 3-layer TornPaperDivider component with negative vertical margins (-mt-[2px] -mb-[2px]), white deckle edge fibers, and exact matching fillColor from the preceding section; never leave empty gaps. (explicit)
• C-9. Zero inventions and no code cutting: output production-ready, complete TypeScript code; never summarize or omit data. (explicit)
• C-10. State 1 requires scroll lock active (overflow: hidden on body) and a clean bottom area with no torn paper. (explicit)

12. Glossary

• Locker unit — The five-door tall-cabinet locker that forms the public entry surface, with a base door size of 1090 × 2500 px and a total unit size of 5450 × 2500 px.
• State 1 — The closed locker state (isOpened === false) with scroll lock, centered closed doors, the [OPEN] button, and the "2026 / Jassinta Roid Triniti / Creative Portfolio" footer.
• State 2 — The open locker state (isOpened === true) following ASCII diagram C7.1, with lockers 1, 3, and 5 closed and lockers 2 and 4 open.
• TornPaperDivider — The 3-layer torn-paper section transition component with negative vertical margins, white deckle edge fibers, and a solid fill matching the preceding section's fillColor.
• Deckle edge fiber — The white 3.5px stroke (#FFFFFF) in the divider's second layer that mimics the fibers of a torn paper edge.
• PASTELCA — The pastel vintage 35mm camera item (mint green, baby pink body, lavender lens, soft purple buttons).
• Belleza. — The pastel pink fashion magazine item with white serif typography.
• Campus flipbook — The multi-page book on the Campus destination that flips with 3D page curl deformation and dynamic shading.
• Example strategy — The 4 campaign contents (Hard Selling, Entertainment, Education, Fun) presented as a 4-column video row.
• Archive — The categorized collection of 34 works in Writing, Video, Feed, Bumper, and Book Trailer formats, each with ratio and link.
• Master data — The complete set of companies, writing articles, marketing contents, example-strategy campaigns, and archive works that drives the public site.
• Content workspace — The protected destination where the Portfolio Owner / Content Curator maintains the master data.