🤖 Introduction Built with React.js for handling the user interface, Three.js for rendering 3D elements, and styled with TailwindCSS, the 3D Minimalistic portfolio is a website project. The primary goal is to demonstrate the developer's skills in a unique manner that creates a lasting impact.
If you're getting started and need assistance or face any bugs, join our active Discord community with over 34k+ members. It's a place where people help each other out.
⚙️ Tech Stack Node.js React.js Three.js React Three Fiber React Three Drei Email JS Vite Tailwind CSS 🔋 Features 👉 Immersive Hero: An eye-catching 3D hacker room that responds to mouse movements, surrounded by animated mini-models.
👉 Interactive About Me: A sleek bento grid layout featuring personal info, a 3D globe pinpointing location, tech stack icons, and a one-click email copy option.
👉 Dynamic Project Showcase: Browse through projects while watching live demos inside a 3D computer model, seamlessly switching between different projects.
👉 Engaging Experience Timeline: Hover over career milestones to trigger interactive 3D animations that bring your professional journey to life.
👉 Client Testimonials: A dedicated section highlighting satisfied clients and their feedback.
👉 Easy Contact Form: A user-friendly email form for visitors to reach out directly from your portfolio.
👉 Clean Footer: A minimalist design featuring social media links for easy networking.
👉 Fully Responsive: Optimized layout ensuring a smooth experience across all devices, from desktop to mobile.
and many more, including code architecture and reusability
🤸 Quick Start Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Git Node.js npm (Node Package Manager) Cloning the Repository
[git clone (https://github.com/Anujkumar108/Threejs-portfolio.git) cd Threejs-portfolio Installation
Live Deploy here https://vercel.com/anujkumars-projects/threejs-portfolio
Install the project dependencies using npm:
npm install Set Up Environment Variables
Create a new file named .env in the root of your project and add the following content:
REACT_APP_EMAILJS_USERID=your_emailjs_user_id REACT_APP_EMAILJS_TEMPLATEID=your_emailjs_template_id REACT_APP_EMAILJS_RECEIVERID=your_emailjs_receiver_id Replace the placeholder values with your actual EmailJS credentials. You can obtain these credentials by signing up on the EmailJS website.
Running the Project
npm run dev Open http://localhost:5173 in your browser to view the project.
🕸️ Snippets tailwind.config.js index.css constants/index.js components/Cube.js components/Ring.js About Earth Maps components/HackerRoom.jsx 🔗 Links Here is the list of all the resources used in the project video:
Hacker Room Computer Target Model React Logo gltfjsx ReadyPlayerMe Mixamo FBX Animations ZIP