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

Tech Context - 2RE03 Portfolio Site

Technologies, development setup, constraints, dependencies, and tool usage. Last updated: 2026-09-10.

Current State

A working static-site scaffold exists at the repo root:

index.html  work.html  about.html  services.html  contact.html  case-studies.html
case-studies/*.html   (10 per-project case study detail pages)
css/bootstrap.min.css   css/style.css
js/bootstrap.bundle.min.js   js/main.js   js/case-studies.js   js/carousel.js
fonts/Inter-latin.woff2   fonts/SpaceGrotesk-latin.woff2
img/  46 files: 45 WebP plus `printtiresad.png` (10 case-study hero backgrounds,
      8 homepage collage tiles, 28 project/screenshot images)

No build step and no package manager - it is plain static HTML/CSS/JS.

Reference Stack Seen (in the original refrence/ build)

refrence/ (temporary source material) was removed on 2026-09-10 before the first commit, and is backed up outside the repo at /home/torrey/2RE03-unused-assets-backup/refrence/.

• Hand-authored HTML.
• Bootstrap 5 (css/bootstrap.min.css, js/popper.min.js, js/bootstrap.min.js)
  • referenced via relative paths that are not present in this repo.
• A custom stylesheet (css/style.css) and a custom carousel script (js/series-carousel.js) - also not present here.
• Inline JSON <script type="application/json"> blocks feeding the carousel.

Technologies Used

• HTML5 - hand-authored; six pages; semantic landmarks; skip link.
• CSS - Bootstrap 5.3.3 (vendored) + custom css/style.css.
• JavaScript - Bootstrap bundle + js/main.js (form handling) + js/case-studies.js (case-study hover preview) + js/carousel.js (scroll-snap carousels).
• Fonts - Inter + Space Grotesk (variable woff2), self-hosted in fonts/.
• Theme - palette centered on #2ee666, defined as tokens in :root in css/style.css.
• Forms - Web3Forms (AJAX submit via fetch).

Development Setup

• No build step. Serve statically, e.g. python3 -m http.server from the repo root, then open http://localhost:8000/.

Version Control

• Git repo, default branch main.
• Remote origin: ssh://git@git.2re.top:22222/2re/2RE03-Design.git (Forgejo at git.2re.top, SSH on the non-standard port 22222). Auth is by the SSH key ~/.ssh/id_ed25519; the server returns "does not provide shell access", which is normal for Forgejo.
• .gitignore ignores OS/editor cruft only. There is no refrence/ entry because that folder was removed.

Image Pipeline

• Every production image is WebP except img/printtiresad.png, which stays PNG because every WebP encode of it came out larger (the PNG is only 73 KB).
• Encoding recipe (cwebp): long side capped at 1600px, -q 82 for opaque images, -q 90 -alpha_q 100 for anything with transparency.
• Result: img/ went from ~20 MB to 3.2 MB (85% smaller) with no visible loss (measured SSIM distortion 0.0003 to 0.018, where 0 is identical).
• The original JPEG/PNG files are kept outside the repo at /home/torrey/2RE03-unused-assets-backup/img-webp-originals/.
• Most <img> tags declare the display frame, not the file's native size: the carousel cards are a 4:3 box (.carousel__media, object-fit: cover) so they say 800x600, and the hover-preview thumbnails say 88x66. Those attributes are deliberate and are not expected to match the file's own dimensions.

Deployment

• The site is published (hosted by the user). The live URL is not written down anywhere in this repo yet, so record it here once confirmed.
• No build step, so a deploy is a straight copy of the repo root. Uploading the whole folder also puts memory-bank/, .clinerules/ and TODO.md on the server; that is intentional, not accidental.

Dependencies

• Bootstrap 5.3.3 CSS + JS bundle - vendored locally (no CDN / no runtime).
• Web3Forms - external form endpoint (https://api.web3forms.com/submit) with a public access key stored in contact.html.
• No package manager or lockfile.

Technical Constraints

• refrence/ was removed before the first commit; keep the site free of any references to it (all production assets live under img/).
• Output should be lightweight and static unless a decision says otherwise.
• Work data should have a single source of truth.

Tool Usage Patterns

• Never git commit or git push without explicit approval from the user. Make the edits, verify them, then stop and report; leave the work uncommitted until told otherwise. Approval is per action, not standing.
• Follow project conventions once established; verify each change (validate HTML, check asset paths, check responsive behavior) before reporting done.