From 66300c7d30ed2c8fb79114c93a4bd30fed1edb46 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Fri, 31 Oct 2025 17:41:45 +0000
Subject: [PATCH] feat: add smooth animations for CV version toggle

- Add fadeInGrow animation: elements smoothly grow and fade in
- Add fadeOutShrink animation: elements smoothly shrink and fade out
- Apply animations to .long-only and .short-desc elements
- 0.3s duration with ease-in-out timing for smooth transitions
- ScaleY transform creates natural vertical grow/shrink effect
- Overflow hidden prevents layout jumps during animation

When switching between short/long CV versions:
- Content now smoothly transitions instead of instantly appearing
- Text grows when switching to long version
- Text shrinks when switching to short version
- Improved user experience with visual feedback
---
 static/css/main.css | 45 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 2274af4..4a7c0f2 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -438,27 +438,68 @@ footer {
 }
 
 
-/* Short CV - Hide detailed content */
+/* CV Version Toggle Animations */
+@keyframes fadeInGrow {
+    from {
+        opacity: 0;
+        max-height: 0;
+        transform: scaleY(0.8);
+        transform-origin: top;
+    }
+    to {
+        opacity: 1;
+        max-height: 5000px;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes fadeOutShrink {
+    from {
+        opacity: 1;
+        max-height: 5000px;
+        transform: scaleY(1);
+    }
+    to {
+        opacity: 0;
+        max-height: 0;
+        transform: scaleY(0.8);
+        transform-origin: top;
+    }
+}
+
+/* Elements that appear/disappear */
+.long-only,
+.short-desc {
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+}
+
+/* Short CV - Hide detailed content with animation */
 .cv-short .long-only {
     display: none;
+    animation: fadeOutShrink 0.3s ease-in-out;
 }
 
 .cv-short .short-desc {
     display: block;
+    animation: fadeInGrow 0.3s ease-in-out;
 }
 
-/* Long CV - Hide short descriptions */
+/* Long CV - Hide short descriptions with animation */
 .cv-long .short-desc,
 .short-desc {
     display: none;
+    animation: fadeOutShrink 0.3s ease-in-out;
 }
 
 .cv-long .long-only {
     display: block;
+    animation: fadeInGrow 0.3s ease-in-out;
 }
 
 .cv-long .responsibilities {
     display: block;
+    animation: fadeInGrow 0.3s ease-in-out;
 }
 
 /* Responsive - tablet/mobile */