@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
You are viewing a single comment's thread from: