Portfolio Website Overview

A modern, high-performance portfolio website built with Next.js 16, React 19, and TypeScript, featuring adaptive 3D/2D backgrounds, multilingual support (EN/FR/AR), a dedicated PFE showcase, and real-time GitHub statistics.

🚀 Live Demo

Portfolio: mohamedlakssirt.tech
Repository: GitHub

✨ Key Features

Adaptive 3D/2D Background

Device-aware background system via AdaptiveBackground:

• Three.js Nebula (GrokNebulaBackground) for capable devices
• Canvas2D particles (80–300) as battery-conscious fallback
• Automatic detection based on device capabilities and preferences
• Theme adaptation for light/dark modes
• Performance optimized with reduced motion support

Internationalization (i18n)

Multilingual portfolio powered by next-intl:

• Locales: English (/en), French (/fr), Arabic (/ar)
• Locale-prefixed routes for all main pages
• Centralized portfolio data per locale in src/features/portfolio/data/locales/

PFE Showcase

Dedicated final-year project page at /[locale]/pfe:

• Full sensor platform documentation aligned with MAScIR / UM6P deliverables
• GitHub link, stack breakdown, screenshots, and defense status
• Featured as project #1 on the projects page

GitHub Integration

Real-time statistics and repository showcase:

• Live GitHub stats with contribution graphs
• Repository cards with language breakdown
• Commit activity visualization
• Organization and profile data

Modern UI/UX

Professional design with attention to detail:

• shadcn/ui components for consistent design system
• Tailwind CSS 4 for utility-first styling
• Dark/Light mode with smooth transitions
• Responsive design optimized for all devices
• Accessibility with WCAG 2.1 AA compliance

Featured Projects Section

Dynamic project showcase with:

• Interactive project cards
• Technology stack badges
• GitHub repository links
• Live demo previews
• Performance metrics

Timeline Component

Professional experience timeline:

• Education and work history
• Internship experiences
• Certifications and achievements
• Visual timeline with animations

🛠️ Tech Stack

Core Technologies

UI Components

• shadcn/ui - Component library built on Radix UI
• Lucide Icons - Beautiful, consistent icon set
• Framer Motion - Animation library
• next-themes - Theme management

Backend & Services

• Supabase - Backend-as-a-Service for authentication
• Vercel Analytics - Performance monitoring
• PostHog - Product analytics
• Redis - Caching layer

Development Tools

• Cypress - E2E and component testing
• Jest - Unit testing
• ESLint - Code linting
• Prettier - Code formatting

📊 Performance Metrics

The portfolio is optimized for exceptional performance:

• Lighthouse Score: 95+ across all metrics
• Core Web Vitals: All green
  • FCP (First Contentful Paint): < 1.5s
  • LCP (Largest Contentful Paint): < 2.5s
  • CLS (Cumulative Layout Shift): < 0.1
• Bundle Size: ~100KB gzipped
• SEO Score: 100/100

🎨 Design Highlights

Animated Background System

The signature feature is a custom Canvas2D particle system:

// Particle density calculation
const particleDensity = 0.00025; // particles per square pixel
const numParticles = Math.floor(
  (canvas.width * canvas.height) * particleDensity
);

Features include:

• Deterministic seeding for consistent animations
• Adaptive particle count based on viewport
• Smooth particle movement with velocity vectors
• Dynamic lighting with moving gradients
• Theme-aware color schemes

Component Architecture

Feature-based structure for maintainability:

src/
├── app/              # Next.js App Router
├── features/         # Feature modules
│   ├── about/       # About section
│   ├── github/      # GitHub integration
│   ├── projects/    # Project showcase
│   ├── skills/      # Skills visualization
│   ├── three/       # Canvas background
│   └── timeline/    # Experience timeline
├── shared/          # Shared components
└── core/           # Core utilities

🔧 Configuration

Environment Variables

# GitHub Integration
NEXT_PUBLIC_GITHUB_TOKEN=ghp_xxxxxxxxxxxxx

# Vercel Deployment
VERCEL_TOKEN=xxxxxxxxxxxxx
VERCEL_ORG_ID=team_xxxxxxxxxxxxx
VERCEL_PROJECT_ID=prj_xxxxxxxxxxxxx

# Supabase (Optional)
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxx

Development Commands

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Run all tests
pnpm test

# Run unit tests
pnpm test:unit

# Run E2E tests
pnpm test:e2e

# Lint code
pnpm lint

# Format code
pnpm format

🐳 Docker Support

Docker Wake-Up System

Innovative container management for development:

• Instant Start: Portfolio starts immediately
• Smart Auto-stop: Stops after 30 minutes of inactivity
• Auto Wake-up: Restarts when accessed
• NGINX Proxy: Handles requests during transitions
• Adaptive Monitoring: Adjusts check frequency based on state

# Start the wake-up system
./scripts/start-wake.sh

# Access at http://localhost:3000

🚀 Deployment

Vercel (Production)

Automatic deployments configured:

• Preview: Every PR gets a preview deployment
• Production: Auto-deploy on merge to main
• Analytics: Integrated performance monitoring

CI/CD Pipeline

Automated quality checks:

• ESLint code quality
• TypeScript type checking
• Unit tests with Jest
• E2E tests with Cypress
• Build verification

📱 Features Showcase

Skills Visualization

Interactive skills display with:

• Categorized skill sets (Frontend, Backend, DevOps)
• Proficiency levels
• Technology logos
• Hover effects

Project Cards

Dynamic project showcase:

• Technology badges
• GitHub statistics
• Live demo links
• Repository information

Contact Section

Professional contact information:

• Email integration
• LinkedIn profile
• GitHub profile
• Social media links

🎯 Future Enhancements

Planned improvements:

• Blog section with MDX support
• Case studies for major projects
• Interactive code playground
• Performance dashboard
• Newsletter integration

📚 Learn More

• Architecture Details
• Animated Background
• Setup Guide
• Deployment Guide
• Testing Guide

Built with ❤️ using modern web technologies