Bisect Framer Template

About this template

Bisect is a résumé template for product designers who also build: people who design the flow and then write the components it runs on, and want a site that shows both.

It is built to be made yours. The name fits its tile at any length. Projects, experience, services, testimonials, notes, questions, the toolkit and the legal pages are all CMS collections, so adding a project updates the home page, the Work page, the hero and its own case study at once. Every colour is a colour style with a light and a dark value, and the switch in the navigation remembers each visitor's choice. Headings are set in Hubot Sans and text in Switzer, through text styles.

What is inside

- 12 pages: Home, Work and a page for each project, About, Services and a page for each service, Notes and a page for each note, Contact, Privacy and Terms, 404, and a Style guide

- 8 CMS collections: Projects, Experience, Services, Testimonials, Notes, FAQs, Toolkit, Legal

- Bisect, the hero: a portrait that splits into a résumé bento on scroll, with the name fitted to its tile and a focus point that keeps the face in view, checked from 1920 wide down to a 390 by 667 phone and in iOS Safari

- Work index: a project table that wipes each cover in along a cut line

- Sweep: a pinned sketch, prototype and shipped scene

- Case studies with client, role, team, timeline, challenge, approach, outcome, three results, a gallery and next project

- Light and dark themes, with a switch that remembers the choice and dark versions of every product picture

- A contact form with sending, sent and try again states

- Three breakpoints on every page: desktop, tablet, phone

- A style guide page with setup steps, colours, type, three more palettes, every component and what each collection feeds

- Four Framer Agent skills: design-system rules that are always on, plus add a project, add a page and rebrand