Fizzi 3D Website Product - Landing Page with Next.js, Prismic, Three.js, Tailwind, and GSAP

This repository contains the source code for building a creative personal portfolio. It showcases how to integrate modern web development technologies like Next.js, Prismic, Three.js, Tailwind CSS, and GSAP to create a visually dynamic and interactive personal website.

Overview

In this project, we aim to build a sleek and modern personal portfolio for showcasing work, skills, and projects. This includes:

• Next.js for server-side rendering and routing.
• Prismic for content management, allowing easy updating of portfolio content.
• Three.js to bring 3D elements to the website, making it visually engaging.
• Tailwind CSS for easy styling and rapid UI development.
• GSAP (GreenSock Animation Platform) for advanced animations and transitions that bring life to the portfolio.

Features

• Dynamic content management via Prismic.
• 3D models and scenes created with Three.js.
• Fluid and interactive UI using Tailwind CSS.
• Smooth animations and transitions with GSAP.
• Server-side rendering and performance optimization using Next.js.

Installation

To get started, clone this repository to your local machine:

git clone https://github.com/bouzayenilyes/fizzifresh.git

Install dependencies:

npm install

Running the Project

npm run dev

Open http://localhost:3000 in your browser to see the project.

Prismic Setup

To manage content with Prismic, follow these steps:

• Create a Prismic account at Prismic.io.
• Set up a new repository for your portfolio.
• Define the content models (e.g., projects, about section) in the Prismic dashboard.
• Update the API endpoint in the project’s prismic-config.js with your Prismic repository’s URL.
• Customization
• Feel free to customize the design and functionality to match your style and preferences. You can easily adjust the styling by editing the Tailwind configuration file, or update content through Prismic.

Image Assets

Image assets for the portfolio (such as project screenshots, background images, etc.) can be found in the assets/ folder. Replace these with your own images to personalize the portfolio.

Components

The repository includes reusable React components such as:

• Navbar
• Project Cards
• Hero Section
• Footer These components are modular and can be easily adapted or expanded based on your specific needs.

Technologies Used

• Next.js: A React framework for server-side rendering and static site generation.
• Prismic: A headless CMS for managing content.
• Three.js: A 3D JavaScript library for creating interactive 3D graphics.
• Tailwind CSS: A utility-first CSS framework for styling.
• GSAP: A JavaScript library for high-performance animations.

Contributing

If you'd like to contribute to the project, feel free to open a pull request or raise an issue on GitHub.