2re/2RE03-Design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit: 2RE03 portfolio site

Browse source 
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.
This commit is contained in:
2RE 2026-09-10 19:03:33 +08:00
commit 53ca1fb834
79 changed files with 3892 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
.clinerules/memory-bank.md Normal file
View file

@ -0,0 +1,67 @@
# Cline's Memory Bank
I am Cline, an expert software engineer with a unique characteristic: my memory resets completely between sessions. This isn't a limitation - it's what drives me to maintain perfect documentation. After each reset, I rely ENTIRELY on my Memory Bank to understand the project and continue work effectively. I MUST read ALL memory bank files at the start of EVERY task - this is not optional.
## Memory Bank Structure
The Memory Bank consists of core files and optional context files, all in Markdown format. Files build upon each other in a clear hierarchy:
### Core Files (Required)
1. `projectbrief.md`
- Foundation document that shapes all other files
- Created at project start if it doesn't exist
- Defines core requirements and goals
- Source of truth for project scope
2. `productContext.md`
- Why this project exists
- Problems it solves
- How it should work
- User experience goals
3. `activeContext.md`
- Current work focus
- Recent changes
- Next steps
- Active decisions and considerations
- Important patterns and preferences
- Learnings and project insights
4. `systemPatterns.md`
- System architecture
- Key technical decisions
- Design patterns in use
- Component relationships
- Critical implementation paths
5. `techContext.md`
- Technologies used
- Development setup
- Technical constraints
- Dependencies
- Tool usage patterns
6. `progress.md`
- What works
- What's left to build
- Current status
- Known issues
- Evolution of project decisions
### Additional Context
Create additional files/folders within memory-bank/ when they help organize:
- Complex feature documentation
- Integration specifications
- API documentation
- Testing strategies
- Deployment procedures
## Documentation Updates
Memory Bank updates occur when:
1. Discovering new project patterns
2. After implementing significant changes
3. When user requests with **update memory bank** (MUST review ALL files)
4. When context needs clarification
REMEMBER: After every memory reset, I begin completely fresh. The Memory Bank is my only link to previous work. It must be maintained with precision and clarity, as my effectiveness depends entirely on its accuracy.

4
.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
# OS / editor cruft
.DS_Store
Thumbs.db
*.swp

171
about.html Normal file
View file

@ -0,0 +1,171 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About | 2RE03</title>
<meta name="description" content="About 2RE03: a design studio with three decades of experience across web, print, logos, 3D modeling, and writing.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="work.html">Work</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">About</p>
<h1>About 2RE03</h1>
<p class="hero-lead mb-0">A design studio with a long bench and a short attention span for buzzwords.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-5">
<div class="col-lg-7">
<div class="divider-brand mb-4"></div>
<h2 class="mb-3">The short version</h2>
<p class="lead text-body-secondary">2RE03 designs, writes, and builds, mostly for the web, never only
for the web.</p>
<p>We've been at this for over thirty years, which is long enough to have strong opinions about kerning
and short enough to still enjoy a good napkin sketch. Web design is the main event. But a studio that
only makes websites leaves a lot of useful skills on the table.</p>
<p>So we don't. Logos, print, 3D models, documentation, editorial: if a project needs making, we're
interested in the problem it's trying to solve.</p>
</div>
<div class="col-lg-5">
<div class="card card-service p-4 h-100">
<h3 class="h5">What that experience looks like</h3>
<p class="text-body-secondary mb-0">Three decades spanning logo design, graphic design, web design
and development, photography, 3D modeling, book publishing, editing, technical writing, and
advertising, for clients across a wide range of industries.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section bg-brand-soft">
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<h3 class="h5">Real-world mileage</h3>
<p class="text-body-secondary mb-0">Work from this studio has been art-directed for a print magazine,
taught in a university graphic design program, and shipped as technical documentation for Silicon
Valley technology companies.</p>
</div>
<div class="col-md-4">
<h3 class="h5">Seen in the wild</h3>
<p class="text-body-secondary mb-0">Our work has appeared in magazines and across the web, from small
client projects to our own, designed end to end in-house. Including the site you're reading now.</p>
</div>
<div class="col-md-4">
<h3 class="h5">Own the execution</h3>
<p class="text-body-secondary mb-0">Concept and execution live in the same room, so nothing gets lost
in translation between the idea and the build.</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-5">
<div class="col-lg-6">
<h2 class="mb-3">How we work</h2>
<p>Figure out the actual problem. Make something that solves it. Then make it look like it was always
supposed to look that way.</p>
<p>We plan for materials and constraints before we get precious about a layout. If a project needs
words, we write them. If it needs a model, we build it. If it needs a website, we hand-code it and
make sure it holds up on whatever screen shows up next.</p>
</div>
<div class="col-lg-6">
<h2 class="mb-3">What we won't do</h2>
<ul class="list-unstyled mb-0">
<li class="mb-2 d-flex gap-2"><span class="text-brand fw-bold" aria-hidden="true">&times;</span>
<span>Hand you a mood board and a shrug.</span></li>
<li class="mb-2 d-flex gap-2"><span class="text-brand fw-bold" aria-hidden="true">&times;</span>
<span>Call it "storytelling" and charge extra for it.</span></li>
<li class="mb-2 d-flex gap-2"><span class="text-brand fw-bold" aria-hidden="true">&times;</span>
<span>Pretend a logo is a brand strategy.</span></li>
<li class="d-flex gap-2"><span class="text-brand fw-bold" aria-hidden="true">&times;</span>
<span>Use the word "leverage" as a verb. (Much.)</span></li>
</ul>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="bg-ink text-cream rounded-4 p-4 p-md-5">
<div class="row align-items-center g-3">
<div class="col-lg-8">
<h2 class="mb-2">Sound like your kind of studio?</h2>
<p class="mb-0 text-cream opacity-75">Tell us about the project, good, bad, or barely sketched.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a class="btn btn-brand btn-lg" href="contact.html">Start a project</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="index.html">Home</a></li>
<li><a href="case-studies.html">Case Studies</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

179
case-studies.html Normal file
View file

@ -0,0 +1,179 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Case Studies | 2RE03</title>
<meta name="description" content="Case studies from 2RE03: web design, logos, print, 3D modeling, and written work.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Studies</p>
<h1>Work with a reason to exist.</h1>
<p class="hero-lead mb-0">Every project starts as a problem. Here's a look at a few of them, and what we
did with what we were handed.</p>
</div>
</section>
<section class="section">
<div class="container">
<ul class="case-list">
<li class="case-item">
<a class="case-row" href="case-studies/mask-aid-project.html" data-case-image="img/site-mask-aid-project.jpg">
<img class="case-row__thumb" src="img/site-mask-aid-project.jpg" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Mask Aid Project</span>
<span class="case-row__meta">Web Design</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/one-womans-art-and-magic.html" data-case-image="img/site-one-womans-art-and-magic.jpg">
<img class="case-row__thumb" src="img/site-one-womans-art-and-magic.jpg" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">1 Woman's Art and Magic</span>
<span class="case-row__meta">Book Design &amp; Web</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/sams-rules.html" data-case-image="img/writtensamsrules.png">
<img class="case-row__thumb" src="img/writtensamsrules.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Sam's Rules</span>
<span class="case-row__meta">Book Design &amp; Web</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/mehavior.html" data-case-image="img/webmehavior.png">
<img class="case-row__thumb" src="img/webmehavior.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Mehavior</span>
<span class="case-row__meta">App Design &amp; Identity</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/jensens-red-barn.html" data-case-image="img/site-jensens-red-barn.jpg">
<img class="case-row__thumb" src="img/site-jensens-red-barn.jpg" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Jensen's Red Barn</span>
<span class="case-row__meta">Web Design</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/upscale-food-cart.html" data-case-image="img/3dcart.png">
<img class="case-row__thumb" src="img/3dcart.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Upscale Food Cart</span>
<span class="case-row__meta">3D Modeling</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/silver-lining.html" data-case-image="img/logosilverlining.png">
<img class="case-row__thumb" src="img/logosilverlining.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Silver Lining</span>
<span class="case-row__meta">Logo &amp; Identity</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/victoria-fuller.html" data-case-image="img/webvictoria.png">
<img class="case-row__thumb" src="img/webvictoria.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Victoria Fuller</span>
<span class="case-row__meta">Web Design</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/urban-moto.html" data-case-image="img/printtiresad.png">
<img class="case-row__thumb" src="img/printtiresad.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Urban Moto</span>
<span class="case-row__meta">Print Design</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/teach-each-other-ai.html" data-case-image="img/site-teach-each-other-ai.jpg">
<img class="case-row__thumb" src="img/site-teach-each-other-ai.jpg" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Teach Each Other AI</span>
<span class="case-row__meta">Web Design</span>
</a>
</li>
</ul>
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mt-4 pt-3 border-top">
<p class="mb-0 text-body-secondary">Want the whole archive, images and all?</p>
<a class="btn btn-outline-brand" href="work.html">See the full portfolio</a>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="bg-ink text-cream rounded-4 p-4 p-md-5">
<div class="row align-items-center g-3">
<div class="col-lg-8">
<h2 class="mb-2">Have a problem of your own?</h2>
<p class="mb-0 text-cream opacity-75">Bring us the messy version. We like the messy version.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a class="btn btn-brand btn-lg" href="contact.html">Start a project</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="index.html">Home</a></li>
<li><a href="case-studies.html">Case Studies</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<img class="case-preview" data-case-preview alt="" aria-hidden="true">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
<script src="js/case-studies.js"></script>
</body>
</html>

117
case-studies/jensens-red-barn.html Normal file
View file

@ -0,0 +1,117 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jensen's Red Barn | Case Study | 2RE03</title>
<meta name="description" content="Jensen's Red Barn case study: Web design by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-jensens-red-barn.jpg')">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
<h1>Jensen's Red Barn</h1>
<p class="hero-lead mb-0">An antiques shop's home on the web, and the story behind the barn.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/site-jensens-red-barn.jpg" alt="Jensen's Red Barn homepage" width="1200" height="900">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>An antiques business carrying on Grandma Dorothy's legacy needed somewhere simple and welcoming to
send people: a clear path to the shop and the archive, the story behind the barn, and Dorothy's own
scrapbook, which had never left the family.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Site design and build</li>
<li>About and "Our Story"</li>
<li>Scrapbook slideshow of Grandma Dorothy's book, brought online</li>
<li>Etsy shop and Flickr archive links</li>
<li>Social media setup</li>
</ul>
<div class="d-flex flex-wrap gap-2 mt-2">
<a class="btn btn-brand" href="https://jensensredbarn.com/" target="_blank" rel="noopener">Visit the live site<span class="visually-hidden"> (opens in a new tab)</span></a>
<a class="btn btn-outline-brand" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

116
case-studies/mask-aid-project.html Normal file
View file

@ -0,0 +1,116 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mask Aid Project | Case Study | 2RE03</title>
<meta name="description" content="Mask Aid Project (M.A.P.) case study: website, video, and crowdfunding campaign by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-mask-aid-project.jpg')">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
<h1>Mask Aid Project</h1>
<p class="hero-lead mb-0">A website, videos, and a crowdfunding push built to explain a device and rally people behind it.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/site-mask-aid-project.jpg" alt="Mask Aid Project homepage" width="1200" height="900">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>A volunteer team had built a device to sanitize and renew masks, and the idea began in Chinese. The
project had to explain it clearly enough that a stranger would understand the mission and know how to
help or buy in.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Video production</li>
<li>Crowdfunding campaign</li>
<li>Copywriting (all the text)</li>
<li>Translation from Chinese</li>
</ul>
<div class="d-flex flex-wrap gap-2 mt-2">
<a class="btn btn-brand" href="https://maskaidproject.com/" target="_blank" rel="noopener">Visit the live site<span class="visually-hidden"> (opens in a new tab)</span></a>
<a class="btn btn-outline-brand" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

112
case-studies/mehavior.html Normal file
View file

