// All pages — Home, Portfolio (+ detail), About, Services, Contact, Strategy. // Real works, real images, Basic typography. // ═════════════════════════════════════════════════════════════════════ // HOME // ═════════════════════════════════════════════════════════════════════ function HomePage({ navigate, openProject }) { // Feature 4 hand-picked projects in asymmetric arrangement const featuredIds = ["yvonne-zurcher", "captn-sullys", "montecito", "divanova", "wanderer", "peacock"]; const featured = featuredIds.map(id => PROJECTS.find(p => p.id === id)).filter(Boolean); // Hero tags — each jumps to Portfolio with the filter pre-selected. const heroTags = [ { label: "Brand Identity", filter: "Brand Identity", red: true }, { label: "Wordmarks", filter: "Wordmark" }, { label: "Line Art", filter: "Line art" }, { label: "Editorial", filter: "Editorial" }, ]; return (
{/* ────── HERO — text left, ring right ────── */}
GENCY
{/* LEFT — text */}
▸ Independent Studio · Est. 2021

Lines that
hold weight.

Logo Design · Illustration · Art Direction
{heroTags.map(t => ( ))}
{/* RIGHT — ring */}
Scroll
{/* ────── OVERVIEW ────── */}
01 — Studio

A studio for marks
that last longer
than the trend.

GencyDesigns is the one-person studio of an independent logo designer, illustrator, and art director. The work is hand-drawn first, vectorised second, and shipped only when every line earns its place.

Practice
Identity
Founded
2021
Discipline
Multidisciplinary
Clients
Worldwide
{/* ────── SELECTED WORK ────── */}
01 — Selected Work

Recent
commissions.
{featured.map((p, i) => ( openProject(p.id)} /> ))}
{/* ────── STATEMENT — RED ────── */}

"We arrived with a
moodboard. We left with
a mark we'd never have
asked for."

— Yvonne Zürcher · Personal commission

{/* ────── PROCESS ────── */}
02 — Process

Four movements,
one mark.

The method is small on purpose. No five-week discovery, no fifty-slide deck — just enough structure to give the drawing room to be specific.

{PROCESS_STEPS.map((s, i) => (
/ {s.n}

{s.title.toUpperCase()}

{s.body}

))}
{/* ────── DISCIPLINES ────── */}
03 — Disciplines

What gets
made here.

{[ { n: "01", t: "Logo & Identity", b: "Wordmarks, monograms, single-line marks. Hand-drawn before they're vectorised. Built to scale from a hood-tab to a billboard." }, { n: "02", t: "Illustration", b: "Editorial, packaging, marginalia. Line-art series drawn at A2 with a 0.3mm rapidograph, then reduced." }, { n: "03", t: "Art Direction", b: "Editorial issues, campaigns, image commissioning. Type and layout systems that hold up across production." }, ].map(d => ( ))}
{/* ────── CTA OUTRO ────── */}
04 — Working together

Let's make
a mark
that lasts.

Tell me about the work — the company, the audience, the deadline you're not sure about. I read everything and reply within 12 hours, 7/7.

); } function FeaturedCell({ project, idx, large, onClick }) { return (
{project.category.toUpperCase()} · {project.year}

{project.title.toUpperCase()}

View case study →
} /> ); } // ═════════════════════════════════════════════════════════════════════ // PORTFOLIO // ═════════════════════════════════════════════════════════════════════ function PortfolioPage({ openProject, initialFilter }) { const [filter, setFilter] = useState(initialFilter || "All"); // Update if route changes carry a new filter useEffect(() => { if (initialFilter) setFilter(initialFilter); }, [initialFilter]); // Filter logic supports both top-level categories AND tag-keywords. // A tag match is case-insensitive substring match against any tag string. const isCategory = (v) => CATEGORIES.includes(v); const filtered = useMemo(() => { if (filter === "All") return PROJECTS; if (isCategory(filter)) return PROJECTS.filter(p => p.category === filter); const needle = filter.toLowerCase(); return PROJECTS.filter(p => p.tags.some(t => t.toLowerCase().includes(needle))); }, [filter]); // Curated style/tag filters — mirror the hero chips so they're discoverable here too. const styleFilters = ["Wordmark", "Line art", "Editorial", "Engraving", "Monogram", "Packaging"]; const countFor = (v) => { if (v === "All") return PROJECTS.length; if (isCategory(v)) return PROJECTS.filter(p => p.category === v).length; const needle = v.toLowerCase(); return PROJECTS.filter(p => p.tags.some(t => t.toLowerCase().includes(needle))).length; }; return (
An archive
of marks.} sub="A selection of work since 2021 across logo design, brand identity, illustration, and art direction. Filter by discipline or style, or open any project for the long version." ghost="WORK" /> {/* FILTER BAR — Discipline (categories) + Style (tag keywords) */}
{/* Row 1: Discipline */}
DISCIPLINE
{CATEGORIES.map(c => ( ))}
 
{/* Row 2: Style */}
STYLE
{styleFilters.map(s => ( ))}
{/* GRID — grouped by discipline when viewing all */}
{filter === "All" ? ( CATEGORIES.filter(c => c !== "All").map(cat => { const group = filtered .filter(p => p.category === cat) .sort((a, b) => Number(b.year) - Number(a.year)); if (group.length === 0) return null; return (

{cat}

{String(group.length).padStart(2, "0")} {group.length === 1 ? "PROJECT" : "PROJECTS"}
{group.map((p, i) => ( openProject(p.id)} /> ))}
); }) ) : (
{filtered.map((p, i) => ( openProject(p.id)} /> ))}
)} {filtered.length === 0 && (

Nothing here yet.

)}
); } // ═════════════════════════════════════════════════════════════════════ // PROJECT DETAIL // ═════════════════════════════════════════════════════════════════════ function ProjectDetail({ project, onClose, openProject }) { useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [onClose]); const i = PROJECTS.findIndex(p => p.id === project.id); const next = PROJECTS[(i + 1) % PROJECTS.length]; const prev = PROJECTS[(i - 1 + PROJECTS.length) % PROJECTS.length]; return (
{/* Sticky bar */}
{project.title.toUpperCase()}
{/* HERO */}
{project.title.toUpperCase().split(" ")[0]}
CASE STUDY · {project.category.toUpperCase()}

{project.title}

{project.summary}

Client
{project.client.split(" ")[0]}
Discipline
{project.category.split(" ")[0]}
Scope
{project.tags[0]}
Year
{project.year}
{/* HERO BLEED — primary cover */}
The Primary Mark{project.title.toUpperCase()} · {project.year}
{/* CONCEPT — inverse panel */}
02 — The Concept

One mark.
Many lives.

{project.client} arrived with a category problem disguised as a logo brief. We spent the first conversations not drawing — clarifying the proposition, sitting with the audience, deciding what the company would and wouldn't be.

The mark followed. One contour, drawn at four optical weights, tested at thumbnail and at billboard before it ever earned its name.

{project.tags.map(t => ( {t} ))}
{project.title}

Fig. 01 — The mark, isolated. Holds its reading down to favicon scale.

{/* GALLERY */} {project.gallery.length > 0 && (
03 — System in use

Off the page,
onto the surface.

{project.gallery.map((g, ix) => (
2 ? "1 / -1" : "auto" }}>
))}
)} {/* STATEMENT */}

"Drawn once. Drawn well. The only thing about the company that hasn't changed since."

— {project.client.toUpperCase()}

{/* PREV / NEXT */}
); } // ═════════════════════════════════════════════════════════════════════ // ABOUT // ═════════════════════════════════════════════════════════════════════ function AboutPage({ navigate }) { return (
Drawing since
before it was
useful.} sub="GencyDesigns is a one-person studio practicing logo design, illustration, and art direction. The work is hand-drawn first, vectorised second, and shipped only when every line earns its place." ghost="STUDIO" /> {/* PORTRAIT + INTRO — uses real portrait */}
Gency — portrait
GENCY · STUDIO PORTRAIT
FIG. 01SHOT BY THE WINDOW · 2026

I'm Gency.
I draw marks.

The studio opened in 2021. I left agencies because the work I cared about — the slow, line-by-line, draw-it-again work — wasn't the work that paid their rent.

It pays mine, now. Most clients come by referral, which keeps the practice small on purpose — focused, selective, and answerable only to the work.

The signature is line art — single-weight, continuous-stroke, drawn before it ever sees a Bézier. It lasts longer than the style of the moment.
{/* PRINCIPLES — RED */}
01 — Practice

Three things
I don't negotiate.

{[ { n: "/ 01", t: "Drawn, not generated.", b: "Every mark starts as a pencil drawing. The vector is the last step, not the first — and never the only one." }, { n: "/ 02", t: "Few rounds, deep ones.", b: "Two refinement rounds, not five. The cost of clarity is showing up with strong opinions, lightly held." }, { n: "/ 03", t: "One stroke, many sizes.", b: "If a mark only works at one size, it isn't a mark — it's a poster. Tested at thumbnail and at billboard before sign-off." }, ].map((p, i) => (
{p.n}

{p.t}

{p.b}

))}
{/* DISCIPLINES */}
02 — Disciplines

