dreams.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Whimsical Dreams — Geo Nithin J</title>
  <meta name="description" content="Personal fantasy dreams of Geo Nithin J — space exploration and time travel." />
  <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@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <div class="bg-watermark" aria-hidden="true">dreams</div>

  <main class="page-main">

    <a href="personal.html" class="back-nav">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
      Back to Personal
    </a>

    <div class="page-header">
      <div class="page-header__icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/></svg>
      </div>
      <h1>Whimsical Dreams</h1>
      <p>"Dreams woven from starlight and time — the essence of my endless quest."</p>
    </div>

    <!-- Intro -->
    <div class="card" style="margin-top:2rem;">
      <div class="icon-box" style="margin-bottom:1rem;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
      </div>
      <h3>What is a whimsical dream?</h3>
      <p>A personal fantasy that lights up my imagination — not bound by practicality, but full of inspiration and wonder.</p>
    </div>

    <!-- Dream 1: Astronaut -->
    <div class="card" style="margin-top:1.5rem;">
      <div class="icon-box" style="margin-bottom:1rem;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09Z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2Z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
      </div>
      <h3>A Celestial Calling: To Explore the Cosmos</h3>
      <div class="tags" style="margin-bottom:1rem;">
        <span class="tag">Space</span><span class="tag">Exploration</span><span class="tag">Cosmos</span><span class="tag">Philosophy</span>
      </div>
      <p>In the quiet corners of my imagination, I dream of being an <strong>astronaut</strong> — a lone traveler of infinity. I see myself drifting through the vast ocean of the cosmos, not bound by gravity nor time. I wish to sail among the galaxies, tracing constellations with my fingertips, whispering to the stars, and learning the silent language of light.</p>
      <p style="margin-top:0.75rem;">I long to explore the uncharted corners of the universe, to go beyond the known and into the unknowable, where mystery itself takes form. My heart yearns to dive into <strong>black holes</strong> — those majestic cosmic whirlpools that defy logic, swallowing light and time, yet holding secrets older than creation.</p>
      <p style="margin-top:0.75rem;">In my fantasy, I drift through nebulae of colors unseen by human eyes, witness the birth of stars, and touch the cold silence where even echoes fade. It's not merely about exploring space — it's about <strong>understanding existence</strong>, finding meaning in the endless expanse.</p>
      <p style="margin-top:0.75rem;font-style:italic;color:var(--clr-primary);">Though my path on Earth belongs to a different field, this dream — this celestial calling — will always live within me, quietly burning like a distant star that never stops shining.</p>
    </div>

    <!-- Dream 2: Time Machine -->
    <div class="card" style="margin-top:1.5rem;">
      <div class="icon-box" style="margin-bottom:1rem;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      </div>
      <h3>My Fantasy Ambition — The Time Voyager</h3>
      <div class="tags" style="margin-bottom:1rem;">
        <span class="tag">Time Travel</span><span class="tag">History</span><span class="tag">Future</span><span class="tag">Curiosity</span>
      </div>
      <p>Beyond my cosmic dreams lies another — a fascination not with space, but with <strong>time itself</strong>. I dream of creating a <strong>time machine</strong>, a vessel of destiny that can pierce the veil of ages and traverse the endless river of moments.</p>
      <p style="margin-top:0.75rem;">I wish to journey through the <strong>past</strong>, to witness the birth of civilizations, to stand beside the great minds who shaped humanity's path. I long to wander through the <strong>present</strong> as an observer of how beautifully chaos and order intertwine. And then, I yearn to voyage into the <strong>future</strong> — to witness what we will become.</p>
      <p style="margin-top:0.75rem;">My time machine is not merely a creation of metal and code — it is the embodiment of <strong>curiosity</strong>, the desire to understand every fragment of existence, every echo of "what was," "what is," and "what will be."</p>
      <p style="margin-top:0.75rem;font-style:italic;color:var(--clr-primary);">Though this ambition lies in the realm of fantasy, it fuels my imagination, my creativity, and my belief that even impossibilities begin as dreams.</p>
    </div>

    <!-- Quote -->
    <div class="quote-block" style="margin-top:2rem;">
      <p>"Dream beyond stars, build with courage, wander through wonder, and let the universe itself be your companion in the grand adventure of life."</p>
    </div>

    <div style="text-align:center; margin-top:2rem;">
      <a href="personal.html" class="btn">Back to Personal</a>
      <a href="index.html" class="btn" style="margin-left:0.5rem;">Home</a>
    </div>

  </main>

  <footer class="footer">
    <p>Built with &hearts; by Geo Nithin J</p>
  </footer>

</body>
</html>