System Requirements Document for portofolio-herfiyandi

1. Introduction

This document specifies the system requirements for portofolio-herfiyandi, a personal portfolio presentation for Herfiyandi, a young customer-service professional based in Bandung, Indonesia. The product intent is to assemble Herfiyandi's own profile content — self-introduction, personal facts, a chaired school arts festival project, customer-service skills, and a current customer-service role — into a simple but attractive ("simple tetapi menarik") 8-slide portfolio that plays as a video-style (motion) portfolio presentation, opening with a self-introduction and ending with a closing (penutup) slide.

The audience for the finished portfolio is teachers, recruiters, and future employers who will view the presentation. The audience for this document is the engineer or designer building the presentation.

The portfolio is dated as created on Saturday, 3 October 2026 ("Sabtu, 3 Oktober 2026"), and that date is part of the presented content.

2. System Overview

The system is a single first-party, publicly viewable, motion-driven portfolio presentation composed of exactly eight slides. It is a presentation artifact rather than a multi-user application: there is one content owner (Herfiyandi) and one viewing experience (the portfolio itself).

Actors

• Portfolio Owner (Herfiyandi) — the sole accepted active human persona. He supplies the profile content and needs it assembled into a coherent, presentable eight-slide sequence.
• Viewers (teachers, recruiters, future employers) are the intended audience of the finished presentation. They are not modeled as a separate product persona with their own product responsibilities; they consume the presentation.

Accepted behavior

• Eight slides, simple yet attractive, presented in a video-style motion sequence.
• Slide sequence opens with a self-introduction and closes with a penutup slide.
• Content covers: About Me (name, Bandung, born 15 October 2008, hobbies: olahraga, healing, fashion), Project dan Karya (2026 pentas seni committee chair, 300+ peserta), Skills (customer service and communication, complaint handling, cashier transactions and administration), and Experience (Customer Service, Amanah Terima Gadai, 2026–sekarang, with the four stated responsibilities and results).
• The supplied photo(s) are placed within the experience and skills section.
• The portfolio creation date, Saturday 3 October 2026, is presented.

Ownership and access

All eight slides are first-party, application-owned custom pages with no access requirement — the presentation is openly viewable, and no account, sign-in, or identity establishment is required or implied. There is no differentiated permission model, because no source establishes differentiated control or visibility over shared state.

Narrow exclusions

• No more and no fewer than eight slides.
• No stock photography, no 3D renders, and no gradient blobs as imagery.
• No blue/indigo-on-white SaaS template styling.
• No adjacent account-management, editing, analytics, or multi-user capabilities are introduced.

2a. Product Interpretation and Delivery Boundary

The product is delivered as a first-party web presentation: eight full-viewport slides in a vertical scroll-snap sequence, each slide a single colour-blocked composition, with expressive-but-controlled motion. The presentation is public and anonymous — a viewer opens it and watches it; nothing about the accepted requirements needs a login, a private workspace, or stored per-viewer state.

Everything in this document is current. No future-horizon features were requested. The only content the product presents is the content Herfiyandi supplied; the system does not invent biographical facts, employers, dates, or achievements beyond what is stated.

2b. Source Content Inventory

Not applicable — no reference directive with content_source authority was supplied. All content facts below come from the authoritative user requirement thread and are preserved verbatim in Section 3.

2c. Page Content and Component Coverage

The page inventory is the closed, ordered eight-page contract: Landing, About Me, Project dan Karya, Skills, Experience, Highlights, Contact, Closing. Each is a first-party custom page with no access requirement.

Landing

