From b90bddc90036c503937fbcfae6c0ddc8e133be73 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 15 Sep 2025 09:04:51 +0000 Subject: [PATCH 1/2] Initial plan From c070a56581d7ed05a4cf927e035662a4f3ce5232 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 15 Sep 2025 09:14:53 +0000 Subject: [PATCH 2/2] Create comprehensive README and professional GitHub Pages website Co-authored-by: EthanThePhoenix38 <103653068+EthanThePhoenix38@users.noreply.github.com> --- README.md | 196 +++++++++++- _config.yml | 61 ++++ index.html | 428 ++++++++++++++++++++++++++ robots.txt | 10 + script.js | 395 ++++++++++++++++++++++++ styles.css | 866 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 1955 insertions(+), 1 deletion(-) create mode 100644 _config.yml create mode 100644 index.html create mode 100644 robots.txt create mode 100644 script.js create mode 100644 styles.css diff --git a/README.md b/README.md index 9242765..5470532 100644 --- a/README.md +++ b/README.md @@ -1 +1,195 @@ -# ThePhoenixAgency.github.io \ No newline at end of file +# 🥇 **Merci de visiter ! N'oubliez pas de mettre une ⭐ étoile ⭐ et de nous suivre 🤩** + +

+ + + + + + +
+

🔥 The Phoenix Agency

+ 		+ Phoenix on fire +
+ +**Votre partenaire digital pour renaître dans l'ère de l'IA !** + +## 🚀 WebAgency Spécialisée en IA, NoCode, Automatisation & Cybersécurité +### Innovation | Intelligence Artificielle | Automatisation | NoCode | Cybersécurité + +Bienvenue chez **The Phoenix Agency** ! 🦅 +Comme le Phoenix qui renaît de ses cendres, nous transformons votre présence digitale grâce à l'innovation, l'IA et l'automatisation. + +--- + +## 🛡️ Badges de Conformité & Statistiques + +![GitHub followers](https://img.shields.io/github/followers/ThePhoenixAgency?style=for-the-badge&logo=github&logoColor=white) +![GitHub User's stars](https://img.shields.io/github/stars/ThePhoenixAgency?style=for-the-badge&logo=github&logoColor=white) +![GitHub commit activity](https://img.shields.io/github/commit-activity/m/ThePhoenixAgency/ThePhoenixAgency.github.io?style=for-the-badge&logo=github) +![GitHub last commit](https://img.shields.io/github/last-commit/ThePhoenixAgency/ThePhoenixAgency.github.io?style=for-the-badge&logo=github) + +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT) +[![Made with Love](https://img.shields.io/badge/Made%20with-❤️-red.svg?style=for-the-badge)](https://github.com/ThePhoenixAgency) +[![Professional](https://img.shields.io/badge/Status-Professional-success?style=for-the-badge&logo=verified&logoColor=white)](https://github.com/ThePhoenixAgency) + +--- + +### 🚀 Nos Expertises & Technologies + +![Artificial Intelligence](https://img.shields.io/badge/Artificial%20Intelligence-00BFFF?style=for-the-badge&logo=openai&logoColor=white) +![Machine Learning](https://img.shields.io/badge/Machine%20Learning-FF6F61?style=for-the-badge&logo=tensorflow&logoColor=white) +![NoCode](https://img.shields.io/badge/NoCode-7B68EE?style=for-the-badge&logo=zapier&logoColor=white) +![Automation](https://img.shields.io/badge/Automation-FFD700?style=for-the-badge&logo=githubactions&logoColor=black) +![Cybersecurity](https://img.shields.io/badge/Cybersecurity-FF4136?style=for-the-badge&logo=hackthebox&logoColor=white) +![Web Development](https://img.shields.io/badge/Web%20Development-61DAFB?style=for-the-badge&logo=react&logoColor=black) + +--- + +### 🛠️ Stack Technologique & Outils + + + + + + + + + + + + + + + + + + + + +
+ Python
Python + 		+ JavaScript
JavaScript + 		+ React
React + 		+ Node.js
Node.js + 		+ TensorFlow
TensorFlow + 		+ ChatGPT
ChatGPT + 		+ Notion
Notion +
+ n8n
n8n + 		+ GitHub
GitHub + 		+ Docker
Docker + 		+ Linux
Linux + 		+ Cursor
Cursor + 		+ Airtable
Airtable + 		+ Claude
Claude +
+ +--- + +### 📊 Statistiques GitHub & Visiteurs + + + + + + +
+ GitHub Stats
+ Top Languages + 		+

