{% extends "base.html" %}

{% block title %}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>

</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>

<br>

<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>

<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>

<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>

</section>

{% endblock %}