hassanqureshi.github.io

Modern Developer Portfolio

A beautiful, responsive, and feature-rich portfolio website built with Next.js, Tailwind CSS, and Framer Motion. Inspired by modern portfolio designs with smooth animations and an excellent user experience.

🚀 Features

• Responsive Design: Fully responsive layout that works on all devices
• Dark/Light Theme: Toggle between dark and light modes with smooth transitions
• Smooth Animations: Beautiful animations powered by Framer Motion
• Interactive Navbar: Active link highlighting and smooth scroll navigation
• Hero Section: Eye-catching hero with animated text and background effects
• About Section: Personal introduction with animated cards
• Skills Section: Animated progress bars and tech stack showcase
• Projects Section: Interactive project cards with hover effects
• Contact Form: Fully functional contact form with validation
• SEO Optimized: Meta tags, Open Graph tags for social sharing
• TypeScript: Full type safety throughout the application
• Modern Tech Stack: Built with the latest web technologies

🛠️ Technologies Used

• Next.js 16 - React framework for production
• React 19 - JavaScript library for building user interfaces
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library for React
• React Hook Form - Form validation library
• React Icons - Popular icon library

📦 Installation

1. Clone the repository or navigate to the project directory: ```bash cd Portfolio ```

2. Install dependencies: ```bash npm install ```

3. Run the development server: ```bash npm run dev ```

4. Open http://localhost:3000 in your browser

🏗️ Build for Production

To create an optimized production build:

```bash npm run build npm start ```

📁 Project Structure

``` Portfolio/ ├── src/ │ ├── app/ │ │ ├── layout.tsx # Root layout with metadata │ │ ├── page.tsx # Main page │ │ └── globals.css # Global styles │ ├── components/ │ │ ├── Navbar.tsx # Navigation component │ │ ├── Hero.tsx # Hero section │ │ ├── About.tsx # About section │ │ ├── Skills.tsx # Skills section │ │ ├── Projects.tsx # Projects section │ │ ├── Contact.tsx # Contact form │ │ └── Footer.tsx # Footer component │ └── context/ │ └── ThemeContext.tsx # Dark/Light theme provider ├── public/ # Static assets ├── tailwind.config.js # Tailwind CSS configuration ├── tsconfig.json # TypeScript configuration └── package.json # Dependencies and scripts ```

🎨 Customization

Update Personal Information

1. Hero Section (src/components/Hero.tsx):
   • Update your name, title, and description
   • Modify social media links
2. About Section (src/components/About.tsx):
   • Update your bio and experience
   • Customize the feature cards
3. Skills Section (src/components/Skills.tsx):
   • Add/remove skills and proficiency levels
   • Update technology icons
4. Projects Section (src/components/Projects.tsx):
   • Add your own projects with descriptions
   • Update project links and technologies
5. Contact Section (src/components/Contact.tsx):
   • Update contact information
   • Configure form submission endpoint
6. Metadata (src/app/layout.tsx):
   • Update SEO tags, Open Graph data
   • Add your own site URL and preview image

Theme Customization

Modify the color scheme in tailwind.config.js: ```javascript colors: { primary: { // Your custom colors }, } ```

🌐 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the project to Vercel
3. Deploy with one click

Other Platforms

• Netlify: Connect your repository and deploy
• AWS Amplify: Use the Amplify Console
• DigitalOcean: Use App Platform

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📧 Contact

Feel free to reach out if you have any questions or suggestions!

---

Made with ❤️ using Next.js and Tailwind CSS