• Information / state: Opening self-introduction slide. Full-bleed coral (#F25C3A) colour block, edge to edge at every viewport. Dominant element: "HERFIYANDI" in Sora 800, 56px mobile / 96px desktop, stacked in two lines, flush-left, occupying the upper two-thirds. A single line in Outfit 500 reads "Portofolio · Bandung · 2026" in cream. A thin cream marquee runs along the very bottom edge with the name and the date "Sabtu, 3 Oktober 2026".
• Primary action: Pill button in cream with coral text labelled "Mulai", pinned bottom-left, advancing the presentation to the next slide.
• Supporting actions: Scroll / swipe to advance through the scroll-snap sequence.
• Domain entities: Owner name, location (Bandung), year (2026), portfolio creation date (Sabtu, 3 Oktober 2026), portrait photo.
• Component responsibilities: Hero name block; circular photo frame (160–220px, 4px cream border) overlapping the coral block's right edge; "Mulai" pill; bottom marquee.
• States: Loading — slide content renders immediately as static markup; no data fetch. Empty — not applicable (content is fixed). Success — name, subtitle, photo, pill, and marquee all fully visible and legible. Error — if the portrait image fails to load, the circular frame holds its shape and the name/subtitle/pill remain fully readable. Recovery — the frame shows a neutral placeholder; no layout shift; the "Mulai" pill remains operable.

About Me

• Information / state: Cream (#FFF4E6) ground with a two-column composition — portrait on the left, facts on the right in a ruled list. Facts: nama Herfiyandi; tinggal di Bandung; kelahiran 15 Oktober 2008; hobi olahraga, healing, fashion. The portfolio creation date (Sabtu, 3 Oktober 2026) is presented as metadata. A small sunflower-yellow (#FFC857) sticker accent may appear.
• Primary action: Continue to the next slide.
• Supporting actions: Scroll / swipe navigation.
• Domain entities: Name, city, birth date, hobbies (three items), creation date.
• Component responsibilities: Portrait frame; ruled fact list with coral bullet marks; small uppercase slide label; yellow sticker accent; flat character illustration in the muse's style.
• States: Loading — static render. Empty — not applicable. Success — all four fact rows and the date are legible. Error — if the portrait fails, the fact list keeps its column and remains fully readable. Recovery — placeholder frame; no reflow of the fact list.

Project dan Karya

• Information / state: Coral (#F25C3A) block. Giant "300+" counter set in Sora 800 at 96px, counting up once on entry, with "peserta pentas seni 2026" in small caps beneath it. Story: acara pentas seni — menjadi ketua panitia 2026 — membantu menyukseskan acara pentas seni sekolah yang dihadiri 300+ peserta.
• Primary action: Continue to the next slide.
• Supporting actions: Scroll / swipe navigation.
• Domain entities: Project name (acara pentas seni), role (ketua panitia), year (2026), outcome (membantu menyukseskan acara), attendance (300+ peserta).
• Component responsibilities: Counting number anchor; small-caps caption; stage/curtain motif illustration; slide label.
• States: Loading — the counter starts at its base value and counts up once on entry. Empty — not applicable. Success — "300+" reaches its final value and stays. Error — if the count-up animation cannot run, the final value "300+" is shown immediately. Recovery — with prefers-reduced-motion, the number appears whole and static at "300+".

Skills

• Information / state: Teal (#00A896) block with skill pills arranged in a loose staggered grid. Skills: customer service dan komunikasi, penanganan komplain pelanggan, transaksi kasir dan administrasi. Each pill has a 2px ink border and a teal or coral fill. The supplied photo(s) are placed here as part of the experience-and-skills section.
• Primary action: Continue to the next slide.
• Supporting actions: Hover on a skill pill gives a gentle scale to 1.04 with a warm shadow lift; scroll / swipe navigation.
• Domain entities: Skill items (three stated skill areas), supplied photo(s).
• Component responsibilities: Skill pill set; photo frame in rounded white; slide label; teal section marker.
• States: Loading — static render. Empty — not applicable. Success — every pill label is fully readable and every supplied photo is visible in its frame. Error — if a photo fails to load, its frame holds and the pills remain fully readable. Recovery — placeholder frame; pills unaffected.

Experience

• Information / state: White card with a 32px radius on the cream ground. Role: Customer Servis — Amanah Terima Gadai, period 2026–sekarang. The four responsibility lines are a ruled list with coral bullet marks:
  1. Melayani 30+ pelanggan per hari secara langsung dengan ramah.
  2. Menangani pertanyaan dan komplain pelanggan dengan cepat, tepat.
  3. Membantu proses transaksi, pencatatan, dan kerapihan area kerja.
  4. Menjaga kepuasan pelanggan dan membangun kepercayaan. The supplied photo is placed in a rounded frame at the top-right of the card, as part of the experience-and-skills section. A "30+" figure counts up once on entry.
• Primary action: Continue to the next slide.
• Supporting actions: Hover on the card gives a gentle scale to 1.04 with a warm shadow lift; scroll / swipe navigation.
• Domain entities: Employer (Amanah Terima Gadai), role title (Customer Servis), period (2026–sekarang), four responsibility statements, daily customer volume (30+), supplied photo.
• Component responsibilities: White experience card; photo frame top-right; ruled responsibility list; "30+" counter; slide label.
• States: Loading — the "30+" counter starts at its base value and counts up once on entry. Empty — not applicable. Success — all four responsibility lines and the period are legible; the photo is visible. Error — if the photo fails to load, the card keeps its layout and all four lines remain fully readable. Recovery — placeholder frame; with prefers-reduced-motion, "30+" appears whole and static.

Highlights

• Information / state: Cream ground with three highlight cards, continuing the portfolio narrative with selected experience and skills highlights drawn only from the accepted content (the pentas seni chairmanship and 300+ peserta; the customer-service skill set; the Amanah Terima Gadai role with 30+ pelanggan per hari and the trust/satisfaction outcome).
• Primary action: Continue to the next slide.
• Supporting actions: Hover on a card gives a gentle scale to 1.04 with a warm shadow lift; scroll / swipe navigation.
• Domain entities: Highlight items derived from accepted project, skills, and experience facts.
• Component responsibilities: Three highlight cards; slide label.
• States: Loading — static render. Empty — not applicable. Success — all three cards fully readable. Error — not applicable (no external data). Recovery — not applicable.

Contact

• Information / state: Coral (#F25C3A) block providing a concise continuation point before the final closing, within the eight-slide sequence. It presents the owner's identifying details already established in the portfolio (name Herfiyandi, Bandung) and the portfolio date, and a "Terima kasih" pill.
• Primary action: Continue to the final Closing slide.
• Supporting actions: Scroll / swipe navigation.
• Domain entities: Owner name, location, portfolio date.
• Component responsibilities: Colour-block panel; "Terima kasih" pill; slide label.
• States: Loading — static render. Empty — not applicable. Success — all text and the pill fully readable. Error — not applicable. Recovery — not applicable.

Closing

• Information / state: Final penutup slide. A single full-bleed teal (#00A896) block with "Terima kasih" at display scale and the portfolio date "Sabtu, 3 Oktober 2026" in small caps at the bottom. A hand-drawn-style smiley sticker may appear.
• Primary action: None required — this is the terminal slide of the presentation.
• Supporting actions: Scroll back up to revisit earlier slides.
• Domain entities: Closing line, portfolio creation date.
• Component responsibilities: Full-bleed teal block; display-scale thank-you line; small-caps date; smiley sticker.
• States: Loading — static render. Empty — not applicable. Success — the thank-you line and the date are fully readable at every viewport. Error — not applicable. Recovery — not applicable.

3. Functional Requirements

FR-1 — Eight-slide portfolio (explicit) As the Portfolio Owner (Herfiyandi), I should have a portfolio composed of exactly eight slides, so that the presentation is complete and bounded as requested.

• Trigger/input: The portfolio is opened.
• Observable result: Exactly eight slides exist in the sequence: Landing, About Me, Project dan Karya, Skills, Experience, Highlights, Contact, Closing.
• Access state: Public, no access requirement.
• Failure/recovery: Not applicable — the slide count is fixed content.
• Continuation: The viewer advances from slide 1 through slide 8.
• Acceptance: Counting the slides yields exactly 8; no ninth slide and no merged slide.

FR-2 — Simple but attractive style (explicit) As the Portfolio Owner (Herfiyandi), I should have the portfolio presented in a simple yet attractive ("simple tetapi menarik") style, so that it is easy to follow and still captivating.

• Trigger/input: Any slide is viewed.
• Observable result: Each slide carries a single dominant element with generous space, bold colour blocking, and large friendly type.
• Access state: Public.
• Failure/recovery: Not applicable.
• Continuation: The style is consistent across all eight slides.
• Acceptance: No slide crams more than one idea; every slide remains legible.

FR-3 — Video-style motion presentation (explicit) As the Portfolio Owner (Herfiyandi), I should have the portfolio delivered as a video-style (motion) portfolio presentation, so that it plays like a person talking rather than a static document.

• Trigger/input: A slide enters the viewport.
• Observable result: The headline rises and fades in first, then the supporting content, over 500–700ms with a soft ease-out; the "300+" and "30+" numbers count up once on entry.
• Access state: Public.
• Failure/recovery: If motion cannot run, content appears whole and static.
• Continuation: Motion repeats per slide as the viewer advances.
• Acceptance: Each slide animates on entry; with prefers-reduced-motion all motion stops and content appears whole and static.

FR-4 — Opening self-introduction (explicit) As the Portfolio Owner (Herfiyandi), I should have the portfolio begin with a self-introduction slide, so that the presentation opens by introducing me.

• Trigger/input: The portfolio is opened.
• Observable result: The Landing slide shows "HERFIYANDI" set oversized and flush-left on a full-bleed coral block, with the line "Portofolio · Bandung · 2026", a circular photo frame, and a "Mulai" pill.
• Access state: Public, anonymous.
• Failure/recovery: If the portrait fails to load, the frame holds and the name, subtitle, and pill remain fully readable.
• Continuation: The "Mulai" pill or scrolling advances to About Me.
• Acceptance: The first slide is the self-introduction; the name is the dominant element.

FR-5 — Portfolio creation date (explicit) As the Portfolio Owner (Herfiyandi), I should have the portfolio dated as created on Saturday, 3 October 2026, so that the creation date is part of the presented content.

• Trigger/input: The portfolio is viewed.
• Observable result: "Sabtu, 3 Oktober 2026" appears in the Landing marquee and in small caps on the Closing slide.
• Access state: Public.
• Failure/recovery: Not applicable.
• Continuation: The date persists as part of the presentation.
• Acceptance: The exact date string "Sabtu, 3 Oktober 2026" is present and legible.

FR-6 — About Me content (explicit) As the Portfolio Owner (Herfiyandi), I should have an About Me section presenting my name, city, birth date, and hobbies, so that viewers learn who I am.

• Trigger/input: The About Me slide is viewed.
• Observable result: The slide presents nama Herfiyandi, tinggal di Bandung, kelahiran 15 Oktober 2008, and hobi olahraga, healing, fashion, alongside the portfolio creation date.
• Access state: Public.
• Failure/recovery: If the portrait fails to load, the fact list remains fully readable.
• Continuation: The viewer advances to Project dan Karya.
• Acceptance: All four facts and the date are present and legible.

FR-7 — Project dan Karya content (explicit) As the Portfolio Owner (Herfiyandi), I should have a Project dan Karya section describing my 2026 pentas seni chairmanship, so that my achievement is visible.

• Trigger/input: The Project dan Karya slide is viewed.
• Observable result: The slide presents that I served as ketua panitia for the 2026 acara pentas seni, helped make the school arts performance a success, and that it was attended by 300+ peserta, anchored by a giant "300+" counter that counts up once on entry.
• Access state: Public.
• Failure/recovery: If the count-up cannot run, "300+" is shown immediately at its final value.
• Continuation: The viewer advances to Skills.
• Acceptance: Role, event, year, outcome, and the 300+ figure are all present and legible.

FR-8 — Skills content (explicit) As the Portfolio Owner (Herfiyandi), I should have a Skills section listing my customer-service and administrative skills, so that my capabilities are clear.

• Trigger/input: The Skills slide is viewed.
• Observable result: Skill pills present customer service dan komunikasi, penanganan komplain pelanggan, and transaksi kasir dan administrasi in a loose staggered grid on a teal block.
• Access state: Public.
• Failure/recovery: If a photo fails to load, its frame holds and the pills remain fully readable.
• Continuation: The viewer advances to Experience.
• Acceptance: All three skill areas are present and legible.

FR-9 — Experience content (explicit) As the Portfolio Owner (Herfiyandi), I should have an Experience section describing my Customer Service role at Amanah Terima Gadai, so that my work history and results are visible.

• Trigger/input: The Experience slide is viewed.
• Observable result: A white card presents Customer Servis — Amanah Terima Gadai, period 2026–sekarang, with the four responsibility lines: melayani 30+ pelanggan per hari secara langsung dengan ramah; menangani pertanyaan dan komplain pelanggan dengan cepat, tepat; membantu proses transaksi, pencatatan, dan kerapihan area kerja; menjaga kepuasan pelanggan dan membangun kepercayaan.
• Access state: Public.
• Failure/recovery: If the photo fails to load, the card keeps its layout and all four lines remain fully readable.
• Continuation: The viewer advances to Highlights.
• Acceptance: Employer, role, period, and all four responsibility lines are present and legible.

FR-10 — Photos placed in the experience and skills section (explicit) As the Portfolio Owner (Herfiyandi), I should have the supplied photo(s) placed within the experience and skills section, so that my photos appear where I asked.

• Trigger/input: The Skills and Experience slides are viewed.
• Observable result: The supplied photo(s) appear in rounded white frames on the Skills and Experience slides — the Experience photo at the top-right of the white card.
• Access state: Public.
• Failure/recovery: If a photo fails to load, its frame holds its shape and no readable text or control is displaced.
• Continuation: Photos remain visible as the viewer advances.
• Acceptance: No supplied photo appears outside the experience and skills section.

FR-11 — Closing (penutup) slide (explicit) As the Portfolio Owner (Herfiyandi), I should have the portfolio end with a closing slide, so that the presentation finishes properly.

• Trigger/input: The viewer reaches the final slide.
• Observable result: A full-bleed teal block shows "Terima kasih" at display scale with "Sabtu, 3 Oktober 2026" in small caps at the bottom.
• Access state: Public.
• Failure/recovery: Not applicable.
• Continuation: The presentation ends; the viewer may scroll back to revisit earlier slides.
• Acceptance: The eighth and final slide is the penutup slide.

FR-12 — Highlights continuation (required_inference) As the Portfolio Owner (Herfiyandi), I should have a Highlights slide that continues the portfolio narrative with selected experience and skills highlights, so that the eight-slide sequence flows between Experience and Contact without introducing new content.

• Trigger/input: The Highlights slide is viewed.
• Observable result: Three highlight cards present only facts already accepted (pentas seni chairmanship and 300+ peserta; the customer-service skill set; the Amanah Terima Gadai role with 30+ pelanggan per hari and the trust/satisfaction outcome).
• Access state: Public.
• Failure/recovery: Not applicable — no external data.
• Continuation: The viewer advances to Contact.
• Acceptance: No highlight card introduces a fact not present elsewhere in the accepted content.

FR-13 — Contact continuation (required_inference) As the Portfolio Owner (Herfiyandi), I should have a Contact slide that provides a concise continuation point before the final closing, so that the eight-slide sequence reaches the penutup smoothly.

• Trigger/input: The Contact slide is viewed.
• Observable result: A coral block presents the owner's identifying details already established (name Herfiyandi, Bandung) and the portfolio date, with a "Terima kasih" pill.
• Access state: Public.
• Failure/recovery: Not applicable.
• Continuation: The viewer advances to the Closing slide.
• Acceptance: No new contact channel, form, or capability is introduced beyond what the source states.

FR-14 — Readable text and controls at every viewport (explicit) As the Portfolio Owner (Herfiyandi), I should have all readable text and controls stay whole at 375px, 768px, and 1280px, so that nothing is cropped or covered.

• Trigger/input: The presentation is viewed at 375px, 768px, or 1280px.
• Observable result: Headlines, wordmarks, labels, numbers, and card text and controls stay entirely inside the viewport and their container, wrapping or scaling (e.g. font-size: clamp(...)) to fit; no other element covers any part of them.
• Access state: Public.
• Failure/recovery: Where a gesture would crop text, the gesture is carried by imagery or decoration instead.
• Continuation: Applies to all eight slides.
• Acceptance: No readable text or control is cropped, clipped, or covered at any of the three viewports.

FR-15 — Reduced-motion behavior (explicit) As the Portfolio Owner (Herfiyandi), I should have all motion stop when prefers-reduced-motion is set, so that the presentation remains fully usable.

• Trigger/input: The viewer's system requests reduced motion.
• Observable result: All motion stops; content appears whole and static; the marquee stops and shows whole items (wrapping into rows or sitting in a horizontally scrollable row).
• Access state: Public.
• Failure/recovery: Not applicable.
• Continuation: All eight slides remain fully readable.
• Acceptance: With reduced motion enabled, no animation runs and no content is hidden.

4. User Personas

Portfolio Owner (Herfiyandi)

Product context. Herfiyandi is a young customer-service professional living in Bandung, born 15 October 2008. He currently works as Customer Servis at Amanah Terima Gadai (2026–sekarang), serving 30+ customers per day face-to-face, and in 2026 he chaired his school's pentas seni, an arts performance attended by 300+ peserta. He has no design or engineering background implied by the source; he supplies his own content and needs it assembled.

Primary goal. A finished, presentable eight-slide portfolio that plays as a video-style presentation — simple but menarik — that he can show to teachers, recruiters, and future employers.

Distinct accepted responsibilities. He is the sole content owner and the sole accepted active human actor. His work is to supply and confirm the profile content: the self-introduction, the About Me facts (name, Bandung, 15 October 2008, hobbies olahraga/healing/fashion), the Project dan Karya story (ketua panitia 2026, 300+ peserta), the Skills list (customer service dan komunikasi, penanganan komplain pelanggan, transaksi kasir dan administrasi), the Experience entry (Amanah Terima Gadai, 2026–sekarang, four responsibility lines), the supplied photos, and the closing. He also fixes the portfolio's creation date as Saturday, 3 October 2026.

Relevant inputs or decisions. Which content belongs on which slide; that the photos go in the experience and skills section and nowhere else; that the deck is exactly eight slides; that the presentation opens with a self-introduction and ends with a penutup.

Interactions with other accepted participants. None within the product. The intended viewers (teachers, recruiters, future employers) consume the finished presentation but have no product responsibilities, no accounts, and no differentiated permissions. No other human participant is affected by a state change, commitment, or value transfer inside the product.

Observable success. The portfolio contains exactly eight slides, opens with the self-introduction, presents every supplied fact correctly, places the photos in the experience and skills section, ends with the penutup slide, and plays with the requested motion — legible and whole at 375px, 768px, and 1280px.

5. Core User Flows

Flow A — Herfiyandi's portfolio is assembled and presented (primary journey)

1. Starting context. Herfiyandi has supplied his profile content: self-introduction, About Me facts, the 2026 pentas seni chairmanship, his skills, his Amanah Terima Gadai experience, his photos, and the portfolio creation date.
2. Slide 1 — Landing. The presentation opens on a full-bleed coral block. "HERFIYANDI" is set oversized and flush-left, with "Portofolio · Bandung · 2026" beneath it, a circular photo frame overlapping the right edge, and a cream "Mulai" pill pinned bottom-left. A thin cream marquee runs along the bottom edge with the name and "Sabtu, 3 Oktober 2026". Observable result: the self-introduction is the first thing a viewer sees.
3. Advance. The viewer activates the "Mulai" pill or scrolls. Observable result: the sequence advances to About Me.
4. Slide 2 — About Me. On the cream ground, a two-column composition shows the portrait on the left and a ruled fact list on the right: nama Herfiyandi; tinggal di Bandung; kelahiran 15 Oktober 2008; hobi olahraga, healing, fashion. The portfolio creation date appears as metadata. Observable result: the viewer knows who Herfiyandi is.
5. Slide 3 — Project dan Karya. On a coral block, "300+" counts up once on entry and settles, with "peserta pentas seni 2026" in small caps beneath. The story reads that Herfiyandi was ketua panitia for the 2026 acara pentas seni and helped make the school arts performance a success, attended by 300+ peserta. Observable result: the achievement is the visual anchor of the slide.
6. Slide 4 — Skills. On a teal block, skill pills sit in a loose staggered grid: customer service dan komunikasi; penanganan komplain pelanggan; transaksi kasir dan administrasi. The supplied photo(s) appear in rounded white frames. Hovering a pill scales it gently to 1.04 with a warm shadow lift. Observable result: the skill set and the photos are visible together.
7. Slide 5 — Experience. A white card with a 32px radius sits on the cream ground. The supplied photo is in a rounded frame at the top-right. The card presents Customer Servis — Amanah Terima Gadai, 2026–sekarang, with four ruled responsibility lines: melayani 30+ pelanggan per hari secara langsung dengan ramah; menangani pertanyaan dan komplain pelanggan dengan cepat, tepat; membantu proses transaksi, pencatatan, dan kerapihan area kerja; menjaga kepuasan pelanggan dan membangun kepercayaan. "30+" counts up once on entry. Observable result: the role, period, responsibilities, and photo are all visible.
8. Slide 6 — Highlights. Three highlight cards on the cream ground continue the narrative using only the facts already presented. Observable result: the viewer sees a concise recap before the closing sequence.
9. Slide 7 — Contact. A coral block presents the owner's identifying details and the portfolio date, with a "Terima kasih" pill. Observable result: a concise continuation point before the final slide.
10. Slide 8 — Closing (penutup). A single full-bleed teal block shows "Terima kasih" at display scale with "Sabtu, 3 Oktober 2026" in small caps at the bottom. Observable result: the presentation ends with the requested penutup.
11. Continuation. The viewer may scroll back up to revisit any slide; the presentation remains fully readable.

Flow B — Viewing at a narrow viewport

1. Starting context. A viewer opens the presentation at 375px width.
2. Action. The viewer scrolls through the sequence.
3. Observable result. Every slide stacks to a single column with 24px side padding; headlines, labels, numbers, and card text and controls stay entirely inside the viewport and their containers, wrapping or scaling to fit; nothing covers them.
4. Continuation. At 768px two columns appear; at 1280px the composition opens up with generous margins and the colour blocks bleed to the viewport edges. Readable text and controls remain whole at all three widths.

Flow C — Viewing with reduced motion

1. Starting context. A viewer's system requests reduced motion.
2. Action. The viewer opens the presentation.
3. Observable result. All motion stops: no rise-and-fade, no count-up, no hover scale, no marquee movement. The "300+" and "30+" numbers appear whole at their final values; the marquee shows whole items (wrapping into rows or sitting in a horizontally scrollable row).
4. Continuation. All eight slides remain fully readable and the presentation can be viewed end to end.

Flow D — A supplied photo fails to load

1. Starting context. A viewer opens the Skills or Experience slide and a supplied photo cannot be fetched.
2. Observable result. The photo frame holds its shape and position; no readable text or control is displaced or covered.
3. Recovery. A neutral placeholder fills the frame; the skill pills and the four responsibility lines remain fully readable.
4. Continuation. The viewer advances normally through the remaining slides.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Haraldur Thorleifsson — big-hearted boldness: large friendly type, saturated colour blocking, custom character illustration, and warmth. Headline: a portfolio that greets you like a friend, in colour blocks.

Colour tokens (light mode)

Proportion: 60% cream, 20% coral, 10% teal, 10% white/ink.

Typography

• Headings: Sora, weight 700–800, tight tracking (-0.02em), large and friendly. Sentence case for narrative headings; uppercase for small slide labels. Headlines are the hero — set at display scale and allowed to wrap across two or three lines.
• Body: Outfit, weight 400–500, generous 1.6 line-height, never smaller than 16px.
• Scale: 1.333 modular scale — 56px mobile / 96px desktop for the opening name; 32/48px for slide titles; 20/24px for subheads; 16/18px for body; 13/14px for labels and dates.

Shape language. Chunky rounded cards with 24–32px radii; pill buttons; sticker-like circular badges for the "300+ peserta" and "30+ pelanggan" numbers; bold colour-block panels with hard edges where they meet the slide boundary. Corners are soft on content, sharp on full-bleed colour fields — the contrast is deliberate. No thin hairlines; borders are 2–3px and confident.

Spacing rhythm. Generous, slide-scale spacing: each slide is a single colour-blocked composition with one dominant element and room to breathe; 24px side padding at 375px, opening to generous margins at 1280px.

Imagery style. Herfiyandi's own photos are the primary imagery — a portrait in a circular frame on the opening slide, and the supplied photos in rounded white frames on the experience and skills slides. Around the photos, custom flat character illustration in the muse's style: a simple friendly figure for the about-me slide, a small stage/curtain motif for the pentas seni slide, and a hand-drawn-style smiley sticker on the closing slide. No stock photography, no 3D renders, no gradient blobs.

Avoid. Blue or indigo accents on a white or near-white ground; centred headline + subtext + blue button + gradient blob hero; a grid of identical hover-lift cards; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui for headings or body; thin hairlines and neutral grey-on-grey business styling; stock photography, 3D renders, or gradient blobs; cramming more than one idea per slide.

7. Signature Design Concept

The opening slide is a colour block, not a hero banner.

The first screen is a full-bleed coral (#F25C3A) field, edge to edge at every viewport. Dominant element: "HERFIYANDI" set in Sora 800 at 56px on mobile and 96px on desktop, stacked in two lines, flush-left, occupying the upper two-thirds of the slide. To its right — or below it on mobile — sits a 160–220px circular photo frame with a 4px cream border, overlapping the coral block's right edge. Beneath the name, a single line in Outfit 500 reads "Portofolio · Bandung · 2026" in cream. At the bottom-left, a pill button in cream with coral text says "Mulai". A thin cream marquee runs along the very bottom edge with the name and the date "Sabtu, 3 Oktober 2026".

No centred headline, no gradient, no blue. The composition is a colour block with oversized type and a photo — unmistakably not a generic SaaS hero. The type and the colour block are the hero.

Signature moves carried through the deck

• A giant counting number as the visual anchor of the project slide: "300+" in Sora 800 at 96px on a coral block, counting up once on entry, with "peserta pentas seni 2026" in small caps beneath it.
• Skill pills as coloured stickers: each skill is a pill with a 2px ink border and a teal or coral fill, arranged in a loose staggered grid rather than a neat matrix.
• The experience slide uses a white card with a 32px radius on the cream ground, with the supplied photo in a rounded frame at the top-right and the four responsibility lines as a ruled list with coral bullet marks.
• The closing slide is a single full-bleed teal block with "Terima kasih" at display scale and "Sabtu, 3 Oktober 2026" in small caps at the bottom — a clean, warm full stop to the video.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The oversized flush-left name "HERFIYANDI" on the full-bleed coral block, with the circular photo frame overlapping the right edge.
• Input → transformation → outcome thesis: As the Landing slide enters the viewport, the headline rises and fades in first, then the supporting content follows, over 500–700ms with a soft ease-out; the cream marquee begins its slow run along the bottom edge. The outcome is a first frame that reads as a person greeting you, not a document loading.
• Motion vocabulary: Staggered rise-and-fade of headline then supporting content; a single offset photo frame (no parallax layers deeper than that); a subtle marquee of the name and date along the bottom of slide 1; gentle scale to 1.04 with a warm shadow lift on hover for skill pills and cards; one-time count-up for the "300+" and "30+" numbers when their slides enter.
• Composed first frame: Coral field edge to edge; "HERFIYANDI" in two flush-left lines occupying the upper two-thirds; "Portofolio · Bandung · 2026" in cream beneath; circular photo frame with a 4px cream border overlapping the right edge; cream "Mulai" pill pinned bottom-left; thin cream marquee along the very bottom edge.
• Reduced-motion state: With prefers-reduced-motion, all motion stops and content appears whole and static. The marquee stops and shows whole items — wrapping into rows or sitting in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling. The "300+" and "30+" numbers appear whole at their final values.

9. Non-Functional Requirements

NFR-1 — Slide count is exact (explicit) The portfolio must contain exactly eight slides. Rationale: the user requested "8 slide portofolio" and the planning scope fixes an exact count of 8. No ninth slide, no merged slide.

NFR-2 — Readable text and controls stay whole (explicit) At 375px, 768px, and 1280px, headlines, wordmarks, labels, numbers, and card text and controls must stay entirely inside the viewport and their container, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element may cover 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. Moving and scrollable content (the marquee) may cross the viewport or container edge by design and is judged by whether it actually moves and whether every item becomes fully readable as it passes. Rationale: explicit creative-direction constraint.

NFR-3 — Reduced-motion support (explicit) With prefers-reduced-motion, all motion stops and content appears whole and static; moving content stops and shows whole items. Rationale: explicit creative-direction constraint.

NFR-4 — No forbidden visual template (explicit) The generic indigo/blue-on-white SaaS template is forbidden for this project. Blue or indigo accents on a white or near-white ground must not be used. Rationale: explicit creative-direction constraint.

NFR-5 — No stock photography, 3D renders, or gradient blobs (explicit) Imagery is limited to Herfiyandi's own photos and custom flat character illustration in the muse's style. Rationale: explicit creative-direction constraint.

NFR-6 — Typography restriction (explicit) Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui must not be used for headings or body. Headings use Sora; body uses Outfit. Rationale: explicit creative-direction constraint.

NFR-7 — One idea per slide (explicit) Each slide keeps a single dominant element; no slide crams more than one idea. Rationale: explicit creative-direction constraint and the "simple tetapi menarik" requirement.

NFR-8 — Public, anonymous access (explicit) All eight slides are publicly viewable with no access requirement. No account, sign-in, or identity establishment is required or implied. Rationale: the planning scope assigns access_requirement: none to every page, and no source establishes private state, differentiated permissions, or per-viewer continuity.

NFR-9 — Content fidelity (explicit) The presentation must not invent biographical facts, employers, dates, achievements, or contact channels beyond what the source states. Rationale: all content facts are user-supplied.

10. Tech Stack

No technology choices were specified by the user. The following are coherent defaults for a first-party, motion-driven, eight-slide web presentation:

• Frontend: React (web), single-page presentation with eight full-viewport slides in a vertical scroll-snap sequence. [Default — not specified by user]
• Styling: CSS with custom properties for the colour tokens, Sora and Outfit loaded as web fonts, clamp() for the type scale. [Default — not specified by user]
• Motion: CSS transitions and a lightweight animation approach for the staggered rise-and-fade, the one-time count-ups, and the marquee, with a prefers-reduced-motion media query gating all motion. [Default — not specified by user]
• Backend / storage: None required. The presentation is static content; no server, database, or API is needed by any accepted requirement. [Default — not specified by user]
• Deployment: Static hosting of the built presentation. Docker/docker-compose and Kubernetes are not required by any accepted requirement. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions

• A-1. Herfiyandi's supplied photos are available as image assets to be placed in the Skills and Experience slides. If a photo is unavailable, the frame holds its shape and no readable text or control is displaced.
• A-2. The presentation is viewed in a modern browser that supports CSS scroll-snap and prefers-reduced-motion.
• A-3. The Contact slide presents only the identifying details already established in the portfolio (name, Bandung, portfolio date); no contact channel, form, or messaging capability is assumed because none was stated.
• A-4. The Highlights slide draws only on facts already accepted elsewhere in the deck; it introduces no new content.

Constraints

• C-1. Exactly eight slides — no more, no fewer.
• C-2. Simple yet attractive in style.
• C-3. Delivered as a video-style (motion) portfolio presentation.
• C-4. Begins with a self-introduction and ends with a closing (penutup) slide.
• C-5. The portfolio's creation date is stated as Saturday, 3 October 2026.
• C-6. The photo(s) must be placed within the experience and skills section, not elsewhere.
• C-7. No blue/indigo-on-white SaaS template styling.
• C-8. No stock photography, 3D renders, or gradient blobs.
• C-9. Readable text and controls stay whole at 375px, 768px, and 1280px.
• C-10. All motion stops under prefers-reduced-motion.

12. Glossary

• Portofolio — the portfolio presentation; the product itself.
• Slide — one of the eight full-viewport colour-blocked compositions in the presentation sequence.
• Video-style (motion) presentation — a slide sequence that plays with entry animation and motion, so it reads like a person talking rather than a static document.
• Penutup — the closing slide that ends the presentation.
• Pentas seni — the school arts performance event; the subject of the Project dan Karya slide.
• Ketua panitia — committee chair; Herfiyandi's role for the 2026 pentas seni.
• Peserta — participants/attendees; the pentas seni was attended by 300+ peserta.
• Amanah Terima Gadai — the employer where Herfiyandi works as Customer Servis, 2026–sekarang.
• Customer Servis — customer service; Herfiyandi's role title at Amanah Terima Gadai.
• Pelanggan — customers; Herfiyandi serves 30+ pelanggan per hari.
• Komplain — complaint; handling customer complaints is one of Herfiyandi's stated skills and responsibilities.
• Transaksi kasir — cashier transactions; part of Herfiyandi's stated skills.
• Administrasi — administration; part of Herfiyandi's stated skills.
• Olahraga, healing, fashion — Herfiyandi's stated hobbies: sports, healing, and fashion.
• Mulai — "Start"; the label of the pill button on the Landing slide.
• Terima kasih — "Thank you"; the closing line on the Contact and Closing slides.
• Sabtu, 3 Oktober 2026 — Saturday, 3 October 2026; the portfolio's stated creation date.
• Colour block — a full-bleed field of a single saturated colour that carries a slide's composition.
• Sticker — a small circular badge or accent element (for example the "300+ peserta" and "30+ pelanggan" numbers, or the smiley on the closing slide).