From de1a448ea5f0a7d0f47ee00d046f0dd5ea8bc98f Mon Sep 17 00:00:00 2001 From: A JERRIN ANTO Date: Sat, 11 Jul 2026 22:38:15 +0530 Subject: [PATCH 1/3] Load latest Tech2007 video dynamically --- index.html | 50 ++++++++++- script.js | 83 +++++++++++++++++ style.css | 255 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 385 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 5898cb5..aa5e56b 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,7 @@
  • Experience
  • Projects
  • Skills
    • +
  • YouTube
  • Education
  • Contact
    • @@ -76,6 +77,9 @@

    Jerrin Anto

    View Experience + + Visit Tech2007 + @@ -330,7 +334,7 @@

    Tech2007 Content

    Content Creator - View Page + Open Channel
    @@ -350,6 +354,46 @@

    GSSoC Contributor

    + +
    +
    +
    +
    + Featured Channel +

    Tech2007 on YouTube

    +

    + Watch my Tech2007 uploads directly from this portfolio preview, then open the channel or videos tab for the full YouTube experience. +

    +
    + + Visit Tech2007 + + + View All Videos + + @Tech2007-g5m +
    +
    +
    +
    +
    + Loading latest Tech2007 video... +
    +
    + + Open all Tech2007 videos on YouTube + +
    +
    +
    +
    + @@ -537,8 +581,8 @@

    Let's Connect & Build

    - - + + diff --git a/script.js b/script.js index 5020db6..0f3382c 100644 --- a/script.js +++ b/script.js @@ -189,3 +189,86 @@ document.addEventListener('DOMContentLoaded', () => { }); } }); + +/* ========================================== + DYNAMIC YOUTUBE LATEST VIDEO PREVIEW + ========================================== */ +document.addEventListener('DOMContentLoaded', () => { + const feedContainer = document.getElementById('youtube-video-feed'); + + if (!feedContainer) { + return; + } + + const channelHandle = feedContainer.dataset.channelHandle; + const videosUrl = feedContainer.dataset.videosUrl; + const feedCandidates = [ + `https://www.youtube.com/feeds/videos.xml?user=${channelHandle}`, + `https://www.youtube.com/feeds/videos.xml?user=Tech2007` + ]; + + const renderFallback = () => { + feedContainer.innerHTML = ` +
    + +

    Latest Tech2007 videos

    +

    YouTube did not return an embeddable latest-video feed here, but the channel link is ready and opens the live videos page.

    + + View Latest Videos + +
    + `; + }; + + const renderVideo = (video) => { + const videoId = video.guid && video.guid.split(':').pop(); + const title = video.title || 'Latest Tech2007 video'; + const link = video.link || videosUrl; + + if (!videoId) { + renderFallback(); + return; + } + + feedContainer.innerHTML = ` + +
    + Latest upload +

    ${title}

    + Watch on YouTube +
    + `; + }; + + const loadLatestVideo = async () => { + for (const feedUrl of feedCandidates) { + const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feedUrl)}`; + const response = await fetch(apiUrl); + + if (!response.ok) { + continue; + } + + const data = await response.json(); + const latestVideo = data.items && data.items[0]; + + if (latestVideo) { + renderVideo(latestVideo); + return; + } + } + + renderFallback(); + }; + + loadLatestVideo().catch(() => { + renderFallback(); + }); +}); diff --git a/style.css b/style.css index 467db35..a0a5e1f 100644 --- a/style.css +++ b/style.css @@ -1421,3 +1421,258 @@ 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; + display: grid; + grid-template-columns: 1.2fr 0.8fr; + align-items: center; + gap: 40px; + padding: 48px; +} + +.youtube-card::before { + content: ''; + position: absolute; + inset: -40% auto auto -15%; + 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; +} + +.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: 620px; + margin-bottom: 28px; +} + +.youtube-actions { + display: flex; + align-items: 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-visual { + min-height: 260px; + border-radius: 24px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: + linear-gradient(135deg, rgba(255, 0, 51, 0.16), rgba(99, 102, 241, 0.12)), + rgba(255, 255, 255, 0.03); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + position: relative; + z-index: 1; + transition: var(--transition-normal); +} + +.youtube-visual:hover { + transform: translateY(-6px) scale(1.02); + border-color: rgba(255, 0, 51, 0.45); + box-shadow: 0 16px 45px rgba(255, 0, 51, 0.16); +} + +.youtube-play-ring { + width: 96px; + height: 96px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 3.2rem; + background: linear-gradient(135deg, #ff0033, #c4002b); + box-shadow: 0 0 35px rgba(255, 0, 51, 0.45); +} + +.youtube-label { + font-family: 'Outfit', sans-serif; + font-size: 2rem; + font-weight: 800; +} + +.youtube-caption { + color: var(--text-secondary); + font-size: 0.95rem; +} + +.youtube-social:hover { + background: #ff0033; + border-color: #ff0033; + box-shadow: 0 8px 20px rgba(255, 0, 51, 0.35); +} + +@media (max-width: 1024px) { + .youtube-card { + grid-template-columns: 1fr; + text-align: center; + } + + .youtube-actions { + justify-content: center; + } +} + +@media (max-width: 480px) { + .youtube-card { + padding: 30px 20px; + } + + .youtube-visual { + min-height: 220px; + } +} + +.youtube-live-preview { + position: relative; + z-index: 1; + overflow: hidden; + border-radius: 24px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: + linear-gradient(135deg, rgba(255, 0, 51, 0.16), rgba(99, 102, 241, 0.12)), + rgba(255, 255, 255, 0.03); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); +} + +.youtube-live-preview iframe { + display: block; + width: 100%; + aspect-ratio: 16 / 9; + min-height: 260px; + border: 0; + background: #000; +} + +.youtube-preview-link { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 14px 18px; + color: var(--text-primary); + font-family: 'Outfit', sans-serif; + font-weight: 700; + background: rgba(255, 0, 51, 0.12); + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.youtube-preview-link:hover { + color: #fff; + background: rgba(255, 0, 51, 0.24); +} + +@media (max-width: 480px) { + .youtube-live-preview iframe { + min-height: 210px; + } +} + +.youtube-video-feed { + min-height: 360px; + display: flex; + flex-direction: column; + background: rgba(0, 0, 0, 0.35); +} + +.youtube-feed-state, +.youtube-feed-fallback { + min-height: 320px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + padding: 32px; + text-align: center; + color: var(--text-secondary); +} + +.youtube-feed-state i, +.youtube-feed-fallback i { + color: #ff0033; + font-size: 3rem; +} + +.youtube-feed-fallback h3, +.youtube-video-details h3 { + font-size: 1.25rem; +} + +.youtube-feed-fallback p { + max-width: 420px; +} + +.youtube-video-details { + padding: 18px 20px 20px; + background: rgba(8, 11, 17, 0.8); + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.youtube-video-kicker { + display: inline-block; + margin-bottom: 8px; + color: var(--color-cyan); + font-family: 'Outfit', sans-serif; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.youtube-video-details a { + display: inline-flex; + align-items: center; + gap: 8px; + margin-top: 10px; + color: var(--color-cyan); + font-weight: 700; +} + +.youtube-video-details a:hover { + color: #fff; +} From f198f2bbf1ef8f3fa97e765011c5713322c6ee13 Mon Sep 17 00:00:00 2001 From: A JERRIN ANTO Date: Sat, 11 Jul 2026 22:46:59 +0530 Subject: [PATCH 2/3] Remove YouTube video embed preview --- index.html | 21 +----- script.js | 83 ------------------------ style.css | 187 +++-------------------------------------------------- 3 files changed, 10 insertions(+), 281 deletions(-) diff --git a/index.html b/index.html index aa5e56b..dab3675 100644 --- a/index.html +++ b/index.html @@ -364,32 +364,15 @@

    GSSoC Contributor

    Featured Channel

    Tech2007 on YouTube

    - Watch my Tech2007 uploads directly from this portfolio preview, then open the channel or videos tab for the full YouTube experience. + A clean gateway to my Tech2007 YouTube channel for tech content, coding tutorials, Linux workflows, AI ideas, and builder-focused learning.

    - Visit Tech2007 - - - View All Videos + Visit Tech2007 Channel @Tech2007-g5m
    -
    -
    -
    - Loading latest Tech2007 video... -
    -
    - - Open all Tech2007 videos on YouTube - -
    diff --git a/script.js b/script.js index 0f3382c..5020db6 100644 --- a/script.js +++ b/script.js @@ -189,86 +189,3 @@ document.addEventListener('DOMContentLoaded', () => { }); } }); - -/* ========================================== - DYNAMIC YOUTUBE LATEST VIDEO PREVIEW - ========================================== */ -document.addEventListener('DOMContentLoaded', () => { - const feedContainer = document.getElementById('youtube-video-feed'); - - if (!feedContainer) { - return; - } - - const channelHandle = feedContainer.dataset.channelHandle; - const videosUrl = feedContainer.dataset.videosUrl; - const feedCandidates = [ - `https://www.youtube.com/feeds/videos.xml?user=${channelHandle}`, - `https://www.youtube.com/feeds/videos.xml?user=Tech2007` - ]; - - const renderFallback = () => { - feedContainer.innerHTML = ` -
    - -

    Latest Tech2007 videos

    -

    YouTube did not return an embeddable latest-video feed here, but the channel link is ready and opens the live videos page.

    - - View Latest Videos - -
    - `; - }; - - const renderVideo = (video) => { - const videoId = video.guid && video.guid.split(':').pop(); - const title = video.title || 'Latest Tech2007 video'; - const link = video.link || videosUrl; - - if (!videoId) { - renderFallback(); - return; - } - - feedContainer.innerHTML = ` - -
    - Latest upload -

    ${title}

    - Watch on YouTube -
    - `; - }; - - const loadLatestVideo = async () => { - for (const feedUrl of feedCandidates) { - const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(feedUrl)}`; - const response = await fetch(apiUrl); - - if (!response.ok) { - continue; - } - - const data = await response.json(); - const latestVideo = data.items && data.items[0]; - - if (latestVideo) { - renderVideo(latestVideo); - return; - } - } - - renderFallback(); - }; - - loadLatestVideo().catch(() => { - renderFallback(); - }); -}); diff --git a/style.css b/style.css index a0a5e1f..80d44b3 100644 --- a/style.css +++ b/style.css @@ -1440,23 +1440,23 @@ a { .youtube-card { position: relative; overflow: hidden; - display: grid; - grid-template-columns: 1.2fr 0.8fr; - align-items: center; - gap: 40px; + max-width: 900px; + margin: 0 auto; padding: 48px; + text-align: center; } .youtube-card::before { content: ''; position: absolute; - inset: -40% auto auto -15%; + 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 { @@ -1471,13 +1471,14 @@ a { .youtube-content p { color: var(--text-secondary); font-size: 1.08rem; - max-width: 620px; - margin-bottom: 28px; + max-width: 680px; + margin: 0 auto 28px; } .youtube-actions { display: flex; align-items: center; + justify-content: center; gap: 18px; flex-wrap: wrap; } @@ -1493,186 +1494,14 @@ a { letter-spacing: 0.04em; } -.youtube-visual { - min-height: 260px; - border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: - linear-gradient(135deg, rgba(255, 0, 51, 0.16), rgba(99, 102, 241, 0.12)), - rgba(255, 255, 255, 0.03); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 12px; - position: relative; - z-index: 1; - transition: var(--transition-normal); -} - -.youtube-visual:hover { - transform: translateY(-6px) scale(1.02); - border-color: rgba(255, 0, 51, 0.45); - box-shadow: 0 16px 45px rgba(255, 0, 51, 0.16); -} - -.youtube-play-ring { - width: 96px; - height: 96px; - border-radius: 50%; - display: inline-flex; - align-items: center; - justify-content: center; - color: #fff; - font-size: 3.2rem; - background: linear-gradient(135deg, #ff0033, #c4002b); - box-shadow: 0 0 35px rgba(255, 0, 51, 0.45); -} - -.youtube-label { - font-family: 'Outfit', sans-serif; - font-size: 2rem; - font-weight: 800; -} - -.youtube-caption { - color: var(--text-secondary); - font-size: 0.95rem; -} - .youtube-social:hover { background: #ff0033; border-color: #ff0033; box-shadow: 0 8px 20px rgba(255, 0, 51, 0.35); } -@media (max-width: 1024px) { - .youtube-card { - grid-template-columns: 1fr; - text-align: center; - } - - .youtube-actions { - justify-content: center; - } -} - @media (max-width: 480px) { .youtube-card { padding: 30px 20px; } - - .youtube-visual { - min-height: 220px; - } -} - -.youtube-live-preview { - position: relative; - z-index: 1; - overflow: hidden; - border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: - linear-gradient(135deg, rgba(255, 0, 51, 0.16), rgba(99, 102, 241, 0.12)), - rgba(255, 255, 255, 0.03); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); -} - -.youtube-live-preview iframe { - display: block; - width: 100%; - aspect-ratio: 16 / 9; - min-height: 260px; - border: 0; - background: #000; -} - -.youtube-preview-link { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 14px 18px; - color: var(--text-primary); - font-family: 'Outfit', sans-serif; - font-weight: 700; - background: rgba(255, 0, 51, 0.12); - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -.youtube-preview-link:hover { - color: #fff; - background: rgba(255, 0, 51, 0.24); -} - -@media (max-width: 480px) { - .youtube-live-preview iframe { - min-height: 210px; - } -} - -.youtube-video-feed { - min-height: 360px; - display: flex; - flex-direction: column; - background: rgba(0, 0, 0, 0.35); -} - -.youtube-feed-state, -.youtube-feed-fallback { - min-height: 320px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 16px; - padding: 32px; - text-align: center; - color: var(--text-secondary); -} - -.youtube-feed-state i, -.youtube-feed-fallback i { - color: #ff0033; - font-size: 3rem; -} - -.youtube-feed-fallback h3, -.youtube-video-details h3 { - font-size: 1.25rem; -} - -.youtube-feed-fallback p { - max-width: 420px; -} - -.youtube-video-details { - padding: 18px 20px 20px; - background: rgba(8, 11, 17, 0.8); - border-top: 1px solid rgba(255, 255, 255, 0.08); -} - -.youtube-video-kicker { - display: inline-block; - margin-bottom: 8px; - color: var(--color-cyan); - font-family: 'Outfit', sans-serif; - font-size: 0.75rem; - font-weight: 700; - letter-spacing: 0.12em; - text-transform: uppercase; -} - -.youtube-video-details a { - display: inline-flex; - align-items: center; - gap: 8px; - margin-top: 10px; - color: var(--color-cyan); - font-weight: 700; -} - -.youtube-video-details a:hover { - color: #fff; } From 8955fecbe77fcc795e1c67b81341cc5dfc58055c Mon Sep 17 00:00:00 2001 From: A JERRIN ANTO Date: Sat, 11 Jul 2026 22:53:05 +0530 Subject: [PATCH 3/3] Clean up YouTube section conflicts --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index dab3675..c866aba 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@ + ========================================== -->