diff --git a/static/style.css b/static/style.css index b399ee5..3686c4a 100644 --- a/static/style.css +++ b/static/style.css @@ -837,9 +837,8 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39 /* ---- 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; } @@ -962,125 +961,168 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 39 /* ---- 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 { - font-size: 0.8rem; - font-weight: 600; - color: var(--indigo-800); - letter-spacing: 0.04em; + 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-indigo { +.ss-item { + display: inline-flex; + align-items: center; + min-height: 38px; + padding: 7px 14px; + border: 1px solid rgba(35, 53, 194, 0.16); + border-radius: 8px; + background: var(--white); + box-shadow: 0 1px 3px rgba(15, 21, 96, 0.06); + color: var(--gray-700); font-size: 0.88rem; - font-weight: 600; - color: var(--indigo-500); - margin: 4px 4px; - padding: 4px 16px; - border: 1px solid var(--indigo-500); - border-radius: 24px; + font-weight: 700; + line-height: 1.2; } -.ss-item-green { - font-size: 0.88rem; - font-weight: 600; - color: var(--green-500); - margin: 4px 4px; - padding: 4px 16px; - border: 1px solid var(--green-500); - border-radius: 24px; +.ss-sep { + width: 5px; + height: 5px; + flex: none; + border-radius: 50%; + background: rgba(79, 110, 247, 0.36); } -.ss-item-purple { - font-size: 0.88rem; - font-weight: 600; - color: var(--purple-600); - margin: 4px 4px; - padding: 4px 16px; - border: 1px solid var(--purple-600); - border-radius: 24px; -} +@keyframes skill-strip-marquee { + from { + transform: translate3d(0, 0, 0); + } -.ss-item-pink { - font-size: 0.88rem; - font-weight: 600; - color: var(--pink-500); - margin: 4px 4px; - padding: 4px 16px; - border: 1px solid var(--pink-500); - border-radius: 24px; + to { + transform: translate3d(calc(-50% - (var(--skill-strip-loop-gap) / 2)), 0, 0); + } } -@media (max-width: 480px) { - .skill-strip-inner { - border-radius: var(--r-lg); +@media (prefers-reduced-motion: reduce) { + .skill-strip-track { + display: block; + min-width: 0; + width: auto; + animation: none; } - .skill-strip-track { - gap: 14px; - animation-duration: 36s; + .skill-strip-items { + display: flex; + flex-wrap: wrap; + } + + .skill-strip-items[data-marquee-clone="true"] { + display: none; + } + + .skill-strip-marquee { + padding: 14px; } - .ss-item-pink { - font-size: 0.8rem; - padding: 5px 12px; + .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; + margin-bottom: 12px; } +} - .skill-strip-marquee { - width: 100%; +@media (max-width: 480px) { + .skill-strip-track { + --skill-strip-loop-gap: 36px; + animation-duration: 28s; } -} + .ss-item { + min-height: 36px; + padding: 7px 12px; + font-size: 0.82rem; + } +} /* ---- How It Works ----------------------------------------- */ .how-section { @@ -2983,4 +3025,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 aa7751f..1d55ef3 100644 --- a/templates/index.html +++ b/templates/index.html @@ -218,7 +218,54 @@

C# - Kotlin + Kotlin + + +