System Requirements Document for portofolio-developer

1. Introduction

This document specifies a single-page developer portfolio website for septianeka candra, a developer based in Indonesia. The product is one modern, self-promotional page that presents the developer's identity, background, work, and skills, and gives visitors a direct way to make contact.

The intent is derived from the authoritative user requirement: build one page using HTML and Tailwind CSS, containing a Hero section (photo, name, role, CTA button), a "Tentang Saya" (About Me) section, a "Proyek" (Projects) section rendered as an interactive 3-column grid, a "Keahlian" (Skills) section where skills are shown with icons, and a "Kontak" (Contact) form placed at the bottom of the page. The page uses an elegant dark mode theme with purple and blue accents.

The audience is anyone who lands on the page to evaluate the developer in seconds — prospective clients, recruiters, and peers — and the developer themself, who owns and presents the content.

2. System Overview

The product is a single static page delivered as HTML styled with Tailwind CSS. There is no multi-page navigation, no application account system, and no server-side product behavior required by the source. All content is authored by the developer and presented to visitors.

The page is composed of five stacked sections in a fixed vertical order:

1. Hero — photo, name, role, and a CTA button.
2. Tentang Saya — the developer's background.
3. Proyek — an interactive 3-column grid of projects.
4. Keahlian — skills displayed with icons.
5. Kontak — a contact form at the bottom of the page.

The visual register is an elegant dark mode with purple and blue accents, realized through the project's creative direction (see Sections 6–8).

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The page is a first-party, publicly reachable surface. It is delivered as a single HTML document styled with Tailwind CSS. No login, account, or identity establishment is required or implied for any visitor to read the page or use the contact form — the source specifies a public portfolio page and nothing in the accepted requirements introduces private, per-user, or resumable state.

Current scope. Everything in Section 3 is current: the single page, its five sections, the interactive 3-column project grid, icon-based skills, the bottom contact form, and the dark purple/blue theme.

Explicit boundaries. The source explicitly requires one page ("satu halaman"). No additional pages, routes, dashboards, or admin surfaces are part of the current product. The contact form is a presentation-and-submission surface on the page itself; the source does not specify a backend inbox, CRM, or account system, and none is added here.

Future horizon. No future requirements were stated by the user. Nothing in this document is deferred.

2b. Source Content Inventory

Not applicable — no reference directive in this request declares a content_source, so no external factual inventory is reproduced. All page content is authored by the developer (Portfolio Owner).

2c. Page Content and Component Coverage

The reconciled page inventory is exactly one page, matching the versioned page contract.

Landing

The single public entry surface. It contains all five required sections in order and is publicly reachable with no access requirement.

Information and state

• Developer identity: name, role, and portrait photo (Hero).
• Developer background narrative (Tentang Saya).
• Project entries: title, description, and an index numeral per project (Proyek).
• Skill entries: icon plus skill label per skill (Keahlian).
• Contact form fields for visitor input (Kontak).
• No persistent user state; the page is stateless and re-readable on every visit.

Primary actions

• Hero CTA button — the primary call to action, directing the visitor onward (e.g., to the projects or contact section).
• Project card interaction — the interactive behavior of the 3-column grid (hover/focus response on each card).
• Contact form submission — the visitor enters their details and submits the form.

Supporting actions

• In-page navigation to each section (Hero → Tentang Saya → Proyek → Keahlian → Kontak).
• Reading and scanning of all sections without interaction.

Domain entities

• Developer profile — name, role, photo, about text.
• Project — title, description, index numeral, colour field.
• Skill — icon, label.
• Contact submission — the visitor's entered contact details.

Component responsibilities

• Hero block — renders photo, name, role, and CTA button; anchors the page identity.
• About block — renders the "Tentang Saya" narrative.
• Projects grid — renders exactly three columns of project cards and owns the interactive card behavior.
• Skills block — renders each skill with its icon.
• Contact form — renders the input fields and submit control at the bottom of the page.
• Section navigation — moves the visitor between the five sections.

States

• Loading — not applicable; the page is static HTML/CSS with no asynchronous data.
• Empty — if a section's authored content is absent (e.g., no projects or no skills entered), that section renders its heading with an empty or placeholder state rather than breaking layout.
• Success — the page renders fully; a contact form submission confirms receipt to the visitor.
• Error — a contact form submission with missing or invalid required input shows an inline validation message and does not submit.
• Recovery — the visitor corrects the flagged field and resubmits; the page remains fully readable at all times.

3. Functional Requirements

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

