{% extends "base.html" %}
{% block title %}Home — Benjamin Mosley{% endblock %}

{% block content %}

<!-- Hero -->
<section class="relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-br from-orange-500/20 via-rose-500/10 to-fuchsia-500/10 pointer-events-none"></div>
  <div class="container-page py-16 sm:py-24 relative">
    <div class="grid lg:grid-cols-[1.1fr_0.9fr] items-center gap-10">
      <div>
        <h1 class="heading-hero">
          My name is Ben. <span class="text-accent">How can I help you?</span>
        </h1>
        <p class="mt-4 subtle max-w-2xl text-lg">
          I’m Ben — CIS student, full-stack web dev, and infrastructure tinkerer.
          I ship useful, secure, and approachable tools for real people.
        </p>
        <div class="mt-8 flex flex-wrap gap-3">
          <a href="/projects" class="btn btn-primary">See Projects</a>
          <a href="/resume" class="btn btn-ghost">View Resume</a>
         
        </div>
      </div>

      <div class="justify-self-center">
        <img src="{{ url_for('static', filename='Headshot.jpeg') }}"
             alt="Portrait of Benjamin Mosley"
             class="h-40 w-40 sm:h-52 sm:w-52 rounded-2xl border border-[rgb(var(--border))] shadow-glass object-cover">
      </div>
    </div>
  </div>
</section>

<!-- About -->
<section class="container-page py-16">
  <div class="grid md:grid-cols-2 gap-10">
    <article class="card">
      <h2 class="text-2xl font-semibold">Who Am I?</h2>
      <p class="mt-3">
        I’m a developer and tech enthusiast focused on building useful, secure, and accessible digital experiences.
        From full-stack web apps to clean UI systems and network infrastructure — I love the whole stack.
      </p>
    </article>

    <article class="card">
      <h2 class="text-2xl font-semibold">What I’m About</h2>
      <p class="mt-3">
        Technology should empower people, not confuse them. I care about clarity, security, and maintainability —
        and I’m always learning: cybersecurity, backend frameworks, automation, and DevOps.
      </p>
    </article>
  </div>
</section>

<!-- Skills -->
<section class="container-page pb-4">
  <h2 class="text-2xl font-semibold">Skills & Tools</h2>
  <ul class="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-3 list-disc pl-5">
    <li>Python &amp; Flask</li>
    <li>HTML, CSS, JavaScript</li>
    <li>SQL (MariaDB/MySQL, SQLite)</li>
    <li>Linux sysadmin</li>
    <li>Networking &amp; Security (WireGuard, Samba, DNS)</li>
    <li>Git &amp; deployment</li>
    <li>API integrations</li>
  </ul>
</section>

<!-- CTA Cards -->
<section class="container-page py-12">
  <div class="grid md:grid-cols-3 gap-6">
    <article class="card text-center">
      <h3 class="font-semibold text-lg">Contact Me</h3>
      <p class="subtle mt-2">Have questions or an idea? Let’s talk.</p>
      <a href="/contact" class="btn btn-primary mt-4">Reach Out</a>
    </article>

    <article class="card text-center">
      <h3 class="font-semibold text-lg">My Projects</h3>
      <p class="subtle mt-2">Explore things I’ve shipped and shipped-in-progress.</p>
      <a href="/projects" class="btn btn-primary mt-4">Browse Projects</a>
    </article>

    <article class="card text-center">
      <h3 class="font-semibold text-lg">My Blog</h3>
      <p class="subtle mt-2">Notes on building, learning, and systems.</p>
      <a href="/blog" class="btn btn-primary mt-4">Read Posts</a>
    </article>
  </div>
</section>

{% endblock %}

