Portfolio

Muhammad Omer Khan - Portfolio Website

A modern, professional portfolio website built with Next.js, TypeScript, and Tailwind CSS featuring a stunning galaxy theme and smooth animations.

🚀 Features

• Modern Tech Stack: Next.js 15, TypeScript, Tailwind CSS, Framer Motion
• Galaxy Theme: Beautiful space-inspired design with animated stars
• Responsive Design: Optimized for all devices and screen sizes
• Professional Animations: Smooth transitions and interactive elements
• SEO Optimized: Meta tags and Open Graph integration
• Performance First: Fast loading and optimized for core web vitals

🎯 Sections

• Hero: Eye-catching introduction with animated typing effect
• About: Professional background and journey timeline
• Skills: Categorized technical skills with proficiency levels
• Projects: Showcase of GitHub repositories with filtering
• Contact: Interactive contact form and social links

🛠️ Technologies Used

Frontend

• Next.js 15 (App Router)
• TypeScript
• Tailwind CSS
• Framer Motion (animations)
• React Intersection Observer

Styling & Design

• Custom CSS animations
• Gradient effects and glows
• Responsive grid layouts
• Custom scrollbar styling

📋 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/OmerKhan24/portfolio-nextjs.git
   cd portfolio-nextjs
   

2. Install dependencies

   npm install
   

3. Run the development server

   npm run dev
   

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

Build for Production

npm run build
npm start

🚀 Deployment

This project is optimized for deployment on:

• Vercel (Recommended)
• Netlify
• GitHub Pages
• Any static hosting provider

Deploy to Vercel

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with zero configuration

Deploy to Netlify

1. Build the project: npm run build
2. Upload the out folder to Netlify
3. Configure redirects if needed

📱 Features Showcase

Hero Section

• Animated typing effect
• Floating profile image with glow effects
• Social media links with hover animations
• Smooth scroll navigation

Projects Section

• Dynamic filtering by category
• GitHub integration
• Hover effects and transitions
• Responsive card layout

Skills Section

• Organized by technology categories
• Proficiency level indicators
• Interactive hover effects
• Visual skill representations

Contact Section

• Working contact form
• Social media integration
• Availability status
• Professional presentation

🎨 Customization

Colors

Update the color scheme in tailwind.config.ts and globals.css

Content

Modify personal information in the component files:

• Hero.tsx - Personal introduction
• About.tsx - Professional background
• Skills.tsx - Technical skills
• Projects.tsx - Project showcase
• Contact.tsx - Contact information

Animations

Customize animations in globals.css and component files using Framer Motion

📞 Contact Information

• Email: omerkhan2406@gmail.com
• GitHub: @OmerKhan24
• LinkedIn: Omer Khan
• Location: Karachi, Pakistan

🎓 About Me

Computer Science Undergraduate at FAST University, passionate about AI, Data Analytics, and Full-Stack Development. Exploring NLP, BI tools, and intelligent systems.

📝 License

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

---

Built with ❤️ by Muhammad Omer Khan