3D Portfolio Project:

This is a portfolio website showcasing 3D models made using Three.js and React.

View Deployment

Installation Guide:

1. Clone the repository: git clone https://github.com/gunjan1909/3d-portfolio.git
2. Install dependencies: npm install --legacy-peer-deps
3. Make a .env file in root directory and add your email.js credentials(for contact form to work and send you email)
   VITE_APP_EMAILJS_SERVICE_ID=...... VITE_APP_EMAILJS_TEMPLATE_ID=....... VITE_APP_EMAILJS_PUBLIC_KEY=....... VITE_APP_TO_EMAIL=your_email_id
4. To update your information, main data is in ./src/constants/index.js and other social links etc. in respective section files like footer, navbar etc.
5. Start the development server: npm run dev
6. NOTE: Needs hardware acceleration turned on in some browsers to work smoothly(eg: brave browser etc.).

Technologies Used:

• React: A JavaScript library for building user interfaces
• Three.js: A 3D graphics library built on top of WebGL
• Vite: A fast build tool for modern web applications
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs
• Framer: Framer Motion is a simple yet powerful motion library for React. It powers the amazing animations and interactions in Framer, the web builder for creative pros. Zero code, maximum speed.

Features:

• Showcases 3D models in an interactive and visually appealing manner.
• Responsive design for optimal viewing on different devices
• Smooth animations and transitions for a seamless user experience
  PS: Due to canvas and memory limits in phone devices, 3js webgl canvas models are reduced to normal animated components.

Usage:

• Navigate to the deployed website
• Use your mouse to drag and rotate the 3D models
  
• Click on the models to interact with them and see additional information
  NOTE: The effects and most 3js canvas and webgl models will be best visible on pc/laptop/desktop, due to memory and canvas limits, they have been reduced in phone browser for optimisation.

Credits/Resources followed:

• Tutorial video followed

• React docs

• Three.js docs

• Vite docs

• Tailwind CSS docs

• Other packages and libraries used can be viewed in dependencies in package.json file in root directory.

• Click here to download the assets

TODOs: (for personal use)

• Update the projects, experience and testimonials and other personal information. ⏳
• Add more social links in footer. ✅
• Fix touch scroll for mobiles due to canvas size ❌
• Media Queries needed for smaller desktop sizes ❌

The 3js webgl of ballcanvas had to be replaced because there were too many canvas and it was not supporting phone devices. - Added useEffect, u will see icosahedronGeometry sphere balls in devices width 768px and above, and normal circular divs in smaller devices.

No resolve found for WebGL Canvas limit of 16 at once in browsers. 😔

FIX: Kept the technologies at max 12 so limit is not exceeded.

Vite ⚡

Next Generation Frontend Tooling

• 💡 Instant Server Start
• ⚡️ Lightning Fast HMR
• 🛠️ Rich Features
• 📦 Optimized Build
• 🔩 Universal Plugin Interface
• 🔑 Fully Typed APIs

Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts:

• A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

Read the Docs to Learn More.

Packages

Package	Version (click for changelogs)
vite
@vitejs/plugin-vue
@vitejs/plugin-vue-jsx
@vitejs/plugin-react
@vitejs/plugin-legacy
create-vite