Hammad Khan – Software Engineering Portfolio

A modern, responsive, and production-ready portfolio showcasing my work as a Software Engineering student with a focus on Full-Stack Development, AI, and modern web technologies.

Built with React, Vite, Tailwind CSS, Framer Motion, Three.js, and EmailJS.

---

Live Demo

Portfolio: https://hammaddkportfolio.vercel.app

---

Screenshots

Hero Section

Projects

Skills & Technologies

Contact

---

Features

• Modern responsive UI
• Interactive 3D Hero using Three.js
• Smooth animations with Framer Motion
• Light/Dark theme
• Responsive design for desktop, tablet, and mobile
• AI-inspired Jarvis assistant
• Resume download
• Project showcase with live demos
• Technology stack showcase
• Contact form powered by EmailJS
• Performance optimized
• Lazy loading and code splitting
• Production-ready architecture

---

Tech Stack

Frontend

• React 18
• Vite
• React Router
• Tailwind CSS
• Framer Motion
• Three.js
• React Three Fiber
• Drei

Services

• EmailJS

Development Tools

• ESLint
• Prettier
• Git
• GitHub
• Vercel

---

Performance Optimizations

• Lazy loading for heavy components
• Manual chunk splitting
• Optimized Three.js rendering
• Geometry and material reuse
• Responsive image loading
• Code splitting
• Tree shaking
• Optimized bundle generation
• Smooth 60 FPS animations
• Production build optimization

---

Project Structure

portfolio/
│
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Jarvis/
│   │   ├── Hero.jsx
│   │   ├── Projects.jsx
│   │   ├── Contact.jsx
│   │   └── ...
│   ├── constants/
│   ├── hooks/
│   ├── config/
│   ├── App.jsx
│   └── main.jsx
│
├── package.json
├── vite.config.js
└── README.md

---

Getting Started

Clone the repository

git clone https://github.com/<your-username>/portfolio.git

Navigate into the project

cd portfolio

Install dependencies

npm install

Configure environment variables

Create a .env file in the project root.

VITE_EMAILJS_PUBLIC_KEY=your_public_key
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id

Run development server

npm run dev

Build for production

npm run build

Preview production build

npm run preview

---

Quality Checks

Format code

npm run format

Lint project

npm run lint

Production build

npm run build

---

Deployment

This project is deployed using Vercel.

To deploy:

1. Push the repository to GitHub.
2. Import the repository into Vercel.
3. Configure the required EmailJS environment variables.
4. Deploy.

---

Future Improvements

• Blog integration
• CMS support
• Multi-language support
• Project filtering enhancements
• Additional interactive visualizations
• Analytics dashboard

---

Contact

Hammad Khan

Software Engineering Student

GitHub: https://github.com/hammadk-devv

LinkedIn: https://www.linkedin.com/in/hammad-khan-a8229a352

Portfolio: https://hammaddkportfolio.vercel.app

Email: hammadrx8@gmail.com

---

License

This project is licensed under the MIT License.