System Patterns - 2RE03 Portfolio Site

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

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.
Carousel captions (work page galleries): every .carousel__item is a <figure> holding a .carousel__media frame plus a .carousel__caption (Name<span>Format</span>): the piece's name in semibold ink, the format on a muted second line. Captions are always visible, never hover-only, because hover does not exist on touch. The text describes what is actually in the image (or the client and format, where those are known) and never carries the author byline. The second line states what 2RE03 did on the piece, not the file's medium, so "(10 + 2) x 5" reads "Designed and coded" and "Mehavior" reads "UX and UI". Sub-lines are sentence case (the page's other examples: "Identity", "Online store", "Interior model"), the one exception being the three print ads, which the user specified as "Print Ad" and which were kept verbatim. A piece is filed under the category of its deliverable, not of the paper it landed on: the Urban Moto earplug article and the YLEM Journal cover sit in Words even though both exist as printed pages. A section's blurb may claim only what the gallery under it shows, so capability lists (flyers, postcards, business cards, letterhead) stay in the closing paragraph as capability, never as a description of the images. A caption's sub-line names the artifact type, so the Dat Art title slide reads "Presentation for Motion Labs" rather than a mark. js/carousel.js measures item width and position only, so captions cannot affect the step or snap maths.
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).
Workflow band (services): a three-card comparison - Old workflow / AI-assisted workflow / Finished result - where the outer cards use .card-service and the middle card is the dark one (bg-ink text-cream), so the new step reads at a glance. Sits on .bg-brand-soft right after the numbered Process cards, which it deliberately does not duplicate (Process says what happens; this says how the making got faster).
Question-list CTA (homepage): .cta-questions is a .list-unstyled list at .lead size holding one client question per line, closing the homepage just above the Start a project button. Spacing comes from a single rule (.cta-questions li + li { margin-top: 0.35rem; }).
Head metadata block (all 16 pages): three icon links (favicon.svg, favicon.ico, apple-touch-icon.png), a rel="canonical", the full og:* set (type, site_name, title, description, url, image, image:width, image:height, image:alt) and twitter:card. Canonical and og:url/og:image are absolute on https://2re03.com/ (.html paths, bare root for the homepage), while asset hrefs stay relative (img/... at the root, ../img/... in case-studies/). Titles and descriptions are reused from each page's own <title> and meta description, so there is still only one source of truth 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 (web design lead, other services, process, workflow), 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: work.html renders each category as a carousel of captioned .carousel__item figures (name + format under the image); the case-study detail pages still use plain .card-work image grids.
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 + 3 icon
                           assets (favicon.svg, favicon.ico, apple-touch-icon.png)
                           + og-image.png, the 1200x630 social card)

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

Live work.html counts (2026-09-22): web 5, logos 7, app 3, print 5, 3d 4, words 2. The Urban Moto earplug feature moved out of the Urban Moto case study into Print, so no image appears twice on the page.

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

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

8.1 KiB Raw Blame History