System Requirements Document for marine-portfolio

1. Introduction

marine-portfolio is a personal portfolio website for Umang Suthar, a Full Stack Developer. The product's intent is to present the owner's professional profile, education, languages, and contact details to visitors — potential employers, collaborators, and peers — in a single, publicly reachable, self-contained site. The authoritative source for all presented content is the owner's existing portfolio at https://umangsuthar.github.io/; the new site must reflect those details faithfully, including the literal published values (for example the B.E. years shown as 2015 - -).

The audience is twofold: the Portfolio Owner, who needs a published portfolio that accurately represents him, and the Portfolio Visitor, who browses to learn who the owner is, review his background, and find a way to get in touch.

Success Criteria

• A visitor can, without any account or sign-in, reach the site, read the owner's name, title, education, and languages, and obtain the owner's email, Twitter handle, and GitHub address.
• Every published fact on the site matches the authoritative source, item by item, with no invented or substituted content.
• The site presents the owner's profile photograph and details within the Zaha Hadid–inspired visual direction described in Sections 6–8, with all readable text and controls fully visible at 375px, 768px, and 1280px.

2. System Overview

marine-portfolio is a public, read-only personal portfolio website. It has three visitor-facing pages — Landing, Portfolio, and Contact — all reachable without authentication. The site is delivered as a React frontend served alongside a shared FastAPI backend and a MariaDB database provisioned as part of the scaffold; the current product scope requires no application-owned persistent data, no accounts, and no write operations from visitors.

Actors:

• Portfolio Owner (Umang Suthar) — the subject of the portfolio; his published details are the site's content.
• Portfolio Visitor — a recruiter, client, or peer who reads the portfolio and uses the published contact details to reach out.

Accepted behavior: presenting the owner's profile (name, title, profile photograph), education history, languages, and contact details; providing navigation among the three pages; and enabling a visitor to act on the contact details (compose an email, open the Twitter profile, open the GitHub profile) through their own external clients.

Removed from scope

• None.

2a. Product Interpretation and Delivery Boundary

The product is a first-party, publicly accessible portfolio site. All three pages are anonymous and require no identity, session, or account. There is no owner-facing editing interface in the current scope: the owner's details are published as fixed content reflecting the authoritative source, and the owner's responsibility of keeping the portfolio current is fulfilled by the published content matching that source. Contact is handled entirely through the owner's existing external channels (email, Twitter, GitHub); the site does not host a messaging, form-submission, or inbox capability. No future-horizon features are specified.

2b. Source Content Inventory

All facts below are taken from the authoritative content source https://umangsuthar.github.io/ and must be preserved exactly.

Profile

• Profile picture: the owner's profile photograph (published on the source site as "profile pic").
• Name: Umang Suthar
• Title: Full Stack Developer

Contact

• Email: umangsuthar97@gmail.com
• Twitter: @umangsuthar97
• GitHub: github.com/umangsuthar

Education

Languages

• English
• Hindi
• Gujarati

2c. Page Content and Component Coverage

Landing

• Information/state: Public entry surface. Presents the owner's name ("UMANG SUTHAR"), title ("FULL STACK DEVELOPER"), and the profile photograph as the hero composition. No account state; always publicly available.
• Primary actions: Navigate to Portfolio ("View work") and to Contact ("Get in touch"). Both anchored links sit flush left on the hero's elliptical sweep.
• Supporting actions: Top navigation hairline with three uppercase labels (Landing, Portfolio, Contact) and a gold underline that slides on hover.
• Domain entities: Profile (name, title, profile photograph).
• Component responsibilities: Hero stage (charcoal ground, oversized stacked name in Jost Light spanning columns 2–9, portrait rising from behind a pearl elliptical sweep cropped by the right viewport edge, single gold hairline arc tracing the sweep on load); fixed top navigation hairline; two anchored hero links.
• States: Loading — hero typography and portrait render immediately from static content; no data fetch. Empty — not applicable (content is fixed). Success — hero composition fully visible with name, title, portrait, and both links readable at all viewports. Error — not applicable (no remote data). Recovery — with prefers-reduced-motion, the static curved composition is shown with the gold arc already drawn.

