feat: Add subtle micro-animations for enhanced UX

- Page load fade-in animation with staggered elements
- Smooth hover effects on links with slide-in backgrounds
- Navigation underline animations and lift effects
- Project card hover with shadow and transform
- Emoji and icon hover animations with scale and rotate
- Staggered list item animations for visual hierarchy
- Enhanced button interactions with ripple effects
- Maintains minimal aesthetic while adding polish
- Mobile-optimized with reduced animation intensity

Author: Debdyut

portfolio/themes/basic/static/css/minimal.css

@@ -1,4 +1,4 @@
-/* Minimal Black & White Design */
+/* Minimal Black & White Design with Micro-Animations */
 * {
   margin: 0;
   padding: 0;
@@ -13,87 +13,164 @@ body {
   max-width: 800px;
   margin: 0 auto;
   padding: 2rem;
+  animation: fadeIn 0.8s ease-out;
 }
 
-/* Typography */
+/* Fade in animation for page load */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Typography with subtle animations */
 h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   margin: 2rem 0 1rem 0;
   border-bottom: 1px solid #000;
   padding-bottom: 0.5rem;
+  transition: border-color 0.3s ease;
 }
 
 h1 {
   font-size: 2rem;
   text-transform: uppercase;
   letter-spacing: 2px;
+  animation: slideInFromLeft 0.6s ease-out;
 }
 
 h2 {
   font-size: 1.5rem;
   margin-top: 3rem;
+  animation: slideInFromLeft 0.8s ease-out;
 }
 
 h3 {
   font-size: 1.2rem;
   border-bottom: 1px dotted #000;
 }
 