FR-1 — Single-page portfolio delivery (explicit) As a Portfolio Owner (Developer), I should have my portfolio delivered as one page built with HTML and Tailwind CSS, so that visitors reach my entire profile at a single address.

• Trigger/input: the page is opened.
• Observable result: a single HTML document styled with Tailwind CSS renders all five sections; no second page or route exists.
• Access state: public, no identity required.
• Failure/recovery: if a stylesheet fails to load, the semantic HTML content remains readable.
• Continuation: the visitor scrolls through the sections in order.

FR-2 — Hero section with photo, name, role, and CTA button (explicit) As a Portfolio Visitor, I should see a Hero section containing the developer's photo, name, role, and a CTA button, so that I immediately know who this is and what to do next.

• Trigger/input: the page loads.
• Observable result: the Hero renders the portrait photo, the developer's name, the role label, and a CTA button.
• Access state: public.
• Failure/recovery: if the photo fails to load, the name, role, and CTA remain visible and the layout holds.
• Continuation: the visitor activates the CTA or scrolls to the next section.

FR-3 — "Tentang Saya" section (explicit) As a Portfolio Visitor, I should read a "Tentang Saya" section, so that I understand the developer's background.

• Trigger/input: the visitor scrolls to the section.
• Observable result: the "Tentang Saya" section renders the developer's about content.
• Access state: public.
• Failure/recovery: if content is absent, the section heading still renders without breaking layout.
• Continuation: the visitor continues to the "Proyek" section.

FR-4 — "Proyek" section as an interactive 3-column grid (explicit) As a Portfolio Visitor, I should browse a "Proyek" section laid out as an interactive 3-column grid, so that I can evaluate the developer's work.

• Trigger/input: the visitor scrolls to the section and interacts with a project card.
• Observable result: projects render in exactly three columns, and each card responds to interaction (hover/focus state change).
• Access state: public.
• Failure/recovery: if a project entry is missing, the grid reflows without leaving a broken column.
• Continuation: the visitor moves on to the "Keahlian" section.

FR-5 — "Keahlian" section with skills shown with icons (explicit) As a Portfolio Visitor, I should review a "Keahlian" section where each skill is displayed with an icon, so that I can quickly assess the developer's technical range.

• Trigger/input: the visitor scrolls to the section.
• Observable result: each skill renders with its accompanying icon and label.
• Access state: public.
• Failure/recovery: if an icon fails to load, the skill label remains readable.
• Continuation: the visitor continues to the "Kontak" form.

FR-6 — "Kontak" form at the bottom of the page (explicit) As a Portfolio Visitor, I should use a "Kontak" form placed at the bottom of the page, so that I can reach out to the developer.

• Trigger/input: the visitor fills in the form fields and submits.
• Observable result: the form accepts the visitor's input and confirms submission; the form is the last section on the page.
• Access state: public, no identity required.
• Failure/recovery: missing or invalid required input produces an inline validation message and blocks submission; the visitor corrects the field and resubmits.
• Continuation: after a successful submission the visitor receives confirmation and remains on the page.

FR-7 — Elegant dark mode theme with purple and blue accents (explicit) As a Portfolio Owner (Developer), I should have the page rendered in an elegant dark mode theme with purple and blue accents, so that the portfolio reads as modern and distinctive.

• Trigger/input: the page loads.
• Observable result: the page uses a dark ground with purple and blue accent colours applied consistently across all five sections.
• Access state: public.
• Failure/recovery: if accent styling fails, text remains legible against the dark ground.
• Continuation: the theme applies uniformly as the visitor scrolls.

FR-8 — Public reachability of the page (required_inference) As a Portfolio Visitor, I should reach the portfolio page without creating an account or signing in, so that I can evaluate the developer immediately.

• Trigger/input: the visitor opens the page URL.
• Observable result: the page renders fully with no authentication gate.
• Access state: public, anonymous.
• Failure/recovery: not applicable; there is no protected state to recover.
• Continuation: the visitor proceeds through the sections.

FR-9 — Developer-authored content presentation (required_inference) As a Portfolio Owner (Developer), I should have my authored profile, projects, and skills presented as the page's content, so that the page truthfully represents my work.

• Trigger/input: the page is built with the developer's content.
• Observable result: the Hero, Tentang Saya, Proyek, and Keahlian sections display the developer's own photo, name, role, about text, projects, and skills.
• Access state: public.
• Failure/recovery: absent content degrades to an empty section rather than a broken page.
• Continuation: the developer updates the authored content and the page reflects it.

4. User Personas

Portfolio Visitor