@ -0,0 +1,112 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mehavior | Case Study | 2RE03</title>
<meta name="description" content="Mehavior case study: app interface, identity, and pitch material by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-mehavior.jpg'); --hero-position: center top">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; App Design &amp; Identity</p>
<h1>Mehavior</h1>
<p class="hero-lead mb-0">App interface, logo, and pitch material for a product that didn't exist yet.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/webmehavior.png" alt="Mehavior app interface design" width="1000" height="800">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>The Mehavior app had to look real before it was built. That meant an interface, a mark, and
promotional material convincing enough to put in front of investors.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Logo and identity</li>
<li>App interface and button design</li>
<li>Promotional material</li>
<li>Assets for the investor pitch</li>
</ul>
<a class="btn btn-outline-brand mt-2" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

115
case-studies/one-womans-art-and-magic.html Normal file
View file

@ -0,0 +1,115 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>1 Woman's Art and Magic | Case Study | 2RE03</title>
<meta name="description" content="1 Woman's Art and Magic case study: a two-book art series and website for painter Joanna Signer, by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-one-womans-art-and-magic.jpg')">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Book Design &amp; Web</p>
<h1>1 Woman's Art and Magic</h1>
<p class="hero-lead mb-0">A two-book art series for painter Joanna Signer, and the website that helps sell it.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/site-one-womans-art-and-magic.jpg" alt="1 Woman's Art and Magic homepage" width="1200" height="900">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>An artist with decades of work had two books' worth of paintings to present: the books themselves,
and a website that could sell them to the right people.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Design of the two-book series</li>
<li>Cover and interior layout</li>
<li>Artist portfolio website</li>
<li>Pages to showcase and sell the books</li>
</ul>
<div class="d-flex flex-wrap gap-2 mt-2">
<a class="btn btn-brand" href="http://1wam.com/" target="_blank" rel="noopener">Visit the live site<span class="visually-hidden"> (opens in a new tab)</span></a>
<a class="btn btn-outline-brand" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

118
case-studies/sams-rules.html Normal file
View file

@ -0,0 +1,118 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sam's Rules | Case Study | 2RE03</title>
<meta name="description" content="Sam's Rules case study: Design and writing by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-sams-rules.jpg')">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Book Design &amp; Web</p>
<h1>Sam's Rules</h1>
<p class="hero-lead mb-0">A project that needed words and design at the same time.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/writtensamsrules.png" alt="Sam's Rules book layout, design, and editing project" width="2048" height="2048">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>Writing and layout were the same problem here. The book needed words, pictures, and a set of tools
readers could actually use, so we kept all of it in one pair of hands.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Editing and structure</li>
<li>Layout and typesetting</li>
<li>Cover and interior design</li>
<li>Illustrations</li>
<li>Downloadable companion content</li>
<li>Companion website</li>
<li>Print-ready output</li>
</ul>
<div class="d-flex flex-wrap gap-2 mt-2">
<a class="btn btn-brand" href="https://samsrules.com/" target="_blank" rel="noopener">Visit the live site<span class="visually-hidden"> (opens in a new tab)</span></a>
<a class="btn btn-outline-brand" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

113
case-studies/silver-lining.html Normal file
View file

@ -0,0 +1,113 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Silver Lining | Case Study | 2RE03</title>
<meta name="description" content="Silver Lining case study: Logo &amp; identity by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-silver-lining.jpg')">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Logo &amp; Identity</p>
<h1>Silver Lining</h1>
<p class="hero-lead mb-0">A mark that had to carry a name and a feeling, and bring the right clients through the door.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/logosilverlining.png" alt="Silver Lining logo and identity project" width="1854" height="996">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>Some names hand you an image; this one did. The challenge was using it without turning the logo into
a cliché, keeping the feeling, losing the pun. It also had a job to do: help a high-end retreat
attract the right clients.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Mark development and refinement</li>
<li>Typography and lockups</li>
<li>Scaling and legibility tests</li>
<li>Versions for different contexts</li>
</ul>
<a class="btn btn-outline-brand mt-2" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

114
case-studies/teach-each-other-ai.html Normal file
View file

@ -0,0 +1,114 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teach Each Other AI | Case Study | 2RE03</title>
<meta name="description" content="Teach Each Other AI case study: Web design by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-teach-each-other-ai.jpg')">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
<h1>Teach Each Other AI</h1>
<p class="hero-lead mb-0">A community site that answers "when and where" in one glance.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/site-teach-each-other-ai.jpg" alt="Teach Each Other AI homepage" width="1200" height="900">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>A recurring monthly meetup needed a home that could answer the two questions everyone asks (<em>when and where</em>) instantly, then archive every session as it happened.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Homepage with a live countdown</li>
<li>When &amp; Where, with directions</li>
<li>Events &amp; recordings archive</li>
<li>Community and contact links</li>
</ul>
<div class="d-flex flex-wrap gap-2 mt-2">
<a class="btn btn-brand" href="https://teacheachotherai.com/" target="_blank" rel="noopener">Visit the live site<span class="visually-hidden"> (opens in a new tab)</span></a>
<a class="btn btn-outline-brand" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

105
case-studies/upscale-food-cart.html Normal file
View file

@ -0,0 +1,105 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upscale Food Cart | Case Study | 2RE03</title>
<meta name="description" content="Upscale Food Cart case study: a 3D design proposal by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-upscale-food-cart.jpg')">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; 3D Modeling</p>
<h1>Upscale Food Cart</h1>
<p class="hero-lead mb-0">A design proposal for a food cart that wanted to move upmarket.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/3dcart.png" alt="Upscale Food Cart 3D design proposal" width="1024" height="754">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>The food cart sold fine where it was, but to break into fancier markets and earn more per sale, it needed to look like it belonged there. We put together a design proposal around that goal.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>3D design proposal</li>
<li>Form, finish, and material direction</li>
<li>Positioning for higher-end markets</li>
<li>Renders for presentation</li>
</ul>
<div class="d-flex flex-wrap gap-2 mt-2">
<a class="btn btn-outline-brand" href="../case-studies.html">All case studies</a>
<a class="btn btn-outline-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

126
case-studies/urban-moto.html Normal file
View file

@ -0,0 +1,126 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Urban Moto | Case Study | 2RE03</title>
<meta name="description" content="Urban Moto case study: print design and art direction for a motorcycle magazine, by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-urban-moto.jpg')">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Print Design</p>
<h1>Urban Moto</h1>
<p class="hero-lead mb-0">Art direction, editorial, and print design for a motorcycle magazine.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<div class="row row-cols-1 row-cols-sm-2 g-3">
<div class="col">
<figure class="card-work card-work--frame mb-0">
<img src="../img/printtiresad.png" alt="Urban Moto print advertisement" width="800" height="600">
</figure>
</div>
<div class="col">
<figure class="card-work card-work--frame mb-0">
<img src="../img/printkincaidad.jpg" alt="Urban Moto print advertisement" width="800" height="600">
</figure>
</div>
<div class="col">
<figure class="card-work card-work--frame mb-0">
<img src="../img/printmacchiariniad.png" alt="Urban Moto print advertisement" width="800" height="600">
</figure>
</div>
<div class="col">
<figure class="card-work card-work--frame mb-0">
<img src="../img/writtenearplugs.jpg" alt="Urban Moto print advertisement" width="800" height="600">
</figure>
</div>
</div>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>Print lives or dies on the page. Urban Moto needed a full editorial pipeline (guest articles, photography, ad submissions, and custom client ads) that all felt like one publication, on a
production schedule that doesn't wait for inspiration.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Art direction</li>
<li>Guest articles</li>
<li>Managing photography and art submissions</li>
<li>Custom ad design for clients</li>
<li>Pre-press and production</li>
</ul>
<div class="d-flex flex-wrap gap-2 mt-2">
<a class="btn btn-outline-brand" href="../case-studies.html">All case studies</a>
<a class="btn btn-outline-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

113
case-studies/victoria-fuller.html Normal file
View file

@ -0,0 +1,113 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Victoria Fuller | Case Study | 2RE03</title>
<meta name="description" content="Victoria Fuller case study: Web Design by 2RE03.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="../index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="../index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="../case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="../work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="../about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="../services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="../contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact hero--image" style="--hero-image: url('../img/hero-victoria-fuller.jpg'); --hero-position: center 10%">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Case Study &middot; Web Design</p>
<h1>Victoria Fuller</h1>
<p class="hero-lead mb-0">A website for Victoria Fuller, a Playboy Bunny, and the only one with the rights to use the Playboy logo.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-7">
<figure class="card-work mb-0">
<img src="../img/webvictoria.png" alt="Victoria Fuller web design project" width="2060" height="1266">
</figure>
</div>
<div class="col-lg-5">
<h2 class="h4">The problem</h2>
<p>A story this specific needs room to breathe. Victoria Fuller is a Playboy Bunny and the only one with the rights to use the Playboy logo, but the material was buried and the structure wasn't
helping. Visitors had to work to find the point, and the design competed with the content instead of
serving it.</p>
<h2 class="h4 mt-4">What we did</h2>
<ul>
<li>Content hierarchy and page structure</li>
<li>Responsive, hand-coded layout</li>
<li>Type and color system</li>
<li>Performance and accessibility passes</li>
</ul>
<a class="btn btn-outline-brand mt-2" href="../case-studies.html">All case studies</a>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">See more of the work.</p>
<a class="btn btn-brand" href="../work.html">Full portfolio</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="../index.html">Home</a></li>
<li><a href="../case-studies.html">Case Studies</a></li>
<li><a href="../work.html">Work</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../services.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="../contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

144
contact.html Normal file
View file

@ -0,0 +1,144 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact | 2RE03</title>
<meta name="description" content="Contact 2RE03 about a web design, logo, print, 3D modeling, or written project.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Contact</p>
<h1>Let's make something.</h1>
<p class="hero-lead mb-0">Tell us what you're working on. The form goes straight to us.</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="row g-5">
<div class="col-lg-7">
<div class="contact-panel p-4 p-md-5">
<h2 class="h4 mb-1">Start a project</h2>
<p class="text-body-secondary">Fields marked <span class="text-brand" aria-hidden="true">*</span>
<span class="visually-hidden">asterisk</span> are required.</p>
<form id="contactForm" class="needs-validation" action="https://api.web3forms.com/submit"
method="POST" novalidate>
<input type="hidden" name="access_key" value="15eda3b3-cbe1-444e-a5d8-abe3cd75da01">
<input type="hidden" name="from_name" value="2RE03 Website">
<!-- Honeypot: hidden from real users, catches bots -->
<input type="checkbox" name="botcheck" class="d-none" tabindex="-1" autocomplete="off" aria-hidden="true">
<div class="mb-3">
<label for="contactName" class="form-label">Name <span class="text-brand" aria-hidden="true">*</span></label>
<input type="text" class="form-control" id="contactName" name="name" required autocomplete="name">
<div class="invalid-feedback">Please enter your name.</div>
</div>
<div class="mb-3">
<label for="contactEmail" class="form-label">Email <span class="text-brand" aria-hidden="true">*</span></label>
<input type="email" class="form-control" id="contactEmail" name="email" required autocomplete="email"
inputmode="email">
<div class="invalid-feedback">Please enter a valid email address.</div>
</div>
<div class="mb-3">
<label for="contactSubject" class="form-label">Subject <span class="text-muted fw-normal">(optional)</span></label>
<input type="text" class="form-control" id="contactSubject" name="subject">
</div>
<div class="mb-3">
<label for="contactMessage" class="form-label">Message <span class="text-brand" aria-hidden="true">*</span></label>
<textarea class="form-control" id="contactMessage" name="message" rows="6" required
placeholder="What are you making? Any deadline or budget in mind?"></textarea>
<div class="invalid-feedback">Please enter a message.</div>
</div>
<div id="formStatus" class="alert mt-3 mb-0" role="status" aria-live="polite" tabindex="-1" hidden></div>
<button type="submit" class="btn btn-brand btn-lg mt-3">Send message</button>
</form>
</div>
</div>
<div class="col-lg-5">
<h2 class="h4">What to include</h2>
<p class="text-body-secondary">The more context, the faster we can respond:</p>
<ul>
<li>A sentence or two about the project</li>
<li>Rough timeline, if you have one</li>
<li>Budget range, if it's fixed</li>
<li>Links to anything you like: yours, or someone else's</li>
</ul>
<hr>
<h2 class="h4">Response time</h2>
<p class="text-body-secondary mb-0">We read everything that comes in and aim to reply within a couple
of days. If it looks like a fit, we'll suggest a quick call.</p>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="index.html">Home</a></li>
<li><a href="case-studies.html">Case Studies</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="index.html">Back to home</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

