<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theron Dixon</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<style>
body {
font-family: 'Georgia', serif;
}
.hero-bg {
background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.85)), url('https://picsum.photos/id/1015/2000/1200') center/cover no-repeat;
}
.nav-link {
transition: all 0.3s ease;
}
.nav-link:hover {
color: #d4af37;
border-bottom: 2px solid #d4af37;
}
.blog-card {
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.blog-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3);
}
</style>
</head>
<body class="bg-zinc-950 text-zinc-200">
<!-- Navigation -->
<nav class="fixed top-0 w-full bg-zinc-950/90 backdrop-blur-md z-50 border-b border-zinc-800">
<div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
<div class="text-2xl font-bold tracking-wider text-amber-400">THERON DIXON</div>
<div class="hidden md:flex space-x-10 text-sm uppercase tracking-widest">
<a href="#home" class="nav-link">Home</a>
<a href="#gallery" class="nav-link">Gallery</a>
<a href="#blog" class="nav-link">Journal</a>
<a href="#contact" class="nav-link">Connect</a>
</div>
<button id="mobile-menu-btn" class="md:hidden text-2xl">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden fixed inset-0 bg-zinc-950 z-50 pt-20">
<div class="flex flex-col items-center space-y-8 text-xl">
<a href="#home" class="mobile-link">Home</a>
<a href="#gallery" class="mobile-link">Gallery</a>
<a href="#blog" class="mobile-link">Journal</a>
<a href="#contact" class="mobile-link">Connect</a>
</div>
</div>
<!-- Hero / Home -->
<section id="home" class="hero-bg h-screen flex items-center justify-center text-center">
<div class="max-w-4xl px-6">
<h1 class="text-6xl md:text-7xl font-light tracking-tight mb-4">Theron Dixon</h1>
<p class="text-xl md:text-2xl text-zinc-400 mb-8 max-w-md mx-auto">Thoughts • Moments • Reflections</p>
<a href="#blog" class="inline-block px-10 py-4 border border-amber-400 text-amber-400 hover:bg-amber-400 hover:text-zinc-950 transition-all duration-300 uppercase tracking-widest text-sm">
Enter the Journal
</a>
</div>
</section>
<!-- Gallery -->
<section id="gallery" class="py-24 bg-zinc-900">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-12">
<h2 class="text-5xl font-light">Gallery</h2>
<a href="#" class="text-amber-400 hover:text-amber-300 text-sm uppercase tracking-widest">View All →</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Replace these placeholder images with your own later -->
<div class="aspect-square overflow-hidden">
<img src="https://picsum.photos/id/1015/800/800" alt="Gallery 1" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
</div>
<div class="aspect-square overflow-hidden">
<img src="https://picsum.photos/id/237/800/800" alt="Gallery 2" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
</div>
<div class="aspect-square overflow-hidden">
<img src="https://picsum.photos/id/201/800/800" alt="Gallery 3" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
</div>
<!-- Add more images as needed -->
</div>
</div>
</section>
<!-- Blog / Journal -->
<section id="blog" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<h2 class="text-5xl font-light mb-12">Journal</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Sample Blog Post 1 -->
<div class="blog-card bg-zinc-900 rounded-xl overflow-hidden">
<img src="https://picsum.photos/id/870/800/500" alt="Post 1" class="w-full h-60 object-cover">
<div class="p-8">
<div class="text-amber-400 text-xs uppercase tracking-widest mb-3">March 12, 2026</div>
<h3 class="text-2xl font-light mb-4">The Quiet Power of Reflection</h3>
<p class="text-zinc-400 line-clamp-3">In a world that never stops moving, the moments we pause and reflect often shape us the most...</p>
<a href="#" class="mt-6 inline-block text-amber-400 hover:text-amber-300 text-sm">Read more →</a>
</div>
</div>
<!-- Sample Blog Post 2 -->
<div class="blog-card bg-zinc-900 rounded-xl overflow-hidden">
<img src="https://picsum.photos/id/1016/800/500" alt="Post 2" class="w-full h-60 object-cover">
<div class="p-8">
<div class="text-amber-400 text-xs uppercase tracking-widest mb-3">February 28, 2026</div>
<h3 class="text-2xl font-light mb-4">Moments That Define Us</h3>
<p class="text-zinc-400 line-clamp-3">A collection of thoughts on personal growth, resilience, and the stories we tell ourselves...</p>
<a href="#" class="mt-6 inline-block text-amber-400 hover:text-amber-300 text-sm">Read more →</a>
</div>
</div>
<!-- Sample Blog Post 3 -->
<div class="blog-card bg-zinc-900 rounded-xl overflow-hidden">
<img src="https://picsum.photos/id/133/800/500" alt="Post 3" class="w-full h-60 object-cover">
<div class="p-8">
<div class="text-amber-400 text-xs uppercase tracking-widest mb-3">January 15, 2026</div>
<h3 class="text-2xl font-light mb-4">Finding Elegance in Simplicity</h3>
<p class="text-zinc-400 line-clamp-3">Why less is often more, and how embracing minimalism has changed my perspective...</p>
<a href="#" class="mt-6 inline-block text-amber-400 hover:text-amber-300 text-sm">Read more →</a>
</div>
</div>
</div>
<div class="text-center mt-16">
<a href="#" class="px-8 py-4 border border-zinc-700 hover:border-amber-400 text-sm uppercase tracking-widest transition-colors">
View All Posts
</a>
</div>
</div>
</section>
<!-- Socials & Contact -->
<section id="contact" class="py-24 bg-zinc-900 border-t border-zinc-800">
<div class="max-w-7xl mx-auto px-6 text-center">
<h2 class="text-5xl font-light mb-8">Connect</h2>
<p class="max-w-md mx-auto text-zinc-400 mb-12">Stay in touch through my socials or drop a message.</p>
<div class="flex justify-center gap-10 text-4xl mb-16">
<a href="#" class="hover:text-amber-400 transition-colors"><i class="fab fa-instagram"></i></a>
<a href="#" class="hover:text-amber-400 transition-colors"><i class="fab fa-linkedin"></i></a>
<a href="#" class="hover:text-amber-400 transition-colors"><i class="fab fa-x-twitter"></i></a>
<a href="#" class="hover:text-amber-400 transition-colors"><i class="fab fa-facebook"></i></a>
</div>
<form class="max-w-lg mx-auto space-y-8">
<input type="text" placeholder="Your Name" class="w-full bg-transparent border-b border-zinc-700 focus:border-amber-400 py-4 outline-none text-lg">
<input type="email" placeholder="Your Email" class="w-full bg-transparent border-b border-zinc-700 focus:border-amber-400 py-4 outline-none text-lg">
<textarea placeholder="Your Message" rows="5" class="w-full bg-transparent border-b border-zinc-700 focus:border-amber-400 py-4 outline-none text-lg resize-none"></textarea>
<button type="submit" class="w-full py-5 bg-amber-400 text-zinc-950 font-medium tracking-widest hover:bg-amber-300 transition-all">
SEND MESSAGE
</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="bg-black py-12 text-center text-xs text-zinc-500 tracking-widest">
<div class="max-w-7xl mx-auto px-6">
© 2026 Theron Dixon • All Rights Reserved
</div>
</footer>
<script>
// Tailwind script already included via CDN
const mobileBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
if (!mobileMenu.classList.contains('hidden')) {
mobileBtn.innerHTML = '<i class="fas fa-times"></i>';
} else {
mobileBtn.innerHTML = '<i class="fas fa-bars"></i>';
}
});
// Close mobile menu when clicking links
document.querySelectorAll('.mobile-link').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
mobileBtn.innerHTML = '<i class="fas fa-bars"></i>';
});
});
// Simple form submission alert (replace with real backend later)
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
alert("Thank you! Your message has been received.");
});
</script>
</body>
</html>