Modern portfolio website built with Next.js 14, showcasing cybersecurity projects, skills, and achievements with dynamic routing and static generation.
A comprehensive personal portfolio website designed to showcase my cybersecurity expertise, academic projects, certifications, and professional journey. Built with cutting-edge web technologies for optimal performance and user experience.
• Create a professional online presence highlighting cybersecurity skills • Showcase academic projects with detailed explanations • Display certifications and achievements from platforms like TryHackMe • Provide an interactive and responsive user experience • Optimize for performance and SEO • Deploy on GitHub Pages with automated CI/CD
• Next.js 14 - App Router for modern React architecture • TypeScript - Type safety and better developer experience • Tailwind CSS - Utility-first, responsive design • Framer Motion - Smooth, engaging user interactions • Lucide React - Consistent, modern iconography • GitHub Actions - Automated CI/CD workflow • EmailJS - Contact form functionality without backend
• Dynamic Project Pages - Each project has detailed page with full descriptions • Bilingual CV Support - Toggle between French and English resume versions • TryHackMe Integration - Display real-time stats and achievements • CTF Writeups Section - Showcase penetration testing writeups • Skills Visualization - Interactive display of technical skills • Certifications Gallery - Professional certifications with verification links • Responsive Design - Fully responsive across all devices • Dark Theme - Cybersecurity-themed dark color scheme • Contact Form - Functional email integration • SEO Optimized - Proper meta tags and static generation
The website uses Next.js 14's App Router with static site generation (SSG) for optimal performance. All pages are pre-rendered at build time and served as static HTML, ensuring fast load times and excellent SEO.
Project Structure: • Component-based architecture with reusable modules • Dynamic routing for individual project pages • Centralized data management in TypeScript files • Lazy loading for better performance • Markdown support for rich text formatting
1. Planning - Designed site architecture and user flow 2. Design - Created cybersecurity-themed dark design 3. Implementation - Built components incrementally with TypeScript 4. Content - Populated with real projects and achievements 5. Optimization - Lazy loading, image optimization, code splitting 6. Testing - Cross-browser and device testing 7. Deployment - Set up CI/CD pipeline with GitHub Actions
Automated deployment using GitHub Actions: • Automatic builds on push to main branch • Static site generation with Next.js export • Deployment to GitHub Pages • Build verification and error checking • Ready for custom domain configuration