127 lines
8.1 KiB
Markdown
127 lines
8.1 KiB
Markdown
# 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
|
|
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.
|