This project is a 3D portfolio website built with Three.js.
It was inspired by another developer's project and serves as a learning exercise to understand and implement 3D web visualizations.
The portfolio showcases various projects and skills in an interactive 3D environment.
Users can navigate through the 3D space to explore different aspects of the portfolio.
- Three.js: This is the main library used for creating the 3D visualizations.
- React: The UI components are built using React.
- @react-spring/three: A spring physics based animation library that targets Three.js.
- @react-three/drei: A collection of reusable components for Three.js.
- @react-three/fiber: A React renderer for Three.js.
- React Router DOM: Used for routing in the React application.
- React Vertical Timeline Component: A React component for creating vertical timelines.
- EmailJS: Used for sending emails directly from the React application.
- Vite: A build tool and development server.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
- PostCSS: A tool for transforming CSS with JavaScript.
- Autoprefixer: A PostCSS plugin to parse CSS and add vendor prefixes to CSS rules.
- ESLint: A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- gh-pages: A tool to deploy your site to GitHub Pages.
- @types/react, @types/react-dom: TypeScript definitions for React and ReactDOM.
- @vitejs/plugin-react: Vite plugin for React.
- eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-react-refresh: ESLint plugins for React.
To run the project locally, follow these steps:
- Clone the repository:
git clone https://github.com/Okamixtape/3D_portfolio.git - Be sure to be into the project directory:
cd 3D_portfolio - Install the dependencies:
npm install - Start the development server:
npm start - Open your browser and visit
http://localhost:3000
This project was inspired by Adrian Hajdin.
The learning experience and the process of building this 3D portfolio was incredibly valuable !