@wiv01 added htmlContent (English):
<style>
/* ==== Business Card (Лендінг-візитка) — self-contained, no JS ==== */
:root
--max-w: 1080px;
--gap: 20px;
--radius: 16px;
--bg: #0b0c10;
--fg: #eaf0f4;
--muted: #a8b3bd;
--card: #151a22;
--accent: #6C5CE7;
--accent-2: #20C997;
color-scheme: light dark;
@media (prefers-color-scheme: light)
:root
--bg: #f7f9fb;
--fg: #0b0c10;
--muted: #5e6a77;
--card: #ffffff;
--accent: #6C5CE7;
--accent-2: #20C997;
.gpt-block
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji, sans-serif;
color: var(--fg);
background: radial-gradient(1200px 800px at 100% -20%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%),
radial-gradient(900px 600px at -10% 110%, color-mix(in oklab, var(--accent-2) 22%, transparent) 0%, transparent 60%),
var(--bg);
padding: 28px;
border-radius: var(--radius);
max-width: var(--max-w);
margin: 0 auto;
box-shadow: 0 10px 40px rgba(0,0,0,.24);
.gpt-block .container display: grid; gap: var(--gap);
/* Header / Hero */
.hero
display: grid;
grid-template-columns: 1.3fr .9fr;
gap: clamp(20px, 4vw, 48px);
align-items: center;
background: linear-gradient(180deg, color-mix(in oklab, var(--card) 86%, transparent) 0%, transparent 100%);
border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
border-radius: var(--radius);
padding: clamp(20px, 4vw, 40px);
position: relative;
overflow: hidden;
@media (max-width: 880px)
.hero grid-template-columns: 1fr;
.eyebrow
display: inline-flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--muted);
letter-spacing: .04em; text-transform: uppercase;
.eyebrow .dot width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent);
.title
font-size: clamp(28px, 5vw, 48px);
line-height: 1.08;
margin: 8px 0 12px;
font-weight: 800;
letter-spacing: -0.02em;
.subtitle
font-size: clamp(16px, 2.2vw, 18px);
color: var(--muted);
max-width: 60ch;
.hero-actions
display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;
.btn
--_bg: var(--accent);
--_fg: #fff;
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 16px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
border: 1px solid color-mix(in oklab, var(--_bg) 18%, transparent);
background: var(--_bg);
color: var(--_fg);
transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
box-shadow: 0 6px 22px color-mix(in oklab, var(--_bg) 30%, transparent);
.btn:hover transform: translateY(-1px);
.btn.secondary
--_bg: color-mix(in oklab, var(--card) 90%, var(--bg));
--_fg: var(--fg);
border-color: color-mix(in oklab, var(--fg) 12%, transparent);
box-shadow: none;
/* Avatar Card */
.card
background: var(--card);
border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
border-radius: var(--radius);
padding: clamp(16px, 3vw, 22px);
display: grid; gap: 14px;
.avatar
width: clamp(96px, 22vw, 128px); height: clamp(96px, 22vw, 128px);
border-radius: 24px;
background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent));
display: grid; place-items: center;
color: white; font-weight: 800; font-size: clamp(32px, 7vw, 42px);
box-shadow: inset 0 0 24px rgba(255,255,255,.12);
.meta color: var(--muted); font-size: 14px;
.badges display: flex; flex-wrap: wrap; gap: 8px;
.badge
font-size: 12.5px; color: var(--fg);
background: color-mix(in oklab, var(--fg) 10%, transparent);
border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);
padding: 6px 10px; border-radius: 999px;
/* Sections */
.section
background: var(--card);
border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
border-radius: var(--radius);
padding: clamp(18px, 3.6vw, 28px);
.section h2
font-size: clamp(20px, 3vw, 28px);
margin: 0 0 12px;
letter-spacing: -0.01em;
.grid display: grid; gap: 14px;
@media (min-width: 860px)
.grid.cols-2 grid-template-columns: 1fr 1fr;
.grid.cols-3 grid-template-columns: repeat(3, 1fr);
.list
display: grid; gap: 10px;
.list-item
display: grid; gap: 6px;
padding: 12px;
border: 1px dashed color-mix(in oklab, var(--fg) 14%, transparent);
border-radius: 12px;
background: color-mix(in oklab, var(--card) 80%, var(--bg));
.list-item .k color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
.list-item .v font-weight: 600;
/* Skills chips */
.chips display: flex; flex-wrap: wrap; gap: 8px;
.chip
font-size: 13px; padding: 8px 10px;
border-radius: 10px;
background: color-mix(in oklab, var(--accent) 18%, transparent);
border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
/* Project cards */
.project
border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
border-radius: 14px;
padding: 14px;
background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, transparent), transparent);
display: grid; gap: 10px;
.project h3 margin: 0; font-size: 18px;
.project p margin: 0; color: var(--muted);
.project .stack display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
.stack .tag
font-size: 12px; padding: 6px 8px; border-radius: 8px;
background: color-mix(in oklab, var(--fg) 10%, transparent);
border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent);
/* Footer */
.footer
display: grid; gap: 10px; justify-items: center;
color: var(--muted); font-size: 14px; padding-top: 8px;
.links display: flex; gap: 12px; flex-wrap: wrap;
.link
color: var(--fg); text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--fg) 30%, transparent);
/* Responsive helpers */
.sr position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
</style>
<div class=gpt-block role=region aria-label=Лендінг-візитка>
<div class=container>
(html comment removed: HERO )
<section class=hero>
<div>
<div class=eyebrow><span class=dot></span> Київ, Україна</div>
<h1 class=title>Люся (Людмила Колосова)</h1>
<p class=subtitle>
Front-end інженерка (React) та будівниця продуктів. Спеціалізуюся на
редакторах контенту (<strong>Slate.js</strong>), пайплайнах <strong>remark/rehype</strong>,
кастомних ембедах, SEO/OG-метаданих і красивому, швидкому UI.
Люблю структуру, чисті інтерфейси, спорт і креатив.
</p>
<div class=hero-actions>
<a class=btn href=# rel=noopener nofollow ugc target=_blank aria-label=Написати в Telegram>
(html comment removed: Telegram icon )
<svg width=18 height=18 viewBox=0 0 24 24 aria-hidden=true><path fill=currentColor d=M9.94 15.54L9.8 19.1c.36 0 .52-.16.7-.36l1.68-1.6 3.48 2.56c.64.36 1.1.18 1.28-.6l2.32-10.9c.2-.9-.32-1.26-.94-1.04L3.98 10.3c-.88.34-.86.82-.15 1.04l3.62 1.14 8.4-5.3c.4-.24.76-.1.46.14/></svg>
Telegram
</a>
<a class=btn secondary href=mailto:[email protected] aria-label=Написати на email>
(html comment removed: Mail icon )
<svg width=18 height=18 viewBox=0 0 24 24 aria-hidden=true><path fill=currentColor d=M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4l-8 5L4 8V6l8 5l8-5z/></svg>
Email
</a>
<a class=btn secondary href=# download aria-label=Завантажити CV>CV.pdf</a>
</div>
</div>
<aside class=card aria-label=Профіль та швидкі факти>
<div class=avatar aria-hidden=true>Л</div>
<div class=meta>Працюю з React-екосистемою, створюю редактори, інструменти для контенту та інтеграції з соцплатформами.</div>
<div class=badges>
<span class=badge>React</span>
<span class=badge>Slate.js</span>
<span class=badge>remark / rehype</span>
<span class=badge>Ant Design</span>
<span class=badge>Redux</span>
<span class=badge>OpenGraph / SEO</span>
</div>
</aside>
</section>
(html comment removed: ABOUT / VALUES )
<section class=section>
<h2>Про мене</h2>
<div class=grid cols-2>
<div class=list>
<div class=list-item>
<div class=k>Фокус</div>
<div class=v>Редактори контенту, кастомні тулбари, ембеди (YouTube, TikTok, Hive/3Speak/DBuzz/DTube), таблиці, списки, медіа-галереї.</div>
</div>
<div class=list-item>
<div class=k>Фронтенд</div>
<div class=v>React, сучасні хуки, керування станом, чисті компоненти, перформанс і доступність.</div>
</div>
<div class=list-item>
<div class=k>Контент-пайплайни</div>
<div class=v>remark/rehype, sanitize-html, канонікали, OG-теги, превʼю, парсери, рендерери.</div>
</div>
</div>
<div class=list>
<div class=list-item>
<div class=k>Проекти</div>
<div class=v>Waivio: фронтенд із глибокою інтеграцією редактора, ембедів і карт (Pigeon-maps).</div>
</div>
<div class=list-item>
<div class=k>Стиль</div>
<div class=v>Чітка структура, мінімалізм, акуратна типографіка. Люблю доводити UX до ідеального стану.</div>
</div>
<div class=list-item>
<div class=k>Особисте</div>
<div class=v>Фітнес, фото, сімʼя та невеличкі крипто-інвестиції — тримаю баланс між справами й життям.</div>
</div>
</div>
</div>
</section>
(html comment removed: SKILLS )
<section class=section>
<h2>Стек та навички</h2>
<div class=chips>
<span class=chip>React 18+</span>
<span class=chip>Slate.js (custom nodes/voids)</span>
<span class=chip>remark / rehype</span>
<span class=chip>sanitize-html</span>
<span class=chip>Ant Design</span>
<span class=chip>Redux Toolkit</span>
<span class=chip>OpenGraph / SEO</span>
<span class=chip>Pigeon-maps</span>
<span class=chip>iFrame / Shadow DOM sandbox</span>
<span class=chip>UX & контент-системи</span>
</div>
</section>
(html comment removed: PROJECTS )
<section class=section>
<h2>Обрані роботи</h2>
<div class=grid cols-2>
<article class=project>
<h3>Waivio — контент-платформа</h3>
<p>Фронтенд із просунутим редактором: таблиці, списки, зображення, відео, ембеди (YouTube/TikTok/3Speak/DBuzz), карти та безпечний HTML-рендер.</p>
<div class=stack>
<span class=tag>React</span><span class=tag>Slate.js</span><span class=tag>remark/rehype</span><span class=tag>sanitize-html</span><span class=tag>AntD</span>
</div>
</article>
<article class=project>
<h3>Редактор з кастомними тулбарами</h3>
<p>Власні інлайн/блок тулбари, обробка «плюс-кнопки», list/table інсерти, гарячі клавіші, пастинг HTML у Slate без поломок.</p>
<div class=stack>
<span class=tag>Slate plugins</span><span class=tag>UX</span><span class=tag>Content parsing</span>
</div>
</article>
</div>
</section>
(html comment removed: CONTACT )
<section class=section>
<h2>Звʼязатися</h2>
<div class=grid cols-3>
<div class=list-item>
<div class=k>Email</div>
<div class=v><a class=link href=mailto:[email protected]>[email protected]</a></div>
</div>
<div class=list-item>
<div class=k>Telegram</div>
<div class=v><a class=link href=# rel=noopener nofollow ugc target=_blank>@ваш_нік</a></div>
</div>
<div class=list-item>
<div class=k>Соцмережі</div>
<div class=v>
<a class=link href=# target=_blank rel=noopener nofollow ugc>Instagram</a> ·
<a class=link href=# target=_blank rel=noopener nofollow ugc>LinkedIn</a>
</div>
</div>
</div>
</section>
(html comment removed: FOOTER )
<footer class=footer role=contentinfo>
<div class=links>
<a class=link href=# target=_blank rel=noopener nofollow ugc>Портфоліо</a>
<a class=link href=# target=_blank rel=noopener nofollow ugc>Резюме (PDF)</a>
<a class=link href=# target=_blank rel=noopener nofollow ugc>Блог</a>
</div>
<div>© <span data-year></span> Люся — Київ, Україна</div>
</footer>
</div>
</div>