System Requirements Document for opal-earthy

1. Introduction

opal-earthy is a personal portfolio website for a creative professional, presented in a honey-and-bees visual world. The product intent is to give the portfolio owner a distinctive, warm, sensory showcase for their work, and to give visitors an enjoyable, smooth browsing experience carried by beautiful transitions and effects.

The audience is twofold: the Portfolio Owner, whose projects and skills are presented, and the Portfolio Visitor, who arrives to browse, admire, and learn about the owner. The site is public and anonymous — no account, sign-in, or personal data is required to view any of it.

The experience is deliberately expressive: a full-bleed honey-gold hero, honeycomb motifs, drifting marquee bands, colour-flipping work cards, hexagon-masked project imagery, and choreographed entrance reveals — all with a static fallback for visitors who prefer reduced motion.

2. System Overview

opal-earthy is a single public, first-party web experience composed of three pages: Landing, Portfolio, and Gallery. All three are anonymously reachable; there is no application-owned identity, no login, and no protected state.

• Landing is the public entry surface: a full-bleed honey-gold hero with an oversized Archivo Black headline, a cropped 3D honey drop, a looping bee illustration, a cream pill CTA, and a honeycomb rule.
• Portfolio owns navigation across the portfolio's sections and the cohesive animated transitions and visual effects requested for the experience — the honeycomb marquee band, staggered reveals, cursor-following golden glow, and section-to-section colour blocking.
• Gallery is the revisitable destination where visitors browse the owner's showcased work as hexagon-masked, gold-to-cocoa duotone scenes.

The Portfolio Owner curates and maintains the showcased content; the Portfolio Visitor browses it. No other human actors exist in the current scope.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The entire experience is first-party custom UI delivered as a public website. There is no provider-owned surface, no external destination, and no headless delivery in the current scope.

Access ownership. All three pages are public and anonymous. Because the accepted behavior creates no durable actor-specific state, no commitment, no entitlement, and no value transfer that must remain bound to a particular person, application-owned identity is not required and is not introduced. Visitors move freely between Landing, Portfolio, and Gallery without establishing identity.

Current vs. future boundary. Current scope is exactly: a portfolio website, a honey-and-bees visual theme applied throughout, and beautiful transitions and effects. Content authoring tooling, contact forms, analytics, comments, and any account or administrative surface are outside the current scope and are not built. The Portfolio Owner's curation responsibility is expressed as content maintenance of the presented portfolio, not as an in-product editing surface.

Hard exclusions. No blue or indigo anywhere in the palette. No white-first or near-white ground. No Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for headings or body. No centred-headline-plus-subtext-plus-button-plus-gradient-blob hero. No uniform grid of identical hover-lift cards. No generic device mockups or stock office photography. No sharp-cornered corporate-neutral surfaces. No motion that ignores prefers-reduced-motion. The generic indigo/blue-on-white SaaS template is forbidden for this project.

2c. Page Content and Component Coverage

Landing