🤖 Visiteurs

+ Visitor Badge +
+ Merci à tous nos clients et partenaires ! +
+ +--- + +### 📚 Nos Repositories Publics + +| Repository | Description | Language | Stars | Status | +|------------|-------------|----------|-------|--------| +| [🐍 py-stats-toolkit](https://github.com/ThePhoenixAgency/py-stats-toolkit) | Bibliothèque de fonctions statistiques, algo, Machine Learning, génétique | ![Python](https://img.shields.io/badge/Python-3670A0?style=flat&logo=python&logoColor=ffdd54) | ![Stars](https://img.shields.io/github/stars/ThePhoenixAgency/py-stats-toolkit?style=flat) | ![Status](https://img.shields.io/badge/Status-Active-success) | +| [🌐 ThePhoenixAgency.github.io](https://github.com/ThePhoenixAgency/ThePhoenixAgency.github.io) | Site officiel The Phoenix Agency | ![HTML](https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=html5&logoColor=white) | ![Stars](https://img.shields.io/github/stars/ThePhoenixAgency/ThePhoenixAgency.github.io?style=flat) | ![Status](https://img.shields.io/badge/Status-Active-success) | + +--- + +## 💼 Nos Services + +### 🤖 Intelligence Artificielle +- Développement de chatbots et assistants IA +- Analyse de données et Machine Learning +- Automatisation intelligente des processus +- Intégration d'API IA (OpenAI, Claude, etc.) + +### 🎯 NoCode Solutions +- Applications web sans code +- Automatisations Zapier, n8n, Make +- Bases de données intelligentes (Airtable, Notion) +- Workflows personnalisés + +### ⚙️ Automatisation +- Scripts Python sur mesure +- Automatisation GitHub Actions +- Processus métier automatisés +- Monitoring et alertes + +### 🛡️ Cybersécurité +- Audit de sécurité +- Tests de pénétration +- Formations en sécurité +- Mise en conformité RGPD + +--- + +### 🌐 Nous Trouver + +[![Website](https://img.shields.io/badge/Website-FF7139?style=for-the-badge&logo=firefox&logoColor=white)](https://thephoenixagency.github.io) +[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/the-phoenix-agency) +[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/ThePhoenixAgency) +[![Email](https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:contact@thephoenixagency.com) + +--- + +## 📞 **Contactez-nous pour votre transformation digitale :** + +💬 **Demandez-nous pour :** +- Solutions d'automatisation sur mesure +- Développement d'applications IA +- Consulting en cybersécurité +- Formation et accompagnement NoCode +- Transformation digitale complète + +📧 **Contact :** +Contactez-nous via nos réseaux ou créez une issue GitHub ! + +--- + +## 💎 Soutenez Notre Mission + +> _"Comme le Phoenix, chaque défi est une opportunité de renaissance digitale."_ +[![Sponsor](https://img.shields.io/badge/Sponsor-EA4AAA?style=for-the-badge&logo=githubsponsors&logoColor=white)](https://github.com/sponsors/ThePhoenixAgency) + +--- + +
+ +### ⭐ **N'oubliez pas de mettre une étoile si vous aimez notre travail !** ⭐ + +***Transformons ensemble votre vision en réalité digitale*** 🚀 + +
\ No newline at end of file diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..8041752 --- /dev/null +++ b/_config.yml @@ -0,0 +1,61 @@ +plugins: + - jekyll-sitemap + - jekyll-feed + - jekyll-seo-tag + +title: "The Phoenix Agency - WebAgency IA & Automatisation" +description: "Spécialistes en Intelligence Artificielle, NoCode, Automatisation et Cybersécurité. Votre partenaire digital pour renaître dans l'ère de l'IA." +url: "https://thephoenixagency.github.io" +baseurl: "" + +# SEO +author: "The Phoenix Agency" +twitter: + username: ThePhoenixAgency + card: summary_large_image +social: + name: The Phoenix Agency + links: + - https://github.com/ThePhoenixAgency + - https://www.linkedin.com/company/the-phoenix-agency + +# Configuration +markdown: kramdown +highlighter: rouge +timezone: Europe/Paris +lang: fr + +# Exclure des fichiers du build +exclude: + - README.md + - Gemfile + - Gemfile.lock + - node_modules + - vendor + - .bundle + - .sass-cache + - .jekyll-cache + - .jekyll-metadata + +# Inclure des fichiers +include: + - _pages + +# Collections +collections: + projects: + output: true + permalink: /:collection/:name/ + +# Defaults +defaults: + - scope: + path: "" + type: "pages" + values: + layout: "default" + - scope: + path: "" + type: "projects" + values: + layout: "project" \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..8f654fc --- /dev/null +++ b/index.html @@ -0,0 +1,428 @@ + + + + + + The Phoenix Agency - WebAgency IA, NoCode, Automatisation & Cybersécurité + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ 🔥 + Votre renaissance digitale commence ici +
+