6
css/bootstrap.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

433
css/style.css Normal file
View file

@ -0,0 +1,433 @@
/* ==========================================================================
2RE03 custom styles
Layered on top of Bootstrap 5.3 (loaded first).
Brand: green (#2ee666) accents on a near-black ink base.
========================================================================== */
/* --- Local (vendored) fonts, no external requests ------------------------ */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/Inter-latin.woff2") format("woff2");
}
@font-face {
font-family: "Space Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../fonts/SpaceGrotesk-latin.woff2") format("woff2");
}
/* --- Brand tokens -------------------------------------------------------- */
:root {
/* Palette centered on #2ee666 */
--brand-green: #2ee666;
--brand-green-rgb: 46, 230, 102;
--brand-green-dark: #17b34f; /* hover / darker */
--brand-green-deep: #0e7a3a; /* legible green for text on light */
--brand-soft: #e9fbef; /* soft green tint for sections */
--brand-ink: #0e1511; /* near-black base */
--brand-ink-2: #182019;
--brand-cream: #f2fbf5; /* light text on dark */
--brand-cream-rgb: 242, 251, 245;
--brand-muted: #5c6b60;
--bs-primary: var(--brand-green);
--bs-primary-rgb: var(--brand-green-rgb);
--bs-link-color: var(--brand-green-deep);
--bs-link-hover-color: #0a5c2b;
--bs-link-color-rgb: 14, 122, 58;
--bs-link-hover-color-rgb: 10, 92, 43;
}
/* --- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--brand-ink);
background-color: #fff;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5,
.display-1, .display-2, .display-3, .display-4,
.navbar-brand {
font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
font-weight: 700;
letter-spacing: -0.01em;
}
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible {
outline: 3px solid var(--brand-green);
outline-offset: 2px;
}
/* --- Buttons & accents --------------------------------------------------- */
.btn-brand {
--bs-btn-bg: var(--brand-green);
--bs-btn-border-color: var(--brand-green);
--bs-btn-color: var(--brand-ink);
--bs-btn-hover-bg: var(--brand-green-dark);
--bs-btn-hover-border-color: var(--brand-green-dark);
--bs-btn-hover-color: var(--brand-ink);
--bs-btn-active-bg: var(--brand-green-deep);
--bs-btn-active-border-color: var(--brand-green-deep);
--bs-btn-active-color: #fff;
--bs-btn-focus-shadow-rgb: var(--brand-green-rgb);
font-weight: 600;
}
.btn-outline-brand {
--bs-btn-color: var(--brand-green-deep);
--bs-btn-border-color: var(--brand-green-deep);
--bs-btn-hover-bg: var(--brand-green);
--bs-btn-hover-border-color: var(--brand-green);
--bs-btn-hover-color: var(--brand-ink);
--bs-btn-active-bg: var(--brand-green-dark);
--bs-btn-active-border-color: var(--brand-green-dark);
--bs-btn-active-color: var(--brand-ink);
font-weight: 600;
}
.text-brand { color: var(--brand-green-deep) !important; }
.bg-ink { background-color: var(--brand-ink) !important; }
.bg-brand-soft { background-color: var(--brand-soft) !important; }
.eyebrow {
font-family: "Space Grotesk", sans-serif;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.8rem;
font-weight: 600;
color: var(--brand-green-deep);
}
.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
/* --- Header -------------------------------------------------------------- */
.site-header {
background-color: var(--brand-ink);
border-bottom: 3px solid var(--brand-green);
}
.site-header .navbar { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.site-header .navbar-brand {
font-size: 1.5rem;
letter-spacing: 0.02em;
color: var(--brand-green) !important;
font-weight: 700;
}
.site-header .navbar-brand:hover { color: #fff !important; }
.site-header .nav-link {
color: rgba(var(--brand-cream-rgb), 0.82);
font-weight: 500;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus { color: var(--brand-cream); }
.site-header .nav-link.active {
color: var(--brand-green);
border-bottom: 2px solid var(--brand-green);
}
.site-header .navbar-toggler { border-color: rgba(var(--brand-cream-rgb), 0.35); }
.site-header .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(var(--brand-green-rgb), 0.5); }
/* --- Hero ---------------------------------------------------------------- */
.hero {
position: relative;
color: var(--brand-ink);
background-color: var(--brand-green);
/* Brand green with a faint dot grid. No photo. */
background-image:
linear-gradient(120deg, rgba(46, 230, 102, 0.92) 0%, rgba(46, 230, 102, 0.78) 55%, rgba(23, 179, 79, 0.92) 100%),
radial-gradient(rgba(14, 21, 17, 0.16) 1.2px, transparent 1.6px);
background-size: cover, 18px 18px;
background-position: center, 0 0;
background-repeat: no-repeat, repeat;
padding: 6rem 0 5rem;
}
.hero h1 { font-size: clamp(2.75rem, 9vw, 5.5rem); line-height: 1; margin-bottom: 1rem; }
.hero .hero-lead { font-size: clamp(1.15rem, 2.6vw, 1.6rem); max-width: 44ch; }
.hero--compact { padding: 4rem 0 3rem; }
.hero--compact h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
/* Homepage: a low-contrast collage of real work behind the green wash. */
.hero--collage { overflow: hidden; }
.hero--collage .hero__collage {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 4px;
}
.hero--collage .hero__collage img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero--collage::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(120deg, rgba(46, 230, 102, 0.88) 0%, rgba(46, 230, 102, 0.76) 55%, rgba(23, 179, 79, 0.88) 100%);
}
.hero--collage > .container { position: relative; z-index: 2; }
@media (max-width: 767.98px) {
.hero--collage .hero__collage { grid-template-columns: repeat(2, 1fr); }
}
/* Case study pages: the project's own image behind the green wash. */
.hero--image {
background-color: var(--brand-ink);
background-image:
linear-gradient(100deg, rgba(46, 230, 102, 0.94) 0%, rgba(46, 230, 102, 0.86) 42%, rgba(23, 179, 79, 0.64) 100%),
var(--hero-image, none);
background-size: cover, cover;
background-position: center, var(--hero-position, center);
background-repeat: no-repeat, no-repeat;
}
/* --- Work cards / galleries --------------------------------------------- */
.card-work {
display: block;
border: 0;
border-radius: 0.5rem;
overflow: hidden;
}
/* The image defines its own frame, so there are no letterbox bands. */
.card-work img {
display: block;
width: 100%;
height: auto;
}
/* Fixed frame, for tidy grids of mixed shapes. */
.card-work--frame img {
aspect-ratio: 4 / 3;
object-fit: cover;
background-color: #e7f2ea;
transition: transform 0.35s ease;
}
.card-work--frame:hover img { transform: scale(1.04); }
.card-service {
border: 1px solid rgba(0, 0, 0, 0.08);
border-left: 4px solid var(--brand-green);
border-radius: 0.375rem;
height: 100%;
}
.card-service:hover { box-shadow: 0 0.5rem 1rem rgba(var(--brand-green-rgb), 0.2); }
.gallery-caption {
font-size: 0.9rem;
font-style: italic;
color: var(--brand-muted);
border-left: 4px solid var(--brand-green);
padding-left: 0.85rem;
}
/* --- Footer -------------------------------------------------------------- */
.site-footer {
background-color: var(--brand-ink);
color: rgba(var(--brand-cream-rgb), 0.72);
margin-top: 4rem;
border-top: 3px solid var(--brand-green);
}
.site-footer a { color: rgba(var(--brand-cream-rgb), 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--brand-green); text-decoration: underline; }
.site-footer .footer-brand {
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--brand-green);
}
/* --- Forms --------------------------------------------------------------- */
.form-control:focus,
.form-check-input:focus {
border-color: var(--brand-green);
box-shadow: 0 0 0 0.25rem rgba(var(--brand-green-rgb), 0.25);
}
.form-label { font-weight: 600; }
.contact-panel {
border: 1px solid rgba(0, 0, 0, 0.08);
border-top: 4px solid var(--brand-green);
border-radius: 0.5rem;
}
/* --- Utilities ----------------------------------------------------------- */
.divider-brand {
height: 4px;
width: 64px;
background: var(--brand-green);
border-radius: 2px;
}
.link-plain { color: inherit; text-decoration: none; }
.text-cream { color: var(--brand-cream) !important; }
.eyebrow-ink { color: var(--brand-ink) !important; }
/* --- Case studies (Collins-style typographic index) ---------------------- */
.case-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.case-item { border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.case-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 0.25rem;
text-decoration: none;
color: var(--brand-ink);
transition: color 0.2s ease, padding-left 0.2s ease;
}
.case-row__name {
flex: 1 1 auto;
min-width: 0;
font-family: "Space Grotesk", sans-serif;
font-weight: 700;
font-size: clamp(1.6rem, 5vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.case-row__meta {
flex: 0 0 auto;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--brand-muted);
white-space: nowrap;
}
.case-row__thumb {
display: none;
flex: 0 0 auto;
width: 88px;
height: 66px;
object-fit: cover;
border-radius: 0.375rem;
background-color: #e7f2ea;
}
.case-row:hover,
.case-row:focus-visible {
color: var(--brand-green-deep);
padding-left: 1rem;
}
/* Cursor-following preview image (desktop, hover-capable pointers) */
.case-preview {
position: fixed;
top: 0;
left: 0;
width: clamp(180px, 22vw, 300px);
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 0.5rem;
background-color: #e7f2ea;
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(0.96);
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 1080;
}
.case-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 767.98px) {
.case-row { flex-wrap: wrap; }
.case-row__thumb { display: block; }
.case-row__meta { flex-basis: 100%; margin-top: 0.25rem; }
}
/* --- Carousel (Collins-style scroll-snap gallery) ------------------------ */
.carousel { position: relative; }
.carousel__track {
display: flex;
gap: 1rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.carousel__track:focus-visible {
outline: 3px solid var(--brand-green);
outline-offset: 4px;
}
.carousel__item {
flex: 0 0 auto;
width: clamp(230px, 78vw, 340px);
scroll-snap-align: start;
}
.carousel__media {
border-radius: 1rem;
overflow: hidden;
aspect-ratio: 4 / 3;
background-color: #e7f2ea;
}
.carousel__media img {
display: block;
width: 100%;
height: 100%;
/* Cropped to fill the rounded frame, the Collins look. */
object-fit: cover;
transition: transform 0.4s ease;
-webkit-user-drag: none;
}
.carousel__item:hover .carousel__media img { transform: scale(1.04); }
.carousel__nav {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 1rem;
}
.carousel__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 50%;
background-color: #fff;
color: var(--brand-ink);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.carousel__btn:hover:not(:disabled),
.carousel__btn:focus-visible:not(:disabled) {
background-color: var(--brand-green);
border-color: var(--brand-green);
}
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
.carousel + p { margin-top: 1.5rem; }
@media (max-width: 575.98px) {
.section { padding: 3rem 0; }
.hero { padding: 4rem 0 3.5rem; }
}

BIN
fonts/Inter-latin.woff2 Normal file
View file

Binary file not shown.

BIN
fonts/SpaceGrotesk-latin.woff2 Normal file
View file

Binary file not shown.

BIN
img/2plus5times3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
img/3d78williams.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 452 KiB

BIN
img/3dabandoned.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
img/3dcart.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
img/3dcoop.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 280 KiB

BIN
img/collage-1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
img/collage-2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
img/collage-3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
img/collage-4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
img/collage-5.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
img/collage-6.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
img/collage-7.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
img/collage-8.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/hero-jensens-red-barn.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
img/hero-mask-aid-project.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
img/hero-mehavior.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
img/hero-one-womans-art-and-magic.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
img/hero-sams-rules.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
img/hero-silver-lining.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
img/hero-teach-each-other-ai.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
img/hero-upscale-food-cart.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
img/hero-urban-moto.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
img/hero-victoria-fuller.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
img/logoargent.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
img/logobackass.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 377 KiB

BIN
img/logodrinking.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
img/logodrive.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 343 KiB

BIN
img/logosilverlining.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
img/logoylem.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
img/printkincaidad.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 674 KiB

BIN
img/printmacchiariniad.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 473 KiB

BIN
img/printtiresad.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
img/printylemcover.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 996 KiB

BIN
img/site-cool-crap-from-china.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
img/site-jensens-red-barn.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 279 KiB

BIN
img/site-mask-aid-project.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
img/site-one-womans-art-and-magic.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
img/site-teach-each-other-ai.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
img/web50shadesof2048.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
img/webdatavisart.jpeg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
img/webmehavior.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 461 KiB

BIN
img/websinosalescopy.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
img/webvictoria.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
img/writtenearplugs.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2 MiB

BIN
img/writtensamsrules.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
img/writtenstructions.jpg Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 373 KiB

302
index.html Normal file
View file

@ -0,0 +1,302 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2RE03 | Web design, and everything else</title>
<meta name="description" content="2RE03 is a design team for the web, and everything around it: websites, logos, print, 3D modeling, and editorial.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<!-- Hero -->
<section class="hero hero--collage">
<div class="hero__collage" aria-hidden="true">
<img src="img/collage-1.jpg" alt="" width="480" height="360">
<img src="img/collage-2.jpg" alt="" width="480" height="360">
<img src="img/collage-3.jpg" alt="" width="480" height="360">
<img src="img/collage-4.jpg" alt="" width="480" height="360">
<img src="img/collage-5.jpg" alt="" width="480" height="360">
<img src="img/collage-6.jpg" alt="" width="480" height="360">
<img src="img/collage-7.jpg" alt="" width="480" height="360">
<img src="img/collage-8.jpg" alt="" width="480" height="360">
</div>
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Design studio</p>
<h1>2RE03</h1>
<p class="hero-lead mb-3">A design team for the web, and everything around it. We take the work
seriously, and ourselves considerably less.</p>
<p class="mb-4 col-lg-8">Websites are where we live. They're also just the start: logos, print, 3D
models, writing, and the occasional object that refuses to fit in a category.</p>
<div class="d-flex flex-wrap gap-2">
<a class="btn btn-dark btn-lg" href="work.html">See the work</a>
<a class="btn btn-outline-dark btn-lg" href="contact.html">Start a project</a>
</div>
</div>
</section>
<!-- Selected work -->
<section class="section">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
<div>
<p class="eyebrow mb-2">Selected work</p>
<h2 class="mb-0">A few things we've made.</h2>
</div>
<a class="btn btn-outline-brand" href="work.html">View the full portfolio</a>
</div>
<div class="carousel" data-carousel>
<div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Selected work">
<a class="carousel__item" href="work.html" aria-label="View web design work">
<div class="carousel__media"><img src="img/webvictoria.png" alt="Web design project preview" loading="lazy" width="800" height="600"></div>
</a>
<a class="carousel__item" href="work.html" aria-label="View app design work">
<div class="carousel__media"><img src="img/webmehavior.png" alt="App interface design preview" loading="lazy" width="800" height="600"></div>
</a>
<a class="carousel__item" href="work.html" aria-label="View print design work">
<div class="carousel__media"><img src="img/printkincaidad.jpg" alt="Print advertisement design preview" loading="lazy" width="800" height="600"></div>
</a>
<a class="carousel__item" href="work.html" aria-label="View 3D modeling work">
<div class="carousel__media"><img src="img/3d78williams.jpg" alt="3D modeling project preview" loading="lazy" width="800" height="600"></div>
</a>
<a class="carousel__item" href="work.html" aria-label="View logo design work">
<div class="carousel__media"><img src="img/logoargent.png" alt="Logo design preview" loading="lazy" width="800" height="600"></div>
</a>
<a class="carousel__item" href="work.html" aria-label="View logo design work">
<div class="carousel__media"><img src="img/webdatavisart.jpeg" alt="Logo design preview" loading="lazy" width="800" height="600"></div>
</a>
</div>
<div class="carousel__nav">
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">&rsaquo;</span></button>
</div>
</div>
</div>
</section>
<!-- What we do -->
<section class="section bg-brand-soft">
<div class="container">
<div class="row mb-4">
<div class="col-lg-8">
<p class="eyebrow mb-2">What we do</p>
<h2 class="mb-3">Web Design Is Only the Beginning</h2>
<p class="lead text-body-secondary mb-0">It's where we start, not where we stop. Everything else a
project might need, from logos and print to 3D models and writing, comes off the same bench.</p>
</div>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">Web Design</h3>
<p class="mb-0 text-body-secondary">Hand-coded, well-structured sites that load before your coffee
cools. WordPress when it fits, custom when it doesn't, plus the hosting, domains, and upkeep that
keep it running.</p>
</div>
</div>
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">Logos &amp; Identity</h3>
<p class="mb-0 text-body-secondary">Marks for doctors, artists, and the occasional private eye.
Restraint when it's warranted; stranger symbols when the brief asks for them.</p>
</div>
</div>
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">Print Design</h3>
<p class="mb-0 text-body-secondary">Ads, flyers, postcards, and covers. We sort out materials and
production before falling in love with a layout.</p>
</div>
</div>
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">3D Modeling</h3>
<p class="mb-0 text-body-secondary">Practical models built around assembly logic and real materials. Things that actually have to stand up.</p>
</div>
</div>
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">Words</h3>
<p class="mb-0 text-body-secondary">Sales copy, technical documentation, and long-form writing we
designed and wrote, because a good idea still needs a good sentence.</p>
</div>
</div>
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">Something else</h3>
<p class="mb-0 text-body-secondary">Not on the list? Describe it badly, send a napkin sketch. We'll
figure out the shape of it together.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Case studies -->
<section class="section">
<div class="container">
<div class="row mb-4">
<div class="col-lg-8">
<p class="eyebrow mb-2">Case Studies</p>
<h2 class="mb-3">Work with a reason to exist.</h2>
<p class="lead text-body-secondary mb-0">Every project starts as a problem. Hover a name to peek, or
dive into the full set.</p>
</div>
</div>
<ul class="case-list">
<li class="case-item">
<a class="case-row" href="case-studies/mask-aid-project.html" data-case-image="img/site-mask-aid-project.jpg">
<img class="case-row__thumb" src="img/site-mask-aid-project.jpg" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Mask Aid Project</span>
<span class="case-row__meta">Web Design</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/one-womans-art-and-magic.html" data-case-image="img/site-one-womans-art-and-magic.jpg">
<img class="case-row__thumb" src="img/site-one-womans-art-and-magic.jpg" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">1 Woman's Art and Magic</span>
<span class="case-row__meta">Book Design &amp; Web</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/sams-rules.html" data-case-image="img/writtensamsrules.png">
<img class="case-row__thumb" src="img/writtensamsrules.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Sam's Rules</span>
<span class="case-row__meta">Book Design &amp; Web</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/mehavior.html" data-case-image="img/webmehavior.png">
<img class="case-row__thumb" src="img/webmehavior.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Mehavior</span>
<span class="case-row__meta">App Design &amp; Identity</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/jensens-red-barn.html" data-case-image="img/site-jensens-red-barn.jpg">
<img class="case-row__thumb" src="img/site-jensens-red-barn.jpg" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Jensen's Red Barn</span>
<span class="case-row__meta">Web Design</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/upscale-food-cart.html" data-case-image="img/3dcart.png">
<img class="case-row__thumb" src="img/3dcart.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Upscale Food Cart</span>
<span class="case-row__meta">3D Modeling</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/silver-lining.html" data-case-image="img/logosilverlining.png">
<img class="case-row__thumb" src="img/logosilverlining.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Silver Lining</span>
<span class="case-row__meta">Logo &amp; Identity</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/victoria-fuller.html" data-case-image="img/webvictoria.png">
<img class="case-row__thumb" src="img/webvictoria.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Victoria Fuller</span>
<span class="case-row__meta">Web Design</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/urban-moto.html" data-case-image="img/printtiresad.png">
<img class="case-row__thumb" src="img/printtiresad.png" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Urban Moto</span>
<span class="case-row__meta">Print Design</span>
</a>
</li>
<li class="case-item">
<a class="case-row" href="case-studies/teach-each-other-ai.html" data-case-image="img/site-teach-each-other-ai.jpg">
<img class="case-row__thumb" src="img/site-teach-each-other-ai.jpg" alt="" loading="lazy" width="88" height="66">
<span class="case-row__name">Teach Each Other AI</span>
<span class="case-row__meta">Web Design</span>
</a>
</li>
</ul>
<div class="mt-4">
<a class="btn btn-brand" href="case-studies.html">All case studies</a>
</div>
</div>
</section>
<!-- Call to action -->
<section class="section">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-8">
<div class="divider-brand mx-auto mb-4"></div>
<h2 class="mb-3">Got something that needs making?</h2>
<p class="lead text-body-secondary mb-4">A website, a logo, a poster, a shelf that holds pretzels.
Tell us what you're picturing.</p>
<a class="btn btn-brand btn-lg" href="contact.html">Start a project</a>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="index.html">Home</a></li>
<li><a href="case-studies.html">Case Studies</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<img class="case-preview" data-case-preview alt="" aria-hidden="true">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
<script src="js/case-studies.js"></script>
<script src="js/carousel.js"></script>
</body>
</html>

7
js/bootstrap.bundle.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

156
js/carousel.js Normal file
View file

@ -0,0 +1,156 @@
/* ==========================================================================
2RE03 carousel
Collins-style horizontal scroll-snap gallery.
The scrolling itself is native CSS (scroll-snap) + touch/trackpad, so it
works without JavaScript. This script adds:
- prev/next buttons (disabled at the ends)
- keyboard arrow support (when the track is focused)
- drag-to-scroll for mouse/pointer devices
========================================================================== */
(function () {
"use strict";
var roots = document.querySelectorAll("[data-carousel]");
if (!roots.length) {
return;
}
function gapSize(track) {
var cs = window.getComputedStyle(track);
var g = parseFloat(cs.columnGap || cs.gap);
return isNaN(g) ? 0 : g;
}
Array.prototype.forEach.call(roots, function (root) {
var track = root.querySelector("[data-carousel-track]");
if (!track) {
return;
}
var prev = root.querySelector("[data-carousel-prev]");
var next = root.querySelector("[data-carousel-next]");
function step() {
var item = track.querySelector(".carousel__item");
if (!item) {
return track.clientWidth * 0.8;
}
return item.getBoundingClientRect().width + gapSize(track);
}
function move(dir) {
track.scrollBy({ left: dir * step(), behavior: "smooth" });
}
if (prev) {
prev.addEventListener("click", function () { move(-1); });
}
if (next) {
next.addEventListener("click", function () { move(1); });
}
track.addEventListener("keydown", function (event) {
if (event.key === "ArrowRight") {
event.preventDefault();
move(1);
} else if (event.key === "ArrowLeft") {
event.preventDefault();
move(-1);
}
});
function syncButtons() {
var max = track.scrollWidth - track.clientWidth - 1;
if (prev) {
prev.disabled = track.scrollLeft <= 0;
}
if (next) {
next.disabled = track.scrollLeft >= max;
}
}
track.addEventListener("scroll", syncButtons, { passive: true });
window.addEventListener("resize", syncButtons);
syncButtons();
/* --- Drag to scroll (mouse / pen; touch scrolls natively) ------------- */
var dragging = false;
var moved = false;
var startX = 0;
var startLeft = 0;
track.addEventListener("dragstart", function (event) {
event.preventDefault();
});
track.addEventListener("pointerdown", function (event) {
if (event.pointerType === "touch") {
return;
}
dragging = true;
moved = false;
startX = event.clientX;
startLeft = track.scrollLeft;
});
track.addEventListener("pointermove", function (event) {
if (!dragging) {
return;
}
var dx = event.clientX - startX;
if (!moved && Math.abs(dx) > 6) {
moved = true;
track.classList.add("is-dragging");
try { track.setPointerCapture(event.pointerId); } catch (err) {}
}
if (moved) {
event.preventDefault();
track.scrollLeft = startLeft - dx;
}
});
function snapToNearest() {
var items = track.querySelectorAll(".carousel__item");
if (!items.length) {
return;
}
var trackLeft = track.getBoundingClientRect().left;
var best = null;
var bestDist = Infinity;
Array.prototype.forEach.call(items, function (item) {
var dist = Math.abs(item.getBoundingClientRect().left - trackLeft);
if (dist < bestDist) {
bestDist = dist;
best = item;
}
});
if (best) {
track.scrollBy({ left: best.getBoundingClientRect().left - trackLeft, behavior: "smooth" });
}
}
function endDrag(event) {
if (!dragging) {
return;
}
dragging = false;
track.classList.remove("is-dragging");
try { track.releasePointerCapture(event.pointerId); } catch (err) {}
if (moved) {
snapToNearest();
}
}
track.addEventListener("pointerup", endDrag);
track.addEventListener("pointercancel", endDrag);
/* Swallow the click that follows a drag (e.g. on linked cards). */
track.addEventListener("click", function (event) {
if (moved) {
event.preventDefault();
event.stopPropagation();
moved = false;
}
}, true);
});
})();

68
js/case-studies.js Normal file
View file

@ -0,0 +1,68 @@
/* ==========================================================================
2RE03 case studies index
Cursor-following preview image for the typographic case-study list.
Progressive enhancement: without JS (or on touch/small screens) each row
shows its own inline thumbnail instead.
========================================================================== */
(function () {
"use strict";
var preview = document.querySelector("[data-case-preview]");
var rows = document.querySelectorAll("[data-case-image]");
if (!preview || !rows.length) {
return;
}
// Only run the floating preview for hover-capable, fine-pointer devices.
if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
return;
}
var frame = null;
var pointerX = 0;
var pointerY = 0;
function place() {
frame = null;
preview.style.left = pointerX + "px";
preview.style.top = pointerY + "px";
}
function onMove(event) {
pointerX = event.clientX;
pointerY = event.clientY;
if (!frame) {
frame = window.requestAnimationFrame(place);
}
}
function show(source) {
if (source) {
preview.src = source;
}
preview.classList.add("is-visible");
}
function hide() {
preview.classList.remove("is-visible");
}
Array.prototype.forEach.call(rows, function (row) {
var source = row.getAttribute("data-case-image");
row.addEventListener("mouseenter", function () { show(source); });
row.addEventListener("mousemove", onMove);
row.addEventListener("mouseleave", hide);
// Keyboard users get the preview pinned to the row.
row.addEventListener("focus", function () {
var box = row.getBoundingClientRect();
pointerX = box.left + box.width / 2;
pointerY = box.top + box.height / 2;
place();
show(source);
});
row.addEventListener("blur", hide);
});
})();

