diff --git a/src/templates/designer-portfolio/files/app.js b/src/templates/designer-portfolio/files/app.js new file mode 100644 index 0000000..7566d71 --- /dev/null +++ b/src/templates/designer-portfolio/files/app.js @@ -0,0 +1,313 @@ +// Page content lives here as data so it is easy to find and change. +// +// Each project shows in the typewriter index and as a card. Its `cover` is a +// drawn placeholder (one of: record, kiln, poster, spheres, books, field). +// Give a project an `image` (a file path or URL) to show real work instead. + +const PROJECTS = [ + { + id: 'hearth', title: 'Hearth Records', category: 'Music', + summary: 'A label identity built around one red circle and a lot of warm noise.', + blurb: 'Identity for an independent folk label. The red label circle is the whole logo, so it works on a sleeve, a sticker and a 16px favicon.', + specs: [['Format', '12" sleeve, 310 × 310 mm'], ['Print', 'Offset, Pantone 485 C + black'], ['Year', '2025']], + cover: { kind: 'record', label: 'Hearth Records', note: 'Side A · 33⅓ RPM' }, + alt: 'Black vinyl record with a red label reading Hearth Records', + }, + { + id: 'kiln', title: 'Kiln Ceramics', category: 'Brand', + summary: 'Wordmark, packaging and glaze cards for a two-person pottery studio.', + blurb: 'A lowercase serif wordmark and a set of pot silhouettes that double as packaging stamps.', + specs: [['Format', 'Boxes, labels, glaze cards'], ['Print', 'Rubber stamp on kraft, 350 gsm'], ['Year', '2024']], + cover: { kind: 'kiln', word: 'kiln', note: 'Est. 2019 · Caldas da Rainha' }, + alt: 'Orange cover with the wordmark kiln and three pot silhouettes', + }, + { + id: 'line28', title: 'Line 28', category: 'Poster', + summary: 'A series of transit posters for the city\'s oldest tram route.', + blurb: 'Twelve posters, one per stop, using only the tram\'s own yellow and the red of the route number.', + specs: [['Format', 'A1, 594 × 841 mm'], ['Print', 'Screen print, 2 colours'], ['Year', '2023']], + cover: { kind: 'poster', number: '28', note: 'Martim Moniz → Prazeres' }, + alt: 'Yellow poster with a huge red number 28 above black hazard stripes', + }, + { + id: 'soft', title: 'Soft Objects', category: '3D', + summary: 'Personal render series about fruit, wax and light.', + blurb: 'An ongoing study of subsurface scattering. Each piece is one object, one light and no post-processing.', + specs: [['Format', '3000 × 3750 px stills'], ['Tools', 'Blender, Cycles, 4096 samples'], ['Year', '2022 – now']], + cover: { kind: 'spheres', note: 'Render 07 / 12' }, + alt: 'Two glossy rendered spheres, red and green, on a pastel gradient', + }, + { + id: 'press', title: 'Small Hours Press', category: 'Editorial', + summary: 'Cover system for a poetry imprint, 14 titles so far.', + blurb: 'A cover grid where only the title and one colour change, so the shelf reads as a single series.', + specs: [['Format', 'B-format, 129 × 198 mm'], ['Print', 'Riso, Munken Pure 150 gsm'], ['Year', '2021 – 2025']], + cover: { kind: 'books', titles: ['Late Light', 'Salt Year', 'Low Tide'] }, + alt: 'Three book covers in cream, red and sand on a black ground', + }, + { + id: 'field', title: 'Field Notes Fest', category: 'Event', + summary: 'Identity for a three-day outdoor music festival.', + blurb: 'A blurred poppy field shot low in the grass became the whole look. Signage, wristbands and a 40-page programme.', + specs: [['Format', 'Posters, signage, programme'], ['Print', 'CMYK offset, uncoated'], ['Year', '2025']], + cover: { kind: 'field', word: 'field notes', note: '12 – 14 June' }, + alt: 'Poster with red serif text over a blurred field of poppies', + }, +]; + +// The projects dealt onto the hero as printed proofs, back to front. +const HERO_PROOFS = ['line28', 'kiln', 'hearth', 'field']; + +const SERVICES = [ + { + title: 'Graphic design', + items: [['Brand identity', '4 – 8 weeks'], ['Posters and print campaigns', '2 – 4 weeks'], ['Packaging and labels', '3 – 6 weeks'], ['Editorial and book covers', 'per title']], + tools: ['Illustrator', 'InDesign', 'Figma', 'Glyphs'], + }, + { + title: '3D', + items: [['Product and packaging renders', '1 – 3 weeks'], ['Art direction stills', '1 – 2 weeks'], ['Short loops for social', '6 – 15 s'], ['Type in 3D', 'per piece']], + tools: ['Blender', 'Cinema 4D', 'Redshift', 'Substance'], + }, +]; + +const HISTORY = [ + { years: '2023 – now', role: 'Independent', detail: 'identity, print, 3D', place: 'Lisbon' }, + { years: '2021 – 2023', role: 'Designer', detail: 'Atelier Norte', place: 'Porto' }, + { years: '2019 – 2021', role: 'Junior designer', detail: 'Casa Tipo', place: 'Lisbon' }, + { years: '2015 – 2019', role: 'BA Communication Design', detail: '', place: 'Lisbon' }, +]; + +function el(tag, className, text) { + const node = document.createElement(tag); + if (className) node.className = className; + if (text != null) node.textContent = text; + return node; +} + +// Drawn placeholder covers, one builder per kind. +const COVERS = { + record(c, cover) { + const disc = el('div', 'disc'); + const label = el('div', 'lbl'); + label.append(...splitWords(cover.label)); + disc.append(label); + c.append(disc, el('span', 'side', cover.note)); + }, + kiln(c, cover) { + const pots = el('div', 'pots'); + pots.append(el('i'), el('i'), el('i')); + c.append(el('small', '', cover.note), el('b', '', cover.word), pots); + }, + poster(c, cover) { + const stripes = el('div', 'stripes'); + stripes.append(el('span', '', cover.note)); + c.append(el('div', 'num', cover.number), stripes); + }, + spheres(c, cover) { + c.append(el('span', '', cover.note), el('i'), el('i'), el('i')); + }, + books(c, cover) { + for (const title of cover.titles) { + const book = el('div', 'book'); + book.append(...splitWords(title), el('small', '', 'Poems')); + c.append(book); + } + }, + field(c, cover) { + const canvas = el('canvas'); + canvas.dataset.field = ''; + canvas.setAttribute('aria-hidden', 'true'); + const word = el('div', 't'); + word.append(...splitWords(cover.word)); + c.append(canvas, word, el('div', 'd', cover.note)); + }, +}; + +// "Late Light" -> Late
Light, without touching innerHTML. +function splitWords(text) { + return String(text).split(' ').flatMap((w, i) => (i ? [document.createElement('br'), w] : [w])); +} + +function renderIndex() { + const root = document.getElementById('project-index'); + root.replaceChildren(...PROJECTS.map(p => { + const li = el('li'); + const dots = el('div', 'dots'); + dots.append(el('i'), el('i'), el('i')); + const h = el('h3'); + const link = el('a', '', p.title); + link.href = `#${p.id}`; + h.append(link); + li.append(dots, el('span', 'chip', p.category), h, el('p', '', p.summary)); + return li; + })); + document.getElementById('issue-count').textContent = String(PROJECTS.length).padStart(2, '0'); +} + +// A project's image, or its drawn placeholder cover. +function renderCover(p) { + const cover = el('div', `cover cv-${p.cover ? p.cover.kind : 'image'}`); + if (p.image) { + const img = el('img'); + img.src = p.image; + img.alt = p.alt || p.title; + cover.append(img); + } else if (p.cover && COVERS[p.cover.kind]) { + cover.setAttribute('role', 'img'); + cover.setAttribute('aria-label', p.alt || p.title); + COVERS[p.cover.kind](cover, p.cover); + } + return cover; +} + +function renderHeroProofs() { + const root = document.getElementById('hero-proofs'); + const proofs = HERO_PROOFS.map(id => PROJECTS.find(p => p.id === id)).filter(Boolean).map((p, i) => { + const link = el('a', 'proof'); + link.href = `#${p.id}`; + const fig = el('figure'); + fig.style.margin = '0'; + const caption = el('figcaption'); + caption.append(el('span', '', `Fig. ${i + 1} ${p.title}`), el('span', '', p.category)); + fig.append(renderCover(p), caption); + link.append(fig); + return link; + }); + root.prepend(...proofs); +} + +function renderProjects() { + const root = document.getElementById('project-grid'); + root.replaceChildren(...PROJECTS.map(p => { + const card = el('article', 'card'); + card.id = p.id; + const cover = renderCover(p); + + const specs = el('dl', 'spec'); + for (const [label, value] of p.specs) specs.append(el('dt', '', label), el('dd', '', value)); + + card.append(cover, el('h3', '', p.title), el('p', 'blurb', p.blurb), specs); + return card; + })); +} + +function renderServices() { + const root = document.getElementById('caps'); + root.replaceChildren(...SERVICES.map(s => { + const col = el('div', 'cap'); + const list = el('ul'); + for (const [name, time] of s.items) { + const li = el('li'); + li.append(el('span', '', name), el('span', '', time)); + list.append(li); + } + const tools = el('div', 'tools'); + tools.append(...s.tools.map(t => el('span', '', t))); + col.append(el('h3', '', s.title), list, tools); + return col; + })); +} + +function renderHistory() { + const root = document.getElementById('timeline'); + root.replaceChildren(...HISTORY.map(h => { + const li = el('li'); + const role = el('span', 'role'); + role.append(el('b', '', h.role)); + if (h.detail) role.append(` · ${h.detail}`); + li.append(el('span', 'yr', h.years), role, el('span', 'where', h.place)); + return li; + })); +} + +// Seeded random, so the field covers look the same on every load. +function rng(seed) { + return () => { + seed = (seed * 16807) % 2147483647; + return (seed - 1) / 2147483646; + }; +} + +// A blurred field of poppies and grass, drawn with soft radial blobs that +// get bigger toward the bottom, like a photo shot low with a shallow focus. +function paintField(canvas, seed, horizon) { + const w = canvas.clientWidth, h = canvas.clientHeight; + if (!w || !h) return; + const dpr = Math.min(window.devicePixelRatio || 1, 2); + canvas.width = w * dpr; + canvas.height = h * dpr; + const ctx = canvas.getContext('2d'); + ctx.scale(dpr, dpr); + const r = rng(seed); + + const ground = ctx.createLinearGradient(0, h * horizon, 0, h); + ground.addColorStop(0, 'rgba(251,250,246,0)'); + ground.addColorStop(0.35, 'rgba(214,214,150,.55)'); + ground.addColorStop(1, 'rgba(160,172,82,.95)'); + ctx.fillStyle = ground; + ctx.fillRect(0, 0, w, h); + + const petals = ['232,88,42', '240,122,58', '212,42,31', '246,160,90']; + const stems = ['118,138,60', '96,120,52', '150,160,80']; + const count = Math.round(w * h / 2600); + for (let i = 0; i < count; i++) { + const y = h * horizon + Math.pow(r(), 0.6) * h * (1 - horizon) + (r() - 0.5) * 40; + const x = r() * w; + const depth = (y - h * horizon) / (h * (1 - horizon)); + const flower = r() < 0.55; + const size = (flower ? 6 : 4) + depth * (flower ? 22 : 12) * (0.5 + r()); + const color = flower ? petals[(r() * petals.length) | 0] : stems[(r() * stems.length) | 0]; + const alpha = (flower ? 0.55 : 0.35) * Math.min(1, depth + 0.25); + const blob = ctx.createRadialGradient(x, y, 0, x, y, size); + blob.addColorStop(0, `rgba(${color},${alpha})`); + blob.addColorStop(0.55, `rgba(${color},${alpha * 0.6})`); + blob.addColorStop(1, `rgba(${color},0)`); + ctx.fillStyle = blob; + ctx.beginPath(); + ctx.ellipse(x, y, size, size * (flower ? 0.8 : 1.6), 0, 0, Math.PI * 2); + ctx.fill(); + } +} + +// Every field cover, including the copy dealt onto the hero. +function paintFields() { + document.querySelectorAll('canvas[data-field]').forEach(c => paintField(c, 77, 0.35)); +} + +function setupCopyEmail() { + const button = document.getElementById('copy-email'); + const email = document.getElementById('email'); + const selectEmail = () => { + const range = document.createRange(); + range.selectNodeContents(email); + const sel = window.getSelection(); + sel.removeAllRanges(); + sel.addRange(range); + button.textContent = 'Selected, press Ctrl+C'; + }; + button.addEventListener('click', async () => { + try { + await navigator.clipboard.writeText(email.textContent.trim()); + button.textContent = 'Copied'; + } catch { + selectEmail(); + } + setTimeout(() => { button.textContent = 'Copy email'; }, 2200); + }); +} + +renderHeroProofs(); +renderIndex(); +renderProjects(); +renderServices(); +renderHistory(); +paintFields(); +setupCopyEmail(); +document.getElementById('year').textContent = new Date().getFullYear(); + +let resizeTimer; +window.addEventListener('resize', () => { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(paintFields, 150); +}); diff --git a/src/templates/designer-portfolio/files/icon.svg b/src/templates/designer-portfolio/files/icon.svg new file mode 100644 index 0000000..a3f30a1 --- /dev/null +++ b/src/templates/designer-portfolio/files/icon.svg @@ -0,0 +1 @@ + diff --git a/src/templates/designer-portfolio/files/index.html b/src/templates/designer-portfolio/files/index.html new file mode 100644 index 0000000..ad8d550 --- /dev/null +++ b/src/templates/designer-portfolio/files/index.html @@ -0,0 +1,144 @@ + + + + + + + + +Ines Varga: Graphic designer and 3D artist + + + + + + + + + +
+ + + +
+
+ Portfolio · 2026 update + +
+ +
+
+