+ Transformez votre entreprise avec + l'Intelligence Artificielle +

+

+ Spécialistes en IA, NoCode, Automatisation et Cybersécurité. + Nous donnons vie à vos projets digitaux avec des solutions sur mesure. +

+
+
+
0
+
Projets Réalisés
+
+
+
0
+
% Satisfaction
+
+
+
0
+
Mois d'Expérience
+
+
+
+ + + Démarrer votre projet + + + + Découvrir nos services + +
+
+
+
+
+ + Intelligence Artificielle +
+
+ + Automatisation +
+
+ + Cybersécurité +
+
+ + NoCode +
+
+
+
+
+
+
+
+ + +
+
+
+

Nos Services

+

+ Des solutions innovantes pour propulser votre entreprise vers l'avenir +

+
+ +
+
+
+ +
+

Intelligence Artificielle

+

Développement de chatbots, analyse de données avec Machine Learning, et intégration d'API IA avancées.

+
    +
  • Chatbots et assistants IA
    • +
  • Machine Learning & Analytics
    • +
  • API OpenAI, Claude, GPT
    • +
  • Vision par ordinateur
    • +
+ En savoir plus +
+ +
+
+ +
+

Solutions NoCode

+

Création d'applications web sans code, automatisations intelligentes et workflows personnalisés.

+
    +
  • Applications web rapides
    • +
  • Zapier, n8n, Make
    • +
  • Airtable, Notion
    • +
  • Workflows sur mesure
    • +
+ En savoir plus +
+ +
+
+ +
+

Automatisation

+

Scripts Python sur mesure, automatisation GitHub Actions et optimisation des processus métier.

+
    +
  • Scripts Python personnalisés
    • +
  • GitHub Actions
    • +
  • Processus métier
    • +
  • Monitoring & alertes
    • +
+ En savoir plus +
+ +
+
+ +
+

Cybersécurité

+

Audits de sécurité, tests de pénétration, formations et mise en conformité RGPD.

+
    +
  • Audits de sécurité
    • +
  • Tests de pénétration
    • +
  • Formation équipes
    • +
  • Conformité RGPD
    • +
+ En savoir plus +
+
+
+
+ + +
+
+
+

Notre Stack Technique

+

+ Technologies de pointe pour des solutions performantes +

+
+ +
+
+

Développement

+
+ Python + JavaScript + React + Node.js + HTML/CSS +
+
+ +
+

Intelligence Artificielle

+
+ TensorFlow + OpenAI + Claude + Scikit-learn + Pandas +
+
+ +
+

Automatisation & NoCode

+
+ n8n + Zapier + Make + Notion + Airtable +
+
+ +
+

Infrastructure & Sécurité

+
+ Docker + Linux + GitHub Actions + SSL/TLS + Firewalls +
+
+
+
+
+ + +
+
+
+

Nos Réalisations

+

+ Découvrez nos projets open source et réalisations +

+
+ +
+
+
+

🐍 py-stats-toolkit

+
+ Python + ML +
+
+

Bibliothèque complète de fonctions statistiques, algorithmes et Machine Learning.

+
+ 1 Stars + 0 Forks +
+ + + Voir sur GitHub + +
+ +
+
+

🌐 Site Officiel

+
+ Web + Responsive +
+
+

Site vitrine moderne et professionnel pour présenter nos services et expertise.

+
+ Vous êtes ici + Mobile-first +
+ + + Voir le code + +
+
+
+
+ + +
+
+
+

Prêt à transformer votre entreprise ?

+

+ Contactez-nous pour discuter de votre projet +

+
+ +
+
+

Commençons ensemble

+

