landing and portfolio

2026-03-13 11:00:39 +00:00
parent 55ae54d2c5
commit 8a755e6361
15 changed files with 1748 additions and 149 deletions
--- a/css/img.png
+++ b/css/img.png
--- a/css/portfolio.css
+++ b/css/portfolio.css
@@ -7,44 +7,132 @@
    text-decoration: underline;
 }

-/* — Project card link — */
+/* ========================================
+   PORTFOLIO GRID — 3-col card index
+   ======================================== */

-.project-card-link {
-    display: block;
-    text-decoration: none;
-    color: var(--white);
+.portfolio-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
 }

-.project-card-inner {
+/* — Project card — */
+
+.project-card {
+    display: flex;
+    flex-direction: column;
+    background: var(--black);
+    border: 4px solid var(--black);
+    box-shadow: 8px 8px 0 var(--black);
+    color: var(--white);
+    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.1s;
 }

-.project-card-link:hover .project-card-inner {
+.project-card:hover {
    transform: translate(-2px, -2px);
-    box-shadow: 10px 10px 0px var(--black);
+    box-shadow: 8px 8px 0 var(--accent);
 }

-.project-card-head {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    margin-bottom: 0.5rem;
+.project-card--wip {
+    opacity: 0.45;
+    pointer-events: none;
 }

-.project-card-year {
+/* — Thumbnail — */
+
+.project-card__thumb {
+    position: relative;
+    aspect-ratio: 4 / 3;
+    background: var(--grey-light);
+    overflow: hidden;
+}
+
+.project-card__thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.project-card__label {
+    position: absolute;
+    top: 0;
+    left: 0;
    font-family: var(--mono);
    font-size: 0.75rem;
-    color: var(--grey-text);
+    font-weight: 700;
+    color: var(--accent);
+    background: var(--black);
+    padding: 0.3rem 0.6rem;
+    z-index: 1;
+    letter-spacing: 0.04em;
 }

-.project-card-cta {
-    display: inline-block;
+/* — Body — */
+
+.project-card__body {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    border-top: 2px solid var(--grey-dark);
+}
+
+.project-card__title {
    font-family: var(--mono);
-    font-size: 0.8rem;
-    font-weight: 700;
+    font-size: 0.9rem;
+    font-weight: 800;
    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    color: var(--white);
+    margin-bottom: 0.6rem;
+    line-height: 1.3;
+}
+
+.project-card__desc {
+    font-family: var(--sans);
+    font-size: 0.85rem;
+    font-weight: 400;
+    color: var(--grey-text);
+    line-height: 1.5;
+    flex: 1;
+}
+
+/* — Footer row — */
+
+.project-card__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1.25rem;
+}
+
+.project-card__year {
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    color: var(--grey-text);
+    letter-spacing: 0.06em;
+}
+
+.project-card__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--accent);
+    font-family: var(--mono);
+    font-size: 1rem;
    color: var(--accent);
-    margin-top: 1.5rem;
+    flex-shrink: 0;
+    transition: background 0.1s, color 0.1s;
+}
+
+.project-card:hover .project-card__arrow {
+    background: var(--accent);
+    color: var(--black);
 }

 /* — Tags — */
@@ -53,7 +141,7 @@
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
 }

 .tag {
@@ -68,6 +156,76 @@
    color: var(--grey-text);
 }

+/* — Case study breadcrumb bar — */
+
+.cs-breadcrumb {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--black);
+    border: 4px solid var(--black);
+    box-shadow: 8px 8px 0 var(--black);
+    padding: 0.75rem 1.25rem;
+    margin-bottom: 2rem;
+}
+
+.cs-breadcrumb-label {
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--accent);
+    letter-spacing: 0.04em;
+}
+
+/* — Case study inline meta bar — */
+
+.cs-meta-bar {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 2rem;
+    padding: 0.75rem 1rem;
+    background: var(--grey-dark);
+    border-left: 6px solid var(--grey-text);
+    /*border-top: 4px solid var(--grey-text);*/
+    margin-top: 1.5rem;
+    max-width: clamp(380px, 55vw, 750px);
+    box-shadow: var(--shadow);
+}
+
+.cs-meta-bar li {
+    font-family: var(--mono);
+    font-size: 0.8rem;
+    font-weight: 400;
+    color: var(--grey-text);
+    line-height: 1.8;
+}
+
+/* — Case study back link — */
+
+.cs-back {
+    display: inline-block;
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+    text-decoration: none;
+    margin-bottom: 1.5rem;
+    transition: opacity 0.1s;
+}
+
+.cs-back:hover {
+    opacity: 0.7;
+}
+
+.cs-back--lg {
+    font-size: 0.85rem;
+    display: block;
+    margin-bottom: 2rem;
+}
+
 /* — Case study meta grid — */

 .cs-meta-grid {
@@ -165,6 +323,11 @@
 }

@media (max-width: 768px) {
+    .portfolio-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1.25rem;
+    }
+
    .screenshot-hero-wrap {
        width: 100%;
    }
@@ -173,3 +336,10 @@
        grid-template-columns: 1fr;
    }
 }
+
+@media (max-width: 480px) {
+    .portfolio-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+}
--- a/css/screenshot.mjs
+++ b/css/screenshot.mjs
@@ -1,31 +0,0 @@
-import puppeteer from 'puppeteer';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const url   = process.argv[2] || 'http://localhost:3000';
-const label = process.argv[3] || '';
-
-const dir = path.join(__dirname, 'temporary screenshots');
-if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-
-let n = 1;
-const name = () => label ? `screenshot-${n}-${label}.png` : `screenshot-${n}.png`;
-while (fs.existsSync(path.join(dir, name()))) n++;
-const filepath = path.join(dir, name());
-
-const browser = await puppeteer.launch({
-  headless: true,
-  args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
-});
-
-const page = await browser.newPage();
-await page.setViewport({ width: 1440, height: 900, deviceScaleFactor: 1 });
-await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 });
-// Allow GSAP + web fonts to settle
-await new Promise(r => setTimeout(r, 2500));
-await page.screenshot({ path: filepath, fullPage: false });
-await browser.close();
-
-console.log(`Saved: ${filepath}`);
--- a/css/style.css
+++ b/css/style.css
@@ -97,11 +97,11 @@ a {
   ======================================== */

 .hero {
-    min-height: 100vh;
+    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
-    padding: 10rem 3rem 6rem;
+    padding: 4rem 3rem 2rem;
    border: var(--border-thick);
    background: var(--grey-light);
    margin-bottom: 2rem;
@@ -137,8 +137,8 @@ a {
    color: var(--white);
    background: var(--black);
    padding: 1rem;
-    max-width: 550px;
-    margin-bottom: 3rem;
+    max-width: clamp(280px, 40vw, 550px);
+    margin-bottom: 1rem;
    border-left: 8px solid var(--accent);
 }