Portfolio

• Information/state: Presents the owner's profile and background: name, title, profile photograph, education history (two entries with degree, institution, university, and years exactly as published, including 2015 - -), and languages (English, Hindi, Gujarati).
• Primary actions: Read the education timeline and languages; navigate to Contact to reach out.
• Supporting actions: Top navigation hairline; curved section transitions between profile, education, and languages.
• Domain entities: Profile; Education entry (degree, institution, university, years); Language (name).
• Component responsibilities: Profile block with duotone portrait in a tall curved aperture with gold hairline edge; Education rendered as a descending diagonal timeline with gold nodes and years in 14px Work Sans tabular figures; Languages displayed as three large pearl numerals (01/02/03) beside English, Hindi, Gujarati; full-width SVG arc section boundaries.
• States: Loading — static content renders immediately. Empty — not applicable. Success — all education entries and all three languages fully readable. Error — not applicable. Recovery — reduced-motion shows the static curved composition with all content in place.

Contact

• Information/state: Presents the owner's contact details: email umangsuthar97@gmail.com, Twitter @umangsuthar97, GitHub github.com/umangsuthar, set as a single gold-bordered curved panel.
• Primary actions: Activate the email address to compose a message in the visitor's mail client; activate the Twitter handle to open the Twitter profile; activate the GitHub address to open the GitHub profile.
• Supporting actions: Top navigation hairline; return to Portfolio.
• Domain entities: Contact details (email, Twitter, GitHub).
• Component responsibilities: Gold-bordered curved contact panel; three labelled contact links with gold hover treatment; metadata labels in muted color.
• States: Loading — static content renders immediately. Empty — not applicable. Success — all three contact details visible and activatable. Error — if the visitor's device has no handler for a link (e.g., no mail client), the address remains fully readable so it can be copied manually. Recovery — the visitor can copy the address text directly.

3. Functional Requirements

FR-1 — Present the owner's profile (explicit) As a Portfolio Visitor I should see Umang Suthar's name, the title "Full Stack Developer", and his profile photograph so that I immediately know whose portfolio I am viewing.

• Trigger: visitor opens Landing or Portfolio.
• Observable result: name, title, and profile photograph are displayed.
• Access: public, no identity.
• Failure/recovery: content is static; if the photograph fails to load, the name and title remain visible.
• Continuation: visitor proceeds to Portfolio or Contact.

FR-2 — Present education history (explicit) As a Portfolio Visitor I should see both education entries — B.E. in Information Technology at L.D. College Of Engineering, Gujarat Technological University, years 2015 - -; and Diploma in Information Technology at R.C. Technological Institute, Gujarat Technological University, years 2012 - 2015 — so that I can assess the owner's academic background.

• Trigger: visitor opens Portfolio.
• Observable result: both entries displayed with degree, institution, university, and years exactly as published, including the literal 2015 - -.
• Access: public.
• Failure/recovery: static content; no failure path.
• Continuation: visitor reads languages or moves to Contact.

FR-3 — Present languages (explicit) As a Portfolio Visitor I should see the languages English, Hindi, and Gujarati so that I know which languages the owner speaks.

• Trigger: visitor opens Portfolio.
• Observable result: three languages displayed, each with its numeral (01/02/03).
• Access: public.
• Continuation: visitor moves to Contact.

FR-4 — Present contact details (explicit) As a Portfolio Visitor I should see the owner's email umangsuthar97@gmail.com, Twitter @umangsuthar97, and GitHub github.com/umangsuthar so that I can reach out or follow up.

• Trigger: visitor opens Contact.
• Observable result: all three contact details displayed in the gold-bordered curved panel.
• Access: public.
• Failure/recovery: if a link cannot be opened by the device, the address text remains readable for manual copying.
• Continuation: visitor activates a contact link.

FR-5 — Act on contact details (explicit) As a Portfolio Visitor I should be able to activate the email address to compose a message, the Twitter handle to open the Twitter profile, and the GitHub address to open the GitHub profile so that I can contact or follow the owner through his existing channels.

