wqInitial Commit
This commit is contained in:
@@ -1,85 +1,101 @@
|
||||
<!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" />
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{% block title %}Benjamin Mosley{% endblock %}</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="icon" href="{{ url_for('static', filename='BM.png') }}">
|
||||
<!-- Tailwind (compiled) -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
|
||||
|
||||
<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>
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="bg-black text-white font-sans min-h-screen flex flex-col">
|
||||
<body class="min-h-screen bg-[rgb(var(--bg))] text-[rgb(var(--fg))] font-sans flex flex-col">
|
||||
<!-- Header -->
|
||||
<header class="border-b border-[rgb(var(--border))]">
|
||||
<div class="container-page h-16 flex items-center justify-between">
|
||||
<a href="/" class="flex items-center gap-3">
|
||||
<div class="h-8 w-8 rounded-xl bg-accent shadow-glass"></div>
|
||||
<span class="font-archivo font-semibold text-2xl tracking-wide">Benjamin Mosley</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop nav -->
|
||||
<nav class="hidden sm:flex items-center gap-6">
|
||||
<a class="nav-link" href="/blog">Blog</a>
|
||||
<a class="nav-link" href="/resume">Resume</a>
|
||||
<a class="nav-link" href="/projects">Projects</a>
|
||||
<a class="nav-link" href="/contact">Contact</a>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<button id="menuBtn" class="sm:hidden btn btn-ghost" aria-controls="mobileNav" aria-expanded="false">
|
||||
Menu
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile nav -->
|
||||
<nav id="mobileNav" class="hidden sm:hidden border-t border-[rgb(var(--border))]">
|
||||
<div class="container-page py-3 flex flex-col gap-2">
|
||||
<a class="nav-link" href="/blog">Blog</a>
|
||||
<a class="nav-link" href="/resume">Resume</a>
|
||||
<a class="nav-link" href="/projects">Projects</a>
|
||||
<a class="nav-link" href="/contact">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="flex-1">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-[rgb(var(--border))]">
|
||||
<div class="container-page py-8 text-sm text-[rgb(var(--muted))]">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||
<p>© {{ now().year }} Benjamin Mosley.</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="nav-link" href="https://github.com/Benny-ui-ux" target="_blank" rel="noopener">GitHub</a>
|
||||
<a class="nav-link" href="https://bennyshouse.net">Business Site</a>
|
||||
<a class="nav-link" href="mailto:ben@bennyshouse.net">Email</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Tiny JS: mobile menu + theme toggle hook -->
|
||||
<script>
|
||||
(function () {
|
||||
const btn = document.getElementById('menuBtn');
|
||||
const nav = document.getElementById('mobileNav');
|
||||
if (btn && nav) {
|
||||
btn.addEventListener('click', () => {
|
||||
const isOpen = !nav.classList.contains('hidden');
|
||||
nav.classList.toggle('hidden');
|
||||
btn.setAttribute('aria-expanded', String(!isOpen));
|
||||
});
|
||||
}
|
||||
// Optional theme persistence
|
||||
const key = 'bm-theme';
|
||||
const root = document.documentElement;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved) root.setAttribute('data-theme', saved);
|
||||
window.toggleTheme = function () {
|
||||
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
||||
root.setAttribute('data-theme', next);
|
||||
localStorage.setItem(key, next);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user