Atelier Folio

Atelier Folio is a four-page editorial portfolio for designers, engineers, and writers who want their work to read like a printed quarterly rather than a SaaS landing page. It ships as a React 19 + Vite 7 single-page app with four routes — Index, Studio, Work, and Writing — and a shared editorial layout that keeps every page inside the same magazine column.

The craft is in the details you can see in the code. Bistre ink sits on an aged-paper background, with burnt sienna and warm ochre as the two accents. Headings are set in Fraunces and body copy in Inter, over a faint SVG paper-grain texture and hairline page margins. Headlines arrive line by line through a LineReveal lift, each route opens with a clip-path PageLeaf reveal, and a single dark-mode toggle swaps the palette tokens in place — all of it client-side and gated by prefers-reduced-motion.

Who it's for

• Independent designers and studios-of-one who want an editorial home base
• Front-end and product engineers presenting case studies and side projects
• Writers and editors who treat their essays as first-class work
• Type and print practitioners who care about Fraunces, optical sizing, and a quiet headline
• Anyone who wants a calm, paper-feeling portfolio instead of a generic template

What's included

• Index — a hero pairing a portrait with a LineReveal headline, an intro paragraph, a CV button, and an email CTA, plus a fixed availability card and compass mark
• Studio — bio, framed photo, three scroll-triggered count-up stats, a twelve-row Capabilities index with a synced detail panel, a Studio history timeline, and an Education list
• Work — featured case studies and an 'Also in the workbook' grid, each with summary, tag chips, an outbound link, and a GitHub link
• Writing — a featured two-up article grid and a 'From the archive' list, each with title, summary, date, and read time
• Shared chrome — a logo-centered navbar with social links and a dark-mode toggle, an accessible fullscreen mobile menu with focus trapping, and a Fraunces-set footer
• Motion primitives — PageLeaf clip-path reveals, LineReveal staggered headlines, and CountUpDigits, all honouring reduced motion
• Typed content layer — projects, articles, experience, education, stats, and links live in one data file you edit by hand

Best use cases

Personal portfolio

Use all four pages as-is: introduce yourself on Index, tell your story on Studio, show selected projects on Work, and collect your essays on Writing. Swap the photo, copy, and links and you have a complete editorial site.

Studio or freelance site

The Work page's featured case studies and the Studio history timeline read well for a small practice. The availability card and email CTAs make it clear you are open for commissions without needing a backend.

Writer or editor home

Lead with the Writing page, lean on the featured-plus-archive layout, and use the Studio page to establish credibility. Fraunces and the paper-grain texture suit long-form, print-minded work.

Make it yours

1. Remix the template

Click remix to fork Atelier Folio into your own private project on mythos.new. You get the full React 19 + Vite 7 source — pages, components, motion primitives, and the typed data file — ready to edit.

2. Customize your brand

In the in-browser IDE and chat, edit the data file to replace the projects, articles, experience, stats, and links, then swap the portrait and copy. Adjust the paper, ink, and accent tokens to recolor light and dark mode at once. Point the CV button at a real PDF and set the mailto address — the contact CTAs are validated email links, ready to wire, with no form submission to configure.

3. Publish

When it looks right, publish to a <name>.r21.dev subdomain in a click. Your editorial portfolio goes live as a fast static site, and you can keep iterating and republishing from the same project.