Aziz Khan's Personal CMS Portfolio

Project Overview

Aziz Khan's Personal CMS Portfolio

A modern, galaxy-themed portfolio website built with Next.js 15.3.3, featuring 3D models, interactive animations, data visualizations, and a comprehensive content management system.
🌟 Features

Galaxy-themed Design: Dark background with blue/purple accents and neon glow effects
Interactive 3D Models: Three.js integration with rotating 3D models using React Three Fiber
Particle Background: Animated starfield with interactive particles
D3.js Data Visualization: Interactive bar chart race showing global brands evolution from 2000-2025
Responsive Design: Fully mobile-friendly using Tailwind CSS
Modern Typography: Poppins for headings, Inter for body text
Smooth Animations: AOS (Animate On Scroll) integration for scroll-triggered animations
Contact Form: Functional contact form with validation
Blog Section: Latest posts with newsletter signup
Portfolio Showcase: Filterable project gallery

🚀 Tech Stack

Framework: Next.js 15.3.3 with App Router
Styling: Tailwind CSS 3.4.0
3D Graphics: Three.js 0.177.0 with React Three Fiber 9.1.2 and Drei 10.1.2
Data Visualization: D3.js 7.9.0
Particles: tsparticles 3.8.1
Animations: AOS 2.3.4 (Animate On Scroll)
Typography: Google Fonts (Poppins, Inter)
Language: TypeScript 5

📁 Project Structure

src/
├── app/
│ ├── globals.css # Global styles and theme
│ ├── layout.tsx # Root layout with fonts and AOS provider
│ └── page.tsx # Main page component
├── components/
│ ├── AOSProvider.tsx # Animation provider
│ ├── Navbar.tsx # Sticky navigation
│ ├── Hero.tsx # Hero section with 3D model
│ ├── WhatWeOffer.tsx # Services overview
│ ├── Services.tsx # Detailed services
│ ├── Portfolio.tsx # Project showcase
│ ├── D3BarChart.tsx # Interactive data visualization
│ ├── Blog.tsx # Blog posts section
│ ├── CTA.tsx # Call to action
│ ├── Contact.tsx # Contact form
│ ├── Footer.tsx # Site footer
│ └── ParticleBackground.tsx # Animated background
└── types/
└── aos.d.ts # Type declarations

🎨 Design System
Colors

Background: #0a0a1a (Dark galaxy)
Primary: #6366f1 (Indigo)
Secondary: #8b5cf6 (Purple)
Accent: #06b6d4 (Cyan)

Typography

Headings: Poppins (Bold, Modern)
Body: Inter (Clean, Readable)