crée un site modern de directeur artistique, gen ai digital artist, photographe , il faut que ce soit tres beau et tres modernen tres graphique

components/header.js

@@ -1,127 +1,114 @@
 class CustomHeader extends HTMLElement {
-    connectedCallback() {
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host {
-                    display: block;
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    z-index: 1000;
-                    background: rgba(247, 255, 247, 0.95);
-                    backdrop-filter: blur(10px);
-                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-                }
-                
-                nav {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 1.5rem 2rem;
-                    max-width: 1400px;
-                    margin: 0 auto;
-                }
-                
-                .logo {
-                    font-weight: 700;
-                    font-size: 1.5rem;
-                    color: #FF6B6B;
-                }
-                
-                .nav-links {
-                    display: flex;
-                    gap: 2rem;
-                }
-                
-                .nav-link {
-                    text-decoration: none;
-                    color: #292F36;
-                    font-weight: 500;
-                    transition: color 0.3s;
-                    position: relative;
-                }
-                
-                .nav-link:hover {
-                    color: #FF6B6B;
-                }
-                
-                .nav-link::after {
-                    content: '';
-                    position: absolute;
-                    bottom: -5px;
-                    left: 0;
-                    width: 0;
-                    height: 2px;
-                    background-color: #FF6B6B;
-                    transition: width 0.3s;
-                }
-                
-                .nav-link:hover::after {
-                    width: 100%;
-                }
-                
-                .mobile-menu-btn {
-                    display: none;
-                    background: none;
-                    border: none;
-                    cursor: pointer;
-                }
-                
-                @media (max-width: 768px) {
-                    .mobile-menu-btn {
-                        display: block;
-                    }
-                    
-                    .nav-links {
-                        position: fixed;
-                        top: 80px;
-                        left: 0;
-                        right: 0;
-                        background: #F7FFF7;
-                        flex-direction: column;
-                        gap: 1.5rem;
-                        padding: 2rem;
-                        align-items: center;
-                        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-                        transform: translateY(-150%);
-                        transition: transform 0.3s ease;
-                    }
-                    
-                    .nav-links.active {
-                        transform: translateY(0);
-                    }
-                }
-            </style>
-            
-            <nav>
-                <a href="/" class="logo">La Pieuvre</a>
-                
-                <div class="nav-links">
-                    <a href="/" class="nav-link">Accueil</a>
-                    <a href="#services" class="nav-link">Services</a>
-                    <a href="#projects" class="nav-link">Projets</a>
-                    <a href="#contact" class="nav-link">Contact</a>
-                </div>
-                
-                <button class="mobile-menu-btn">
-                    <i data-feather="menu" class="w-6 h-6 text-dark"></i>
-                </button>
-            </nav>
-            
-            <script>
-                feather.replace();
-                
-                const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
-                const navLinks = this.shadowRoot.querySelector('.nav-links');
-                
-                menuBtn.addEventListener('click', () => {
-                    navLinks.classList.toggle('active');
-                });
-            </script>
-        `;
-    }
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          background: rgba(0, 0, 0, 0.9);
+          backdrop-filter: blur(20px);
+          -webkit-backdrop-filter: blur(20px);
+          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+          padding: 1.5rem 3rem;
+          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+        }
+
+        nav {
+          max-width: 1800px;
+          margin: 0 auto;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .logo {
+          color: #fff;
+          font-size: 1.8rem;
+          font-weight: 700;
+          letter-spacing: 4px;
+          text-transform: uppercase;
+          text-decoration: none;
+          position: relative;
+          font-family: 'Bebas Neue', sans-serif;
+        }
+
+        .logo::after {
+          content: '';
+          position: absolute;
+          bottom: -10px;
+          left: 0;
+          width: 60%;
+          height: 4px;
+          background: linear-gradient(90deg, #ff4d4d, #f9cb28);
+          transform: scaleX(0);
+          transform-origin: left;
+          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+        }
+
+        .logo:hover::after {
+          transform: scaleX(1);
+        }
+
+        .nav-links {
+          display: flex;
+          gap: 4rem;
+        }
+
+        .nav-link {
+          color: #fff;
+          text-decoration: none;
+          font-size: 1.1rem;
+          font-weight: 500;
+          letter-spacing: 1px;
+          position: relative;
+          padding: 0.5rem 0;
+          overflow: hidden;
+          font-family: 'Montserrat', sans-serif;
+        }
+
+        .nav-link::before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background: linear-gradient(90deg, #ff4d4d, #f9cb28);
+          transform: translateX(-101%);
+          transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+        }
+
+        .nav-link:hover::before {
+          transform: translateX(0);
+        }
+
+        @media (max-width: 992px) {
+          .nav-links {
+            display: none;
+          }
+          
+          :host {
+            padding: 1.5rem;
+          }
+        }
+      </style>
+
+      <nav>
+        <a href="/" class="logo">STUDIO</a>
+        <div class="nav-links">
+          <a href="/work" class="nav-link">Work</a>
+          <a href="/about" class="nav-link">About</a>
+          <a href="/contact" class="nav-link">Contact</a>
+          <a href="/journal" class="nav-link">Journal</a>
+        </div>
+      </nav>
+    `;
+  }
 }
 
 customElements.define('custom-header', CustomHeader);

index.html

@@ -1,89 +1,91 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Lucie Martin | Photographie</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="https://use.typekit.net/xyz1234.css"> <!-- Replace with actual font link -->
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Creative Director & AI Artist | Studio</title>
+  <meta name="description" content="Digital artist blending generative AI and photography to create visionary experiences">
+  <link rel="stylesheet" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-    <custom-navbar></custom-navbar>
-    
-    <main class="portfolio-grid">
-        <!-- Hero Section -->
-        <section class="hero">
-            <div class="hero-content">
-                <h1>Lucie Martin</h1>
-                <p class="subtitle">Photographe d'art & portrait</p>
-            </div>
-        </section>
+  <custom-header></custom-header>
+  
+  <main class="portfolio-grid">
+    <!-- Hero Section -->
+    <section class="hero">
+      <div class="hero-content">
+        <h1>Creative Director | AI Artist | Photographer</h1>
+        <p class="subtitle">Bridging technology and artistry</p>
+        <a href="#work" class="cta-button">View Work</a>
+      </div>
+    </section>
 
-        <!-- Gallery Grid -->
-        <section class="gallery">
-            <div class="grid-item" data-category="portrait">
-                <img src="http://static.photos/people/1024x576/1" alt="Portrait 1">
-                <div class="overlay">
-                    <p class="title">Portraits Intimes</p>
-                </div>
-            </div>
-            <div class="grid-item" data-category="fashion">
-                <img src="http://static.photos/fashion/1024x576/2" alt="Fashion 1">
-                <div class="overlay">
-                    <p class="title">Mode Éditoriale</p>
-                </div>
-            </div>
-            <div class="grid-item" data-category="landscape">
-                <img src="http://static.photos/nature/1024x576/3" alt="Landscape 1">
-                <div class="overlay">
-                    <p class="title">Paysages Urbains</p>
-                </div>
-            </div>
-            <div class="grid-item" data-category="portrait">
-                <img src="http://static.photos/people/1024x576/4" alt="Portrait 2">
-                <div class="overlay">
-                    <p class="title">Séries Personnelles</p>
-                </div>
-            </div>
-        </section>
+    <!-- Projects Grid -->
+    <section class="gallery" id="work">
+      <div class="grid-item">
+        <img src="http://static.photos/abstract/1200x800/1" alt="AI Generated Art">
+        <div class="overlay">
+          <p class="title">Neural Dreams</p>
+          <span class="category">AI Art</span>
+        </div>
+      </div>
+      <div class="grid-item">
+        <img src="http://static.photos/technology/1200x800/2" alt="Digital Experience">
+        <div class="overlay">
+          <p class="title">Digital Frontiers</p>
+          <span class="category">Interactive</span>
+        </div>
+      </div>
+      <div class="grid-item">
+        <img src="http://static.photos/minimal/1200x800/3" alt="Visual Identity">
+        <div class="overlay">
+          <p class="title">Brand Ecosystems</p>
+          <span class="category">Identity</span>
+        </div>
+      </div>
+      <div class="grid-item">
+        <img src="http://static.photos/people/1200x800/4" alt="Photography">
+        <div class="overlay">
+          <p class="title">Human Elements</p>
+          <span class="category">Photography</span>
+        </div>
+      </div>
+      <div class="grid-item">
+        <img src="http://static.photos/white/1200x800/5" alt="Experimental">
+        <div class="overlay">
+          <p class="title">Form Studies</p>
+          <span class="category">Experimental</span>
+        </div>
+      </div>
+    </section>
 
