Add entrance animations for project cards and sponsor items

- Added fade-in and scale animations for project cards
- Added fade-in and scale animations for sponsor items
- Updated JavaScript to observe and trigger animations on scroll
- Animations are staggered for a cascading effect
- Maintains consistency with existing title animations

Author: sunner

home/main.js

@@ -334,7 +334,7 @@
         });
 
         // Observe all elements with reveal classes
-        document.querySelectorAll('.reveal, .scale-reveal, .code-reveal').forEach(element => {
+        document.querySelectorAll('.reveal, .scale-reveal, .code-reveal, .project-card, .sponsor-item').forEach(element => {
             revealObserver.observe(element);
         });
     }
@@ -445,7 +445,7 @@
 
     // Performance optimization for animations
     function optimizeAnimationPerformance() {
-        const animatedElements = document.querySelectorAll('.reveal, .scale-reveal, .code-reveal');
+        const animatedElements = document.querySelectorAll('.reveal, .scale-reveal, .code-reveal, .project-card, .sponsor-item');
 
         const performanceObserver = new IntersectionObserver((entries) => {
             entries.forEach(entry => {

home/styles.css

@@ -203,7 +203,6 @@ main {
     border-radius: 8px;
     padding: 1.5rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    transition: all 0.3s ease;
     text-decoration: none;
     color: inherit;
     display: block;
@@ -297,8 +296,6 @@ main {
 
 .sponsor-item {
     display: inline-block;
-    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    opacity: 0.9;
 }
 
 .sponsor-item:hover {
@@ -821,11 +818,7 @@ header {
     }
 }
 
-/* Enhanced project cards */
-.project-card {
-    will-change: transform, box-shadow;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
+/* Enhanced project cards hover state */
 
 .project-card:hover {
     transform: translateY(-4px);
@@ -902,6 +895,33 @@ header {
     transform: translateY(0);
 }
 
+/* Project cards entrance animation */
+.project-card {
+    opacity: 0;
+    transform: translateY(30px) scale(0.95);
+    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.2s ease;
+    will-change: transform, opacity;
+}
+
+.project-card.revealed {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+}
+
+/* Sponsor items entrance animation */
+.sponsor-item {
+    opacity: 0;
+    transform: translateY(30px) scale(0.9);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+    will-change: transform, opacity;
+}
+
+.sponsor-item.revealed {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+}
+
+
 /* Scale reveal for cards */
 .scale-reveal {
     opacity: 0;