feat: hero section animations and spacing, urgent banner style

index.html

@@ -71,23 +71,40 @@
     </div>
   </header>
 
-  <main class="container">
+  <aside class="banner" role="note" aria-label="Annonce d'emploi urgente">
-    <aside class="banner reveal" role="note" aria-label="Annonce d'emploi urgente">
+    <div class="container">
       <span class="badge-urgent">Urgent</span>
       <span>À la recherche d'opportunités <strong>CDI, CDD, Freelance </strong>en développement
-        <strong>Back</strong>, <strong>Front</strong>, <strong>DevOps</strong>, etc.</span>
+        <strong>Back</strong>, <strong>Front</strong>, <strong>DevOps</strong>, etc. dans toute la France et à
-      <a class="btn primary" href="#contact">↓</a>
+        l'international.</span>
+      <a class="btn primary" href="#contact">Contact</a>
+    </div>
   </aside>
 
-    <section id="about" class="hero reveal" aria-labelledby="hero-title">
+  <main class="container">
+    <section id="about" class="hero hero-fullscreen" aria-labelledby="hero-title">
       <div class="hero-card">
-        <p class="eyebrow">Développeur web fullstack</p>
+        <p class="eyebrow animate-fade-in">Développeur web fullstack</p>
-        <h1 id="hero-title">Je conçois, développe et déploie des applications web performantes et maintenables.</h1>
+        <h1 id="hero-title" class="animate-slide-up">
-        <p>
+          <span class="word">Je</span>
-          Diplômé d'un Bachelor Développeur Web à l'ESD Paris, autoentrepreneur et passionné d'informatique.
+          <span class="word">conçois,</span>
-          Actuellement à l'écoute de nouvelles opportunités.
+          <span class="word">développe</span>
+          <span class="word">et</span>
+          <span class="word">déploie</span>
+          <span class="word">des</span>
+          <span class="word">applications</span>
+          <span class="word">web</span>
+          <span class="word">performantes</span>
+          <span class="word">et</span>
+          <span class="word">maintenables.</span>
+        </h1>
+        <p class="animate-fade-in-delayed">
+          Diplômé d'un Bachelor Développeur Web à l'ESD Paris et récemment en poste chez Dollen, je porte une attention
+          particulière à la maintenabilité et aux bonnes pratiques. Passionné d'informatique, je m'investis
+          également dans des projets personnels et des missions en freelance pour continuer à progresser et résoudre des
+          problèmes.
         </p>
-        <div class="cta">
+        <div class="cta animate-fade-in-delayed">
           <a class="btn primary" href="#projects">Voir mes projets</a>
           <a class="btn" href="#contact">Me contacter</a>
         </div>

style.css

@@ -38,9 +38,19 @@ body {
     padding: 24px;
 }
 
