[ QUICK START ]
Make yourself at home.
01 / Change your name
In Pages, open Quick Start and Style Guide for editing guidance; they are not linked in the public footer. In Assets → Portfolio Shell, edit the brand text in Navigation → Header Logo — Text or Image. To use an image, choose Logo in the template variables and set Logo Type to Image. Set Logo Description for the accessible Home link. Adjust the Logo image height in the Desktop and Phone layouts. Then select Loading and edit Brand. On Home, select Interactive VHS Archive and edit Brand, Imprint, Edition and Color label. The cover labels inherit these settings; no code edit is needed.
02 / Add a project
Open CMS → Projects. Edit one of the eight demo projects or add an item. Fill Title, Cover, Cover Description, Year, Discipline, Summary, Role, Timeline, Deliverables and Story. Set Cover Accent to complement the image. Home and every case study share this collection.
03 / Replace the images
Use Cover for the archive and opening image; write Cover Description for its alternative text. Add images and meaningful Descriptions in Gallery. Descriptions appear below the images and in the lightbox. The first gallery image spans the page; supporting images sit together on wide screens. Review both portrait and landscape crops.
04 / Edit the case study
Story is CMS rich text. The demo entries use six sections: brief, point of view, design language, process, deliverables and demo context. Replace them with your own challenge, role, decisions and verified outcome. Open CMS → Profile → Alex Morgan to edit Statement, Name, Role, Biography, Portrait, Portrait Description, Location, Availability and Contact Link. Expertise and Experience are editable lists in the same item.
05 / Customize the design
Edit Ink, Surface, Paper, Muted, Accent, Line and Signal in Assets → Styles. Display, Heading, Body, Label, Reading and Portrait Title are shared text styles. Select Interactive VHS Archive for cover Title font and Label font. Select the Gallery component for its Label font. Component fonts use their own controls; decorative tape edges and reflections keep fixed material details.
06 / Adjust the atmosphere
In Assets → Portfolio Shell, select Loading — select to edit in Layers. Enable Edit preview to see a still loading screen on Canvas, then edit Brand, Caption, Brand font, Label font, Background, Text, Signal, Show mark and Minimum time. Turn Edit preview off when finished; it never replays the website animation on Canvas. Enabled controls whether the website loader runs. For CRT Glass, adjust Vignette, Scanlines and Reflection. Motion respects reduced-motion preferences; loading runs once per document visit.
07 / Before publishing
Check every page and link, long titles, project order, keyboard and touch behavior, Gallery, reduced motion, all breakpoints and sizes between them. Replace the demo email, metadata and image descriptions. Publication is a separate step.
08 / Assets and setup
All eight projects, timelines and results are fictional demo content. Stock photographs are visual references from Unsplash, stored in Framer; replace them with your own work and credits. Main native styles use Cormorant Garamond and IBM Plex Mono. Custom components use React, Framer and framer-motion. Live publication, clean-remix QA and distribution-rights documentation remain separate release checks.