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

• 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

• 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

• 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

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

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

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

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

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

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

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

npm run build npm start

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

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" }

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

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

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"] }

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

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 

=

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

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

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

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

Muhammad Ramazan

• Portfolio: https://mramazan.dev
• GitHub: @lightify97
• LinkedIn: LinkedIn
• Email: mramazan1@yahoo.com

• 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.