Spaces:

Simrandhiman
/

flaskportfolio

Sleeping

File size: 17,607 Bytes

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Simran Dhiman | Web Developer • AI/ML Enthusiast</title>
  <meta name="description" content="Portfolio of Simran Dhiman – Web Developer and AI/ML Enthusiast. Projects in Python (NumPy, Pandas, Matplotlib) and modern web (HTML, CSS, Bootstrap, JavaScript)." />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" />
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --grad: radial-gradient(1200px 600px at 10% -10%, #a78bfa33, transparent 60%),
               radial-gradient(800px 400px at 110% 10%, #34d39933, transparent 60%),
               linear-gradient(180deg, #0b1020 0%, #0a0f1a 100%);
    }
    html, body { height: 100%; }
    body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--grad); color: #e6edf3; }

    /* Navbar */
    .navbar { backdrop-filter: saturate(1.2) blur(10px); background: rgba(2, 6, 12, .55)!important; }
    .navbar-brand { font-weight: 700; letter-spacing: 0.4px; }
    .nav-link { position: relative; }
    .nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: #8b5cf6; transition: width .25s ease; }
    .nav-link:hover::after { width: 100%; }

    /* Hero */
    .hero { padding-top: 7rem; padding-bottom: 5rem; }
    .tag { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(139, 92, 246, .15); color: #c4b5fd; font-size: .9rem; }
    .hero h1 { font-weight: 800; letter-spacing: .2px; }
    .hero p.lead { color: #c9d1d9; }

    /* Cards / hover */
    .card { background: #1f2937; border: 1px solid rgba(148, 163, 184, .25); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; color: #f1f5f9; }
    .card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.45); border-color: rgba(139,92,246,.65); }

    .btn-gradient { background: linear-gradient(135deg, #8b5cf6, #22d3ee); border: none; }
    .btn-gradient:hover { filter: brightness(1.05); transform: translateY(-1px); }

    /* Skill pills */
    .skill-pill { background: rgba(148, 163, 184, .15); border: 1px solid rgba(148, 163, 184, .3); color: #f1f5f9; padding: .4rem .7rem; border-radius: 999px; font-size: .9rem; transition: transform .2s ease, background .2s ease; }
    .skill-pill:hover { transform: translateY(-2px); background: rgba(139, 92, 246, .25); }

    /* Sections */
    section { scroll-margin-top: 90px; }

    /* Footer */
    footer { color: #94a3b8; }

    /* Sparkle cursor */
    .sparkle { position: fixed; pointer-events: none; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at center, #fff, #a78bfa 60%, transparent 70%); filter: drop-shadow(0 0 6px #a78bfa); animation: pop .8s ease-out forwards; }
    @keyframes pop { 0% { transform: scale(.8); opacity: 1; } 60% { transform: scale(1.8); opacity: .9; } 100% { transform: scale(.1); opacity: 0; } }

    /* Link underline on hover */
    .soft-link { text-decoration: none; border-bottom: 1px dashed rgba(226,232,240,.4); }
    .soft-link:hover { border-bottom-color: #a78bfa; }

    /* Subtle separators */
    .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,.35), transparent); }
  </style>
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#home">SD</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
          <li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
          <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <header id="home" class="hero">
    <div class="container">
      <div class="row align-items-center g-4">
        <div class="col-lg-7">
          <span class="tag"><i class="bi bi-stars"></i> Web Developer • AI/ML Enthusiast</span>
          <h1 class="display-5 mt-3">Hi, I’m <span class="text-gradient" style="background: linear-gradient(135deg,#a78bfa,#22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent;">Simran Dhiman</span>.</h1>
          <p class="lead mt-3">I build clean, responsive web experiences and explore intelligent systems. I completed my <strong>M.Sc. (IT)</strong> and I love turning ideas into performant, user‑friendly products.</p>
          <div class="d-flex gap-2 flex-wrap mt-3">
            <a href="#projects" class="btn btn-gradient btn-lg"><i class="bi bi-rocket-takeoff me-2"></i>See my work</a>
            <a href="#contact" class="btn btn-outline-light btn-lg"><i class="bi bi-chat-dots me-2"></i>Let’s talk</a>
          </div>
          <p class="mt-3 small text-secondary">Open to collaborations, freelance, and full‑time opportunities.</p>
        </div>
        <div class="col-lg-5 text-center">
          <div class="card p-4">
            <div class="card-body">
              <h5 class="card-title mb-3"><i class="bi bi-mortarboard"></i> Credentials</h5>
              <ul class="list-unstyled mb-0">
                <li class="mb-2"><i class="bi bi-check2-circle me-2"></i>M.Sc. (Information Technology)</li>
                <li class="mb-2"><i class="bi bi-check2-circle me-2"></i>Web Development (HTML, CSS, Bootstrap, JavaScript)</li>
                <li class="mb-2"><i class="bi bi-check2-circle me-2"></i>Python for Data • NumPy • Pandas • Matplotlib</li>
                <li class="mb-2"><i class="bi bi-check2-circle me-2"></i>AI/ML enthusiast – always learning</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="divider container mb-5"></div>

  <!-- About -->
  <section id="about" class="py-4">
    <div class="container">
      <div class="row align-items-center g-4">
        <div class="col-lg-6">
          <h2 class="mb-3">About me</h2>
          <p class="mb-2">I’m a <strong>web developer</strong> who enjoys crafting intuitive UIs and reliable back‑of‑the‑UI logic. On the AI/ML side, I enjoy exploring how data turns into decisions, from <em>NumPy</em> arrays to <em>Matplotlib</em> visuals.</p>
          <p class="mb-0">I care about accessibility, performance, and writing code that’s easy to read. When I’m not coding, you’ll find me learning new libraries or redesigning little components just for fun.</p>
        </div>
        <div class="col-lg-6">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title mb-3"><i class="bi bi-lightning-charge"></i> Quick facts</h5>
              <div class="row g-3">
                <div class="col-6"><span class="skill-pill w-100 d-inline-block text-center">Problem Solver</span></div>
                <div class="col-6"><span class="skill-pill w-100 d-inline-block text-center">Pixel‑minded</span></div>
                <div class="col-6"><span class="skill-pill w-100 d-inline-block text-center">Team Friendly</span></div>
                <div class="col-6"><span class="skill-pill w-100 d-inline-block text-center">Fast Learner</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Skills -->
  <section id="skills" class="py-5">
    <div class="container">
      <h2 class="mb-4">Skills</h2>
      <div class="row g-3">
        <div class="col-md-6 col-lg-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title mb-3"><i class="bi bi-braces"></i> Languages & Core</h5>
              <div class="d-flex flex-wrap gap-2">
                <span class="skill-pill">JavaScript</span>
                <span class="skill-pill">Python</span>
                <span class="skill-pill">HTML</span>
                <span class="skill-pill">CSS</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title mb-3"><i class="bi bi-window"></i> Front‑end</h5>
              <div class="d-flex flex-wrap gap-2">
                <span class="skill-pill">Bootstrap</span>
                <span class="skill-pill">Responsive UI</span>
                <span class="skill-pill">Accessibility</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title mb-3"><i class="bi bi-cpu"></i> Data & AI</h5>
              <div class="d-flex flex-wrap gap-2">
                <span class="skill-pill">NumPy</span>
                <span class="skill-pill">Pandas</span>
                <span class="skill-pill">Matplotlib</span>
                <span class="skill-pill">AI/ML (Foundations)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Projects -->
  <section id="projects" class="py-5">
    <div class="container">
      <h2 class="mb-4">Projects</h2>
      <div class="row g-4">
        <!-- Project 1: NumPy + Matplotlib -->
        <div class="col-md-6">
          <div class="card h-100">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title">Data Insight Mini‑Suite</h5>
              <p class="card-text flex-grow-1">A Python mini‑project showcasing data processing with <strong>NumPy</strong> and visualization with <strong>Matplotlib</strong>. Built simple statistical utilities and charts that turn raw arrays into understandable visuals.</p>
              <div class="d-flex gap-2">
                <a class="btn btn-sm btn-gradient" href="https://github.com/simrandhiman777/index.html/blob/main/simrandhiman_numpyproject.ipynb" target="_blank" rel="noreferrer noopener"><i class="bi bi-box-arrow-up-right me-1"></i> Live/Repo</a>
                <a class="btn btn-sm btn-outline-light" href="https://github.com/simrandhiman777/index.html/blob/main/simrandhiman_numpyproject.ipynb" target="_blank" rel="noreferrer noopener"><i class="bi bi-file-earmark-text me-1"></i> README</a>
              </div>
            </div>
          </div>
        </div>
        <!-- Project 2: Webpage with HTML/CSS/Bootstrap -->
        <div class="col-md-6">
          <div class="card h-100">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title">Responsive Landing Page</h5>
              <p class="card-text flex-grow-1">A small but polished webpage built with <strong>HTML</strong>, <strong>CSS</strong>, and <strong>Bootstrap</strong>, featuring a clean layout, responsive grid, and interactive components with a touch of custom JS.</p>
              <div class="d-flex gap-2">
                <a class="btn btn-sm btn-gradient" href="https://simrandhiman777.github.io/cutie" target="_blank" rel="noreferrer noopener"><i class="bi bi-box-arrow-up-right me-1"></i> Live/Repo</a>
                <a class="btn btn-sm btn-outline-light" href="https://github.com/simrandhiman777/simrandhiman777.github.io/blob/main/cutie.html" target="_blank" rel="noreferrer noopener"><i class="bi bi-file-earmark-text me-1"></i> Case study</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="alert alert-info mt-4 mb-0" role="alert">
        <i class="bi bi-info-circle me-2"></i>
       check it out!!
      </div>
    </div>
  </section>

 <section id="contact" class="py-5">
    <div class="container">
      <div class="row g-4 align-items-stretch">
        <div class="col-lg-7">
          <div class="card h-100">
            <div class="card-body">
              <h2 class="card-title mb-3">Let’s connect</h2>
              <p class="mb-4">I’m always happy to chat about opportunities, collaborations, or cool ideas. Drop a note and I’ll get back to you soon.</p>
              <form class="row g-3" onsubmit="event.preventDefault(); friendlyToast('Thanks for your message! I\'ll reply soon.'); this.reset();">
                <div class="col-md-6">
                  <label class="form-label">Name</label>
                  <input type="text" class="form-control" placeholder="Your name" required>
                </div>
                <div class="col-md-6">
                  <label class="form-label">Email</label>
                  <input type="email" class="form-control" placeholder="youremail@gmail.com" required>
                </div>
                <div class="col-12">
                  <label class="form-label">Message</label>
                  <textarea class="form-control" rows="4" placeholder="Say hello…" required></textarea>
                </div>
                <div class="col-12">
                  <button class="btn btn-gradient btn-lg" type="submit"><i class="bi bi-send me-2"></i>Send</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="card h-100">
            <div class="card-body d-flex flex-column">
              <h5 class="card-title mb-3">Find me online</h5>
              <div class="d-grid gap-2">
                <a class="btn btn-outline-light" href="https://www.linkedin.com/in/simran-dhiman-3b7b49316/" target="_blank" rel="noreferrer noopener"><i class="bi bi-linkedin me-2"></i>LinkedIn</a>
                <a class="btn btn-outline-light" href="https://github.com/simrandhiman777" target="_blank" rel="noreferrer noopener"><i class="bi bi-github me-2"></i>GitHub</a>
                <a class="btn btn-outline-light" href="mailto:simmidhiman333@gmail.com"><i class="bi bi-envelope me-2"></i>Email</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer class="py-4">
    <div class="container d-flex flex-wrap justify-content-between align-items-center">
      <small>© <span id="year"></span> Simran Dhiman. All rights reserved.</small>
      <small>Built with <a class="soft-link" href="https://getbootstrap.com/" target="_blank" rel="noreferrer noopener">Bootstrap</a> & a little JavaScript sparkle ✨</small>
    </div>
  </footer>

  <!-- Toast container -->
  <div class="position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1080">
    <div id="toast" class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body">
          Hello there!
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Year in footer
    document.getElementById('year').textContent = new Date().getFullYear();

    // Friendly toast helper
    const toastEl = document.getElementById('toast');
    function friendlyToast(msg) {
      toastEl.querySelector('.toast-body').textContent = msg;
      const t = new bootstrap.Toast(toastEl, { delay: 2600 });
      t.show();
    }

    // Smooth scroll for internal links
    document.querySelectorAll('a[href^="#"]').forEach(a => {
      a.addEventListener('click', e => {
        const target = document.querySelector(a.getAttribute('href'));
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });

    // Sparkle cursor effect
    const throttle = (fn, wait) => {
      let t = 0; return (...args) => { const now = Date.now(); if (now - t > wait) { t = now; fn(...args); } };
    };

    const spawnSparkle = (x, y) => {
      const s = document.createElement('span');
      s.className = 'sparkle';
      s.style.left = `${x - 3}px`;
      s.style.top = `${y - 3}px`;
      document.body.appendChild(s);
      setTimeout(() => s.remove(), 800);
    };

    window.addEventListener('mousemove', throttle(e => {
      spawnSparkle(e.clientX, e.clientY);
    }, 12));

    // Subtle parallax on hero
    const hero = document.querySelector('.hero');
    window.addEventListener('scroll', () => {
      const y = window.scrollY;
      hero.style.backgroundPosition = `center ${-y * 0.05}px`;
    });
  </script>
</body>
</html>