Loading…
Loading…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>John Doe | Full-Stack Developer Portfolio</title>
<meta name="description" content="Responsive full-stack developer portfolio landing page with projects, services, process, FAQ, and contact links.">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css">
</head>
<body>
<div class="portfolio-page">
<a class="skip-link" href="#main-content">Skip to content</a>
<header class="site-header">
<nav class="navbar navbar-expand-lg site-nav" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand brand" href="#home"><span class="brand-icon" aria-hidden="true"></></span><span>John Doe</span></a>
<button class="navbar-toggler menu-toggle" type="button" aria-controls="primary-menu" aria-expanded="false" aria-label="Open navigation menu"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="primary-menu">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1">
<li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#stack">Stack</a></li>
<li class="nav-item"><a class="nav-link" href="#process">Process</a></li>
<li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
<li class="nav-item ms-lg-2"><a class="btn btn-primary-custom btn-sm px-3" href="#contact">Hire Me</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="main-content">
<section class="hero-section" id="home">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-7">
<p class="availability"><span class="status-dot" aria-hidden="true"></span> Available for product builds and audits</p>
<h1>Building scalable web products that users actually enjoy.</h1>
<p class="hero-copy">I'm John Doe, a full-stack developer helping teams ship fast, secure, and maintainable web applications, dashboards, APIs, and automation tools.</p>
<div class="d-flex flex-wrap gap-3">
<a href="#projects" class="btn btn-primary-custom btn-lg">View Projects <i class="fa-solid fa-arrow-right ms-2" aria-hidden="true"></i></a>
<a href="mailto:hello@johndoe.dev" class="btn btn-secondary-custom btn-lg">Start a Project</a>
</div>
<dl class="metrics">
<div><dt>7+</dt><dd>Years experience</dd></div>
<div><dt>38</dt><dd>Projects shipped</dd></div>
<div><dt>96%</dt><dd>Client satisfaction</dd></div>
</dl>
</div>
<div class="col-lg-5">
<aside class="profile-card">
<div class="profile-avatar" role="img" aria-label="User profile placeholder for John Doe"><i class="fa-solid fa-user-astronaut" aria-hidden="true"></i></div>
<div class="profile-details">
<div><h2>John Doe</h2><p>Full-Stack Developer</p></div>
<span class="location-pill"><i class="fa-solid fa-location-dot me-1" aria-hidden="true"></i> Remote</span>
</div>
<div class="quick-stack"><span>Core Stack</span><code>React · Laravel · Node.js · PostgreSQL</code></div>
</aside>
</div>
</div>
</div>
</section>
<section class="trust-strip" aria-label="Project types">
<div class="container"><div class="trust-grid"><span><i class="fa-solid fa-chart-line" aria-hidden="true"></i>SaaS dashboards</span><span><i class="fa-solid fa-cart-shopping" aria-hidden="true"></i>Commerce</span><span><i class="fa-solid fa-gears" aria-hidden="true"></i>Internal tools</span><span><i class="fa-solid fa-plug-circle-bolt" aria-hidden="true"></i>Integrations</span></div></div>
</section>
<section class="content-section" id="services">
<div class="container">
<div class="section-heading text-center"><p class="eyebrow">Services</p><h2>Solutions built around your goals</h2><p>From first prototype to production optimization, this page helps position your services clearly.</p></div>
<div class="row g-4">
<div class="col-md-6 col-xl-3"><article class="service-card h-100"><i class="fa-solid fa-laptop-code" aria-hidden="true"></i><h3>Web Apps</h3><p>Responsive applications for real business workflows.</p></article></div>
<div class="col-md-6 col-xl-3"><article class="service-card h-100"><i class="fa-solid fa-plug" aria-hidden="true"></i><h3>API Integrations</h3><p>Secure connections between payments, CRMs, and tools.</p></article></div>
<div class="col-md-6 col-xl-3"><article class="service-card h-100"><i class="fa-solid fa-database" aria-hidden="true"></i><h3>Backend Systems</h3><p>Auth, databases, queues, and scalable service layers.</p></article></div>
<div class="col-md-6 col-xl-3"><article class="service-card h-100"><i class="fa-solid fa-gauge-high" aria-hidden="true"></i><h3>Optimization</h3><p>Speed, accessibility, maintainability, and deployment reviews.</p></article></div>
</div>
</div>
</section>
<section class="content-section" id="projects">
<div class="container">
<div class="d-md-flex justify-content-between align-items-end gap-4 mb-4"><div class="section-heading mb-0"><p class="eyebrow">Selected Work</p><h2>Featured projects</h2><p>Replace these sample case studies with your own work.</p></div><div class="slider-controls"><button class="slider-button previous-project" type="button" aria-label="Show previous project"><i class="fa-solid fa-arrow-left" aria-hidden="true"></i></button><button class="slider-button next-project" type="button" aria-label="Show next project"><i class="fa-solid fa-arrow-right" aria-hidden="true"></i></button></div></div>
<div class="projects-slider" aria-roledescription="carousel" aria-label="Featured projects" tabindex="0">
<p class="visually-hidden" id="slider-status" aria-live="polite"></p>
<div class="slider-track">
<article class="portfolio-slide" aria-label="1 of 3"><img src="https://static.photos/technology/900x700/31" alt="Analytics dashboard interface" class="project-image"><div class="project-content"><div class="technology-tags"><span>React</span><span>Node.js</span><span>PostgreSQL</span></div><h3>InsightFlow Dashboard</h3><p>A reporting platform that centralizes metrics and automates exports.</p><p class="project-result"><strong>Outcome:</strong> Reduced monthly reporting time by 68%.</p></div></article>
<article class="portfolio-slide" aria-label="2 of 3" hidden><img src="https://static.photos/shopping/900x700/22" alt="Ecommerce website preview" class="project-image"><div class="project-content"><div class="technology-tags"><span>Next.js</span><span>Stripe</span><span>CMS</span></div><h3>MarketLane Commerce</h3><p>A fast storefront with secure checkout and mobile-first browsing.</p><p class="project-result"><strong>Outcome:</strong> Increased mobile conversions by 27%.</p></div></article>
<article class="portfolio-slide" aria-label="3 of 3" hidden><img src="https://static.photos/office/900x700/12" alt="Team workspace" class="project-image"><div class="project-content"><div class="technology-tags"><span>Vue</span><span>Laravel</span><span>AWS</span></div><h3>TeamBoard Workspace</h3><p>A collaboration hub with notifications, audit history, and permissions.</p><p class="project-result"><strong>Outcome:</strong> Improved delivery speed by 34%.</p></div></article>
</div>
<div class="slider-dots" role="group" aria-label="Select a project"><button class="slider-dot active" type="button" aria-label="Show project 1" aria-current="true"></button><button class="slider-dot" type="button" aria-label="Show project 2"></button><button class="slider-dot" type="button" aria-label="Show project 3"></button></div>
</div>
</div>
</section>
<section class="content-section surface-section" id="stack"><div class="container"><div class="section-heading text-center"><p class="eyebrow">Technology Stack</p><h2>Tools used to build and scale</h2></div><div class="row g-3 justify-content-center"><div class="col-6 col-sm-4 col-lg-2"><div class="skill-card"><i class="fa-brands fa-react" aria-hidden="true"></i><span>React</span></div></div><div class="col-6 col-sm-4 col-lg-2"><div class="skill-card"><i class="fa-brands fa-vuejs" aria-hidden="true"></i><span>Vue</span></div></div><div class="col-6 col-sm-4 col-lg-2"><div class="skill-card"><i class="fa-brands fa-node-js" aria-hidden="true"></i><span>Node.js</span></div></div><div class="col-6 col-sm-4 col-lg-2"><div class="skill-card"><i class="fa-brands fa-laravel" aria-hidden="true"></i><span>Laravel</span></div></div><div class="col-6 col-sm-4 col-lg-2"><div class="skill-card"><i class="fa-solid fa-database" aria-hidden="true"></i><span>PostgreSQL</span></div></div><div class="col-6 col-sm-4 col-lg-2"><div class="skill-card"><i class="fa-brands fa-aws" aria-hidden="true"></i><span>AWS</span></div></div></div></div></section>
<section class="content-section" id="process"><div class="container"><div class="row g-5"><div class="col-lg-4"><p class="eyebrow">Process</p><h2>A clear path from idea to launch.</h2><p class="section-lead">Show clients how you work and reduce uncertainty before they contact you.</p></div><div class="col-lg-8"><div class="process-list"><article><span>01</span><div><h3>Discover</h3><p>Clarify goals, users, constraints, and technical direction.</p></div></article><article><span>02</span><div><h3>Design and Build</h3><p>Create polished interfaces, backend logic, integrations, and workflows.</p></div></article><article><span>03</span><div><h3>Launch and Improve</h3><p>Deploy confidently, monitor performance, and plan iterations.</p></div></article></div></div></div></div></section>
<section class="content-section surface-section" id="faq"><div class="container"><div class="row g-5"><div class="col-lg-4"><p class="eyebrow">FAQ</p><h2>Common questions</h2></div><div class="col-lg-8"><div class="faq-list"><details><summary>Can this template be used for freelancers?</summary><p>Yes. Replace the sample content with your own services, projects, testimonials, and links.</p></details><details><summary>Does the carousel need Bootstrap JavaScript?</summary><p>No. It uses lightweight vanilla JavaScript included in the template.</p></details><details><summary>Can I add more project slides?</summary><p>Yes. Duplicate a slide and add a matching dot button.</p></details></div></div></div></div></section>
<section class="contact-section" id="contact"><div class="container"><div class="contact-card text-center"><p class="eyebrow">Let's Work Together</p><h2>Need a reliable developer for your next product?</h2><p>Share your goals and let's discuss how to build a fast, scalable, and user-friendly solution.</p><div class="d-flex flex-wrap justify-content-center gap-3"><a href="mailto:hello@johndoe.dev" class="btn btn-primary-custom btn-lg"><i class="fa-regular fa-envelope me-2" aria-hidden="true"></i>hello@johndoe.dev</a><a href="#projects" class="btn btn-dark-outline btn-lg">View Work</a></div><div class="social-links"><a href="#" aria-label="GitHub profile"><i class="fa-brands fa-github" aria-hidden="true"></i></a><a href="#" aria-label="LinkedIn profile"><i class="fa-brands fa-linkedin-in" aria-hidden="true"></i></a><a href="#" aria-label="Dribbble profile"><i class="fa-brands fa-dribbble" aria-hidden="true"></i></a></div></div></div></section>
</main>
<footer class="site-footer"><div class="container d-sm-flex justify-content-between align-items-center"><p class="mb-2 mb-sm-0">© <span id="current-year"></span> John Doe. All rights reserved.</p><a href="#home" class="text-link">Back to top <i class="fa-solid fa-arrow-up" aria-hidden="true"></i></a></div></footer>
</div>
</body>
</html>:root{--primary:#2563eb;--primary-dark:#1d4ed8;--heading:#0f172a;--body:#475569;--muted:#64748b;--border:#e2e8f0;--surface:#f8fafc;--white:#fff;--success:#16a34a;--radius:1.25rem;--shadow:0 24px 70px rgba(15,23,42,.12)}html{scroll-behavior:smooth}body{margin:0;background:var(--white)}.portfolio-page{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;color:var(--body);line-height:1.65;overflow-x:hidden}.portfolio-page *{box-sizing:border-box}.portfolio-page h1,.portfolio-page h2,.portfolio-page h3{color:var(--heading);font-weight:800;letter-spacing:-.045em;line-height:1.12}.skip-link{position:fixed;top:-4rem;left:1rem;z-index:1200;background:var(--heading);color:var(--white);padding:.7rem 1rem;border-radius:.55rem;text-decoration:none}.skip-link:focus{top:1rem;color:var(--white)}.site-header{position:sticky;top:0;z-index:1000;border-bottom:1px solid transparent;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);transition:.25s}.site-header.is-scrolled{border-color:var(--border);box-shadow:0 8px 28px rgba(15,23,42,.06)}.site-nav{min-height:4.75rem;padding:.85rem 0}.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--heading);font-weight:800}.brand-icon{display:grid;place-content:center;width:2.4rem;height:2.4rem;border-radius:.75rem;background:linear-gradient(135deg,var(--primary),#7c3aed);color:white;font-size:.9rem}.site-nav .nav-link{color:var(--muted);font-weight:700;padding:.55rem .75rem}.site-nav .nav-link:hover,.site-nav .nav-link:focus,.site-nav .nav-link.active{color:var(--primary)}.menu-toggle{border-color:var(--border);box-shadow:none!important}.btn-primary-custom{border:1px solid var(--primary);border-radius:.8rem;background:var(--primary);color:white;font-weight:750;box-shadow:0 12px 28px rgba(37,99,235,.18)}.btn-primary-custom:hover,.btn-primary-custom:focus{background:var(--primary-dark);border-color:var(--primary-dark);color:white}.btn-secondary-custom{border:1px solid var(--border);border-radius:.8rem;background:white;color:var(--heading);font-weight:750}.btn-secondary-custom:hover,.btn-secondary-custom:focus{border-color:var(--primary);color:var(--primary)}.hero-section{padding:clamp(4rem,8vw,7.5rem) 0 clamp(3.5rem,7vw,6rem);background:radial-gradient(circle at 85% 10%,rgba(37,99,235,.17),transparent 32%),radial-gradient(circle at 8% 28%,rgba(124,58,237,.12),transparent 35%),linear-gradient(180deg,#fff 0%,#f8fafc 100%);scroll-margin-top:5rem}.availability{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.15rem;padding:.45rem .9rem;border:1px solid #bfdbfe;border-radius:999px;background:#eff6ff;color:var(--primary-dark);font-size:.92rem;font-weight:750}.status-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px #dcfce7}.hero-section h1{max-width:800px;margin-bottom:1.3rem;font-size:clamp(2.45rem,5.8vw,4.85rem)}.hero-copy{max-width:650px;margin-bottom:2rem;color:var(--muted);font-size:clamp(1.03rem,2vw,1.18rem)}.metrics{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,3rem);margin:3rem 0 0}.metrics div{padding-right:clamp(1rem,3vw,2.3rem);border-right:1px solid var(--border)}.metrics div:last-child{border-right:0}.metrics dt{color:var(--heading);font-size:clamp(1.55rem,3vw,2.15rem);font-weight:850}.metrics dd{margin:.3rem 0 0;color:var(--muted);font-size:.92rem}.profile-card{max-width:430px;margin:0 auto;padding:.8rem;border:1px solid var(--border);border-radius:1.65rem;background:white;box-shadow:var(--shadow)}.profile-avatar{display:grid;place-items:center;height:clamp(300px,45vw,430px);border-radius:var(--radius);background:linear-gradient(145deg,#eff6ff,#dbeafe 55%,#bfdbfe);color:var(--primary)}.profile-avatar i{display:grid;place-items:center;width:clamp(8rem,22vw,11rem);height:clamp(8rem,22vw,11rem);border-radius:50%;background:rgba(255,255,255,.82);box-shadow:0 18px 45px rgba(37,99,235,.16);font-size:clamp(4rem,10vw,5.7rem)}.profile-details{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem .85rem .8rem}.profile-details h2{margin:0 0 .1rem;font-size:1.24rem}.profile-details p{margin:0;color:var(--muted)}.location-pill{padding:.32rem .72rem;border-radius:999px;background:#ecfdf5;color:#15803d;font-size:.8rem;font-weight:800;white-space:nowrap}.quick-stack{display:flex;flex-direction:column;gap:.35rem;margin:0 .25rem .25rem;padding:.95rem 1rem;border-radius:.85rem;background:var(--heading);color:#94a3b8;font-size:.84rem}.quick-stack code{color:#bfdbfe}.trust-strip{padding:1.2rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:white}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}.trust-grid span{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.75rem;border-radius:.8rem;background:var(--surface);color:var(--heading);font-weight:750;text-align:center}.trust-grid i{color:var(--primary)}.content-section{padding:clamp(3.5rem,7vw,5.8rem) 0;scroll-margin-top:4.8rem}.surface-section{background:var(--surface)}.eyebrow{margin-bottom:.55rem;color:var(--primary);font-size:.78rem;font-weight:850;letter-spacing:.17em;text-transform:uppercase}.content-section h2{margin-bottom:1rem;font-size:clamp(1.85rem,4vw,2.55rem)}.section-heading{max-width:680px;margin:0 auto 2.5rem}.section-heading>p:last-child:not(.eyebrow),.section-lead{color:var(--muted);font-size:clamp(1.03rem,2vw,1.16rem)}.service-card,.skill-card,.process-list article,.faq-list details{border:1px solid var(--border);background:white}.service-card{padding:clamp(1.35rem,3vw,1.85rem);border-radius:var(--radius);transition:.25s}.service-card:hover,.skill-card:hover{transform:translateY(-4px);box-shadow:0 16px 42px rgba(15,23,42,.08)}.service-card i{display:grid;place-content:center;width:3rem;height:3rem;margin-bottom:1.3rem;border-radius:.85rem;background:#dbeafe;color:var(--primary);font-size:1.22rem}.service-card h3{font-size:1.22rem}.service-card p{margin:0;color:var(--muted)}.slider-controls{display:flex;gap:.6rem;margin-top:1.1rem}.slider-button{display:grid;place-content:center;width:3rem;height:3rem;border:1px solid var(--border);border-radius:50%;background:white;color:var(--heading)}.slider-button:hover,.slider-button:focus-visible{border-color:var(--primary);background:var(--primary);color:white}.slider-track{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:white;box-shadow:0 20px 55px rgba(15,23,42,.07)}.portfolio-slide[hidden]{display:none}.portfolio-slide{display:grid;grid-template-columns:1fr 1fr}.project-image{width:100%;height:100%;min-height:360px;object-fit:cover}.project-content{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.45rem,4vw,3.2rem)}.technology-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.2rem}.technology-tags span{padding:.25rem .62rem;border-radius:999px;background:#eff6ff;color:var(--primary-dark);font-size:.78rem;font-weight:800}.project-result{padding:.85rem .95rem;border-left:3px solid var(--primary);border-radius:.5rem;background:var(--surface)}.slider-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.4rem}.slider-dot{width:.7rem;height:.7rem;padding:0;border:0;border-radius:999px;background:#cbd5e1}.slider-dot.active{width:1.9rem;background:var(--primary)}.skill-card{display:flex;flex-direction:column;align-items:center;gap:.65rem;height:100%;padding:1.25rem .6rem;border-radius:.95rem;color:var(--heading);font-weight:750;transition:.2s}.skill-card i{color:var(--primary);font-size:1.78rem}.process-list{display:grid;gap:1rem}.process-list article{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.25rem;border-radius:var(--radius)}.process-list span{display:grid;place-content:center;width:2.8rem;height:2.8rem;border-radius:.85rem;background:var(--primary);color:white;font-weight:850}.process-list p,.faq-list p{margin:0;color:var(--muted)}.faq-list{display:grid;gap:.85rem}.faq-list details{border-radius:.95rem;padding:1rem 1.15rem}.faq-list summary{color:var(--heading);cursor:pointer;font-weight:800}.faq-list p{margin-top:.8rem}.contact-section{padding:0 0 clamp(3.5rem,7vw,5.8rem);scroll-margin-top:5rem}.contact-card{padding:clamp(2.5rem,7vw,4.8rem) clamp(1.2rem,5vw,3rem);border-radius:1.55rem;background:radial-gradient(circle at 15% 10%,rgba(96,165,250,.28),transparent 34%),radial-gradient(circle at 90% 15%,rgba(124,58,237,.2),transparent 30%),var(--heading)}.contact-card h2{max-width:760px;margin:0 auto 1rem;color:white;font-size:clamp(1.9rem,4vw,2.65rem)}.contact-card>p:not(.eyebrow){max-width:625px;margin:0 auto 2rem;color:#cbd5e1}.btn-dark-outline{border:1px solid #334155;border-radius:.8rem;background:transparent;color:white;font-weight:750}.btn-dark-outline:hover,.btn-dark-outline:focus{border-color:#94a3b8;background:#1e293b;color:white}.social-links{display:flex;justify-content:center;gap:.8rem;margin-top:2.2rem}.social-links a{display:grid;place-content:center;width:2.75rem;height:2.75rem;border:1px solid #334155;border-radius:50%;color:#cbd5e1;text-decoration:none}.social-links a:hover,.social-links a:focus{border-color:#60a5fa;color:white}.site-footer{padding:1.8rem 0;border-top:1px solid var(--border);color:var(--muted);font-size:.92rem}.text-link{display:inline-flex;gap:.48rem;color:var(--primary);font-weight:800;text-decoration:none}.text-link:hover{text-decoration:underline}.portfolio-page a:focus-visible,.portfolio-page button:focus-visible,.portfolio-page summary:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}@media(max-width:991.98px){.site-nav .navbar-collapse{padding:.85rem 0 .35rem}.site-nav .nav-link{padding:.7rem 0}.trust-grid{grid-template-columns:repeat(2,1fr)}.portfolio-slide{grid-template-columns:1fr}}@media(max-width:575.98px){.metrics{gap:1rem}.metrics div{flex:1 1 30%;padding-right:.7rem}.profile-avatar{height:285px}.trust-grid{grid-template-columns:1fr}.project-image{min-height:230px}.process-list article{grid-template-columns:1fr}.contact-card .btn{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portfolio-page *{animation-duration:.001ms!important;transition-duration:.001ms!important}}document.addEventListener("DOMContentLoaded",function(){"use strict";const header=document.querySelector(".site-header"),menuButton=document.querySelector(".menu-toggle"),menu=document.getElementById("primary-menu"),navLinks=Array.from(document.querySelectorAll(".site-nav .nav-link")),year=document.getElementById("current-year"),slides=Array.from(document.querySelectorAll(".portfolio-slide")),dots=Array.from(document.querySelectorAll(".slider-dot")),slider=document.querySelector(".projects-slider"),status=document.getElementById("slider-status"),previousButton=document.querySelector(".previous-project"),nextButton=document.querySelector(".next-project"),socialLinks=Array.from(document.querySelectorAll(".social-links a[href='#']"));let activeIndex=0,touchStartX=null;if(year)year.textContent=String(new Date().getFullYear());socialLinks.forEach(function(link){link.addEventListener("click",function(event){event.preventDefault()})});function updateHeader(){if(header)header.classList.toggle("is-scrolled",window.scrollY>8)}function closeMenu(){if(!menu||!menuButton)return;menu.classList.remove("show");menuButton.setAttribute("aria-expanded","false");menuButton.setAttribute("aria-label","Open navigation menu")}if(menu&&menuButton){menuButton.addEventListener("click",function(){const isOpen=menu.classList.toggle("show");menuButton.setAttribute("aria-expanded",String(isOpen));menuButton.setAttribute("aria-label",isOpen?"Close navigation menu":"Open navigation menu")});navLinks.forEach(function(link){link.addEventListener("click",closeMenu)});document.addEventListener("keydown",function(event){if(event.key==="Escape")closeMenu()});document.addEventListener("click",function(event){if(!menu.contains(event.target)&&!menuButton.contains(event.target))closeMenu()})}function showSlide(index,announce){if(!slides.length)return;activeIndex=(index+slides.length)%slides.length;slides.forEach(function(slide,i){const isActive=i===activeIndex;slide.hidden=!isActive;slide.setAttribute("aria-hidden",String(!isActive))});dots.forEach(function(dot,i){const isActive=i===activeIndex;dot.classList.toggle("active",isActive);if(isActive)dot.setAttribute("aria-current","true");else dot.removeAttribute("aria-current")});if(announce&&status){const heading=slides[activeIndex].querySelector("h3");status.textContent="Showing project "+(activeIndex+1)+" of "+slides.length+": "+(heading?heading.textContent.trim():"project")+"."}}if(slides.length&&slider){showSlide(0,false);if(nextButton)nextButton.addEventListener("click",function(){showSlide(activeIndex+1,true)});if(previousButton)previousButton.addEventListener("click",function(){showSlide(activeIndex-1,true)});dots.forEach(function(dot,index){dot.addEventListener("click",function(){showSlide(index,true)})});slider.addEventListener("keydown",function(event){if(event.key==="ArrowRight"){event.preventDefault();showSlide(activeIndex+1,true)}else if(event.key==="ArrowLeft"){event.preventDefault();showSlide(activeIndex-1,true)}else if(event.key==="Home"){event.preventDefault();showSlide(0,true)}else if(event.key==="End"){event.preventDefault();showSlide(slides.length-1,true)}});slider.addEventListener("touchstart",function(event){touchStartX=event.changedTouches[0].clientX},{passive:true});slider.addEventListener("touchend",function(event){if(touchStartX===null)return;const distance=event.changedTouches[0].clientX-touchStartX;if(Math.abs(distance)>45)showSlide(distance<0?activeIndex+1:activeIndex-1,true);touchStartX=null},{passive:true})}if("IntersectionObserver"in window&&navLinks.length){const sections=navLinks.map(function(link){const href=link.getAttribute("href");return href&&href.startsWith("#")?document.querySelector(href):null}).filter(Boolean);const observer=new IntersectionObserver(function(entries){entries.forEach(function(entry){if(entry.isIntersecting){navLinks.forEach(function(link){link.classList.toggle("active",link.getAttribute("href")==="#"+entry.target.id)})}})},{rootMargin:"-30% 0px -55% 0px",threshold:.05});sections.forEach(function(section){observer.observe(section)})}updateHeader();window.addEventListener("scroll",updateHeader,{passive:true})});