313 lines
20 KiB
HTML
313 lines
20 KiB
HTML
<!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="icon" href="img/favicon.svg" type="image/svg+xml">
|
|
<link rel="icon" href="img/favicon.ico">
|
|
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
|
|
<link rel="canonical" href="https://2re03.com/work.html">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="2RE03">
|
|
<meta property="og:title" content="Work | 2RE03">
|
|
<meta property="og:description" content="Selected work from 2RE03: web design, logos, print, 3D modeling, and written work.">
|
|
<meta property="og:url" content="https://2re03.com/work.html">
|
|
<meta property="og:image" content="https://2re03.com/img/og-image.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:image:alt" content="The 2RE03 wordmark on a green dot-grid card reading "A design team for the web, and everything around it.", above a strip of recent work under a green wash.">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<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.webp" alt="Portrait-montage hero of the Victoria Fuller website" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Victoria Fuller<span>Website</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/websinosalescopy.webp" alt="Bilingual sales page with a language switch and dark red type" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Sales page<span>English and Chinese</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/site-cool-crap-from-china.webp" alt="Cool Crap From China store homepage" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Cool Crap From China<span>Online store</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/site-jensens-red-barn.webp" alt="Jensen's Red Barn homepage" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Jensen's Red Barn<span>Antiques shop</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/site-mask-aid-project.webp" alt="Mask Aid Project homepage" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Mask Aid Project<span>Website</span></figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel__nav">
|
|
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">‹</span></button>
|
|
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">›</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, and the occasional title slide.</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.webp" alt="Argent wordmark with a shield-shaped A" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Argent<span>Identity</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/logobackass.webp" alt="Circular mark in the colours of the US flag for a political campaign art show" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Back That Ass Up<span>Political art show</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/logodrinking.webp" alt="Circular seal with a tumbler and the motto In Vino Veritas" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Drinking About...<span>Identity</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/logodrive.webp" alt="App icons and phone screens for D.R.I.V.E." loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">D.R.I.V.E.<span>App identity</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/logosilverlining.webp" alt="Silver Lining Retreats wordmark" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Silver Lining Retreats<span>Identity</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/logoylem.webp" alt="Extruded 3D YLEM lettering" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">YLEM<span>Identity</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/webdatavisart.webp" alt="Title slide for the Dat Art presentation for Motion Labs" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Dat Art<span>Presentation for Motion Labs</span></figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel__nav">
|
|
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">‹</span></button>
|
|
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">›</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.webp" alt="Mehavior logo with two phone screens" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Mehavior<span>UX and UI</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/web50shadesof2048.webp" alt="Game board and score panels for 50 Shades of 2048" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">50 Shades of 2048<span>Game interface</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/2plus5times3.webp" alt="Control panel with a stop button and a grid of timer buttons" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">(10 + 2) x 5<span>Designed and coded</span></figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel__nav">
|
|
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">‹</span></button>
|
|
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">›</span></button>
|
|
</div>
|
|
</div>
|
|
<p class="col-lg-9">Interfaces, button states, and the marks that go with them. Some of these we coded end to end; others are built to look real long before they ship.</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.webp" alt="Loren Kincaid custom motorcycle painting advertisement" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Loren Kincaid<span>Print Ad</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/printmacchiariniad.webp" alt="Macchiarini Metalworks gallery advertisement" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Macchiarini Metalworks<span>Print Ad</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/printtiresad.png" alt="K.C. Engineering tire and modification advertisement" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">K.C. Engineering<span>Print Ad</span></figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel__nav">
|
|
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">‹</span></button>
|
|
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">›</span></button>
|
|
</div>
|
|
</div>
|
|
<p class="col-lg-9">The gallery shows the ads; we also do flyers, postcards, business cards, letterhead, and product design. Every format has a job, and 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.webp" alt="Wireframe interior model with a staircase" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">'78 Williams<span>Interior model</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/3dabandoned.webp" alt="Exterior model of a small abandoned building" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Abandoned building<span>Exterior model</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/3dcart.webp" alt="Render of the upscale food cart proposal" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Upscale Food Cart<span>Design proposal</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/3dcoop.webp" alt="Cutaway model of a chicken coop" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Chicken coop<span>Model</span></figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel__nav">
|
|
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">‹</span></button>
|
|
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">›</span></button>
|
|
</div>
|
|
</div>
|
|
<p class="col-lg-9">Models for real products: a chicken coop, a food cart, 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">Editorial, documentation, and sales copy: we write it, we edit it, and we lay it out.</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/writtensamsrules.webp" alt="Book cover of Sam's Rules of Money by Sam Pintoff" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Sam's Rules of Money<span>Book editing and illustrations</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/printylemcover.webp" alt="YLEM Journal cover, volume 29 number 10" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">YLEM Journal<span>Editing and cover design</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/writtenearplugs.webp" alt="Urban Moto page carrying the earplug feature" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Earplug feature<span>Article, Urban Moto, February 2007</span></figcaption>
|
|
</figure>
|
|
<figure class="carousel__item">
|
|
<div class="carousel__media"><img src="img/writtenstructions.webp" alt="Printed quick start guide for the Napwell sleep mask" loading="lazy" width="800" height="600"></div>
|
|
<figcaption class="carousel__caption">Napwell quick start guide<span>Instructions</span></figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="carousel__nav">
|
|
<button class="carousel__btn" type="button" data-carousel-prev aria-label="Previous items"><span aria-hidden="true">‹</span></button>
|
|
<button class="carousel__btn" type="button" data-carousel-next aria-label="Next items"><span aria-hidden="true">›</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">Got a weird project? Give it to us.</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">© <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>
|