2RE03-Design/memory-bank/systemPatterns.md

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.