94 lines
4.6 KiB
Markdown
94 lines
4.6 KiB
Markdown
# 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.
|