• Trigger: visitor activates a contact link on Contact.
• Observable result: the visitor's mail client opens a compose window addressed to umangsuthar97@gmail.com, or the Twitter/GitHub profile opens in the browser.
• Access: public; the external destination is owned by the respective provider.
• Failure/recovery: if no handler exists, the address remains visible to copy.
• Continuation: the visitor completes outreach in the external client.

FR-6 — Navigate among pages (explicit) As a Portfolio Visitor I should be able to move between Landing, Portfolio, and Contact via the top navigation hairline so that I can reach any section directly.

• Trigger: visitor selects a navigation label.
• Observable result: the selected page is shown; the active label carries a gold underline.
• Access: public.
• Failure/recovery: navigation labels remain fully visible at all viewports.
• Continuation: visitor reads the selected page.

FR-7 — Reach the site without an account (explicit) As a Portfolio Visitor I should be able to view every page without signing in or creating an account so that the portfolio is freely accessible.

• Trigger: visitor opens any page.
• Observable result: content is shown immediately; no identity prompt appears.
• Access: public on all three pages.

4. User Personas

Portfolio Owner — Umang Suthar

• Product context: A Full Stack Developer whose professional identity is published at https://umangsuthar.github.io/; marine-portfolio is the new presentation of that identity.
• Primary goal: A published portfolio that accurately showcases his profile, education, languages, and contact details.
• Distinct responsibilities: Ensuring the presented profile, work, and contact information remain current and match the authoritative source. In the current scope this is satisfied by the site publishing exactly the source facts; there is no in-product editing surface.
• Inputs/decisions: The authoritative source content (name, title, photograph, education, languages, contact channels).
• Interactions with other participants: The owner is the subject whose details the Portfolio Visitor reads and acts on.
• Observable success: A visitor can read every published fact and reach the owner through the published channels.

Portfolio Visitor

• Product context: A recruiter, client, or peer who arrives at the site to evaluate the owner.
• Primary goal: Understand who Umang Suthar is, review his background, and find a way to get in touch.
• Distinct responsibilities: Reading the profile, education, and languages; deciding whether to reach out; choosing a contact channel (email, Twitter, or GitHub) and completing outreach in that external client.
• Inputs/decisions: Which page to view; which contact channel to use.
• Interactions with other participants: Reads the owner's published details; initiates contact with the owner through the owner's external channels.
• Observable success: The visitor understands the owner's profile and has opened a contact channel or copied the email address.

5. Core User Flows

Flow A — Visitor discovers the owner (Landing → Portfolio)

1. Visitor opens the site at the Landing page. The full-viewport charcoal hero shows "UMANG SUTHAR" stacked over two lines, "FULL STACK DEVELOPER" beneath in gold-tracked uppercase, and the duotone portrait rising from behind the pearl elliptical sweep on the right. The gold hairline arc traces the sweep once on load.
2. Visitor reads the name and title, then selects "View work" (anchored flush left on the curve) or the "Portfolio" navigation label.
3. The Portfolio page opens. The visitor reads the profile block, then the education timeline: B.E. in Information Technology — L.D. College Of Engineering, Gujarat Technological University, 2015 - -; Diploma in Information Technology — R.C. Technological Institute, Gujarat Technological University, 2012 - 2015.
4. The visitor reads the languages: 01 English, 02 Hindi, 03 Gujarati.
5. Continuation: the visitor selects "Contact" in the navigation to reach out.

Failure/recovery: if the portrait image fails to load, the name and title remain fully visible; the visitor can continue reading. With prefers-reduced-motion, the static curved composition is shown with all content in place.

Flow B — Visitor reaches out (Contact)

1. Visitor opens the Contact page (via navigation or "Get in touch" on Landing).
2. The gold-bordered curved panel shows the email umangsuthar97@gmail.com, Twitter @umangsuthar97, and GitHub github.com/umangsuthar.
3. Visitor decides on a channel and activates it:
   • Email → the visitor's mail client opens a compose window addressed to umangsuthar97@gmail.com; the visitor writes and sends the message in that client.
   • Twitter → the Twitter profile for @umangsuthar97 opens in the browser; the visitor follows or messages there.
   • GitHub → the GitHub profile github.com/umangsuthar opens; the visitor reviews repositories or follows there.
