Editorial Portfolio Site in Framer (Demo)
Vincent L. Anderson
Concept demo built to a brief, with a fictional client and sample data. Not client work. The demo is live: https://demos.mc.mightyhouseinc.com/vantrey-portfolio/
Two color themes and two type pairs swap live on the same page
One page for a fictional independent creative director in music: seven sections, anchor navigation, and twelve components that repeat across the page.
The aesthetic in the brief: editorial, contemporary, bold, with a luxury sensibility
Editorial: a numbered section index, leader-dot contents, running heads and a measured text column.
Contemporary: a flat grid, generous white space and a sticky utility bar.
Bold: a display headline at full column width, with heavy weight and tight tracking.
Luxury: restrained color, one metal accent, wide letter-spaced labels and slow transitions.
Noir theme with the editorial type pair
Bone theme with the contemporary type pair
Selected work: four programs with their roles and results
Phone layout at 390 px
Method: the page is hand-written HTML, CSS, SVG and plain JavaScript, with no framework and no outside libraries. It is not a Framer export. It is built with the structure of a Framer project, and it ships a rebuild kit at site/framer-handoff: styles.json holds the named color and text styles, components.json holds the twelve components and where each one occurs, content.json holds the editable content fields, and the README walks through rebuilding the page in Framer in nine steps. Swapping themes and type pairs stands in for customizing a template. With prefers-reduced-motion the page gives the same information without large movement.
Like this project
Posted Oct 13, 2026
Concept demo with sample data: a one-page portfolio for a fictional creative director in music. Seven sections, twelve reusable components, and a control that swaps two color themes and two type pairs live. Responsive at 1440 and 390 px, with a Framer rebuild kit.