• Information and state. The public entry surface. Presents the site's purpose and the owner's identity as a creative professional through a single dominant statement: the headline "SWEET WORK, BUILT BY HAND". No data loading, no empty state, no error state — the page is static content with motion.
• Primary action. A cream pill CTA labelled "See the hive" that leads the visitor onward into the portfolio experience.
• Supporting actions. Persistent top navigation with pill links to Landing, Portfolio, and Gallery, sitting on a translucent wax surface with a thin honeycomb rule running the full width beneath it.
• Domain entities. Portfolio identity (owner name/wordmark), headline statement, navigation destinations.
• Component responsibilities.
  • Hero ground: full-bleed honey-gold (#F2A007) colour field, no gradient blob.
  • Headline: Archivo Black at clamp(44px, 9vw, 132px), tight -0.02em tracking, 0.92 line-height, sentence case, stacked across nine columns on the left and bleeding slightly off the right edge; revealed word-by-word on entrance.
  • 3D honey drop: large glossy prop in the lower-right, cropped by the viewport edge.
  • Bee illustration: loops a gentle figure-eight path across the hero, crossing the honey drop.
  • Cursor-following golden glow: soft gold light that tracks the pointer across the hero.
  • CTA pill: cream (#FFF6E2) pill button pinned beneath the headline.
  • Honeycomb rule: thin comb-pattern rule running the full width at the bottom of the hero.
  • Top navigation: translucent wax surface, pill links with smooth hover transitions.
• States. Loading: none (static content). Empty: not applicable. Success: hero renders fully with entrance reveals completing. Error: not applicable for content; if a decorative asset (honey drop, bee illustration) fails to load, the hero remains complete and readable with the colour field, headline, CTA, and rule intact. Recovery: decorative assets degrade silently; no visitor action required. Reduced motion: reveals become instant, the bee parks in place, the cursor glow is suppressed.

Portfolio

• Information and state. Owns navigation across the portfolio's sections and the cohesive animated transitions and visual effects requested for the experience. Presents the owner's work as colour-blocked sections stacked like frames in a storyboard: a full-bleed honey-gold hero band, a cream work grid, a deep-cocoa gallery band, and a cream contact block.
• Primary action. Browse the work sections and select a project to view it in the Gallery.
• Supporting actions. Navigate between sections; follow the honeycomb marquee band; use the persistent top navigation.
• Domain entities. Project (name, thumbnail, category/section), section (work grid, gallery band, contact block), owner contact details as presented.
• Component responsibilities.
  • Section stack: full-bleed colour-blocked sections in the order honey-gold hero → cream work grid → deep-cocoa gallery band → cream contact block.
  • Asymmetric 12-column grid: headline occupying columns 1–7 with a bee illustration overlapping columns 6–9; content deliberately offset.
  • Work cards: chunky rounded rectangles (28–40px corners) of unequal size, not a uniform grid; on hover the colour field flips from wax-cream (#FFF6E2) to honey-gold (#F2A007) and a sticker badge (bee, drop, or hexagon) nudges a few pixels.
  • Honeycomb marquee band: a horizontally drifting strip of hexagon cells containing project names, drifting slowly between sections.
  • Blob shapes: irregular honey-gold blobs sitting behind headings and bleeding off the page edge.
  • Sticker badges: circular bee, honey-drop, and hexagon badges overlapping card corners.
  • Comb-rule dividers: thin honeycomb rules separating sections.
  • Top navigation: persistent, translucent wax surface, pill links with smooth hover transitions.
• States. Loading: section content and thumbnails load progressively; entrance reveals stagger word-by-word for headlines and slide-and-scale for cards. Empty: if a section contains no projects, it renders its heading and a short honey-toned placeholder line rather than an empty band. Success: all sections render, marquee drifts, hover flips respond. Error: if a project thumbnail fails to load, its hexagon mask renders as a flat gold-to-cocoa duotone field with the project name still readable. Recovery: failed thumbnails degrade to the duotone field; the card remains selectable. Reduced motion: the marquee stops and wraps into static rows, reveals become instant, hover flips become instant colour changes without the badge nudge.

Gallery

• Information and state. The revisitable destination where visitors browse the owner's showcased portfolio work. Presents each project as an art-directed scene framed in a rounded hexagon mask with a warm gold-to-cocoa duotone, so the portfolio reads as one world.
• Primary action. Browse and view individual showcased projects.
• Supporting actions. Move between projects; return to Portfolio or Landing via the persistent top navigation.
• Domain entities. Project (name, thumbnail/scene, description, category), project sequence.
• Component responsibilities.
  • Hexagon-masked project frames: rounded hexagon masks with gold-to-cocoa duotone treatment on every thumbnail.
  • Editorial arrangement: staggered two-column editorial layout on desktop; horizontally scrollable honeycomb row on mobile.
  • Project captions: project name and short description in Sora, kept whole and inside their container at every viewport.
  • Sticker badges: circular bee, honey-drop, and hexagon badges overlapping frame corners.
  • Top navigation: persistent, translucent wax surface, pill links with smooth hover transitions.
• States. Loading: frames fade and scale in with staggered entrances. Empty: if no projects are published, the page shows a honey-toned empty message inviting the visitor to return later. Success: all project frames render with duotone treatment and readable captions. Error: a frame whose image fails to load renders as a flat gold-to-cocoa duotone field with its caption intact. Recovery: failed frames degrade to the duotone field; the visitor can continue browsing other projects. Reduced motion: entrances become instant; the mobile honeycomb row remains horizontally scrollable with overflow-x: auto so every item is reachable.

3. Functional Requirements

FR-1 — Portfolio website delivery (explicit) As a Portfolio Owner, I should have a portfolio website that presents my work, so that visitors can browse and appreciate it.

• Trigger/input: The site is published and reachable at its public address.
• Observable result: A public website renders with Landing, Portfolio, and Gallery pages, each reachable from the persistent top navigation.
• Access state: Public and anonymous; no identity required.
• Failure/recovery: If a page fails to render, the visitor can retry via the persistent navigation; no state is lost because no state is stored.
• Continuation: The visitor moves between the three pages freely.

FR-2 — Honey-and-bees visual theme applied throughout (explicit) As a Portfolio Owner, I should have a honey-and-bees visual theme applied throughout the site, so that the portfolio reads as one distinctive, warm world.

• Trigger/input: Any page render.
• Observable result: Every page uses the honey-cream ground (#F7E9C6), wax-white surfaces (#FFF6E2), cocoa ink (#2A1608), honey-gold fields (#F2A007), burnt-orange accents (#C2410C), and muted amber-brown metadata (#8A6A3B); hexagon motifs, comb rules, bee and honey-drop props, and rounded organic shapes appear across all three pages.
• Access state: Public and anonymous.
• Failure/recovery: If a decorative asset fails, the themed colour field and typography still carry the theme; the page remains complete.
• Continuation: The theme persists across every navigation transition.

FR-3 — Beautiful transitions and effects (explicit) As a Portfolio Visitor, I should experience beautiful transitions and effects as I browse, so that the visit feels enjoyable and smooth.

• Trigger/input: Page entry, scroll, hover, and navigation between pages.
• Observable result: Headlines reveal word-by-word; cards slide and scale in with staggered entrances using cubic-bezier(0.16, 1, 0.3, 1) at 500–700ms; work cards flip their colour field from wax-cream to honey-gold on hover and nudge their sticker badge; a honeycomb marquee band drifts horizontally between sections; a cursor-following golden glow tracks the pointer on the hero; a bee illustration loops a figure-eight path across the hero; navigation links transition smoothly on hover.
• Access state: Public and anonymous.
• Failure/recovery: If an animation cannot run, the final state renders immediately; no content is hidden behind a failed transition.
• Continuation: Effects repeat on each visit and each navigation.

FR-4 — Reduced-motion fallback (explicit, from the creative direction's binding motion rule) As a Portfolio Visitor who prefers reduced motion, I should see a static, fully readable version of every page, so that I can browse comfortably.

• Trigger/input: The visitor's system reports prefers-reduced-motion: reduce.
• Observable result: Marquees stop and wrap into static rows; reveals become instant; the bee illustration parks in place; the cursor-following glow is suppressed; hover colour flips become instant.
• Access state: Public and anonymous.
• Failure/recovery: Not applicable — the static state is the fallback.
• Continuation: All content remains reachable and readable.

FR-5 — Readable text and controls stay whole (explicit, from the creative direction's binding legibility rule) As a Portfolio Visitor, I should be able to read every headline, label, number, card text, and control without it being cropped or covered, so that I can use the site at any viewport.

• Trigger/input: Viewing at 375px, 768px, and 1280px.
• Observable result: Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit; no other element covers any part of them.
• Access state: Public and anonymous.
• Failure/recovery: Not applicable.
• Continuation: The visitor can read and operate every control at every supported viewport.

FR-6 — Anonymous access to all pages (required_inference) As a Portfolio Visitor, I should reach Landing, Portfolio, and Gallery without creating an account or signing in, so that I can browse immediately.

• Trigger/input: Opening the site's public address.
• Observable result: All three pages render fully without any identity prompt.
• Access state: Public and anonymous; no application-owned identity exists.
• Failure/recovery: Not applicable.
• Continuation: The visitor navigates freely between pages.

FR-7 — Portfolio Owner content curation (required_inference) As a Portfolio Owner, I should be able to curate and maintain the portfolio content presented on the site, so that the showcase stays polished and engaging.

• Trigger/input: The owner updates the presented portfolio content (project names, thumbnails, descriptions, categories, contact details).
• Observable result: The updated content appears on Portfolio and Gallery.
• Access state: Content maintenance is performed outside the visitor-facing pages; no in-product editing surface is in current scope.
• Failure/recovery: If updated content is malformed, the affected card or frame degrades to its duotone field with its caption intact.
• Continuation: The owner continues to maintain the showcase over time.

FR-8 — Project browsing in Gallery (required_inference) As a Portfolio Visitor, I should browse the owner's showcased projects in the Gallery, so that I can appreciate the work in detail.

• Trigger/input: Selecting a project from Portfolio or navigating directly to Gallery.
• Observable result: Project frames render in hexagon masks with gold-to-cocoa duotone treatment and readable captions; desktop shows a staggered two-column editorial arrangement, mobile shows a horizontally scrollable honeycomb row.
• Access state: Public and anonymous.
• Failure/recovery: A frame whose image fails to load renders as a flat duotone field with its caption intact; the visitor continues browsing other projects.
• Continuation: The visitor returns to Portfolio or Landing via the persistent navigation.

FR-9 — Section navigation on Portfolio (required_inference) As a Portfolio Visitor, I should move between the portfolio's sections, so that I can explore the owner's work in a coherent order.

• Trigger/input: Scrolling or selecting a section.
• Observable result: The visitor moves through the honey-gold hero band, cream work grid, deep-cocoa gallery band, and cream contact block, with the honeycomb marquee band drifting between sections.
• Access state: Public and anonymous.
• Failure/recovery: If a section fails to render, the remaining sections stay reachable via the persistent navigation.
• Continuation: The visitor continues to the next section or to Gallery.

4. User Personas

Portfolio Owner

• Product context. The creative professional whose work is showcased on opal-earthy. They are not a visitor of their own site in the browsing sense; their relationship to the product is as the source and curator of everything presented.
• Primary goal. Present their projects and skills attractively so that visitors can browse and appreciate the work, and keep the showcase polished and engaging over time.
• Distinct accepted responsibilities. Curating and maintaining the portfolio content presented on the site — project names, thumbnails, descriptions, categories, and contact details — and ensuring the honey-and-bees theme and the transitions and effects remain coherent across Landing, Portfolio, and Gallery.
• Relevant inputs or decisions. Which projects to showcase, how each project is titled and described, how each thumbnail is art-directed as a scene, and which contact details are presented.
• Interactions with other accepted participants. The Portfolio Owner's curation directly determines what the Portfolio Visitor sees on Portfolio and Gallery. The owner does not interact with visitors in-product; there is no messaging, comment, or contact-form capability in current scope.
• Observable success. A polished, engaging showcase in which every project reads as part of one honey world, the theme is consistent across all three pages, and the transitions and effects feel beautiful rather than generic.

Portfolio Visitor

• Product context. A viewer who arrives at opal-earthy to explore the owner's work. They arrive anonymously, with no account and no prior relationship to the site.
• Primary goal. Browse the showcased projects and learn about the owner, enjoying a smooth experience enhanced by the honey-and-bee themed transitions and effects.
• Distinct accepted responsibilities. Navigating between Landing, Portfolio, and Gallery; viewing project details; and moving through the portfolio's sections in a coherent order.
• Relevant inputs or decisions. Which page to open, which section to scroll through, which project to view, and whether to continue browsing or leave.
• Interactions with other accepted participants. The visitor consumes content curated by the Portfolio Owner. There is no in-product interaction back to the owner in current scope.
• Observable success. An enjoyable, smooth browsing experience in which every project is readable, every control works at every viewport, and the motion feels choreographed rather than distracting — including a fully static, readable experience when reduced motion is preferred.

5. Core User Flows

Flow 1 — Portfolio Visitor arrives and enters the hive

1. The visitor opens the site's public address. No identity prompt appears.
2. Landing renders: the full-bleed honey-gold hero ground fills the viewport, the headline "SWEET WORK, BUILT BY HAND" reveals word-by-word in Archivo Black, the glossy 3D honey drop sits cropped in the lower-right, and the bee illustration loops its figure-eight path across the hero.
3. The visitor moves the pointer; a soft golden glow follows the cursor across the hero.
4. The visitor reads the cream pill CTA "See the hive" pinned beneath the headline and selects it.
5. The experience transitions to Portfolio with the choreographed entrance reveal.
6. Failure path: If the honey drop or bee illustration fails to load, the hero still renders complete with its colour field, headline, CTA, and honeycomb rule; the visitor proceeds normally.
7. Reduced motion: The headline appears instantly, the bee parks in place, and the cursor glow is suppressed; the visitor proceeds normally.
8. Continuation: The visitor is now on Portfolio and can browse its sections.

Flow 2 — Portfolio Visitor browses the portfolio sections

1. On Portfolio, the visitor sees the section stack: honey-gold hero band, cream work grid, deep-cocoa gallery band, cream contact block.
2. The visitor scrolls; headlines reveal word-by-word and work cards slide and scale in with staggered entrances.
3. The honeycomb marquee band drifts horizontally between sections, carrying project names in hexagon cells.
4. The visitor hovers a work card; its colour field flips from wax-cream to honey-gold and its sticker badge nudges a few pixels.
5. The visitor continues through the sections, reading the owner's presented contact details in the cream contact block.
6. Failure path: If a project thumbnail fails to load, its hexagon mask renders as a flat gold-to-cocoa duotone field with the project name still readable; the card remains selectable.
7. Reduced motion: The marquee stops and wraps into static rows, reveals become instant, and hover flips become instant colour changes without the badge nudge.
8. Continuation: The visitor selects a project to view it in the Gallery, or uses the persistent top navigation.

Flow 3 — Portfolio Visitor browses the Gallery

1. The visitor arrives at Gallery, either by selecting a project from Portfolio or by using the persistent top navigation.
2. Project frames render in rounded hexagon masks with gold-to-cocoa duotone treatment; on desktop they appear in a staggered two-column editorial arrangement, on mobile in a horizontally scrollable honeycomb row.
3. The visitor reads each project's caption — name and short description in Sora — kept whole and inside its container at every viewport.
4. The visitor scrolls or swipes through the projects, viewing each showcased scene.
5. Failure path: If a frame's image fails to load, it renders as a flat duotone field with its caption intact; the visitor continues browsing other projects.
6. Empty path: If no projects are published, the page shows a honey-toned empty message inviting the visitor to return later.
7. Reduced motion: Entrances become instant; the mobile honeycomb row remains horizontally scrollable so every item is reachable.
8. Continuation: The visitor returns to Portfolio or Landing via the persistent top navigation, or leaves the site.

Flow 4 — Portfolio Owner curates the showcase

1. The owner decides which projects to present and how each should read as an art-directed scene.
2. The owner updates the presented portfolio content — project names, thumbnails, descriptions, categories, and contact details.
3. The updated content appears on Portfolio and Gallery.
4. The owner verifies that the honey-and-bees theme and the transitions and effects remain coherent across Landing, Portfolio, and Gallery.
5. Failure path: If updated content is malformed, the affected card or frame degrades to its duotone field with its caption intact, so the showcase never breaks.
6. Continuation: The owner continues to maintain the showcase over time.

6. Visuals Colors and Theme

Muse and headline. Jessica Walsh — Honeyed maximalism: a bee-built world of gold, comb and playful motion.

Mode. Light mode only.

Colour tokens (exact hex by role).

Proportion. Roughly 55% honey-cream ground, 25% gold fields, 12% wax-white surfaces, 8% ink and orange. No blue or indigo anywhere; no white-first composition.

Typography.

• Headings: Archivo Black, clamp(44px, 9vw, 132px), tracking -0.02em, line-height 0.92, sentence case. Single words may be pushed to 160px and rotated a few degrees as poster gestures.
• Body: Sora, 17–19px, line-height 1.65.
• Labels and buttons: Sora SemiBold, 12px uppercase, tracking 0.12em.
• Scale: 1.333 modular — 132 / 84 / 56 / 34 / 22 / 19 / 17 / 13.

Shape language. Big radii and rounded, organic forms: 28–40px corners on cards and image frames, full pill buttons, and a repeating hexagon motif borrowed from the honeycomb used as section dividers, image masks, and a decorative band. Irregular blob shapes in honey-gold sit behind headings and bleed off the page edge. Sticker-like circular badges (a bee, a honey drop, a hexagon) overlap card corners. Nothing is sharp-cornered except the thin comb-rule lines that separate sections.

Spacing rhythm. Generous, colour-blocked sections stacked like frames in a storyboard, with asymmetric 12-column placement and deliberate offset. Section padding is roomy enough that each colour block reads as its own frame.

Imagery style. Surreal, art-directed honey imagery: macro honey drips and comb textures on warm grounds, glossy 3D honey drops and hexagon props, and a small cast of illustrated bees used as stickers and section mascots. Project thumbnails are treated as art-directed scenes — each framed in a rounded hexagon mask with a warm gold-to-cocoa duotone so the portfolio reads as one world. No blue gradients, no generic device mockups, no flat clip art.

7. Signature Design Concept

The Hive Frame. The public entry is composed as a single honey-gold colour field with type as the dominant element — not a centred headline stack.

• A full-bleed honey-gold (#F2A007) ground fills the viewport.
• The headline "SWEET WORK, BUILT BY HAND" is set in Archivo Black at clamp(44px, 9vw, 132px), stacked across nine columns on the left and bleeding slightly off the right edge. It is left-aligned, never centred.
• A large glossy 3D honey drop sits in the lower-right, cropped by the viewport edge.
• A looping bee illustration traces a figure-eight path past the honey drop.
• A cream (#FFF6E2) pill CTA labelled "See the hive" sits pinned beneath the headline.
• A thin honeycomb rule runs the full width at the bottom of the hero.
• A cursor-following golden glow tracks the pointer across the colour field.
• The persistent top navigation sits on a translucent wax surface with pill links, and the honeycomb rule runs beneath it.

The concept recomposes only accepted content, states, and controls: the headline, the CTA, the navigation, the honeycomb rule, and the decorative honey drop and bee. It introduces no new behaviour, page, or destination. Readable text and the CTA pill stay entirely inside the viewport at 375px, 768px, and 1280px; the honey drop and bee may be cropped and bled off the edge as decoration.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject. The oversized Archivo Black headline "SWEET WORK, BUILT BY HAND" on the honey-gold field, with the cropped 3D honey drop and the looping bee illustration as its supporting cast.
• Input → transformation → outcome thesis. As the page enters, the headline's words arrive one by one and settle into their nine-column stack; as the pointer moves, a golden glow follows it across the colour field; the bee illustration loops a gentle figure-eight past the honey drop. The outcome is a hero that feels alive and sweet without ever hiding its content — the headline, the CTA, and the navigation are readable from the first frame.
• Motion vocabulary. Staggered word-by-word headline reveals; slide-and-scale card entrances; cubic-bezier(0.16, 1, 0.3, 1) at 500–700ms; a slow horizontally drifting honeycomb marquee band; a cursor-following golden glow; a looping figure-eight bee path; colour-field flips on hover.
• Composed first frame. Honey-gold ground, headline stacked left across nine columns bleeding off the right edge, cream CTA pill beneath it, glossy honey drop cropped in the lower-right, bee illustration mid-loop, thin honeycomb rule across the bottom, translucent nav above.
• Reduced-motion state. Reveals become instant, the bee parks in place, the cursor-following glow is suppressed, and the marquee stops and wraps into static rows. The first frame is identical in composition and fully readable.

9. Non-Functional Requirements

NFR-1 — Responsive legibility (explicit, from the creative direction's binding rule) Readable text and controls stay whole at every viewport. Headlines, wordmarks, labels, numbers, card 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 they cover no readable text or control. Rationale: the direction's legibility rule takes precedence over any gesture that would crop readable content.

NFR-2 — Moving and scrollable content (explicit, from the creative direction's binding rule) Marquees, tickers, carousels, and horizontally scrollable rows may cross the viewport or container edge by design; they are judged by whether they actually move or scroll and whether every item becomes fully readable as it passes. With prefers-reduced-motion, they stop and show whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling. Rationale: the honeycomb marquee band and the mobile honeycomb row are core to the requested effects.

NFR-3 — Reduced-motion support (explicit, from the creative direction's binding rule) Every marquee and reveal has a static fallback under prefers-reduced-motion: reduce. Rationale: motion must never be a barrier to reading the portfolio.

NFR-4 — Palette and typography integrity (explicit, from the creative direction) No blue or indigo anywhere in the palette — no #0057FF, #2563EB, #6366F1 or neighbours. No white-first or near-white ground; the ground must be honey-cream or gold. Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are excluded for headings and body. Rationale: the honey world must read as one coherent, saturated place.

NFR-5 — Public anonymous access (required_inference) All three pages are reachable without identity, account creation, or sign-in. No personal data is collected. Rationale: the accepted behavior creates no durable actor-specific state, commitment, entitlement, or value transfer that must remain bound to a particular person.

NFR-6 — Graceful degradation of decorative assets (required_inference) If a decorative asset (honey drop, bee illustration, sticker badge) or a project image fails to load, the page remains complete and readable: the colour field, typography, captions, and controls are unaffected, and failed project images degrade to a flat gold-to-cocoa duotone field with their caption intact. Rationale: the showcase must never break because of a missing asset.

NFR-7 — Performance of choreographed motion (required_inference) Entrance reveals, hover flips, the marquee band, the cursor-following glow, and the looping bee path must not block reading or interaction; content is readable from the first frame and no transition hides content behind a failed animation. Rationale: the requested effects must enhance, not obstruct, browsing.

10. Tech Stack

• Frontend: React, delivered as a public web experience. (Default — not specified by user)
• Styling: CSS with custom properties for the honey palette tokens, clamp() for the type scale, and cubic-bezier(0.16, 1, 0.3, 1) easing for the choreographed motion. (Default — not specified by user)
• Motion: CSS transitions and keyframe animations for reveals, hover flips, the marquee band, and the looping bee path, with prefers-reduced-motion media queries providing the static fallbacks. (Default — not specified by user)
• Backend: Python / FastAPI serving the portfolio content. (Default — not specified by user)
• Storage: A lightweight store for portfolio content (project names, thumbnails, descriptions, categories, contact details). (Default — not specified by user)
• Containerization: Docker and docker-compose for local and deployment packaging. (Default — not specified by user)
• Orchestration: Kubernetes is not required for this deployment. (Default — not specified by user)

11. Assumptions and Constraints

Assumptions.

• A-1 (required_inference): The portfolio content — project names, thumbnails, descriptions, categories, and contact details — is supplied and maintained by the Portfolio Owner outside the visitor-facing pages. No in-product editing surface is in current scope.
• A-2 (required_inference): The site is public and anonymous; no account, sign-in, or personal data collection is required for any accepted behavior.
• A-3 (required_inference): The three pages — Landing, Portfolio, and Gallery — are the complete current information architecture.
• A-4 (basic_default): The site is delivered as a responsive web experience at 375px, 768px, and 1280px.

Constraints.

• C-1 (explicit): The site is a portfolio website.
• C-2 (explicit): A honey-and-bees visual theme is applied throughout the site.
• C-3 (explicit): The site includes beautiful transitions and effects.
• C-4 (explicit): No blue or indigo anywhere in the palette; no white-first or near-white ground.
• C-5 (explicit): Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are excluded for headings and body.
• C-6 (explicit): No centred-headline-plus-subtext-plus-button-plus-gradient-blob hero.
• C-7 (explicit): No uniform grid of identical hover-lift cards.
• C-8 (explicit): No generic device mockups or stock office photography as project imagery.
• C-9 (explicit): No sharp-cornered, corporate-neutral surfaces that break the rounded honeycomb language.
• C-10 (explicit): No motion that ignores prefers-reduced-motion; every marquee and reveal has a static fallback.
• C-11 (explicit): The generic indigo/blue-on-white SaaS template is forbidden for this project.
• C-12 (explicit): Readable text and controls stay whole at every viewport; where a direction asks readable text or a control to be cropped, clipped, covered, or run off an edge, keep it whole and carry the gesture with imagery or decoration instead.

Future (not in current scope). Content authoring tooling, contact forms, analytics, comments, and any account or administrative surface are future ideas only and are not built, not paged, and not part of current acceptance.

12. Glossary

• Honeycomb rule — A thin comb-pattern line that separates sections and runs the full width beneath the top navigation.
• Honeycomb marquee band — A horizontally drifting strip of hexagon cells containing project names, which stops and wraps into static rows under prefers-reduced-motion.
• Sticker badge — A circular bee, honey-drop, or hexagon badge that overlaps a card or frame corner and nudges a few pixels on hover.
• Duotone treatment — A warm gold-to-cocoa colour mapping applied to project thumbnails so every image reads as part of the same honey world.
• Hexagon mask — A rounded hexagon frame used to crop project imagery.
• Colour-field flip — The hover transition in which a work card's background changes from wax-cream (#FFF6E2) to honey-gold (#F2A007).
• Reduced motion — The visitor's system preference (prefers-reduced-motion: reduce) under which marquees stop and wrap, reveals become instant, the bee parks in place, and the cursor glow is suppressed.
• Portfolio Owner — The creative professional whose work is showcased and who curates the presented content.
• Portfolio Visitor — An anonymous viewer who browses the showcased projects and learns about the owner.