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.
61 lines
2.7 KiB
Markdown
61 lines
2.7 KiB
Markdown
# Product Context - 2RE03 Portfolio Site
|
|
|
|
> Why this project exists, how it should work, and the experience it should
|
|
> create. Last updated: 2026-09-10.
|
|
|
|
## Why It Exists
|
|
2RE03 needs a public, client-facing portfolio. Today the material lives in loose
|
|
reference files. A dedicated site gives the company a single place to present
|
|
work, explain capabilities, and be contacted.
|
|
|
|
## Problems It Solves
|
|
- Prospective clients can't currently browse the body of work in one place.
|
|
- The breadth of capability (not just web design) isn't communicated.
|
|
- There's no clear path from "interested" to "contact us".
|
|
|
|
## Audience
|
|
Prospective clients who need design work - especially web design - across a wide
|
|
range of industries.
|
|
|
|
## How It Should Work (UX Goals)
|
|
- Quickly communicate: who 2RE03 is, what it does, and what its work looks like.
|
|
- Gallery-forward browsing by category, with short captions.
|
|
- Web design leads, but all five categories are visible and credible.
|
|
- Fast, lightweight, readable on mobile and desktop.
|
|
|
|
## Tone & Voice (IMPORTANT - anchors all copy)
|
|
|
|
**Current direction (updated 2026-09-10):** more **professional**, and it should
|
|
read as a **team** ("we") rather than a lone freelancer - while keeping an edge.
|
|
The original avocado-hipster tagline (from `refrence/index.html`) is **retired**
|
|
(no longer used on the homepage).
|
|
|
|
Carry through:
|
|
- **Confident and professional**, but never stiff or corporate.
|
|
- **Team voice** - "we", a studio/team.
|
|
- **A little edgy and wry.** Dry humor; willing to poke fun at design-industry
|
|
clichés - but the joke never gets in the way of the point.
|
|
- **Concise.** Short, punchy lines.
|
|
- **Substance underneath.** `refrence/2re03text.html` frames each project as a
|
|
*functional problem* with a purpose ("Each model was built for practical
|
|
use."). Blend a wry headline with plainspoken, craft-focused body copy.
|
|
- **Avoid** corporate buzzword soup and overblown sales language.
|
|
- **No em dashes.** They make copy read as AI-generated. Use commas, colons, or
|
|
parentheses, or restructure the sentence instead.
|
|
|
|
**Voice summary:** *Sharp, professional, team-voiced, with a wink.*
|
|
|
|
## Content Model (proposed)
|
|
- **Categories / "series":** Logos, Web Design, App Design, Print Design, 3D
|
|
Modeling, Words.
|
|
- **Per work item:** image + optional short caption/title.
|
|
- **Per category:** title, one-line caption, image gallery, and a short
|
|
tone-matched blurb.
|
|
|
|
## Proposed Site Sections
|
|
1. Hero / landing (name + tagline, tone-reference inspired).
|
|
2. Case Studies (Collins-style typographic index + detail pages).
|
|
3. Work / portfolio (category galleries).
|
|
4. About (company story; no individual attributions).
|
|
5. Services (web design first, then broader design capabilities).
|
|
6. Contact.
|