95 lines
3.4 KiB
HTML
95 lines
3.4 KiB
HTML
{% 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 & Flask</li>
|
||
<li>HTML, CSS, JavaScript</li>
|
||
<li>SQL (MariaDB/MySQL, SQLite)</li>
|
||
<li>Linux sysadmin</li>
|
||
<li>Networking & Security (WireGuard, Samba, DNS)</li>
|
||
<li>Git & 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 %}
|
||
|