• Product context: A prospective client, recruiter, or peer who lands on the single-page developer portfolio to evaluate the developer. They arrive with no account and no prior relationship to the page.
• Primary goal: Understand who the developer is, what they have built, and what they are skilled at — then be able to make contact.
• Distinct accepted responsibilities: Scanning the Hero (photo, name, role, CTA), reading the "Tentang Saya" section, browsing the interactive 3-column "Proyek" grid, reviewing the "Keahlian" skills with icons, and using the "Kontak" form at the bottom to reach out.
• Relevant inputs or decisions: Deciding whether to activate the Hero CTA, which project cards to interact with, and whether to submit the contact form.
• Interactions with other accepted participants: The visitor is the recipient of the Portfolio Owner's presented content and the initiator of the contact submission that reaches the developer.
• Observable success: The visitor understands the developer's profile and projects and has successfully submitted the contact form (or reached the developer through the CTA).

Portfolio Owner (Developer)

• Product context: The developer whose portfolio this is — septianeka candra — presenting their photo, name, role, CTA, about text, projects, and skills on the page.
• Primary goal: Have a polished, dark-themed single page that represents their work and gives visitors a way to get in touch.
• Distinct accepted responsibilities: Authoring and presenting the Hero identity (photo, name, role, CTA), the "Tentang Saya" narrative, the project entries in the 3-column grid, the icon-based skills, and the contact form; ensuring the page carries the elegant dark purple/blue theme.
• Relevant inputs or decisions: What content to present in each section and how the page is styled.
• Interactions with other accepted participants: The developer is the subject of the visitor's evaluation and the recipient of the visitor's contact submission.
• Observable success: The page renders as a single, complete, dark-themed portfolio with all five sections present and the contact form reachable at the bottom.

5. Core User Flows

Flow A — Portfolio Visitor evaluates the developer and makes contact

1. Starting context: The visitor opens the portfolio URL with no account and no prior session.
2. Landing: The Landing page renders the Hero section with the developer's photo, name, role, and CTA button (FR-2, FR-8).
3. Decision: The visitor reads the Hero and decides to continue — either activating the CTA button or scrolling down.
4. About: The visitor scrolls into the "Tentang Saya" section and reads the developer's background (FR-3).
5. Projects: The visitor reaches the "Proyek" section and browses the interactive 3-column grid, interacting with project cards to inspect the developer's work (FR-4).
6. Skills: The visitor continues to the "Keahlian" section and reviews each skill with its icon (FR-5).
7. Contact: The visitor reaches the "Kontak" form at the bottom of the page and enters their details (FR-6).
8. Commitment: The visitor submits the form.
9. Observable result: The form confirms the submission and the visitor remains on the page.
10. Failure/recovery: If required input is missing or invalid, an inline validation message appears, submission is blocked, and the visitor corrects the field and resubmits.
11. Next step: The visitor has understood the developer's profile and projects and has made contact.

Flow B — Portfolio Owner presents their work

1. Starting context: The developer has authored their profile, projects, and skills and the page is published.
2. Presentation: The developer's photo, name, role, and CTA render in the Hero; the "Tentang Saya" narrative renders below; the projects render in the interactive 3-column grid; the skills render with icons; the contact form sits at the bottom (FR-1, FR-9).
3. Observable result: A single, complete, dark-themed page with purple and blue accents presents the developer's work (FR-7).
4. Continuation: The developer updates their authored content and the page reflects the change.

6. Visuals Colors and Theme

The creative direction is authoritative for this section: Electric nocturne — a developer portfolio as a saturated nightclub poster after Jessica Walsh. The headline register is confident, modern, and slightly theatrical: saturated colour on near-black, oversized type, and real craft holding the swagger in check.

Colour tokens (dark mode)

Body text on #0B0713 reaches ~12:1 contrast and on #17102A ~9.5:1 — both comfortably readable. The requested purple + blue pairing reads as a deliberate two-colour system (violet primary, cobalt supporting), not a single brand blue. No blue-on-white or indigo-on-near-white anywhere; the ground is always dark ink-violet.

Typography

• Headings: Unbounded at 700–800 for display, set tight (letter-spacing −0.02em), sentence case, with occasional all-caps for section eyebrows.
• Second display voice: Archivo Black — used only for the rotated "PROYEK" sticker labels and the marquee band.
• Body: Space Grotesk.
• Scale: 1.333 modular with a 1.5 jump at the top — 14 / 16 / 21 / 28 / 40 / 56 / 88 / 128. Hero name clamp(44px, 9vw, 128px); section headings clamp(32px, 5vw, 56px); project titles 24px; body 16–18px at 1.65 line-height; micro-labels 12px uppercase at 0.14em tracking.