4. Observable result: the external client or provider surface opens with the correct destination.
5. Failure/recovery: if the device has no handler for a link, the address text remains fully readable so the visitor can copy it manually.
6. Continuation: the visitor completes outreach in the external channel; the owner receives it there.

Flow C — Owner's portfolio is published and current

1. The owner's details are published on the site exactly as recorded in the Source Content Inventory.
2. A visitor arrives anonymously and reads the profile, education, languages, and contact details.
3. Observable result: every published fact matches the authoritative source, including the literal 2015 - - years.
4. Continuation: the owner keeps the published content aligned with the authoritative source; no in-product editing step exists in the current scope.

6. Visuals Colors and Theme

The creative direction is authoritative for this section: Zaha Hadid — fluid parametric grandeur.

Headline: "Architecture for code — a portfolio that presents a full stack developer as a builder of structures."

Palette (dark mode)

Typography

• Headings: Jost — wide, light-weight display sans at 200–300 weight; uppercase for section markers; tight leading (−0.02em); generous tracking (+0.08em) on small-caps labels. The name is set enormous and airy so the letters read as drawn curves.
• Body: Work Sans.
• Scale: 1.5 modular for display; clamp sizes 44 / 64 / 96 / 128. Body 16–18px at 1.6 line-height. Labels 12px uppercase with 0.14em tracking. Education years in 14px Work Sans tabular figures.

Shape language: Sweeping continuous curves and asymmetric arcs; section boundaries cut by a single large elliptical sweep; panels with one curved corner (border-radius: 0 120px 0 0); thin 1px pearl hairlines tracing the curve; no sharp boxes and no rounded-everything. Gold appears as a hairline arc, never as a filled blob.

Layout: Off-centre editorial grid — a 12-column frame where the name block occupies columns 2–9 and the portrait is pushed to the right edge, cropped by the viewport. Sections separated by full-width curved SVG sweeps rather than flat rules. Education as a descending diagonal timeline; languages as three large pearl numerals beside their names. Generous negative space, asymmetric balance, one dominant element per viewport.

Imagery: The owner's profile photograph treated as an architectural subject — duotone charcoal-and-pearl, cropped into a tall curved aperture with a gold hairline edge. Background texture is a thin topographic contour line drawing in pearl at 8% opacity, evoking parametric surfaces. No stock people, no clip art, no gradient blobs.

Readability constraint: Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (e.g., clamp(...) with its mobile size) to fit; no other element covers any part of them. Imagery and decoration may be cropped, bled, or overlapped as the direction asks, provided they cover no readable text or control.

7. Signature Design Concept

The public entry (Landing) is a full-viewport charcoal stage composed as an architectural drawing:

• On the left, "UMANG SUTHAR" set in Jost 200 at clamp(44px, 9vw, 128px), stacked over two lines, spanning columns 2–9.
• Beneath it, "FULL STACK DEVELOPER" in 12px uppercase gold-tracked letters.
• A large pearl elliptical sweep cuts across the lower third of the viewport; the owner's duotone portrait rises from behind that curve on the right, cropped by the right viewport edge.
• A single gold hairline arc traces the sweep once on load.
• No centred headline, no subtext paragraph, no button in the middle. Two anchored links — "View work" and "Get in touch" — sit flush left on the curve like captions on an architectural drawing.
• A thin fixed pearl hairline at the top carries three uppercase navigation labels with a gold underline that slides on hover.

This concept recomposes only accepted content (name, title, portrait, navigation, and the two links to Portfolio and Contact) and introduces no new behavior or destination.

8. Interaction Model & Motion Direction

Interaction Model: Parallax Motion Tempo: cinematic Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the owner's duotone portrait rising from behind the pearl elliptical sweep, paired with the oversized stacked name.
• Input → transformation → outcome thesis: as the visitor scrolls, the portrait layer and the pearl typography move at different rates (scroll-linked parallax), so the portrait appears to emerge further from behind the curve while the name holds its architectural position; on load, a single gold hairline arc traces the hero curve once over 20 seconds and settles.
• Motion vocabulary: scroll-linked parallax between portrait layer and pearl typography; one slow 20s gold hairline arc traced once on load; section sweeps that unroll as the page scrolls.
• Composed first frame: charcoal ground; "UMANG SUTHAR" stacked left in Jost 200; "FULL STACK DEVELOPER" in gold-tracked uppercase beneath; pearl elliptical sweep across the lower third; portrait cropped at the right edge behind the curve; gold arc mid-trace; two anchored links flush left on the curve.
• Reduced-motion state: all motion snaps to the static curved composition — the gold arc is drawn in its final position, the portrait sits behind the curve, and every readable element and control is fully visible and usable.

