---
layout: default
title: Start from void. Stack your skills. Reach root.
---

<section class="flex flex-col justify-center items-center h-screen text-center px-4 pt-24">
  <h2 class="text-3xl md:text-6xl font-bold glow mb-6">
    <span id="typewriter"></span>
  </h2>
  <p class="text-gray-400 text-lg md:text-2xl mb-10 max-w-xl break-words">The Space I Wished I had when I Started</p>
  <button onclick="document.getElementById('main-content').scrollIntoView({ behavior: 'smooth' })"
    class="px-6 py-3 border rounded-md border-green-400 text-green-400 hover:bg-green-400 hover:text-black transition duration-300 ease-in-out hover:shadow-lg">
    Enter
  </button>
</section>

<div id="main-content" class="px-4 sm:px-6 max-w-6xl mx-auto py-16">
  
  <section id="features" class="min-h-screen flex flex-col justify-center text-center">
    <h3 class="text-4xl md:text-6xl font-bold mb-12 glow font-mono">Core Features</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
      <div class="p-6 border border-gray-700 hover:border-green-400 hover:shadow-lg transition">
        <h4 class="text-green-400 text-xl font-semibold mb-2 font-mono">Curated Resources</h4>
        <p class="text-gray-400">Handpicked free cybersecurity & programming content.</p>
      </div>
      <div class="p-6 border border-gray-700 hover:border-green-400 hover:shadow-lg transition">
        <h4 class="text-green-400 text-xl font-semibold mb-2 font-mono">Downloadable Labs</h4>
        <p class="text-gray-400">CTFs and lab setups with step-by-step instructions.</p>
      </div>
      <div class="p-6 border border-gray-700 hover:border-green-400 hover:shadow-lg transition">
        <h4 class="text-green-400 text-xl font-semibold mb-2 font-mono">Biweekly Blogs</h4>
        <p class="text-gray-400">Writeups, guides & hands-on hacking notes.</p>
      </div>
    </div>
  </section>

  <section id="blogs" class="py-16">
    <h3 class="text-4xl font-bold mb-8 glow font-mono text-center">Recent Logs</h3>
    <div class="grid gap-4">
      {% for post in site.posts %}
      <a href="{{ post.url | relative_url }}" class="p-4 border border-gray-700 hover:border-green-400 block transition">
        <span class="text-green-400 font-mono">{{ post.date | date: "%Y-%m-%d" }}</span> — {{ post.title }}
      </a>
      {% endfor %}
    </div>
  </section>

  <section id="contact" class="py-24 px-4 max-w-2xl mx-auto">
    <h3 class="text-3xl font-semibold mb-6 glow text-center">Contact Me</h3>
    <form id="contactForm" class="space-y-6 text-left">
      <input type="text" name="name" placeholder="Your name" class="w-full px-4 py-3 bg-black border border-gray-700 text-white focus:border-green-400 outline-none" />
      <textarea name="message" required placeholder="Your message..." rows="6" class="w-full px-4 py-3 bg-black border border-gray-700 text-white focus:border-green-400 outline-none"></textarea>
      <button type="submit" class="w-full sm:w-auto px-6 py-3 border border-green-400 text-green-400 font-mono rounded-md hover:bg-green-400 hover:text-black transition">Send Message</button>
    </form>
    <p id="formSuccess" class="text-green-400 font-mono mt-6 text-center opacity-0 transition-opacity duration-1000">✅ Message sent!</p>
  </section>
</div>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
  const typeTarget = document.querySelector('#typewriter');
  if (typeTarget) {
    new Typed('#typewriter', {
      strings: ['Knowledge Shouldn\'t Cost An Arm', 'Learn Ethical Hacking', 'Learn Programming.', 'Learn Reverse Engineering.', 'No Signups.', 'No Ads.'],
      typeSpeed: 50,
      backSpeed: 50,
      loop: true
    });
  }

  // Formspree Handler
  const contactForm = document.getElementById('contactForm');
  if (contactForm) {
    contactForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const successMsg = document.getElementById('formSuccess');
      try {
        const res = await fetch("https://formspree.io/f/manjpwnr", {
          method: "POST",
          headers: { 'Accept': 'application/json' },
          body: new FormData(contactForm)
        });
        if (res.ok) {
          successMsg.style.opacity = "1";
          contactForm.reset();
          setTimeout(() => { successMsg.style.opacity = "0"; }, 3000);
        }
      } catch (err) { console.error("Form error:", err); }
    });
  }
</script>