95
js/main.js Normal file
View file

@ -0,0 +1,95 @@
/* ==========================================================================
2RE03 site scripts
- Footer year
- Contact form: client-side validation + AJAX submit to Web3Forms
========================================================================== */
(function () {
"use strict";
/* --- Footer year ------------------------------------------------------- */
document.querySelectorAll("[data-year]").forEach(function (el) {
el.textContent = String(new Date().getFullYear());
});
/* --- Contact form ------------------------------------------------------ */
var form = document.getElementById("contactForm");
if (!form) {
return;
}
var status = document.getElementById("formStatus");
var submitBtn = form.querySelector('button[type="submit"]');
var submitLabel = submitBtn ? submitBtn.innerHTML : "";
function showStatus(message, variant) {
if (!status) {
return;
}
status.textContent = message;
status.className = "alert mt-3 mb-0 alert-" + variant;
status.hidden = false;
status.focus();
}
function clearStatus() {
if (!status) {
return;
}
status.textContent = "";
status.hidden = true;
}
function setBusy(isBusy) {
if (!submitBtn) {
return;
}
submitBtn.disabled = isBusy;
submitBtn.innerHTML = isBusy ? "Sending&hellip;" : submitLabel;
}
form.addEventListener("submit", function (event) {
event.preventDefault();
clearStatus();
// Basic validation: required fields + email format (via input[type=email]).
if (!form.checkValidity()) {
form.classList.add("was-validated");
var firstInvalid = form.querySelector(":invalid");
if (firstInvalid) {
firstInvalid.focus();
}
showStatus("Please fix the highlighted fields and try again.", "danger");
return;
}
setBusy(true);
fetch(form.action, {
method: "POST",
body: new FormData(form),
headers: { Accept: "application/json" }
})
.then(function (response) {
return response
.json()
.catch(function () { return {}; })
.then(function (data) { return { ok: response.ok, data: data }; });
})
.then(function (result) {
var data = result.data || {};
if (result.ok && data.success) {
form.reset();
form.classList.remove("was-validated");
showStatus("Thanks, your message is on its way. We'll get back to you soon.", "success");
} else {
showStatus(data.message || "Something went wrong. Please try again, or email us directly.", "danger");
}
})
.catch(function () {
showStatus("Network error. Please check your connection and try again.", "danger");
})
.finally(function () {
setBusy(false);
});
});
})();