Shape language

• Big radii: 24–32px on cards, pill buttons at 999px.
• Overlapping sticker shapes with 2px offset borders; rotated ribbons and capsule chips.
• Section boundaries are soft colour-block curves rather than straight rules — each section ends with a 120px-tall asymmetric curve that the next section's colour fills.
• Cards carry a hard 6px offset shadow in violet or tangerine instead of a blur, so depth reads as printed sticker rather than glass.

Spacing rhythm: generous 96–160px vertical rhythm between sections.

Imagery style: one art-directed portrait of the developer, high-contrast and colour-graded toward violet, cut out and cropped so it bleeds off the hero's right edge and overlaps the colour seam. Supporting imagery is surreal props and 3D primitives — a glossy chrome sphere, a floating keyboard, a coiled cable — rendered in violet and tangerine on flat colour fields, never stock photography of people at desks. Project cards use abstract generated colour fields with a large index numeral rather than screenshots, so the grid reads as a designed poster series.

7. Signature Design Concept

The name is the seam. The first screen is a full-viewport two-colour split, not a centred SaaS hero. The left 58% is a solid violet (#8B5CF6) field; the right 42% is the deep ink-violet ground (#0B0713). The developer's name runs across both fields as a single oversized line in Unbounded 800 at clamp(44px, 9vw, 128px), with the portion crossing onto the violet field inverting to dark ink — so the typography itself is the colour boundary.

Beneath the name, a 12px uppercase eyebrow reads the developer's role and location with a pulsing tangerine dot. The portrait is a cut-out that bleeds off the right viewport edge and overlaps the colour seam, cropped at the shoulder so it never covers the name. Two CTAs sit bottom-left as pills: a solid tangerine primary CTA and a 1px violet-outline secondary CTA. A tangerine marquee band runs along the very bottom of the viewport carrying the tech stack in 14px uppercase.

This concept recomposes only accepted content — the Hero's photo, name, role, and CTA button — into the direction's signature composition. No new behaviour, page, or destination is introduced.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The oversized developer name spanning the violet/ink seam, with the cut-out portrait bleeding off the right edge.
• Input → transformation → outcome thesis: On load, the name and portrait settle into the two-colour split; as the visitor scrolls, sticker cards scale in at 0.94→1 with a soft overshoot (staggered 60ms per card), the marquee band scrolls continuously at ~40s per loop, and the hero's accent word cycles colour every 3.2s — producing a page that reads as a living poster while every accepted control (CTA, project cards, skills, contact form) stays fully usable.
• Motion vocabulary: Sticker scale-in with soft overshoot; continuous marquee scroll; hover colour-flip on project cards with a 0.5deg rotation; a 3.2s accent-word colour cycle; asymmetric colour-curve section transitions.
• Composed first frame: Full-viewport two-colour split — violet field left 58%, ink-violet ground right 42% — with the name crossing both fields, the eyebrow and pulsing tangerine dot beneath it, the portrait bleeding off the right edge, two pill CTAs bottom-left, and the tangerine marquee band along the bottom edge.
• Reduced-motion state: prefers-reduced-motion stops the marquee (items wrap into rows), disables the scale-ins, and freezes the accent-word colour cycle, leaving a static, fully readable layout with all content and controls intact.

Signature moves carried through the page

• Oversized name that spans the viewport and inverts colour where it crosses the hero's violet/ink seam.
• Sticker-shadow project cards: each of the 3 columns is a flat colour field (violet, cobalt, tangerine) with a hard 6px offset shadow and a rotated Archivo Black index label ("01", "02", "03") pinned to the top-left corner; hover flips the field's colour and rotates the card 0.5deg.
• A continuously scrolling tangerine marquee band running full-bleed along the bottom edge of the hero and again between "Keahlian" and "Kontak", carrying the tech stack in 14px uppercase.
• Skills rendered as a dense icon matrix inside one rounded slab, where each 32px icon sits in its own 48px capsule that fills violet on hover and reveals the proficiency percentage in tabular numerals.
• Section transitions built from asymmetric colour curves rather than straight rules — the violet of the hero bleeds into "Tentang Saya" as a 120px curved lip, and a rotated "PROYEK" sticker overlaps the gutter between the About columns.

Layout commitments

• Asymmetric editorial grid on a 12-column base.
• "Tentang Saya" is a two-column split — oversized pull-quote left, 62ch measure right, with a rotated sticker overlapping the column gutter.
• "Proyek" is a strict 3-column grid at 1280px, 2 columns at 768px, and 1 column plus horizontal scroll at 375px.
• "Keahlian" breaks the grid deliberately: a dense 4-column icon matrix inside a single rounded slab, icons at 32px with labels beneath.
• "Kontak" is a full-width slab with the form on the left 7 columns and a large rotated "HALO!" type block on the right 5 columns.

Readability guarantee: headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no element covering any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, or overlapped as the direction asks, provided they cover no readable text or control. Moving and scrollable content (the marquee, the 375px project row) may cross the container edge by design; every item becomes fully readable as it passes, and under reduced motion items wrap into rows or scroll so each can be brought fully into view.

9. Non-Functional Requirements

• NFR-1 — Single-page constraint (explicit): The product is exactly one page. No additional routes, pages, or navigation surfaces are introduced.
• NFR-2 — Technology constraint (explicit): The page is implemented with HTML and Tailwind CSS. Tailwind utility classes carry the styling; no alternative CSS framework replaces it.
• NFR-3 — Theme constraint (explicit): The theme is an elegant dark mode with purple and blue accents, applied consistently across all five sections.
• NFR-4 — Projects grid constraint (explicit): The "Proyek" section uses a 3-column grid and is interactive.
• NFR-5 — Skills constraint (explicit): Skills are displayed with icons.
• NFR-6 — Contact form placement constraint (explicit): The "Kontak" form is placed at the bottom of the page.
• NFR-7 — Responsive readability (required_inference): Readable text and controls remain whole and inside the viewport at 375px, 768px, and 1280px, per the creative direction's readability guarantee.
• NFR-8 — Reduced-motion support (required_inference): Decorative motion respects prefers-reduced-motion, leaving a static, fully readable layout.
• NFR-9 — Public accessibility (required_inference): The page is publicly reachable with no authentication gate, consistent with a public portfolio.

10. Tech Stack

• Markup: HTML — the single page document (explicit).
• Styling: Tailwind CSS — utility-first styling for the dark theme, layout grid, and component surfaces (explicit).
• Typography: Unbounded (display headings), Archivo Black (sticker labels and marquee), Space Grotesk (body) — per the creative direction.
• Icons: An icon set for the "Keahlian" skills display (explicit requirement for icons; the specific icon library is a presentation default).
• Interactivity: Lightweight client-side behavior for the interactive project grid, the marquee, and the contact form validation — no server-side product behavior is required by the source.

11. Assumptions and Constraints

• A-1 (explicit constraint): The product is a single page — "satu halaman" — and no additional pages are added.
• A-2 (explicit constraint): The implementation uses HTML and Tailwind CSS.
• A-3 (explicit constraint): The theme is dark mode with purple and blue accents.
• A-4 (explicit constraint): The "Proyek" section is a 3-column interactive grid.
• A-5 (explicit constraint): Skills are shown with icons.
• A-6 (explicit constraint): The "Kontak" form sits at the bottom of the page.
• A-7 (assumption): The developer's specific photo, name, role text, about copy, project entries, and skill list are authored content supplied by the Portfolio Owner; the page structure accommodates them without prescribing their values.
• A-8 (assumption): The contact form is a page-level submission surface; the source does not specify a backend inbox, CRM, or account system, and none is added.
• A-9 (assumption): No login, account, or identity system is required — the page is public and stateless.
• A-10 (assumption): The specific icon library and any client-side interactivity library are presentation/implementation defaults, not product behavior.

12. Glossary

• Hero — The first, full-viewport section of the page containing the developer's photo, name, role, and CTA button.
• Tentang Saya — The "About Me" section presenting the developer's background.
• Proyek — The "Projects" section, rendered as an interactive 3-column grid of project cards.
• Keahlian — The "Skills" section, where each skill is displayed with an icon.
• Kontak — The "Contact" form placed at the bottom of the page.
• CTA — Call to action; the button in the Hero that directs the visitor onward.
• Portfolio Visitor — A prospective client, recruiter, or peer who lands on the page to evaluate the developer.
• Portfolio Owner (Developer) — The developer whose portfolio this is, presenting their work on the page.
• Dark mode — The elegant dark-ground theme with purple and blue accents applied across the page.
• Sticker card — A project card rendered as a flat colour field with a hard offset shadow and a rotated index label, per the creative direction.
• Marquee band — The continuously scrolling full-bleed band carrying the tech stack in uppercase.