3D-interactive-portfolio

🚀 My Portfolio Website

Welcome to the repository for my personal portfolio website! 🎉 This project is a culmination of creativity, technology, and my dedication to showcasing my skills, projects, and personality in a visually stunning and interactive manner.

Live preview: https://www.abhijitzende.com/

https://github.com/Abhiz2411/3D-interactive-portfolio/blob/main/preview_video.mp4

This project is inspired by the amazing work of Naresh Khatri. His innovative approach to web design and attention to detail has been a huge influence. Thank you, Naresh! 🙏

🔥 Features

Here are the key highlights of my portfolio:

🎹 3D Interactive Animations

• Features a custom-made interactive keyboard built with Spline.
• Each keycap represents a skill and reveals titles and descriptions on hover for an immersive experience.
• Smooth, responsive 3D interactions that captivate visitors.

✨ Slick Interactions & Animations

• Powered by GSAP and Framer Motion, delivering buttery-smooth animations on scroll, hover, and element reveals.
• Creative motion designs that enhance storytelling and keep users engaged.

🌌 Space-Themed Design

• Particles floating on a dark, cosmic background simulate an outer-space vibe.
• Adds a unique and futuristic look to the portfolio.

📱 Responsive Design

• Fully responsive layout ensures the website looks and functions beautifully on all devices.
• Optimized for both desktop and mobile experiences.

🧠 Innovative Web Design

• Combines cutting-edge technology with an intuitive user experience.
• Creative use of animations and visuals to push the boundaries of modern web design.

🛠️ Tech Stack

The portfolio website is built using the following tools and technologies:

• Frontend: Next.js, React, Tailwind CSS, Shadcn, Aceternity UI
• Animations: GSAP, Framer Motion, Spline Runtime
• Other Tools: Resend, Socket.io, Zod

🌟 Getting Started

1. Clone this repository:

   git clone https://github.com/Abhiz2411/3D-interactive-portfolio.git
   

2. Navigate to the project directory:

   cd 3D-interactive-portfolio
   

3. Install dependencies:

   npm install
   

4. Set up environment variables:

   # Create a .env.local file in the root directory
   touch .env.local
   
   # Add your Resend API key
   RESEND_API_KEY=your_resend_api_key_here
   

5. Start the development server:

   npm run dev
   

6. Open your browser and navigate to:

   http://localhost:3000
   

🚀 Deployment

This project is deployed using Vercel for its blazing-fast performance and ease of use. You can view the live site here.

Setting up Resend API on Vercel

1. Sign up for a Resend account and get your API key
2. Go to your Vercel project settings
3. Navigate to the “Environment Variables” section
4. Add a new environment variable:
   • Name: RESEND_API_KEY
   • Value: Your Resend API key
5. Save the changes and redeploy your application

Note: Make sure to keep your API key secret and never commit it to your repository.

💖 Acknowledgments

A huge shoutout to Naresh Khatri for the inspiration and ideas that sparked this journey! 💡 If you’re interested in creative web design, definitely check out his work.

📬 Contact

Feel free to reach out to me for collaboration, feedback, or just to say hi! 😊

• Email: [email protected]
• LinkedIn: Your LinkedIn Profile

⭐ If you like this project, don’t forget to give it a star!