+/* Slide in animations */
+@keyframes slideInFromLeft {
+  from { opacity: 0; transform: translateX(-30px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInFromRight {
+  from { opacity: 0; transform: translateX(30px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
 p {
   margin: 1rem 0;
+  animation: fadeInUp 1s ease-out;
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(15px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-/* Links */
+/* Enhanced link animations */
 a {
   color: #000;
   text-decoration: none;
   border-bottom: 1px solid #000;
-  transition: all 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
 }
 
-a:hover {
+a::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
   background: #000;
+  transition: left 0.3s ease;
+  z-index: -1;
+}
+
+a:hover::before {
+  left: 0;
+}
+
+a:hover {
   color: #fff;
   padding: 2px 4px;
+  transform: translateY(-1px);
 }
 
-/* Lists */
+/* Lists with staggered animation */
 ul, ol {
   margin: 1rem 0;
   padding-left: 2rem;
 }
 
 li {
   margin: 0.5rem 0;
+  animation: fadeInLeft 0.6s ease-out;
+  animation-fill-mode: both;
 }
 
-/* Line Art Elements */
+li:nth-child(1) { animation-delay: 0.1s; }
+li:nth-child(2) { animation-delay: 0.2s; }
+li:nth-child(3) { animation-delay: 0.3s; }
+li:nth-child(4) { animation-delay: 0.4s; }
+li:nth-child(5) { animation-delay: 0.5s; }
+
+@keyframes fadeInLeft {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+/* Animated line art elements */
 hr {
   border: none;
   border-top: 1px solid #000;
   margin: 2rem 0;
+  animation: expandWidth 1s ease-out;
 }
 
-/* Code */
+@keyframes expandWidth {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+/* Code with typewriter effect */
 code {
   background: none;
   border: 1px solid #000;
   padding: 2px 4px;
   font-family: inherit;
+  animation: typewriter 0.5s steps(10);
+}
+
+@keyframes typewriter {
+  from { width: 0; }
+  to { width: auto; }
 }
 
 pre {
   border: 1px solid #000;
   padding: 1rem;
   margin: 1rem 0;
   overflow-x: auto;
+  animation: slideInFromRight 0.8s ease-out;
 }
 
-/* Navigation */
+/* Enhanced navigation with hover effects */
 nav {
   border-bottom: 2px solid #000;
   margin-bottom: 2rem;
   padding-bottom: 1rem;
+  animation: slideInFromTop 0.6s ease-out;
+}
+
+@keyframes slideInFromTop {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 nav ul {
@@ -107,37 +184,80 @@ nav a {
   border: none;
   text-transform: uppercase;
   letter-spacing: 1px;
+  position: relative;
+  transition: all 0.3s ease;
 }
 
-/* Project Cards */
+nav a::after {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: #000;
+  transition: width 0.3s ease;
+}
+
+nav a:hover::after {
+  width: 100%;
+}
+
+nav a:hover {
+  transform: translateY(-2px);
+}
+
+/* Project cards with hover animations */
 .project-card {
   border: 1px solid #000;
   margin: 2rem 0;
   padding: 1.5rem;
+  transition: all 0.3s ease;
+  animation: fadeInUp 0.8s ease-out;
+}
+
+.project-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 5px 5px 0px #000;
 }
 
 .project-title {
   border-bottom: 1px dotted #000;
   margin-bottom: 1rem;
+  transition: border-color 0.3s ease;
 }
 
 .tech-stack {
   margin-top: 1rem;
   font-size: 0.9rem;
+  animation: slideInFromRight 1s ease-out;
 }
 
 .tech-stack::before {
   content: "→ ";
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
 }
 
-/* Minimal Form Elements */
+/* Enhanced form elements */
 input, textarea {
   border: 1px solid #000;
   background: #fff;
   padding: 0.5rem;
   font-family: inherit;
   width: 100%;
   margin: 0.5rem 0;
+  transition: all 0.3s ease;
+}
+
+input:focus, textarea:focus {
+  outline: none;
+  border-width: 2px;
+  transform: scale(1.02);
 }
 
 button {
@@ -149,35 +269,79 @@ button {
   font-family: inherit;
   text-transform: uppercase;
   letter-spacing: 1px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
-button:hover {
+button::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
   background: #fff;
+  transition: all 0.3s ease;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+}
+
+button:hover::before {
+  width: 300px;
+  height: 300px;
+}
+
+button:hover {
   color: #000;
-  border: 1px solid #000;
+  transform: translateY(-2px);
 }
 
-/* ASCII Art Style Elements */
+/* ASCII Art Style Elements with animation */
 .ascii-divider::before {
   content: "────────────────────────────────────────";
   display: block;
   text-align: center;
   margin: 2rem 0;
+  animation: drawLine 1.5s ease-out;
+}
+
+@keyframes drawLine {
+  from { width: 0; overflow: hidden; }
+  to { width: 100%; }
 }
 
-/* Black & White Emoji Styling */
+/* Black & White Emoji Styling with subtle animation */
 .emoji {
   filter: grayscale(100%) contrast(200%);
   font-style: normal;
+  transition: transform 0.3s ease;
+  display: inline-block;
+}
+
+.emoji:hover {
+  transform: scale(1.2) rotate(5deg);
 }
 
 .section-icon {
   font-size: 1.2em;
   margin-right: 0.5rem;
   filter: grayscale(100%) contrast(200%);
+  transition: all 0.3s ease;
+  display: inline-block;
+}
+
+.section-icon:hover {
+  transform: scale(1.3) rotate(-5deg);
+  filter: grayscale(100%) contrast(300%);
+}
+
+/* Footer animation */
+footer {
+  animation: fadeInUp 1.2s ease-out;
 }
 
-/* Responsive */
+/* Responsive with maintained animations */
 @media (max-width: 600px) {
   body {
     padding: 1rem;
@@ -191,6 +355,11 @@ button:hover {
   h1 {
     font-size: 1.5rem;
   }
+  
+  /* Reduce animation intensity on mobile */
+  * {
+    animation-duration: 0.3s !important;
+  }
 }
 
 /* Print Styles */
@@ -199,6 +368,12 @@ button:hover {
     max-width: none;
     margin: 0;
     padding: 1rem;
+    animation: none;
+  }
+  
+  *, *::before, *::after {
+    animation: none !important;
+    transition: none !important;
   }
 
   a {