RE: Object Type - html

[fgh87]

Waivio object "first html01102025" has been created

Comments

[jkl65]

wiv01 added name(en-US):
first html01102025

[xcv47]

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

[jkl65]

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

[zxc43]

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

[dw38h]

@wiv01 added htmlContent (English):
code:javascript\n<style>\n /* ── Pastel calling card for Люся — scoped, no JS ── */\n :root color-scheme: light dark; \n .gpt-block \n --bg: #faf7fb; /* lavender milk */\n --fg: #1e1b2e; /* ink */\n --muted: #6b6a78;\n --card: #ffffff;\n --ring: #e9e2ff;\n --accent: #b79cff; /* soft lilac */\n --accent-2: #9ee0d9; /* mint */\n --accent-3: #ffd6e7; /* blush */\n --radius: 18px;\n --gap: 22px;\n --maxw: 1040px;\n font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, \Helvetica Neue\, Arial, \Noto Sans\, sans-serif;\n color: var(--fg);\n padding: 28px;\n border-radius: var(--radius);\n max-width: var(--maxw);\n margin: 0 auto;\n background:\n radial-gradient(900px 600px at -10% 0%, color-mix(in oklab, var(--accent) 22%, transparent) 0, transparent 60%),\n radial-gradient(900px 700px at 110% 110%, color-mix(in oklab, var(--accent-2) 18%, transparent) 0, transparent 60%),\n linear-gradient(180deg, #fff, var(--bg));\n box-shadow: 0 12px 40px rgba(73, 59, 112, .08);\n \n\n .gpt-block .grid display: grid; gap: var(--gap); \n .gpt-block .card \n background: var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);\n border-radius: var(--radius);\n padding: clamp(16px, 3vw, 28px);\n box-shadow:\n 0 1px 0 rgba(0,0,0,.02),\n 0 10px 30px rgba(183, 156, 255, .08);\n \n\n /* Hero */\n .hero \n display: grid;\n grid-template-columns: 1.25fr .9fr;\n gap: clamp(18px, 4vw, 40px);\n align-items: center;\n overflow: clip;\n position: relative;\n isolation: isolate;\n \n @media (max-width: 880px) .hero grid-template-columns: 1fr; \n\n .ribbon \n display: inline-grid; grid-auto-flow: column; gap: 10px; align-items: center;\n font-size: 13px; letter-spacing: .06em; text-transform: uppercase;\n color: var(--muted);\n \n .ribbon .dot \n width: 8px; height: 8px; border-radius: 999px;\n background: var(--accent);\n box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 25%, transparent);\n \n\n .title \n font-size: clamp(28px, 5vw, 48px);\n line-height: 1.06;\n letter-spacing: -0.02em;\n margin: 8px 0 12px;\n font-weight: 800;\n \n .subtitle \n color: var(--muted);\n font-size: clamp(16px, 2.2vw, 18px);\n max-width: 60ch;\n \n\n .actions display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; \n .btn \n --_bg: var(--accent);\n --_fg: #121016;\n display: inline-flex; align-items: center; gap: 10px;\n padding: 12px 16px; border-radius: 14px; text-decoration: none; font-weight: 700;\n background:\n linear-gradient(180deg, color-mix(in oklab, var(--_bg) 88%, #fff 0%), color-mix(in oklab, var(--_bg) 72%, #fff 0%));\n color: var(--_fg);\n border: 1px solid color-mix(in oklab, var(--_bg) 28%, transparent);\n box-shadow: 0 10px 24px color-mix(in oklab, var(--_bg) 26%, transparent);\n transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;\n \n .btn:hover transform: translateY(-1px); filter: saturate(1.05); \n .btn.secondary --_bg: var(--accent-3); \n\n .avatarCard \n display: grid; gap: 14px; justify-items: center; text-align: center;\n background:\n radial-gradient(220px 160px at 30% 10%, color-mix(in oklab, var(--accent-2) 28%, transparent) 0, transparent 70%),\n var(--card);\n border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);\n border-radius: calc(var(--radius) + 4px);\n padding: clamp(16px, 3vw, 26px);\n \n .avatar \n width: clamp(92px, 22vw, 128px); height: clamp(92px, 22vw, 128px);\n border-radius: 28px;\n background:\n conic-gradient(from 240deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));\n display: grid; place-items: center; color: #1a132b;\n font-size: clamp(34px, 6.5vw, 44px); font-weight: 900;\n box-shadow: inset 0 0 24px rgba(255,255,255,.35);\n \n .kicker color: var(--muted); font-size: 13.5px; \n .badges display:flex; flex-wrap:wrap; gap:8px; justify-content:center; \n .badge \n font-size: 12.5px; padding: 7px 10px; border-radius: 999px;\n background: color-mix(in oklab, var(--fg) 8%, transparent);\n border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);\n \n\n /* Sections */\n .section h2 margin: 0 0 10px; font-size: clamp(18px, 2.6vw, 24px); letter-spacing:-.01em; \n .muted color: var(--muted); \n .cols display:grid; gap: 14px; \n @media (min-width: 860px) .cols.cols-2 grid-template-columns: 1fr 1fr; \n\n .pill \n display:inline-flex; align-items:center; gap:8px;\n padding: 8px 12px; border-radius: 999px;\n border: 1px dashed color-mix(in oklab, var(--fg) 18%, transparent);\n background: color-mix(in oklab, var(--accent-2) 16%, transparent);\n font-size: 13px;\n \n\n .list display:grid; gap: 10px; \n .li \n background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--accent-3) 10%, #fff));\n border: 1px solid var(--ring);\n padding: 12px 14px; border-radius: 14px;\n \n .li strong font-weight: 700; \n\n /* Footer */\n .footer \n display:grid; gap: 8px; justify-items:center; text-align:center; color: var(--muted);\n \n .links display:flex; gap:12px; flex-wrap:wrap; \n .link color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in oklab, var(--fg) 30%, transparent); \n</style>\n\n<div class=\gpt-block\ role=\region\ aria-label=\ніжна візитка\>\n <div class=\grid hero card\>\n <div>\n <div class=\ribbon\><span class=\dot\ aria-hidden=\true\></span> Київ, Україна</div>\n <h1 class=\title\>Люся — спокійна сила інтерфейсів</h1>\n <p class=\subtitle\>\n Ти про людей і про відчуття від продукту. Обираєш ясність замість шуму, турбуєшся про дрібниці,\n любиш акуратну типографіку, швидкість і чистоту у коді. Твої інструменти — <strong>React</strong>,\n редактори контенту (<strong>Slate</strong>), пайплайни <strong>remark/rehype</strong> та уважність до деталей.\n </p>\n <div class=\actions\>\n <a class=\btn\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\ aria-label=\Написати в Telegram\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M21.8 5.2L3.9 12.1c-.7.3-.7 1.2 0 1.4l4.7 1.5 1.5 4.7c.2.7 1.1.7 1.4 0l6.9-17.9c.3-.8-.5-1.6-1.3-1.3Z\/></svg>\n Telegram\n </a>\n <a class=\btn secondary\ href=\mailto:[email protected]\ aria-label=\Email\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ aria-hidden=\true\><path fill=\currentColor\ d=\M12 3a9 9 0 1 0 6.4 15.3l.1.7h2l-1.1-6.5A4.9 4.9 0 0 0 12 7a5 5 0 0 0 0 10c1.3 0 2.4-.5 3.2-1.4v1.1A7 7 0 1 1 19 12v1a2 2 0 0 1-4 0V9h-2v4a4 4 0 1 0 8 0v-1A9 9 0 0 0 12 3Z\/></svg>\n Email\n </a>\n </div>\n </div>\n\n <aside class=\avatarCard\ aria-label=\портрет і інфо\>\n <div class=\avatar\ aria-hidden=\true\>Л</div>\n <div class=\kicker\>Front-end · React · Content systems</div>\n <div class=\badges\ aria-label=\теги\>\n <span class=\badge\>React 18</span>\n <span class=\badge\>Slate.js</span>\n <span class=\badge\>remark · rehype</span>\n <span class=\badge\>sanitize-html</span>\n <span class=\badge\>UX тонкість</span>\n </div>\n </aside>\n </div>\n\n <section class=\card section\ aria-label=\про тебе\>\n <h2>Твій вайб — ніжність без кітчу</h2>\n <div class=\cols cols-2\>\n <div class=\list\>\n <div class=\li\><strong>Спокійний темп,</strong> але рішучі результати — доводиш деталі до гармонії.</div>\n <div class=\li\><strong>Структура,</strong> що заспокоює — чистий контент, продумана ієрархія, акуратні відступи.</div>\n <div class=\li\><strong>Турбота про людей:</strong> доступність, зрозумілі дії, дружні мікротексти.</div>\n </div>\n <div class=\list\>\n <div class=\li\><strong>Редактори як інструменти творчості:</strong> таблиці, списки, ембеди, медіа — все “грає”.</div>\n <div class=\li\><strong>Технічна чистота:</strong> безпечний HTML, OG/SEO, надійні пайплайни.</div>\n <div class=\li\><strong>Мʼякі кольори,</strong> пастель і повітря — твій природний простір.</div>\n </div>\n </div>\n </section>\n\n <section class=\card section\ aria-label=\що робиш найкраще\>\n <h2>Де ти особливо сильна</h2>\n <div class=\list\>\n <div class=\pill\ aria-label=\напрям\>Редактори без болю</div>\n <div class=\pill\ aria-label=\напрям\>Чисті інтерфейси</div>\n <div class=\pill\ aria-label=\напрям\>Ембеди та медіа</div>\n <div class=\pill\ aria-label=\напрям\>SEO · OG · превʼю</div>\n <div class=\pill\ aria-label=\напрям\>Безпечний HTML рендер</div>\n </div>\n </section>\n\n <footer class=\footer\ role=\contentinfo\>\n <div class=\links\ aria-label=\посилання\>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Портфоліо</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Резюме</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>Instagram</a>\n <a class=\link\ href=\#\ target=\_blank\ rel=\noopener nofollow ugc\>LinkedIn</a>\n </div>\n <small class=\muted\>© <span data-year></span> Люся · створено у ніжних тонах</small>\n </footer>\n</div>\n\n\n,hideSignIn:true,hideMenu:true