<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Bilal — Projects</title>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-dark: #0d1117;
      --card-bg: #161b22;
      --accent: #58a6ff;
      --text: #c9d1d9;
      --muted: #8b949e;
      --radius: 12px;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
      color-scheme: dark;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', sans-serif;
      background: radial-gradient(circle at top left, #0d1117, #0b0f16 80%);
      color: var(--text);
      padding: 40px 20px;
      display: flex;
      justify-content: center;
    }

    .container { width: 100%; max-width: 1100px; }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo {
      width: 55px; height: 55px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, #58a6ff, #1f6feb);
      display: grid; place-items: center;
      font-weight: 700; color: #fff;
      box-shadow: var(--shadow);
    }

    .hero h1 { font-size: 20px; font-weight: 600; }
    .hero p { font-size: 13px; color: var(--muted); }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .card {
      background: var(--card-bg);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    }

    .card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .card .content { padding: 18px; }

    .card h3 { font-size: 16px; margin-bottom: 8px; }

    .card p { font-size: 13px; color: var(--muted); margin-bottom: 12px; }

    .actions { display: flex; gap: 8px; flex-wrap: wrap; }

    .chip {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text);
    }

    .link {
      text-decoration: none;
      color: #58a6ff;
      font-weight: 600;
    }

    footer {
      text-align: center;
      margin-top: 50px;
      font-size: 13px;
      color: var(--muted);
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="brand">
        <div class="logo">BA</div>
        <div class="hero">
          <h1>Bilal — BSCSF23M32</h1>
          <p>Student</p>
        </div>
      </div>
    </header>

    <main class="grid">
      <!-- Registration Project Card -->
      <article class="card">
        <a href="https://bilalcode.site/image/registration.php" target="_blank">
          <img src="https://tse4.mm.bing.net/th/id/OIP.PVuZD_vtQ6oxLYHVDglPRgHaE8?cb=12&w=1140&h=760&rs=1&pid=ImgDetMain&o=7&rm=3" alt="Registration project">
        </a>
        <div class="content">
          <h3>Registration with File Upload</h3>
          <p>Handles user registration and image uploads efficiently.</p>
          <div class="actions">
            <a class="chip link" href="https://bilalcode.site/image/registration.php" target="_blank">Open Project</a>
            <a class="chip link" href="https://bilalcode.site/registration_source/view.php" target="_blank">View Source Code</a>
            <span class="chip">PHP</span>
            <span class="chip">MySQL</span>
          </div>
        </div>
      </article>

      <!-- Gallery System Project Card -->
      <article class="card">
        <a href="https://bilalcode.site/gallery/signup.php" target="_blank">
          <img src="https://i0.wp.com/www.configuroweb.com/wp-content/uploads/2022/09/Dynamic-Gallery-System-in-PHP-and-MySQL.png?ssl=1" alt="Gallery project">
        </a>
        <div class="content">
          <h3>Gallery Project</h3>
          <p>A simple signup and media gallery system with uploads and view feature.</p>
          <div class="actions">
            <a class="chip link" href="https://bilalcode.site/gallery/signup.php" target="_blank">Open Project</a>
            <a class="chip link" href="https://bilalcode.site/gallery_source/view.php" target="_blank">View Source Code</a>
            <span class="chip">PHP</span>
            <span class="chip">MySQL</span>
          </div>
        </div>
      </article>

      <!-- Namaz Tracker Project Card -->
      <article class="card">
        <a href="https://bilalcode.site/namaz_tracker/login.php" target="_blank">
          <img src="https://i.etsystatic.com/14448259/c/2244/1783/0/498/il/3fce88/3284308375/il_680x540.3284308375_hd09.jpg" alt="Namaz Tracker project">
        </a>
        <div class="content">
          <h3>Namaz Tracker</h3>
          <p>Tracks daily prayers with user login and session management.</p>
          <div class="actions">
            <a class="chip link" href="https://bilalcode.site/namaz_tracker/login.php" target="_blank">Open Project</a>
            <a class="chip link" href="https://bilalcode.site/namaz_source/view.php" target="_blank">View Source Code</a>
            <span class="chip">PHP</span>
            <span class="chip">MySQL</span>
          </div>
        </div>
      </article>

      <!-- Contact List Project Card -->
      <article class="card">
        <a href="https://bilalcode.site/contact/index.php" target="_blank">
          <img src="https://sharedcontacts.com/wp-content/uploads/CONTACT-LIST.png" alt="Contact List project">
        </a>
        <div class="content">
          <h3>Contact List Manager</h3>
          <p>Manage, update, and delete contact entries easily using PHP and MySQL.</p>
          <div class="actions">
            <a class="chip link" href="https://bilalcode.site/contact/index.php" target="_blank">Open Project</a>
            <a class="chip link" href="https://youtu.be/HIEYymCnV10?si=3pOWIeB8Y-FoHrJw" target="_blank">Watch Video</a>
            <a class="chip link" href="https://bilalcode.site/contact/Sourcecode/view.php" target="_blank">View Source Code</a>
            <span class="chip">PHP</span>
            <span class="chip">MySQL</span>
          </div>
        </div>
      </article>

    </main>

    <footer>
      <p>Bilal — BSCSF23M32 | Student</p>
    </footer>
  </div>
</body>
</html>