2RE
53ca1fb834
Static HTML/CSS/JS portfolio for the design studio 2RE03: locally vendored Bootstrap 5.3.3, self-hosted Inter + Space Grotesk fonts, six pages, Collins-style scroll-snap carousels, a case-studies index with 10 detail pages, and a Web3Forms contact form.
92 lines
4.7 KiB
Markdown
92 lines
4.7 KiB
Markdown
# 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.
|