85 lines
3.9 KiB
HTML
85 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-...snip..." crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
|
|
<title>{% block title %}Benjamin Mosley{% endblock %}</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
|
|
</head>
|
|
|
|
<body class="bg-black text-white font-sans min-h-screen flex flex-col">
|
|
|
|
|
|
<header class="bg-black text-white shadow" x-data="{ open: false }">
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center p-6">
|
|
|
|
<h1>
|
|
<a href="/" class="text-xl font-bold">Benjamin Mosley</a>
|
|
</h1>
|
|
|
|
<!-- Hamburger button (shown on small screens) -->
|
|
<button @click="open = !open" class="sm:hidden focus:outline-none">
|
|
<svg x-show="!open" x-cloak xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<svg x-show="open" x-cloak xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Desktop nav -->
|
|
<nav class="hidden sm:flex space-x-4">
|
|
<a href="/blog" class="p-3 hover:text-blue-400">Blog</a>
|
|
<a href="/resume" class="p-3 hover:text-blue-400">Resume</a>
|
|
<a href="/projects" class="p-3 hover:text-blue-400">Projects</a>
|
|
<a href="/contact" class="p-3 hover:text-blue-400">Contact</a>
|
|
<a href="/about" class="p-3 hover:text-blue-400">About</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Mobile nav -->
|
|
<div x-show="open" x-cloak class="sm:hidden bg-black border-t border-gray-800">
|
|
<nav class="flex flex-col p-4 space-y-2">
|
|
<a href="/blog" class="hover:text-blue-400">Blog</a>
|
|
<a href="/resume" class="hover:text-blue-400">Resume</a>
|
|
<a href="/projects" class="hover:text-blue-400">Projects</a>
|
|
<a href="/contact" class="hover:text-blue-400">Contact</a>
|
|
<a href="/about" class="hover:text-blue-400">About</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<main class="flex-grow">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<footer class="bg-black text-white text-center py-6 border-t border-gray-800">
|
|
<div class="max-w-4xl mx-auto px-4">
|
|
<p class="text-sm">2025 Benjamin Mosley.</p>
|
|
<div class="flex justify-center gap-4 mt-2 text-sm">
|
|
<a href="https://github.com/Benny-ui-ux" target="_blank" class="hover:text-white transition">GitHub</a>
|
|
<a href="https://bennyshouse.net" class="hover:text-white transition">Business Site</a>
|
|
<a href="mailto:ben@bennyshouse.net" class="hover:text-white transition">Email</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |