🚀 Muhammad Ramazan - Portfolio

A stunning, modern portfolio website built with cutting-edge technologies and beautiful animations inspired by Aceternity UI design principles.

✨ Features

🎨 Stunning Visual Design

• Dark & Light Theme: Modern dark & light themes with beautiful gradients
• Animated Background: Floating particles and gradient effects
• Glass Morphism: Beautiful glass effects and backdrop blur
• Gradient Text: Eye-catching gradient text effects
• Custom Scrollbar: Styled scrollbar with gradient colors

🎬 Smooth Animations

• Framer Motion: Sophisticated animations powered by Framer Motion
• Scroll-triggered Animations: Elements animate as they come into view
• Hover Effects: Interactive hover animations throughout
• Loading Animations: Beautiful loading and transition effects
• Typing Effects: Dynamic typing animations

📱 Responsive Design

• Mobile-First: Fully responsive across all devices
• Touch-Friendly: Optimized for touch interactions
• Fast Loading: Optimized performance and fast loading times
• SEO Optimized: Proper meta tags and structured data

🧩 Sections

1. Hero Section: Stunning animated introduction with floating particles
2. About Me: Personal information with animated profile card
3. Projects: Interactive project showcase with hover effects
4. Skills: Animated skill bars with technology categories
5. Experience: Professional timeline with achievements
6. Contact: Call-to-action section with contact information

🛠️ Tech Stack

Frontend Framework

• Next.js 15.3 - React framework with App Router
• TypeScript - Type-safe development
• React 18 - Latest React features

Styling & Animation

• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Advanced animations library
• CSS Custom Properties - Dynamic theming
• Custom CSS Animations - Hand-crafted effects

Icons & Assets

• Iconifyt - Beautiful, customizable icons
• Google Fonts (Space Grotesk) - Modern typography

Development Tools

• ESLint - Code linting and formatting
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixing

🚀 Getting Started

Prerequisites

• Node.js 18.0 or later
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/lightify97/portfolio.git
   cd portfolio

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:3000

Build for Production

npm run build
npm start

🎨 Customization

Personal Information

Update the following in src/app/page.tsx:

• Name and title in the navigation and hero section
• Contact information (email, phone, location)
• Social media links (GitHub, LinkedIn, etc.)
• About me description and background

Projects

Modify the projects array in src/components/portfolio/ProjectsSection.tsx:

{
  title: "Your Project Title",
  description: "Project description...",
  image: "🎯", // Emoji or image URL
  tech: ["React", "Node.js", "MongoDB"],
  github: "https://github.com/username/repo",
  live: "https://yourproject.com",
  color: "from-blue-500 to-purple-500"
}

Skills

Update skills in the skills section of src/components/portfolio/TechStackSection.tsx:

{
  category: "Frontend",
  skills: ["React", "Next.js", "TypeScript", "Tailwind CSS"]
}

Experience

Modify the experience array in src/components/portfolio/ExperienceSection.tsx:

{
  role: "Your Role",
  company: "Company Name",
  period: "2023 - Present",
  description: "Role description...",
  achievements: ["Achievement 1", "Achievement 2"]
}

Styling

• Colors: Update color schemes in tailwind.config.js
• Animations: Customize animations in src/app/globals.css
• Components: Modify components in the src/components/ directory

📂 Project Structure

portfolio/
├── src/
│   ├── app/
│   │   ├── globals.css         # Global styles and animations
│   │   ├── layout.tsx          # Root layout with metadata
│   │   ├── page.tsx            # Main portfolio page
│   │   ├── favicon.ico         # Site favicon
│   │   └── favicon.png         # PNG favicon
│   ├── components/
│   │   ├── portfolio/          # Portfolio-specific components
│   │   │   ├── AboutSection.tsx
│   │   │   ├── Background.tsx
│   │   │   ├── CertificationsSection.tsx
│   │   │   ├── ContactSection.tsx
│   │   │   ├── ExperienceSection.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── HeroSection.tsx
│   │   │   ├── Navigation.tsx
│   │   │   ├── OverviewSection.tsx
│   │   │   ├── ProjectsSection.tsx
│   │   │   ├── SectionHeader.tsx
│   │   │   ├── TechStackSection.tsx
│   │   │   ├── TestimonialsSection.tsx
│   │   │   ├── TypewriterRole.tsx
│   │   │   └── index.ts        # Component exports
│   │   ├── AnimatedBackground.tsx
│   │   ├── PostHogProvider.tsx # Analytics provider
│   │   ├── SocketioIcon.tsx
│   │   ├── ThemeProvider.tsx   # Theme context provider
│   │   └── ThemeToggle.tsx     # Dark/light theme toggle
├── lib/
│   ├── posthog.ts             # PostHog analytics configuration
│   └── utils.ts               # Utility functions
├── public/
│   ├── certificates/          # Certificate images
│   ├── CV.pdf                # Resume/CV file
│   ├── globe.svg             # SVG icons
│   ├── next.svg
│   ├── vercel.svg
│   ├── window.svg
│   └── file.svg
├── .env                      # Environment variables
├── .gitignore               # Git ignore rules
├── eslint.config.mjs        # ESLint configuration
├── next.config.ts           # Next.js configuration
├── next-env.d.ts           # Next.js TypeScript declarations
├── package.json            # Dependencies and scripts
├── package-lock.json       # Locked dependency versions
├── postcss.config.mjs      # PostCSS configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── tsconfig.json          # TypeScript configuration
└── README.md              # This file

=

📱 Browser Support

• ✅ Chrome (Latest)
• ✅ Firefox (Latest)
• ✅ Safari (Latest)
• ✅ Edge (Latest)
• ✅ Mobile browsers

🔧 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

📄 License

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

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

👨‍💻 Author

Muhammad Ramazan

• Portfolio: https://mramazan.dev
• GitHub: @lightify97
• LinkedIn: LinkedIn
• Email: [email protected]

🙏 Acknowledgments

• Framer Motion - Amazing animation library
• Tailwind CSS - Utility-first CSS framework
• Next.js Team - Excellent React framework
• Iconify - Beautiful icon library

---

Made with ❤️ and cutting-edge web technologies

This portfolio demonstrates modern web development practices and showcases the beauty of well-crafted user interfaces.