-        <!-- About Section -->
-        <section class="about" id="about">
-            <div class="about-content">
-                <h2>À propos</h2>
-                <p>Photographe basée à Paris, je capture des moments d'authenticité et d'émotion à travers mon travail. Mon approche mélange sensibilité artistique et technique rigoureuse.</p>
-                <a href="#contact" class="cta-button">Travaillons ensemble</a>
-            </div>
-            <div class="about-image">
-                <img src="http://static.photos/people/640x360/5" alt="Lucie Martin">
-            </div>
-        </section>
+    <!-- About Section -->
+    <section class="about" id="about">
+      <div class="about-content">
+        <h2>Visionary Creative</h2>
+        <p>Bridging the gap between technology and human creativity, I craft immersive experiences that resonate with audiences and push boundaries. My work sits at the intersection of generative AI, visual identity, and storytelling.</p>
+        <div class="skills">
+          <span>Creative Direction</span>
+          <span>Generative AI</span>
+          <span>Digital Art</span>
+          <span>Photography</span>
+          <span>Brand Systems</span>
+        </div>
+        <a href="/about" class="cta-button">Full Bio</a>
+      </div>
+      <div class="about-image">
+        <img src="http://static.photos/studio/1200x800/6" alt="Creative Director">
+      </div>
+    </section>
+  </main>
 
-        <!-- Featured Project -->
-        <section class="featured-project">
-            <div class="project-content">
-                <h2>Projet: Lumière Nocturne</h2>
-                <p>Une exploration des nuances de lumière en milieu urbain la nuit.</p>
-                <a href="/series/lumiere-nocturne" class="cta-button">Voir la série</a>
-            </div>
-        </section>
+  <custom-footer></custom-footer>
 
-        <!-- Contact Section -->
-        <section class="contact" id="contact">
-            <h2>Me contacter</h2>
-            <form class="contact-form">
-                <input type="text" placeholder="Votre nom">
-                <input type="email" placeholder="Votre email">
-                <textarea placeholder="Votre message"></textarea>
-                <button type="submit" class="cta-button">Envoyer</button>
-            </form>
-        </section>
-    </main>
-
-    <custom-footer></custom-footer>
-
-    <script src="components/navbar.js"></script>
-    <script src="components/footer.js"></script>
-    <script src="script.js"></script>
+  <script src="components/header.js"></script>
+  <script src="components/footer.js"></script>
+  <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -1,41 +1,53 @@
-document.addEventListener('DOMContentLoaded', function() {
-  // Smooth scrolling
-  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function(e) {
-      e.preventDefault();
-      document.querySelector(this.getAttribute('href')).scrollIntoView({
-        behavior: 'smooth'
-      });
-    });
-  });
 
-  // Lightbox for gallery items
-  const galleryItems = document.querySelectorAll('.grid-item');
-  
-  galleryItems.forEach(item => {
-    item.addEventListener('click', function() {
-      // In a real implementation, this would open a lightbox
-      console.log('Opening lightbox for item');
-    });
+document.addEventListener('DOMContentLoaded', function() {
+  // Parallax effect
+  const hero = document.querySelector('.hero');
+  window.addEventListener('scroll', function() {
+    const scroll = window.pageYOffset;
+    hero.style.transform = `translateY(${scroll * 0.3}px)`;
   });
 
-  // Navbar scroll effect
+  // Dynamic header
+  const header = document.querySelector('custom-header');
   window.addEventListener('scroll', function() {
-    const navbar = document.querySelector('custom-navbar').shadowRoot.querySelector('nav');
-    if (window.scrollY > 50) {
-      navbar.style.background = 'rgba(0,0,0,0.9)';
+    if (window.scrollY > 100) {
+      header.shadowRoot.host.style.background = 'rgba(0, 0, 0, 0.95)';
+      header.shadowRoot.host.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.3)';
     } else {
-      navbar.style.background = 'rgba(0,0,0,0.5)';
+      header.shadowRoot.host.style.background = 'rgba(0, 0, 0, 0.9)';
+      header.shadowRoot.host.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.1)';
     }
   });
 
-  // Form submission
-  const contactForm = document.querySelector('.contact-form');
-  if (contactForm) {
-    contactForm.addEventListener('submit', function(e) {
+  // Animate elements on scroll
+  const animateOnScroll = function() {
+    const elements = document.querySelectorAll('.grid-item, .about-content');
+    elements.forEach(el => {
+      const elementTop = el.getBoundingClientRect().top;
+      if (elementTop < window.innerHeight - 100) {
+        el.style.opacity = '1';
+        el.style.transform = 'translateY(0)';
+      }
+    });
+  };
+
+  // Set initial state
+  document.querySelectorAll('.grid-item, .about-content').forEach(el => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(20px)';
+    el.style.transition = 'all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)';
+  });
+
+  window.addEventListener('scroll', animateOnScroll);
+  animateOnScroll(); // Run once on load
+
+  // Smooth scrolling
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
       e.preventDefault();
-      alert('Merci pour votre message. Je vous répondrai bientôt!');
-      this.reset();
+      document.querySelector(this.getAttribute('href')).scrollIntoView({
+        behavior: 'smooth'
+      });
     });
-  }
-});
+  });
+});

