From cafb6f745ad39fdcb871df280cd6ec70565f8ca9 Mon Sep 17 00:00:00 2001 From: Devesh Chauhan Date: Fri, 22 May 2026 11:01:21 +0530 Subject: [PATCH] fix responsive UI overlap and skill tag overflow --- static/style.css | 179 ++++++++++++++++++++++++------------------- templates/index.html | 45 +++++++++++ 2 files changed, 145 insertions(+), 79 deletions(-) diff --git a/static/style.css b/static/style.css index 13cd1c9..465043a 100644 --- a/static/style.css +++ b/static/style.css @@ -678,9 +678,8 @@ ol { /* ---- Stats Section (Dynamic) ------------------------------ */ .stats-section { - padding: 40px 0; - margin-top: -60px; - /* Overlap slightly with hero */ + padding: 60px 0; + margin-top: 0; position: relative; z-index: 10; } @@ -803,144 +802,166 @@ ol { /* ---- Skill Strip ------------------------------------------ */ .skill-strip { - position: relative; overflow: hidden; - background: - radial-gradient(circle at top left, rgba(79, 110, 247, 0.12), transparent 34%), - radial-gradient(circle at bottom right, rgba(91, 33, 182, 0.08), transparent 30%), - linear-gradient(180deg, var(--gray-50), var(--indigo-50)); - border-top: 1px solid rgba(35, 53, 194, 0.08); - border-bottom: 1px solid rgba(35, 53, 194, 0.08); - padding: 18px 32px; + padding: 28px 0; + border-top: 1px solid rgba(35, 53, 194, 0.1); + border-bottom: 1px solid rgba(35, 53, 194, 0.1); + background: linear-gradient(180deg, #f8f9ff 0%, #eef2ff 100%); } .skill-strip-inner { max-width: 1140px; margin: 0 auto; - display: flex; - align-items: center; - gap: 18px; - padding: 16px 22px; - background: rgba(255, 255, 255, 0.72); - border: 1px solid rgba(79, 110, 247, 0.12); - border-radius: var(--r-xl); - box-shadow: var(--shadow-sm); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + padding: 0 32px; } .skill-strip-label { - flex-shrink: 0; + display: block; + margin-bottom: 14px; font-size: 0.74rem; font-weight: 700; color: var(--indigo-700); letter-spacing: 0.12em; text-transform: uppercase; - white-space: nowrap; +} + +.skill-strip-marquee { + position: relative; + z-index: 0; + width: 100%; + min-width: 0; + overflow: hidden; + padding: 11px 0; + border-top: 1px solid rgba(79, 110, 247, 0.13); + border-bottom: 1px solid rgba(79, 110, 247, 0.13); + background: rgba(255, 255, 255, 0.76); + box-shadow: 0 12px 28px rgba(15, 21, 96, 0.06); +} + +.skill-strip-marquee::before, +.skill-strip-marquee::after { + content: ""; + position: absolute; + z-index: 1; + top: 0; + bottom: 0; + width: clamp(28px, 6vw, 72px); + pointer-events: none; +} + +.skill-strip-marquee::before { + left: 0; + background: linear-gradient(90deg, #f7f8ff 0%, rgba(247, 248, 255, 0) 100%); +} + +.skill-strip-marquee::after { + right: 0; + background: linear-gradient(270deg, #f7f8ff 0%, rgba(247, 248, 255, 0) 100%); +} + +.skill-strip-track { + --skill-strip-loop-gap: 52px; + display: inline-flex; + align-items: center; + gap: var(--skill-strip-loop-gap); + width: max-content; + min-width: max-content; + animation: skill-strip-marquee 34s linear infinite; + will-change: transform; } .skill-strip-items { - display: flex; + display: inline-flex; align-items: center; - flex-wrap: nowrap; - gap: 0; + gap: 12px; + flex: none; white-space: nowrap; } .ss-item { display: inline-flex; align-items: center; - min-height: 34px; - font-size: 0.84rem; - font-weight: 700; - color: var(--gray-700); - background: rgba(255, 255, 255, 0.92); - border: 1px solid rgba(79, 110, 247, 0.14); - border-radius: var(--r-full); - padding: 6px 14px; - box-shadow: 0 1px 2px rgba(15, 21, 96, 0.04); - transition: - transform 180ms ease, - background 180ms ease, - color 180ms ease, - border-color 180ms ease, - box-shadow 180ms ease; -} -.ss-item:hover { - transform: translateY(-1px); - color: var(--indigo-700); + min-height: 38px; + padding: 7px 14px; + border: 1px solid rgba(35, 53, 194, 0.16); + border-radius: 8px; background: var(--white); - border-color: rgba(79, 110, 247, 0.28); - box-shadow: 0 8px 20px rgba(15, 21, 96, 0.08); + box-shadow: 0 1px 3px rgba(15, 21, 96, 0.06); + color: var(--gray-700); + font-size: 0.88rem; + font-weight: 700; + line-height: 1.2; } .ss-sep { - width: 6px; - height: 6px; - margin: 0 10px; - background: rgba(79, 110, 247, 0.3); + width: 5px; + height: 5px; + flex: none; border-radius: 50%; - flex-shrink: 0; + background: rgba(79, 110, 247, 0.36); } @keyframes skill-strip-marquee { - from { transform: translateX(0); } - to { transform: translateX(-50%); } + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(calc(-50% - (var(--skill-strip-loop-gap) / 2)), 0, 0); + } } @media (prefers-reduced-motion: reduce) { .skill-strip-track { + display: block; + min-width: 0; + width: auto; animation: none; - width: 100%; + } + + .skill-strip-items { + display: flex; flex-wrap: wrap; - justify-content: center; - gap: 12px; } - .skill-strip-items + .skill-strip-items { + .skill-strip-items[data-marquee-clone="true"] { display: none; } .skill-strip-marquee { - overflow: visible; - mask-image: none; - -webkit-mask-image: none; + padding: 14px; + } + + .skill-strip-marquee::before, + .skill-strip-marquee::after { + display: none; } } @media (max-width: 768px) { .skill-strip { - padding: 14px 16px; + padding: 22px 0; } .skill-strip-inner { - padding: 14px 16px; - flex-direction: column; - align-items: flex-start; + padding: 0 16px; } .skill-strip-label { - white-space: normal; - } - - .skill-strip-marquee { - width: 100%; + margin-bottom: 12px; } } @media (max-width: 480px) { - .skill-strip-inner { - border-radius: var(--r-lg); - } - .skill-strip-track { - gap: 14px; - animation-duration: 36s; + --skill-strip-loop-gap: 36px; + animation-duration: 28s; } .ss-item { - font-size: 0.8rem; - padding: 5px 12px; + min-height: 36px; + padding: 7px 12px; + font-size: 0.82rem; } } @@ -2845,4 +2866,4 @@ select:focus { flex: 1; white-space: pre; color: #e6edf3; -} \ No newline at end of file +} diff --git a/templates/index.html b/templates/index.html index d865868..1d61c3a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -238,6 +238,51 @@

C# + Kotlin + +