# System Patterns - 2RE03 Portfolio Site

> Architecture, key technical decisions, patterns, component relationships, and
> critical paths. Last updated: 2026-09-10.

## Status
**Implemented (v0 scaffold).** The patterns below are reflected in the built
files, not just proposed.

## Architecture
- **Static site:** pre-authored HTML/CSS/JS served as files, no server runtime.
- **Content-driven galleries:** each category ("series") = a titled section with
  a one-line caption, an image gallery, and a short blurb.
- **Single source of work data:** image lists per category defined once (e.g., a
  JS/JSON data structure) and rendered into galleries, avoiding duplication.
- **Reusable structure:** shared header/main/footer across the site.

## Key Technical Decisions
| Decision | Status | Notes |
|---|---|---|
| Static, dependency-light output | ✅ Done | Hand-coded HTML/CSS/JS; no build step. |
| Bootstrap + custom CSS | ✅ Done | Bootstrap 5.3.3 vendored; themed in `css/style.css`. |
| Gallery rendering | ✅ Done | Static responsive image grids (no JS needed); content lives in the HTML. |
| Fonts self-hosted | ✅ Done | Inter + Space Grotesk `woff2` in `fonts/`. |

## Design Patterns In Use
- **Series/gallery pattern** (from `refrence/2re03text.html`): a
  `.series-carousel` element configured via `data-*` attributes and populated
  from inline `<script type="application/json">` lists.
- **Case-study list pattern (Collins-inspired):** a `.case-list` of `.case-row`
  links - big-type project name + category meta. On hover-capable pointers,
  `js/case-studies.js` shows a cursor-following `.case-preview` image; on touch /
  small screens / no-JS, inline `.case-row__thumb` thumbnails are shown instead.
- **Carousel pattern (Collins-inspired):** `.carousel > .carousel__track` uses
  native CSS `scroll-snap-type: x mandatory` with `.carousel__item` cards
  (rounded `.carousel__media`, `object-fit: cover`). `js/carousel.js` adds
  prev/next buttons (disabled at the ends), keyboard arrows, and pointer
  drag-to-scroll. Works without JS via native swipe/trackpad scrolling.
- **Hero pattern:** `.hero` is the brand green gradient plus a faint dot grid (no
  photo), applied site-wide. The homepage adds `.hero--collage`: an absolutely
  positioned grid of work thumbnails behind a translucent green overlay
  (`::after`), with the hero content lifted on `z-index: 2`. Case study pages add
  `.hero--image`, which puts that project's image behind the green wash via the
  `--hero-image` custom property (set inline per page).
- **Component reuse** via shared header/footer.

## Components & Relationships
- **Site shell:** shared header (dark navbar + skip link) → `<main>` → footer,
  duplicated across the five static pages (no build-time includes).
- **Pages:** `index` (hero, selected work, services overview, case-studies list,
  CTA), `case-studies` (typographic index), `work` (six category galleries),
  `about`, `services`, `contact` (form).
- **Case study detail pages:** `case-studies/{slug}.html` - hero image + "The
  problem" + "What we did", linking back to the index and the portfolio.
- **Galleries:** each category = heading + caption + a Bootstrap grid of images.
- **Form:** `contact.html` → `js/main.js` → Web3Forms API.

## File Structure
```
index.html work.html about.html services.html contact.html case-studies.html
case-studies/*.html        (case study detail pages)
css/style.css              (+ vendored bootstrap.min.css)
js/main.js  js/case-studies.js  js/carousel.js   (+ vendored bootstrap.bundle.min.js)
fonts/*.woff2
img/*                      (23 reference designs + 7 site screenshots)
```

## Content/Data Structures (reference)
Category keys and image counts (source: `refrence/img/` + the carousel JSON in
`refrence/2re03text.html`); full inventory in `reference-materials.md`.
- `logos`: 6 images
- `web`: 5 images
- `print`: 4 images
- `3d`: 4 images
- `written`: 3 images

## Design Direction
- **Palette centered on `#2ee666`** (bright green) accents on a near-black ink
  base (`#0e1511`). Legible deep green (`#0e7a3a`) for text on light, bright
  `#2ee666` for fills/borders, and a soft green tint (`#e9fbef`) for section
  backgrounds. The hero is a green gradient over the full-bleed portrait with
  dark ink text.
- Strong typography (Space Grotesk headings / Inter body), generous whitespace,
  gallery-forward layout.
- Headline focus on web design, backed by the full breadth of design work.

## Critical Implementation Paths
1. Decide tech stack + styling.
2. Define the site shell (header/footer/nav) and the page/section list.
3. Assemble work data (categories + images + captions).
4. Build sections in order: Hero → Work → About → Services → Contact.
5. Verify responsive behavior and asset resolution at each step.