added toggle, changed about(jinja and toml) and style file

config/about.toml

@@ -7,6 +7,8 @@ birthday = "April 7, 2001"
 location = "Tehran, Iran"
 avatar = "./config/assets/avatars/avatar.jpeg"
 username = "neginkheirmand" # <-- github user name
+
+# Long presentation
 presentation = """
 Hello👋😊
 I'm **Negin Kheirmand**, a driven computer engineer with a deep passion for innovation and problem-solving. My journey into technology began at **17** with a milestone achievement—winning second place at **Iran Open 2018** in the **Virtual Rescue League** while still in high school, competing alongside university teams. This experience sparked my enduring commitment to pushing boundaries in **computer science**.
@@ -21,3 +23,8 @@ Beyond technical projects, my role as **Head of Communications** in the **Studen
 
 With a strong foundation in these fields, I’m constantly motivated to expand my knowledge and apply my expertise to tackle cutting-edge challenges and contribute to advancements in **AI** and **machine learning**.
 """
+
+# Short presentation (add this part)
+short_presentation = """
+I'm **Negin Kheirmand**, a passionate computer engineer driven by innovation and problem-solving. My journey began with winning second place at **Iran Open 2018** and has led me to pursue impactful projects in **machine learning**, **graph theory**, and **AI**. I aim to use my knowledge to tackle real-world challenges and contribute to advancements in technology.
+"""

src/css/style.css

@@ -114,6 +114,51 @@
 
 
 
+/* Toggle switch styles */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.toggle-checkbox {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgb(33, 33, 35); /* Default off color */
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  border-radius: 50%;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+}
+
+.toggle-checkbox:checked + .toggle-slider {
+  background-color: rgb(206, 177, 90); /* Color when toggled on */
+}
+
+.toggle-checkbox:checked + .toggle-slider:before {
+  transform: translateX(26px); /* Move the slider to the right */
+}
 
 
 /*-----------------------------------*\

src/jinja/about.jinja

@@ -1,21 +1,37 @@
 <!-- about.jinja -->
-<article class="about  active" data-page="about">
+<article class="about active" data-page="about">
 
   <header>
     <h2 class="h2 article-title">About me</h2>
+
+    <!-- Toggle switch for short/long version -->
+    <label class="toggle-switch">
+      <input type="checkbox" id="about-toggle" class="toggle-checkbox" checked>
+      <span class="toggle-slider"></span>
+    </label>
   </header>
 
   <section class="about-text">
 
-    {% for line in about.presentation.split('\n') %}
-    {% if line.strip() %}
-    <p>{{ line }}</p>
-    {% endif %}
-    {% endfor %}
+    <!-- Long version -->
+    <div id="long-version" style="display: none;">
+      {% for line in about.presentation.split('\n') %}
+        {% if line.strip() %}
+          <p>{{ line }}</p>
+        {% endif %}
+      {% endfor %}
+    </div>
+
+    <!-- Short version -->
+    <div id="short-version">
+      {% for line in about.short_presentation.split('\n') %}
+        {% if line.strip() %}
+          <p>{{ line }}</p>
+        {% endif %}
+      {% endfor %}
+    </div>
 
   </section>
-
-
   <!--
           - service
         -->
@@ -155,4 +171,26 @@
   </section>
   {% endif %}
 
-</article>
+<script>
+    const toggle = document.getElementById("about-toggle");
+    const longVersion = document.getElementById("long-version");
+    const shortVersion = document.getElementById("short-version");
+
+    // Ensure the default is short version
+    if (toggle.checked) {
+      longVersion.style.display = "none";
+      shortVersion.style.display = "block";
+    }
+
+    toggle.addEventListener("change", function() {
+      if (toggle.checked) {
+        longVersion.style.display = "none";
+        shortVersion.style.display = "block";
+      } else {
+        longVersion.style.display = "block";
+        shortVersion.style.display = "none";
+      }
+    });
+  </script>
+
+</article>