admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(marquee): alternative static flex-grid of chips (replaces scrolling marquee)

Browse Source
This commit is contained in:
root committed 2026-09-19 13:11:13 +02:00
1 parent e60d791934
commit 9e62a1ea53
5 files changed
+61 -108
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/css/main.css
+25
View File
@@ -5484,6 +5484,31 @@ body.content-edit-shift-active.content-edit-mode-active .content-edit-fab-stack
flex-shrink: 0;
}
/* Альтернативный вариант marquee: статичная flex-сетка чипсов */
.marquee--grid {
padding: 0.5rem 0;
}
.marquee-grid {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 680px;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.marquee-grid__cell {
margin: 0;
flex: 1 1 11rem;
min-width: 0;
display: flex;
justify-content: center;
}
.marquee-grid__cell .hero__tag {
white-space: nowrap;
}
/* Marquee появляется мягче, чем обычные секции (без большого сдвига) */
.marquee[data-reveal] {
opacity: 0;
public/en/index.html
+9 -27
View File
@@ -269,33 +269,15 @@
</div>
</section>
<section class="marquee" aria-hidden="true" data-reveal>
<div class="marquee__track">
<div class="marquee__content">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ years of experience</span>
<span class="hero__tag">Product thinking</span>
<span class="hero__tag">Design systems</span>
<span class="hero__tag">Mentoring &amp; coaching</span>
<span class="hero__tag">AI tools &amp; vibe coding</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ years of experience</span>
<span class="hero__tag">Product thinking</span>
<span class="hero__tag">Design systems</span>
<span class="hero__tag">Mentoring &amp; coaching</span>
<span class="hero__tag">AI tools &amp; vibe coding</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ years of experience</span>
<span class="hero__tag">Product thinking</span>
<span class="hero__tag">Design systems</span>
<span class="hero__tag">Mentoring &amp; coaching</span>
<span class="hero__tag">AI tools &amp; vibe coding</span>
</div>
</div>
<section class="marquee marquee--grid" aria-hidden="true" data-reveal>
<ul class="marquee-grid">
<li class="marquee-grid__cell"><span class="hero__tag">UX/UI</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">10+ years of experience</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Product thinking</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Design systems</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Mentoring &amp; coaching</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">AI tools &amp; vibe coding</span></li>
</ul>
</section>
<section id="portfolio" class="section section--surface" data-reveal>
public/index.html
+9 -27
View File
@@ -269,33 +269,15 @@
</div>
</section>
<section class="marquee" aria-hidden="true" data-reveal>
<div class="marquee__track">
<div class="marquee__content">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
</div>
<section class="marquee marquee--grid" aria-hidden="true" data-reveal>
<ul class="marquee-grid">
<li class="marquee-grid__cell"><span class="hero__tag">UX/UI</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">10+ лет опыта</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Продуктовое мышление</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Дизайн-системы</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Менторство и наставничество</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">AI инструменты и вайбкодинг</span></li>
</ul>
</section>
<section id="portfolio" class="section section--surface" data-reveal>
src/pages/index.en.html
+9 -27
View File
@@ -68,33 +68,15 @@
</div>
</section>
<section class="marquee" aria-hidden="true" data-reveal>
<div class="marquee__track">
<div class="marquee__content">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ years of experience</span>
<span class="hero__tag">Product thinking</span>
<span class="hero__tag">Design systems</span>
<span class="hero__tag">Mentoring &amp; coaching</span>
<span class="hero__tag">AI tools &amp; vibe coding</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ years of experience</span>
<span class="hero__tag">Product thinking</span>
<span class="hero__tag">Design systems</span>
<span class="hero__tag">Mentoring &amp; coaching</span>
<span class="hero__tag">AI tools &amp; vibe coding</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ years of experience</span>
<span class="hero__tag">Product thinking</span>
<span class="hero__tag">Design systems</span>
<span class="hero__tag">Mentoring &amp; coaching</span>
<span class="hero__tag">AI tools &amp; vibe coding</span>
</div>
</div>
<section class="marquee marquee--grid" aria-hidden="true" data-reveal>
<ul class="marquee-grid">
<li class="marquee-grid__cell"><span class="hero__tag">UX/UI</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">10+ years of experience</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Product thinking</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Design systems</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Mentoring &amp; coaching</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">AI tools &amp; vibe coding</span></li>
</ul>
</section>
{{> projects-section-mp}}{{> projects-section}}
src/pages/index.html
+9 -27
View File
@@ -68,33 +68,15 @@
</div>
</section>
<section class="marquee" aria-hidden="true" data-reveal>
<div class="marquee__track">
<div class="marquee__content">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
<div class="marquee__content" aria-hidden="true">
<span class="hero__tag">UX/UI</span>
<span class="hero__tag">10+ лет опыта</span>
<span class="hero__tag">Продуктовое мышление</span>
<span class="hero__tag">Дизайн-системы</span>
<span class="hero__tag">Менторство и наставничество</span>
<span class="hero__tag">AI инструменты и вайбкодинг</span>
</div>
</div>
<section class="marquee marquee--grid" aria-hidden="true" data-reveal>
<ul class="marquee-grid">
<li class="marquee-grid__cell"><span class="hero__tag">UX/UI</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">10+ лет опыта</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Продуктовое мышление</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Дизайн-системы</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">Менторство и наставничество</span></li>
<li class="marquee-grid__cell"><span class="hero__tag">AI инструменты и вайбкодинг</span></li>
</ul>
</section>
{{> projects-section-mp}}{{> projects-section}}