9. Non-Functional Requirements

• Content fidelity (explicit): Portfolio content must reflect the details provided at https://umangsuthar.github.io/. Every fact in the Source Content Inventory is reproduced exactly, including the literal 2015 - - years for the B.E. entry.
• Public accessibility (explicit): All three pages are reachable without authentication; no identity, session, or account is required.
• Readability and containment (explicit, from creative direction): Readable text and controls remain whole and inside the viewport and their container at 375px, 768px, and 1280px; decoration may crop but never covers readable text or controls.
• Contrast (explicit, from creative direction): Body text on charcoal at ≥ 7:1 contrast; gold reserved for accents and large display only, never small body copy on charcoal.
• Reduced motion (explicit, from creative direction): All motion honors prefers-reduced-motion by snapping to the static curved composition.
• Static content delivery (required_inference): Because all content is fixed and public, pages render without a data fetch; there is no visitor-facing write path, and no application-owned persistent data is required for the current scope.

10. Tech Stack

• Frontend: React application UI (single-page application with three routes: Landing, Portfolio, Contact).
• Backend: shared FastAPI process for application APIs and domain modules (reused for any feature APIs; no visitor-facing write APIs are required by the current scope).
• Database: MariaDB, provisioned as part of the scaffold; no application-owned domain entities are required by the current scope.
• Containerization: Docker / docker-compose for the frontend, backend, and database services.
• Typography: Jost (headings) and Work Sans (body), loaded as web fonts.
• Motion: CSS and SVG animation for the gold hairline arc and section sweeps; scroll-linked parallax for the hero layers; prefers-reduced-motion media query for the static fallback.

11. Assumptions and Constraints

• Content source constraint (explicit): The site's profile, work, and contact details are taken from https://umangsuthar.github.io/; no other content source is authoritative.
• Literal value preservation (explicit): The B.E. years are published as 2015 - - and are preserved exactly; the missing end year is not filled in.
• No owner editing surface (required_inference): The current scope provides no in-product editing; the owner's responsibility of keeping the portfolio current is met by the published content matching the authoritative source.
• No visitor accounts (explicit): No sign-in, registration, or session is required or provided.
• No hosted messaging (required_inference): Contact is handled entirely through the owner's external channels (email, Twitter, GitHub); the site does not host a form, inbox, or message store.
• External destinations (explicit): Email composition, Twitter, and GitHub are owned by their respective providers/clients; the site only links to them.
• Database provisioned but unused for domain data (required_inference): MariaDB is part of the scaffold but the current scope defines no application-owned entities; it does not justify authentication or an ER model.
• Visual direction (explicit): The Zaha Hadid–inspired dark palette, Jost/Work Sans typography, curved shape language, off-centre editorial layout, and cinematic-but-restrained motion are binding; the generic indigo/blue-on-white SaaS template is forbidden.

12. Glossary

• Portfolio Owner: Umang Suthar, the subject of the portfolio.
• Portfolio Visitor: A recruiter, client, or peer who reads the portfolio and may reach out.
• Landing: The public entry page presenting the hero composition and links to Portfolio and Contact.
• Portfolio: The page presenting the owner's profile, education, and languages.
• Contact: The page presenting the owner's email, Twitter, and GitHub details.
• Education entry: A record with degree, institution, university, and years.
• Language: One of English, Hindi, or Gujarati, displayed with a numeral.
• Pearl elliptical sweep: The large curved SVG form that cuts across the hero and section boundaries.
• Gold hairline arc: The single gold accent line that traces the hero curve on load.
• 2015 - -: The literal published years for the B.E. entry, preserved as-is.