AI-Powered Full Stack Developer Portfolio

A modern, responsive 3D portfolio website showcasing expertise in AI-powered development, MERN stack, and cybersecurity.

🚀 Features

• AI-Powered Development: Showcases 9-10 months of experience with Cursor and Zencoder AI tools
• MERN Stack Expertise: 1.5+ years of full-stack web development experience
• Cyber Security Specialization: CEH, CEF, and UPIFS Cyber Forensic certifications
• Modern 3D Animations: Three.js powered background with particle effects
• Responsive Design: Optimized for all devices and screen sizes
• Interactive Elements: Enhanced hover effects, animations, and user interactions
• Performance Optimized: Fast loading with modern web technologies

🛠️ Technologies Used

Frontend

• HTML5, CSS3, JavaScript (ES6+)
• Three.js for 3D graphics
• GSAP for animations
• Font Awesome for icons

Backend

• Node.js with Express
• Nodemailer for contact form
• CORS for cross-origin requests

AI Development Tools

• Cursor AI
• Zencoder
• OpenAI API integration

Deployment

• Vercel for hosting
• Git for version control

📋 Prerequisites

• Node.js (v14 or higher)
• Git
• Modern web browser

🚀 Getting Started

Local Development

1. Clone the repository

   git clone <your-repo-url>
   cd 3d-portfolio-html

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Production Build

1. Build for production

   npm start

🌐 Deployment

Deploy to Vercel

1. Install Vercel CLI

   npm i -g vercel

2. Deploy

   vercel

3. Follow the prompts to configure your deployment

Alternative Deployment Methods

• Netlify: Drag and drop the project folder
• GitHub Pages: Push to GitHub and enable Pages
• Any static hosting: Upload the files to your hosting provider

📁 Project Structure

3d-portfolio-html/
├── css/
│   └── style.css          # Main stylesheet with animations
├── js/
│   └── main.js            # JavaScript functionality
├── img/                   # Images and assets
├── index.html             # Main HTML file
├── server.js              # Express server
├── package.json           # Dependencies
├── vercel.json            # Vercel configuration
├── .gitignore             # Git ignore rules
└── README.md              # This file

🎨 Customization

Update Personal Information

1. Edit index.html:

   • Update name, email, location
   • Modify social media links
   • Add/remove projects and skills

2. Update css/style.css:

   • Change color scheme in CSS variables
   • Modify animations and effects
   • Adjust responsive breakpoints

3. Update js/main.js:

   • Modify animations and interactions
   • Add new functionality
   • Update contact form handling

Color Scheme

The portfolio uses a neon cyberpunk theme with these main colors:

• Primary: #00ffff (Cyan)
• Secondary: #ff00ff (Magenta)
• Tertiary: #00ff00 (Green)

📱 Responsive Design

The portfolio is fully responsive and optimized for:

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

🔧 Performance Features

• Optimized images and assets
• Minified CSS and JavaScript
• Lazy loading for better performance
• Smooth 60fps animations
• Efficient Three.js rendering

📞 Contact

• Email: chandanabhay458@gmail.com
• Phone: +91 8090912278
• Location: Azamgarh, Uttar Pradesh, India
• Website: www.shotifyai.com

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Three.js for 3D graphics
• GSAP for smooth animations
• Font Awesome for icons
• Unsplash for placeholder images
• YouTube learning resources for MERN stack development

---

Built with ❤️ by Chandan Pandey

AI-Powered Full Stack Developer & Cyber Security Expert