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.
2.7 KiB
2.7 KiB
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.htmlframes 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
- Hero / landing (name + tagline, tone-reference inspired).
- Case Studies (Collins-style typographic index + detail pages).
- Work / portfolio (category galleries).
- About (company story; no individual attributions).
- Services (web design first, then broader design capabilities).
- Contact.