added the video to be on the side of the timeline

Author: rohitdavas

components/timeline.html

@@ -3,19 +3,31 @@
         <h2>Professional Timeline</h2>
         <div class="timeline-content">
             <div class="timeline-item">
-                <h3>AI Software Developer - Captury GmbH</h3>
-                <p class="date">January 2022 - Present</p>
-                <p>Contributing to dataset preparations, handpose tracking, and developing prototypes using Unreal Engine, Unity, and Oculus Quest.</p>
+                <div class="timeline-text">
+                    <h3>AI Software Developer - Captury GmbH</h3>
+                    <p class="date">January 2022 - Present</p>
+                    <p>Contributing to dataset preparations, handpose tracking, and developing prototypes using Unreal Engine, Unity, and Oculus Quest.</p>
+                </div>
             </div>
+            <a href="https://youtu.be/p_7iE6UsSLM?si=i9vZnVBG1XIG_IQ0" target="_blank" class="video-thumbnail">
+                <img src="https://img.youtube.com/vi/p_7iE6UsSLM/maxresdefault.jpg" alt="Project Video">
+                <div class="play-overlay">
+                    <i class="fas fa-play"></i>
+                </div>
+            </a>
             <div class="timeline-item">
-                <h3>Freelance Developer - Captury GmbH</h3>
-                <p class="date">July - December 2021</p>
-                <p>Developed handpose tracking support and various computer vision solutions.</p>
+                <div class="timeline-text">
+                    <h3>Freelance Developer - Captury GmbH</h3>
+                    <p class="date">July - December 2021</p>
+                    <p>Developed handpose tracking support and various computer vision solutions.</p>
+                </div>
             </div>
             <div class="timeline-item">
-                <h3>Deep Learning Intern - Captury GmbH</h3>
-                <p class="date">October - December 2020</p>
-                <p>Worked on Fast Background subtraction using neural networks.</p>
+                <div class="timeline-text">
+                    <h3>Deep Learning Intern - Captury GmbH</h3>
+                    <p class="date">October - December 2020</p>
+                    <p>Worked on Fast Background subtraction using neural networks.</p>
+                </div>
             </div>
         </div>
     </div>

styles.css

@@ -418,27 +418,24 @@ body {
 }
 
 .timeline-content {
+    position: relative;
     max-width: 800px;
     margin: 0 auto;
-    position: relative;
 }
 
 .timeline-content::before {
     content: '';
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
     width: 2px;
-    height: 100%;
     background-color: var(--border-color);
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .timeline-item {
-    background-color: var(--card-bg);
-    padding: 2rem;
     margin-bottom: 2rem;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px var(--shadow-color);
     position: relative;
     width: calc(50% - 30px);
     margin-left: auto;
@@ -449,23 +446,30 @@ body {
     margin-right: auto;
 }
 
+.timeline-text {
+    background-color: var(--card-bg);
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px var(--shadow-color);
+}
+
 .timeline-item::before {
     content: '';
     position: absolute;
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     background-color: var(--link-color);
     border-radius: 50%;
-    top: 50%;
+    top: 20px;
     transform: translateY(-50%);
 }
 
 .timeline-item:nth-child(odd)::before {
-    left: -40px;
+    left: -38px;
 }
 
 .timeline-item:nth-child(even)::before {
-    right: -40px;
+    right: -38px;
 }
 
 .timeline-item h3 {
@@ -477,13 +481,71 @@ body {
 .timeline-item .date {
     color: var(--link-color);
     font-size: 0.9rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
     font-weight: 500;
 }
 
 .timeline-item p {
     color: var(--text-color);
     line-height: 1.6;
+    font-size: 0.95rem;
+}
+
+.video-thumbnail {
+    display: block;
+    position: absolute;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px var(--shadow-color);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    width: calc(50% - 30px);
+    left: 0;
+    top: 0;
+}
+
+.video-thumbnail img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.3s ease;
+}
+
+.play-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.play-overlay i {
+    color: white;
+    font-size: 2rem;
+    transform: scale(0.8);
+    transition: transform 0.3s ease;
+}
+
+.video-thumbnail:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.video-thumbnail:hover img {
+    transform: scale(1.03);
+}
+
+.video-thumbnail:hover .play-overlay {
+    opacity: 1;
+}
+
+.video-thumbnail:hover .play-overlay i {
+    transform: scale(1);
 }
 
 /* Timeline Responsive */
@@ -494,18 +556,20 @@ body {
 
     .timeline-item {
         width: calc(100% - 30px);
-        margin-left: 30px;
-    }
-
-    .timeline-item:nth-child(even) {
-        margin-left: 30px;
-        margin-right: 0;
+        margin-left: 30px !important;
+        margin-right: 0 !important;
     }
 
     .timeline-item::before {
-        left: -40px !important;
+        left: -38px !important;
         right: auto !important;
     }
+
+    .video-thumbnail {
+        position: relative;
+        width: calc(100% - 30px);
+        margin: 1rem 0 1rem 30px;
+    }
 }
 
 /* Contact Section */