benny/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wqInitial Commit

Browse Source
This commit is contained in:
benny
2026-04-23 01:24:24 +00:00
parent 0925125422
commit 2ccc1d0292
3474 changed files with 787147 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
templates/index.html
View File

@@ -1,46 +1,94 @@
{% extends "base.html" %}
{% block title %}Benjamin Mosley{% endblock %}
{% block title %}Home — Benjamin Mosley{% endblock %}
{% block content %}
<section class="text-center py-16 bg-gradient-to-br from-red-800 to-orange-400 text-white">
<h1 class="mb-3 text-5xl font-extrabold mb-4">Benjamin Mosley's Personal Portfolio</h1>
<img src="{{ url_for('static', filename='Ben.png') }}" alt="Benjamin Mosley"
class="h-32 w-32 mx-auto shadow-lg border-4 border-white mb-6">
<p class="text-xlmb-6">I am Benjamin Mosley, a Computer Information Systems student with
a passion for building, creating, and learning.</p>
<!-- 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">
Builder. Operator. <span class="text-accent">Problem-solver.</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.jpg') }}"
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>
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 p-10 text-white">
<div class="bg-gradient-to-br from-red-600 to-orange-300 p-6 rounded shadow text-center">
<h3 class="text-lg font-bold mb-2">Contact Me</h3>
<p>Have any questions? Reach out to me here</p>
<!-- 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>
<br>
<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>
<a href="/contact" class="bg-blue-400 inline-block text-white font-semibold px-4 py-2 rounded shadpw hpver:bg-gray-100 transition">Learn More</a>
</div>
<!-- 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>
<div class="bg-gradient-to-br from-red-600 to-orange-300 p-6 rounded shadow text-center">
<h3 class="text-lg font-bold mb-2">My Projects</h3>
<p>Check out my latest projects!</p>
<!-- 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>
<br>
<a href="/projects" class="bg-blue-400 inline-block text-white font-semibold px-4 py-2 rounded shadpw hpver:bg-gray-100 transition">Learn More</a>
</div>
<div class="bg-gradient-to-br from-red-600 to-orange-300 p-6 rounded shadow text-center">
<h3 class="text-lg font-bold mb-2">My Blog</h3>
<p>Read my latest Blog-Posts!</p>
<br>
<a href="/blog" class="bg-blue-400 inline-block text-white font-semibold px-4 py-2 rounded shadpw hpver:bg-gray-100 transition">Learn More</a>
</div>
<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 %}