Spaces:
Sleeping
Sleeping
| <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); } | |
| .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> |