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.
70 lines
3.1 KiB
Markdown
70 lines
3.1 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 images (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.
|
|
|
|
## 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
|
|
- Follow project conventions once established; verify each change (validate HTML,
|
|
check asset paths, check responsive behavior) before reporting done.
|