reworked some verbiage and added captions
This commit is contained in:
parent
6d8f644802
commit
8a7c3eabf4
26 changed files with 612 additions and 96 deletions
14
about.html
14
about.html
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/about.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="About | 2RE03">
|
||||
<meta property="og:description" content="About 2RE03: a design studio with three decades of experience across web, print, logos, 3D modeling, and writing.">
|
||||
<meta property="og:url" content="https://2re03.com/about.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Case Studies | 2RE03">
|
||||
<meta property="og:description" content="Case studies from 2RE03: web design, logos, print, 3D modeling, and written work.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/jensens-red-barn.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Jensen's Red Barn | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Jensen's Red Barn case study: Web design by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/jensens-red-barn.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/mask-aid-project.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Mask Aid Project | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Mask Aid Project (M.A.P.) case study: website, video, and crowdfunding campaign by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/mask-aid-project.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/mehavior.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Mehavior | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Mehavior case study: app interface, identity, and pitch material by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/mehavior.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/one-womans-art-and-magic.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="1 Woman's Art and Magic | Case Study | 2RE03">
|
||||
<meta property="og:description" content="1 Woman's Art and Magic case study: a two-book art series and website for painter Joanna Signer, by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/one-womans-art-and-magic.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/sams-rules.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Sam's Rules | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Sam's Rules case study: Design and writing by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/sams-rules.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<title>Silver Lining | Case Study | 2RE03</title>
|
||||
<meta name="description" content="Silver Lining case study: Logo & identity by 2RE03.">
|
||||
<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/case-studies/silver-lining.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Silver Lining | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Silver Lining case study: Logo &amp; identity by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/silver-lining.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/teach-each-other-ai.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Teach Each Other AI | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Teach Each Other AI case study: Web design by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/teach-each-other-ai.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/upscale-food-cart.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Upscale Food Cart | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Upscale Food Cart case study: a 3D design proposal by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/upscale-food-cart.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/urban-moto.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Urban Moto | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Urban Moto case study: print design and art direction for a motorcycle magazine, by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/urban-moto.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>
|
||||
|
|
@ -46,25 +60,20 @@
|
|||
<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="row row-cols-1 row-cols-sm-3 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">
|
||||
<img src="../img/printtiresad.png" alt="K.C. Engineering tire advertisement" width="800" height="600">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col">
|
||||
<figure class="card-work card-work--frame mb-0">
|
||||
<img src="../img/printkincaidad.webp" alt="Urban Moto print advertisement" width="800" height="600">
|
||||
<img src="../img/printkincaidad.webp" alt="Loren Kincaid motorcycle painting advertisement" width="800" height="600">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col">
|
||||
<figure class="card-work card-work--frame mb-0">
|
||||
<img src="../img/printmacchiariniad.webp" 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.webp" alt="Urban Moto print advertisement" width="800" height="600">
|
||||
<img src="../img/printmacchiariniad.webp" alt="Macchiarini Metalworks advertisement" width="800" height="600">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/case-studies/victoria-fuller.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Victoria Fuller | Case Study | 2RE03">
|
||||
<meta property="og:description" content="Victoria Fuller case study: Web Design by 2RE03.">
|
||||
<meta property="og:url" content="https://2re03.com/case-studies/victoria-fuller.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>
|
||||
|
|
|
|||
14
contact.html
14
contact.html
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/contact.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Contact | 2RE03">
|
||||
<meta property="og:description" content="Contact 2RE03 about a web design, logo, print, 3D modeling, or written project.">
|
||||
<meta property="og:url" content="https://2re03.com/contact.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>
|
||||
|
|
|
|||
|
|
@ -276,6 +276,9 @@ a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
|
|||
.text-cream { color: var(--brand-cream) !important; }
|
||||
.eyebrow-ink { color: var(--brand-ink) !important; }
|
||||
|
||||
/* A short list of client questions, one per line (homepage closing CTA). */
|
||||
.cta-questions li + li { margin-top: 0.35rem; }
|
||||
|
||||
/* --- Case studies (Collins-style typographic index) ---------------------- */
|
||||
.case-list {
|
||||
list-style: none;
|
||||
|
|
@ -395,6 +398,22 @@ a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
|
|||
}
|
||||
.carousel__item:hover .carousel__media img { transform: scale(1.04); }
|
||||
|
||||
/* Captions name the piece under each card. Always visible, so they work on
|
||||
touch devices, where a hover-only caption would never be seen. */
|
||||
.carousel__caption {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.carousel__caption span {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
color: var(--brand-muted);
|
||||
}
|
||||
|
||||
.carousel__nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
BIN
img/apple-touch-icon.png
Normal file
BIN
img/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
img/favicon.ico
Normal file
BIN
img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
4
img/favicon.svg
Normal file
4
img/favicon.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="2RE03"><title>2RE03</title>
|
||||
<rect width="512" height="512" rx="112" fill="#2ee666"/>
|
||||
<path d="M152.79686274509805 399.36V365.62823529411764Q152.79686274509805 336.3137254901961 162.43450980392157 316.83764705882356Q172.07215686274512 297.361568627451 190.34352941176473 284.71215686274513Q208.61490196078432 272.0627450980392 235.11843137254903 264.0313725490196L262.02352941176474 255.59843137254902Q276.881568627451 250.77960784313726 286.9207843137255 243.7521568627451Q296.96000000000004 236.72470588235294 302.38117647058823 226.68549019607843Q307.8023529411765 216.64627450980393 307.8023529411765 203.79607843137254V202.18980392156863Q307.8023529411765 182.1113725490196 294.1490196078431 170.26509803921567Q280.4956862745098 158.41882352941175 256.80313725490197 158.41882352941175Q233.51215686274512 158.41882352941175 219.2564705882353 171.06823529411764Q205.0007843137255 183.71764705882353 205.0007843137255 207.41019607843137V214.638431372549H153.60000000000002V208.21333333333334Q153.60000000000002 177.69411764705882 167.25333333333336 156.41098039215686Q180.9066666666667 135.1278431372549 204.39843137254906 123.88392156862744Q227.8901960784314 112.63999999999999 256.80313725490197 112.63999999999999Q285.7160784313726 112.63999999999999 309.0070588235294 123.68313725490194Q332.2980392156863 134.7262745098039 345.7505882352941 154.6039215686274Q359.203137254902 174.48156862745097 359.203137254902 201.38666666666666V205.40235294117647Q359.203137254902 232.30745098039216 348.16 250.98039215686273Q337.11686274509805 269.6533333333333 318.24313725490197 281.49960784313726Q299.3694117647059 293.3458823529412 275.27529411764704 300.9756862745098L249.57490196078433 309.0070588235294Q232.30745098039216 314.2274509803922 222.66980392156864 320.4517647058824Q213.03215686274513 326.67607843137256 209.2172549019608 334.1050980392157Q205.4023529411765 341.53411764705885 205.4023529411765 351.97490196078434V353.5811764705883H356.7937254901961V399.36Z" fill="#0e1511"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
BIN
img/og-image.png
Normal file
BIN
img/og-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
25
index.html
25
index.html
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="2RE03 | Web design, and everything else">
|
||||
<meta property="og:description" content="2RE03 is a design team for the web, and everything around it: websites, logos, print, 3D modeling, and editorial.">
|
||||
<meta property="og:url" content="https://2re03.com/">
|
||||
<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>
|
||||
|
|
@ -253,9 +267,14 @@
|
|||
<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>
|
||||
<h2 class="mb-3">Have something that needs making?</h2>
|
||||
<ul class="lead text-body-secondary list-unstyled cta-questions mb-3">
|
||||
<li>A website that's embarrassing you?</li>
|
||||
<li>A product that needs explaining?</li>
|
||||
<li>An idea that doesn't fit neatly into a service category?</li>
|
||||
</ul>
|
||||
<p class="lead text-body-secondary mb-4">Tell us what you're trying to do. We'll figure out what needs
|
||||
to be made.</p>
|
||||
<a class="btn btn-brand btn-lg" href="contact.html">Start a project</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,15 @@
|
|||
- Until approval, leave finished work in the working tree as uncommitted changes, and say plainly what is sitting there waiting.
|
||||
|
||||
## 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.
|
||||
**Copy pass 1 and the work-caption work both landed (uncommitted).** A working static site on a locally vendored Bootstrap 5.3.3, with custom CSS/JS and a live Web3Forms contact page, a **Collins-inspired Case Studies feature** (typographic index + 10 detail pages), the first copy pass out of `memory-bank/todo.md` (homepage closing CTA, a new **Workflow** band on `services.html`, the work-page hook), the favicon and social card, and captions on all 26 `work.html` gallery figures - re-worded on 2026-09-22 to the scope the user confirmed from their own read-through, which also moved the Urban Moto earplug article and the YLEM Journal cover into the **Words** gallery. Next is user sign-off on the copy, confirmation of the caption names that were read off the artwork, captions for the case-study grids, and deploying the new assets.
|
||||
|
||||
## Recent Changes
|
||||
- **2026-09-22** - **Section copy brought in line with the captions, and the last naming questions settled.** Four `work.html` blurbs were re-voiced so nothing contradicts the caption above it: the **Words** intro ("Editorial, documentation, and sales copy: we write it, we edit it, and we lay it out."), the **App Design** blurb (some pieces were "coded end to end", the rest "built to look real long before they ship"), the **Print** blurb (leads with the ads the gallery shows, keeps flyers, postcards, business cards, letterhead and product design as capability) and the **Logos** intro (", and the occasional title slide", so the Dat Art slide reads as deliberate). The Dat Art caption became "Presentation for Motion Labs" with a matching alt; "a pretzel stand" became **"a food cart"** in `work.html` and `services.html`, matching the render (labelled "Gourmet Pasteles and Churros") and the Upscale Food Cart case study. The user confirmed **YLEM stays in both galleries** and that **`2plus5times3.webp` keeps its name** with the caption `(10 + 2) x 5` authoritative. Verified: all seven new strings render and all five old ones are gone, 26 figures over 26 distinct images with one caption each, tags balance and every reference resolves across all 16 pages, no em dashes, galleries re-measured in headless Chrome (Print and App Design `overflow=0` with both arrows disabled, Words 292px with only "next" enabled) and screenshot-checked at 1280px and 390px. **Staged, awaiting the user's commit.**
|
||||
- **2026-09-22** - **Captions re-worded to the scope the user confirmed, and two pieces moved to Words.** The user read the captions back against the archive and corrected the scope on six of them: **Back That Ass Up** is not a plain identity but the mark for a **political campaign art show** (which is why it is in US-flag colours), **Mehavior** was **UX and UI**, **(10 + 2) x 5** was **designed and coded** end to end, and the three ads - Loren Kincaid, Macchiarini Metalworks, K.C. Engineering - are all plainly **Print Ad** (capital A, as specified in the brief). **Sam's Rules of Money** is "Book editing and illustrations", which the old "Book cover" hid (the user edited the book *and* its illustrations). Two pieces moved into the **Words** gallery, on the rule that a piece belongs to the category of its deliverable, not of the paper it landed on: `writtenearplugs.webp` ("Article, Urban Moto, February 2007") and `printylemcover.webp` ("Editing and cover design" - the user edited the whole magazine, cover included). Print now holds 3 items, all print ads; Words holds 4, ordered book, magazine, article, guide. Nothing else references those two files, so both galleries were the only edits. Verified: 26 figures over 26 distinct images, one caption each, exactly two references to the moved files (both in Words), tags balance and every reference resolves across the 16 pages, no em dashes, and the carousels were measured in a headless browser - Print is now `scrollWidth == clientWidth` with both arrows disabled (matching App Design, so 3 items leaves no dead control) while Words overflows by 292px with only "next" enabled - plus screenshot checks of the Print and Words bands at 1280px and 390px. Build intermediates in `.tmp-captions/` were deleted. **Uncommitted.**
|
||||
- **2026-09-22** - **Work galleries captioned, and the earplug piece moved.** All 26 `work.html` figures are now `<figure>` elements carrying a `.carousel__caption` (piece name in semibold ink, format on a muted second line), styled by two new rules in `css/style.css` and always visible rather than hover-only, because hover does not exist on touch. The caption copy was written from the artwork itself after reviewing a labelled contact sheet of all 26 images, which caught a swap in the source set: `writtenearplugs.webp` is the **Urban Moto earplug feature** (page 39, February 2007) and `writtenstructions.webp` is the **Napwell quick start guide**. Per the backlog item, `writtenearplugs.webp` moved out of the Urban Moto case-study grid into the **Print** gallery, and that grid changed from `row-cols-sm-2` to `row-cols-sm-3` so its three remaining ads (K.C. Engineering, Loren Kincaid, Macchiarini) sit in one clean row with specific alts. No caption carries an author byline (see the attribution rule). Verified: tags balance and every reference resolves across the 16 pages, 26 figures over 26 distinct images with one caption each and no duplicates, screenshots of the Logos, Print and Words galleries at 1280px and 390px plus the Urban Moto grid, and a local 200 on every page. Build intermediates in `.tmp-captions/` were deleted. **Uncommitted.**
|
||||
- **2026-09-22** - **Open Graph / social image added, and the live domain recorded** (second Assets item). `img/og-image.png` is a 1200x630 card built to match the site's hero rather than a generic graphic: the 120 degree green gradient, the faint ink dot grid at an 18px pitch, the `DESIGN STUDIO` eyebrow with tracking, the `2RE03` wordmark, the hero line "A design team for the web, and everything around it.", `2re03.com`, and a 130px strip of six real work tiles (`collage-1..6.webp`) under a green wash (0.86 to 0.95) so it reads as texture and not noise. Rendered with PIL from the same instanced fonts the site uses (Space Grotesk 700, Inter 500/600), with the layout tuned against measured ink bands instead of by eye (element gaps 34 / 32 / 12 / 29 px, and 34 px of clear space above the strip). All 16 pages now carry `rel="canonical"`, the full `og:*` set (including `og:image:width`/`height`/`alt`) and `twitter:card=summary_large_image`, with titles and descriptions reused from each page's own `<title>` and meta description so there is one source of truth per page. **The live URL is https://2re03.com/**, and the host serves `.html` URLs (`/work` 404s while `/work.html` 200s), so canonicals use the `.html` form with the bare root for the homepage. Verified: every page has exactly one of each tag, `og:url` equals that page's canonical, the declared image size matches the file (1200x630), tags balance, no em dashes, every reference resolves, and all pages plus the four new assets return HTTP 200. Note the live site still 404s on the new files because they are not deployed yet. **Uncommitted.**
|
||||
- **2026-09-22** - **Favicon added** (first item of the Assets batch, and the first thing built after the copy pass). `img/favicon.svg` is a `#2ee666` rounded tile carrying the digit `2` as **outline paths** in brand ink, so it renders identically with no client font; `img/favicon.ico` holds 48/32/16 px rasters of the same mark; `img/apple-touch-icon.png` is a 180x180 square, opaque version for iOS (which applies its own corner mask). The outlines came from the site's own wordmark font: `fonts/SpaceGrotesk-latin.woff2` instanced at `wght=700` with `fontTools.varLib.instancer`, because that file is a variable font whose default instance is Light 300. Checks run: ink centred on the tile within half a pixel and the digit at ~56% of the tile, legible at 16 px, all 16 pages declare the three icons with relative paths (`img/...` at the root, `../img/...` in `case-studies/`), tags still balance, every reference resolves, and the three assets serve HTTP 200. Recipe documented in `techContext.md` -> Icon & Social Assets. Build intermediates were kept in a temporary in-repo folder (`.tmp-favicon/`) and deleted. **Uncommitted.**
|
||||
- **2026-09-22** - **Copy pass 1 from `memory-bank/todo.md` implemented** (all four `Now` items), and this memory bank updated to match. Wording came from the brief, re-voiced from first person to the studio "we", with no em dashes introduced. Details: the homepage closing CTA in `index.html` is now "Have something that needs making?" followed by the three client questions (a `list-unstyled` list at `.lead` size) and "Tell us what you're trying to do. We'll figure out what needs to be made.", with a one-line `.cta-questions li + li` spacing helper in `css/style.css`; `services.html` gained a **Workflow** band between the Process section and the closing CTA (Old workflow / AI-assisted workflow / Finished result, the middle card dark via `bg-ink text-cream`) carrying the "we've figured out how to use AI to dramatically accelerate the design and development process without turning the result into generic AI slop" line; and `work.html`'s closing band line became "Got a weird project? Give it to us." Verified: HTML tags balance on every touched page, no em dashes (character or entity), every relative `href`/`src` resolves, all pages/assets return HTTP 200 locally, and the two new sections were screenshot-checked at 1280px and 390px (the dark middle card and the mobile stacking both render correctly). **Uncommitted; nothing was committed or pushed.**
|
||||
- **2026-09-22** - **Backlog moved into the memory bank:** `TODO.md` at the repo root became **`memory-bank/todo.md`** (lowercase filename), so the backlog now sits with the other memory-bank files. References in `activeContext.md`, `progress.md`, and `techContext.md` were repointed. The site itself was untouched (no page ever linked to `TODO.md`).
|
||||
- **2026-09-22** - User set a **code and writing style requirement**: **soft wrap**. Do not hard-wrap lines to fit a column limit (there is no ~80-char limit) in code or in memory-bank writing; let the editor soft wrap long lines and break lines only at structural boundaries. Existing hard-wrapped files are left alone, with no reformat pass.
|
||||
- **2026-09-22** - User set a second **working agreement**: **do not edit files
|
||||
|
|
@ -122,10 +125,11 @@ Next is user review of copy/design and the deployment decision.
|
|||
|
||||
## Next Steps
|
||||
> **The full backlog lives in `memory-bank/todo.md`.** This section keeps only the current priorities; new items go into `todo.md` first.
|
||||
1. Review copy + design with the user; refine tone-matched text as needed.
|
||||
2. Add any real assets (favicon, OG/social image, logo).
|
||||
3. Populate galleries with additional/real work items and captions.
|
||||
4. Record the published URL here once it is confirmed.
|
||||
1. Get user sign-off on copy pass 1 (homepage CTA, `services.html` Workflow band, `work.html` hook); refine where it reads wrong.
|
||||
2. Assets batch: **favicon and Open Graph image are done** (2026-09-22), with the icons and the full `og:*`/`twitter:*` set declared on all 16 pages against `https://2re03.com/`. The only item left is confirming whether a real 2RE03 logo file exists.
|
||||
3. Per-image captions and more/real gallery work. `work.html` is captioned (2026-09-22) and its blurbs now match the captions; what remains is the case-study grids (9 single-image pages plus Urban Moto's 3-up ad grid, none captioned) and confirming the handful of names read off the artwork (Argent, Drinking About..., D.R.I.V.E., 50 Shades of 2048, '78 Williams, `3dabandoned`, and the unnamed "Sales page").
|
||||
4. Polish items from `todo.md`: the low-resolution Urban Moto hero, the case-study grid captions, a possible motion/video section (the IKEHU video is not on this machine), and the sales-funnel redesign (which needs the offer defined first).
|
||||
5. Deploy: the batch is **staged** (2026-09-22) with its message pre-filled in `.git/COMMIT_EDITMSG`, waiting on the user to run `git commit` and then upload the repo root by hand. Probed live on 2026-09-22: the published site is byte-identical to the last commit, `img/favicon.svg`, `img/favicon.ico` and `img/og-image.png` all 404, and no page declares `og:image` yet.
|
||||
|
||||
## Active Decisions & Considerations
|
||||
|
||||
|
|
@ -156,12 +160,21 @@ Next is user review of copy/design and the deployment decision.
|
|||
| 22 | **No editing files outside the project folder** (`/home/torrey/Documents/Sites/2RE03`); reads elsewhere are fine, writes are not, so ask first if a task seems to need one | ✅ Active rule |
|
||||
| 23 | **Soft wrap: no hard wrapping at a column limit**, in code and in memory-bank writing; a break marks a structural boundary, not a width boundary. Going forward only, with no reformat pass over existing files | ✅ Active convention |
|
||||
| 24 | Backlog lives at **`memory-bank/todo.md`** (moved out of the repo root and lowercased on 2026-09-22) | ✅ Done |
|
||||
| 25 | Live site = **https://2re03.com/** and the host serves `.html` URLs, so canonical and Open Graph tags use absolute `.html` URLs (bare root for the homepage) | ✅ Done |
|
||||
| 26 | Site assets are generated from the site's own fonts: the favicon from instanced Space Grotesk outlines, the social card rendered with PIL to match the hero. Recipes in `techContext.md` | ✅ Done |
|
||||
| 27 | Work-gallery captions are written from what is actually in the image (client and format where known), always visible rather than hover-only, and never carry an author byline | ✅ Done |
|
||||
| 28 | A piece is filed under the gallery of its **deliverable**, not the paper it was printed on, so the Urban Moto earplug article and the YLEM Journal cover live in **Words** rather than Print | ✅ Done |
|
||||
| 29 | One client's work may legitimately appear twice when it serves two galleries: the YLEM identity mark stays in **Logos** and the journal cover stays in **Words** (user-confirmed 2026-09-22) | ✅ Done |
|
||||
| 30 | `webdatavisart.webp` stays in **Logos** and is captioned as a **presentation** ("Presentation for Motion Labs") rather than a mark, and the Logos intro says so (", and the occasional title slide") | ✅ Done |
|
||||
| 31 | A section blurb may claim only what the gallery under it actually shows; wider capability lists live on the service cards, not above a gallery | ✅ Done |
|
||||
| 32 | `2plus5times3.webp` keeps its file name; the caption **(10 + 2) x 5** is treated as authoritative, and neither is treated as a typo | ✅ Done |
|
||||
|
||||
### Open Questions (remaining)
|
||||
1. **Real assets:** any real favicon, Open Graph/social image, or logo to add?
|
||||
2. **Copy approval:** review/refine the drafted company-voice copy?
|
||||
3. **Gallery content:** add more work items/captions beyond the reference set?
|
||||
4. **Live URL:** where is the published site? Nothing in the repo states it.
|
||||
1. **Real logo:** the favicon and the Open Graph image were both built on 2026-09-22, but does a real 2RE03 logo file exist anywhere? Nothing has turned up in the repo or the asset backup.
|
||||
2. **Copy approval:** review/refine the drafted company-voice copy (copy pass 1 landed 2026-09-22 and is still awaiting sign-off).
|
||||
3. **Gallery content:** more work items, plus captions for the case-study grids? The `work.html` galleries were captioned on 2026-09-22, but several of those names were read off the artwork and need confirming (Argent, Drinking About..., D.R.I.V.E., 50 Shades of 2048, '78 Williams, `3dabandoned`, and the unnamed "Sales page"). The Dat Art filing is settled: the title slide stays in **Logos**, captioned as a presentation rather than a mark.
|
||||
4. **Live URL:** answered, **https://2re03.com/** (recorded 2026-09-22; the host serves `.html` URLs).
|
||||
5. **Deploy cadence:** should the new icons and social card go live now, and is deploying a manual upload?
|
||||
|
||||
## Important Patterns & Preferences
|
||||
- **Git is user-gated:** never `git commit` or `git push` without explicit approval
|
||||
|
|
|
|||
|
|
@ -25,24 +25,80 @@
|
|||
(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/`.
|
||||
- **Copy pass 1** (2026-09-22, uncommitted): the homepage closing CTA is now a
|
||||
four-question invitation ("Have something that needs making?"), `services.html`
|
||||
has a **Workflow** band telling the old workflow -> AI-assisted workflow ->
|
||||
finished result story (including the "without turning the result into generic AI
|
||||
slop" claim), and `work.html` closes with "Got a weird project? Give it to us."
|
||||
- **Favicon** (2026-09-22, uncommitted): `img/favicon.svg` (a green rounded tile
|
||||
with the digit `2` as outline paths, so it needs no client font),
|
||||
`img/favicon.ico` (48/32/16), and `img/apple-touch-icon.png` (180x180, square
|
||||
and opaque), all declared on the 16 pages with relative paths. Derived from the
|
||||
site's own wordmark font instanced at `wght=700`.
|
||||
- **Open Graph / social image** (2026-09-22, uncommitted): `img/og-image.png`
|
||||
(1200x630), a green dot-grid card with the wordmark, the hero line, the domain,
|
||||
and a washed strip of six real work tiles. All 16 pages declare the icons, a
|
||||
canonical URL, the full `og:*` set and `twitter:card`, all absolute against
|
||||
**https://2re03.com/** (which serves `.html` URLs).
|
||||
- **Captioned work galleries** (2026-09-22, staged): every one of the 26
|
||||
`work.html` figures is a `<figure>` with a `.carousel__caption` (piece name +
|
||||
what 2RE03 did, always visible). The user then corrected six of the captions
|
||||
and re-filed two pieces, and the section blurbs were re-voiced to match, so the
|
||||
current state is: the **Urban Moto earplug article** (`writtenearplugs.webp`)
|
||||
and the **YLEM Journal cover** (`printylemcover.webp`) sit in **Words** (4
|
||||
items: Sam's Rules, YLEM Journal, Earplug feature, Napwell quick start guide),
|
||||
**Print** holds 3 items, all print ads (Loren Kincaid, Macchiarini Metalworks,
|
||||
K.C. Engineering), the **App Design** sub-lines read "Designed and coded" for
|
||||
(10 + 2) x 5 and "UX and UI" for Mehavior, and each gallery's closing paragraph
|
||||
now describes only what that gallery shows.
|
||||
|
||||
## Current Status
|
||||
**Stage:** Built, verified, committed, and **published**. What remains is
|
||||
copy/design review and the optional polish tracked in `memory-bank/todo.md`.
|
||||
**Stage:** Built, verified, committed, and **published**, and now through a first
|
||||
**copy pass** (2026-09-22): the homepage closing CTA, a new **Workflow** band on
|
||||
`services.html`, and the `work.html` hook, all out of the four `Now` briefs in
|
||||
`memory-bank/todo.md`. On top of that, the work galleries were captioned, those
|
||||
captions were re-worded to the scope the user confirmed, and the section blurbs
|
||||
were re-voiced to match, with the earplug article and the YLEM Journal cover
|
||||
re-filed from Print into Words. That whole batch is **staged** as of 2026-09-22
|
||||
with its commit message pre-filled, waiting on the user to commit and upload by
|
||||
hand; the live site is still the previous commit. What remains afterwards is user
|
||||
sign-off on the copy, the case-study grid captions, a few caption names that were
|
||||
read off the artwork, the Assets batch, and the Content/Polish items in
|
||||
`memory-bank/todo.md`.
|
||||
|
||||
## What's Left To Build
|
||||
> The full, current backlog lives in **`memory-bank/todo.md`**; this section keeps only the headline items.
|
||||
- User review/refinement of copy + visual design.
|
||||
- Optional real assets: favicon, Open Graph/social image, logo.
|
||||
- More/real portfolio items and per-image captions.
|
||||
- Optional real assets: a real 2RE03 logo (the favicon and Open Graph image both
|
||||
landed on 2026-09-22).
|
||||
- More/real portfolio items, and captions for the case-study grids (the
|
||||
`work.html` galleries were captioned on 2026-09-22).
|
||||
|
||||
## Known Issues / Risks
|
||||
- Copy is drafted in company voice but **not yet approved** by the user.
|
||||
- Copy is drafted in company voice and the first pass (2026-09-22: homepage CTA,
|
||||
services Workflow band, work-page hook) is **not yet signed off** by the user.
|
||||
- The favicon and the Open Graph image both exist (2026-09-22), and every page
|
||||
declares the icons plus the full `og:*`/`twitter:*` set against
|
||||
`https://2re03.com/`. Any real 2RE03 logo still does **not** exist.
|
||||
- The new assets are **not deployed**: as of 2026-09-22 the live site still returns
|
||||
404 for `img/favicon.svg`, `img/favicon.ico` and `img/og-image.png`, so social
|
||||
scrapers will not see the card until the site is next uploaded.
|
||||
- No IKEHU video is present on this machine, so the possible motion/video section
|
||||
cannot be built until the file or a URL is supplied.
|
||||
- Case study hero backgrounds are generated JPEGs; **Urban Moto's is low
|
||||
resolution** (450px native at its widest).
|
||||
- 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.
|
||||
- Galleries reuse the reference image set. The `work.html` galleries carry
|
||||
per-image captions and matching blurbs as of 2026-09-22, but several of those
|
||||
names were read off the artwork itself and still need confirming (Argent,
|
||||
Drinking About..., D.R.I.V.E., 50 Shades of 2048, '78 Williams, `3dabandoned`,
|
||||
and the unnamed `websinosalescopy` "Sales page"). The case-study grids are not
|
||||
captioned at all yet: 9 pages hold a single `figure.card-work` beside the copy
|
||||
and Urban Moto holds a 3-up grid, and `.card-work` has no caption style.
|
||||
- No flyer, postcard, business card or letterhead artwork exists on this machine
|
||||
(repo and external backup both checked on 2026-09-22), so those formats are
|
||||
capability claims on the service cards and cannot appear in a gallery.
|
||||
- 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.
|
||||
|
|
@ -198,6 +254,16 @@ copy/design review and the optional polish tracked in `memory-bank/todo.md`.
|
|||
`activeContext.md` (Working Agreements at the top, Recent Changes, and the
|
||||
decisions log), `projectbrief.md` (Ways of Working rule 8), `techContext.md` (Tool
|
||||
Usage Patterns), and here. No production files changed.
|
||||
- **2026-09-22** - **Captions re-worded to the user's read-through, and two pieces re-filed into Words.** The user checked the new `work.html` captions against the archive and corrected the scope on six of them, all of which were worded as though the piece were only a picture: **Back That Ass Up** is the identity for a **political campaign art show** (hence the US-flag mark; the sub-line now says "Political art show" and the alt names the campaign), **Mehavior** was **UX and UI**, and **(10+2) x 5** was **designed and coded** end to end rather than merely drawn. The three ads - Loren Kincaid, Macchiarini Metalworks, K.C. Engineering - were normalised to **"Print ad"** (the last had read "Tire advert"), and **Sam's Rules of Money** became "Book editing and illustrations", which the old "Book cover" hid because the user edited the book *and* its illustrations. Two further pieces moved from **Print** to **Words**, applying the rule that a piece is filed under the category of its deliverable rather than of the paper it landed on: `writtenearplugs.webp` is captioned "Article, Urban Moto, February 2007" and `printylemcover.webp` "Editing and cover design", since the user edited the whole magazine including the cover. Print now holds 3 items, all print ads; Words holds 4, ordered book, magazine, article, guide. A grep confirmed nothing outside `work.html` referenced either moved file, so the two galleries were the only edits. Verified: 26 figures over 26 distinct images with one caption each and no duplicates, exactly two references to the moved files (both now in Words), tags balance and every reference resolves across all 16 pages, no em dashes, and - instead of eyeballing the arrows - the carousels were **measured** in a headless Chrome eval: `Print design gallery` is now `scrollWidth == clientWidth` (1116px) with both arrows disabled, exactly like the 3-item `App design gallery`, so shortening a gallery to 3 items leaves no dead control, while `Words gallery` overflows by 292px with only "next" enabled and `Logo design gallery` by 1360px. The Print and Words bands were also screenshot-checked at 1280px and 390px. Build intermediates lived in `.tmp-captions/` inside the repo and were deleted. **Uncommitted.**
|
||||
|
||||
- **2026-09-22** - User set a **code and writing style requirement**: **soft wrap**. No hard wrapping to a column limit in code or in memory-bank writing; lines break only at structural boundaries. Applied going forward only, with no reformat pass over existing files (explicit user instruction). Recorded in `activeContext.md` (Recent Changes, Important Patterns & Preferences, decisions log), `projectbrief.md` (Ways of Working rule 9), and `techContext.md` (new Code Style section).
|
||||
- **2026-09-22** - **Backlog moved into the memory bank:** `TODO.md` at the repo root became **`memory-bank/todo.md`** (lowercase filename), so the backlog now lives alongside the other memory-bank files. Every reference was repointed (`activeContext.md` Recent Changes / Next Steps / decisions log / Important Patterns, `progress.md` Current Status + What's Left To Build, `techContext.md` Deployment + Code Style), and the move was recorded in `todo.md`'s own Done section. No site file referenced `TODO.md`, so the published site is unaffected. The move is **uncommitted** (working tree only).
|
||||
- **2026-09-22** - **Copy pass 1** (the whole `Now` section of `memory-bank/todo.md`) implemented and verified, then recorded in `todo.md` (items moved to Done) and here. `index.html`: the closing CTA is "Have something that needs making?" plus the three client questions and "Tell us what you're trying to do. We'll figure out what needs to be made.", supported by a one-line `.cta-questions li + li` rule in `css/style.css`. `services.html`: new **Workflow** band between Process and the closing CTA, three cards (Old workflow / AI-assisted workflow / Finished result) with the middle card dark, carrying the AI-acceleration line. `work.html`: the closing band line is now "Got a weird project? Give it to us." The briefs' first-person voice was converted to the studio "we" and no em dashes were introduced. Checks run: tag balance on all touched pages (`html.parser`), em-dash scan, every relative `href`/`src` resolves to an existing file, HTTP 200 across all six root pages plus sampled case-study pages/assets, and headless-Chrome screenshots reviewed at 1280px and 390px for the two new sections. Verification screenshots were written to `/tmp` (outside the repo) and are not part of the project. **Uncommitted; no commit or push.**
|
||||
- **2026-09-22** - **Favicon added** (first item of the Assets batch). Generated `img/favicon.svg`, `img/favicon.ico` (48/32/16) and `img/apple-touch-icon.png` (180x180), all from the site's own wordmark font: `fonts/SpaceGrotesk-latin.woff2` instanced at `wght=700` with `fontTools.varLib.instancer`, glyph outlines through `SVGPathPen`, rasterized with `rsvg-convert` and ImageMagick. The mark is a `#2ee666` rounded tile with the digit `2` in brand ink, chosen because the full wordmark and even `2RE` stop reading at 16 px. Verified: the ink is centred on the tile within half a pixel, the digit occupies ~56% of the tile and stays legible when rasterized at 16 px, all 16 pages declare the three icons with the right relative prefix, tags balance, every reference resolves, and each asset serves HTTP 200 with the expected MIME type. All build intermediates were kept inside the repo in `.tmp-favicon/` (never `/tmp`) and deleted afterwards, so no writes happened outside the project. Recipe recorded in `techContext.md` -> Icon & Social Assets. **Uncommitted.**
|
||||
- **2026-09-22** - **Open Graph / social image added, live domain recorded.** Built `img/og-image.png` (1200x630) with PIL to match the site's hero: the 120 degree green gradient, the 18px ink dot grid, the tracked `DESIGN STUDIO` eyebrow, the `2RE03` wordmark, the hero line, `2re03.com`, and a 130px strip of six real work tiles under a green wash. Fonts came from the same sources as the favicon (Space Grotesk instanced at 700, Inter at 500 and 600), and the layout was tuned against measured ink bands rather than by eye. Then added `rel="canonical"`, the full `og:*` set (with `og:image:width`/`height`/`alt`) and `twitter:card` to all 16 pages, reusing each page's own title and description. The user supplied the live URL, **https://2re03.com/**, and probing it showed the host serves `.html` URLs (`/work` 404s, `/work.html` 200s), which is why canonicals use the `.html` form with the bare root for the homepage. Verified: exactly one of each of the 11 tags per page, `og:url` matches each page's canonical, the declared 1200x630 matches the actual file, tags balance, no em dashes, all references resolve, and every page plus the four new assets return HTTP 200 locally. The live site still 404s on the new files because they have not been deployed. Build intermediates lived in `.tmp-og/` inside the repo and were deleted. **Uncommitted.**
|
||||
- **2026-09-22** - **Work captions, and the earplug move** (the last two Content/Polish items in `todo.md` that needed no new assets). All 26 `work.html` gallery figures became `<figure class="carousel__item">` blocks carrying a `.carousel__caption` (`Name<span>Format</span>`) under the `.carousel__media` frame, styled by two new rules in `css/style.css`: the name in semibold ink, the format on a muted second line, always visible rather than hover-only so it works on touch. `js/carousel.js` measures item width and position only, so the step and snap maths are untouched. The caption copy was written from the artwork itself after reviewing a labelled contact sheet of all 26 images (ImageMagick `montage`), which caught a swap in the source set: `writtenearplugs.webp` is the **Urban Moto earplug feature** (page 39, February 2007, headline "BIG EAR vs PLUGUP - Custom Fit EarPlugs", the written piece that gave the file its name) while `writtenstructions.webp` is the **Napwell quick start guide**. Per the backlog item, `writtenearplugs.webp` moved out of the Urban Moto case-study grid into the **Print** gallery (now 5 items), and that grid went from `row-cols-sm-2` to `row-cols-sm-3` so its three remaining ads sit in one clean row, with their generic alts made specific (K.C. Engineering, Loren Kincaid, Macchiarini). No caption carries an author byline. Verified: tags balance and every reference resolves across all 16 pages, exactly 26 figures over 26 distinct images with one caption each and no duplicates, headless-Chrome screenshots of the Logos, Print and Words galleries at 1280px and 390px plus the Urban Moto grid, and the local server returned 200 throughout. Build intermediates lived in `.tmp-captions/` inside the repo and were deleted. **Uncommitted.**
|
||||
|
||||
- **2026-09-22** - **Brief re-read: the two flagged caption strings settled, and `work.html` now matches the brief character for character.** The user re-sent the caption brief with `work.html` attached, which confirmed all seven items were already in place (political art show, UX and UI, designed and coded, three print ads, the earplug article and the YLEM Journal cover already re-filed into **Words**, Sam's Rules as editing plus illustrations) and settled the two strings that had been left open for them: the ads sub-line is written **"Print Ad"** with a capital A - the user's own rendering, kept verbatim, which makes it the page's only title-case sub-line - and the app is written **(10 + 2) x 5** with spaces around the operator. Both were changed in place; nothing else moved, no gallery changed size, and no other page, script, or asset was touched. Re-verified after the edit: 26 figures over 26 distinct images with one caption each and no duplicates, tags balance and every reference resolves across all 16 pages, no em dashes, and the galleries were **measured again** in a headless Chrome eval rather than assumed - `Print design gallery` stays `scrollWidth == clientWidth` with both arrows disabled and `Words gallery` keeps its 292px overflow with only "next" enabled, which is what the CSS predicts: `.carousel__item` is `flex: 0 0 auto; width: clamp(230px, 78vw, 340px)`, so caption copy cannot influence item width, the step, or the snap. **Uncommitted.**
|
||||
|
||||
- **2026-09-22** - **Section copy brought in line with the captions, and the last naming questions settled.** The pass that closed the gap the caption revision opened. Four `work.html` blurbs were re-voiced so nothing contradicts the caption above it: the **Words** intro is now "Editorial, documentation, and sales copy: we write it, we edit it, and we lay it out." (the old line claimed only writing, while YLEM Journal and Sam's Rules are editing work), the **App Design** blurb says some pieces were "coded end to end" and the rest "built to look real long before they ship" (the old line implied everything stopped at looking real), the **Print** blurb leads with the ads the gallery actually shows and keeps flyers, postcards, business cards, letterhead and product design as capability rather than as a description of the images, and the **Logos** intro adds ", and the occasional title slide" so the Dat Art slide in that gallery reads as deliberate. The Dat Art caption became **"Presentation for Motion Labs"** with a matching alt, since the image is a title slide and not a mark, and **"a pretzel stand" became "a food cart"** in both `work.html` and `services.html`, matching what the render shows (the cart is labelled *Gourmet Pasteles and Churros*) and the Upscale Food Cart case study. Three questions were settled by the user in the same exchange: **YLEM stays in both galleries**, the **`2plus5times3.webp` file name stays as-is** with the caption `(10 + 2) x 5` treated as authoritative, and the **Dat Art** piece stays in Logos. Verified: all seven new strings render and all five replaced strings are gone from both files, 26 figures over 26 distinct images with one caption each, tags balance and every reference resolves across all 16 pages, no em dashes, galleries re-measured in headless Chrome (unchanged: Print and App Design `overflow=0` with both arrows disabled, Words 292px with only "next" enabled) and screenshot-checked at 1280px and 390px for the Logos, Print and Words bands. The external asset backup was also inventoried, which established that **no flyer, postcard, business card or letterhead artwork exists anywhere on this machine**. The working tree was then **staged** with this batch's message pre-filled into `.git/COMMIT_EDITMSG`, awaiting the user's own commit; nothing was committed or pushed.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# System Patterns - 2RE03 Portfolio Site
|
||||
|
||||
> Architecture, key technical decisions, patterns, component relationships, and
|
||||
> critical paths. Last updated: 2026-09-10.
|
||||
> critical paths. Last updated: 2026-09-22.
|
||||
|
||||
## Status
|
||||
**Implemented (v0 scaffold).** The patterns below are reflected in the built
|
||||
|
|
@ -36,12 +36,38 @@ files, not just proposed.
|
|||
(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.
|
||||
- **Carousel captions (work page galleries):** every `.carousel__item` is a
|
||||
`<figure>` holding a `.carousel__media` frame plus a `.carousel__caption`
|
||||
(`Name<span>Format</span>`): the piece's name in semibold ink, the format on a
|
||||
muted second line. Captions are always visible, never hover-only, because hover
|
||||
does not exist on touch. The text describes what is actually in the image (or
|
||||
the client and format, where those are known) and never carries the author
|
||||
byline. The second line states *what 2RE03 did on the piece*, not the file's
|
||||
medium, so "(10 + 2) x 5" reads "Designed and coded" and "Mehavior" reads "UX and
|
||||
UI". Sub-lines are sentence case (the page's other examples: "Identity", "Online
|
||||
store", "Interior model"), the one exception being the three print ads, which the
|
||||
user specified as **"Print Ad"** and which were kept verbatim. A piece is filed
|
||||
under the category of its deliverable, not of the paper
|
||||
it landed on: the Urban Moto earplug article and the YLEM Journal cover sit in
|
||||
**Words** even though both exist as printed pages. A section's blurb may claim only what the gallery under it shows, so capability lists (flyers, postcards, business cards, letterhead) stay in the closing paragraph as capability, never as a description of the images. A caption's sub-line names the artifact type, so the Dat Art title slide reads "Presentation for Motion Labs" rather than a mark. `js/carousel.js` measures
|
||||
item width and position only, so captions cannot affect the step or snap maths.
|
||||
- **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).
|
||||
- **Workflow band (services):** a three-card comparison - **Old workflow** /
|
||||
**AI-assisted workflow** / **Finished result** - where the outer cards use
|
||||
`.card-service` and the middle card is the dark one (`bg-ink text-cream`), so
|
||||
the new step reads at a glance. Sits on `.bg-brand-soft` right after the
|
||||
numbered Process cards, which it deliberately does not duplicate (Process says
|
||||
what happens; this says how the making got faster).
|
||||
- **Question-list CTA (homepage):** `.cta-questions` is a `.list-unstyled` list at
|
||||
`.lead` size holding one client question per line, closing the homepage just
|
||||
above the `Start a project` button. Spacing comes from a single rule
|
||||
(`.cta-questions li + li { margin-top: 0.35rem; }`).
|
||||
- **Head metadata block (all 16 pages):** three icon links (`favicon.svg`, `favicon.ico`, `apple-touch-icon.png`), a `rel="canonical"`, the full `og:*` set (`type`, `site_name`, `title`, `description`, `url`, `image`, `image:width`, `image:height`, `image:alt`) and `twitter:card`. Canonical and `og:url`/`og:image` are absolute on `https://2re03.com/` (`.html` paths, bare root for the homepage), while asset hrefs stay relative (`img/...` at the root, `../img/...` in `case-studies/`). Titles and descriptions are reused from each page's own `<title>` and meta description, so there is still only one source of truth per page.
|
||||
- **Component reuse** via shared header/footer.
|
||||
|
||||
## Components & Relationships
|
||||
|
|
@ -49,10 +75,13 @@ files, not just proposed.
|
|||
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).
|
||||
`about`, `services` (web design lead, other services, process, workflow),
|
||||
`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.
|
||||
- **Galleries:** `work.html` renders each category as a carousel of captioned
|
||||
`.carousel__item` figures (name + format under the image); the case-study detail
|
||||
pages still use plain `.card-work` image grids.
|
||||
- **Form:** `contact.html` → `js/main.js` → Web3Forms API.
|
||||
|
||||
## File Structure
|
||||
|
|
@ -62,7 +91,9 @@ 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)
|
||||
img/* (23 reference designs + 7 site screenshots + 3 icon
|
||||
assets (favicon.svg, favicon.ico, apple-touch-icon.png)
|
||||
+ og-image.png, the 1200x630 social card)
|
||||
```
|
||||
|
||||
## Content/Data Structures (reference)
|
||||
|
|
@ -74,6 +105,10 @@ Category keys and image counts (source: `refrence/img/` + the carousel JSON in
|
|||
- `3d`: 4 images
|
||||
- `written`: 3 images
|
||||
|
||||
Live `work.html` counts (2026-09-22): web 5, logos 7, app 3, print 5, 3d 4,
|
||||
words 2. The Urban Moto earplug feature moved out of the Urban Moto case study
|
||||
into Print, so no image appears twice on the page.
|
||||
|
||||
## 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
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@ 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 files: 45 WebP plus `printtiresad.png` (10 case-study hero backgrounds,
|
||||
8 homepage collage tiles, 28 project/screenshot images)
|
||||
img/ 50 files: 45 WebP, `printtiresad.png`, 3 icon assets (`favicon.svg`,
|
||||
`favicon.ico`, `apple-touch-icon.png`), and the social card `og-image.png`.
|
||||
The 45 WebP cover 10 case-study hero backgrounds, 8 homepage collage tiles,
|
||||
and 28 project/screenshot images.
|
||||
```
|
||||
|
||||
No build step and no package manager - it is plain static HTML/CSS/JS.
|
||||
|
|
@ -67,9 +69,29 @@ No build step and no package manager - it is plain static HTML/CSS/JS.
|
|||
say `800x600`, and the hover-preview thumbnails say `88x66`. Those attributes are
|
||||
deliberate and are *not* expected to match the file's own dimensions.
|
||||
|
||||
## Icon & Social Assets
|
||||
- Icon files in `img/`, all derived from the site's own wordmark font:
|
||||
- `favicon.svg` - a `#2ee666` rounded tile (`rx` 112 of 512) holding the digit `2` as **outline paths** in brand ink (`#0e1511`), so it renders identically with no client font installed.
|
||||
- `favicon.ico` - the same mark rasterized at 48, 32, and 16 px, for older browsers and Windows pinned tabs.
|
||||
- `apple-touch-icon.png` - 180x180, square and opaque, because iOS applies its own corner mask.
|
||||
- Recipe (build-time only; no script is committed, matching the image pipeline above):
|
||||
1. Instance `fonts/SpaceGrotesk-latin.woff2` at `wght=700` with `fontTools.varLib.instancer`. This step is required: the file is a variable font whose default instance is Light (300), so an unmodified read renders the mark too thin beside the site's 700 headings.
|
||||
2. Take the `2` glyph's outlines through `fontTools.pens.svgPathPen.SVGPathPen` with a y-flip `TransformPen`, sizing the digit to ~56% of the tile and centring it on its ink bounds.
|
||||
3. Rasterize with `rsvg-convert`, then build the `.ico` with `convert -define icon:auto-resize=48,32,16`.
|
||||
- Rationale: the full `2RE03` wordmark is unreadable at 16 px and `2RE` is not much better, so the icon uses the single leading digit; ink-on-green mirrors the site's heading-on-green treatment.
|
||||
- Every page declares all three with relative paths (`img/...` at the root, `../img/...` in `case-studies/`). There is deliberately **no** separate root-level `favicon.ico` copy; browsers follow the declared tags.
|
||||
|
||||
### Social card (Open Graph)
|
||||
- `img/og-image.png` - **1200x630**, the 1.91:1 size the platforms expect.
|
||||
- Built to look like the site's hero rather than a generic card: the 120 degree green gradient, the faint ink dot grid at an 18px pitch, the `DESIGN STUDIO` eyebrow with 0.18em tracking, the `2RE03` wordmark, the hero line, `2re03.com`, and a 130px strip of six real work tiles (`collage-1..6.webp`, cropped to fill) under a green wash of 0.86 to 0.95 so it reads as texture rather than noise.
|
||||
- Rendered with PIL from the same instanced fonts (Space Grotesk 700 for the wordmark, Inter 500 for the hero line, Inter 600 for the eyebrow and the domain), with each element placed by its measured ink bounds instead of fixed offsets.
|
||||
- Every page declares it as `og:image` together with `og:image:width`, `og:image:height`, `og:image:alt` and `twitter:card=summary_large_image`, on absolute URLs.
|
||||
- The same generator can produce a per-project card from a case study's `hero-*.webp` plus its title if that is ever wanted; today every page shares this one card.
|
||||
|
||||
## Deployment
|
||||
- The site is **published** (hosted by the user). The live URL is not written down
|
||||
anywhere in this repo yet, so record it here once confirmed.
|
||||
- The site is **published at https://2re03.com/** (hosted by the user). Confirmed 2026-09-22.
|
||||
- The host serves **`.html` URLs**: `https://2re03.com/work.html` returns 200 while `https://2re03.com/work` returns 404. Canonical and Open Graph URLs therefore use the `.html` form, with the bare root (`https://2re03.com/`) for the homepage.
|
||||
- Deploys are **manual**. As of 2026-09-22 the live site still 404s on `img/favicon.svg`, `img/favicon.ico` and `img/og-image.png`, because the Assets batch had not been uploaded yet.
|
||||
- No build step, so a deploy is a straight copy of the repo root. Uploading the whole folder also puts `memory-bank/` (which now includes the backlog, `memory-bank/todo.md`), `.clinerules/`, and the site files on the server; that is intentional, not accidental.
|
||||
|
||||
## Dependencies
|
||||
|
|
|
|||
|
|
@ -8,32 +8,18 @@ Last updated: 2026-09-22.
|
|||
|
||||
## Now
|
||||
|
||||
- [ ] Add some copy somewhere, something like:
|
||||
```
|
||||
Have something that needs making?
|
||||
A website that's embarrassing you?
|
||||
A product that needs explaining?
|
||||
An idea that doesn't fit neatly into a service category?
|
||||
Tell us what you're trying to do. We'll figure out what needs to be made.
|
||||
```
|
||||
and
|
||||
```
|
||||
I've figured out how to use AI to dramatically accelerate the design/development process without turning the result into generic AI slop.
|
||||
```
|
||||
and something about the workflow: Old workflow → AI-assisted workflow → finished result
|
||||
|
||||
and something like "Got a weird project? Give it to us."
|
||||
Nothing queued. All four copy briefs (2026-09-22), the work-caption pass (2026-09-22), the caption revision the user called out from their own read-through (2026-09-22), and the section-copy pass that made the blurbs match those captions (2026-09-22) have all landed; see Done. The next candidates are the Assets and Content sections below, the case-study grid captions, and the deploy.
|
||||
|
||||
## Assets
|
||||
|
||||
- [ ] Favicon (there is none yet).
|
||||
- [ ] Open Graph / social share image.
|
||||
- [ ] A real 2RE03 logo, if one exists.
|
||||
- [ ] A real 2RE03 logo, if one exists. Nothing has turned up in the repo or the asset backup, so the site runs on the type wordmark plus the `2`-glyph favicon built on 2026-09-22.
|
||||
- [ ] **No flyer, postcard, business card or letterhead artwork exists anywhere on this machine** (checked the repo and the external asset backup on 2026-09-22: the only artwork is the 25-piece set in `img/`). The service cards and the homepage may still list those formats as capability, but no gallery can show them until new files are supplied. This is why the `work.html` Print blurb is scoped to the ads.
|
||||
|
||||
## Content
|
||||
|
||||
- [ ] Populate the galleries with more or real work items.
|
||||
- [ ] Add per-image captions (they are category-level only right now).
|
||||
- [ ] Captions for the **case-study grids** (`case-studies/*.html`): 9 of the 10 pages hold a single `figure.card-work` image beside the copy and Urban Moto holds a 3-up grid of ads, none of them captioned, and `.card-work` has no caption style yet. The `work.html` galleries were captioned on 2026-09-22.
|
||||
- [ ] Confirm the caption names that were read off the images on 2026-09-22, where the piece carries no visible client name: `logoargent` (Argent), `logodrinking` (Drinking About...), `logodrive` (D.R.I.V.E.), `web50shadesof2048` (50 Shades of 2048), `3d78williams` ('78 Williams), `3dabandoned`, and `websinosalescopy` (currently just "Sales page", no name). The user confirmed `logobackass` and the scope of seven other pieces on 2026-09-22; see Done.
|
||||
|
||||
## Polish (ideas, not yet agreed)
|
||||
|
||||
|
|
@ -41,8 +27,6 @@ Last updated: 2026-09-22.
|
|||
- [ ] find and add IKEHU video
|
||||
- [ ] Urban Moto case-study hero is low resolution (450px native at its widest);
|
||||
find or shoot a better crop.
|
||||
- [ ] Consider moving `writtenearplugs.jpg` from the Urban Moto grid into the
|
||||
Print gallery.
|
||||
- [ ] redesign the site as a sales funnel rather than as a design piece
|
||||
|
||||
## Done
|
||||
|
|
@ -61,3 +45,49 @@ Last updated: 2026-09-22.
|
|||
- [x] **2026-09-22** - Backlog moved into the memory bank: the repo-root `TODO.md`
|
||||
became `memory-bank/todo.md` (lowercase), and the memory-bank files that pointed
|
||||
at the old path were updated.
|
||||
- [x] **2026-09-22** - **Copy pass 1**, all four `Now` briefs. The question block
|
||||
became the homepage closing CTA (`index.html`: "Have something that needs
|
||||
making?", the three client questions as a list, then "Tell us what you're trying
|
||||
to do. We'll figure out what needs to be made."), with a small `.cta-questions`
|
||||
spacing helper added to `css/style.css`. The AI line plus the workflow story
|
||||
became a new **Workflow** band on `services.html` (Old workflow / AI-assisted
|
||||
workflow / Finished result, middle card dark). "Got a weird project? Give it to
|
||||
us." replaced the closing line on `work.html`. All of it re-voiced from first
|
||||
person to the studio "we", no em dashes. Verified: tags balance, every relative
|
||||
`href`/`src` resolves, all pages return HTTP 200, and the new sections were
|
||||
screenshot-checked at 1280px and 390px. **Uncommitted.**
|
||||
- [x] **2026-09-22** - **Favicon added** (first Assets item). Three files in `img/`:
|
||||
`favicon.svg` (a `#2ee666` rounded tile holding the digit `2` as outline paths in
|
||||
brand ink, so it needs no client font), `favicon.ico` (48/32/16), and
|
||||
`apple-touch-icon.png` (180x180, square and opaque for iOS). Built from the
|
||||
site's own wordmark font by instancing `fonts/SpaceGrotesk-latin.woff2` at
|
||||
`wght=700` with `fonttools` (that file is a variable font whose default instance
|
||||
is Light 300), routing the glyph outlines through `SVGPathPen`, then rasterizing
|
||||
with `rsvg-convert` and ImageMagick. All 16 pages declare the three icons with
|
||||
relative paths. Recipe recorded in `techContext.md`. **Uncommitted.**
|
||||
- [x] **2026-09-22** - **Open Graph / social image added**, and the live domain
|
||||
recorded. `img/og-image.png` (1200x630) is a green dot-grid card carrying the
|
||||
eyebrow, the `2RE03` wordmark, the hero line, `2re03.com`, and a strip of six
|
||||
real work tiles under a green wash. All 16 pages now declare `rel="canonical"`,
|
||||
the full `og:*` set (with `og:image:width`/`height`/`alt`) and `twitter:card`,
|
||||
using **https://2re03.com/** (the host serves `.html` URLs, and the homepage uses
|
||||
the bare root). Page titles and descriptions are reused from each page's own
|
||||
`<title>` and meta description. Verified: exactly one of each tag per page,
|
||||
`og:url` matches the canonical, the declared 1200x630 matches the file, and every
|
||||
page plus all four new assets return HTTP 200. **Uncommitted.**
|
||||
- [x] **2026-09-22** - **Work captions, and the `writtenearplugs` move** (the last
|
||||
two Content/Polish items that needed no new assets). Every one of the 26
|
||||
`work.html` gallery figures is now a `<figure>` with a `.carousel__caption`
|
||||
(piece name + format, always visible), the case-study grids' `writtenearplugs`
|
||||
figure moved into the **Print** gallery, and that grid went from `row-cols-sm-2`
|
||||
to `row-cols-sm-3` so its remaining three ads sit in one clean row. Caption text
|
||||
was read off the images themselves (a collage of all 26 was reviewed first),
|
||||
which caught a swap: `writtenearplugs.webp` is the **Urban Moto earplug feature**
|
||||
(page 39, February 2007) and `writtenstructions.webp` is the **Napwell quick
|
||||
start guide**. No author bylines appear in any caption (see the attribution
|
||||
rule). **Uncommitted.**
|
||||
- [x] **2026-09-22** - **Caption revision from the user's read-through, and two pieces re-filed.** Six `work.html` captions were re-worded to the scope the user confirmed: **Back That Ass Up** became "Political art show" (it was a political campaign art show, so the US-flag mark finally makes sense and the alt now says so), **Mehavior** became "UX and UI", **(10 + 2) x 5** became "Designed and coded" (the whole app, not just its interface), and the three ads - Loren Kincaid, Macchiarini Metalworks, K.C. Engineering - all became "Print Ad" (the last was "Tire advert"; the capital A is kept verbatim from the brief, making it the page's only title-case sub-line). **Sam's Rules of Money** became "Book editing and illustrations" - editing the book plus its illustrations, which the old "Book cover" hid. **Two pieces moved from Print to Words**, because that is where the deliverable belongs: `writtenearplugs.webp` ("Article, Urban Moto, February 2007") and `printylemcover.webp` ("Editing and cover design"; the user edited the whole magazine). Print now holds 3 items, all print ads; Words holds 4, ordered book, magazine, article, guide. Verified: 26 figures over 26 distinct images with one caption each and no duplicates, exactly two references to the moved files (both in Words), tags balance and every reference resolves across all 16 pages, no em dashes, and the carousels were **measured** in a headless browser rather than eyeballed - Print is now `scrollWidth == clientWidth` with both arrows disabled (same as the App Design gallery, so a 3-item gallery leaves no dead control) and Words overflows by 292px with only "next" enabled - plus screenshot checks of the Print and Words bands at 1280px and 390px. Build intermediates in `.tmp-captions/` were deleted. **Uncommitted.**
|
||||
- **2026-09-22** - **Section copy brought in line with the captions, and the last three naming questions settled.** Four blurbs on `work.html` were re-voiced so nothing contradicts the caption it sits above: the **Words** intro now reads "Editorial, documentation, and sales copy: we write it, we edit it, and we lay it out." (the old line claimed only writing, while YLEM Journal and Sam's Rules are editing work), the **App Design** blurb now says some pieces were "coded end to end" (the old line implied everything stopped at looking real), the **Print** blurb leads with the ads the gallery actually shows and keeps flyers, postcards, business cards, letterhead and product design as capability, and the **Logos** intro adds ", and the occasional title slide" so the Dat Art slide in that gallery reads as deliberate. The Dat Art caption became **"Presentation for Motion Labs"** with a matching alt, and the 3D copy on `work.html` and `services.html` now says **food cart** instead of pretzel stand (the render is labelled "Gourmet Pasteles and Churros" and the case study is Upscale Food Cart). The user also confirmed that **YLEM is fine in both galleries** and that **`2plus5times3.webp` keeps its name**, with the caption `(10 + 2) x 5` treated as authoritative. Verified: all seven new strings render and all five replaced strings are gone from both files, 26 figures over 26 distinct images with one caption each, tags balance and every reference resolves across all 16 pages, no em dashes, and headless-Chrome measurement confirms the copy did not disturb the galleries (Print and App Design at `overflow=0` with both arrows disabled, Words at 292px with only "next" enabled), with 1280px and 390px screenshots of the Logos, Print and Words bands. Also checked the external asset backup: no flyer, postcard, business card or letterhead artwork exists anywhere on this machine, which is why the Print copy is scoped to the ads. **Staged, awaiting the user's commit.**
|
||||
|
||||
- [x] **2026-09-22** - **Brief re-read: `work.html` now matches the caption brief character for character.** The user re-sent the brief with the file attached, which confirmed every item was already in place (political art show, UX and UI, designed and coded, three print ads, the two pieces already in Words, Sam's Rules as editing plus illustrations) and settled the two strings that had been flagged as open: the ads sub-line is **"Print Ad"** with a capital A, and the app is named **(10 + 2) x 5** with spaces. Both changed in place. Re-verified after the edit: 26 figures over 26 distinct images with one caption each, tags balance and every reference resolves across all 16 pages, no em dashes, and the galleries were measured again in a headless browser - `Print design gallery` stays `scrollWidth == clientWidth` with both arrows disabled and `Words gallery` keeps its 292px overflow with only "next" enabled, so wider caption text changes nothing (`.carousel__item` is `flex: 0 0 auto; width: clamp(230px, 78vw, 340px)`). **Uncommitted.**
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,20 @@
|
|||
<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="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/services.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="2RE03">
|
||||
<meta property="og:title" content="Services | 2RE03">
|
||||
<meta property="og:description" content="2RE03 services: web design, logos and identity, print design, 3D modeling, and written work.">
|
||||
<meta property="og:url" content="https://2re03.com/services.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>
|
||||
|
|
@ -101,8 +115,7 @@
|
|||
<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>
|
||||
<p class="mb-0 text-body-secondary">Practical models for real products: a chicken coop, a food cart, and things that need to actually stand up. Assembly logic and material limits come first.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
|
@ -150,6 +163,35 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Workflow -->
|
||||
<section class="section bg-brand-soft">
|
||||
<div class="container">
|
||||
<p class="eyebrow mb-2">Workflow</p>
|
||||
<h2 class="mb-3">Three steps, and only the middle one is new.</h2>
|
||||
<p class="lead text-body-secondary col-lg-9 mb-4">We've figured out how to use AI to dramatically accelerate the design and development process without turning the result into generic AI slop.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 g-4">
|
||||
<div class="col">
|
||||
<div class="card card-service h-100 p-4">
|
||||
<h3 class="h5">Old workflow</h3>
|
||||
<p class="mb-0 text-body-secondary">Slow rounds of revisions, layouts built one at a time, and copy that showed up last, after the design was already locked.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card h-100 border-0 bg-ink text-cream p-4">
|
||||
<h3 class="h5">AI-assisted workflow</h3>
|
||||
<p class="mb-0 text-cream opacity-75">Structure, research, options, and the unglamorous parts get faster. You see real directions in days instead of weeks, and we throw the bad ones away instead of defending them.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card card-service h-100 p-4">
|
||||
<h3 class="h5">Finished result</h3>
|
||||
<p class="mb-0 text-body-secondary">Something made by hand and finished by eye. No template smell, no filler copy, no stock anything.</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">
|
||||
|
|
|
|||
159
work.html
159
work.html
|
|
@ -6,6 +6,20 @@
|
|||
<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>
|
||||
|
|
@ -50,11 +64,26 @@
|
|||
<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="Web design project" loading="lazy" width="800" height="600"></div></figure>
|
||||
<figure class="carousel__item"><div class="carousel__media"><img src="img/websinosalescopy.webp" 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.webp" 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.webp" 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.webp" alt="Mask Aid Project website" loading="lazy" width="800" height="600"></div></figure>
|
||||
<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>
|
||||
|
|
@ -70,16 +99,37 @@
|
|||
<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>
|
||||
<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="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.webp" 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.webp" 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.webp" 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.webp" 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.webp" 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.webp" alt="Logo design" loading="lazy" width="800" height="600"></div></figure>
|
||||
<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>
|
||||
|
|
@ -99,17 +149,25 @@
|
|||
<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 app interface design" loading="lazy" width="800" height="600"></div></figure>
|
||||
<figure class="carousel__item"><div class="carousel__media"><img src="img/web50shadesof2048.webp" alt="App design project" loading="lazy" width="800" height="600"></div></figure>
|
||||
<figure class="carousel__item"><div class="carousel__media"><img src="img/2plus5times3.webp" alt="App design project" loading="lazy" width="800" height="600"></div></figure>
|
||||
<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, built to look real before
|
||||
they're live, sometimes years before.</p>
|
||||
<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>
|
||||
|
||||
|
|
@ -120,18 +178,25 @@
|
|||
<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="Print advertisement design" loading="lazy" width="800" height="600"></div></figure>
|
||||
<figure class="carousel__item"><div class="carousel__media"><img src="img/printmacchiariniad.webp" 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.webp" alt="Magazine cover design" loading="lazy" width="800" height="600"></div></figure>
|
||||
<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">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>
|
||||
<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>
|
||||
|
||||
|
|
@ -142,18 +207,29 @@
|
|||
<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="3D modeling project" loading="lazy" width="800" height="600"></div></figure>
|
||||
<figure class="carousel__item"><div class="carousel__media"><img src="img/3dabandoned.webp" alt="3D modeling project" loading="lazy" width="800" height="600"></div></figure>
|
||||
<figure class="carousel__item"><div class="carousel__media"><img src="img/3dcart.webp" 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.webp" alt="3D model of a chicken coop" loading="lazy" width="800" height="600"></div></figure>
|
||||
<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 pretzel stand, and more. Assembly logic and
|
||||
material limits come first. Each model is built for practical use.</p>
|
||||
<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>
|
||||
|
||||
|
|
@ -161,12 +237,25 @@
|
|||
<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>
|
||||
<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/writtenearplugs.webp" 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.webp" 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.webp" alt="Instructional design and writing project" loading="lazy" width="800" height="600"></div></figure>
|
||||
<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>
|
||||
|
|
@ -181,7 +270,7 @@
|
|||
<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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue