Present your professional profile with this glassmorphism CV html website template using HTML5, CSS3, and JavaScript. A rectangular glass panel sits against a dark background illuminated by violet, indigo, and cyan gradients, creating a modern setting for your career information.
The layout combines a profile sidebar with interactive tabs for exploring your experience, education, skills, projects, and contact details. On typical desktop screens, the main card fits within one screen while longer tab content scrolls inside its panel. Mobile layouts use natural page scrolling to keep every section accessible.
What you will build
You will build a responsive CV html website with a glassmorphism interface and rectangular content cards. The template includes:
A dark background with soft gradient lighting.
A central rectangular glass panel with subtle borders.
A profile sidebar with a photo, name, and professional title.
Contact details, social links, and an availability badge.
Six tabs: About, Experience, Education, Skills, Projects, and Contact.
Career highlight cards and a professional summary.
Experience cards with achievement-focused bullet points.
Education and certification details.
Skill bars with labeled sample self-assessment values.
Project cards with descriptions, technology tags, and links.
Keyboard-accessible tab navigation.
A compact desktop layout and responsive mobile presentation.
A “Print / Save CV” button that includes all sections in print.
HTML source
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="An illustrative frontend developer CV for Alex Morgan: experience, education, skills, and selected projects.">
<meta name="theme-color" content="#080c18">
<title>Alex Morgan — Frontend Developer</title>
</head>
<body>
<!-- Decorative lighting and a shared, local outline icon set. -->
<div class="ambient ambient-violet" aria-hidden="true"></div><div class="ambient ambient-cyan" aria-hidden="true"></div>
<svg class="icon-library" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs>
<symbol id="pin" viewBox="0 0 24 24"><path d="M20 10c0 6-8 11-8 11S4 16 4 10a8 8 0 1 1 16 0Z"></path><circle cx="12" cy="10" r="2.5"></circle></symbol>
<symbol id="mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m3 6 9 7 9-7"></path></symbol>
<symbol id="arrow" viewBox="0 0 24 24"><path d="M7 17 17 7M7 7h10v10"></path></symbol>
<symbol id="code" viewBox="0 0 24 24"><path d="m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18"></path></symbol>
<symbol id="print" viewBox="0 0 24 24"><path d="M6 9V3h12v6M6 17H3V9h18v8h-3M6 14h12v7H6zM17 12h1"></path></symbol>
<symbol id="phone" viewBox="0 0 24 24"><path d="m8 3 3 5-3 3a17 17 0 0 0 5 5l3-3 5 3c0 4-2 5-4 5C10 21 3 14 3 7c0-2 1-4 5-4Z"></path></symbol>
<symbol id="linkedin" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"></rect><path d="M7 10v7M7 7v.1M11 17v-7m0 3c0-4 6-4 6 0v4"></path></symbol>
<symbol id="github" viewBox="0 0 24 24"><path d="M9 21v-4c-4 1-4-2-6-2m12 6v-4c0-1-.3-2-1-2 4-.5 6-2 6-5 0-1-.4-2-1-3 .2-1 .2-2-.3-3-2 0-3 1-3 1a13 13 0 0 0-7.4 0S7 4 5 4c-.5 1-.5 2-.3 3C4 8 4 9 4 10c0 3 2 4.5 6 5-.7 0-1 1-1 2"></path></symbol>
<symbol id="globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><ellipse cx="12" cy="12" rx="4" ry="9"></ellipse><path d="M3 12h18"></path></symbol>
</defs></svg>
<main class="cv-card">
<aside class="profile" aria-label="Profile and contact details">
<div class="profile-top">
<div class="portrait"><span class="portrait-fallback" aria-hidden="true">AM</span><img src="images/profile.jpg" alt="Portrait of Alex Morgan, fictional frontend developer" width="144" height="144"></div>
<span class="availability"><span aria-hidden="true"></span> Available for opportunities</span>
<h1>Alex Morgan<span class="accent">.</span></h1>
<p class="job-title">Frontend Developer</p>
<p class="intro">Thoughtful interfaces.<br>Clean code. Meaningful experiences.</p>
<div class="profile-details">
<p><svg class="icon" aria-hidden="true"><use href="#pin"></use></svg> Portland, Oregon</p>
<a href="mailto:alex.morgan@example.com"><svg class="icon" aria-hidden="true"><use href="#mail"></use></svg> alex.morgan@example.com</a>
</div>
<div class="socials" aria-label="Sample social links">
<a href="https://example.com/linkedin" aria-label="Alex’s LinkedIn (replace sample URL)"><svg class="icon" aria-hidden="true"><use href="#linkedin"></use></svg></a>
<a href="https://example.com/github" aria-label="Alex’s GitHub (replace sample URL)"><svg class="icon" aria-hidden="true"><use href="#github"></use></svg></a>
<a href="https://example.com/portfolio" aria-label="Alex’s portfolio (replace sample URL)"><svg class="icon" aria-hidden="true"><use href="#globe"></use></svg></a>
</div>
</div>
<div class="profile-bottom"><button class="print-button" type="button"><svg class="icon" aria-hidden="true"><use href="#print"></use></svg> Print / Save CV</button><p class="sample-note">Fictional profile · Sample CV</p></div>
</aside>
<div class="workspace">
<!-- JavaScript adds tab roles only after the interactions are ready. -->
<nav class="tab-nav" aria-label="CV sections"><div class="tabs">
<a href="#about" id="tab-about">About</a><a href="#experience" id="tab-experience">Experience</a><a href="#education" id="tab-education">Education</a><a href="#skills" id="tab-skills">Skills</a><a href="#projects" id="tab-projects">Projects</a><a href="#contact" id="tab-contact">Contact</a>
</div></nav>
<div class="panels">
<section id="about" class="panel" aria-labelledby="heading-about">
<header class="section-header"><p class="eyebrow">A LITTLE ABOUT ME</p><h2 id="heading-about">Building for the <span class="gradient-text">human side.</span></h2><p>I turn complex ideas into clear, accessible digital experiences.</p></header>
<div class="summary"><p>Hello, I’m Alex — a frontend developer who cares as much about how a product feels as how it works. I build responsive, inclusive interfaces with a focus on performance and the little details that make a difference.</p><p>My work brings design and engineering together, from the first wireframe to a polished release. I enjoy collaborative teams, thoughtful feedback, and making the web a little easier to use.</p></div>
<div class="highlights"><article class="highlight"><span class="stat">04<span>+</span></span><h3>Years building</h3><p>Web experiences that work</p></article><article class="highlight"><span class="stat">18<span>+</span></span><h3>Projects delivered</h3><p>From concept to launch</p></article><article class="highlight"><span class="stat">A11y</span><h3>By design</h3><p>Inclusive from the start</p></article></div>
<div class="subheading"><h3>Where I make an impact</h3><span>AREAS OF EXPERTISE</span></div>
<div class="expertise"><div><svg class="icon" aria-hidden="true"><use href="#code"></use></svg><h4>Frontend engineering</h4><p>Responsive, maintainable interfaces built on strong web fundamentals.</p></div><div><svg class="icon" aria-hidden="true"><use href="#globe"></use></svg><h4>Accessible experiences</h4><p>Useful interactions for people, devices, and abilities of all kinds.</p></div></div>
<p class="panel-footnote">Curiosity in the process. Care in the details.</p>
</section>
<section id="experience" class="panel" aria-labelledby="heading-experience"><header class="section-header"><p class="eyebrow">THE JOURNEY SO FAR</p><h2 id="heading-experience">Experience<span class="accent">.</span></h2><p>Turning product challenges into better everyday experiences.</p></header>
<article class="content-card"><div class="card-heading"><div><h3>Frontend Developer</h3><p class="company">Northstar Studio · Fictional company</p></div><span class="date">2023 — Present</span></div><ul><li>Rebuilt a customer dashboard with semantic HTML and reusable components, reducing repeated interface code by 30%.</li><li>Improved page loading by 35% through image optimization and smaller JavaScript bundles.</li><li>Partnered with designers to improve keyboard navigation and screen reader support across core flows.</li></ul><div class="tags"><span>JavaScript</span><span>CSS</span><span>Accessibility</span></div></article>
<article class="content-card"><div class="card-heading"><div><h3>Junior Frontend Developer</h3><p class="company">Form & Field Digital · Fictional company</p></div><span class="date">2021 — 2023</span></div><ul><li>Delivered eight responsive marketing websites in collaboration with design and content teams.</li><li>Created a shared component library that shortened landing page production time by 25%.</li><li>Resolved cross-browser layout issues and documented implementation patterns for the team.</li></ul><div class="tags"><span>HTML5</span><span>CSS3</span><span>Git</span></div></article><p class="panel-footnote">All roles, dates, and achievements are illustrative sample content.</p>
</section>
<section id="education" class="panel" aria-labelledby="heading-education"><header class="section-header"><p class="eyebrow">ALWAYS LEARNING</p><h2 id="heading-education">A foundation in curiosity<span class="accent">.</span></h2><p>Formal education, practical exploration, and continuous growth.</p></header><h3 class="group-title">Education</h3><article class="content-card"><div class="card-heading"><div><h3>BSc in Computer Science</h3><p class="company">Cascadia Institute of Technology · Fictional institution</p></div><span class="date">2021</span></div><p>Coursework in human-computer interaction, software engineering, and web technologies. Capstone: an accessible community resource directory.</p></article><h3 class="group-title">Certifications & continuing education</h3><article class="content-card"><div class="card-heading"><div><h3>Accessible Web Interfaces</h3><p class="company">Open Path Academy · Fictional issuer</p></div><span class="date">2024</span></div><p>Semantic markup, keyboard interaction patterns, and inclusive interface testing.</p></article><article class="content-card"><div class="card-heading"><div><h3>Modern JavaScript Foundations</h3><p class="company">Webcraft Learning · Fictional issuer</p></div><span class="date">2022</span></div><p>Asynchronous programming, browser APIs, and maintainable application architecture.</p></article></section>
<section id="skills" class="panel" aria-labelledby="heading-skills"><header class="section-header"><p class="eyebrow">MY TOOLKIT</p><h2 id="heading-skills">Built on the fundamentals<span class="accent">.</span></h2><p>The tools I use to bring thoughtful ideas to life.</p></header><h3 class="group-title">Technical skills</h3><p class="skill-note">Fictional sample self-assessments; these values are illustrative, not verified proficiency scores.</p><div class="skill-list">
<div class="skill"><div><label for="html-skill">HTML5 & semantic markup</label><span>95%</span></div><progress id="html-skill" max="100" value="95">95%</progress></div>
<div class="skill"><div><label for="css-skill">CSS3 & responsive design</label><span>90%</span></div><progress id="css-skill" max="100" value="90">90%</progress></div>
<div class="skill"><div><label for="js-skill">JavaScript</label><span>85%</span></div><progress id="js-skill" max="100" value="85">85%</progress></div>
<div class="skill"><div><label for="a11y-skill">Web accessibility</label><span>80%</span></div><progress id="a11y-skill" max="100" value="80">80%</progress></div>
<div class="skill"><div><label for="git-skill">Git & collaborative workflows</label><span>85%</span></div><progress id="git-skill" max="100" value="85">85%</progress></div>
</div><h3 class="group-title">The human skills</h3><div class="tags soft-skills"><span>Clear communication</span><span>Creative problem-solving</span><span>Collaboration</span><span>Attention to detail</span><span>Adaptability</span><span>Ownership</span></div></section>
<section id="projects" class="panel" aria-labelledby="heading-projects"><header class="section-header"><p class="eyebrow">SELECTED WORK</p><h2 id="heading-projects">Ideas, made tangible<span class="accent">.</span></h2><p>A few fictional projects that show how I approach the web.</p></header>
<article class="content-card project"><span class="project-number">01 / PRODUCTIVITY</span><h3>Focus — A calmer task manager</h3><p>A browser-based workspace for organizing daily tasks, with keyboard shortcuts, local storage, and a distraction-free interface.</p><div class="tags"><span>HTML</span><span>CSS Grid</span><span>JavaScript</span></div><a class="project-link" href="https://example.com/projects/focus">Explore Focus demo <svg class="icon" aria-hidden="true"><use href="#arrow"></use></svg></a></article>
<article class="content-card project"><span class="project-number">02 / DATA VISUALIZATION</span><h3>Weatherly — Your day, at a glance</h3><p>A responsive sample weather dashboard with readable forecast cards, unit preferences, and accessible data summaries.</p><div class="tags"><span>JavaScript</span><span>REST API</span><span>Responsive CSS</span></div><a class="project-link" href="https://example.com/projects/weatherly">Explore Weatherly demo <svg class="icon" aria-hidden="true"><use href="#arrow"></use></svg></a></article>
<article class="content-card project"><span class="project-number">03 / DESIGN SYSTEM</span><h3>Forma — A small interface toolkit</h3><p>A documented collection of accessible navigation, buttons, and layout primitives for consistent product experiences.</p><div class="tags"><span>Semantic HTML</span><span>CSS variables</span><span>Accessibility</span></div><a class="project-link" href="https://example.com/projects/forma">Explore Forma toolkit <svg class="icon" aria-hidden="true"><use href="#arrow"></use></svg></a></article><p class="panel-footnote">All project links are replaceable example.com placeholders. Add your own live URLs.</p></section>
<section id="contact" class="panel" aria-labelledby="heading-contact"><header class="section-header"><p class="eyebrow">LET’S CONNECT</p><h2 id="heading-contact">Good things start with <span class="gradient-text">a conversation.</span></h2><p>Have an interesting challenge or an opportunity in mind? I’d love to discuss how I can contribute to your team.</p></header><div class="contact-grid"><a class="content-card contact-item" href="mailto:alex.morgan@example.com"><svg class="icon" aria-hidden="true"><use href="#mail"></use></svg><span><small>EMAIL</small>alex.morgan@example.com</span></a><a class="content-card contact-item" href="tel:+12025550147"><svg class="icon" aria-hidden="true"><use href="#phone"></use></svg><span><small>PHONE</small>+1 (202) 555-0147</span></a><div class="content-card contact-item"><svg class="icon" aria-hidden="true"><use href="#pin"></use></svg><span><small>BASED IN</small>Portland, Oregon · Open to remote</span></div></div><h3 class="group-title">Elsewhere on the web</h3><div class="contact-socials"><a href="https://example.com/linkedin">LinkedIn <svg class="icon" aria-hidden="true"><use href="#arrow"></use></svg></a><a href="https://example.com/github">GitHub <svg class="icon" aria-hidden="true"><use href="#arrow"></use></svg></a><a href="https://example.com/portfolio">Portfolio <svg class="icon" aria-hidden="true"><use href="#arrow"></use></svg></a></div><p class="panel-footnote">Fictional contact details. Replace the email, phone, and sample social URLs before sharing.</p></section>
</div>
</div>
</main>
</body></html>
CSS source
/* Theme tokens: the opaque base also serves browsers without backdrop-filter. */
:root{color-scheme:dark;--bg:#080c18;--surface:rgba(18,23,40,.94);--glass:rgba(255,255,255,.035);--border:rgba(255,255,255,.1);--text:#f4f5fb;--muted:#a7afc4;--violet:#ae9aff;--cyan:#87ddd8;--gradient:linear-gradient(110deg,#b1a0ff,#88dce4);--radius:18px;--small-radius:10px;--blur:28px;--space:clamp(24px,3.4vw,48px)}
*{box-sizing:border-box}html{min-width:0;background:var(--bg)}body{margin:0;min-height:100svh;padding: max(28px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));display:grid;place-items:center;font:14px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(ellipse at 12% 15%,#29205066,transparent 48%),radial-gradient(ellipse at 90% 90%,#10383e55,transparent 45%),linear-gradient(135deg,#101429,#070a12);overflow-wrap:anywhere}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a:hover{color:var(--violet)}a:focus-visible,button:focus-visible,[role=tabpanel]:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{line-height:1.3}p{color:var(--muted)}.ambient{position:fixed;width:320px;height:320px;border-radius:50%;filter:blur(95px);pointer-events:none;opacity:.22}.ambient-violet{background:#7751e8;left:2%;top:4%}.ambient-cyan{background:#258f9a;right:0;bottom:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.cv-card{position:relative;width:min(1160px,100%);display:grid;grid-template-columns:28% minmax(0,1fr);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 30px 90px #0006,inset 0 1px 0 #ffffff05;overflow:hidden}.profile{padding:36px 28px 24px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between;gap:32px;background:linear-gradient(155deg,#ffffff03,transparent)}.portrait{width:120px;height:120px;position:relative;margin-bottom:23px;border:1px solid #b8a8ff40;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#464465,#202f43)}.portrait img{position:relative;width:100%;height:100%;object-fit:cover;display:block}.portrait-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:36px;font-weight:600;color:#e1d9ff}.portrait img.image-missing{visibility:hidden}.availability{font-size:10px;color:#a4ddc7;display:flex;align-items:center;gap:7px;margin-bottom:17px}.availability>span{width:6px;height:6px;border-radius:50%;background:#83d5b3;box-shadow:0 0 10px #83d5b344}h1{font-size:29px;letter-spacing:-1px;margin-bottom:6px}.accent{color:var(--violet)}.job-title{color:#c5b8fb;font-size:13px;margin-bottom:21px}.intro{font-size:13px;line-height:1.85;margin-bottom:25px}.profile-details{font-size:11px;display:grid;gap:12px}.profile-details p,.profile-details a{display:flex;align-items:center;gap:9px;margin:0;color:var(--muted)}.profile-details .icon{width:16px;height:16px;color:#9599b2}.socials{display:flex;gap:9px;margin-top:24px}.socials a{width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--glass)}.socials a:hover,.print-button:hover{background:#a995ff15;border-color:#b4a0ff66}.print-button{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:44px;border:1px solid #ab99ed40;border-radius:8px;background:linear-gradient(120deg,#9280df18,#819ee00a);color:#e1dcf6;cursor:pointer;font-size:12px}.sample-note{text-align:center;font-size:10px;margin:12px 0 0;color:#8c95ab}.workspace{min-width:0;display:flex;flex-direction:column;min-height:0}.tab-nav{padding:0 var(--space);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto}.tabs{display:flex;width:max-content;min-width:100%;gap:25px}.tabs a{position:relative;display:grid;place-items:center;min-height:73px;font-size:12px;color:var(--muted);white-space:nowrap}.tabs a[aria-selected=true]{color:#d6caff}.tabs a[aria-selected=true]:after{content:"";position:absolute;height:2px;bottom:0;left:0;right:0;background:var(--gradient);border-radius:2px}.panels{min-height:0}.panel{padding:34px var(--space) 24px}.panel[hidden]{display:none}.section-header{margin-bottom:24px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.1px;color:#aba0d0;margin-bottom:13px}h2{font-size:clamp(26px,2.65vw,34px);letter-spacing:-1px;margin-bottom:12px;font-weight:600}.gradient-text{background:var(--gradient);background-clip:text;-webkit-background-clip:text;color:transparent}.section-header>p:last-child{font-size:13px;margin-bottom:0;max-width:540px}.summary{font-size:12px;line-height:1.9}.summary p{margin-bottom:13px}.highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:25px 0 28px}.highlight{padding:17px 15px;border:1px solid var(--border);border-radius:var(--small-radius);background:linear-gradient(145deg,#ffffff05,#ffffff01)}.stat{display:block;font-size:29px;line-height:1.3;font-weight:600;letter-spacing:-1px;margin-bottom:10px}.stat>span{font-size:22px;color:var(--violet)}.highlight h3{font-size:11px;margin-bottom:4px;font-weight:500}.highlight p{font-size:9px;margin:0}.subheading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}.subheading h3,.group-title{font-size:14px;font-weight:500;margin-bottom:0}.subheading>span{font-size:8px;letter-spacing:1.4px;color:#858da7}.expertise{display:grid;grid-template-columns:1fr 1fr;gap:24px}.expertise .icon{color:var(--violet);margin-bottom:10px}.expertise h4{font-size:12px;margin-bottom:7px;font-weight:500}.expertise p{font-size:11px;margin-bottom:0}.panel-footnote{border-top:1px solid var(--border);padding-top:16px;margin:25px 0 0;font-size:10px;color:#909ab2}.content-card{padding:22px;border:1px solid var(--border);border-radius:var(--small-radius);background:var(--glass);margin-bottom:16px}.card-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.content-card h3{font-size:16px;font-weight:500;margin-bottom:7px}.company{font-size:12px;color:#beb0eb;margin-bottom:10px}.date{white-space:nowrap;font-size:10px;color:var(--muted);padding:4px 8px;background:#ffffff04;border:1px solid var(--border);border-radius:5px}.content-card p,.content-card li{font-size:12px}.content-card p:last-child{margin-bottom:0}.content-card ul{padding-left:17px;color:var(--muted);margin:8px 0 18px}.content-card li{margin-bottom:9px;padding-left:3px}.tags{display:flex;gap:7px;flex-wrap:wrap}.tags span{font-size:10px;color:#c8bfee;background:#a492f20a;border:1px solid #a492f220;padding:3px 9px;border-radius:5px}.group-title{margin:24px 0 15px}.skill-note{font-size:11px}.skill-list{display:grid;gap:20px;margin:25px 0 35px}.skill>div{display:flex;justify-content:space-between;gap:15px;font-size:12px;margin-bottom:8px}.skill>div>span{color:#b9abeb;font-size:11px}progress{display:block;appearance:none;border:none;width:100%;height:6px;border-radius:4px;overflow:hidden;background:#ffffff0c;color:#ac9bef}progress::-webkit-progress-bar{background:#ffffff0c;border-radius:4px}progress::-webkit-progress-value{background:var(--gradient);border-radius:4px}progress::-moz-progress-bar{background:var(--gradient);border-radius:4px}.soft-skills{gap:10px}.soft-skills span{padding:7px 12px}.project-number{font-size:9px;letter-spacing:1.4px;color:#aba0d0;display:block;margin-bottom:12px}.project-link{display:inline-flex;align-items:center;gap:8px;color:#c6b7fc;font-size:11px;margin-top:18px;min-height:30px}.project-link .icon{width:15px;height:15px}.contact-item{display:flex;gap:17px;align-items:center;min-height:89px}.contact-item>.icon{color:var(--violet)}.contact-item span{font-size:13px}.contact-item small{display:block;font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-bottom:5px}.contact-socials{display:flex;flex-wrap:wrap;gap:24px}.contact-socials a{display:flex;align-items:center;gap:8px;font-size:12px;min-height:44px}.contact-socials .icon{width:15px;height:15px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cv-card{background:rgba(17,22,38,.76);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}}
/* Constrain only enhanced desktop layouts; the unenhanced document stays readable. */
@media(min-width:901px) and (min-height:741px){html.enhanced .cv-card{height:min(740px,calc(100svh - 56px))}html.enhanced .panels{flex:1;display:flex;overflow:hidden}html.enhanced .panel{width:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#59607a transparent}}
@media(max-width:1050px){.profile{padding:30px 22px}.tabs{gap:19px}h1{font-size:25px}.profile-details{font-size:10px}.highlights{gap:8px}.highlight{padding:15px 11px}}
@media(max-width:900px){body{padding:24px}.cv-card{grid-template-columns:1fr;max-width:720px}.profile{border-right:0;border-bottom:1px solid var(--border);padding:28px;gap:24px}.profile-top{padding-left:154px;position:relative;min-height:145px}.portrait{position:absolute;left:0;top:0}.availability{margin-bottom:10px}.intro{margin:12px 0}.profile-details{font-size:12px}.profile-details p,.profile-details a{min-height:28px}.socials{margin-top:15px}.profile-bottom{max-width:260px}.tab-nav{padding:0 28px}.tabs{gap:27px}.tabs a{min-height:62px}.panel{padding:28px}.highlights p{font-size:10px}}
@media(max-width:520px){body{padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.profile{padding:24px}.profile-top{padding-left:0}.portrait{position:relative;width:100px;height:100px;margin-bottom:20px}.profile-bottom{max-width:none}.tab-nav{padding:0 24px}.tabs{gap:24px}.panel{padding:28px 24px}.highlights{grid-template-columns:1fr;gap:10px}.highlight{display:grid;grid-template-columns:65px 1fr;padding:15px}.stat{grid-row:span 2;font-size:27px;margin:0}.highlight h3{font-size:12px;align-self:end}.highlight p{font-size:11px}.expertise{grid-template-columns:1fr;gap:22px}.subheading{align-items:flex-start;flex-direction:column;gap:7px}.card-heading{flex-direction:column;gap:0}.date{margin-bottom:15px}.content-card{padding:18px}.contact-item span{font-size:12px}h2{font-size:28px}}
@media(prefers-reduced-motion:no-preference){html.enhanced .panel:not([hidden]){animation:panel-in .22s ease-out}@keyframes panel-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}a,button{transition:color .18s,background .18s,border-color .18s}}
@page{size:A4;margin:15mm}
@media print{ :root{color-scheme:light;--text:#17202e;--muted:#424b59;--border:#d6d9df}html,body{background:white!important;color:var(--text);min-height:0;padding:0;font-size:10pt}body{display:block}.ambient,.tab-nav,.print-button,.sample-note,.icon-library{display:none!important}.cv-card,html.enhanced .cv-card{display:block;width:100%;height:auto;max-height:none;border:0;border-radius:0;background:white;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}.profile{padding:0 0 20px;border:0;border-bottom:1px solid #ddd;display:block;background:none}.profile-top{padding-left:120px;position:relative;min-height:100px}.portrait{position:absolute;left:0;top:0;width:95px;height:95px}.profile-bottom{display:none}h1{font-size:25pt}.intro{margin:8px 0}.job-title{margin-bottom:8px}.profile-details{display:flex;gap:20px;flex-wrap:wrap}.socials{display:none}.availability{color:#24533e}.workspace,html.enhanced .panels{display:block;overflow:visible}.panel,.panel[hidden],html.enhanced .panel{display:block!important;overflow:visible!important;height:auto;padding:22px 0 0;animation:none}.section-header{margin-bottom:14px}h2{font-size:21pt}.gradient-text{color:#30265c;background:none}.accent,.company,.project-link,.eyebrow,.stat>span,.project-number{color:#463477}.content-card,.highlight{background:white;box-shadow:none;break-inside:avoid;page-break-inside:avoid}.content-card{padding:15px;margin-bottom:12px}.highlights{grid-template-columns:repeat(3,1fr);margin:18px 0}.expertise{grid-template-columns:1fr 1fr}.card-heading{flex-direction:row}.subheading{flex-direction:row}.tags span{color:#352b50;border-color:#ccc;background:none}.date{color:#424b59;background:none}.contact-item small,.panel-footnote,.sample-note{color:#555}.panel-footnote{margin-top:14px}.section-header,h3{break-after:avoid}.skill-list{gap:12px}.skill>div>span{color:#463477}progress{print-color-adjust:exact;-webkit-print-color-adjust:exact}.contact-socials a{color:#30265c}.contact-grid a,.project-link{overflow-wrap:anywhere} }
/* A visibly translucent glass shell, with an opaque fallback. */
:root{--surface:rgba(19,24,43,.91);--blur:32px}
body{background:radial-gradient(ellipse at 18% 24%,#6550ac88,transparent 47%),radial-gradient(ellipse at 78% 76%,#21778166,transparent 48%),radial-gradient(ellipse at 75% 8%,#343d9466,transparent 42%),linear-gradient(135deg,#11152b,#070a12)}
.ambient{width:420px;height:420px;filter:blur(75px);opacity:.38}
.ambient-violet{left:9%;top:5%;background:#8461e8}
.ambient-cyan{right:8%;bottom:2%;background:#278eaa}
.cv-card{border:1px solid rgba(224,229,255,.24);border-top-color:rgba(240,239,255,.39);border-left-color:rgba(231,225,255,.29);box-shadow:0 32px 90px #0006,inset 0 1px 0 #ffffff14,inset 0 -1px 0 #ffffff05;background:var(--surface)}
.profile{background:linear-gradient(150deg,#ffffff08,#ffffff01)}
.highlight,.content-card{background:linear-gradient(135deg,#ffffff09,#ffffff03);border-color:#ffffff17;box-shadow:inset 0 1px 0 #ffffff04}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.cv-card{background:linear-gradient(125deg,rgba(38,35,65,.48),rgba(15,22,38,.51) 55%,rgba(20,41,51,.42));backdrop-filter:blur(var(--blur)) saturate(145%);-webkit-backdrop-filter:blur(var(--blur)) saturate(145%)}
}
@media print{
body{background:white!important}
.cv-card,html.enhanced .cv-card{background:white;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.profile,.highlight,.content-card{background:white;box-shadow:none}
.highlight,.content-card{border-color:#d6d9df}
}
JavaScript source
/* Progressive enhancement: without JS, anchors navigate every visible section. */
(() => {
'use strict';
const tabList = document.querySelector('.tabs');
const tabs = Array.from(tabList.querySelectorAll('a'));
const panels = tabs.map(tab => document.querySelector(tab.getAttribute('href')));
function activate(index) {
tabs.forEach((tab, i) => {
tab.setAttribute('aria-selected', String(i === index));
tab.tabIndex = i === index ? 0 : -1;
panels[i].hidden = i !== index;
});
// Activation never moves focus into the panel or resets its scroll position.
}
tabList.setAttribute('role', 'tablist');
tabList.setAttribute('aria-label', 'CV sections');
tabs.forEach((tab, index) => {
tab.setAttribute('role', 'tab');
tab.setAttribute('aria-controls', panels[index].id);
panels[index].setAttribute('role', 'tabpanel');
panels[index].setAttribute('aria-labelledby', tab.id);
panels[index].tabIndex = 0;
tab.addEventListener('click', event => {
event.preventDefault();
activate(index);
});
// Manual activation: arrows move between tabs; Enter/Space selects a panel.
tab.addEventListener('keydown', event => {
let target;
if (event.key === 'ArrowRight') target = (index + 1) % tabs.length;
else if (event.key === 'ArrowLeft') target = (index - 1 + tabs.length) % tabs.length;
else if (event.key === 'Home') target = 0;
else if (event.key === 'End') target = tabs.length - 1;
else if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
activate(index);
return;
} else return;
event.preventDefault();
tabs.forEach((item, i) => { item.tabIndex = i === target ? 0 : -1; });
tabs[target].focus();
});
});
const initial = panels.findIndex(panel => `#${panel.id}` === window.location.hash);
activate(initial < 0 ? 0 : initial);
document.documentElement.classList.add('enhanced');
document.querySelector('.print-button').addEventListener('click', () => window.print());
// Keep the initials frame attractive until a real images/profile.jpg is added.
const photo = document.querySelector('.portrait img');
const handleMissingPhoto = () => photo.classList.add('image-missing');
photo.addEventListener('error', handleMissingPhoto);
if (photo.complete && photo.naturalWidth === 0) handleMissingPhoto();
})();
How it works
The project uses index.html for the CV structure, style.css for glass effects and responsive styling, and script.js for tab switching, skill animations, and printing. Personal details, photos, links, and colors can be customized directly in the source files.
Try a change
Choose Edit code, make a small change, then press Run to preview it.
Use the source Copy buttons, choose Edit code to open the editor, or Download ZIP to save the project after a six-second countdown.





.webp)

Discussion (0)
Leave a comment