164
memory-bank/activeContext.md Normal file
View file

@ -0,0 +1,164 @@
# Active Context - 2RE03 Portfolio Site
> Current focus, recent changes, next steps, and active decisions.
> Last updated: 2026-09-10.
## Current Work Focus
**Build phase.** A working static site on a locally vendored Bootstrap 5.3.3,
with custom CSS/JS and a live Web3Forms contact page. It now includes a
**Collins-inspired Case Studies feature** (typographic index + 10 detail pages).
Next is user review of copy/design and the deployment decision.
## Recent Changes
- **2026-09-10** - Created the standard memory bank (`memory-bank/`): the six
core files plus `reference-materials.md` (replacing an earlier single-file
draft).
- **2026-09-10** - Deleted the superseded draft
`.clinerules/memory-bank-oops.md`; `.clinerules/` now holds only the rule file.
- **2026-09-10** - User locked the stack/styling/brand decisions (see below).
- **2026-09-10** - Built the v0 scaffold: vendored Bootstrap 5.3.3 and the
Inter/Space Grotesk fonts locally; created `css/`, `js/`, `img/`, `fonts/`;
copied the 23 reference images into `img/`; wrote all five pages,
`css/style.css`, `js/main.js`, and the Web3Forms contact form.
- **2026-09-10** - Verified: all pages/assets return HTTP 200 locally, HTML tags
balance, `js/main.js` passes `node --check`, no links into `refrence/`.
- **2026-09-10** - Rethemed the site to a **green palette centered on `#2ee666`**
(tokens renamed in `css/style.css`; hero, header, footer, buttons, links, and
accents updated; HTML class/meta updates).
- **2026-09-10** - Added a **Collins-inspired Case Studies** feature: a
typographic index (`case-studies.html`) with a cursor-following hover preview
(`js/case-studies.js`), 8 detail pages in `case-studies/`, a homepage
case-studies section, and "Case Studies" added to the nav/footer of every page.
- **2026-09-10** - Added 6 real client websites as case studies (Cool Crap From
China, Teach Each Other AI, Jensen's Red Barn, Mask Aid Project, 1 Woman's Art
and Magic, Sam's Rules) with screenshots + live-site links; list now 13 entries.
- **2026-09-10** - Corrected two case studies: "Kincaid" → **Urban Moto** (print
design / art direction for a motorcycle magazine, 4-image gallery), and
**1 Woman's Art and Magic** → a two-book art series for painter Joanna Signer
plus the website to help sell it.
- **2026-09-10** - Trimmed case studies 13 → 11: removed Cool Crap From China and
Data Vis Art; replaced Coop with **Cart** (a 3D design proposal). Work kept in
the full portfolio (Cool Crap added to the Web gallery, Data Vis Art moved to
the Logos gallery).
- **2026-09-10** - Corrected **Mehavior** to an app project (logo, app interface
and button design, and investor-pitch promotional material); category now
"App Design & Identity".
- **2026-09-10** - `work.html`: added a new **App Design** category (moved
Mehavior in; added the "(10+2) x 5" productivity timer app).
- **2026-09-10** - `work.html`: moved **Web Design** to the top of the section
order (now Web Design, Logos, App Design, Print Design, 3D Modeling, Written
Work).
- **2026-09-10** - Renamed the **"Written Work"** category title to **"Editorial"**
across the site (work page, homepage/services cards, and the Sam's Rules
category label).
- **2026-09-10** - Converted the homepage **Selected work** and all six **Work**
galleries into **Collins-style carousels** (rounded, cropped images; scroll-snap
track; arrows + keyboard + mouse drag via `js/carousel.js`).
- **2026-09-10** - Expanded the **Mask Aid Project** case study's "What we did":
video production, crowdfunding campaign, copywriting, and translation from
Chinese.
- **2026-09-10** - Web Design gallery: added Jensen's Red Barn + Mask Aid Project
snapshots; re-shot the timer app image as a close-up.
- **2026-09-10** - Homepage copy: replaced the avocado-hipster tagline with a
professional, team-voiced hero line, and changed "Web design first. Everything
design second." to **"Web Design Is Only the Beginning"** (+ supporting copy).
Tone direction updated in `productContext.md`.
- **2026-09-10** - Renamed the **"Editorial"** category to **"Words"** (covers
sales copy + technical writing too): work-page heading/caption, homepage and
services cards, and the Sam's Rules label ("Words & Web").
- **2026-09-10** - Homepage: moved **Selected work** above **What we do**
(background alternation preserved).
- **2026-09-10** - Case studies pruned to **10** and reordered: removed Argent;
renamed Victoria → **Victoria Fuller**, Cart → **Upscale Food Cart** (with page
files renamed). Order now: Mask Aid Project → 1 Woman's Art and Magic → Sam's
Rules → Mehavior → Jensen's Red Barn → Upscale Food Cart → Silver Lining →
Victoria Fuller → Urban Moto → Teach Each Other AI.
- **2026-09-10** - Enriched 5 case studies with client detail: Sam's Rules
(illustrations + downloadable companion content), Jensen's Red Barn (Grandma
Dorothy's scrapbook slideshow), Silver Lining (drove clients to a high-end
retreat), Victoria Fuller (Playboy Bunny / logo rights), Urban Moto (guest
articles, managing submissions, custom client ads).
- **2026-09-10** - Jensen's Red Barn: added "Social media setup" (removed "Contact
section"). Sam's Rules category → **"Book Design & Web"**.
- **2026-09-10** - `work.html`: moved `web50shadesof2048.png` into **App Design**
(out of Web Design).
- **2026-09-10** - App Design: swapped `site-timer-app.jpg` for **`2plus5times3.jpg`**
(cropped to 4:3).
- **2026-09-10** - Added web backend services (hosting, site management, domain/URL
sourcing) to `services.html` and the homepage Web Design card.
- **2026-09-10** - Removed all em dashes from the site (and the memory bank); the
tone guide now bans them.
- **2026-09-10** - Contact form: Subject field is now optional.
- **2026-09-10** - Replaced the hero portrait with a green gradient + dot grid
site-wide, and a work collage on the homepage.
- **2026-09-10** - Case study heroes now use each project's own image as the
background (`.hero--image` + `--hero-image`).
- **2026-09-10** - Hero tweaks: Mehavior shows the top (logo), Victoria Fuller sits
at `center 10%` (cursive name), Jensen's Red Barn uses `red-barn-photo.jpg`,
Urban Moto uses the middle of `printtiresad.png`. Added `--hero-position`.
- **2026-09-10** - Case study images no longer letterbox (natural aspect via
`.card-work`); added `.card-work--frame` for Urban Moto's grid.
- **2026-09-10** - Removed `refrence/` (temporary source, 19.4 MB) and four
superseded images; stashed to `/home/torrey/2RE03-unused-assets-backup/`.
- **2026-09-10** - Version control set up: `git init` on `main`, first commit of
79 files, remote `origin` = Forgejo `2RE03-Design`.
## Next Steps
1. Review copy + design with the user; refine tone-matched text as needed.
2. **Deploy:** the git repo and remote are set up; still need to choose the web
host/domain and publish the built site there.
3. Add any real assets (favicon, OG/social image, logo).
4. Populate galleries with additional/real work items and captions.
## Active Decisions & Considerations
### Decisions Log
| # | Decision | Status |
|---|---|---|
| 1 | Standard multi-file memory bank | ✅ Done |
| 2 | `refrence/` was temporary source; removed before the first commit (backed up outside the repo) | ✅ Done |
| 3 | Never attribute work to a named individual on the site | ✅ Done |
| 4 | Tone = sharp, professional, team-voiced, with an edge (see `productContext.md`) | ✅ Updated |
| 5 | Stack = static hand-coded HTML + Bootstrap 5.3.3 (vendored locally) | ✅ Done |
| 6 | Styling = Bootstrap components + custom `css/style.css` | ✅ Done |
| 7 | Brand = purely 2RE03; **no** 2RE Factory parent brand | ✅ Done |
| 8 | Fonts = Inter + Space Grotesk, self-hosted in `fonts/` | ✅ Done |
| 9 | Folder layout = `css/`, `js/`, `img/`, `fonts/` | ✅ Done |
| 10 | Contact = dedicated `contact.html` → Web3Forms (public access key) | ✅ Done |
| 11 | Pages = index, work, about, services, contact | ✅ Done |
| 12 | Reference images copied `refrence/img/` → `img/` as production assets | ✅ Done |
| 13 | Color scheme centered on `#2ee666` (green on ink) | ✅ Done |
| 14 | Add Collins-style Case Studies (index + 8 detail pages + hover previews) | ✅ Done |
| 15 | Add 6 real client websites as case studies (screenshots + live links) | ✅ Done |
| 16 | Homepage copy: retire the avocado-hipster tagline; new team-voiced, professional hero + "Web Design Is Only the Beginning" | ✅ Done |
| 17 | Version control: git repo on `main`, pushed to the Forgejo remote `origin` (`2RE03-Design`) | ✅ Done |
### Open Questions (remaining)
1. **Deployment:** target host/domain?
2. **Real assets:** any real favicon, Open Graph/social image, or logo to add?
3. **Copy approval:** review/refine the drafted company-voice copy?
4. **Gallery content:** add more work items/captions beyond the reference set?
## Important Patterns & Preferences
- Plan-first; small, verifiable changes; plain/static, dependency-light output
(see `projectbrief.md` → Ways of Working).
- Private asset provenance (never credit the CEO on the site).
- Keep all site copy in the tone defined in `productContext.md`.
## Learnings & Insights
- The reference build used hand-coded HTML + Bootstrap 5 with a small custom
carousel (`series-carousel.js`); the local `css/`/`js/` assets it references
are NOT present in this repo.
- The reference bio is first-person and individual-focused; the 2RE03 site must
re-voice it as the company.
## Housekeeping
- The superseded single-file draft `.clinerules/memory-bank-oops.md` was **deleted**
(2026-09-10). `.clinerules/` now contains only `memory-bank.md`.
- Note: `.clinerules/memory-bank.md` is the Memory Bank **rule** file (it describes
the structure); the actual data files live in the top-level `memory-bank/` folder.
- `refrence/` plus four superseded images (`blue_eyes_Torrey.png`,
`red-barn-photo.jpg`, `site-sams-rules.jpg`, `site-timer-app.jpg`) were **moved**
on 2026-09-10 to `/home/torrey/2RE03-unused-assets-backup/` (22 MB, outside the
repo). Run `rm -rf /home/torrey/2RE03-unused-assets-backup` once nothing is
needed from it.

