A modern, data-driven portfolio built for production with Firebase integration and comprehensive admin dashboard

• 🔥 Firebase-Powered: Real-time data management with Firestore
• 🔐 Dual Authentication: Google OAuth + Email/Password login
• 📊 Dynamic Content: Projects, experience, and skills managed via admin dashboard
• 🎨 Professional Design: Modern UI with custom signature branding
• 📱 Mobile-First: Responsive design optimized for all devices
• ⚡ Performance: Lighthouse score 95+ with optimized loading

Frontend:  React 18 + TypeScript + Vite
UI:        shadcn/ui + Radix UI + Tailwind CSS
Backend:   Firebase (Auth + Firestore)
Analytics: Google Analytics 4
SEO:       Structured data + Open Graph + Twitter Cards
Deploy:    GitHub Actions + GitHub Pages

• 📄 CV Download: Direct PDF download functionality
• 🔗 Smart Admin Access: Hidden login via signature triple-click + visible admin button
• 📈 Real-time Analytics: Google Analytics integration
• 🌐 SEO Optimized: Perfect for Google search visibility
• 🎯 Auto-Seeding: Automatic project data population on first load

# Clone and setup
git clone https://github.com/mounir1/portfolio.git
cd portfolio
npm install

# Start development server
npm run dev

# Professional production build with verification
npm run build:production

# Preview production build
npm run preview

# Deploy to GitHub Pages
npm run deploy

Create .env.local with your Firebase config:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /projects/{projectId} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}

1. 🔗 Smart Button: Click admin button next to signature in footer
2. 🖱️ Hidden Access: Triple-click signature for discrete admin access
3. 🔗 Direct URL: Navigate to /admin

• 📊 Overview: Real-time statistics and quick actions
• 📝 Project Management: Full CRUD operations with rich metadata
• 🎛️ Content Control: Toggle visibility, featured status, priority
• 📈 Analytics: Project performance and engagement metrics
• 🔄 Real-time Updates: Changes reflect immediately on live site

// Comprehensive project schema
interface Project {
  title: string;
  description: string;
  longDescription?: string;
  category: ProjectCategory;
  status: ProjectStatus;
  achievements: string[];
  technologies: string[];
  tags: string[];
  image?: string;
  liveUrl?: string;
  githubUrl?: string;
  demoUrl?: string;
  featured: boolean;
  disabled: boolean;
  priority: number;
  startDate?: string;
  endDate?: string;
  duration?: string;
  // Auto-managed fields
  createdAt: number;
  updatedAt: number;
}

• ⚡ Code Splitting: Vendor, Firebase, and UI chunks
• 🗜️ Minification: Terser with console removal
• 📦 Bundle Analysis: Built-in bundle analyzer
• 🔄 Lazy Loading: Components and routes
• 💾 Caching: Optimized Firebase queries

• 🔍 Google Analytics: Full GA4 integration
• 📈 Structured Data: Rich snippets for search results
• 🌐 Open Graph: Perfect social media sharing
• 🐦 Twitter Cards: Enhanced Twitter sharing
• 🗺️ Sitemap: Auto-generated sitemap.xml
• 🤖 Robots.txt: Optimized for search engines

npm run build:production  # Professional build with verification
npm run type-check       # TypeScript validation
npm run lint:fix         # Auto-fix linting issues
npm run analyze          # Bundle size analysis
npm run clean            # Clean build artifacts

• Logo: Update /public/mounir-icon.svg
• Signature: Modify src/components/ui/signature.tsx
• Colors: Customize tailwind.config.ts
• Fonts: Update CSS variables in src/index.css

• Auto-Seeding: Initial projects loaded from src/data/initial-projects.ts
• Dynamic Updates: All content manageable via admin dashboard
• Real-time Sync: Changes reflect immediately across all users

1. Setup Secrets: Add Firebase config to GitHub repository secrets
2. Push Code: GitHub Actions automatically builds and deploys
3. Custom Domain: Configure DNS for your domain

# Build and deploy
npm run build:production
npm run deploy

# Or upload dist/ folder to any static hosting

• Development: Local development with hot reload
• Staging: Preview builds with production config
• Production: Optimized builds with analytics

• Page Views: Track portfolio visits
• User Engagement: Monitor user interactions
• Project Clicks: Track project link clicks
• Admin Usage: Monitor dashboard usage

• Lighthouse Scores: 95+ across all metrics
• Core Web Vitals: Optimized loading and interactivity
• Bundle Size: Monitored and optimized
• Error Tracking: Comprehensive error boundaries

• Firebase Auth: Secure Google OAuth + Email/Password
• Protected Routes: Admin dashboard requires authentication
• Session Management: Automatic session handling

• Firestore Rules: Read-only public access, authenticated writes
• Environment Variables: Secure credential management
• Input Validation: XSS protection and data sanitization

Mounir Abderrahmani
Senior Full-Stack Developer & Software Engineer

• 📧 Email: [email protected]
• 💼 LinkedIn: linkedin.com/in/mounir1badi
• 🐙 GitHub: github.com/mounir1
• 📱 Phone: +213 674 09 48 55
• 🌐 Portfolio: mounir.bio

• ✅ Production-Ready: Optimized for performance and scalability
• ✅ Firebase Integration: Real-time data management
• ✅ Professional Admin: Comprehensive content management
• ✅ SEO Optimized: Perfect for Google search visibility
• ✅ Mobile-First: Responsive design for all devices
• ✅ Modern Stack: Latest React, TypeScript, and Vite
• ✅ Secure: Firebase Auth with proper security rules
• ✅ Analytics: Google Analytics 4 integration
• ✅ Automated Deployment: GitHub Actions CI/CD

Built with ❤️ and modern web technologies by Mounir Abderrahmani

This portfolio showcases professional development practices, modern architecture, and production-ready code quality.