sadiqbceg-rgb/portfolio-v0

Purpose and runtime

A fully static Next.js App Router portfolio. It renders a single, design-led personal site with self-hosted fonts, generated SVG artwork, optional externally handled contact submission, and no required backend or runtime data service. Primary app entry points are src/app/layout.tsx and src/app/page.tsx.

Page composition

src/app/page.tsx composes the one-page experience from section components; reordering/removing sections happens here. Major sections include hero, work/projects, experience, skills, about, contact, and footer:

• src/components/Hero.tsx

• src/components/Work.tsx

• src/components/Experience.tsx

• src/components/Contact.tsx

• src/components/Footer.tsx

Navigation and section-state behavior are isolated in src/components/Nav.tsx and src/hooks/use-active-section.ts.

Content boundary

src/content/site.ts is the canonical content/configuration model: identity, copy, CTA links, hero choice, project/work data, jobs, skills, footer, and contact endpoint. Presentation components consume this model rather than embedding editable copy. Work filters are derived from item tags; work imagery selects generated art or optional files under public/work/.

The contact form is intentionally disabled unless contact.formEndpoint is configured. Submission then crosses the only application-level external-service boundary to Formspree, Basin, Web3Forms, or a custom endpoint.

Visual system and assets

Global design tokens and reusable CSS component classes live in src/app/globals.css; this is the visual-system authority for colors, typography, spacing, radii, cards, buttons, inputs, and reduced CSS motion. Font declarations are self-hosted in src/app/fonts.css, backed by public/fonts/.

Generated imagery is implemented as local SVG/React composition rather than fetched media:

• src/components/Artwork.tsx

• src/components/HeroScene.tsx

• src/components/StickyMedia.tsx

Optional real portfolio images are static public assets under public/work/; the résumé is served from public/resume.pdf.

Interaction and motion layer

Client-side interaction is component-local: project filtering and cards are centered in src/components/Work.tsx; mobile/active navigation is in src/components/Nav.tsx; shared scroll entry animation is centralized in src/components/Reveal.tsx.

Vendored Animate UI primitives provide unstyled motion while retaining the repository’s CSS system:

• src/components/animate-ui/primitives/effects/fade.tsx

• src/components/animate-ui/primitives/effects/magnetic.tsx

• src/components/animate-ui/primitives/effects/tilt.tsx

• src/components/animate-ui/components/backgrounds/stars.tsx

These components use JavaScript reduced-motion handling and intersection visibility support from src/hooks/use-is-in-view.ts; static fallbacks avoid hidden content or active motion for reduced-motion users.

Build, preview, and deployment

Next.js builds the static site for Node or static hosting; no database, auth, API layer, or server-rendered business workflow is indicated. next.config.mjs defines framework behavior. Metadata/Open Graph setup belongs to src/app/layout.tsx and src/app/opengraph-image.alt.txt.

A custom portable-preview pipeline produces a standalone hydrated HTML artifact:

• scripts/build-preview.mjs

• scripts/make-assets.mjs

• scripts/lib/browser.mjs

It builds/export assets, then inlines CSS, JS, fonts, and assets as data URIs for offline sharing. Deployment is compatible with Vercel or any static/Node host; identity.url in src/content/site.ts supplies the canonical public URL for metadata.