add a details button for career section

LuuNa-JD · Oct 21, 2024 · 7efed76 · 7efed76
1 parent 2ee5ac5
commit 7efed76
Showing 1 changed file with 76 additions and 18 deletions.
diff --git a/_includes/sections/career.html b/_includes/sections/career.html
@@ -18,25 +18,32 @@ <h1><span data-i18n="career.my_career">Expériences professionnelles</span></h1>
                       <h2><span data-i18n="career.{{ career.name.i18n }}">{{ career.name.detail }}</span></h2>
                       <p><span data-i18n="career.{{ career.desc.i18n }}">{{ career.desc.detail }}</span></p>
 
+                      <!-- Toggle Button -->
+                      <button class="toggle-button" onclick="toggleDetails(this)">
+                        <i class="fa fa-chevron-down"></i>
+                      </button>
+
                       <!-- Affichage des responsabilités -->
-                      {% if career.responsibilities %}
-                      <h4>Responsabilités :</h4>
-                      <ul>
-                        {% for responsibility in career.responsibilities %}
-                          <li>{{ responsibility }}</li>
-                        {% endfor %}
-                      </ul>
-                      {% endif %}
-
-                      <!-- Affichage des technologies -->
-                      {% if career.technologies %}
-                      <h4>Technologies utilisées :</h4>
-                      <ul>
-                        {% for tech in career.technologies %}
-                          <li>{{ tech }}</li>
-                        {% endfor %}
-                      </ul>
-                      {% endif %}
+                      <div class="details" style="display: none;">
+                        {% if career.responsibilities %}
+                        <h4>Responsabilités :</h4>
+                        <ul>
+                          {% for responsibility in career.responsibilities %}
+                            <li>{{ responsibility }}</li>
+                          {% endfor %}
+                        </ul>
+                        {% endif %}
+
+                        <!-- Affichage des technologies -->
+                        {% if career.technologies %}
+                        <h4>Technologies utilisées :</h4>
+                        <ul>
+                          {% for tech in career.technologies %}
+                            <li>{{ tech }}</li>
+                          {% endfor %}
+                        </ul>
+                        {% endif %}
+                      </div>
 
                       <span class="vertical-date"><span data-i18n="career.{{ career.date.i18n }}"> {{ career.date.detail }} </span>
                       <br/> <small><span data-i18n="career.{{ career.job.i18n }}">{{ career.job.detail }}</span></small> </span>
@@ -47,3 +54,54 @@ <h4>Technologies utilisées :</h4>
       </div>
   </div>
 </div>
+
+<style>
+  .toggle-button {
+    background: none;
+    border: none;
+    color: #3385ff;
+    cursor: pointer;
+    font-size: 1.5em;
+    transition: transform 0.3s;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+
+  .details {
+    display: none;
+    animation: fadeIn 0.5s;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .rotate-up {
+    transform: rotate(180deg);
+  }
+
+  @media (max-width: 768px) {
+    .toggle-button {
+      right: 5px;
+      top: 5px;
+    }
+  }
+</style>
+
+<script>
+function toggleDetails(button) {
+  var details = button.nextElementSibling;
+  var icon = button.querySelector('i');
+
+  if (details.style.display === "none" || details.style.display === "") {
+    details.style.display = "block";
+    details.style.animation = "fadeIn 0.5s";
+    icon.classList.add('rotate-up');
+  } else {
+    details.style.display = "none";
+    icon.classList.remove('rotate-up');
+  }
+}
+</script>