61
memory-bank/productContext.md Normal file
View file

@ -0,0 +1,61 @@
# 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.

181
memory-bank/progress.md Normal file
View file

@ -0,0 +1,181 @@
# Progress - 2RE03 Portfolio Site
> What works, what's left, current status, known issues, and decision evolution.
> Last updated: 2026-09-10.
## What Works
- Memory bank initialized in the standard multi-file form.
- Source material surveyed and inventoried (see `reference-materials.md`).
- Six linked pages built: `index`, `case-studies`, `work`, `about`, `services`,
`contact` - plus 8 case study detail pages in `case-studies/`.
- Bootstrap 5.3.3 + Inter/Space Grotesk vendored locally (`css/`, `js/`, `fonts/`).
- 23 design images copied into `img/`.
- Web3Forms contact form with required-field + email validation, accessible
labels, and AJAX submit with a live status region.
- Collins-style **Case Studies** feature: a typographic index with
cursor-following hover previews (with a touch/no-JS thumbnail fallback) and
per-project detail pages.
- **5 real client websites** added as case studies - Teach Each Other AI,
Jensen's Red Barn, Mask Aid Project, 1 Woman's Art and Magic, and Sam's Rules
- each with a screenshot and a link to the live site. (Cool Crap From China
lives in the portfolio gallery instead.)
- `work.html` now has **six galleries**, including a new **App Design** category
(Mehavior + the "(10+2) x 5" productivity timer app).
- Verified locally: all pages/assets HTTP 200, HTML tags balance, `js/main.js`
passes `node --check`, no links into `refrence/`.
## Current Status
**Stage:** v0 scaffold complete and verified. Awaiting user review of
copy/design and the deployment decision.
## What's Left To Build
- User review/refinement of copy + visual design.
- Deployment target/host/domain.
- Optional real assets: favicon, Open Graph/social image, logo.
- More/real portfolio items and per-image captions.
- Remove `refrence/` (only after design approval).
## Known Issues / Risks
- Copy is drafted in company voice but **not yet approved** by the user.
- The portrait (`img/blue_eyes_Torrey.png`) is used as the hero image - confirm
this is desired, given the "no individual attribution" rule.
- Web3Forms posts to an external endpoint with a public access key in
`contact.html`; live submissions depend on that key/account remaining active.
- Galleries reuse the reference image set; captions are category-level only.
- Some case studies use names drawn from the source image filenames with generic
copy; others (the client sites, plus Urban Moto, Cart, and 1 Woman's Art and
Magic) are based on the user's factual notes.
## Evolution of Decisions
- **2026-09-10** - Initialized a single-file memory bank draft.
- **2026-09-10** - Replaced by the standard multi-file memory bank (this folder);
content ported over.
- Tone anchored on `refrence/index.html`; no individual attributions; `refrence/`
marked temporary.
- **2026-09-10** - Locked the stack (static HTML + vendored Bootstrap), styling
(Bootstrap + custom CSS), and brand (2RE03 only, no 2RE Factory), then built the
v0 scaffold.
## Progress Log
- **2026-09-10** - Initialized memory bank. Surveyed `refrence/` (2 HTML files +
23 images), captured project brief, tone, content model, and open questions. No
production files created.
- **2026-09-10** - Built and verified the v0 static scaffold: five pages, vendored
Bootstrap 5.3.3 + Inter/Space Grotesk fonts, `css/style.css`, `js/main.js`, and
the Web3Forms contact form. All pages/assets return HTTP 200 locally.
- **2026-09-10** - Rethemed the site to a green palette centered on `#2ee666`
(crimson/red tokens removed from production CSS/HTML).
- **2026-09-10** - Deleted the superseded draft `.clinerules/memory-bank-oops.md`.
- **2026-09-10** - Added the Case Studies feature (typographic index + 8 detail
pages + hover previews), wired into the nav/footer and the homepage.
- **2026-09-10** - Added 6 real client websites as case studies (5 new detail
pages + linked the existing Sam's Rules study to its live site); captured
screenshots into `img/`. Case-study list is now 13 entries.
- **2026-09-10** - Corrections: renamed the "Kincaid" case study to **Urban Moto**
(print design / art direction for a motorcycle magazine; 4 images:
printtiresad, printkincaidad, printmacchiariniad, writtenearplugs) and removed
the old page; recast **1 Woman's Art and Magic** as a two-book art series for
painter Joanna Signer plus the website to sell it.
- **2026-09-10** - Trimmed the case-study list from 13 to 11: removed **Cool Crap
From China** and **Data Vis Art**, replaced **Coop** with **Cart** (a 3D design
proposal), and kept the work in the portfolio (Cool Crap added to the Web
gallery; Data Vis Art moved to the Logos gallery).
- **2026-09-10** - Corrected **Mehavior**: it was an **app**, not a website - logo,
app interface/button design, and promotional material for an investor pitch.
Category updated to "App Design & Identity".
- **2026-09-10** - `work.html`: added an **App Design** category, moved Mehavior
into it, and added the **"(10+2) x 5"** productivity timer app (screenshot from
timer.2re.me). Section backgrounds re-alternated.
- **2026-09-10** - `work.html`: moved **Web Design** to the top. Order is now
Web Design, Logos, App Design, Print Design, 3D Modeling, Written Work (with
the section-background alternation preserved).
- **2026-09-10** - Renamed the **"Written Work"** category title to **"Editorial"**
everywhere it appears (work page heading, the homepage/services cards, and the
Sam's Rules category label "Editorial & Web").
- **2026-09-10** - Rebuilt the **Selected work** (homepage) and all six **Work**
galleries as Collins-style carousels: a native CSS `scroll-snap` track with
rounded, `object-fit: cover` (cropped) cards, plus `js/carousel.js` for
prev/next buttons, keyboard arrows, and mouse drag-to-scroll (touch swipes
work natively).
- **2026-09-10** - Expanded the **Mask Aid Project** case study: what we did is
now video production, a crowdfunding campaign, copywriting (all the text), and
translation from Chinese.
- **2026-09-10** - `work.html` Web Design gallery: added snapshots of Jensen's
Red Barn and Mask Aid Project. Also re-shot the **"(10+2) x 5"** timer image as
a close-up (composed to fill a 4:3 frame).
- **2026-09-10** - Homepage copy rewrite: dropped the avocado-hipster tagline for
a professional, team-voiced hero; renamed the "What we do" headline to
**"Web Design Is Only the Beginning"**. Tone guidance updated in
`productContext.md`.
- **2026-09-10** - Renamed the **"Editorial"** category to **"Words"** (it also
covers sales copy and technical writing). Updated `work.html` heading/caption,
the homepage + services cards (now mention sales copy), and the Sam's Rules
label ("Words & Web"). Supersedes the earlier "Written Work → Editorial" rename.
- **2026-09-10** - Homepage: moved **Selected work** above **What we do** (and
swapped their section backgrounds so the white/soft alternation still holds).
- **2026-09-10** - Pruned + reordered case studies (now **10**): removed **Argent**;
renamed **Victoria → Victoria Fuller** and **Cart → Upscale Food Cart** (pages
renamed to `victoria-fuller.html` / `upscale-food-cart.html`). New order: Mask Aid
Project, 1 Woman's Art and Magic, Sam's Rules, Mehavior, Jensen's Red Barn,
Upscale Food Cart, Silver Lining, Victoria Fuller, Urban Moto, Teach Each Other AI.
- **2026-09-10** - Enriched five case studies from the user's notes:
**Sam's Rules** (+ illustrations, downloadable companion content);
**Jensen's Red Barn** (Grandma Dorothy's scrapbook brought online as a slideshow);
**Silver Lining** (the mark helped bring clients to a high-end retreat);
**Victoria Fuller** (a Playboy Bunny - the only one with rights to the Playboy logo);
**Urban Moto** (guest articles; managed photography/editorial/ad submissions;
designed custom ads for clients).
- **2026-09-10** - **Jensen's Red Barn**: added "Social media setup", removed the
"Contact section" bullet. **Sam's Rules** category changed from "Words & Web" to
**"Book Design & Web"** (both lists + detail page).
- **2026-09-10** - `work.html`: moved `web50shadesof2048.png` from **Web Design**
into **App Design** (Web Design now 5 items, App Design 3).
- **2026-09-10** - `work.html` App Design: replaced `site-timer-app.jpg` with
**`2plus5times3.jpg`**, cropped from 398×820 to a centred 4:3 (398×298) so it
fills the card. (`site-timer-app.jpg` is now unused.)
- **2026-09-10** - Added the web **backend services** to the offering: web hosting
setup/management, site management & maintenance, and domain/URL sourcing. Covered
in `services.html` (new paragraph + 3 "What's included" bullets) and the homepage
Web Design card.
- **2026-09-10** - Removed **all em dashes** from the site copy (they read as
AI-generated): rewrote ~95 instances across the HTML plus CSS/JS comments and the
contact-form success message, using commas, colons, and parentheses. Page titles
now use " | ". Cleaned the memory bank too. (Vendored `bootstrap.min.css` left
untouched.)
- **2026-09-10** - Contact form: made **Subject optional** (dropped `required` and
its asterisk; the label now reads "Subject (optional)"). Required fields are now
Name, Email, and Message.
- **2026-09-10** - Hero rework (dropped the portrait): the global `.hero` now uses
the green gradient plus a faint dot grid (no photo), and the homepage adds a
low-contrast **work collage** (`.hero--collage`) of eight thumbnails
(`img/collage-1..8.jpg`, generated at 480x360, ~178KB total). `blue_eyes_Torrey.png`
is now unreferenced in production (still used by `refrence/index.html`).
- **2026-09-10** - Each **case study hero** now uses that project's own image as its
background: `.hero--image` (green overlay, heavier on the left for legibility)
with the image set per page via an inline `--hero-image` custom property. Hero
backgrounds generated as optimised JPEGs (`img/hero-<slug>.jpg`, max 1600px);
the transparent logos (Sam's Rules, Silver Lining, Victoria Fuller) were
composited onto brand green.
- **2026-09-10** - Case study hero tweaks: `.hero--image` gained a `--hero-position`
variable. **Mehavior** shows the top of its image (the logo) via `center top`;
**Victoria Fuller** sits at `center 10%` to show the cursive name near the top;
**Jensen's Red Barn** switched to the wide `red-barn-photo.jpg` panorama;
**Urban Moto** now uses the **middle** band of `printtiresad.png`.
- **2026-09-10** - Case study images no longer letterbox: `.card-work` now lets the
image define its own frame (`width: 100%; height: auto`, no fixed 4:3 box and no
light-green panel), so there is no space above or below. Added
`.card-work--frame` (4:3 + `object-fit: cover`) for Urban Moto's mixed-shape
grid. Feature-image `width`/`height` attributes corrected to real dimensions to
avoid layout shift.
- **2026-09-10** - Repo cleanup before the first commit: removed the temporary
`refrence/` source folder (19.4 MB) and four superseded images no longer
referenced by any page (`blue_eyes_Torrey.png`; `red-barn-photo.jpg`, which was
the source for `hero-jensens-red-barn.jpg`; plus `site-sams-rules.jpg` and
`site-timer-app.jpg`). All five were **moved** to
`/home/torrey/2RE03-unused-assets-backup/` rather than hard-deleted. Added a
minimal `.gitignore` (OS/editor cruft only); `css/`, `js/` and `fonts/` had no
orphans.
- **2026-09-10** - Version control: `git init` on branch `main`, then the first
commit (**79 files**, no `refrence/`). Remote `origin` is
`ssh://git@git.2re.top:22222/2re/2RE03-Design.git` (Forgejo, SSH key
`id_ed25519`).

64
memory-bank/projectbrief.md Normal file
View file

@ -0,0 +1,64 @@
# Project Brief - 2RE03 Portfolio Site
> Foundation document. Shapes all other memory-bank files and is the source of
> truth for scope. Last updated: 2026-09-10.
## Overview
Build a portfolio website for the design company **2RE03**. The primary focus is
**web design**, but the company can do **any kind of design work**, so the site
must present a broader design capability rather than websites alone.
The site is a client-facing portfolio: it showcases work and communicates what
the company does, with a distinct personality.
## Core Requirements
- Showcase design work across categories: web, print, logos, 3D modeling, and
written/designed pieces.
- Establish the company as capable well beyond web design.
- Give prospective clients an easy path to understand services and make contact.
- Carry the company's personality/tone throughout the copy (see
`productContext.md` → Tone & Voice).
## Brand Basics
- **Company name:** 2RE03 (wordmark styled "2RE03", per `refrence/index.html`).
- **Parent-brand context:** the source material mentions "2RE Factory" as an
umbrella, but **the site must not include it - the brand is purely 2RE03**
(decided 2026-09-10).
## Scope
### In scope
- Marketing/portfolio site for 2RE03.
- The five work categories above.
- Hero, Case Studies, Work, About, Services, and Contact sections.
- A Collins-inspired **case studies index** (typographic list + hover previews)
plus per-project **case study detail pages**.
### Out of scope / constraints
- No attribution of work to a named individual (present all work as company work).
- No invented facts about the company or the CEO.
- `refrence/` is temporary source material, not delivered assets, and must not be
linked to from the site.
## Success Criteria
- Clear, fast, characterful portfolio that reads as confident and crafts-focused.
- Work is browsable by category with images and short, intentional captions.
## Ways of Working (Process Rules)
1. **Plan, then build.** Agree the plan in the memory bank before generating
production code; record decisions so they aren't relitigated.
2. **`refrence/` is temporary and not part of the delivered project.** Don't build
links into it. Don't delete it until the site is designed and approved (the
user confirms when it can go).
3. **Don't invent facts** about the company or CEO; use only `refrence/` or
explicit user input.
4. **Keep the tone consistent** (see `productContext.md` → Tone & Voice).
5. **Asset provenance is private:** images in `refrence/img/` were designed by the
CEO; the site must not mention this.
6. **Small, verifiable changes:** verify each build step (validate HTML, check
assets resolve, check responsive behavior) before reporting done.
7. **Prefer plain, dependency-light, static output** unless a decision says
otherwise.
## Source Material
All source material lives in the temporary `refrence/` folder. See
`reference-materials.md` for the full inventory.

