Design Studio

Design Studio — Creative Portfolio Platform

Design Studio is a modern web application created to showcase the work and services of a creative studio. The platform is built using Next.js 14 and a Sanity headless CMS, allowing flexible content management while maintaining a fast and highly optimized frontend experience.

The project focuses on presenting portfolio projects through a visually engaging interface combined with a scalable content management system.

⸻

Technical Architecture

Frontend • Next.js 14 • React 18 • TailwindCSS • Styled Components • Framer Motion animations • Swiper sliders • React Icons

CMS & Backend • Sanity Headless CMS • next-sanity integration • Portable Text rendering

⸻

Key Features

Headless Content Management Sanity CMS enables editors to easily manage website content including: • portfolio projects • image galleries • textual content • page structure

Content is dynamically fetched and rendered within the Next.js application using next-sanity integration.

⸻

Interactive UI and Animations To create a visually engaging experience, several animation techniques were implemented using Framer Motion, including: • animated sections • scroll-triggered effects • micro-interactions

Additional visual effects such as tsparticles backgrounds and Swiper sliders enhance the overall user experience.

⸻

Dynamic Statistics The react-countup library is used to animate numerical values and statistics, creating engaging data presentation elements.

⸻

SEO Optimization The platform includes several SEO improvements: • automatic sitemap generation using next-sitemap • image optimization with Sharp • server-side rendering for better search engine indexing

⸻

Result

The final product delivers a fast and visually compelling website that allows the design studio to present its portfolio, services, and projects through a scalable and modern web architecture.