Que vous ayez besoin d'une solution IA, d'automatisation ou de sécurisation, nous sommes là pour vous accompagner.

+ +
+
+ + GitHub Issues + Créer une issue +
+ +
+ + Email + contact@thephoenixagency.com +
+ +
+ + LinkedIn + Nous suivre +
+
+
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..5e82869 --- /dev/null +++ b/robots.txt @@ -0,0 +1,10 @@ +User-agent: * +Allow: / + +# Sitemap +Sitemap: https://thephoenixagency.github.io/sitemap.xml + +# Disallow des pages sensibles (si elles existent) +Disallow: /admin/ +Disallow: /private/ +Disallow: /.git/ \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..6bf800c --- /dev/null +++ b/script.js @@ -0,0 +1,395 @@ +// Initialisation des icônes Lucide +document.addEventListener('DOMContentLoaded', function() { + lucide.createIcons(); + + // Initialisation de toutes les fonctionnalités + initNavigation(); + initAnimations(); + initCounters(); + initFormHandling(); + initScrollEffects(); +}); + +// Navigation mobile +function initNavigation() { + const mobileMenu = document.getElementById('mobile-menu'); + const navMenu = document.querySelector('.nav-menu'); + + if (mobileMenu && navMenu) { + mobileMenu.addEventListener('click', function() { + navMenu.classList.toggle('active'); + mobileMenu.classList.toggle('active'); + }); + + // Fermer le menu mobile quand on clique sur un lien + document.querySelectorAll('.nav-link').forEach(link => { + link.addEventListener('click', function() { + navMenu.classList.remove('active'); + mobileMenu.classList.remove('active'); + }); + }); + } + + // Navbar transparente au scroll + window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 100) { + navbar.style.background = 'rgba(255, 255, 255, 0.98)'; + navbar.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)'; + } else { + navbar.style.background = 'rgba(255, 255, 255, 0.95)'; + navbar.style.boxShadow = 'none'; + } + }); +} + +// Animations au scroll +function initAnimations() { + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }; + + const observer = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); + }, observerOptions); + + // Observer tous les éléments avec la classe fade-in + document.querySelectorAll('.service-card, .project-card, .tech-category, .contact-method').forEach(el => { + el.classList.add('fade-in'); + observer.observe(el); + }); + + // Animation des cartes flottantes supplémentaires + const floatingCards = document.querySelectorAll('.floating-card'); + floatingCards.forEach((card, index) => { + card.style.animationDelay = `${index * 0.5}s`; + }); +} + +// Compteurs animés +function initCounters() { + const counters = document.querySelectorAll('.stat-number'); + const counterOptions = { + threshold: 0.5, + rootMargin: '0px' + }; + + const counterObserver = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + const counter = entry.target; + const target = parseInt(counter.getAttribute('data-target')); + + animateCounter(counter, target); + counterObserver.unobserve(counter); + } + }); + }, counterOptions); + + counters.forEach(counter => { + counterObserver.observe(counter); + }); +} + +function animateCounter(element, target) { + let current = 0; + const increment = target / 50; + const duration = 2000; + const stepTime = duration / 50; + + const timer = setInterval(() => { + current += increment; + if (current >= target) { + element.textContent = target; + clearInterval(timer); + } else { + element.textContent = Math.floor(current); + } + }, stepTime); +} + +// Gestion du formulaire de contact +function initFormHandling() { + const form = document.querySelector('.contact-form form'); + + if (form) { + form.addEventListener('submit', function(e) { + e.preventDefault(); + handleFormSubmission(form); + }); + } +} + +async function handleFormSubmission(form) { + const submitBtn = form.querySelector('button[type="submit"]'); + const originalText = submitBtn.innerHTML; + + // État de chargement + submitBtn.disabled = true; + submitBtn.innerHTML = ' Envoi en cours...'; + lucide.createIcons(); + + // Simuler l'envoi du formulaire + try { + await new Promise(resolve => setTimeout(resolve, 2000)); + + // Succès + submitBtn.innerHTML = ' Message envoyé !'; + submitBtn.style.background = '#10B981'; + + // Réinitialiser le formulaire + form.reset(); + + // Message de confirmation + showNotification('Merci ! Votre message a été envoyé avec succès. Nous vous répondrons rapidement.', 'success'); + + } catch (error) { + // Erreur + submitBtn.innerHTML = ' Erreur lors de l\'envoi'; + submitBtn.style.background = '#EF4444'; + showNotification('Une erreur est survenue. Veuillez réessayer ou nous contacter directement.', 'error'); + } + + // Restaurer le bouton après 3 secondes + setTimeout(() => { + submitBtn.disabled = false; + submitBtn.innerHTML = originalText; + submitBtn.style.background = ''; + lucide.createIcons(); + }, 3000); +} + +// Système de notifications +function showNotification(message, type = 'info') { + const notification = document.createElement('div'); + notification.className = `notification notification-${type}`; + notification.innerHTML = ` +
+ + ${message} + +
+ `; + + // Styles pour la notification + Object.assign(notification.style, { + position: 'fixed', + top: '20px', + right: '20px', + zIndex: '10000', + padding: '1rem', + borderRadius: '8px', + boxShadow: '0 4px 12px rgba(0,0,0,0.15)', + maxWidth: '400px', + opacity: '0', + transform: 'translateX(100%)', + transition: 'all 0.3s ease', + background: type === 'success' ? '#10B981' : '#EF4444', + color: 'white' + }); + + notification.querySelector('.notification-content').style.display = 'flex'; + notification.querySelector('.notification-content').style.alignItems = 'center'; + notification.querySelector('.notification-content').style.gap = '0.5rem'; + + const closeBtn = notification.querySelector('.notification-close'); + Object.assign(closeBtn.style, { + background: 'none', + border: 'none', + color: 'white', + cursor: 'pointer', + marginLeft: 'auto' + }); + + document.body.appendChild(notification); + lucide.createIcons(); + + // Animation d'entrée + requestAnimationFrame(() => { + notification.style.opacity = '1'; + notification.style.transform = 'translateX(0)'; + }); + + // Auto-suppression après 5 secondes + setTimeout(() => { + notification.style.opacity = '0'; + notification.style.transform = 'translateX(100%)'; + setTimeout(() => { + if (notification.parentElement) { + notification.remove(); + } + }, 300); + }, 5000); +} + +// Effets de scroll +function initScrollEffects() { + // Parallax léger pour les sections + window.addEventListener('scroll', function() { + const scrolled = window.pageYOffset; + const parallaxElements = document.querySelectorAll('.floating-card'); + const speed = 0.5; + + parallaxElements.forEach(element => { + const yPos = -(scrolled * speed); + element.style.transform = `translateY(${yPos}px)`; + }); + }); + + // Smooth scroll pour les liens d'ancrage + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + + if (target) { + const offsetTop = target.offsetTop - 80; // Compensation pour la navbar fixe + window.scrollTo({ + top: offsetTop, + behavior: 'smooth' + }); + } + }); + }); +} + +// Gestion du thème sombre (bonus) +function initThemeToggle() { + const themeToggle = document.createElement('button'); + themeToggle.className = 'theme-toggle'; + themeToggle.innerHTML = ''; + themeToggle.setAttribute('aria-label', 'Basculer le thème'); + + Object.assign(themeToggle.style, { + position: 'fixed', + bottom: '20px', + right: '20px', + width: '50px', + height: '50px', + borderRadius: '50%', + background: 'var(--primary-color)', + color: 'white', + border: 'none', + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + boxShadow: '0 4px 12px rgba(0,0,0,0.15)', + zIndex: '1000', + transition: 'all 0.3s ease' + }); + + document.body.appendChild(themeToggle); + lucide.createIcons(); + + themeToggle.addEventListener('click', function() { + document.body.classList.toggle('dark-theme'); + const isDark = document.body.classList.contains('dark-theme'); + themeToggle.innerHTML = ``; + lucide.createIcons(); + }); +} + +// Fonction utilitaire pour débouncer les événements +function debounce(func, wait, immediate) { + let timeout; + return function executedFunction() { + const context = this; + const args = arguments; + const later = function() { + timeout = null; + if (!immediate) func.apply(context, args); + }; + const callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func.apply(context, args); + }; +} + +// Performance: utilisation de requestAnimationFrame pour les animations de scroll +let ticking = false; + +function updateScrollEffects() { + // Code d'animation de scroll optimisé + ticking = false; +} + +window.addEventListener('scroll', function() { + if (!ticking) { + requestAnimationFrame(updateScrollEffects); + ticking = true; + } +}); + +// Gestion des erreurs JavaScript +window.addEventListener('error', function(e) { + console.error('Erreur JavaScript:', e.error); +}); + +// Analytics et tracking (à remplacer par votre solution d'analytics) +function trackEvent(eventName, eventData = {}) { + // Exemple avec Google Analytics 4 + if (typeof gtag !== 'undefined') { + gtag('event', eventName, eventData); + } + + // Console log pour le développement + console.log('Event tracked:', eventName, eventData); +} + +// Tracker les interactions importantes +document.addEventListener('click', function(e) { + if (e.target.matches('.btn-primary')) { + trackEvent('button_click', { + button_text: e.target.textContent.trim(), + button_location: e.target.closest('section')?.id || 'unknown' + }); + } + + if (e.target.matches('.project-link')) { + trackEvent('project_click', { + project_name: e.target.closest('.project-card').querySelector('h3').textContent + }); + } +}); + +// Lazy loading pour les images (si des images sont ajoutées plus tard) +function initLazyLoading() { + if ('IntersectionObserver' in window) { + const imageObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.remove('lazy'); + imageObserver.unobserve(img); + } + }); + }); + + document.querySelectorAll('img[data-src]').forEach(img => { + imageObserver.observe(img); + }); + } +} + +// Service Worker pour la mise en cache (PWA ready) +if ('serviceWorker' in navigator) { + window.addEventListener('load', function() { + navigator.serviceWorker.register('/sw.js') + .then(function(registration) { + console.log('ServiceWorker registration successful'); + }) + .catch(function(err) { + console.log('ServiceWorker registration failed'); + }); + }); +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d50e411 --- /dev/null +++ b/styles.css @@ -0,0 +1,866 @@ +/* Variables CSS */ +:root { + --primary-color: #FF5733; + --secondary-color: #00BFFF; + --accent-color: #FFD700; + --dark-color: #1a1a1a; + --gray-dark: #2a2a2a; + --gray-medium: #666666; + --gray-light: #f5f5f5; + --white: #ffffff; + --gradient-primary: linear-gradient(135deg, #FF5733 0%, #FF8A65 100%); + --gradient-secondary: linear-gradient(135deg, #00BFFF 0%, #87CEEB 100%); + --gradient-accent: linear-gradient(135deg, #FFD700 0%, #FFF8DC 100%); + --shadow-small: 0 2px 4px rgba(0,0,0,0.1); + --shadow-medium: 0 4px 12px rgba(0,0,0,0.15); + --shadow-large: 0 8px 24px rgba(0,0,0,0.2); + --border-radius: 8px; + --border-radius-large: 16px; + --transition: all 0.3s ease; +} + +/* Reset et base */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: var(--dark-color); + background-color: var(--white); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-weight: 600; + line-height: 1.2; + margin-bottom: 1rem; +} + +h1 { font-size: clamp(2.5rem, 5vw, 4rem); } +h2 { font-size: clamp(2rem, 4vw, 3rem); } +h3 { font-size: clamp(1.5rem, 3vw, 2rem); } + +p { + margin-bottom: 1rem; + color: var(--gray-medium); +} + +a { + text-decoration: none; + color: inherit; + transition: var(--transition); +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(0,0,0,0.1); + z-index: 1000; + padding: 1rem 0; + transition: var(--transition); +} + +.nav-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; +} + +.nav-brand { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + font-size: 1.25rem; +} + +.phoenix-icon { + font-size: 1.5rem; + filter: drop-shadow(0 0 8px rgba(255, 87, 51, 0.3)); +} + +.nav-menu { + display: flex; + gap: 2rem; + align-items: center; +} + +.nav-link { + font-weight: 500; + position: relative; + transition: var(--transition); +} + +.nav-link:hover { + color: var(--primary-color); +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--gradient-primary); + transition: var(--transition); +} + +.nav-link:hover::after { + width: 100%; +} + +.nav-toggle { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 25px; + height: 3px; + background: var(--dark-color); + margin: 3px 0; + transition: var(--transition); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 12px 24px; + border: none; + border-radius: var(--border-radius); + font-weight: 500; + text-decoration: none; + transition: var(--transition); + cursor: pointer; + font-size: 1rem; + white-space: nowrap; +} + +.btn-primary { + background: var(--gradient-primary); + color: var(--white); + box-shadow: var(--shadow-small); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-medium); +} + +.btn-secondary { + background: transparent; + color: var(--dark-color); + border: 2px solid var(--primary-color); +} + +.btn-secondary:hover { + background: var(--primary-color); + color: var(--white); +} + +.btn-full { + width: 100%; + justify-content: center; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + background: linear-gradient(135deg, #f8f9ff 0%, #fff8f3 100%); + position: relative; + overflow: hidden; +} + +.hero-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 120px 20px 60px; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(255, 87, 51, 0.1); + color: var(--primary-color); + padding: 8px 16px; + border-radius: 50px; + font-weight: 500; + font-size: 0.9rem; + margin-bottom: 1rem; +} + +.hero-title { + margin-bottom: 1.5rem; + font-weight: 700; +} + +.gradient-text { + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-description { + font-size: 1.2rem; + margin-bottom: 2rem; + color: var(--gray-medium); +} + +.hero-stats { + display: flex; + gap: 2rem; + margin-bottom: 2rem; +} + +.stat { + text-align: center; +} + +.stat-number { + font-size: 2rem; + font-weight: 700; + color: var(--primary-color); + display: block; +} + +.stat-label { + font-size: 0.9rem; + color: var(--gray-medium); + font-weight: 500; +} + +.hero-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +/* Hero Visual */ +.hero-visual { + position: relative; + height: 500px; +} + +.floating-cards { + position: relative; + height: 100%; +} + +.floating-card { + position: absolute; + background: var(--white); + padding: 1.5rem; + border-radius: var(--border-radius-large); + box-shadow: var(--shadow-medium); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + text-align: center; + min-width: 140px; + animation: float 6s ease-in-out infinite; +} + +.floating-card i { + font-size: 2rem; + color: var(--primary-color); +} + +.floating-card span { + font-weight: 500; + font-size: 0.9rem; +} + +.card-1 { + top: 10%; + left: 20%; + animation-delay: 0s; +} + +.card-2 { + top: 30%; + right: 10%; + animation-delay: -2s; +} + +.card-3 { + bottom: 30%; + left: 10%; + animation-delay: -4s; +} + +.card-4 { + bottom: 10%; + right: 25%; + animation-delay: -6s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-20px); } +} + +.scroll-indicator { + position: absolute; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + animation: bounce 2s infinite; +} + +.scroll-arrow { + width: 24px; + height: 24px; + border: 2px solid var(--primary-color); + border-top: none; + border-left: none; + transform: rotate(45deg); +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } + 40% { transform: translateX(-50%) translateY(-10px); } + 60% { transform: translateX(-50%) translateY(-5px); } +} + +/* Section commune */ +section { + padding: 80px 0; +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-title { + margin-bottom: 1rem; +} + +.section-description { + font-size: 1.1rem; + max-width: 600px; + margin: 0 auto; +} + +/* Services Section */ +.services { + background: var(--white); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; +} + +.service-card { + background: var(--white); + padding: 2rem; + border-radius: var(--border-radius-large); + box-shadow: var(--shadow-small); + transition: var(--transition); + border: 1px solid rgba(0,0,0,0.05); +} + +.service-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-large); +} + +.service-icon { + width: 60px; + height: 60px; + border-radius: var(--border-radius); + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; +} + +.service-icon i { + font-size: 1.5rem; + color: var(--white); +} + +.service-card h3 { + margin-bottom: 1rem; + color: var(--dark-color); +} + +.service-card p { + margin-bottom: 1.5rem; +} + +.service-features { + list-style: none; + margin-bottom: 1.5rem; +} + +.service-features li { + padding: 0.5rem 0; + color: var(--gray-medium); + position: relative; + padding-left: 1.5rem; +} + +.service-features li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--primary-color); + font-weight: bold; +} + +.service-link { + color: var(--primary-color); + font-weight: 500; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.service-link:hover { + text-decoration: underline; +} + +/* Expertise Section */ +.expertise { + background: var(--gray-light); +} + +.tech-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.tech-category h3 { + margin-bottom: 1rem; + color: var(--dark-color); +} + +.tech-badges { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.tech-badge { + background: var(--white); + color: var(--dark-color); + padding: 8px 16px; + border-radius: 50px; + font-size: 0.9rem; + font-weight: 500; + box-shadow: var(--shadow-small); + transition: var(--transition); +} + +.tech-badge:hover { + background: var(--primary-color); + color: var(--white); + transform: translateY(-2px); +} + +/* Projects Section */ +.projects { + background: var(--white); +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.project-card { + background: var(--white); + padding: 2rem; + border-radius: var(--border-radius-large); + box-shadow: var(--shadow-small); + border: 1px solid rgba(0,0,0,0.05); + transition: var(--transition); +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-large); +} + +.project-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1rem; +} + +.project-header h3 { + margin: 0; + color: var(--dark-color); +} + +.project-badges { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.badge { + padding: 4px 8px; + border-radius: 50px; + font-size: 0.75rem; + font-weight: 500; + color: var(--white); +} + +.badge-python { background: #3776ab; } +.badge-ml { background: #ff6b6b; } +.badge-web { background: #00d2ff; } +.badge-responsive { background: #4ecdc4; } + +.project-stats { + display: flex; + gap: 1rem; + margin: 1rem 0; + font-size: 0.9rem; + color: var(--gray-medium); +} + +.project-stats span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.project-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--primary-color); + font-weight: 500; + margin-top: 1rem; +} + +.project-link:hover { + text-decoration: underline; +} + +/* Contact Section */ +.contact { + background: var(--gray-light); +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: start; +} + +.contact-info h3 { + margin-bottom: 1rem; + color: var(--dark-color); +} + +.contact-info p { + margin-bottom: 2rem; +} + +.contact-methods { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.contact-method { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + background: var(--white); + border-radius: var(--border-radius); + box-shadow: var(--shadow-small); +} + +.contact-method i { + font-size: 1.25rem; + color: var(--primary-color); +} + +.contact-method a { + color: var(--primary-color); + font-weight: 500; +} + +.contact-method a:hover { + text-decoration: underline; +} + +.contact-form { + background: var(--white); + padding: 2rem; + border-radius: var(--border-radius-large); + box-shadow: var(--shadow-small); +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--dark-color); +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 12px; + border: 2px solid rgba(0,0,0,0.1); + border-radius: var(--border-radius); + font-family: inherit; + font-size: 1rem; + transition: var(--transition); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); +} + +/* Footer */ +.footer { + background: var(--dark-color); + color: var(--white); + padding: 3rem 0 2rem; +} + +.footer-content { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 3rem; + margin-bottom: 2rem; +} + +.footer-brand .brand { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + font-size: 1.25rem; + margin-bottom: 1rem; +} + +.footer-brand p { + color: rgba(255,255,255,0.7); +} + +.footer-links { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.footer-section h4 { + margin-bottom: 1rem; + color: var(--white); +} + +.footer-section a { + display: block; + color: rgba(255,255,255,0.7); + margin-bottom: 0.5rem; + transition: var(--transition); +} + +.footer-section a:hover { + color: var(--primary-color); +} + +.footer-bottom { + border-top: 1px solid rgba(255,255,255,0.1); + padding-top: 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-bottom p { + color: rgba(255,255,255,0.7); + margin: 0; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-menu { + display: none; + } + + .nav-toggle { + display: flex; + } + + .hero-container { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + } + + .hero-stats { + justify-content: center; + } + + .hero-buttons { + justify-content: center; + } + + .hero-visual { + height: 300px; + order: -1; + } + + .contact-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-links { + grid-template-columns: repeat(2, 1fr); + } + + .footer-bottom { + flex-direction: column; + gap: 1rem; + } + + .hero-buttons { + flex-direction: column; + align-items: stretch; + } + + .btn { + justify-content: center; + } + + .section-header { + margin-bottom: 2rem; + } + + section { + padding: 60px 0; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 15px; + } + + .hero-container { + padding: 100px 15px 40px; + } + + .hero-stats { + flex-direction: column; + gap: 1rem; + } + + .services-grid, + .projects-grid { + grid-template-columns: 1fr; + } + + .tech-categories { + grid-template-columns: 1fr; + } + + .footer-links { + grid-template-columns: 1fr; + } + + .floating-card { + min-width: 120px; + padding: 1rem; + } + + .floating-card i { + font-size: 1.5rem; + } + + .floating-card span { + font-size: 0.8rem; + } +} + +/* Animations et effets supplémentaires */ +.fade-in { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} + +/* Scroll snap pour une navigation fluide */ +html { + scroll-snap-type: y mandatory; +} + +section { + scroll-snap-align: start; +} + +/* Loading state pour les formulaires */ +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none !important; +} \ No newline at end of file