+main.container {
+    padding: 0;
+}
+
+main.container > section:not(.hero-fullscreen),
+main.container > .card {
+    padding: 24px;
+}
+
 /* Top Bar */
 .site-header {
-    position: sticky;
+    position: fixed;
+    width: 100%;
     top: 0;
     z-index: 20;
     backdrop-filter: saturate(1.2) blur(6px);
@@ -169,6 +179,14 @@ body {
     text-align: center;
 }
 
+.hero-fullscreen {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+}
+
 .hero-card {
     max-width: 800px;
     margin: 0 auto;
@@ -193,6 +211,78 @@ body {
     margin-bottom: 1.5rem;
 }
 
+.hero h1 .word {
+    display: inline-block;
+    opacity: 0;
+    animation: slideUpWord 0.6s ease forwards;
+}
+
+.hero h1 .word:nth-child(1) {
+    animation-delay: 0.1s;
+}
+.hero h1 .word:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.hero h1 .word:nth-child(3) {
+    animation-delay: 0.3s;
+}
+.hero h1 .word:nth-child(4) {
+    animation-delay: 0.4s;
+}
+.hero h1 .word:nth-child(5) {
+    animation-delay: 0.5s;
+}
+.hero h1 .word:nth-child(6) {
+    animation-delay: 0.6s;
+}
+.hero h1 .word:nth-child(7) {
+    animation-delay: 0.7s;
+}
+.hero h1 .word:nth-child(8) {
+    animation-delay: 0.8s;
+}
+.hero h1 .word:nth-child(9) {
+    animation-delay: 0.9s;
+}
+.hero h1 .word:nth-child(10) {
+    animation-delay: 1s;
+}
+.hero h1 .word:nth-child(11) {
+    animation-delay: 1.1s;
+}
+
+@keyframes slideUpWord {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.animate-fade-in {
+    opacity: 0;
+    animation: fadeIn 0.8s ease forwards;
+    animation-delay: 0.2s;
+}
+
+.animate-fade-in-delayed {
+    opacity: 0;
+    animation: fadeIn 0.8s ease forwards;
+    animation-delay: 1.3s;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
 .hero p {
     margin: 0 0 14px;
     margin-bottom: 2rem;
@@ -214,7 +304,15 @@ body {
 
 /* Sections */
 section {
-    margin-top: 28px;
+    margin-top: 48px;
+}
+
+section.hero-fullscreen {
+    margin-top: 0;
+}
+
+section:first-of-type {
+    margin-top: 0;
 }
 
 .card {
@@ -222,6 +320,7 @@ section {
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 18px;
+    margin: 24px 8px;
 }
 
 h2 {
@@ -358,6 +457,7 @@ a {
     text-decoration-color: var(--accent);
     text-decoration-thickness: 0.08em;
     text-underline-offset: 2px;
+    transition: color 0.2s ease, text-decoration-color 0.2s ease;
 }
 
 a:hover {
@@ -369,16 +469,46 @@ a:visited {
     color: var(--accent);
 }
 
+a:visited:hover {
+    color: var(--accent-2);
+}
+
 /* Urgent banner */
 .banner {
+    opacity: 0;
+    transform: translateY(-100%);
+    animation: slideInFromTop 0.6s ease forwards;
+    animation-delay: 1.5s;
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 15;
+    pointer-events: none;
+    margin-top: 82px;
+}
+
+.banner .container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
     background: var(--surface-2);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 12px 16px;
-    display: flex;
+    backdrop-filter: saturate(1.2) blur(6px);
-    align-items: center;
+    pointer-events: all;
-    gap: 12px;
+    max-width: 1084px;
-    margin-top: 18px;
+}
+
+@keyframes slideInFromTop {
+    from {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .badge-urgent {
@@ -396,22 +526,34 @@ a:visited {
     margin-left: auto;
 }
 
-/* Links */
+/* Buttons */
-a {
+.btn {
-    color: var(--accent);
+    display: inline-block;
-    text-decoration: underline;
+    padding: 10px 20px;
-    text-decoration-color: var(--accent);
+    border-radius: 10px;
-    text-decoration-thickness: 0.08em;
+    text-decoration: none;
-    text-underline-offset: 2px;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--foreground);
 }
 
-a:hover {
+.btn:hover {
-    color: var(--accent-2);
+    background: var(--surface-2);
-    text-decoration-color: var(--accent-2);
+    transform: translateY(-2px);
 }
 
-a:visited {
+.btn.primary {
-    color: var(--accent);
+    background: var(--accent);
+    color: var(--background);
+    border-color: var(--accent);
+}
+
+.btn.primary:hover {
+    background: var(--accent-2);
+    border-color: var(--accent-2);
+    color: var(--background);
 }
 
 /* Clickable project cards */
@@ -468,6 +610,24 @@ footer .to-top {
         padding: 16px;
     }
 
+    main.container > section:not(.hero-fullscreen),
+    main.container > .card {
+        padding: 16px;
+    }
+
+    .hero-fullscreen {
+        min-height: calc(100vh - 70px);
+        padding: 24px 16px;
+    }
+
+    .banner {
+        display: none;
+    }
+
+    section {
+        margin-top: 32px;
+    }
+
     .menu-toggle {
         display: inline-flex;
     }