Feat: Experince Timeline Style added

Author: SakthiProgrammer

index.html

@@ -35,7 +35,7 @@
     <link href='https://unpkg.com/[email protected]/dist/boxicons.js' rel='stylesheet'>
 
     <!-- ✅ Canonical link -->
-    <link rel="canonical" href="https://sakthiprogrammer.github.io/Sakthivel-Portfolio/">
+    <link rel="canonical" href="https://sakthivel-app.wep.app/">
 
     <!-- ✅ Open Graph for social media (Facebook, LinkedIn, etc.) -->
     <meta property="og:title" content="Sakthivel D - Full Stack Developer Portfolio">
@@ -106,7 +106,11 @@ <h2 class="hero-subtitle">
                     I’m a Passionate Software Developer, Problem Solver, and Tech Enthusiast.
                 </p>
 
-                <p class="hero-description">I specialize in Java, Go, C, C++, Vue.js, Flutter, and Data Structures & Algorithms, building scalable and modern applications that solve real-world challenges. I’ve solved 200+ problems on LeetCode, sharpening my problem-solving and algorithmic skills, and I’m always eager to explore new technologies and frameworks. My mission is to transform ideas into powerful, reliable software that makes a real impact.
+                <p class="hero-description">I specialize in Java, Go, C, C++, Vue.js, Flutter, and Data Structures &
+                    Algorithms, building scalable and modern applications that solve real-world challenges. I’ve solved
+                    200+ problems on LeetCode, sharpening my problem-solving and algorithmic skills, and I’m always
+                    eager to explore new technologies and frameworks. My mission is to transform ideas into powerful,
+                    reliable software that makes a real impact.
                 </p>
             </div>
 
@@ -131,30 +135,35 @@ <h2 class="hero-subtitle">
 
     <!-- Experience Section -->
     <section id="experience" class="section experience">
-        <div class="container">
-            <h2 class="section-title animate-on-scroll">Experience</h2>
-            <div class="timeline">
+        <div class="timeline-container">
+            <h2 class="section-title animate-on-scroll">Experience</h2> <!--animate-on-scroll-->
+            <div class="timeline animate-on-scroll">
                 <!-- Experience Item -->
                 <!-- <div class="timeline-dot"></div> -->
-                <div class="timeline-card">
-                    <div class="circle"><img class="timeline-logo" src="/docs/flattrade (1).png" alt="Flattrade Logo"></div>
-                    <h3>Software Developer Executive</h3>
-                    <h4>Flattrade Broking Private Limited</h4>
-                    <span class="timeline-date">Dec 2024 - May 2025 (6 Months) | Chennai, India</span>
-                    <ul class="experience-list">
-                        <li>Developed and optimized 3+ internal tools using Go APIs and automated email
-                            schedulers,
-                            resulting in a 30% reduction in manual operations and improved client reporting
-                            efficiency.</li>
-                        <li>Developed scalable backend services using Go, improving response times by 40%
-                            through
-                            clean architecture and optimized queries.</li>
-                        <li>Built interactive user interfaces using Vue.js and mobile modules with Flutter.</li>
-                        <li>Collaborated with cross-functional teams to debug issues, refactor code, and improve
-                            UI
-                            responsiveness.</li>
-                        <li>Followed Git-based workflows and maintained structured commit practices.</li>
-                    </ul>
+                <div class="padding-container right-container animate-bottom">
+                    <div class="timeline-card">
+                        <div class="circle"><img class="timeline-logo" src="docs/flattrade (1).png"
+                                alt="Flattrade Logo"></div>
+                        <h3>Software Developer Executive</h3>
+                        <h4>Flattrade Broking Private Limited | Chennai, India</h4>
+                        <span class="timeline-date">Dec 2024 - May 2025</span>
+                        <ul class="experience-list">
+                            <li>Developed and optimized 3+ internal tools using Go APIs and automated email
+                                schedulers,
+                                resulting in a 30% reduction in manual operations and improved client reporting
+                                efficiency.</li>
+                            <li>Developed scalable backend services using Go, improving response times by 40%
+                                through
+                                clean architecture and optimized queries.</li>
+                            <li>Built interactive user interfaces using Vue.js and mobile modules with Flutter.</li>
+                            <li>Collaborated with cross-functional teams to debug issues, refactor code, and improve
+                                UI & responsive.
+                            <li>Followed Git-based workflows and maintained structured commit practices.</li>
+                        </ul>
+                        <div clas="right-container-arrow-border"><span class="right-container-arrow"></span></div>
+                        <!-- <span class="left-container-arrow"></span> -->
+
+                    </div>
                 </div>
             </div>
         </div>
