3D Portfolio

This is a 3D portfolio project built using Next.js, Prismic CMS, Three.js, and GSAP. The project showcases a dynamic and interactive 3D environment to present portfolio content in a visually appealing manner.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contributing
5. License
6. Contact

About The Project

The 3D Portfolio project is an innovative web application designed to showcase personal or professional portfolio content in a visually striking and interactive manner. By leveraging advanced technologies, it provides a seamless and engaging user experience.

Key Features:

• Interactive 3D Environment: Utilizes Three.js to create dynamic 3D graphics.
• Smooth Animations: Implements GSAP for fluid transitions and animations.
• Content Management: Powered by Prismic CMS for flexible and easy content updates.
• Responsive Design: Ensures optimal display across various devices.
• Modern Web Technologies: Built with Next.js for seamless server-side rendering.

(back to top)

Built With

Next.js for seamless server-side rendering, Prismic CMS for flexible content management, Three.js for creating dynamic 3D graphics, and GSAP for smooth animations.

(back to top)

Folder Structure

3d-portfolio/
├── components/
│   ├── Header.js
│   ├── Layout.js
│   └── ...
├── pages/
│   ├── _app.js
│   ├── index.js
│   └── ...
├── public/
│   ├── images/
│   └── ...
├── styles/
│   ├── globals.css
│   └── ...
├── utils/
│   ├── prismicHelpers.js
│   └── ...
├── .env.local
├── next.config.js
├── package.json
└── README.md

Getting Started

To get a local copy up and running follow these simple steps.

Ensure you have the following installed on your local machine:

• Node.js
• npm or yarn

Installation

1. Clone the repo

   git clone https://github.com/sudoyasir/3d-portfolio.git

2. Navigate to project folder

   cd 3d-portfolio

3. Install dependencies

   npm install

(back to top)

Usage

1. Start the development server:

   npm start

You can visit http://localhost:3000 for preview

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this project better, please fork the repo and create a pull request. You can also simply open an issue. Don't forget to give the project a ⭐! Thanks again!

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Your Name - @stfuyasir - y451rmahar@gmail.com - yasirnawaz.me

Project Link: github.com/sudoyasir/3d-portfolio

Live Preview: 3d-portfolio-next.netlify.app

(back to top)