https://github.com/bouzayenilyes/fizzifresh

Fizzi 3D Website Product - Landing Page with Next.js, Prismic, Three.js, Tailwind, and GSAP
https://github.com/bouzayenilyes/fizzifresh

gsap nextjs14 prismic tailwindcss threejs

Last synced: 21 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/bouzayenilyes/fizzifresh
• Owner: bouzayenilyes
• License: mit
• Created: 2024-09-19T13:20:28.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-11-22T11:32:34.000Z (about 1 month ago)
• Last Synced: 2024-11-22T12:28:45.330Z (about 1 month ago)
• Topics: gsap, nextjs14, prismic, tailwindcss, threejs
• Language: TypeScript
• Homepage: https://fizzifresh.vercel.app
• Size: 2.42 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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:

```bash

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

```

Install dependencies:

```bash 

npm install

```

Running the Project

```bash 

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.