What I make,
specifically.

{[ { c: "Logo & monogram", items: "Wordmarks · Continuous-line marks · Monograms · Custom display lettering · Identity refresh" }, { c: "Brand identity systems", items: "Strategy · Type & color · Illustration library · Guidelines · Templates · Rollout" }, { c: "Illustration", items: "Editorial · Line-art series · Cover commissions · Packaging illustration · Marginalia" }, { c: "Art direction", items: "Editorial issues · Campaigns · Image commissioning · Type & layout systems · Production oversight" }, ].map((s, i) => (
/ 0{i + 1}

{s.c.toUpperCase()}

{s.items}

))}
{/* RECOGNITION */}
03 — Recognition

A few honest
nods.

    {RECOGNITIONS.map((r, i) => (
  • {r.toUpperCase()} 20{23 + (i % 3)}
    • ))}
); } // ═════════════════════════════════════════════════════════════════════ // SERVICES // ═════════════════════════════════════════════════════════════════════ function ServicesPage({ navigate }) { const [openFaq, setOpenFaq] = useState(0); return (
Three ways
to work
together.} sub="Every project gets a written estimate before we begin. Pricing is honest — based on scope, complexity, and how many touchpoints the system needs to govern." ghost="SERVICES" />
{SERVICES.map((s, i) => (
e.currentTarget.style.transform = "translateY(-6px)"} onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"} >
/ {s.n} {s.featured && ★ MOST ASKED}

{s.name}

{s.tagline}

{s.description}

(INCLUDES)
    {s.deliverables.map((d, ix) => (
  • — {d}
    • ))}
(TIMELINE) {s.timeline.toUpperCase()}
{s.starting}
))}
01 — On Pricing

Honest,
by design.

The numbers don't appear here on purpose. Pricing is by quote — once we've talked, you'll get a written estimate fixed to your scope, with no surprises and no after-the-fact line items.

Payment is 40% to begin, 30% at midpoint, 30% on delivery. Smaller projects can be a single split.

Don't see what you need? Identity refreshes, packaging-only commissions, type design, and consulting all happen here too — just .
02 — Common questions

Before you
write — maybe
this.

{FAQ.map((f, i) => (

{f.a}

))}
); } // ═════════════════════════════════════════════════════════════════════ // CONTACT // ═════════════════════════════════════════════════════════════════════ function ContactPage({ navigate }) { const CONTACT_EMAIL = "hello@gencydesigns.com"; const [form, setForm] = useState({ name: "", email: "", projectType: "Brand Identity", budget: "By quote", timeline: "2–3 weeks", message: "", }); const [errors, setErrors] = useState({}); const [submitted, setSubmitted] = useState(false); const [mailHref, setMailHref] = useState("#"); const update = (k, v) => setForm(f => ({ ...f, [k]: v })); const validate = () => { const e = {}; if (!form.name.trim()) e.name = "Required"; if (!form.email.trim()) e.email = "Required"; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Check this"; if (!form.message.trim() || form.message.trim().length < 20) e.message = "A sentence or two, please"; setErrors(e); return Object.keys(e).length === 0; }; const onSubmit = (ev) => { ev.preventDefault(); if (!validate()) return; const body = [ `New enquiry from ${form.name}`, `Submitted ${new Date().toLocaleString()}`, ``, `Name: ${form.name}`, `Email: ${form.email}`, `Project type: ${form.projectType}`, `Budget: ${form.budget}`, `Timeline: ${form.timeline}`, ``, `Message:`, form.message, ].join("\n"); const href = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(`Enquiry \u2014 ${form.name}`)}&body=${encodeURIComponent(body)}`; setMailHref(href); setSubmitted(true); window.location.href = href; }; if (submitted) { return (
▸ RECEIVED · {new Date().toLocaleDateString()}

Thank you,
{form.name.split(" ")[0]}.

Your email app should have opened with your note ready to send to hello@gencydesigns.com — just hit send. If it didn't open, click here to send it. I reply within 12 hours — usually with a question or two before anything else.

); } return (
Begin with a
conversation.} sub={<>Tell me about the company, the audience, and the thing you're trying to solve. A paragraph is plenty — we'll find the rest in a call. Or, if you want to go deeper now, .} ghost="CONTACT" />
update("name", e.target.value)} placeholder="Elena Marsh" autoComplete="name" /> {errors.name && {errors.name}}
update("email", e.target.value)} placeholder="elena@northfolk.co" autoComplete="email" /> {errors.email && {errors.email}}