A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS, showcasing the work and skills of Abdul Baqi Qureshi, a software engineer from Karachi, Pakistan.
- Modern Design: Clean, professional design with smooth animations using Framer Motion
- Responsive: Fully responsive layout that works on all devices
- Dark/Light Theme: Toggle between dark and light themes
- SEO Optimized: Meta tags and Open Graph support for better search engine visibility
- Contact Form: Functional contact form with API integration
- Dynamic Content: Projects and personal data loaded from JSON files
- TypeScript: Fully typed for better development experience
- Performance: Optimized with Next.js for fast loading times
- Frontend: Next.js 14, React, TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Deployment: Vercel
portfolio/
├── src/
│ ├── app/
│ │ ├── api/contact/ # Contact form API route
│ │ ├── about/ # About page
│ │ ├── awards/ # Awards & Certifications page
│ │ ├── contact/ # Contact page
│ │ ├── education/ # Education page
│ │ ├── experience/ # Experience page
│ │ ├── projects/ # Projects page
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Home page
│ ├── components/
│ │ ├── Navigation.tsx # Navigation component
│ │ └── Footer.tsx # Footer component
│ └── data/
│ ├── personalData.json # Personal information
│ └── projects.json # Projects data
├── public/ # Static assets
└── README.md
- Node.js 18.x or later
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/abdulbaqi02/portfolio.git
cd portfolio- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser.
Edit src/data/personalData.json to update:
- Personal details (name, title, location, bio)
- Skills and technologies
- Experience, education, and certifications
- Social media links
Edit src/data/projects.json to add or modify projects:
- Project title, description, and technologies
- GitHub and demo links
- Project images
The project uses Tailwind CSS for styling. Main styles are in src/app/globals.css. Colors and themes can be customized in the Tailwind configuration.
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run lint:fix- Fix ESLint errors
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically on every push
- Build the project:
npm run build- Start the production server:
npm run startThe contact form uses a Next.js API route (/api/contact). In production, you should integrate it with an email service like:
- SendGrid: For transactional emails
- Mailgun: Reliable email delivery
- EmailJS: Client-side email sending
- Nodemailer: Custom SMTP integration
To integrate with SendGrid, for example:
- Install SendGrid SDK:
npm install @sendgrid/mail- Update the API route with your SendGrid API key and email configuration.
The design features:
- Modern gradient backgrounds
- Smooth animations and transitions
- Professional typography with Geist font
- Consistent spacing and color scheme
- Mobile-first responsive design
- Home: Hero section with introduction and skills overview
- About: Detailed personal information and technical skills
- Projects: Showcase of completed projects with links
- Experience: Professional experience and open-source contributions
- Education: Academic background and coursework
- Awards: Certifications and professional achievements
- Contact: Contact form and information
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is open source and available under the MIT License.
- Next.js for the amazing React framework
- Tailwind CSS for utility-first CSS
- Framer Motion for smooth animations
- Lucide for beautiful icons
Built with ❤️ by Abdul Baqi Qureshi