Add Tech2007 YouTube section, links, styles and dynamic latest-video preview

index.html

@@ -28,7 +28,7 @@
 
   <!-- ==========================================
        HEADER & FLOATING NAVBAR
-       ========================================== */ -->
+       ========================================== -->
   <header class="header" id="header">
     <div class="container nav-container">
       <a href="#home" class="logo">
@@ -47,6 +47,7 @@
           <li><a href="#about" class="nav-link">About</a></li>
           <li><a href="#experience" class="nav-link">Experience</a></li>
           <li><a href="#projects" class="nav-link">Projects</a></li>
+          <li><a href="#youtube" class="nav-link">YouTube</a></li>
           <li><a href="#skills" class="nav-link">Skills</a></li>
           <li><a href="#education" class="nav-link">Education</a></li>
           <li><a href="#contact" class="nav-link">Contact</a></li>
@@ -76,6 +77,9 @@ <h1 class="hero-name gradient-text glow-text">Jerrin Anto</h1>
           <a href="#experience" class="btn btn-secondary">
             View Experience
           </a>
+          <a href="https://www.youtube.com/@Tech2007-g5m" target="_blank" rel="noopener" class="btn btn-youtube">
+            Visit Tech2007 <i class="fa-brands fa-youtube"></i>
+          </a>
         </div>
       </div>
 
@@ -330,7 +334,7 @@ <h3>Tech2007 Content</h3>
           </p>
           <div class="project-meta">
             <span class="project-role">Content Creator</span>
-            <a href="https://www.instagram.com/jerrinanto2007" target="_blank" rel="noopener" class="project-link">View Page <i class="fa-solid fa-arrow-right"></i></a>
+            <a href="https://www.youtube.com/@Tech2007-g5m" target="_blank" rel="noopener" class="project-link">Open Channel <i class="fa-brands fa-youtube"></i></a>
           </div>
         </div>
 
@@ -350,6 +354,29 @@ <h3>GSSoC Contributor</h3>
     </div>
   </section>
 
+  <!-- ==========================================
+       YOUTUBE CHANNEL SECTION
+       ========================================== -->
+  <section class="section youtube" id="youtube">
+    <div class="container">
+      <div class="youtube-card glass-card">
+        <div class="youtube-content">
+          <span class="section-tagline">Featured Channel</span>
+          <h2 class="section-title gradient-text">Tech2007 on YouTube</h2>
+          <p>
+            A clean gateway to my Tech2007 YouTube channel for tech content, coding tutorials, Linux workflows, AI ideas, and builder-focused learning.
+          </p>
+          <div class="youtube-actions">
+            <a href="https://www.youtube.com/@Tech2007-g5m" target="_blank" rel="noopener" class="btn btn-youtube btn-youtube-large" aria-label="Open Tech2007 YouTube channel">
+              <i class="fa-brands fa-youtube"></i> Visit Tech2007 Channel
+            </a>
+            <span class="youtube-handle">@Tech2007-g5m</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- ==========================================
        SKILLS & CERTIFICATIONS SECTION
        ========================================== -->
@@ -537,8 +564,8 @@ <h3 class="gradient-text glow-text">Let's Connect & Build</h3>
           <a href="https://www.instagram.com/jerrinanto0" target="_blank" rel="noopener" class="social-btn" aria-label="Instagram Personal">
             <i class="fa-brands fa-instagram"></i>
           </a>
-          <a href="https://www.instagram.com/jerrinanto2007" target="_blank" rel="noopener" class="social-btn" aria-label="Instagram Creator">
-            <i class="fa-solid fa-video"></i>
+          <a href="https://www.youtube.com/@Tech2007-g5m" target="_blank" rel="noopener" class="social-btn youtube-social" aria-label="Tech2007 YouTube Channel">
+            <i class="fa-brands fa-youtube"></i>
           </a>
         </div>
       </div>

style.css

@@ -1421,3 +1421,87 @@ a {
     justify-content: center;
   }
 }
+
+/* ==========================================
+   YOUTUBE CHANNEL SECTION
+   ========================================== */
+.btn-youtube {
+  background: linear-gradient(135deg, #ff0033, #ff5f6d);
+  color: #fff;
+  box-shadow: 0 4px 20px rgba(255, 0, 51, 0.28);
+}
+
+.btn-youtube:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(255, 0, 51, 0.45);
+  background: linear-gradient(135deg, #ff1744, #ff7a85);
+}
+
+.youtube-card {
+  position: relative;
+  overflow: hidden;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 48px;
+  text-align: center;
+}
+
+.youtube-card::before {
+  content: '';
+  position: absolute;
+  inset: -40% auto auto 50%;
+  width: 360px;
+  height: 360px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 0, 51, 0.28), transparent 70%);
+  filter: blur(35px);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.youtube-content {
+  position: relative;
+  z-index: 1;
+}
+
+.youtube-content .section-title {
+  margin-bottom: 22px;
+}
+
+.youtube-content p {
+  color: var(--text-secondary);
+  font-size: 1.08rem;
+  max-width: 680px;
+  margin: 0 auto 28px;
+}
+
+.youtube-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.btn-youtube-large {
+  padding: 14px 30px;
+}
+
+.youtube-handle {
+  color: var(--color-cyan);
+  font-family: 'Outfit', sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.youtube-social:hover {
+  background: #ff0033;
+  border-color: #ff0033;
+  box-shadow: 0 8px 20px rgba(255, 0, 51, 0.35);
+}
+
+@media (max-width: 480px) {
+  .youtube-card {
+    padding: 30px 20px;
+  }
+}