Graphic designer & 3D artist · Lisbon

+

InesVarga

+

I design identities, posters, packaging and book covers, and make the 3D renders that show them off.

+
+ See selected work + Booking from January 2027 +
+
+ + +
+ + +
+
+ +
+
+
+
+
+
    +
    +
    +
    @ines.varga
    +
    + +
    +
    Lisbon, PTIssue no. 06
    +

    Selectedwork2021—2026

    +

    Six projects across identity, print and 3D. Each one lists the format and production method, because that is where most of the decisions were made.

    +
    +
    + +
    +
    + +
    +
    +
    +

    What I do

    +

    I take projects from first sketch to the file the printer receives. Most clients hire me for one of these and stay for both.

    +
    +
    +
    +
    + +
    +
    + +
    +

    About

    +

    I'm a graphic designer and 3D artist in Lisbon. I like work that ends up printed, held, or stuck to a wall.

    +

    I studied communication design in Lisbon and spent four years in studios before going independent in 2023. Today I work with small labels, food and craft brands, publishers and cultural events.

    +

    I'm booking projects from January 2027. Tell me what you're making and when you need it.

    +
      +
      +
      +
      + +
      +
      +

      say hello

      +
      +
      +

      Email

      +

      hello@inesvarga.studio

      + +
      +
      +

      Phone

      +

      +351 912 345 678

      +
      +
      +

      Elsewhere

      +

      Behance · Instagram · Are.na

      +
      +
      +
      + Set in Gloock, Archivo and Courier Prime. + © Ines Varga +
      +
      +
      +
      + + + + diff --git a/src/templates/designer-portfolio/files/styles.css b/src/templates/designer-portfolio/files/styles.css new file mode 100644 index 0000000..1a5a31b --- /dev/null +++ b/src/templates/designer-portfolio/files/styles.css @@ -0,0 +1,258 @@ +/* A hero laid out as a printer's proof sheet, then a split orange and paper poster that holds the + work index on a typewriter roll, then project cards, services, about and contact. + Colors and fonts are the tokens below; change them here to restyle the page. */ +:root { + --ink: #1d1a17; + --paper: #fbfaf6; + --sand: #e9dfcf; + --sand-deep: #d9ccb6; + --tomato: #d42a1f; + --tangerine: #f0883e; + --meadow: #a7ad5a; + --muted: #6d655c; + --display: "Gloock", "Bodoni 72", Didot, Georgia, serif; + --sans: "Archivo", "Helvetica Neue", Arial, sans-serif; + --mono: "Courier Prime", "Courier New", Courier, monospace; + --gutter: clamp(16px, 4vw, 56px); + color-scheme: light; +} +* { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; } +a { color: inherit; } +:focus-visible { outline: 2px solid var(--tomato); outline-offset: 3px; } +h1, h2, h3 { text-wrap: balance; margin: 0; } +.label { font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } +.mono { font-family: var(--mono); } + +/* ---------- HERO: a press proof sheet ---------- */ +.hero { position: relative; background: var(--paper); padding-inline: var(--gutter); padding-block: 22px 0; overflow: hidden; } +.hero-inner { max-width: 1240px; margin: 0 auto; } + +/* crop marks in the four corners and registration targets on the edges */ +.crop { position: absolute; width: 26px; height: 26px; pointer-events: none; } +.crop::before, .crop::after { content: ""; position: absolute; background: var(--ink); } +.crop::before { width: 18px; height: 1px; } .crop::after { width: 1px; height: 18px; } +.crop.tl { top: 10px; left: 10px; } .crop.tl::before { top: 12px; left: 0; } .crop.tl::after { left: 12px; top: 0; } +.crop.tr { top: 10px; right: 10px; } .crop.tr::before { top: 12px; right: 0; } .crop.tr::after { right: 12px; top: 0; } +.reg { position: absolute; width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 50%; pointer-events: none; } +.reg::before, .reg::after { content: ""; position: absolute; background: var(--ink); } +.reg::before { left: -6px; right: -6px; top: 50%; height: 1px; } .reg::after { top: -6px; bottom: -6px; left: 50%; width: 1px; } +.reg.top { top: 10px; left: 50%; margin-left: -11px; } + +.hero-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; padding-inline: 18px; } +.hero-nav nav { display: flex; gap: clamp(14px, 2.4vw, 32px); } +.hero-nav a { text-decoration: none; } +.hero-nav a:hover { color: var(--tomato); } + +.hero-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(28px, 4vw, 52px) clamp(28px, 3.5vw, 44px); } +.eyebrow { font-family: var(--mono); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; } +.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--tomato); } +.hero h1 { line-height: .8; } +.hero h1 .first { display: block; font-family: var(--display); font-weight: 400; color: var(--tomato); font-size: clamp(5rem, 13.5vw, 11.5rem); letter-spacing: -0.04em; margin-left: -0.04em; } +.hero h1 .last { display: block; font-family: var(--sans); font-weight: 900; font-stretch: 125%; text-transform: uppercase; color: var(--ink); font-size: clamp(3.6rem, 10.2vw, 8.6rem); letter-spacing: -0.035em; margin-top: -0.06em; } +.hero-lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 34ch; margin: 26px 0 0; } +.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; } +.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; padding: 14px 22px; border-radius: 99px; transition: background .2s; } +.btn:hover { background: var(--tomato); } +.avail { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .85rem; } +.avail i { width: 9px; height: 9px; border-radius: 50%; background: #3f9a52; box-shadow: 0 0 0 4px color-mix(in srgb, #3f9a52 22%, transparent); } + +/* the fanned stack of printed proofs */ +.proofs { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.02; justify-self: center; } +.proof { position: absolute; width: 47%; background: #fff; padding: 3% 3% 0; text-decoration: none; color: var(--ink); box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 22px 40px -18px rgba(40,25,10,.45); transform: rotate(var(--r)); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; } +.proof .cover { border-radius: 0; } +.proof figcaption { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 7px 0 8px; } +.proof:hover, .proof:focus-visible { transform: rotate(0deg) translateY(-10px) scale(1.03); z-index: 5; box-shadow: 0 30px 50px -18px rgba(40,25,10,.55); } +.proof:nth-child(1) { --r: -8deg; left: 0; top: 9%; } +.proof:nth-child(2) { --r: 5deg; left: 29%; top: 0; } +.proof:nth-child(3) { --r: 10deg; left: 53%; top: 21%; } +.proof:nth-child(4) { --r: -3deg; left: 17%; top: 37%; } + +.stamp { position: absolute; z-index: 6; left: -6%; bottom: 2%; width: clamp(96px, 11vw, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--tomato); color: var(--paper); display: grid; place-items: center; text-decoration: none; } +.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; } +.stamp text { fill: var(--paper); font-family: var(--mono); font-size: 11.5px; letter-spacing: 2.4px; text-transform: uppercase; } +.stamp b { font-family: var(--sans); font-weight: 900; font-stretch: 125%; font-size: 1.5rem; line-height: 1; } +.stamp:hover { background: var(--ink); } + +/* printer's colour bar along the foot of the sheet */ +.colorbar { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--sand-deep); padding-block: 12px 14px; padding-inline: 18px; } +.swatches { display: flex; gap: 3px; flex-shrink: 0; } +.swatches span { width: 26px; height: 26px; background: var(--c); } +.slug { margin-left: auto; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; } + +@media (max-width: 860px) { + .hero-main { grid-template-columns: 1fr; } + .proofs { max-width: 440px; } + .stamp { left: auto; right: 0; bottom: -2%; } +} +@media (max-width: 560px) { + .hero-nav nav, .reg, .crop { display: none; } + .hero-nav, .colorbar { padding-inline: 0; } + .eyebrow { font-size: .72rem; } + .proofs { width: 86%; margin-block: 8px 28px; } + .colorbar { flex-wrap: wrap; } + .slug { margin-left: 0; text-align: left; } + .swatches span { width: 18px; height: 18px; } + .swatches span:nth-child(n+9) { display: none; } + .slug { font-size: .62rem; } +} + +/* ---------- WORK POSTER ---------- */ +.poster { position: relative; background: linear-gradient(to bottom, var(--tangerine) 0 520px, var(--sand) 520px); padding-inline: var(--gutter); padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 96px); } +.poster::before { /* paper grain */ + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; + background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1.2px); background-size: 5px 5px; +} +.poster > * { position: relative; } +.poster-head { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); } +.meta-row { display: flex; justify-content: space-between; color: var(--paper); font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; align-items: baseline; } +.meta-row b { font-family: var(--sans); font-weight: 900; font-stretch: 125%; font-size: 2.6rem; letter-spacing: -0.02em; line-height: 1; } +.big { + font-family: var(--sans); font-weight: 900; font-stretch: 112%; text-transform: uppercase; + font-size: clamp(3rem, 8.4vw, 7.4rem); line-height: 0.86; letter-spacing: -0.03em; margin-top: clamp(28px, 4vw, 56px); +} +.big .a { color: var(--sand); display: block; } +.big .b { color: var(--ink); display: block; } +.poster-intro { max-width: 34ch; margin: 24px 0 0; font-size: 1.05rem; color: var(--ink); } + +/* typewriter paper roll */ +.roll-wrap { display: flex; flex-direction: column; align-items: center; } +.roll { + width: 100%; background: #f4ecdd; color: var(--ink); font-family: var(--mono); + padding: 22px 22px 30px; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 18px 30px -18px rgba(0,0,0,.35); + -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px); mask-image: linear-gradient(to bottom, transparent 0, #000 40px); +} +.roll ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } +.roll li { padding-block: 16px; border-bottom: 1.5px dashed var(--sand-deep); } +.roll li:last-child { border-bottom: 0; } +.dots { display: flex; gap: 4px; margin-bottom: 8px; } +.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tangerine); } +.dots i:nth-child(2) { background: #e9b949; } .dots i:nth-child(3) { background: #7fb3a6; } +.chip { display: inline-block; background: var(--sand-deep); border-radius: 99px; font-size: 0.66rem; padding: 2px 9px; letter-spacing: 0.12em; text-transform: uppercase; } +.roll h3 { font-family: var(--mono); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 8px 0 4px; } +.roll h3 a { text-decoration: none; } +.roll h3 a:hover { color: var(--tomato); } +.roll p { margin: 0; font-size: 0.82rem; line-height: 1.45; } +.platen { width: 112%; height: 30px; border-radius: 15px; background: linear-gradient(to bottom, #3a3530, #1d1a17 45%, #4b443d); position: relative; } +.platen::before, .platen::after { content: ""; position: absolute; top: -6px; width: 34px; height: 42px; border-radius: 10px; background: #e9e1d2; box-shadow: inset 0 -4px 0 #cfc4b2; } +.platen::before { left: -18px; } .platen::after { right: -18px; } +.carriage { width: 96%; height: 46px; background: var(--tangerine); border-radius: 0 0 22px 22px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); display: grid; place-items: center; } +.carriage span { background: #f4ecdd; border: 1.5px solid var(--ink); font-family: var(--mono); font-size: 0.72rem; padding: 1px 8px; border-radius: 4px; } + +/* project cards */ +.work { max-width: 1240px; margin: clamp(48px, 7vw, 96px) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) clamp(16px, 2.4vw, 32px); } +.card { display: grid; gap: 12px; align-content: start; scroll-margin-top: 24px; } +/* A project with an `image` shows it instead of a drawn cover */ +.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } +.cover { container-type: inline-size; aspect-ratio: 4 / 5; max-width: 100%; position: relative; overflow: hidden; border-radius: 4px; transition: transform .35s ease; } +.card:hover .cover { transform: translateY(-4px) rotate(-0.6deg); } +.card h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.05; } +.card .spec { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; } +.card .spec dt { text-transform: uppercase; letter-spacing: .08em; } +.card .spec dd { margin: 0; color: var(--ink); } +.card .blurb { margin: 0; font-size: 0.95rem; max-width: 42ch; } + +/* covers drawn in CSS */ +.cv-record { background: #2f3a24; display: grid; place-items: center; } +.cv-record .disc { width: 78%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #141210 0 2px, #22201c 2px 4px); display: grid; place-items: center; box-shadow: 0 20px 40px -10px rgba(0,0,0,.6); } +.cv-record .lbl { width: 40%; aspect-ratio: 1; border-radius: 50%; background: var(--tomato); color: var(--paper); display: grid; place-items: center; text-align: center; font-family: var(--display); font-size: 7cqi; line-height: .95; } +.cv-record .side { position: absolute; left: 14px; bottom: 12px; color: #c9cf8a; font-family: var(--mono); font-size: max(.56rem, 2.9cqi); letter-spacing: .1em; } + +.cv-kiln { background: var(--tangerine); color: var(--ink); padding: 8%; display: grid; align-content: space-between; } +.cv-kiln b { font-family: var(--display); font-weight: 400; font-size: 36cqi; line-height: .8; letter-spacing: -0.05em; } +.cv-kiln .pots { display: flex; gap: 8%; align-items: end; } +.cv-kiln .pots i { display: block; background: var(--ink); } +.cv-kiln .pots i:nth-child(1) { width: 22%; aspect-ratio: 3/4; border-radius: 40% 40% 12% 12%; } +.cv-kiln .pots i:nth-child(2) { width: 16%; aspect-ratio: 1/2; border-radius: 30% 30% 8% 8%; background: var(--paper); } +.cv-kiln .pots i:nth-child(3) { width: 28%; aspect-ratio: 2/1; border-radius: 6% 6% 50% 50%; } +.cv-kiln small { font-family: var(--mono); font-size: max(.56rem, 2.9cqi); letter-spacing: .12em; text-transform: uppercase; } + +.cv-poster { background: #f2d33c; color: var(--ink); display: grid; grid-template-rows: 1fr auto; } +.cv-poster .num { font-family: var(--sans); font-weight: 900; font-stretch: 62%; font-size: 78cqi; line-height: .78; letter-spacing: -0.04em; padding: 6% 0 0 5%; color: var(--tomato); } +.cv-poster .stripes { height: 26%; background: repeating-linear-gradient(-45deg, var(--ink) 0 14px, #f2d33c 14px 28px); display: flex; align-items: center; } +.cv-poster .stripes span { background: var(--ink); color: #f2d33c; font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: max(.58rem, 3.3cqi); padding: 1.6cqi 3cqi; white-space: nowrap; letter-spacing: .06em; } + +.cv-spheres { background: radial-gradient(120% 90% at 30% 10%, #f6d8e4, #c9d6f2 55%, #b8c2a0); } +.cv-spheres i { position: absolute; border-radius: 50%; } +.cv-spheres i:nth-of-type(1) { width: 52%; aspect-ratio: 1; left: 10%; top: 32%; background: radial-gradient(circle at 34% 30%, #fff 0, #f7b7a0 18%, #e2573a 60%, #7a1d10 100%); box-shadow: 18px 30px 40px -10px rgba(80,30,40,.45); } +.cv-spheres i:nth-of-type(2) { width: 30%; aspect-ratio: 1; right: 12%; top: 18%; background: radial-gradient(circle at 34% 30%, #fff 0, #cfe6c4 20%, #6f9a5a 65%, #24401b 100%); box-shadow: 12px 22px 30px -8px rgba(30,60,30,.4); } +.cv-spheres i:nth-of-type(3) { width: 70%; height: 9%; left: 15%; bottom: 10%; background: radial-gradient(closest-side, rgba(60,40,60,.35), transparent); } +.cv-spheres span { position: absolute; left: 8%; top: 7%; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } + +.cv-books { background: var(--ink); display: flex; align-items: end; justify-content: center; gap: 4%; padding: 0 10% 12%; } +.cv-books .book { width: 30%; aspect-ratio: 2 / 3.1; padding: 8% 6%; display: grid; align-content: space-between; font-family: var(--display); line-height: 1; font-size: 4.6cqi; box-shadow: 6px 8px 0 rgba(0,0,0,.4); } +.cv-books .book:nth-child(1) { background: var(--paper); color: var(--tomato); transform: translateY(-6%); } +.cv-books .book:nth-child(2) { background: var(--tomato); color: var(--paper); } +.cv-books .book:nth-child(3) { background: var(--sand); color: var(--ink); transform: translateY(-12%); } +.cv-books .book small { font-family: var(--mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; } + +.cv-field { background: var(--paper); } +.cv-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; } +.cv-field .t { position: absolute; inset: 8% 8% auto; font-family: var(--display); color: var(--tomato); font-size: 17cqi; line-height: .82; letter-spacing: -0.03em; } +.cv-field .d { position: absolute; left: 8%; bottom: 8%; font-weight: 800; font-stretch: 125%; text-transform: uppercase; font-size: .8rem; color: var(--ink); } + +@media (max-width: 960px) { + .poster { background: linear-gradient(to bottom, var(--tangerine) 0 460px, var(--sand) 460px); } + .poster-head { grid-template-columns: 1fr; } + .roll-wrap { order: 2; max-width: 420px; width: 100%; margin: 0 auto; } + .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} +@media (max-width: 560px) { .work { grid-template-columns: 1fr; } } + +/* ---------- CAPABILITIES ---------- */ +.section { padding-inline: var(--gutter); padding-block: clamp(56px, 8vw, 112px); } +.wrap { max-width: 1240px; margin: 0 auto; } +.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: clamp(28px, 4vw, 48px); } +.section-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .95; letter-spacing: -0.03em; color: var(--tomato); } +.section-head p { margin: 0; max-width: 38ch; color: var(--muted); } +.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); } +.cap h3 { font-family: var(--sans); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.01em; margin-bottom: 14px; } +.cap ul { list-style: none; margin: 0; padding: 0; } +.cap li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sand-deep); } +.cap li span:last-child { font-family: var(--mono); font-size: .82rem; color: var(--muted); text-align: right; } +.tools { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; } +.tools span { font-family: var(--mono); font-size: .78rem; border: 1.5px solid var(--ink); border-radius: 99px; padding: 3px 12px; } +@media (max-width: 760px) { .caps { grid-template-columns: 1fr; } } + +/* ---------- ABOUT + TIMELINE ---------- */ +.about { background: var(--sand); } +.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); } +.portrait { aspect-ratio: 4/5; max-width: 100%; background: var(--tangerine); position: relative; overflow: hidden; border-radius: 4px; } +.portrait::before { content: ""; position: absolute; left: 22%; right: 22%; top: 16%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); } +.portrait::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -30%; height: 62%; border-radius: 50% 50% 0 0; background: var(--ink); } +.portrait span { position: absolute; z-index: 1; left: 12px; bottom: 10px; color: var(--sand); font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } +.about-copy p.lede { font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 24px; } +.about-copy p { max-width: 62ch; margin: 0 0 16px; } +.timeline { list-style: none; margin: 36px 0 0; padding: 0; border-top: 2px solid var(--ink); } +.timeline li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sand-deep); align-items: baseline; } +.timeline .yr { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .88rem; } +.timeline .role b { font-weight: 700; } +.timeline .where { font-family: var(--mono); font-size: .8rem; color: var(--muted); } +@media (max-width: 760px) { + .about-grid { grid-template-columns: 1fr; } + .portrait { max-width: 320px; } + .timeline li { grid-template-columns: 1fr; gap: 2px; } +} + +/* ---------- CONTACT ---------- */ +.contact { background: var(--ink); color: var(--paper); text-align: left; } +.contact h2 { font-family: var(--display); font-weight: 400; color: var(--tomato); font-size: clamp(4rem, 15vw, 13rem); line-height: .8; letter-spacing: -0.05em; margin-bottom: clamp(28px, 4vw, 48px); } +.contact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid rgba(251,250,246,.25); padding-top: 24px; } +.contact-row .label { color: var(--tangerine); margin: 0 0 6px; } +.contact-row p { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; } +.copy { margin-top: 10px; font: 600 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; background: var(--paper); color: var(--ink); border: 0; border-radius: 99px; padding: 8px 16px; cursor: pointer; } +.copy:hover { background: var(--tangerine); } +.colophon { margin-top: clamp(48px, 7vw, 96px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: .78rem; color: #a59c90; } +@media (max-width: 760px) { .contact-row { grid-template-columns: 1fr; } } + +@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } + +@media (prefers-reduced-motion: no-preference) { + /* the proofs are dealt onto the sheet once, on load */ + .proof { animation: deal .8s cubic-bezier(.2,.8,.2,1) backwards; } + .proof:nth-child(2) { animation-delay: .08s; } .proof:nth-child(3) { animation-delay: .16s; } .proof:nth-child(4) { animation-delay: .24s; } + @keyframes deal { from { transform: translate(-30%, 18%) rotate(-14deg); } } + .stamp svg { animation: spin 22s linear infinite; } + @keyframes spin { to { transform: rotate(360deg); } } +} diff --git a/src/templates/designer-portfolio/screenshot.png b/src/templates/designer-portfolio/screenshot.png new file mode 100644 index 0000000..cbe7f2d Binary files /dev/null and b/src/templates/designer-portfolio/screenshot.png differ diff --git a/src/templates/designer-portfolio/template.js b/src/templates/designer-portfolio/template.js new file mode 100644 index 0000000..e3c59e2 --- /dev/null +++ b/src/templates/designer-portfolio/template.js @@ -0,0 +1,48 @@ +// Designer portfolio: a one-page static site for a graphic designer and 3D +// artist, with no backend. Projects, services and work history are plain lists +// at the top of files/app.js. See src/templates/index.js for the shape. +export default { + slug: 'designer-portfolio', + name: 'Designer Portfolio', + category: 'Website', + description: 'A one-page portfolio for a graphic designer, with project cards, services and contact.', + updated: '2026-10-09', + workers: [], + + suggestions: [ + { label: 'Make it my portfolio', prompt: 'Rewrite the portfolio with my name, contact details, bio and work history. Here is who I am and what I do: ' }, + { label: 'Use my project images', prompt: 'Replace the drawn project covers with my own images. I will upload one image for each project.' }, + { label: 'Add case study pages', prompt: 'Give each project its own case study page with a large image, the brief, the process and the result, opened from its card.' }, + { label: 'Add a contact form', prompt: 'Add a contact form to the Say hello section that saves each message, and a private page where only I can read them.' }, + { label: 'Change the colors', prompt: 'Change the red and orange palette to deep blue and lemon yellow across the whole page, including the hero and the work section.' }, + ], + + page: { + title: 'Graphic Designer Portfolio Template, Free to Edit With AI', + description: + 'A one-page portfolio site for graphic designers and 3D artists, with project cards, services, work history and contact. Copy it and make it yours.', + ogTagline: 'A portfolio site with a point of view', + lead: + 'A hero laid out like a printer’s proof sheet, with your name set large and your best projects fanned out beside it, a work index printed on a typewriter roll, six project cards with print specs, a services list, a short bio and a contact section. Copy it, then describe your own work and the page changes to fit.', + features: [ + { icon: 'layout', title: 'Every section a portfolio needs', body: 'Hero with contact details, a project index, project cards, services with typical timelines, a bio with work history, and a contact section.' }, + { icon: 'file', title: 'Specs on every project', body: 'Each card lists format, production method and year, the details art directors and printers ask about first.' }, + { icon: 'pen', title: 'Content kept in one place', body: 'Projects, services and history are plain lists at the top of the script. Add a project there and it shows in the index and the grid.' }, + { icon: 'phone', title: 'Works on a phone', body: 'The hero, the work index and the project grid rearrange into one column on small screens.' }, + ], + faq: [ + { + q: 'Can I show my real work instead of the drawn covers?', + a: [ + 'Yes. The covers as copied are drawn shapes standing in for project images. Upload your images and ask the builder to use them, or give a project an image path in the script.', + ], + }, + { + q: 'Does the contact section have a form?', + a: [ + 'Not as copied. It shows your email with a copy button, your phone number and your links. Ask the builder for a contact form and it adds one that saves messages to your account.', + ], + }, + ], + }, +}; diff --git a/src/templates/index.js b/src/templates/index.js index 6709e15..207ea5d 100644 --- a/src/templates/index.js +++ b/src/templates/index.js @@ -27,12 +27,14 @@ import landingPage from './landing-page/template.js'; import feedbackBoard from './feedback-board/template.js'; import aiChat from './ai-chat/template.js'; import aiImageStudio from './ai-image-studio/template.js'; +import designerPortfolio from './designer-portfolio/template.js'; export const TEMPLATES = [ feedbackBoard, aiChat, aiImageStudio, landingPage, + designerPortfolio, ]; export default TEMPLATES;