Ek landing page banao mere liye for my personal portfolio

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Aarav Sharma | Web Developer</title>
  <meta name="description" content="Portfolio of Aarav Sharma, a web developer who builds fast, clean websites." />
  <style>
    :root {
      --bg: #0b1020;
      --surface: #131a2f;
      --text: #e8ecf8;
      --muted: #9aa5c4;
      --accent: #6c8cff;
      --accent-2: #a678ff;
      --border: #222b47;
    }
    [data-theme="light"] {
      --bg: #f7f8fc;
      --surface: #ffffff;
      --text: #141a2e;
      --muted: #5b6482;
      --accent: #4f6bff;
      --accent-2: #8a5cff;
      --border: #e1e5f2;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 70px; }
    body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      transition: background .3s, color .3s;
    }
    a { color: inherit; text-decoration: none; }
    .container { width: min(1100px, 92%); margin: 0 auto; }
    section { padding: 90px 0; }
    h2 { font-size: 2rem; margin-bottom: 12px; }
    .sub { color: var(--muted); margin-bottom: 40px; max-width: 600px; }

    /* Navbar */
    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      background: color-mix(in srgb, var(--bg) 85%, transparent);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
    .logo { font-weight: 800; font-size: 1.2rem; }
    .logo span { color: var(--accent); }
    .nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
    .nav-links a { color: var(--muted); font-weight: 500; transition: color .2s; }
    .nav-links a:hover { color: var(--text); }
    .icon-btn {
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 1.1rem;
    }
    .menu-btn { display: none; }

    /* Hero */
    .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 110px; }
    .hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; }
    .badge {
      display: inline-block; padding: 6px 14px; border-radius: 999px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--muted); font-size: .85rem; margin-bottom: 20px;
    }
    .hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.15; margin-bottom: 18px; }
    .grad {
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero p { color: var(--muted); font-size: 1.1rem; max-width: 520px; margin-bottom: 30px; }
    .btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .btn {
      padding: 12px 26px; border-radius: 12px; font-weight: 600; cursor: pointer;
      border: 1px solid var(--border); background: var(--surface); color: var(--text);
      transition: transform .2s;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn.primary {
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      color: #fff; border: none;
    }
    .avatar {
      width: min(320px, 80%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: grid; place-items: center; font-size: 5rem; font-weight: 800; color: #fff;
      box-shadow: 0 20px 60px color-mix(in srgb, var(--accent) 40%, transparent);
    }

    /* About */
    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
    .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; text-align: center; }
    .stat b { display: block; font-size: 1.8rem; color: var(--accent); }
    .stat span { color: var(--muted); font-size: .9rem; }

    /* Skills */
    .chips { display: flex; flex-wrap: wrap; gap: 12px; }
    .chip {
      padding: 10px 18px; border-radius: 999px; background: var(--surface);
      border: 1px solid var(--border); font-weight: 500;
    }

    /* Projects */
    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
    .card {
      background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
      padding: 24px; transition: transform .25s, border-color .25s;
    }
    .card:hover { transform: translateY(-6px); border-color: var(--accent); }
    .card .thumb {
      height: 140px; border-radius: 12px; margin-bottom: 16px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2)); opacity: .85;
    }
    .card h3 { margin-bottom: 8px; }
    .card p { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
    .card a { color: var(--accent); font-weight: 600; }

    /* Contact */
    form { display: grid; gap: 14px; max-width: 560px; }
    input, textarea {
      width: 100%; padding: 14px 16px; border-radius: 12px; font: inherit;
      background: var(--surface); color: var(--text); border: 1px solid var(--border);
    }
    input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
    textarea { min-height: 130px; resize: vertical; }
    .socials { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
    .socials a { color: var(--accent); font-weight: 600; }

    footer { text-align: center; padding: 30px 0; color: var(--muted); border-top: 1px solid var(--border); font-size: .9rem; }

    /* Scroll reveal */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
    .reveal.show { opacity: 1; transform: none; }

    @media (max-width: 800px) {
      .hero-grid { grid-template-columns: 1fr; text-align: center; }
      .hero p { margin-inline: auto; }
      .btns { justify-content: center; }
      .avatar { order: -1; width: 200px; font-size: 3.5rem; }
      .menu-btn { display: inline-block; }
      .nav-links {
        position: absolute; top: 64px; left: 0; right: 0; flex-direction: column;
        background: var(--bg); border-bottom: 1px solid var(--border);
        padding: 20px 0; display: none;
      }
      .nav-links.open { display: flex; }
      .stats { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal { transition: none; opacity: 1; transform: none; }
    }
  </style>
</head>
<body>
  <header>
    <nav class="container">
      <a href="#home" class="logo">aarav<span>.dev</span></a>
      <ul class="nav-links" id="navLinks">
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><button class="icon-btn" id="themeBtn" aria-label="Toggle theme">🌙</button></li>
      </ul>
      <button class="icon-btn menu-btn" id="menuBtn" aria-label="Open menu">☰</button>
    </nav>
  </header>

  <main>
    <section class="hero" id="home">
      <div class="container hero-grid">
        <div>
          <span class="badge">👋 Available for freelance work</span>
          <h1>Hi, I'm <span class="grad">Aarav Sharma</span>,<br />a web developer.</h1>
          <p>I build fast, clean and user-friendly websites that help businesses grow and people enjoy using them.</p>
          <div class="btns">
            <a href="#projects" class="btn primary">View My Work</a>
            <a href="#contact" class="btn">Contact Me</a>
          </div>
        </div>
        <div class="avatar" aria-hidden="true">AS</div>
      </div>
    </section>

    <section id="about">
      <div class="container reveal">
        <h2>About Me</h2>
        <p class="sub">I'm a developer from India who loves turning ideas into simple, beautiful and functional products. I care about performance, accessibility and clean code.</p>
        <div class="stats">
          <div class="stat"><b>3+</b><span>Years Experience</span></div>
          <div class="stat"><b>25+</b><span>Projects Completed</span></div>
          <div class="stat"><b>15+</b><span>Happy Clients</span></div>
        </div>
      </div>
    </section>

    <section id="skills">
      <div class="container reveal">
        <h2>Skills</h2>
        <p class="sub">Tools and technologies I work with regularly.</p>
        <div class="chips">
          <span class="chip">HTML</span><span class="chip">CSS</span>
          <span class="chip">JavaScript</span><span class="chip">React</span>
          <span class="chip">Node.js</span><span class="chip">Git &amp; GitHub</span>
          <span class="chip">Responsive Design</span><span class="chip">UI/UX Basics</span>
        </div>
      </div>
    </section>

    <section id="projects">
      <div class="container reveal">
        <h2>Projects</h2>
        <p class="sub">A few things I've built recently.</p>
        <div class="cards">
          <article class="card">
            <div class="thumb"></div>
            <h3>E-commerce Store</h3>
            <p>A fast online store with cart, search and secure checkout flow.</p>
            <a href="#" aria-label="View E-commerce Store project">View Project →</a>
          </article>
          <article class="card">
            <div class="thumb"></div>
            <h3>Task Manager App</h3>
            <p>A productivity app with drag-and-drop boards and reminders.</p>
            <a href="#" aria-label="View Task Manager project">View Project →</a>
          </article>
          <article class="card">
            <div class="thumb"></div>
            <h3>Restaurant Website</h3>
            <p>A mobile-first website with online menu and table booking.</p>
            <a href="#" aria-label="View Restaurant Website project">View Project →</a>
          </article>
        </div>
      </div>
    </section>

    <section id="contact">
      <div class="container reveal">
        <h2>Let's Work Together</h2>
        <p class="sub">Have a project in mind? Send me a message and I'll reply soon.</p>
        <form id="contactForm">
          <input type="text" id="name" placeholder="Your name" required />
          <input type="email" id="email" placeholder="Your email" required />
          <textarea id="message" placeholder="Your message" required></textarea>
          <button type="submit" class="btn primary">Send Message</button>
        </form>
        <div class="socials">
          <a href="https://github.com/" target="_blank" rel="noopener noreferrer">GitHub</a>
          <a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
          <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">Twitter</a>
        </div>
      </div>
    </section>
  </main>

  <footer>© <span id="year"></span> Aarav Sharma. All rights reserved.</footer>

  <script>
    // ====== EDIT THIS: your email for the contact form ======
    const MY_EMAIL = "[EMAIL-1]";

    const root = document.documentElement;
    const themeBtn = document.getElementById("themeBtn");
    const navLinks = document.getElementById("navLinks");
    const menuBtn = document.getElementById("menuBtn");

    // Theme (saved in localStorage)
    function applyTheme(t) {
      root.setAttribute("data-theme", t);
      themeBtn.textContent = t === "dark" ? "🌙" : "☀️";
    }
    let saved = null;
    try { saved = localStorage.getItem("theme"); } catch (e) {}
    applyTheme(saved || "dark");
    themeBtn.addEventListener("click", () => {
      const next = root.getAttribute("data-theme") === "dark" ? "light" : "dark";
      applyTheme(next);
      try { localStorage.setItem("theme", next); } catch (e) {}
    });

    // Mobile menu
    menuBtn.addEventListener("click", () => navLinks.classList.toggle("open"));
    navLinks.querySelectorAll("a").forEach(a =>
      a.addEventListener("click", () => navLinks.classList.remove("open"))
    );

    // Scroll reveal
    const items = document.querySelectorAll(".reveal");
    if ("IntersectionObserver" in window) {
      const io = new IntersectionObserver((entries) => {
        entries.forEach(en => {
          if (en.isIntersecting) { en.target.classList.add("show"); io.unobserve(en.target); }
        });
      }, { threshold: 0.12 });
      items.forEach(el => io.observe(el));
    } else {
      items.forEach(el => el.classList.add("show"));
    }

    // Contact form -> opens the user's email app
    document.getElementById("contactForm").addEventListener("submit", (e) => {
      e.preventDefault();
      const name = document.getElementById("name").value.trim();
      const email = document.getElementById("email").value.trim();
      const msg = document.getElementById("message").value.trim();
      if (!name || !email || !msg) return;
      const subject = encodeURIComponent("Portfolio enquiry from " + name);
      const body = encodeURIComponent(msg + "\n\nFrom: " + name + " (" + email + ")");
      window.location.href = "mailto:" + MY_EMAIL + "?subject=" + subject + "&body=" + body;
    });

    document.getElementById("year").textContent = new Date().getFullYear();
  </script>
</body>
</html>