3D Portfolio

🌐 Live Demo

Explore the live demonstration of the project: 3d-portfolio-website

📝 Description

3D Portfolio is a well-designed and fully functional portfolio website that is built with React.js and Three.js. It is a fully responsive website that works well on all devices.

Folder Structure

3d-portfolio-website/
├── src/
├   ├── App.tsx
├   ├── globals.css
├   ├── main.tsx
├   ├── vite.env.d.ts
├   ├── components/
├   ├   ├── atoms/
├   ├   ├   └── Header.tsx
├   ├   ├── canvas/
├   ├   ├   ├── Ball.tsx
├   ├   ├   ├── Computers.tsx
├   ├   ├   ├── Earth.tsx
├   ├   ├   ├── Stars.tsx
├   ├   ├   └── index.ts
├   ├   ├── layout/
├   ├   ├   ├── Loader.tsx
├   ├   ├   └── Navbar.tsx
├   ├   ├── sections/
├   ├   ├   ├── About.tsx
├   ├   ├   ├── Contact.tsx
├   ├   ├   ├── Experience.tsx
├   ├   ├   ├── Feedbacks.tsx
├   ├   ├   ├── Hero.tsx
├   ├   ├   ├── Tech.tsx
├   ├   ├   ├── Works.tsx
├   ├   ├   └── page.tsx
├   ├   └── index.ts
├   ├── constants/
├   ├   ├── config.ts
├   ├   ├── styles.ts
├   ├   └── index.ts
├   ├── hoc/
├   ├   ├── SectionWrapper.tsx
├   ├   └── index.ts
├   ├── utils/
├   ├   └── motion.ts
├   ├── types/
├   ├   └── index.d.ts
├   └── assets/
├       ├── company/
├       ├   └── [[...]].{svg,png}
├       ├── tech/
├       ├   └── [[...]].{svg,png}
├       ├── [[...]].{svg,png}
├       └── index.ts
├── public/
├   ├── desktop_pc
├   ├   ├── textures/[[...]].png
├   ├   ├── license.txt
├   ├   ├── scene.bin
├   ├   └── scene.gltf
├   ├── planet
├   ├   ├── textures/[[...]].png
├   ├   ├── license.txt
├   ├   ├── scene.bin
├   ├   └── scene.gltf
├   ├── logo.png
├   └── logo.svg
├── .env
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .prettierignore
├── .prettierrc.cjs
├── index.html
├── LICENSE
├── README.md
├── package.json
├── postcss.config.cjs
├── tailwind.config.cjs
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.js

📖 Table of Contents

Table of Contents

• Live Demo
• Description
• Technologies Used
• Get Started
  • Prerequisites
  • Installation and Run Locally
  • Scripts
• Environment Variables
• Deployment
  • Deploy to production (manual)
  • Deploy on Vercel (recommended)
  • Deploy on Netlify
• Contributing
  • Bug / Feature Request
• Acknowledgements
• References
• Contact Us
• License

✨ Technologies Used

3D Portfolio is built using the following technologies:

• TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• Vite: Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
• React.js: React is a free and open-source front-end JavaScript library for building user interfaces or UI components.
• Three.js: Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.
• Framer Motion: Framer Motion is a production-ready motion library for React.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
• ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
• Prettier: Prettier is an opinionated code formatter.
• Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

🧰 Get Started

To get this project up and running in your development environment, follow these step-by-step instructions.

📋 Prerequisites

In order to install and run this project locally, you would need to have the following installed on your local machine.

• Node.js
• NPM
• Git

⚙️ Installation and Run Locally

Step 0:

Note ‼️ the application uses EmailJS in order to send emails using client-side, therefore, you need to create EmailJS account here and sets the VITE_EMAILJS_SERVICE_ID, VITE_EMAILJS_TEMPLATE_ID, and VITE_EMAIL_JS_ACCESS_TOKEN environment variables in .env file.

Step 1:

Download or clone this repo by using the link below:

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

Step 2:

Execute the following command in the root directory of the downloaded repo in order to install dependencies:

npm install

Step 3:

Execute the following command in order to run the development server locally:

npm run dev

Step 4:

Open http://localhost:5173 with your browser to see the result.

📜 Scripts

All scripts are defined in the package.json file. Here is a list of all scripts:

Script	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:5137
npm run build	Build your production site to ./dist/
npm run preview	Boot up a local static web server
npm run lint	Run ESLint
npm run ts:check	Perform type-checking

🔒 Environment Variables

Environment variables[^3] can be used for configuration. They must be set before running the app.

Environment variables are variables that are set in the operating system or shell, typically used to configure programs.

React.js 18 3D Portfolio uses EmailJS as external service. You need to create an account and get the required credentials to run the app.

Create a .env file in the root directory of the project and add the following environment variables:

VITE_EMAILJS_SERVICE_ID=<VITE_EMAILJS_SERVICE_ID>
VITE_EMAILJS_TEMPLATE_ID=<VITE_EMAILJS_TEMPLATE_ID>
VITE_EMAIL_JS_ACCESS_TOKEN=<VITE_EMAIL_JS_ACCESS_TOKEN>

🚀 Deployment

Deploy to production (manual)

You can create an optimized production build with the following command:

npm run build

Deploy on Vercel (recommended)

The easiest way to deploy this Next.js app is to use the Vercel Platform.

Deploy on Netlify

You can also deploy this Next.js app with Netlify.

Check out Next.js deployment documentation for more details.

💎 Acknowledgements

We'd like to express our gratitude to the following technologies who helped us with this project and made it possible:

• Tailwind CSS
• Three.js
• Framer Motion
• React Vertical Timeline Component
• React Parallax Tilt
• Maath
• EmailJS
• ESLint
• Prettier
• Vercel
• JavaScript Mastery

📞 Contact Us

📋 License

licensed as MIT and is free to use — See LICENSE for more details.

▶️ Watch Video Tutorial

❤ Thank you for reading, here's a cat: