Back

Portfolio Technical Details

Information for recruiters and hiring managers

Technologies and Skills

Frontend

Semantic HTML5, CSS3 (Flexbox, Grid, CSS variables), JavaScript ES6+

CSS Architecture

Modular organization inspired by SMACSS

Performance

Resource optimization, lazy loading, smooth animations

Responsive Design

Compatible with all devices (mobile, tablet, desktop)

Accessibility

Compliance with WCAG standards, keyboard navigation

UX/UI

Dark/light mode, smooth transitions, intuitive user experience

Tools

EmailJS API, Git, CI/CD integration

JavaScript Architecture

ES6 modules, Intersection Observer API, event handling

Testing & Quality

W3C validation, cross-browser compatibility testing, web performance optimization

Key Features

  • Modern Design: Adaptive light/dark theme with smooth transitions
  • Scalable Architecture: Modular organization inspired by SMACSS for optimal maintainability
  • Optimized Animations: Optimized animations using Intersection Observer API
  • Contact Form: Functional form with validation and error handling
  • GDPR Compliance: Consent banner and privacy policy
  • SEO Optimization: Descriptive meta tags and semantic structure
  • Performance: Lazy loading of images and videos

Project Structure


clecart.fr/
├── assets/                      # Ressources optimisées
│   ├── documents/
│   │   └── CV_Christophe_Lecart.pdf
│   ├── icons/                   # PWA + favicons
│   │   ├── android-chrome-*.png
│   │   ├── apple-touch-icon.png
│   │   ├── favicon*.png|ico
│   │   └── rust-icon.svg
│   ├── images/                  # Images du site
│   │   ├── profile.jpg
│   │   └── forum.png
│   ├── manifest/                # PWA Configuration
│   │   ├── site.webmanifest
│   │   └── browserconfig.xml
│   └── videos/                  # Project demos
│       ├── BombermanDX.mp4
│       └── Groupie-Tracker.mp4
├── css/                         # Architecture SMACSS
│   ├── base/                    # Fondations
│   ├── components/              # Reusable components
│   ├── layout/                  # Structure générale
│   ├── sections/                # Specific sections
│   ├── theme/                   # Theme management
│   ├── utils/                   # Utilities
│   └── critical.css             # Critical CSS
├── js/                          # JavaScript modulaire
│   ├── modules/                 # Business features
│   │   ├── animations.js
│   │   ├── contact-form.js
│   │   ├── darkmode.js
│   │   ├── form-enhancements.js
│   │   ├── navigation.js
│   │   ├── project-navigation.js
│   │   └── videoHandler.js
│   ├── utils/                   # Utilities techniques
│   │   ├── analytics.js
│   │   ├── gdpr.js
│   │   ├── modal.js
│   │   ├── performance.js
│   │   ├── service-worker.js
│   │   ├── sw-advanced.js
│   │   ├── sw-register.js
│   │   └── webvitals.js
│   ├── main.js                  # Point d'entrée
│   └── critical.js              # Critical JS
├── .vscode/                     # Configuration IDE
│   ├── extensions.json
│   └── settings.json
├── .eslintrc.json               # Qualité code
├── .prettierrc.json             # Formatage
├── .gitignore                   # Exclusions Git
├── docker-compose.yml           # Orchestration
├── Dockerfile                   # Containerisation
├── package.json                 # Scripts npm
├── deploy.sh                    # Déploiement
├── nginx.conf                   # Configuration serveur
├── SECURITY.md                  # Security documentation
├── robots.txt                   # SEO directives
├── sitemap.xml                  # Plan du site
├── CNAME                        # Domaine personnalisé
├── styles.css                   # Main styles
├── index.html                   # Main page
├── about-portfolio.html         # Technical documentation
├── descriptions-projects.html   # Project details
├── privacy-policy.html          # GDPR Policy
└── README.md                    # Complete documentation

Development Approach

This portfolio was developed following several modern web development principles:

Modularity

Organization of CSS and JavaScript into independent modules to facilitate maintenance and evolution.

Performance

Use of optimization techniques such as lazy loading, image compression, and optimized animations.

Accessibility

Design with particular attention to accessibility, especially for keyboard navigation and color contrasts.

Responsive Design

Mobile-first approach with strategically placed media queries to ensure an optimal experience on all devices.

Learning Outcomes

Developing this portfolio allowed me to deepen several important skills:

  • Modular organization of a front-end codebase
  • Implementation of themes (light/dark mode) with smooth transition
  • Optimization of web performance
  • Integration of third-party APIs (EmailJS)
  • Optimized animations with the Intersection Observer API
  • Form management with validation and user feedback
  • Cross-browser compatibility management with specific fixes
  • DevOps and deployment with Docker and Nginx configuration
Download CV Contact Me