<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ashraful Hoque Miraj | DevOps Engineer</title>
  <style>
    :root {
      --bg-light: #f9f9f9;
      --bg-dark: #121212;
      --text-light: #121212;
      --text-dark: #f9f9f9;
      --accent: #4f46e5;
    }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: var(--bg-light);
      color: var(--text-light);
      transition: background 0.3s, color 0.3s;
    }
    header {
      text-align: center;
      padding: 2rem;
    }
    nav {
      text-align: center;
      margin-bottom: 2rem;
    }
    nav a {
      margin: 0 1rem;
      text-decoration: none;
      color: var(--accent);
    }
    section {
      max-width: 800px;
      margin: auto;
      padding: 1rem;
    }
    .dark-mode {
      background: var(--bg-dark);
      color: var(--text-dark);
    }
    .theme-toggle {
      position: fixed;
      top: 1rem;
      right: 1rem;
      background: var(--accent);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="theme-toggle" onclick="toggleTheme()">Toggle Mode</button>
  <header>
    <h1>Ashraful Hoque Miraj</h1>
    <p>DevOps Engineer</p>
  </header>
  <nav>
    <a href="#about">About</a>
    <a href="#skills">Skills</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about">
    <h2>About Me</h2>
    <p>Hello! I'm Ashraful Hoque Miraj, a passionate DevOps Engineer skilled in cloud, automation, and scalable infrastructure.</p>
  </section>
  <section id="skills">
    <h2>Skills</h2>
    <ul>
      <li>Cloud: Azure, AWS</li>
      <li>Containerization: Docker, Kubernetes</li>
      <li>Automation: Terraform, Ansible</li>
      <li>Monitoring: Prometheus, Grafana</li>
      <li>CI/CD: GitHub Actions, Jenkins</li>
      <li>Linux Systems & Scripting</li>
    </ul>
  </section>
  <section id="projects">
    <h2>Projects</h2>
    <p>Coming Soon! Stay tuned for updates on my hands-on DevOps projects.</p>
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <p>Find me on <a href="https://github.com/MirajHoque" target="_blank">GitHub</a> and <a href="https://www.linkedin.com/in/ashraful-hoque-miraj-719020146/" target="_blank">LinkedIn</a>.</p>
  </section>
  <script>
    function toggleTheme() {
      document.body.classList.toggle('dark-mode');
    }
  </script>
</body>
</html>
