Muhammad Tahir Kleem - Portfolio

A modern, animated portfolio website showcasing expertise in Machine Learning, AI, and Full Stack Development. Built with Next.js 15, React 19, TypeScript, and Framer Motion.

🌟 Features

Modern UI/UX: Sleek, responsive design with smooth animations and transitions
Dark Mode: Theme customization with multiple color schemes (Ocean, Forest, Sunset, Purple Haze, Cyberpunk)
Interactive Components:
- Animated hero section with typing effects
- Parallax scrolling backgrounds
- Floating shapes and gradient effects
- Smooth scroll navigation
Comprehensive Sections:
- Hero with social links (GitHub, LinkedIn)
- About with achievement statistics
- Skills with filterable categories (ML/AI, Frontend, Backend, DevOps)
- Projects showcase with live demos
- Contact form with validation
Performance Optimized: Static export ready for GitHub Pages deployment
SEO Friendly: Proper metadata and semantic HTML

🛠️ Tech Stack

Frontend Framework

Next.js 15.2.4 - React framework with App Router
React 19 - Latest React with server components
TypeScript 5 - Type-safe development

Styling & UI

TailwindCSS 3.4 - Utility-first CSS framework
Framer Motion - Advanced animations and transitions
Radix UI - Accessible component primitives
Shadcn/ui - Beautifully designed components
Lucide React - Modern icon library

Animation & Effects

React Type Animation - Typing animation effects
React Intersection Observer - Scroll-based animations
Custom Parallax Effects - Depth and motion

Form & Validation

React Hook Form - Performant form handling
Zod - TypeScript-first schema validation

Additional Libraries

next-themes - Theme management
Sonner - Toast notifications
clsx & tailwind-merge - Conditional styling

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher)
pnpm (v8 or higher) - Fast, disk space efficient package manager

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/yourusername/Portfolio.git
cd Portfolio

2. Install Dependencies

pnpm install

3. Run Development Server

pnpm dev

Open http://localhost:3000 in your browser to see the result.

4. Build for Production

pnpm build

This generates a static export in the out directory.

5. Start Production Server

pnpm start

📁 Project Structure

Portfolio/
├── public/                    # Static assets
│   ├── images/               # Project and profile images
│   │   ├── profile/          # Profile pictures
│   │   └── projects/         # Project screenshots
│   └── *.svg                 # SVG icons
├── src/
│   ├── app/                  # Next.js App Router
│   │   ├── layout.tsx        # Root layout with providers
│   │   ├── page.tsx          # Home page
│   │   └── globals.css       # Global styles
│   ├── components/           # React components
│   │   ├── hero.tsx          # Hero section with animations
│   │   ├── about.tsx         # About section with stats
│   │   ├── skills.tsx        # Skills with filtering
│   │   ├── projects.tsx      # Project showcase
│   │   ├── contact.tsx       # Contact form
│   │   ├── navbar.tsx        # Navigation bar
│   │   ├── footer.tsx        # Footer section
│   │   ├── theme-provider.tsx
│   │   ├── theme-customizer.tsx
│   │   ├── smooth-scroll.tsx
│   │   ├── parallax-*.tsx    # Parallax components
│   │   └── ui/               # Shadcn/ui components (40+)
│   ├── hooks/                # Custom React hooks
│   │   ├── use-mobile.tsx
│   │   └── use-toast.ts
│   ├── lib/                  # Utilities
│   │   └── utils.ts          # Helper functions
│   └── styles/
│       └── globals.css       # Additional global styles
├── components.json           # Shadcn/ui configuration
├── tailwind.config.ts        # TailwindCSS configuration
├── tsconfig.json             # TypeScript configuration
├── next.config.ts            # Next.js configuration
├── postcss.config.mjs        # PostCSS configuration
├── eslint.config.mjs         # ESLint configuration
├── package.json              # Dependencies and scripts
└── README.md                 # Project documentation

🎨 Theme Customization

The portfolio includes multiple built-in themes:

Ocean (Default) - Blue and cyan tones
Forest - Green and emerald tones
Sunset - Orange and red tones
Purple Haze - Purple and violet tones
Cyberpunk - Neon pink and cyan tones

Themes can be changed via the theme customizer button in the UI.

📦 Key Components

Hero Section

Animated gradient background
Typing animation effect
Social media links
Download CV button
Mouse-follow spotlight effect

About Section

Achievement statistics
Service cards with hover effects
Parallax background elements
Smooth reveal animations

Skills Section

60+ technical skills
Category filtering (ML/AI, Frontend, Backend, DevOps)
Progress bars with animations
Organized by expertise level

Projects Section

Featured project showcases
Category filtering
Live demo and GitHub links
Hover effects and transitions

Contact Section

Form validation with React Hook Form
Contact information cards
Success/error notifications
Email integration ready

🚢 Deployment

Deploy to GitHub Pages

Update basePath in next.config.ts to match your repository name
Run the build and deploy command:

pnpm run deploy

This will:

Build the Next.js app
Export static files
Deploy to GitHub Pages using gh-pages

Deploy to Vercel

Simply push your code to GitHub and import the repository in Vercel.

Deploy to Netlify

Push your code to GitHub
Connect your repository to Netlify
Set build command: pnpm build
Set publish directory: out

🔧 Configuration

Update Personal Information

Profile Image: Replace public/images/profile/muhammad1.png
Project Images: Add to public/images/projects/
Personal Details: Update in respective component files:
- src/components/hero.tsx - Name, titles
- src/components/about.tsx - Bio, stats
- src/components/skills.tsx - Skills list
- src/components/projects.tsx - Projects data
- src/components/contact.tsx - Contact info

Update Metadata

Edit src/app/page.tsx and src/app/layout.tsx for SEO metadata.

📱 Responsive Design

The portfolio is fully responsive and optimized for:

📱 Mobile devices (320px+)
📱 Tablets (768px+)
💻 Desktops (1024px+)
🖥️ Large screens (1440px+)

🎯 Performance

⚡ Lighthouse Score: 95+
🚀 Static site generation for fast loading
📦 Optimized bundle size
🎨 CSS-in-JS with zero runtime overhead
🖼️ Image optimization

🐛 Known Issues

None currently. Report issues on GitHub.

📝 Scripts

{
  "dev": "next dev",              // Start development server
  "build": "next build && next export",  // Build and export static site
  "start": "next start",          // Start production server
  "lint": "next lint",            // Run ESLint
  "deploy": "npm run build && gh-pages -d out"  // Deploy to GitHub Pages
}

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Fork the project
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is free to use for personal purposes. For commercial use, please contact the author.

👤 Author

Muhammad Tahir Kleem

🌐 Portfolio: [Your Portfolio URL]
💼 LinkedIn: [Your LinkedIn Profile]
🐙 GitHub: @yourusername
📧 Email: tahirkleem250@gmail.com
📱 Phone: +92 3181326250
📍 Location: Toba Tek Singh, Pakistan

🙏 Acknowledgments

Next.js - The React Framework
Vercel - Deployment platform
Shadcn/ui - Component library
Framer Motion - Animation library
TailwindCSS - CSS framework
Radix UI - Accessible components
Lucide - Icon library

📊 Skills Highlighted

Machine Learning & AI

Prompt Engineering, RAG, LangChain, LlamaIndex, LangGraph
Multi-Agent Systems (Autogen, CrewAI, OpenAI Agents)
NLP (Sentiment Analysis, NER), Computer Vision (YOLOv8)
XGBoost, Random Forest, SVM, KNN
Transformers, Hugging Face, PEFT/LoRA

Full Stack Development

Frontend: React, Next.js, TypeScript, JavaScript
Backend: Python, Django, FastAPI
Databases: PostgreSQL, MySQL, MongoDB, Neo4j
Vector DBs: Qdrant, Pinecone

DevOps & Tools

Git, GitHub Actions, Docker, Linux
AWS, Jupyter, VS Code, Postman
Automation: Zapier, Make.com, n8n

🎓 Featured Projects

Taxline AI - Invoice Automation Suite with GPT-4o
ResuForge - MCP-Powered Resume Builder
Cold Email Generation Tool - AI-driven sales automation
Formulai - DNA-Based Wellness Platform
MCQ-Based Exam Prep System - AI-powered adaptive learning
ShopAI - E-Commerce with AI Recommendations

⭐ Star this repository if you found it helpful!

Made with ❤️ and ☕ by Muhammad Tahir Kleem

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
.idea		.idea
public		public
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
netlify.toml		netlify.toml
next-env.d.ts		next-env.d.ts
next.config.mjs		next.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Muhammad Tahir Kleem - Portfolio

🌟 Features

🛠️ Tech Stack

Frontend Framework

Styling & UI

Animation & Effects

Form & Validation

Additional Libraries

📋 Prerequisites

🚀 Getting Started

1. Clone the Repository

2. Install Dependencies

3. Run Development Server

4. Build for Production

5. Start Production Server

📁 Project Structure

🎨 Theme Customization

📦 Key Components

Hero Section

About Section

Skills Section

Projects Section

Contact Section

🚢 Deployment

Deploy to GitHub Pages

Deploy to Vercel

Deploy to Netlify

🔧 Configuration

Update Personal Information

Update Metadata

📱 Responsive Design

🎯 Performance

🐛 Known Issues

📝 Scripts

🤝 Contributing

📄 License

👤 Author

🙏 Acknowledgments

📊 Skills Highlighted

Machine Learning & AI

Full Stack Development

DevOps & Tools

🎓 Featured Projects

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages