React prototype → 12-page Framer site (spec build) by Andrii BobrovskyiReact prototype → 12-page Framer site (spec build) by Andrii Bobrovskyi

React prototype → 12-page Framer site (spec build)

Andrii Bobrovskyi

Andrii Bobrovskyi

Spec build — made for a production house's Contra job post and submitted with my application. Not commissioned; I wasn't hired. The brand, logo, copy and photos are theirs.
What it is The job post linked a working React prototype and a FigJam board of screenshots, and asked for the site in Framer. The prototype was the real source: its code held all the copy, colour tokens and layouts. I rebuilt it as a Framer site that can be edited without touching code.
The desktop home page from the top, showing the hero and the studio's positioning statement.
The desktop home page from the top, showing the hero and the studio's positioning statement.
What I built
12 pages: Home, Portfolio, About, Blog, Contact, five service pages, and two CMS templates for blog posts and case studies
Two CMS collections: Blog Posts (6 entries) and Case Studies (12 entries, 3 with full write-ups)
Every page at 1200, 810 and 390 px
A branching enquiry form, following the conditional flow mapped on their FigJam board: the service you pick changes the next questions, with a budget slider per service. Each service page opens the form with that service preselected
The enquiry form branches by service: Podcasts asks whether the show is new or existing, Events asks for a date and photo or video.
The enquiry form branches by service: Podcasts asks whether the show is new or existing, Events asks for a date and photo or video.
The hard part Navigation. The header lived in a layout template, and the variant and overlay interactions I set on it through Framer's Server API did nothing on the published site. The whole nav became a React code component: plain links on desktop, a native <details> drawer on mobile.
Four inner pages: the filterable portfolio, a CMS case study, the Podcasts service page and the blog.
Four inner pages: the filterable portfolio, a CMS case study, the Podcasts service page and the blog.
Details worth checking
Their display face, Wilden, isn't available in Framer, so I used the fallback their own designer wrote into the prototype CSS: Bricolage Grotesque
Assets came from the stylesheet as well as the markup. A footer background photo was referenced only in the CSS, and the real logo was an image file, not type
Mobile layouts for the blog, the open navigation menu and a case study page.
Mobile layouts for the blog, the open navigation menu and a case study page.
Timeline and stack Built and published in one working day. Framer, Framer CMS, React code components, and Server API scripts for the repetitive setup.
Like this project

Posted Aug 30, 2026

Spec build for a production house's Contra job post, submitted with my application; not commissioned. Their working React prototype rebuilt as a 12-page Framer site: two CMS collections, a branching enquiry form and code-component navigation, built in one working day.