Fix: Education section certificate & profile section style changed

Author: SakthiProgrammer

index.html

@@ -297,7 +297,7 @@ <h2 class="section-title animate-on-scroll">Education</h2>
                     <div class="edu-right">
                         <!-- <span class="edu-right-arrow"></span> -->
                         <div clas="right-container-arrow-border"><span class="right-container-arrow"></span></div>
- 
+
                         <div class="edu-card">
                             <h3>B.Sc in Computer Science</h3>
                             <h4>KK GOVT. ARTS & SCIENCE COLLEGE</h4>
@@ -328,52 +328,52 @@ <h4>GOVT. HR SEC SCHOOL</h4>
 
 
             <!-- Achievements & Profiles Section -->
-            <div class="achievements-subsection">
-                <h3 class="subsection-title animate-on-scroll">Achievements & Profiles</h3>
-                <div class="achievements-grid">
+            <h3 class="subsection-title animate-on-scroll">Achievements & Profiles</h3>
+            <div class="achievements-subsection achievements-slider">
+
+                    <!-- LeetCode Card -->
                     <div class="achievement-card animate-on-scroll">
-                        <iframe class="leetcode-frame"
-                            src="https://leetcard.jacoblin.cool/Sakthivel_D47?theme=unicorn&extension=activity"
-                            title="LeetCode Profile Card">
-                        </iframe>
+                        <div class="achievement-image">
+                            <iframe class="leetcode-frame"
+                                src="https://leetcard.jacoblin.cool/Sakthivel_D47?theme=unicorn&extension=activity"
+                                title="LeetCode Profile Card">
+                            </iframe>
+                        </div>
+                        <div class="achievement-info">
+                            <h4>LeetCode</h4>
+                        </div>
                     </div>
+
+                    <!-- HackerRank Card -->
                     <div class="achievement-card animate-on-scroll">
-                        <div class="achievement-icon">
-                            <div class="icon-database">🗄️</div>
-                        </div>
-                        <h4>HackerRank Profile</h4>
-                        <p>Competitive Programming</p>
-                        <a href="#" class="achievement-link">
-                            <span class="external-link">🔗</span>
-                            Visit Profile
-                        </a>
+                        <div class="achievement-image">
+                            <img src="https://hrcdn.net/fcore/assets/brand/logo-new-white-green-a5cb16e0ae.svg"
+                                alt="HackerRank Logo">
+                        </div>
+                        <div class="achievement-info">
+                            <h4>HackerRank</h4>
+                        </div>
                     </div>
+
+                    <!-- Code Ninja Card -->
                     <div class="achievement-card animate-on-scroll">
-                        <div class="achievement-icon">
-                            <div class="icon-award">🏆</div>
-                        </div>
-                        <h4>Code Ninja Profile</h4>
-                        <p>Coding Challenges</p>
-                        <a href="#" class="achievement-link">
-                            <span class="external-link">🔗</span>
-                            Visit Profile
-                        </a>
+                        <div class="achievement-image">
+                            <img src="https://cdn-icons-png.flaticon.com/512/1055/1055687.png" alt="Code Ninja Logo">
+                        </div>
+                        <div class="achievement-info">
+                            <h4>Code Ninja</h4>
+                        </div>
                     </div>
-                </div>
-            </div>
 
-            <!-- Coursework Section -->
-            <div class="coursework-subsection">
-                <h3 class="subsection-title animate-on-scroll">Coursework</h3>
-                <div class="coursework-card animate-on-scroll">
-                    <h4>Java FullStack Development</h4>
-                    <p>SLA, Chennai | Sep 2024 - Jan 2025</p>
-                    <div class="coursework-details">
-                        <span class="coursework-tag">Java (basics)</span>
-                        <span class="coursework-tag">Java Fundamentals</span>
-                        <span class="coursework-tag">Full Stack Development</span>
+                    <!-- hacker rant certificate -->
+                     <div class="achievement-card animate-on-scroll">
+                        <iframe src="https://www.hackerrank.com/certificates/iframe/80f8f666bd94" 
+                            title="HackerRank Java Certificate" 
+                            frameborder="0" 
+                            class="certificate-frame"></iframe>
+                        <h4>Java Certificate</h4>
                     </div>
-                </div>
+
             </div>
         </div>
     </section>

script.js

@@ -80,6 +80,21 @@ document.addEventListener('DOMContentLoaded', function () {
     }, observerOptions);
 
 
+document.querySelectorAll(".achievement-card").forEach(card => {
+  card.addEventListener("mouseenter", () => {
+    card.style.transform = "scale(1.03)";
+    card.style.transition = "transform 0.25s ease, box-shadow 0.25s ease";
+    card.style.boxShadow = "0 12px 30px rgba(0,0,0,0.15)";
+    card.style.zIndex = "5";
+  });
+
+  card.addEventListener("mouseleave", () => {
+    card.style.transform = "scale(1)";
+    card.style.transition = "transform 0.25s ease, box-shadow 0.25s ease";
+    card.style.boxShadow = "0 6px 15px rgba(0,0,0,0.1)";
+    card.style.zIndex = "1";
+  });
+});
 
 
     // Observe all elements with animate-on-scroll class
@@ -179,7 +194,7 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     // Add some interactive elements
-    const cards = document.querySelectorAll('.education-card, .achievement-card, .project-card');
+    const cards = document.querySelectorAll('.education-card, .project-card');
     cards.forEach(card => {
         card.addEventListener('mouseenter', function () {
             this.style.transform = 'translateY(-8px) rotate(1deg)';