Modern Portfolio Template

A modern, responsive, and customizable portfolio template built with Next.js, Tailwind CSS, and TypeScript. This template is designed to help developers showcase their work and skills with a clean, professional design.

🚀 Features

• ⚡ Built with Next.js 14 (App Router)
• 🎨 Styled with Tailwind CSS 4
• 📱 Fully responsive design
• 🌓 Dark/Light mode support
• 📝 Blog-ready with MDX support
• 🔍 SEO optimized
• 📊 Analytics ready
• 🛠 Easy customization

🎨 Theme Preview

Dark theme shown (auto-switches based on system preferences)

🛠 Getting Started

Prerequisites

• Node.js 18.0.0 or later
• npm (v7+) or yarn (v1.22+)
• Git

Quick Start

1. Fork this repository

   • Click the "Fork" button at the top-right of this page

2. Clone your forked repository

   git clone https://github.com/YOUR-USERNAME/portfolio.git
   cd portfolio

3. Install dependencies

   npm install
   # or
   yarn

4. Start the development server

   npm run dev
   # or
   yarn dev

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

6. Start customizing!

   • Update your personal information in the components
   • Add your projects to src/data/projects.ts
   • Customize colors in tailwind.config.js

🎨 Customization

1. Personal Information

Update your personal details in these files:

• src/app/layout.tsx - Site metadata and SEO settings
• src/components/Hero.tsx - Your name, title, and introduction
• src/components/Footer.tsx - Copyright and social links
• package.json - Project metadata and author information

2. Projects

Edit src/data/projects.ts to add your projects:

export const projects = [
  {
    title: 'Project Name',
    description: 'Brief description of your project',
    tags: ['React', 'Next.js', 'TypeScript'],
    imageUrl: '/images/projects/example.jpg',
    githubUrl: 'https://github.com/yourusername/project',
    liveUrl: 'https://project-demo.com',
  },
  // Add more projects...
];

3. Styling

Customize the design in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#2563EB', // Change this to your brand color
          dark: '#1D4ED8',
          light: '#60A5FA',
        },
        // Add more custom colors...
      },
    },
  },
};

4. Dark Mode

This template includes built-in dark mode. Toggle it using the button in the header.

🚀 Deployment

Vercel (Recommended)

1. Click the "Deploy" button above
2. Sign in with your GitHub account
3. Follow the on-screen instructions
4. Your portfolio will be live at https://your-username.vercel.app

GitHub Pages

1. Update next.config.js with your repository name:

   const nextConfig = {
     basePath: process.env.NODE_ENV === 'production' ? '/repository-name' : '',
     assetPrefix: process.env.NODE_ENV === 'production' ? '/repository-name/' : '',
   };

2. Run the build command:

   npm run build

3. Push the code to GitHub

4. Go to Repository Settings > Pages

5. Select gh-pages branch and root folder

6. Click "Save"

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📬 Contact

Have questions or suggestions? Open an issue or reach out to muhammad@mhshahzad.tech.

📄 License

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

---

Built with ❤️ by Muhammad Hamza Shahzad
Using Next.js, Tailwind CSS, and TypeScript

Check out our Next.js deployment documentation for more details.