Fizzi 3D Website

The Fizzi 3D Website project is a dynamic, soda-themed personal portfolio built using the latest web technologies. The goal of the project is to create a visually engaging and interactive portfolio that showcases your work in a unique and creative way, utilizing 3D elements, smooth animations, and responsive design. This project leverages Next.js for server-side rendering and routing, Prismic CMS as the headless content management system, Three.js for rendering 3D objects, Tailwind CSS for streamlined styling, and GSAP for advanced animations.

The project revolves around a soda brand theme, which is reflected in various elements of the site, including 3D models of soda cans, animated bubbles, and smooth transitions between sections. The creative direction aims to give your portfolio a playful and bold visual aesthetic.

Key Features

• Next.js and Prismic CMS Integration: You will learn how to set up and configure a Next.js project with Prismic CMS, enabling you to manage content dynamically and efficiently.
• Interactive 3D Elements: Using Three.js, you'll integrate interactive 3D objects such as a soda can that users can interact with, adding depth and immersion to your portfolio.
• Advanced Animations with GSAP: GSAP (GreenSock Animation Platform) will be used to implement smooth transitions, animations, and other visual effects that enhance the user experience.
• Responsive Styling with Tailwind CSS: Tailwind CSS simplifies the styling process, ensuring your portfolio is mobile-friendly and looks polished across all devices.
• Customization Options: You can personalize the design using assets from the Figma file provided, and even modify 3D objects using the Blender file included in the project resources.
• Deployment on Vercel: Finally, you’ll learn how to deploy the portfolio on Vercel, making it accessible to the public.

Project Breakdown

The course walks you through each step of building the Fizzi 3D Website:

• Setting up a Next.js project and integrating it with Prismic CMS to handle content dynamically.
• Creating and styling various components like the header, hero section, and carousel using Tailwind CSS.
• Incorporating 3D models and textures using Three.js to create an interactive soda can that can be customized.
• Animating page transitions, bubbles, and text with GSAP to create a lively, interactive user experience.
• Building reusable and modular components like the Bounded.tsx and TextSplitter.tsx to streamline development.
• Deploying the final website to Vercel for hosting and setting up webhooks for continuous deployment from Prismic.

Customization Options

The course also provides optional customization resources to allow for a unique look and feel:

• A Figma file for customizing the visual elements such as the soda can labels and renders.
• A Blender file for the 3D soda can model, enabling you to make design tweaks or completely revamp the soda brand theme.

Documentation and Resources

You will be provided with access to a range of documentation to support your learning:

• Prismic Documentation
• Next.js Documentation
• Tailwind CSS Documentation
• GSAP Documentation
• Zustand Documentation for state management
• Vercel Deployment Guide

By the end of this project, you will have a stunning, interactive, and fully deployed personal portfolio that showcases your technical skills and creativity. The project is a perfect blend of modern web development practices, from dynamic content management to 3D web graphics and smooth animations.

Project Result