53
memory-bank/reference-materials.md Normal file
View file

@ -0,0 +1,53 @@
# Reference Materials - 2RE03 Portfolio Site
> Temporary source material in `refrence/`. NOT production assets. Do not link to
> it. Do not delete until the site is designed and approved (user confirms).
> Last updated: 2026-09-10.
## `refrence/index.html`
- Landing/hero styled as "2RE03" over a full-bleed portrait background
(`img/blue_eyes_Torrey.png`) with a crimson→red gradient.
- Contains the original tone-reference tagline (now **retired**): "Artisinal web
design by an genuine avocado eating hipster."
- Establishes a bold, saturated, personality-driven visual direction.
## `refrence/2re03text.html`
- Bio/services page. Uses Bootstrap (`bootstrap.min.css`, `popper.min.js`,
`bootstrap.min.js`), plus `style.css` and a custom `series-carousel.js`.
- **CEO info:** Torrey Nommesen - 30+ years freelance across design, writing, web
dev, photography, 3D modeling, and publishing. Art Director for *Urban Moto*;
taught graphic design at Academy of Art University; President of YLEM;
technical writer for Silicon Valley companies.
- **Section structure with captions** (source for site content):
- H2 "Freelance writing, design, and coding" + summary paragraph.
- **Logos** - "Logos I have created for clients and for my projects".
- **Web Design** - "Examples of some of my web and app design work".
- **Print Design** - "examples of my print design work".
- **3D Modeling** - "3D modeling for client projects".
- **Written Work** - "Examples of work where I designed and wrote".
- Carousels populated from inline JSON `<script type="application/json">` blocks
keyed by category (`logos`, `web`, `print`, `3d`, `written`).
- **Note:** the bio copy is first-person ("I developed…") and about the individual.
For 2RE03 the site should speak as the company and must not attribute works to a
named individual.
## `refrence/img/` (23 image files)
Portrait:
- `blue_eyes_Torrey.png` - CEO portrait (used on the landing reference).
By category (from the carousel JSON; filenames self-label by prefix):
| Category | Files |
|---|---|
| Logos | `logoargent.png`, `logobackass.png`, `logodrinking.png`, `logodrive.png`, `logosilverlining.png`, `logoylem.png` |
| Web | `webvictoria.png`, `websinosalescopy.jpg`, `web50shadesof2048.png`, `webdatavisart.jpeg`, `webmehavior.png` |
| Print | `printkincaidad.jpg`, `printmacchiariniad.png`, `printtiresad.png`, `printylemcover.png` |
| 3D | `3d78williams.jpg`, `3dabandoned.jpg`, `3dcart.png`, `3dcoop.jpg` |
| Written | `writtenearplugs.jpg`, `writtensamsrules.png`, `writtenstructions.jpg` |
> **Note:** all 23 of these images were copied into the production `img/` folder
> (2026-09-10) and are now referenced by the site. The `refrence/` originals
> remain temporary source material and can be deleted after design approval.
> The production `img/` folder also contains 6 additional `site-*.jpg`
> screenshots of real client websites added later (not from `refrence/`).

92
memory-bank/systemPatterns.md Normal file
View file

@ -0,0 +1,92 @@
# System Patterns - 2RE03 Portfolio Site
> Architecture, key technical decisions, patterns, component relationships, and
> critical paths. Last updated: 2026-09-10.
## Status
**Implemented (v0 scaffold).** The patterns below are reflected in the built
files, not just proposed.
## Architecture
- **Static site:** pre-authored HTML/CSS/JS served as files, no server runtime.
- **Content-driven galleries:** each category ("series") = a titled section with
a one-line caption, an image gallery, and a short blurb.
- **Single source of work data:** image lists per category defined once (e.g., a
JS/JSON data structure) and rendered into galleries, avoiding duplication.
- **Reusable structure:** shared header/main/footer across the site.
## Key Technical Decisions
| Decision | Status | Notes |
|---|---|---|
| Static, dependency-light output | ✅ Done | Hand-coded HTML/CSS/JS; no build step. |
| Bootstrap + custom CSS | ✅ Done | Bootstrap 5.3.3 vendored; themed in `css/style.css`. |
| Gallery rendering | ✅ Done | Static responsive image grids (no JS needed); content lives in the HTML. |
| Fonts self-hosted | ✅ Done | Inter + Space Grotesk `woff2` in `fonts/`. |
## Design Patterns In Use
- **Series/gallery pattern** (from `refrence/2re03text.html`): a
`.series-carousel` element configured via `data-*` attributes and populated
from inline `<script type="application/json">` lists.
- **Case-study list pattern (Collins-inspired):** a `.case-list` of `.case-row`
links - big-type project name + category meta. On hover-capable pointers,
`js/case-studies.js` shows a cursor-following `.case-preview` image; on touch /
small screens / no-JS, inline `.case-row__thumb` thumbnails are shown instead.
- **Carousel pattern (Collins-inspired):** `.carousel > .carousel__track` uses
native CSS `scroll-snap-type: x mandatory` with `.carousel__item` cards
(rounded `.carousel__media`, `object-fit: cover`). `js/carousel.js` adds
prev/next buttons (disabled at the ends), keyboard arrows, and pointer
drag-to-scroll. Works without JS via native swipe/trackpad scrolling.
- **Hero pattern:** `.hero` is the brand green gradient plus a faint dot grid (no
photo), applied site-wide. The homepage adds `.hero--collage`: an absolutely
positioned grid of work thumbnails behind a translucent green overlay
(`::after`), with the hero content lifted on `z-index: 2`. Case study pages add
`.hero--image`, which puts that project's image behind the green wash via the
`--hero-image` custom property (set inline per page).
- **Component reuse** via shared header/footer.
## Components & Relationships
- **Site shell:** shared header (dark navbar + skip link) → `<main>` → footer,
duplicated across the five static pages (no build-time includes).
- **Pages:** `index` (hero, selected work, services overview, case-studies list,
CTA), `case-studies` (typographic index), `work` (six category galleries),
`about`, `services`, `contact` (form).
- **Case study detail pages:** `case-studies/{slug}.html` - hero image + "The
problem" + "What we did", linking back to the index and the portfolio.
- **Galleries:** each category = heading + caption + a Bootstrap grid of images.
- **Form:** `contact.html` → `js/main.js` → Web3Forms API.
## File Structure
```
index.html work.html about.html services.html contact.html case-studies.html
case-studies/*.html (case study detail pages)
css/style.css (+ vendored bootstrap.min.css)
js/main.js js/case-studies.js js/carousel.js (+ vendored bootstrap.bundle.min.js)
fonts/*.woff2
img/* (23 reference designs + 7 site screenshots)
```
## Content/Data Structures (reference)
Category keys and image counts (source: `refrence/img/` + the carousel JSON in
`refrence/2re03text.html`); full inventory in `reference-materials.md`.
- `logos`: 6 images
- `web`: 5 images
- `print`: 4 images
- `3d`: 4 images
- `written`: 3 images
## Design Direction
- **Palette centered on `#2ee666`** (bright green) accents on a near-black ink
base (`#0e1511`). Legible deep green (`#0e7a3a`) for text on light, bright
`#2ee666` for fills/borders, and a soft green tint (`#e9fbef`) for section
backgrounds. The hero is a green gradient over the full-bleed portrait with
dark ink text.
- Strong typography (Space Grotesk headings / Inter body), generous whitespace,
gallery-forward layout.
- Headline focus on web design, backed by the full breadth of design work.
## Critical Implementation Paths
1. Decide tech stack + styling.
2. Define the site shell (header/footer/nav) and the page/section list.
3. Assemble work data (categories + images + captions).
4. Build sections in order: Hero → Work → About → Services → Contact.
5. Verify responsive behavior and asset resolution at each step.

