Synthetix

I recreated a Framer site originally designed by Nuts Dev, rebuilding it from scratch using Next.js and setting up a lightweight CMS with Prismic. This was a portfolio project exploring how to translate polished Framer designs into production-ready code while adding content management capabilities.

Synthetix cover image

What I Built

Synthetix is a landing page concept built for AI startups to showcase their services and establish their online presence. The original design featured sleek animations and modern UI patterns, and my goal was to recreate that premium feel while making the content easily editable through a CMS.

Synthetix demo video

I implemented the entire site with smooth animations using Framer Motion, matching the visual polish of the original Framer design. Then I integrated Prismic CMS using their slice architecture, allowing for flexible content management without sacrificing the design's integrity. This approach meant sections could be reordered, edited, or added without touching code.

Industries section

Technical Approach

The site is fully responsive across all devices, with careful attention to animation performance and loading times. I structured the Prismic slices to be modular and reusable, creating a system that could scale beyond this single landing page if needed.

Contact section

Tech Stack

Next.js • TypeScript • Prismic CMS • Tailwind CSS • Framer Motion • React

Hero section

The Learning

This project was a great exercise in translating design tools into production code while adding practical CMS functionality. It demonstrated how a well-structured headless CMS can give non-technical users control over content without compromising on design quality or animation polish.