Overprint Experimental Designer Portfolio Template

A public portfolio for one graphic or motion designer that behaves like a risograph. Fluorescent pink, blue, and yellow inks overlap on newsprint, slightly out of register. The home page is a large canvas of work pinned at scattered angles: drag or scroll to pan, use the arrow keys to move between pieces, and press Enter to open one. A List switch shows a plain index, and it is the default when a visitor prefers reduced motion. Phones get a vertical collage that scrolls normally. Each project file sets its place on the canvas and two inks that color its case study page, and display headlines shift their width under the pointer. The About page lists services, clients, and experience with a CV download, and the contact form saves messages and emails you once you set your address. There are no accounts or admin screens: projects are files you change by asking the agent. Includes 6 fictional projects with finished sample artwork and a looping title sequence. Built with Layerwise, React, and TanStack Start.

Use Overprint for a graphic or motion designer who wants the portfolio itself to show some nerve. Drag the home page canvas in the live demo, then switch to List for the plain index. Juno Reyes and every client are fictional, so replace them before you publish.

• A pannable canvas of pinned work with inertia and arrow-key movement, a List switch, a vertical collage on phones, and a Work page filtered by discipline.
• Case studies colored by two inks chosen per project, overprinted display type that shifts width under the pointer, full, paired, and gallery images, text, quotes, video, and metrics.
• An About page with a CV download, a contact form with a honeypot and a rate limit, six fictional projects with finished artwork, and a README that explains how to add a project.

The template opens as a local project you can change through the conversation or the code editor. You can inspect the source for this template version before choosing how to extend it.

1. 1
   Install Layerwise and sign in. Choose Use this template, select a team and project name in the app, then choose Copy to Layerwise. Wait for setup and the local preview to finish.
2. 2
   Start in src/portfolio.config.ts for your name, bio, links, fonts, inks, and ownerEmail. Each project file in src/content/work sets its canvas position, rotation, and two inks. New images should go through pnpm add-images. If you change the display font, run pnpm measure-font, because headlines are set from measured glyph widths. You can do all of this by asking the agent.
3. 3
   Ask for the change in the project conversation. This prompt is a starting point; adjust it to describe your intended result.

   Make this portfolio mine: I am Lee Tran, a poster designer in Melbourne. Remove the sample projects and add one from the images I attached, using pnpm add-images. Pin it in the middle of the canvas with a slight rotation and use blue and yellow as its inks. Keep the canvas, the List switch, and the overprinted headlines. Check the canvas with arrow keys and check the phone collage at 390 px wide.

• On the home page, drag to pan and let go; the canvas should keep gliding, then stop. Press the right arrow to move to another piece and Enter to open it.
• Choose List and confirm every project appears as a plain row. With reduced motion turned on in your system settings, reload and the page should open on List.
• On a phone-width window, the collage should scroll normally. Send the Contact form and confirm the message appears in the contact_messages table under Database in Local.

New projects on paid plans start private, so turn off Private in the Publish menu before sharing your site. Local and published apps use separate databases, so messages sent to the preview won’t appear on the live site. Email only sends after the first publish and only once ownerEmail is set; until then, read messages under Database. Replace the fictional owner, clients, figures, and social links before you publish. Passwords for private case studies, a CMS, and a blog are not included.

Use the local preview controls to test the affected path. When it works, publish a release and repeat the check at the live URL. For saved records or accounts, read about the separate Local and Online databases.

• How to Build a Designer Portfolio with AIBuild a designer portfolio in Layerwise with a distinct visual style, real case studies, fast responsive images, and a contact form that works.