Update index.html

index.html

@@ -10,81 +10,72 @@
             padding: 0;
             box-sizing: border-box;
         }
-
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
+            background: linear-gradient(135deg, #fef6e4 0%, #fff8f0 100%);
             min-height: 100vh;
             overflow-x: hidden;
             cursor: default;
         }
-
         .container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 40px 20px;
         }
-
-        /* Header Section */
         .header {
             text-align: center;
-            color: white;
+            color: #1f2937;
             margin-bottom: 60px;
             animation: fadeInDown 1s ease-out;
         }
-
         .header h1 {
             font-size: 4rem;
             font-weight: 800;
             margin-bottom: 10px;
-            text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+            background: linear-gradient(90deg, #ff9d00 0%, #ffb347 50%, #ff6b6b 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
             letter-spacing: -1px;
         }
-
         .header .subtitle {
             font-size: 1.5rem;
-            opacity: 0.95;
-            font-weight: 300;
-            letter-spacing: 1px;
+            color: #6b7280;
+            font-weight: 400;
+            letter-spacing: 0.5px;
         }
-
         .divider {
             width: 100px;
             height: 4px;
-            background: white;
+            background: linear-gradient(90deg, #ff9d00, #ffb347);
             margin: 30px auto;
             border-radius: 2px;
             animation: expandWidth 1s ease-out 0.5s both;
         }
-
-        /* Tech Stack Section */
         .tech-stack-section {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 30px;
+            background: white;
+            border-radius: 24px;
             padding: 50px 40px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+            border: 1px solid #f3f4f6;
             animation: fadeInUp 1s ease-out 0.3s both;
         }
-
         .tech-stack-section h2 {
             text-align: center;
             font-size: 2.5rem;
-            color: #333;
+            color: #1f2937;
             margin-bottom: 20px;
             font-weight: 700;
         }
-
         .tech-stack-section .description {
             text-align: center;
-            color: #666;
+            color: #6b7280;
             font-size: 1.1rem;
             margin-bottom: 50px;
             max-width: 700px;
             margin-left: auto;
             margin-right: auto;
         }
-
-        /* 3D Interactive Tech Stack Grid */
         .tech-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -92,21 +83,20 @@
             perspective: 1000px;
             margin-bottom: 40px;
         }
-
         .tech-card {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: white;
+            border: 2px solid #e5e7eb;
             border-radius: 20px;
             padding: 40px 20px;
             text-align: center;
-            color: white;
+            color: #1f2937;
             transition: all 0.3s ease;
             transform-style: preserve-3d;
             cursor: pointer;
             position: relative;
             overflow: hidden;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
         }
-
         .tech-card::before {
             content: '';
             position: absolute;
@@ -114,113 +104,102 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
+            background: linear-gradient(135deg, rgba(255, 157, 0, 0.05), rgba(255, 179, 71, 0.05));
             opacity: 0;
             transition: opacity 0.3s ease;
         }
-
         .tech-card:hover::before {
             opacity: 1;
         }
-
         .tech-card:hover {
             transform: translateY(-10px) scale(1.05);
-            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+            border-color: #ff9d00;
         }
-
         .tech-icon {
-            font-size: 4rem;
-            margin-bottom: 20px;
-            display: inline-block;
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             transition: transform 0.3s ease;
         }
-
+        .tech-icon img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
         .tech-card:hover .tech-icon {
             transform: rotateY(360deg) scale(1.2);
         }
-
         .tech-name {
             font-size: 1.5rem;
             font-weight: 700;
             margin-bottom: 10px;
+            color: #1f2937;
         }
-
         .tech-description {
             font-size: 0.9rem;
-            opacity: 0.9;
+            color: #6b7280;
             line-height: 1.5;
         }
-
-        /* Color variants for different tech */
-        .tech-card.pytorch {
-            background: linear-gradient(135deg, #EE4C2C 0%, #FF6B45 100%);
+        .tech-card.pytorch .tech-icon img {
+            filter: hue-rotate(0deg);
         }
-
-        .tech-card.tensorflow {
-            background: linear-gradient(135deg, #FF6F00 0%, #FF8F00 100%);
+        .tech-card.tensorflow .tech-icon img {
+            filter: hue-rotate(0deg);
         }
-
-        .tech-card.numpy {
-            background: linear-gradient(135deg, #013243 0%, #4DABCF 100%);
+        .tech-card.numpy .tech-icon img {
+            filter: hue-rotate(0deg);
         }
-
-        .tech-card.pandas {
-            background: linear-gradient(135deg, #150458 0%, #3B0A78 100%);
+        .tech-card.pandas .tech-icon img {
+            filter: hue-rotate(0deg);
         }
-
-        .tech-card.jax {
-            background: linear-gradient(135deg, #5E4FA2 0%, #8C6BB1 100%);
+        .tech-card.jax .tech-icon img {
+            filter: hue-rotate(0deg);
         }
-
-        .tech-card.cuda {
-            background: linear-gradient(135deg, #76B900 0%, #8ED100 100%);
+        .tech-card.cuda .tech-icon img {
+            filter: hue-rotate(0deg);
         }
-
-        /* Stats Section */
         .stats-section {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 20px;
             margin-top: 50px;
         }
-
         .stat-card {
-            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            background: linear-gradient(135deg, #ff9d00 0%, #ffb347 100%);
             padding: 30px;
             border-radius: 15px;
             text-align: center;
             color: white;
             transition: transform 0.3s ease;
+            box-shadow: 0 4px 12px rgba(255, 157, 0, 0.25);
         }
-
         .stat-card:hover {
             transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(255, 157, 0, 0.35);
         }
-
         .stat-number {
             font-size: 3rem;
             font-weight: 800;
             margin-bottom: 10px;
         }
-
         .stat-label {
             font-size: 1rem;
-            opacity: 0.9;
+            opacity: 0.95;
             text-transform: uppercase;
             letter-spacing: 1px;
+            font-weight: 600;
         }
-
-        /* Floating Animation */
         @keyframes float {
             0%, 100% { transform: translateY(0px); }
             50% { transform: translateY(-20px); }
         }
-
         .floating {
             animation: float 3s ease-in-out infinite;
         }
-
-        /* Fade In Animations */
         @keyframes fadeInDown {
             from {
                 opacity: 0;
@@ -231,7 +210,6 @@
                 transform: translateY(0);
             }
         }
-
         @keyframes fadeInUp {
             from {
                 opacity: 0;
@@ -242,52 +220,36 @@
                 transform: translateY(0);
             }
         }
-
         @keyframes expandWidth {
-            from {
-                width: 0;
-            }
-            to {
-                width: 100px;
-            }
+            from { width: 0; }
+            to { width: 100px; }
         }
-
-        /* Footer */
         .footer {
             text-align: center;
-            color: white;
+            color: #6b7280;
             margin-top: 60px;
             padding: 30px;
             font-size: 1rem;
-            opacity: 0.9;
         }
-
         .footer a {
-            color: white;
+            color: #ff9d00;
             text-decoration: none;
             font-weight: 600;
-            border-bottom: 2px solid white;
-            transition: opacity 0.3s ease;
+            transition: color 0.3s ease;
         }
-
         .footer a:hover {
-            opacity: 0.7;
+            color: #ff8800;
         }
-
-        /* Responsive Design */
         @media (max-width: 768px) {
             .header h1 {
                 font-size: 2.5rem;
             }
-            
             .header .subtitle {
                 font-size: 1.2rem;
             }
-
             .tech-stack-section {
                 padding: 30px 20px;
             }
-
             .tech-grid {
                 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                 gap: 20px;
@@ -297,14 +259,12 @@
 </head>
 <body>
     <div class="container">
-        <!-- Header -->
         <div class="header">
             <h1 class="floating">💻 Coding Club - RVCE</h1>
             <div class="divider"></div>
             <p class="subtitle">Building the Future, One Line of Code at a Time</p>
         </div>
 
-        <!-- Tech Stack Section -->
         <div class="tech-stack-section">
             <h2>🚀 Our Tech Stack</h2>
             <p class="description">
@@ -313,43 +273,54 @@
 
             <div class="tech-grid" id="techGrid">
                 <div class="tech-card pytorch" data-tilt>
-                    <div class="tech-icon">🔥</div>
+                    <div class="tech-icon">
+                        <img src="https://www.vectorlogo.zone/logos/pytorch/pytorch-icon.svg" alt="PyTorch">
+                    </div>
                     <div class="tech-name">PyTorch</div>
                     <div class="tech-description">Deep Learning Framework</div>
                 </div>
 
                 <div class="tech-card tensorflow" data-tilt>
-                    <div class="tech-icon">🧠</div>
+                    <div class="tech-icon">
+                        <img src="https://www.vectorlogo.zone/logos/tensorflow/tensorflow-icon.svg" alt="TensorFlow">
+                    </div>
                     <div class="tech-name">TensorFlow</div>
                     <div class="tech-description">ML Platform</div>
                 </div>
 
                 <div class="tech-card numpy" data-tilt>
-                    <div class="tech-icon">🔢</div>
+                    <div class="tech-icon">
+                        <img src="https://www.vectorlogo.zone/logos/numpy/numpy-icon.svg" alt="NumPy">
+                    </div>
                     <div class="tech-name">NumPy</div>
                     <div class="tech-description">Numerical Computing</div>
                 </div>
 
                 <div class="tech-card pandas" data-tilt>
-                    <div class="tech-icon">🐼</div>
+                    <div class="tech-icon">
+                        <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/pandas/pandas-original.svg" alt="Pandas">
+                    </div>
                     <div class="tech-name">Pandas</div>
                     <div class="tech-description">Data Analysis</div>
                 </div>
 
                 <div class="tech-card jax" data-tilt>
-                    <div class="tech-icon">⚡</div>
+                    <div class="tech-icon">
+                        <img src="https://raw.githubusercontent.com/google/jax/main/images/jax_logo_250px.png" alt="JAX">
+                    </div>
                     <div class="tech-name">JAX</div>
                     <div class="tech-description">High-Performance ML</div>
                 </div>
 
                 <div class="tech-card cuda" data-tilt>
-                    <div class="tech-icon">🎮</div>
+                    <div class="tech-icon">
+                        <img src="https://www.vectorlogo.zone/logos/nvidia/nvidia-icon.svg" alt="CUDA">
+                    </div>
                     <div class="tech-name">CUDA</div>
                     <div class="tech-description">GPU Acceleration</div>
                 </div>
             </div>
 
-            <!-- Stats Section -->
             <div class="stats-section">
                 <div class="stat-card">
                     <div class="stat-number">150+</div>
@@ -370,7 +341,6 @@
             </div>
         </div>
 
-        <!-- Footer -->
         <div class="footer">
             <p>🎓 RV College of Engineering | Bengaluru, Karnataka</p>
             <p style="margin-top: 15px;">
@@ -381,58 +351,33 @@
     </div>
 
     <script>
-        // 3D Tilt Effect on Mouse Move
         const cards = document.querySelectorAll('[data-tilt]');
-
         cards.forEach(card => {
             card.addEventListener('mousemove', handleTilt);
             card.addEventListener('mouseleave', resetTilt);
         });
-
         function handleTilt(e) {
             const card = e.currentTarget;
             const rect = card.getBoundingClientRect();
             const x = e.clientX - rect.left;
             const y = e.clientY - rect.top;
-            
             const centerX = rect.width / 2;
             const centerY = rect.height / 2;
-            
             const rotateX = (y - centerY) / 10;
             const rotateY = (centerX - x) / 10;
-            
-            card.style.transform = `
-                perspective(1000px)
-                rotateX(${rotateX}deg)
-                rotateY(${rotateY}deg)
-                scale3d(1.05, 1.05, 1.05)
-            `;
+            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
         }
-
         function resetTilt(e) {
             const card = e.currentTarget;
-            card.style.transform = `
-                perspective(1000px)
-                rotateX(0deg)
-                rotateY(0deg)
-                scale3d(1, 1, 1)
-            `;
+            card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
         }
-
-        // Add subtle parallax effect to header on scroll
         window.addEventListener('scroll', () => {
             const header = document.querySelector('.header');
             const scrolled = window.pageYOffset;
             header.style.transform = `translateY(${scrolled * 0.5}px)`;
             header.style.opacity = 1 - (scrolled / 500);
         });
-
-        // Animate stats on scroll into view
-        const observerOptions = {
-            threshold: 0.5,
-            rootMargin: '0px'
-        };
-
+        const observerOptions = { threshold: 0.5, rootMargin: '0px' };
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -440,12 +385,9 @@
                 }
             });
         }, observerOptions);
-
         document.querySelectorAll('.stat-card').forEach(card => {
             observer.observe(card);
         });
-
-        // Add click effect to cards
         cards.forEach(card => {
             card.addEventListener('click', function() {
                 this.style.animation = 'none';