fizzifresh

KO | EN

gitlite — search

#javascript #react #typescript #llm #golang #go #docker #java #cli #kubernetes #pytorch #ios #mcp #openai

(★ 61)

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

fizzifresh 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

fizzifresh

fizzifresh 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

fizzifresh

fizzifresh 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README