@@ -428,7 +437,7 @@ <h2 class="section-title animate-on-scroll">About Me</h2>
                 </div>
                 <div class="about-image animate-on-scroll">
                     <dotlottie-wc src="https://lottie.host/68601e16-9778-425f-883b-dd96750a963f/xT3EIZ8HdA.lottie"
-                        style="height: 300px;" speed="0.5" autoplay loop></dotlottie-wc>
+                        style="height: 300px; width: 300px;" speed="0.5" autoplay loop></dotlottie-wc>
                 </div>
             </div>
         </div>

script.js

@@ -43,6 +43,7 @@ document.addEventListener('DOMContentLoaded', function () {
             navbar.classList.remove('home-style');
         }
 
+        // 🔹 Highlight active section in navbar
         sections.forEach(sectionId => {
             const section = document.getElementById(sectionId);
             if (section) {
@@ -58,10 +59,9 @@ document.addEventListener('DOMContentLoaded', function () {
                     if (activeLink) {
                         activeLink.classList.add('active');
                     }
-                }
 
+                }
             }
-
         });
     });
 
@@ -79,6 +79,9 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     }, observerOptions);
 
+
+
+
     // Observe all elements with animate-on-scroll class
     const elementsToAnimate = document.querySelectorAll('.animate-on-scroll');
     elementsToAnimate.forEach(el => observer.observe(el));
@@ -206,6 +209,11 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+
+
+
+ 
+
 // Utility functions
 function scrollToSection(sectionId) {
     const element = document.getElementById(sectionId);
@@ -242,7 +250,7 @@ function openResume() {
 let clickCount = 0;
 document.querySelector('.logo-text').addEventListener('click', function () {
     clickCount++;
-    if (clickCount === 5) {
+    if (clickCount == 5) {
         this.style.animation = 'bounce 1s ease-in-out';
         setTimeout(() => {
             this.style.animation = '';
@@ -320,24 +328,24 @@ const eraseSpeed = 50; // deleting speed
 const delayBetween = 1500; // pause before deleting
 
 function typeEffect() {
-  const target = document.getElementById("typed-text");
-
-  if (!isDeleting && j <= texts[i].length) {
-    currentText = texts[i].substring(0, j++);
-    target.textContent = currentText;
-    setTimeout(typeEffect, speed);
-  } else if (isDeleting && j >= 0) {
-    currentText = texts[i].substring(0, j--);
-    target.textContent = currentText;
-    setTimeout(typeEffect, eraseSpeed);
-  } else if (!isDeleting && j > texts[i].length) {
-    isDeleting = true;
-    setTimeout(typeEffect, delayBetween);
-  } else if (isDeleting && j < 0) {
-    isDeleting = false;
-    i = (i + 1) % texts.length; // switch text
-    setTimeout(typeEffect, speed);
-  }
+    const target = document.getElementById("typed-text");
+
+    if (!isDeleting && j <= texts[i].length) {
+        currentText = texts[i].substring(0, j++);
+        target.textContent = currentText;
+        setTimeout(typeEffect, speed);
+    } else if (isDeleting && j >= 0) {
+        currentText = texts[i].substring(0, j--);
+        target.textContent = currentText;
+        setTimeout(typeEffect, eraseSpeed);
+    } else if (!isDeleting && j > texts[i].length) {
+        isDeleting = true;
+        setTimeout(typeEffect, delayBetween);
+    } else if (isDeleting && j < 0) {
+        isDeleting = false;
+        i = (i + 1) % texts.length; // switch text
+        setTimeout(typeEffect, speed);
+    }
 }
 
 document.addEventListener("DOMContentLoaded", typeEffect);