style.css

@@ -1,94 +1,171 @@
+
 /* Base Styles */
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --primary: #ff4d4d;
+  --secondary: #f9cb28;
+  --dark: #101010;
+  --light: #f8f8f8;
+}
+
 body {
   margin: 0;
   padding: 0;
-  font-family: 'aktiv-grotesk', sans-serif;
-  color: #333;
-  line-height: 1.6;
+  font-family: 'Montserrat', sans-serif;
+  color: var(--light);
+  line-height: 1.8;
+  background-color: var(--dark);
+  overflow-x: hidden;
 }
-
 /* Portfolio Grid */
 .portfolio-grid {
   display: grid;
   grid-template-rows: auto auto auto auto;
 }
-
 /* Hero Section */
 .hero {
   height: 100vh;
-  background: #000;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: relative;
+  overflow: hidden;
 }
 
 .hero::before {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255,77,77,0.1) 0%, rgba(0,0,0,0) 70%);
+  animation: pulse 20s infinite alternate;
+}
+
+@keyframes pulse {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
 .hero-content {
-  z-index: 1;
+  z-index: 2;
+  max-width: 1200px;
+  padding: 0 2rem;
 }
 
 .hero h1 {
-  font-size: 4rem;
-  font-weight: 300;
-  letter-spacing: 5px;
-  margin-bottom: 1rem;
+  font-size: 6rem;
+  font-weight: 700;
+  letter-spacing: 8px;
+  margin-bottom: 2rem;
+  font-family: 'Bebas Neue', sans-serif;
+  text-transform: uppercase;
+  background: linear-gradient(90deg, var(--primary), var(--secondary));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  line-height: 1;
+  margin-bottom: 2rem;
 }
 
-.subtitle {
+.hero p {
   font-size: 1.2rem;
-  letter-spacing: 3px;
-  opacity: 0.8;
+  max-width: 600px;
+  margin: 0 auto 3rem;
+  opacity: 0.9;
 }
 
+.subtitle {
+  font-size: 1.4rem;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  display: inline-block;
+  margin-bottom: 3rem;
+  position: relative;
+}
+
+.subtitle::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100px;
+  height: 3px;
+  background: linear-gradient(90deg, var(--primary), var(--secondary));
+}
 /* Gallery Grid */
 .gallery {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 0;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 500px;
+  gap: 0;
 }
 
 .grid-item {
   position: relative;
-  aspect-ratio: 1/1;
   overflow: hidden;
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
+.grid-item:nth-child(1) { grid-column: span 2; }
+.grid-item:nth-child(5) { grid-column: span 2; }
+
 .grid-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.5s ease;
+  filter: grayscale(100%) contrast(120%);
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.grid-item:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
 
 .grid-item:hover img {
-  transform: scale(1.05);
+  filter: grayscale(0%) contrast(100%);
+  transform: scale(1.1);
 }
 
 .overlay {
   position: absolute;
-  bottom: 2rem;
-  left: 2rem;
+  bottom: 3rem;
+  left: 3rem;
   color: white;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transform: translateY(20px);
+  z-index: 2;
 }
 
 .grid-item:hover .overlay {
   opacity: 1;
+  transform: translateY(0);
+}
+
+.overlay .title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
 }
 
+.overlay .category {
+  font-size: 0.9rem;
+  letter-spacing: 2px;
+  display: inline-block;
+  padding: 0.2rem 1rem;
+  background: linear-gradient(90deg, var(--primary), var(--secondary));
+}
 /* About Section */
 .about {
   display: grid;