@wiv01 added htmlContent (English):
code:javascript\n<!DOCTYPE html>\n<html lang=\en\>\n<head>\n <meta charset=\UTF-8\ />\n <meta name=\viewport\ content=\width=device-width, initial-scale=1\ />\n <title>John – CV2222222</title>\n <meta name=\description\ content=\CV website for John – skills, experience, projects, and contact.\ />\n <meta property=\og:title\ content=\John – CV\ />\n <meta property=\og:description\ content=\Skills, experience, projects, and contact.\ />\n <meta name=\theme-color\ content=\#0ea5e9\ />\n <style>\n /* ===== CSS RESET (modern, minimal) ===== */\n *,*::before,*::afterbox-sizing:border-box\n html,bodyheight:100%\n bodymargin:0;line-height:1.6;-webkit-font-smoothing:antialiased\n img,svg,videodisplay:block;max-width:100%\n input,button,textarea,selectfont:inherit\n\n /* ===== THEME & TOKENS ===== */\n :root\n --bg: #0b1020;\n --panel: #11162a;\n --muted: #a9b1c7;\n --text: #e6e9f4;\n --brand: #0ea5e9;\n --brand-2: #22d3ee;\n --ring: #38bdf8;\n --ok: #10b981;\n --warn: #f59e0b;\n --err: #ef4444;\n --card-radius: 18px;\n --shadow: 0 10px 30px rgba(0,0,0,.25);\n \n .light\n --bg:#f7f8fc; --panel:#ffffff; --muted:#5b6375; --text:#0e1220;\n --brand:#0ea5e9; --brand-2:#06b6d4; --ring:#0284c7;\n --ok:#059669; --warn:#b45309; --err:#b91c1c;\n --shadow:0 10px 30px rgba(2,6,23,.08);\n \n\n body\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, \Apple Color Emoji\,\Segoe UI Emoji\;\n background: radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.12), transparent 60%),\n radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.12), transparent 60%),\n var(--bg);\n color: var(--text);\n \n acolor:var(--brand);text-decoration:none\n a:hovertext-decoration:underline\n\n .containerwidth:min(1100px, 92vw);margin-inline:auto\n\n /* ===== NAVBAR ===== */\n header\n position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);\n background: color-mix(in oklch, var(--bg) 80%, transparent);\n border-bottom:1px solid color-mix(in oklch, var(--panel) 70%, transparent);\n \n .navdisplay:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0\n .logodisplay:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px\n .logo .badgedisplay:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:var(--shadow)\n .logo .badge spanfont-weight:900;color:white\n nav apadding:8px 12px;border-radius:12px\n nav a:hoverbackground:color-mix(in oklch, var(--panel) 84%, transparent)\n .actionsdisplay:flex;align-items:center;gap:8px\n .btndisplay:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);background:var(--panel);box-shadow:var(--shadow);cursor:pointer\n .btn:hovertransform:translateY(-1px)\n\n /* ===== HERO ===== */\n .herodisplay:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:42px 0 26px\n .hero-carddisplay:grid;gap:18px;background:linear-gradient(180deg,color-mix(in oklch, var(--panel) 92%, transparent),color-mix(in oklch, var(--panel) 98%, transparent));padding:26px;border-radius:var(--card-radius);box-shadow:var(--shadow)\n .hero h1font-size:clamp(28px, 2.2rem, 48px);line-height:1.15;margin:0\n .hero pmargin:0;color:var(--muted)\n .hero .metadisplay:flex;flex-wrap:wrap;gap:10px 12px\n .chipdisplay:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:999px;background:var(--panel)\n\n .griddisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .col-8grid-column:span 8\n .col-4grid-column:span 4\n @media (max-width: 900px)\n .gridgrid-template-columns:1fr\n .col-8,.col-4grid-column:1/-1\n \n\n /* ===== CARDS ===== */\n .cardbackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 75%, transparent);border-radius:var(--card-radius);padding:20px;box-shadow:var(--shadow)\n .card h3margin-top:0\n\n /* ===== SECTIONS ===== */\n sectionpadding:22px 0\n .section-titledisplay:flex;align-items:center;justify-content:space-between;margin:6px 0 14px\n .section-title h2margin:0;font-size:1.4rem\n .section-title .lineheight:1px;background:color-mix(in oklch, var(--panel) 75%, transparent);flex:1;margin-left:12px\n\n /* ===== LISTS ===== */\n .timelineposition:relative;padding-left:22px\n .timeline::beforecontent:\\;position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:color-mix(in oklch, var(--brand) 30%, var(--panel))\n .itemmargin:0 0 16px\n .item .whenfont-size:.9rem;color:var(--muted)\n .item .wherefont-weight:600\n .item .whatmargin:.25rem 0\n\n .skillsdisplay:flex;flex-wrap:wrap;gap:10px\n .skillpadding:8px 12px;border-radius:999px;border:1px dashed color-mix(in oklch, var(--panel) 70%, transparent)\n\n /* ===== PROJECTS ===== */\n .projectsdisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px\n .projectgrid-column:span 6\n @media (max-width: 800px).projectgrid-column:1/-1\n .project .thumbaspect-ratio:16/9;border-radius:14px;background:linear-gradient(135deg,color-mix(in oklch,var(--brand) 10%,var(--panel)),color-mix(in oklch,var(--brand-2) 10%,var(--panel)));display:grid;place-items:center;border:1px solid color-mix(in oklch, var(--panel) 70%, transparent)\n .project .metadisplay:flex;align-items:center;justify-content:space-between;margin-top:10px\n\n /* ===== CONTACT ===== */\n formdisplay:grid;gap:12px\n labelfont-weight:600\n input, textareabackground:var(--panel);border:1px solid color-mix(in oklch, var(--panel) 70%, transparent);border-radius:12px;padding:12px 14px;color:var(--text)\n textareamin-height:120px\n .inlinedisplay:flex;gap:10px;align-items:center\n .inline inputflex:1\n\n /* ===== FOOTER ===== */\n footerpadding:28px 0;color:var(--muted)\n\n /* ===== UTIL ===== */\n .sr-onlyposition:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0\n .hiddendisplay:none\n </style>\n</head>\n<body>\n <header>\n <div class=\container nav\>\n <div class=\logo\ aria-label=\John home\>\n <div class=\badge\ aria-hidden=\true\><span>J</span></div>\n <span>John</span>\n </div>\n <nav aria-label=\Primary\>\n <a href=\#about\>About</a>\n <a href=\#experience\>Experience</a>\n <a href=\#projects\>Projects</a>\n <a href=\#contact\>Contact</a>\n </nav>\n <div class=\actions\>\n <button id=\themeToggle\ class=\btn\ type=\button\ aria-label=\Toggle theme\>\n <svg width=\18\ height=\18\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3a9 9 0 1 0 9 9 1 1 0 0 1 1-1 1 1 0 0 0 .67-1.74A11 11 0 0 1 13.74 1.33 1 1 0 0 0 12 2a1 1 0 0 1-1 1Z\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Theme\n </button>\n <a class=\btn\ href=\#\ id=\downloadCV\ download>Download CV</a>\n </div>\n </div>\n </header>\n\n <main class=\container\>\n (html comment removed: HERO )\n <section class=\hero\ id=\home\>\n <div class=\hero-card\>\n <h1>John — Software Professional</h1>\n <p>Passionate about building reliable, user‑centric web applications. I focus on performant front‑ends, clean APIs, and thoughtful UX.</p>\n <div class=\meta\>\n <span class=\chip\ title=\Location\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 22s8-6.75 8-12a8 8 0 1 0-16 0c0 5.25 8 12 8 12Z\ stroke=\currentColor\ stroke-width=\1.6\/><circle cx=\12\ cy=\10\ r=\3\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Remote • EU\n </span>\n <span class=\chip\ title=\Email\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z\ stroke=\currentColor\ stroke-width=\1.6\/><path d=\m4 7 8 6 8-6\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n <button type=\button\ id=\copyEmail\ class=\btn\ style=\padding:6px 10px\>[email protected]</button>\n </span>\n <span class=\chip\ title=\Open to opportunities\>\n <svg width=\16\ height=\16\ viewBox=\0 0 24 24\ fill=\none\ aria-hidden=\true\><path d=\M12 3v18M3 12h18\ stroke=\currentColor\ stroke-width=\1.6\/></svg>\n Open to work\n </span>\n </div>\n </div>\n </section>\n\n (html comment removed: ABOUT )\n <section id=\about\>\n <div class=\section-title\><h2>About</h2><div class=\line\></div></div>\n <div class=\grid\>\n <article class=\card col-8\>\n <p>Hi, I’m John. I specialize in crafting modern, accessible web experiences. My toolkit includes HTML, CSS, JavaScript/TypeScript, and popular frameworks. I care about DX, maintainability, and measurable impact.</p>\n <ul>\n <li>Strengths: problem‑solving, communicating trade‑offs, mentoring.</li>\n <li>Interests: performance audits, design systems, testing strategy.</li>\n </ul>\n </article>\n <aside class=\card col-4\>\n <h3>Quick Facts</h3>\n <div class=\skills\>\n <span class=\skill\>HTML5</span>\n <span class=\skill\>CSS / Tailwind</span>\n <span class=\skill\>JavaScript / TS</span>\n <span class=\skill\>React / Vue</span>\n <span class=\skill\>Node / Express</span>\n <span class=\skill\>REST / GraphQL</span>\n <span class=\skill\>Playwright / Jest</span>\n <span class=\skill\>Git / CI</span>\n </div>\n </aside>\n </div>\n </section>\n\n (html comment removed: EXPERIENCE )\n <section id=\experience\>\n <div class=\section-title\><h2>Experience</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <div class=\timeline\ id=\experienceList\>\n <div class=\item\>\n <div class=\when\>2023 — Present</div>\n <div class=\where\>Senior Frontend Engineer • Acme Corp</div>\n <p class=\what\>Led migration to a component library, reducing UI defects by 35% and improving build times by 40%.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2020 — 2023</div>\n <div class=\where\>Full‑stack Developer • Nimbus</div>\n <p class=\what\>Shipped analytics dashboards; introduced e2e testing increasing release confidence and cadence.</p>\n </div>\n <div class=\item\>\n <div class=\when\>2018 — 2020</div>\n <div class=\where\>Frontend Developer • Studio XYZ</div>\n <p class=\what\>Built high‑performing marketing sites and internal tools with a11y best practices.</p>\n </div>\n </div>\n </div>\n <aside class=\card col-4\>\n <h3>Core Skills</h3>\n <ul>\n <li>Semantic, accessible UI</li>\n <li>SPA/MPA architecture</li>\n <li>Design systems</li>\n <li>Automated testing</li>\n <li>Performance optimization</li>\n </ul>\n </aside>\n </div>\n </section>\n\n (html comment removed: PROJECTS )\n <section id=\projects\>\n <div class=\section-title\>\n <h2>Projects</h2>\n <div class=\line\></div>\n </div>\n <div class=\inline\ style=\margin-bottom:10px\>\n <input id=\projectSearch\ type=\search\ placeholder=\Filter projects by keyword…\ aria-label=\Filter projects\ />\n <button class=\btn\ type=\button\ id=\clearFilter\>Clear</button>\n </div>\n <div class=\projects\ id=\projectGrid\>\n <article class=\card project\ data-tags=\react charts dashboard\>\n <div class=\thumb\ aria-hidden=\true\>📊</div>\n <div class=\meta\><strong>InsightDash</strong><span class=\muted\>React • Charts</span></div>\n <p>Interactive analytics dashboard with lazy‑loaded modules and client‑side caching.</p>\n <a href=\#\ aria-label=\Open project InsightDash\>View</a>\n </article>\n <article class=\card project\ data-tags=\node api performance\>\n <div class=\thumb\ aria-hidden=\true\>⚙️</div>\n <div class=\meta\><strong>FastAPI Kit</strong><span class=\muted\>Node • REST</span></div>\n <p>Boilerplate for high‑throughput APIs with structured logging and rate limiting.</p>\n <a href=\#\ aria-label=\Open project FastAPI Kit\>View</a>\n </article>\n <article class=\card project\ data-tags=\ui library design-system\>\n <div class=\thumb\ aria-hidden=\true\>🧩</div>\n <div class=\meta\><strong>Feather UI</strong><span class=\muted\>Design System</span></div>\n <p>Composable UI library with a11y primitives and tokens for theming.</p>\n <a href=\#\ aria-label=\Open project Feather UI\>View</a>\n </article>\n <article class=\card project\ data-tags=\testing e2e playwright\>\n <div class=\thumb\ aria-hidden=\true\>🧪</div>\n <div class=\meta\><strong>SpecPilot</strong><span class=\muted\>Testing</span></div>\n <p>E2E testing starter with Playwright + visual regression and PR checks.</p>\n <a href=\#\ aria-label=\Open project SpecPilot\>View</a>\n </article>\n </div>\n </section>\n\n (html comment removed: EDUCATION )\n <section id=\education\>\n <div class=\section-title\><h2>Education</h2><div class=\line\></div></div>\n <div class=\card\>\n <ul class=\timeline\>\n <li class=\item\><div class=\when\>2014 — 2018</div><div class=\where\>B.Sc. Computer Science • Tech University</div><p class=\what\>Graduated with honors. Focus on HCI and distributed systems.</p></li>\n </ul>\n </div>\n </section>\n\n (html comment removed: CONTACT )\n <section id=\contact\>\n <div class=\section-title\><h2>Contact</h2><div class=\line\></div></div>\n <div class=\grid\>\n <div class=\card col-8\>\n <form id=\contactForm\ novalidate>\n <div>\n <label for=\name\>Name</label>\n <input id=\name\ name=\name\ autocomplete=\name\ required placeholder=\Your name\ />\n </div>\n <div>\n <label for=\email\>Email</label>\n <input id=\email\ name=\email\ type=\email\ autocomplete=\email\ required placeholder=\[email protected]\ />\n </div>\n <div>\n <label for=\message\>Message</label>\n <textarea id=\message\ name=\message\ required placeholder=\Say hi!\ ></textarea>\n </div>\n <div class=\inline\>\n <button class=\btn\ type=\submit\>Send</button>\n <span id=\formStatus\ role=\status\ aria-live=\polite\></span>\n </div>\n </form>\n </div>\n <aside class=\card col-4\>\n <h3>Links</h3>\n <ul>\n <li><a href=\#\ rel=\me\>LinkedIn</a></li>\n <li><a href=\#\ rel=\me\>GitHub</a></li>\n <li><a href=\#\ rel=\me\>Twitter</a></li>\n </ul>\n </aside>\n </div>\n </section>\n </main>\n\n <footer class=\container\>\n <small>© <span id=\year\></span> John. Built with HTML, CSS & JS.</small>\n </footer>\n</body>\n</html>\n\n\n,hideSignIn:true,hideMenu:true
You are viewing a single comment's thread from: