Spaces:

ankittshrma
/

anku

Running

App Files Files Community

ankittshrma commited on Jul 24, 2025

Commit

d78f57d

verified ·

1 Parent(s): a7b75db

Update index.html

Browse files

Files changed (1) hide show

index.html +843 -18

index.html CHANGED Viewed

@@ -1,19 +1,844 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Ankit Sharma | Engineer • Thinker • Dreamer</title>
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Playfair+Display:ital,wght@0,700;1,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
+  <!-- Font Awesome Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+  <!-- EmailJS Initialization -->
+<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
+<script>
+  (function() {
+    emailjs.init("ZW5H-qHuVOZoISPM6"); // ← Replace this line with your real public key
+  })();
+</script>
+  <style>
+    /* ========================================
+       BASE & GLOBAL STYLES
+       ======================================== */
+    :root {
+      --bg-dark: #0f0f1a;
+      --accent-purple: #a56eff;
+      --accent-purple-light: #b694f5;
+      --accent-purple-ultra: #d1c2ff;
+      --neon-blue: #00d4ff;
+      --text-light: #ffffff;
+      --text-muted: #c5c5dd;
+      --glass-bg: rgba(30, 25, 55, 0.3);
+      --glass-border: rgba(165, 110, 255, 0.2);
+      --shadow-glow: 0 0 15px rgba(165, 110, 255, 0.4);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      background-color: var(--bg-dark);
+      color: var(--text-light);
+      font-family: 'Inter', sans-serif;
+      overflow-x: hidden;
+      position: relative;
+      line-height: 1.7;
+    }
+    h1, h2, h3, h4 {
+      font-family: 'Cinzel', serif;
+      color: var(--text-light);
+      letter-spacing: 1px;
+    }
+    p {
+      color: var(--text-muted);
+      font-size: 16px;
+      max-width: 680px;
+      margin: 0 auto;
+    }
+    .container {
+      width: 90%;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 4rem 0;
+    }
+    /* ========================================
+       BACKGROUND ANIMATION (Three.js for crystal orbs)
+       ======================================== */
+    #background-canvas {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      pointer-events: none;
+    }
+    /* ========================================
+       HERO SECTION
+       ======================================== */
+    #hero {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+    .hero-name {
+      font-family: 'Playfair Display', serif;
+      font-size: 5rem;
+      font-weight: 700;
+      color: var(--text-light);
+      letter-spacing: 2px;
+      position: relative;
+      transition: transform 0.3s ease;
+      z-index: 2;
+      text-shadow: 0 0 20px var(--accent-purple), 0 0 40px rgba(165, 110, 255, 0.3);
+    }
+    .hero-name:hover {
+      transform: scale(1.08);
+      cursor: pointer;
+    }
+    .hero-name::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url('https://assets.codepen.io/210284/faceted-glass.png') no-repeat center center;
+      background-size: 80%;
+      opacity: 0;
+      transition: opacity 0.5s ease;
+      pointer-events: none;
+      mix-blend-mode: screen;
+    }
+    .hero-name:hover::after {
+      opacity: 0.4;
+    }
+    .hero-subtext {
+      font-family: 'Cormorant Garamond', serif;
+      font-size: 1.4rem;
+      color: var(--accent-purple-light);
+      margin-top: 0.8rem;
+      opacity: 0;
+      animation: fadeIn 2s ease forwards 1.5s;
+    }
+    @keyframes fadeIn {
+      to {
+        opacity: 1;
+      }
+    }
+    /* ========================================
+       NAVIGATION
+       ======================================== */
+    .navbar {
+      position: fixed;
+      top: -80px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 1.2rem;
+      z-index: 1000;
+      transition: top 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
+      backdrop-filter: blur(10px);
+      background-color: rgba(15, 15, 26, 0.7);
+      border-bottom: 1px solid var(--glass-border);
+    }
+    .navbar.show {
+      top: 0;
+    }
+    .nav-links {
+      display: flex;
+      gap: 2.5rem;
+      list-style: none;
+    }
+    .nav-links a {
+      font-family: 'Cinzel', serif;
+      color: var(--text-light);
+      text-decoration: none;
+      font-size: 1.1rem;
+      position: relative;
+      padding: 0.5rem 0;
+      transition: color 0.3s ease;
+    }
+    .nav-links a::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: linear-gradient(90deg, var(--accent-purple), var(--neon-blue));
+      transition: width 0.4s ease;
+    }
+    .nav-links a:hover {
+      color: var(--accent-purple-light);
+    }
+    .nav-links a:hover::after {
+      width: 100%;
+    }
+    /* ========================================
+       BOOK PREVIEW SECTION
+       ======================================== */
+    #thoughts {
+      padding: 6rem 0;
+      text-align: center;
+    }
+    .book-card {
+      background: var(--glass-bg);
+      backdrop-filter: blur(12px);
+      border: 1px solid var(--glass-border);
+      border-radius: 16px;
+      padding: 2.5rem;
+      margin: 0 auto;
+      max-width: 800px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), var(--shadow-glow);
+      position: relative;
+      overflow: hidden;
+      transition: transform 0.4s ease, box-shadow 0.4s ease;
+    }
+    .book-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-ultra), var(--neon-blue));
+      opacity: 0.6;
+    }
+    .book-card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), var(--shadow-glow), 0 0 30px rgba(165, 110, 255, 0.25);
+    }
+    .chapter-title {
+      font-family: 'Cormorant Garamond', serif;
+      font-size: 2.2rem;
+      font-weight: 600;
+      color: var(--text-light);
+      margin-bottom: 1rem;
+    }
+    .chapter-text {
+      font-family: 'Cormorant Garamond', serif;
+      font-size: 1.2rem;
+      line-height: 1.9;
+      color: var(--text-muted);
+      text-align: justify;
+      margin-bottom: 2rem;
+    }
+    .read-more-btn {
+      display: inline-block;
+      padding: 0.8rem 2rem;
+      background: transparent;
+      color: var(--accent-purple-light);
+      border: 1px solid var(--accent-purple-light);
+      border-radius: 30px;
+      font-family: 'Inter', sans-serif;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.4s ease;
+      position: relative;
+      overflow: hidden;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    .read-more-btn:hover {
+      background: var(--accent-purple-light);
+      color: var(--bg-dark);
+      box-shadow: var(--shadow-glow);
+      transform: translateY(-2px);
+    }
+    .read-more-btn::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 50px;
+      height: 50px;
+      background-color: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      transition: transform 0.6s ease;
+      pointer-events: none;
+    }
+    .read-more-btn:active::after {
+      transform: translate(-50%, -50%) scale(3);
+    }
+    .page-number {
+      font-size: 0.9rem;
+      color: var(--accent-purple-ultra);
+      margin-top: 2rem;
+      font-style: italic;
+    }
+    /* ========================================
+       PROFESSIONAL LIFE
+       ======================================== */
+    #professional {
+      padding: 6rem 0;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 3rem;
+      justify-content: center;
+    }
+    .pro-text {
+      flex: 1;
+      min-width: 300px;
+      max-width: 500px;
+    }
+    .pro-visual {
+      flex: 1;
+      min-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+    .tech-badge {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      background: var(--glass-bg);
+      padding: 1rem 1.5rem;
+      border-radius: 12px;
+      border-left: 4px solid var(--accent-purple);
+      transition: all 0.4s ease;
+      transform: translateX(-30px);
+      opacity: 0;
+    }
+    .tech-badge.visible {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    .tech-icon {
+      font-size: 1.5rem;
+      color: var(--accent-purple-light);
+      transition: transform 0.4s ease;
+    }
+    .tech-badge:hover .tech-icon {
+      transform: scale(1.3) rotate(15deg);
+      color: var(--neon-blue);
+    }
+    /* ========================================
+       CONTACT FORM
+       ======================================== */
+    #contact {
+      padding: 6rem 0;
+      text-align: center;
+    }
+    .form-container {
+      max-width: 600px;
+      margin: 0 auto;
+      background: var(--glass-bg);
+      border: 1px solid var(--glass-border);
+      border-radius: 16px;
+      padding: 3rem;
+      backdrop-filter: blur(12px);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), var(--shadow-glow);
+      position: relative;
+      overflow: hidden;
+    }
+    .form-group {
+      margin-bottom: 1.8rem;
+      position: relative;
+      text-align: left;
+    }
+    .form-input {
+      width: 100%;
+      padding: 1rem;
+      background: rgba(30, 25, 55, 0.6);
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      color: var(--text-light);
+      font-family: 'Inter', sans-serif;
+      font-size: 1rem;
+      transition: all 0.4s ease;
+    }
+    .form-input:focus {
+      outline: none;
+      border-color: var(--accent-purple);
+      box-shadow: 0 0 15px rgba(165, 110, 255, 0.3);
+    }
+    .form-label {
+      position: absolute;
+      left: 1rem;
+      top: 1rem;
+      color: var(--text-muted);
+      font-size: 1rem;
+      transition: all 0.3s ease;
+      pointer-events: none;
+    }
+    .form-input:focus + .form-label,
+    .form-input:not(:placeholder-shown) + .form-label {
+      top: -0.8rem;
+      left: 0.8rem;
+      font-size: 0.8rem;
+      color: var(--accent-purple-light);
+      background: var(--bg-dark);
+      padding: 0 0.5rem;
+      border-radius: 4px;
+    }
+    .submit-btn {
+      width: 100%;
+      padding: 1.2rem;
+      background: linear-gradient(90deg, var(--accent-purple), var(--neon-blue));
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-size: 1.1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.4s ease;
+      position: relative;
+      overflow: hidden;
+    }
+    .submit-btn:hover {
+      box-shadow: 0 0 30px rgba(165, 110, 255, 0.5);
+      transform: translateY(-2px);
+    }
+    .submit-btn::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 50px;
+      height: 50px;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      transition: transform 0.8s ease;
+    }
+    .submit-btn:active::after {
+      transform: translate(-50%, -50%) scale(5);
+      opacity: 0;
+    }
+    /* ========================================
+       FOOTER
+       ======================================== */
+    footer {
+      padding: 3rem 0;
+      text-align: center;
+      position: relative;
+      color: var(--text-muted);
+      font-size: 0.9rem;
+      border-top: 1px solid var(--glass-border);
+      margin-top: 4rem;
+    }
+    .footer-content {
+      position: relative;
+      z-index: 2;
+    }
+    .social-icons {
+      display: flex;
+      justify-content: center;
+      gap: 1.5rem;
+      margin: 1.5rem 0;
+    }
+    .social-icons a {
+      color: var(--text-muted);
+      font-size: 1.4rem;
+      transition: all 0.4s ease;
+    }
+    .social-icons a:hover {
+      color: var(--accent-purple-light);
+      transform: translateY(-5px);
+    }
+    .music-toggle {
+      display: inline-block;
+      margin: 1rem;
+      color: var(--accent-purple-ultra);
+      cursor: pointer;
+      font-size: 1.1rem;
+      transition: color 0.3s ease;
+    }
+    .music-toggle:hover {
+      color: var(--neon-blue);
+    }
+    .quote {
+      font-style: italic;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+      margin-top: 1.5rem;
+      opacity: 0.7;
+    }
+    /* Crystal FX in corners */
+    .crystal-corner {
+      position: absolute;
+      width: 80px;
+      height: 80px;
+      background: url('https://i.ibb.co/6Wq4cLg/crystal.png') no-repeat center center;
+      background-size: contain;
+      opacity: 0.1;
+      pointer-events: none;
+    }
+    .crystal-tl {
+      top: 10%;
+      left: 5%;
+      transform: rotate(-20deg);
+    }
+    .crystal-tr {
+      top: 15%;
+      right: 8%;
+      transform: rotate(15deg);
+    }
+    .crystal-bl {
+      bottom: 10%;
+      left: 6%;
+      transform: rotate(-10deg);
+    }
+    .crystal-br {
+      bottom: 12%;
+      right: 7%;
+      transform: rotate(25deg);
+    }
+    /* ========================================
+       RESPONSIVE DESIGN
+       ======================================== */
+    @media (max-width: 768px) {
+      .hero-name {
+        font-size: 3.5rem;
+      }
+      .nav-links {
+        gap: 1.5rem;
+      }
+      .chapter-title {
+        font-size: 1.8rem;
+      }
+      .form-container {
+        padding: 2rem;
+      }
+      .tech-badge {
+        flex-direction: row;
+      }
+    }
+    @media (max-width: 480px) {
+      .hero-name {
+        font-size: 2.8rem;
+      }
+      .nav-links {
+        gap: 1rem;
+        font-size: 0.9rem;
+      }
+      .container {
+        width: 95%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Background Canvas for Floating Orbs -->
+  <canvas id="background-canvas"></canvas>
+  <!-- Navigation -->
+  <nav class="navbar">
+    <ul class="nav-links">
+      <li><a href="#hero">Home</a></li>
+      <li><a href="#thoughts">My Thoughts</a></li>
+      <li><a href="#professional">Professional Life</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+  </nav>
+  <!-- Hero Section -->
+  <section id="hero">
+    <h1 class="hero-name">Ankit Sharma</h1>
+    <p class="hero-subtext">Engineer • Thinker • Dreamer</p>
+  </section>
+  <!-- Book Preview Section -->
+  <section id="thoughts" class="container">
+    <div class="book-card">
+      <h2 class="chapter-title">Chapter One: Under the Starlight</h2>
+      <p class="chapter-text">
+        I often sit beneath the Himalayan skies, gazing at galaxies that whisper secrets older than time.
+        At twenty, I’ve walked through code and calculus, but my heart beats for curiosity —
+        the kind that asks “why” long after answers are given.
+        This journey isn’t about destinations; it’s about depth.
+        Of thought. Of feeling. Of building things that matter — quietly, beautifully.
+      </p>
+      <button class="read-more-btn">Read More</button>
+      <p class="page-number">— Page 1 —</p>
+    </div>
+  </section>
+  <!-- Professional Life -->
+  <section id="professional" class="container">
+    <div class="pro-text">
+      <h2>Professional Life</h2>
+      <p>
+        I’m from Himachal Pradesh and completed my B.Tech in Computer Science.
+        I craft systems with clarity and care, balancing logic with imagination.
+        My tools are simple, but powerful:
+      </p>
+    </div>
+    <div class="pro-visual">
+      <div class="tech-badge" data-delay="0">
+        <i class="fab fa-python tech-icon"></i>
+        <span>Python</span>
+      </div>
+      <div class="tech-badge" data-delay="100">
+        <i class="fab fa-linux tech-icon"></i>
+        <span>Linux / Bash</span>
+      </div>
+      <div class="tech-badge" data-delay="200">
+        <i class="fas fa-code tech-icon"></i>
+        <span>VS Code</span>
+      </div>
+      <div class="tech-badge" data-delay="300">
+        <i class="fab fa-git-alt tech-icon"></i>
+        <span>GitLab</span>
+      </div>
+      <div class="tech-badge" data-delay="400">
+        <i class="fas fa-chart-line tech-icon"></i>
+        <span>Grafana</span>
+      </div>
+    </div>
+  </section>
+  <!-- Contact Form -->
+  <section id="contact" class="container">
+    <h2 style="margin-bottom: 2rem;">Get In Touch</h2>
+    <div class="form-container">
+      <form id="contactForm">
+  <div class="form-group">
+    <input type="text" name="user_name" class="form-input" id="name" placeholder=" " required />
+    <label for="name" class="form-label">Your Name</label>
+  </div>
+  <div class="form-group">
+    <input type="email" name="user_email" class="form-input" id="email" placeholder=" " required />
+    <label for="email" class="form-label">Your Email</label>
+  </div>
+  <div class="form-group">
+    <textarea name="message" class="form-input" id="message" rows="5" placeholder=" " required></textarea>
+    <label for="message" class="form-label">Your Thoughts...</label>
+  </div>
+  <button type="submit" class="submit-btn">Send your thoughts</button>
+</form>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer>
+    <div class="crystal-corner crystal-tl"></div>
+    <div class="crystal-corner crystal-tr"></div>
+    <div class="crystal-corner crystal-bl"></div>
+    <div class="crystal-corner crystal-br"></div>
+    <div class="footer-content">
+      <div class="social-icons">
+        <a href="https://github.com/ankitsharma0720" target="_blank"><i class="fab fa-github"></i></a>
+        <a href="https://linkedin.com/in/ankit-sharma-0720" target="_blank"><i class="fab fa-linkedin"></i></a>
+        <a href="mailto:anku.sharma.0720@gmail.com"><i class="fas fa-envelope"></i></a>
+      </div>
+      <div class="music-toggle">
+        <i class="fas fa-music"></i> Play Ambient Sounds
+      </div>
+      <p>Crafted by Ankit Sharma with code and thoughts.</p>
+      <p class="quote">““Whisper your thoughts and stories — I cherish every word.
+Thank you for turning these pages with me.””  </p>
+    </div>
+  </footer>
+  <!-- Simple Particle Background Script -->
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const canvas = document.getElementById("background-canvas");
+      const ctx = canvas.getContext("2d");
+      let width, height;
+      const orbs = [];
+      const resize = () => {
+        width = window.innerWidth;
+        height = window.innerHeight;
+        canvas.width = width;
+        canvas.height = height;
+      };
+      window.addEventListener("resize", resize);
+      resize();
+      // Create Orbs
+      class Orb {
+        constructor() {
+          this.reset();
+        }
+        reset() {
+          this.x = Math.random() * width;
+          this.y = Math.random() * height;
+          this.size = Math.random() * 5 + 2;
+          this.speedX = (Math.random() - 0.5) * 0.5;
+          this.speedY = (Math.random() - 0.5) * 0.5;
+          this.hue = 260 + Math.random() * 60; // Purple spectrum
+          this.opacity = Math.random() * 0.4 + 0.1;
+        }
+        update() {
+          this.x += this.speedX;
+          this.y += this.speedY;
+          if (this.x < 0 || this.x > width) this.reset();
+          if (this.y < 0 || this.y > height) this.reset();
+        }
+        draw() {
+          ctx.beginPath();
+          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+          ctx.fillStyle = `hsla(${this.hue}, 80%, 60%, ${this.opacity})`;
+          ctx.fill();
+          // Glow effect
+          ctx.shadowBlur = 15;
+          ctx.shadowColor = `hsla(${this.hue}, 100%, 70%, 0.4)`;
+          ctx.fill();
+          ctx.shadowBlur = 0;
+        }
+      }
+      for (let i = 0; i < 30; i++) {
+        orbs.push(new Orb());
+      }
+      const animate = () => {
+        ctx.clearRect(0, 0, width, height);
+        orbs.forEach(orb => {
+          orb.update();
+          orb.draw();
+        });
+        requestAnimationFrame(animate);
+      };
+      animate();
+      // Nav reveal on scroll
+      const navbar = document.querySelector(".navbar");
+      window.addEventListener("scroll", () => {
+        if (window.scrollY > 100) {
+          navbar.classList.add("show");
+        } else {
+          navbar.classList.remove("show");
+        }
+      });
+      // Scroll reveal for tech badges
+      const badges = document.querySelectorAll(".tech-badge");
+      const badgeObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const delay = entry.target.getAttribute("data-delay") || 0;
+            setTimeout(() => {
+              entry.target.classList.add("visible");
+            }, delay);
+          }
+        });
+      }, { threshold: 0.1 });
+      badges.forEach(badge => badgeObserver.observe(badge));
+      // Read More Button
+    document.querySelector(".read-more-btn").addEventListener("click", () => {
+      window.location.href = "page1.html";
+    });
+      // Contact Form Submit using EmailJS
+document.getElementById("contactForm").addEventListener("submit", function (e) {
+  e.preventDefault();
+  emailjs.sendForm("service_website", "template_gusqonl", this)
+    .then(function () {
+      alert("Your message has been sent! Thank you.");
+      document.getElementById("contactForm").reset();
+    }, function (error) {
+      alert("Failed to send message: " + error.text);
+    });
+});
+      // Music Toggle Placeholder
+      document.querySelector(".music-toggle").addEventListener("click", function () {
+        const icon = this.querySelector("i");
+        if (icon.classList.contains("fa-music")) {
+          icon.classList.remove("fa-music");
+          icon.classList.add("fa-pause");
+          this.innerHTML = '<i class="fas fa-pause"></i> Pause Ambient';
+        } else {
+          icon.classList.remove("fa-pause");
+          icon.classList.add("fa-music");
+          this.innerHTML = '<i class="fas fa-music"></i> Play Ambient Sounds';
+        }
+      });
+    });
+  </script>
+</body>
 </html>