70
memory-bank/techContext.md Normal file
View file

@ -0,0 +1,70 @@
# 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.

202
services.html Normal file
View file

@ -0,0 +1,202 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Services | 2RE03</title>
<meta name="description" content="2RE03 services: web design, logos and identity, print design, 3D modeling, and written work.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Services</p>
<h1>What we can make for you.</h1>
<p class="hero-lead mb-0">Web design is the specialty. The rest of the bench is there when the project
needs it.</p>
</div>
</section>
<!-- Web design (lead service) -->
<section class="section">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-lg-6">
<p class="eyebrow mb-2">Main event</p>
<h2>Web Design</h2>
<p class="lead text-body-secondary">Sites that load fast, read clearly, and behave on any screen.</p>
<p>We build by hand and with WordPress, whichever the project actually needs. More recently we lean on
AI for the boring parts: generating structure, organizing content, testing responsive layouts. The
tools change; the standard doesn't: functional, well-structured sites.</p>
<p>We also take care of the unglamorous backend: hosting, site management, sourcing the right domain,
and keeping the whole thing running. A site isn't finished the moment it goes live.</p>
</div>
<div class="col-lg-6">
<div class="card card-service p-4">
<h3 class="h6 text-uppercase text-brand mb-3">What's included</h3>
<ul class="mb-0">
<li>Hand-coded HTML, CSS, and JavaScript</li>
<li>WordPress builds and content structure</li>
<li>Responsive layouts, tested across devices</li>
<li>Accessibility and performance as defaults</li>
<li>Design and build from the same room</li>
<li>Web hosting setup and management</li>
<li>Domain and URL sourcing</li>
<li>Ongoing site maintenance</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Other services -->
<section class="section bg-brand-soft">
<div class="container">
<p class="eyebrow mb-2">Also on the bench</p>
<h2 class="mb-4">The rest of it.</h2>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">Logos &amp; Identity</h3>
<p class="mb-0 text-body-secondary">Marks that do a job. For some clients that means clarity and
restraint; for others, symbols that wander somewhere stranger. Either way, it starts with the
problem the mark has to solve.</p>
</div>
</div>
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">Print Design</h3>
<p class="mb-0 text-body-secondary">Ads, flyers, postcards, business cards, letterhead, and product
design. We design for the press: material, scale, and production limits included.</p>
</div>
</div>
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">3D Modeling</h3>
<p class="mb-0 text-body-secondary">Practical models for real products: a chicken coop, a pretzel
stand, and things that need to actually stand up. Assembly logic and material limits come first.</p>
</div>
</div>
<div class="col">
<div class="card card-service h-100 p-4">
<h3 class="h5">Words</h3>
<p class="mb-0 text-body-secondary">Sales copy, technical documentation, book layouts, charts, and
illustrations. When a project needs words and design at once, we'd rather not split it between two
people.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Process -->
<section class="section">
<div class="container">
<p class="eyebrow mb-2">Process</p>
<h2 class="mb-4">How a project goes.</h2>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100 border-0 bg-brand-soft p-4">
<span class="display-6 text-brand fw-bold">01</span>
<h3 class="h5 mt-2">Talk</h3>
<p class="mb-0 text-body-secondary">Tell us the problem, the deadline, and the budget. Napkin
sketches welcome.</p>
</div>
</div>
<div class="col">
<div class="card h-100 border-0 bg-brand-soft p-4">
<span class="display-6 text-brand fw-bold">02</span>
<h3 class="h5 mt-2">Make</h3>
<p class="mb-0 text-body-secondary">We design, write, or build, and show you the work as it comes
together, not three months later.</p>
</div>
</div>
<div class="col">
<div class="card h-100 border-0 bg-brand-soft p-4">
<span class="display-6 text-brand fw-bold">03</span>
<h3 class="h5 mt-2">Ship</h3>
<p class="mb-0 text-body-secondary">Clean files, tested pages, or print-ready artwork. Then we stick
around if something needs a tweak.</p>
</div>
</div>
</div>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="bg-ink text-cream rounded-4 p-4 p-md-5">
<div class="row align-items-center g-3">
<div class="col-lg-8">
<h2 class="mb-2">Have a project in mind?</h2>
<p class="mb-0 text-cream opacity-75">Even if it's only half-formed, we're happy to talk it through.</p>
</div>
<div class="col-lg-4 text-lg-end">
<a class="btn btn-brand btn-lg" href="contact.html">Start a project</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="index.html">Home</a></li>
<li><a href="case-studies.html">Case Studies</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

224
work.html Normal file
View file

@ -0,0 +1,224 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Work | 2RE03</title>
<meta name="description" content="Selected work from 2RE03: web design, logos, print, 3D modeling, and written work.">
<meta name="theme-color" content="#2ee666">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
<header class="site-header" data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand" href="index.html">2RE03</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="case-studies.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="work.html">Work</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="btn btn-brand ms-lg-3 mt-2 mt-lg-0" href="contact.html">Start a project</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main">
<section class="hero hero--compact">
<div class="container">
<p class="eyebrow eyebrow-ink mb-2">Portfolio</p>
<h1>The work.</h1>
<p class="hero-lead mb-0">Web design leads the way. Logos, print, 3D, and written work round it out.</p>
</div>
</section>
<!-- Web design -->
<section class="section">
<div class="container">
<h2>Web Design</h2>
<p class="gallery-caption mb-4">Examples of our web and app design work.</p>
<div class="carousel" data-carousel>
<div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Web design gallery">
<figure class="carousel__item"><div class="carousel__media"><img src="img/webvictoria.png" alt="Web design project" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/websinosalescopy.jpg" alt="Web design project" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/site-cool-crap-from-china.jpg" alt="Cool Crap From China website" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/site-jensens-red-barn.jpg" alt="Jensen's Red Barn website" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/site-mask-aid-project.jpg" alt="Mask Aid Project website" loading="lazy" width="800" height="600"></div></figure>
</div>
<div class="carousel__nav">
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">&rsaquo;</span></button>
</div>
</div>
<p class="col-lg-9">Hand-coded and WordPress, built and tested to hold up on any screen. The tools change;
the goal doesn't: functional, well-structured sites.</p>
</div>
</section>
<!-- Logos -->
<section class="section bg-brand-soft">
<div class="container">
<h2>Logos</h2>
<p class="gallery-caption mb-4">Logos created for clients and for our own projects.</p>
<div class="carousel" data-carousel>
<div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Logo design gallery">
<figure class="carousel__item"><div class="carousel__media"><img src="img/logoargent.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/logobackass.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/logodrinking.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/logodrive.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/logosilverlining.png" alt="Logo design for a client" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/logoylem.png" alt="Logo design for an organization" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/webdatavisart.jpeg" alt="Logo design" loading="lazy" width="800" height="600"></div></figure>
</div>
<div class="carousel__nav">
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">&rsaquo;</span></button>
</div>
</div>
<p class="col-lg-9">Clients have included doctors, artists, and a private eye. Each identity is a different
problem: clarity and restraint for some, stranger symbols for others. We treat a mark as a functional
tool, not an art project.</p>
</div>
</section>
<!-- App design -->
<section class="section">
<div class="container">
<h2>App Design</h2>
<p class="gallery-caption mb-4">Apps we've designed: the interface, the buttons, and the identity around them.</p>
<div class="carousel" data-carousel>
<div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="App design gallery">
<figure class="carousel__item"><div class="carousel__media"><img src="img/webmehavior.png" alt="Mehavior app interface design" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/web50shadesof2048.png" alt="App design project" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/2plus5times3.jpg" alt="App design project" loading="lazy" width="800" height="600"></div></figure>
</div>
<div class="carousel__nav">
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">&rsaquo;</span></button>
</div>
</div>
<p class="col-lg-9">Interfaces, button states, and the marks that go with them, built to look real before
they're live, sometimes years before.</p>
</div>
</section>
<!-- Print design -->
<section class="section bg-brand-soft">
<div class="container">
<h2>Print Design</h2>
<p class="gallery-caption mb-4">Examples of our print design work.</p>
<div class="carousel" data-carousel>
<div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Print design gallery">
<figure class="carousel__item"><div class="carousel__media"><img src="img/printkincaidad.jpg" alt="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/printmacchiariniad.png" alt="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/printtiresad.png" alt="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/printylemcover.png" alt="Magazine cover design" loading="lazy" width="800" height="600"></div></figure>
</div>
<div class="carousel__nav">
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">&rsaquo;</span></button>
</div>
</div>
<p class="col-lg-9">Ads, flyers, postcards, business cards, letterhead, and product design. Every format has
a job. We plan for material, scale, and production limits before anything goes to output.</p>
</div>
</section>
<!-- 3D modeling -->
<section class="section">
<div class="container">
<h2>3D Modeling</h2>
<p class="gallery-caption mb-4">3D modeling for client projects.</p>
<div class="carousel" data-carousel>
<div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="3D modeling gallery">
<figure class="carousel__item"><div class="carousel__media"><img src="img/3d78williams.jpg" alt="3D modeling project" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/3dabandoned.jpg" alt="3D modeling project" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/3dcart.png" alt="3D product modeling project" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/3dcoop.jpg" alt="3D model of a chicken coop" loading="lazy" width="800" height="600"></div></figure>
</div>
<div class="carousel__nav">
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">&rsaquo;</span></button>
</div>
</div>
<p class="col-lg-9">Models for real products: a chicken coop, a pretzel stand, and more. Assembly logic and
material limits come first. Each model is built for practical use.</p>
</div>
</section>
<!-- Words -->
<section class="section bg-brand-soft">
<div class="container">
<h2>Words</h2>
<p class="gallery-caption mb-4">Sales copy, documentation, and editorial: words we designed and wrote.</p>
<div class="carousel" data-carousel>
<div class="carousel__track" data-carousel-track tabindex="0" role="group" aria-label="Words gallery">
<figure class="carousel__item"><div class="carousel__media"><img src="img/writtenearplugs.jpg" alt="Designed and written project" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/writtensamsrules.png" alt="Book layout and editing project" loading="lazy" width="800" height="600"></div></figure>
<figure class="carousel__item"><div class="carousel__media"><img src="img/writtenstructions.jpg" alt="Instructional design and writing project" loading="lazy" width="800" height="600"></div></figure>
</div>
<div class="carousel__nav">
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">&lsaquo;</span></button>
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">&rsaquo;</span></button>
</div>
</div>
<p class="col-lg-9">Art direction, layouts, charts, and editing, plus technical documentation and
illustrations. When a project needs words and design at once, that's the fun part.</p>
</div>
</section>
<section class="section-sm">
<div class="container">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 border-top pt-4">
<p class="mb-0 lead">Like what you see? There's more where that came from.</p>
<a class="btn btn-brand" href="contact.html">Start a project</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container py-4">
<div class="row gy-4">
<div class="col-md-5">
<span class="footer-brand">2RE03</span>
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
</div>
<div class="col-6 col-md-3">
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
<ul class="list-unstyled mb-0">
<li><a href="index.html">Home</a></li>
<li><a href="case-studies.html">Case Studies</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-6 col-md-4">
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
<a class="btn btn-brand btn-sm" href="contact.html">Get in touch</a>
</div>
</div>
<hr class="border-secondary-subtle mt-4">
<p class="small mb-0">&copy; <span data-year>2026</span> 2RE03. All rights reserved.</p>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
<script src="js/carousel.js"></script>
</body>
</html>