<?php
/*
* Template Name: RAH Homepage
* Template Post Type: page
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>I Was Here. — Robert Allen Hill</title>
<?php wp_head(); ?>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
bg: '#1c1714',
surface: '#241f1b',
gold: '#C9A84C',
goldHover: '#E8C76A',
cream: '#F5F0E8',
muted: '#A89880',
border: '#3a3a3a',
deepSurface: '#1a1710',
},
fontFamily: {
display: ['Playfair Display', 'serif'],
body: ['Inter', 'sans-serif'],
},
},
},
};
</script>
<script src="https://unpkg.com/lucide@latest" defer></script>
<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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<style>
:root {
--bg: #1c1714;
--surface: #241f1b;
--gold: #C9A84C;
--gold-hover: #E8C76A;
--cream: #F5F0E8;
--muted: #A89880;
--border: #3a3a3a;
}
/* Reset WordPress theme interference */
.rah-page * { margin: 0; padding: 0; box-sizing: border-box; }
.rah-page { background-color: var(--bg); color: var(--cream); font-family: 'Inter', sans-serif; overflow-x: hidden; }
.rah-page html { scroll-behavior: smooth; }
/* Hide WordPress theme header/footer on this template */
#wpadminbar { position: fixed !important; }
/* Grain texture overlay */
.grain::after {
content: '';
position: absolute;
inset: 0;
opacity: 0.04;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}
/* Hero animations */
.hero-fade { opacity: 0; transform: translateY(24px); animation: heroIn 1s ease forwards; }
.hero-fade-1 { animation-delay: 0.2s; }
.hero-fade-2 { animation-delay: 0.5s; }
.hero-fade-3 { animation-delay: 0.8s; }
.hero-fade-4 { animation-delay: 1.1s; }
.hero-fade-5 { animation-delay: 1.4s; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
.chevron-bounce { animation: bounce 2s ease-in-out infinite; }
/* Navbar */
.nav-scrolled {
background-color: rgba(28, 23, 20, 0.97) !important;
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
}
/* World cards */
.world-card {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
border: 1px solid var(--border);
}
.world-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 32px rgba(201, 168, 76, 0.15);
border-color: var(--gold);
}
/* Gallery tiles */
.gallery-tile { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; }
.gallery-tile .tile-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(201, 168, 76, 0.85) 0%, rgba(201, 168, 76, 0.2) 50%, transparent 100%);
opacity: 0; transition: opacity 0.3s ease;
display: flex; align-items: flex-end; padding: 1.25rem;
}
.gallery-tile:hover .tile-overlay { opacity: 1; }
/* Nav links */
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after {
content: ''; position: absolute; bottom: -4px; left: 0; width: 0;
height: 2px; background: var(--gold); transition: width 0.3s ease;
}
.nav-link.active { color: var(--gold); }
.nav-link.active::after { width: 100%; }
/* Blog cards */
.blog-card { transition: transform 0.3s ease, border-color 0.3s ease; border: 1px solid var(--border); }
.blog-card:hover { transform: translateY(-4px); border-color: var(--gold); }
/* Modal */
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal-content {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; max-width: 560px; width: 90%; padding: 2.5rem;
transform: scale(0.95); transition: transform 0.3s ease;
}
.modal-backdrop.open .modal-content { transform: scale(1); }
.small-caps { font-variant: small-caps; letter-spacing: 0.15em; }
/* Masonry gallery grid */
.masonry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
gap: 12px;
}
.masonry-grid .tile-tall { grid-row: span 2; }
@media (max-width: 1023px) {
.masonry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
}
@media (max-width: 639px) {
.masonry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.quote-mark {
font-family: 'Playfair Display', serif;
font-size: 5rem;
line-height: 1;
color: var(--gold);
opacity: 0.3;
}
/* ── IMPORTANT: Update these href values with your real page URLs ── */
/* e.g. href="/photography/" href="/about/" href="/stories/" etc. */
</style>
</head>
<body class="rah-page bg-bg">
<!-- ═══════════════════════════════════════
NAVIGATION
═══════════════════════════════════════ -->
<nav id="rah-navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" style="background: transparent;">
<div class="max-w-7xl mx-auto px-5 md:px-8 flex items-center justify-between h-16 md:h-20">
<!-- Logo -->
<a href="<?php echo home_url('/'); ?>" class="flex flex-col items-start leading-tight group cursor-pointer">
<span class="font-display italic text-gold text-lg md:text-xl font-bold tracking-wide">I Was Here.</span>
<span class="text-[8px] md:text-[9px] tracking-[0.18em] text-cream/70 font-body uppercase">Robert Allen Hill · rallenhill.com</span>
</a>
<!-- Desktop Nav — UPDATE THESE LINKS TO MATCH YOUR WORDPRESS PAGE SLUGS -->
<div class="hidden md:flex items-center gap-8">
<a href="<?php echo home_url('/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold" data-section="hero-s1a0">Home</a>
<a href="<?php echo home_url('/photography/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">Photography</a>
<a href="<?php echo home_url('/writing/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">Writing</a>
<a href="<?php echo home_url('/stories/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">Stories & Blog</a>
<a href="<?php echo home_url('/about/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">About</a>
<a href="<?php echo home_url('/connect/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">Connect</a>
</div>
<!-- Mobile Menu Button -->
<button id="rah-mobile-btn" class="md:hidden p-2 text-cream hover:text-gold transition-colors" aria-label="Open menu">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</nav>
<!-- Mobile Menu Overlay -->
<div id="rah-mobile-menu" class="hidden fixed inset-0 bg-bg z-[60] flex flex-col items-center justify-center">
<button id="rah-mobile-close" class="absolute top-5 right-5 p-2 text-cream hover:text-gold transition-colors" aria-label="Close menu">
<i data-lucide="x" class="w-7 h-7"></i>
</button>
<div class="flex flex-col items-center gap-8">
<div class="flex flex-col items-center leading-tight">
<span class="font-display italic text-gold text-2xl font-bold tracking-wide">I Was Here.</span>
<span class="text-[9px] tracking-[0.18em] text-cream/70 font-body uppercase mt-1">Robert Allen Hill · rallenhill.com</span>
</div>
<div class="w-12 h-0.5 bg-gold opacity-40"></div>
<a href="<?php echo home_url('/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Home</a>
<a href="<?php echo home_url('/photography/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Photography</a>
<a href="<?php echo home_url('/writing/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Writing</a>
<a href="<?php echo home_url('/stories/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Stories & Blog</a>
<a href="<?php echo home_url('/about/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">About</a>
<a href="<?php echo home_url('/connect/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Connect</a>
</div>
</div>
<main>
<!-- ═══════════════════════════════════════
SECTION 1: HERO
═══════════════════════════════════════ -->
<section id="hero-s1a0" class="relative min-h-screen flex items-center justify-center grain overflow-hidden">
<!-- Iowa sunrise gradient background -->
<div class="absolute inset-0" style="background:
radial-gradient(ellipse 120% 80% at 50% 100%, #C9A84C22 0%, transparent 50%),
radial-gradient(ellipse 100% 60% at 30% 90%, #d4881a33 0%, transparent 40%),
radial-gradient(ellipse 80% 50% at 70% 85%, #c45e1a22 0%, transparent 45%),
linear-gradient(180deg,
#0a0e1a 0%,
#121a2e 15%,
#1a1a2a 30%,
#2a1a1a 50%,
#3d2208 68%,
#7a4a12 78%,
#c97a1a 88%,
#e8a832 95%,
#C9A84C 100%
);
"></div>
<div class="absolute inset-0" style="background:
radial-gradient(circle at 50% 95%, rgba(232,199,106,0.2) 0%, transparent 40%),
radial-gradient(circle at 20% 60%, rgba(10,14,26,0.5) 0%, transparent 50%),
radial-gradient(circle at 80% 40%, rgba(26,26,42,0.3) 0%, transparent 50%);
"></div>
<!-- TIP: Replace the gradient above with your own photo by adding:
background-image: url('/wp-content/uploads/YOUR-PHOTO.jpg');
background-size: cover; background-position: center;
to the first .absolute.inset-0 div above. -->
<div class="relative z-10 text-center px-5 max-w-3xl mx-auto py-20">
<p class="hero-fade hero-fade-1 text-gold text-xs md:text-sm tracking-[0.3em] uppercase font-body mb-6">Iowa City, Iowa</p>
<p class="hero-fade hero-fade-2 font-display italic text-cream/80 text-sm sm:text-base md:text-lg tracking-wide mb-5">Capturing moments · Telling stories · Leaving evidence</p>
<div class="hero-fade hero-fade-2 w-[50px] h-0.5 bg-gold mx-auto mb-5"></div>
<h1 class="hero-fade hero-fade-2 font-display text-cream text-5xl sm:text-6xl md:text-[6rem] font-bold leading-tight mb-5"
style="text-shadow: 0 0 60px rgba(201,168,76,0.25), 0 2px 40px rgba(0,0,0,0.5);">I Was Here.</h1>
<div class="hero-fade hero-fade-2 w-[50px] h-0.5 bg-gold mx-auto mb-8"></div>
<p class="hero-fade hero-fade-3 font-display italic text-cream/90 text-base sm:text-lg md:text-xl leading-relaxed max-w-2xl mx-auto mb-8">
“Before I take my last breath on my last day on this earth, I want to know that I have made a difference and have left evidence that I was here. A photograph can do that.”
</p>
<div class="hero-fade hero-fade-5 flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
<a href="<?php echo home_url('/photography/'); ?>" class="inline-flex items-center gap-2 bg-gold hover:bg-goldHover text-bg font-body font-semibold text-sm px-8 py-3.5 rounded-full transition-all duration-300 min-h-[44px]">
Explore the Gallery
</a>
<a href="<?php echo home_url('/stories/'); ?>" class="inline-flex items-center gap-2 border border-gold/60 hover:border-goldHover text-gold hover:text-goldHover font-body font-semibold text-sm px-8 py-3.5 rounded-full transition-all duration-300 min-h-[44px]">
Read My Stories
</a>
</div>
</div>
<!-- Scroll chevron -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 chevron-bounce">
<a href="#worlds-s2w5" class="text-gold/60 hover:text-gold transition-colors">
<i data-lucide="chevron-down" class="w-7 h-7"></i>
</a>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 2: FOUR WORLDS
═══════════════════════════════════════ -->
<section id="worlds-s2w5" class="py-20 md:py-28 px-5 md:px-8 bg-bg">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<p class="text-gold text-xs tracking-[0.3em] uppercase font-body mb-3">Discover</p>
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold mb-3">Enter the World of Robert Allen Hill</h2>
<p class="font-display italic text-gold/70 text-sm md:text-base mb-4">— because being here means leaving something behind.</p>
<div class="w-16 h-0.5 bg-gold mx-auto"></div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8">
<!-- Card 1: The Lens -->
<div class="world-card bg-surface rounded-xl p-7 md:p-8 cursor-pointer group"
data-card-title="The Lens — Fine Art Photography"
data-card-desc="Fine art photography rooted in the landscapes, wildlife, and quiet moments of Iowa and beyond. From golden sunrises over cornfields to the intimate macro world of bees on blossoms — every frame Robert captures is an act of preservation. His work has been sold internationally through Fine Art America, reaching collectors and art lovers across the globe. Each photograph is more than an image; it is a legacy, a whisper that says: this moment mattered.">
<div class="flex items-center gap-4 mb-4">
<span class="text-3xl font-display text-gold/30 font-bold">01</span>
<i data-lucide="camera" class="w-6 h-6 text-gold"></i>
</div>
<h3 class="font-display text-xl text-cream font-semibold mb-3 group-hover:text-gold transition-colors">THE LENS</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Fine art photography rooted in the landscapes, wildlife, and quiet moments of Iowa and beyond. From bees on blossoms to eagles in flight — every frame is a legacy.</p>
<a href="<?php echo home_url('/photography/'); ?>" class="text-gold text-sm font-medium inline-flex items-center gap-1.5 group-hover:gap-3 transition-all">
View Photography <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 2: The Page -->
<div class="world-card bg-surface rounded-xl p-7 md:p-8 cursor-pointer group"
data-card-title="The Page — Creative Writing"
data-card-desc="A creative writer exploring the vast terrain of the human experience through fiction, essays, and long-form storytelling. Robert is currently at work on a book that has been years in the making — a project born from decades of observation, conversation, and the stubborn belief that stories are how we make sense of the world.">
<div class="flex items-center gap-4 mb-4">
<span class="text-3xl font-display text-gold/30 font-bold">02</span>
<i data-lucide="pen-tool" class="w-6 h-6 text-gold"></i>
</div>
<h3 class="font-display text-xl text-cream font-semibold mb-3 group-hover:text-gold transition-colors">THE PAGE</h3>
<p class="text-muted text-sm leading-relaxed mb-5">A creative writer exploring the human experience through fiction, essays, and long-form storytelling. Currently at work on a book that has been years in the making.</p>
<a href="<?php echo home_url('/writing/'); ?>" class="text-gold text-sm font-medium inline-flex items-center gap-1.5 group-hover:gap-3 transition-all">
Explore Writing <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 3: Mickey's World -->
<div class="world-card bg-surface rounded-xl p-7 md:p-8 cursor-pointer group"
data-card-title="Mickey's World"
data-card-desc="Meet Mickey — a sleek, opinionated black cat who is thoroughly convinced he is, in fact, a dog. He fetches. He patrols. He files daily reports from his Iowa City apartment with the seriousness of a seasoned correspondent. Mickey doesn't just live with Robert — he co-authors the narrative, one paw at a time.">
<div class="flex items-center gap-4 mb-4">
<span class="text-3xl font-display text-gold/30 font-bold">03</span>
<i data-lucide="paw-print" class="w-6 h-6 text-gold"></i>
</div>
<h3 class="font-display text-xl text-cream font-semibold mb-3 group-hover:text-gold transition-colors">MICKEY'S WORLD</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Meet Mickey — a black cat who is thoroughly convinced he is a dog. His daily dispatches from Iowa City are equal parts comedy, chaos, and unexpected wisdom.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold text-sm font-medium inline-flex items-center gap-1.5 group-hover:gap-3 transition-all">
Meet Mickey <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 4: The Archive -->
<div class="world-card bg-surface rounded-xl p-7 md:p-8 cursor-pointer group"
data-card-title="The Archive — Stories & Reflections"
data-card-desc="Stories don't expire. The Archive is a curated collection of tales, observations, and reflections spanning years of creative output — some freshly written, some rescued from the early days of the internet. Here you'll find personal essays, short fiction, meditations on photography and craft, and pieces that defy easy categorization.">
<div class="flex items-center gap-4 mb-4">
<span class="text-3xl font-display text-gold/30 font-bold">04</span>
<i data-lucide="archive" class="w-6 h-6 text-gold"></i>
</div>
<h3 class="font-display text-xl text-cream font-semibold mb-3 group-hover:text-gold transition-colors">THE ARCHIVE</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Stories don't expire. A curated collection of tales, observations, and reflections — some freshly written, some rescued from the early days of the internet.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold text-sm font-medium inline-flex items-center gap-1.5 group-hover:gap-3 transition-all">
Browse the Archive <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 3: FEATURED PHOTOGRAPHY
TIP: Replace gradient divs with <img> tags pointing to your
actual uploaded photos in /wp-content/uploads/
═══════════════════════════════════════ -->
<section id="gallery-s3g8" class="py-20 md:py-28 px-5 md:px-8 bg-deepSurface relative grain">
<div class="max-w-6xl mx-auto relative z-10">
<div class="text-center mb-16">
<p class="text-gold text-xs tracking-[0.3em] uppercase font-body mb-3">Portfolio</p>
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold mb-4">Through the Lens</h2>
<div class="w-16 h-0.5 bg-gold mx-auto"></div>
</div>
<div class="masonry-grid">
<div class="gallery-tile tile-tall" style="background: linear-gradient(135deg, #e8a832, #d4881a, #c45e1a, #7a4a12);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Iowa Sunrise</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(160deg, #8faec4, #5a7d99, #3a5570, #2a3d52);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Eagle in Flight</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(140deg, #e8d44a, #8ab83a, #5a9a3a, #7a5aa0);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Honey Bee on Bloom</span></div>
</div>
<div class="gallery-tile tile-tall" style="background: linear-gradient(180deg, #4a4a4a, #2a2a2a, #1a1a1a, #0a0a0a);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Black Angel, Iowa City</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(145deg, #d47a2a, #a85a1a, #6a3a12, #3a2008);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Barn at Dusk</span></div>
</div>
<div class="gallery-tile tile-tall" style="background: linear-gradient(150deg, #d43a3a, #b82a2a, #e8e8e8, #c0c0c0);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Cardinal in Snow</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(135deg, #2a7a4a, #1a6a5a, #0a5a5a, #3a8a5a);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Frog on Lily Pad</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(160deg, #5a2a7a, #7a3a9a, #4a1a5a, #c9a84c44);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Chamber Music</span></div>
</div>
</div>
<div class="text-center mt-12">
<a href="<?php echo home_url('/photography/'); ?>" class="inline-flex items-center gap-2 text-gold hover:text-goldHover font-body font-semibold text-sm transition-colors">
Visit the Full Gallery <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 4: MICKEY'S WORLD BLOG PREVIEW
TIP: Replace these 3 articles with your actual
WordPress recent posts using a query loop, or
update the titles/excerpts manually as you publish.
═══════════════════════════════════════ -->
<section id="mickey-s4m1" class="py-20 md:py-28 px-5 md:px-8 bg-bg relative grain">
<div class="max-w-6xl mx-auto relative z-10">
<div class="text-center mb-16">
<div class="flex items-center justify-center gap-3 mb-4">
<i data-lucide="paw-print" class="w-5 h-5 text-gold"></i>
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold">Mickey's World</h2>
</div>
<p class="text-muted text-sm font-body mb-2">Latest Dispatches</p>
<p class="font-display italic text-gold/60 text-xs md:text-sm mb-4">Even the cat knows: show up. Every. Single. Day.</p>
<div class="w-16 h-0.5 bg-gold mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
<article class="blog-card bg-surface rounded-xl p-6 md:p-7">
<span class="text-muted text-xs font-body tracking-wider uppercase">July 2026</span>
<h3 class="font-display text-cream text-lg font-semibold mt-3 mb-3">The Morning Report</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Mickey's daily patrol of the apartment begins precisely at 5:47 AM. No alarm needed. He has opinions about your pillow, your blanket, and most importantly, your breakfast plans.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold hover:text-goldHover text-sm font-medium inline-flex items-center gap-1.5 transition-colors">Read More <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</article>
<article class="blog-card bg-surface rounded-xl p-6 md:p-7">
<span class="text-muted text-xs font-body tracking-wider uppercase">July 2026</span>
<h3 class="font-display text-cream text-lg font-semibold mt-3 mb-3">On the Matter of Fetch</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Most cats ignore thrown toys. Mickey retrieves them. Nobody taught him this. He considers it one of his finer accomplishments.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold hover:text-goldHover text-sm font-medium inline-flex items-center gap-1.5 transition-colors">Read More <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</article>
<article class="blog-card bg-surface rounded-xl p-6 md:p-7">
<span class="text-muted text-xs font-body tracking-wider uppercase">July 2026</span>
<h3 class="font-display text-cream text-lg font-semibold mt-3 mb-3">Rainy Day Protocol</h3>
<p class="text-muted text-sm leading-relaxed mb-5">When the weather turns, Mickey activates what can only be described as his watchdog mode. He surveys each window, files his report, and naps on duty.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold hover:text-goldHover text-sm font-medium inline-flex items-center gap-1.5 transition-colors">Read More <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</article>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 5: ABOUT TEASER
TIP: Replace the RAH initials circle with your actual
headshot photo: <img src="/wp-content/uploads/robert-hill.jpg"
class="w-64 h-64 md:w-80 md:h-80 rounded-full object-cover" />
═══════════════════════════════════════ -->
<section id="about-s5a3" class="py-20 md:py-28 px-5 md:px-8 bg-surface">
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 items-center">
<!-- Portrait placeholder -->
<div class="flex justify-center">
<div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full flex items-center justify-center"
style="background: linear-gradient(135deg, #C9A84C22, #d4881a22, #1c1714 60%); border: 2px solid #3a3a3a; box-shadow: 0 0 60px rgba(201,168,76,0.08);">
<div class="absolute inset-3 rounded-full border border-gold/20"></div>
<span class="font-display text-gold text-5xl md:text-6xl font-bold" style="text-shadow: 0 2px 20px rgba(201,168,76,0.2);">RAH</span>
</div>
</div>
<!-- Bio -->
<div>
<p class="text-gold text-xs tracking-[0.3em] uppercase font-body mb-3">About the Artist</p>
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold mb-6">Robert Allen Hill</h2>
<p class="text-cream/85 text-sm md:text-base leading-relaxed mb-4">
Robert Allen Hill is a photographer, writer, and storyteller rooted in Iowa City, Iowa. His work spans fine art photography — sold internationally through Fine Art America — to creative fiction, personal essays, and the legendary daily chronicles of a certain opinionated black cat named Mickey.
</p>
<p class="text-cream/85 text-sm md:text-base leading-relaxed mb-8">
He has been creating and sharing since the early days of the internet, and believes deeply that every photograph, every story, every word is a small act of saying: <em class="text-gold font-display">I was here.</em>
</p>
<div class="flex flex-wrap gap-3 mb-8">
<!-- UPDATE these links with your real Instagram and Facebook URLs -->
<a href="https://instagram.com/rallenhill" target="_blank" rel="noopener" class="inline-flex items-center gap-2 border border-gold/40 hover:border-gold text-gold hover:text-goldHover text-sm px-5 py-2.5 rounded-full transition-all duration-300 min-h-[44px]">
<i data-lucide="instagram" class="w-4 h-4"></i> Follow on Instagram
</a>
<a href="https://facebook.com/RobertAllenHill" target="_blank" rel="noopener" class="inline-flex items-center gap-2 border border-gold/40 hover:border-gold text-gold hover:text-goldHover text-sm px-5 py-2.5 rounded-full transition-all duration-300 min-h-[44px]">
<i data-lucide="facebook" class="w-4 h-4"></i> Follow on Facebook
</a>
</div>
<a href="<?php echo home_url('/about/'); ?>" class="inline-flex items-center gap-2 bg-gold hover:bg-goldHover text-bg font-body font-semibold text-sm px-7 py-3 rounded-full transition-all duration-300 min-h-[44px]">
Read My Full Story <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 6: QUOTE BREAK
═══════════════════════════════════════ -->
<section id="quote-s6q9" class="py-20 md:py-28 px-5 md:px-8 bg-bg relative grain">
<div class="max-w-3xl mx-auto text-center relative z-10">
<div class="quote-mark leading-none mb-2">“</div>
<blockquote class="font-display italic text-gold text-xl sm:text-2xl md:text-3xl leading-relaxed mb-6"
style="text-shadow: 0 2px 20px rgba(201,168,76,0.1);">
Photography is a way of feeling, touching, and loving. The things that you capture in your photographs are captured forever. The picture will remember things long after we have left this earth.
</blockquote>
<div class="w-12 h-0.5 bg-gold/40 mx-auto mb-4"></div>
<cite class="text-muted text-sm font-body not-italic tracking-wider">— Robert Allen Hill</cite>
<p class="text-gold/60 text-xs font-body tracking-[0.15em] mt-3" style="font-variant: small-caps;">— I Was Here. · Robert Allen Hill · Iowa City, Iowa</p>
<div class="quote-mark leading-none mt-4" style="transform: rotate(180deg);">“</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 7: CONNECT
UPDATE: Fine Art America, Pixieset, Instagram,
Facebook URLs with your real profile links
═══════════════════════════════════════ -->
<section id="connect-s7c6" class="py-20 md:py-28 px-5 md:px-8 bg-surface border-t border-border">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold mb-4">Let's Connect</h2>
<div class="w-16 h-0.5 bg-gold mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
<div class="text-center md:text-left">
<h3 class="font-display text-cream text-lg font-semibold mb-4 flex items-center justify-center md:justify-start gap-2">
<i data-lucide="camera" class="w-4 h-4 text-gold"></i> Photography
</h3>
<ul class="space-y-2.5">
<li><a href="https://fineartamerica.com/profiles/robertallen-hill" target="_blank" rel="noopener" class="text-gold hover:text-goldHover text-sm transition-colors">Fine Art America Store</a></li>
<li><a href="https://rallenhill.pixieset.com" target="_blank" rel="noopener" class="text-gold hover:text-goldHover text-sm transition-colors">Pixieset Portfolio</a></li>
</ul>
</div>
<div class="text-center md:text-left">
<h3 class="font-display text-cream text-lg font-semibold mb-4 flex items-center justify-center md:justify-start gap-2">
<i data-lucide="pen-tool" class="w-4 h-4 text-gold"></i> Writing & Stories
</h3>
<ul class="space-y-2.5">
<li><a href="<?php echo home_url('/stories/'); ?>" class="text-gold hover:text-goldHover text-sm transition-colors">Subscribe to the Blog</a></li>
<li><a href="<?php echo home_url('/writing/'); ?>" class="text-gold hover:text-goldHover text-sm transition-colors">The Book Project</a></li>
</ul>
</div>
<div class="text-center md:text-left">
<h3 class="font-display text-cream text-lg font-semibold mb-4 flex items-center justify-center md:justify-start gap-2">
<i data-lucide="share-2" class="w-4 h-4 text-gold"></i> Social
</h3>
<ul class="space-y-2.5">
<li><a href="https://instagram.com/rallenhill" target="_blank" rel="noopener" class="text-gold hover:text-goldHover text-sm transition-colors inline-flex items-center gap-2"><i data-lucide="instagram" class="w-3.5 h-3.5"></i> Instagram</a></li>
<li><a href="https://facebook.com/RobertAllenHill" target="_blank" rel="noopener" class="text-gold hover:text-goldHover text-sm transition-colors inline-flex items-center gap-2"><i data-lucide="facebook" class="w-3.5 h-3.5"></i> Facebook</a></li>
</ul>
</div>
</div>
</div>
</section>
</main>
<!-- ═══════════════════════════════════════
FOOTER
═══════════════════════════════════════ -->
<footer class="bg-[#111111] border-t border-border py-5 px-5 md:px-8">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-muted">
<span>© <?php echo date('Y'); ?> Robert Allen Hill — Iowa City, Iowa</span>
<span class="text-gold/60 font-display italic tracking-wider"><em>I Was Here.</em> · rallenhill.com</span>
<div class="flex items-center gap-4">
<a href="https://instagram.com/rallenhill" target="_blank" rel="noopener" class="text-muted hover:text-gold transition-colors"><i data-lucide="instagram" class="w-4 h-4"></i></a>
<a href="https://facebook.com/RobertAllenHill" target="_blank" rel="noopener" class="text-muted hover:text-gold transition-colors"><i data-lucide="facebook" class="w-4 h-4"></i></a>
<a href="<?php echo home_url('/connect/'); ?>" class="text-muted hover:text-gold transition-colors"><i data-lucide="mail" class="w-4 h-4"></i></a>
</div>
</div>
</footer>
<!-- ═══════════════════════════════════════
WORLD CARD MODAL
═══════════════════════════════════════ -->
<div id="rah-modal" class="modal-backdrop">
<div class="modal-content">
<div class="flex items-start justify-between mb-5">
<h3 id="rah-modal-title" class="font-display text-gold text-xl font-bold"></h3>
<button id="rah-modal-close" class="text-muted hover:text-cream transition-colors p-1 -mt-1 -mr-1">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<p id="rah-modal-desc" class="text-cream/80 text-sm leading-relaxed"></p>
<div class="mt-6 pt-4 border-t border-border">
<button id="rah-modal-action" class="inline-flex items-center gap-2 bg-gold hover:bg-goldHover text-bg font-body font-semibold text-sm px-6 py-2.5 rounded-full transition-all duration-300 min-h-[44px]">
Explore <i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
<?php wp_footer(); ?>
<script>
// Initialise Lucide icons
if (typeof lucide !== 'undefined') lucide.createIcons();
// ── NAVBAR SCROLL ──────────────────────────────
const navbar = document.getElementById('rah-navbar');
window.addEventListener('scroll', function () {
if (window.scrollY > 80) {
navbar.classList.add('nav-scrolled');
} else {
navbar.classList.remove('nav-scrolled');
}
}, { passive: true });
// ── MOBILE MENU ────────────────────────────────
const mobileBtn = document.getElementById('rah-mobile-btn');
const mobileMenu = document.getElementById('rah-mobile-menu');
const mobileClose = document.getElementById('rah-mobile-close');
const mobileLinks = document.querySelectorAll('.rah-mobile-link');
function openMenu() { mobileMenu.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }
function closeMenu() { mobileMenu.classList.add('hidden'); document.body.style.overflow = ''; }
mobileBtn.addEventListener('click', openMenu);
mobileClose.addEventListener('click', closeMenu);
mobileLinks.forEach(function (l) { l.addEventListener('click', closeMenu); });
// ── WORLD CARD MODALS ──────────────────────────
const modal = document.getElementById('rah-modal');
const modalTitle = document.getElementById('rah-modal-title');
const modalDesc = document.getElementById('rah-modal-desc');
const modalClose = document.getElementById('rah-modal-close');
const modalBtn = document.getElementById('rah-modal-action');
function openModal(t, d) {
modalTitle.textContent = t;
modalDesc.textContent = d;
modal.classList.add('open');
document.body.style.overflow = 'hidden';
if (typeof lucide !== 'undefined') lucide.createIcons();
}
function closeModal() {
modal.classList.remove('open');
document.body.style.overflow = '';
}
document.querySelectorAll('.world-card').forEach(function (card) {
card.addEventListener('click', function () {
openModal(this.dataset.cardTitle, this.dataset.cardDesc);
});
});
modalClose.addEventListener('click', closeModal);
modalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', function (e) { if (e.target === modal) closeModal(); });
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') { closeModal(); closeMenu(); }
});
</script>
</body>
</html>
}<?php
/*
* Template Name: RAH Homepage
* Template Post Type: page
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>I Was Here. — Robert Allen Hill</title>
<?php wp_head(); ?>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
bg: '#1c1714',
surface: '#241f1b',
gold: '#C9A84C',
goldHover: '#E8C76A',
cream: '#F5F0E8',
muted: '#A89880',
border: '#3a3a3a',
deepSurface: '#1a1710',
},
fontFamily: {
display: ['Playfair Display', 'serif'],
body: ['Inter', 'sans-serif'],
},
},
},
};
</script>
<script src="https://unpkg.com/lucide@latest" defer></script>
<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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<style>
:root {
--bg: #1c1714;
--surface: #241f1b;
--gold: #C9A84C;
--gold-hover: #E8C76A;
--cream: #F5F0E8;
--muted: #A89880;
--border: #3a3a3a;
}
/* Reset WordPress theme interference */
.rah-page * { margin: 0; padding: 0; box-sizing: border-box; }
.rah-page { background-color: var(--bg); color: var(--cream); font-family: 'Inter', sans-serif; overflow-x: hidden; }
.rah-page html { scroll-behavior: smooth; }
/* Hide WordPress theme header/footer on this template */
#wpadminbar { position: fixed !important; }
/* Grain texture overlay */
.grain::after {
content: '';
position: absolute;
inset: 0;
opacity: 0.04;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
}
/* Hero animations */
.hero-fade { opacity: 0; transform: translateY(24px); animation: heroIn 1s ease forwards; }
.hero-fade-1 { animation-delay: 0.2s; }
.hero-fade-2 { animation-delay: 0.5s; }
.hero-fade-3 { animation-delay: 0.8s; }
.hero-fade-4 { animation-delay: 1.1s; }
.hero-fade-5 { animation-delay: 1.4s; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
.chevron-bounce { animation: bounce 2s ease-in-out infinite; }
/* Navbar */
.nav-scrolled {
background-color: rgba(28, 23, 20, 0.97) !important;
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
}
/* World cards */
.world-card {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
border: 1px solid var(--border);
}
.world-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 32px rgba(201, 168, 76, 0.15);
border-color: var(--gold);
}
/* Gallery tiles */
.gallery-tile { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; }
.gallery-tile .tile-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(201, 168, 76, 0.85) 0%, rgba(201, 168, 76, 0.2) 50%, transparent 100%);
opacity: 0; transition: opacity 0.3s ease;
display: flex; align-items: flex-end; padding: 1.25rem;
}
.gallery-tile:hover .tile-overlay { opacity: 1; }
/* Nav links */
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after {
content: ''; position: absolute; bottom: -4px; left: 0; width: 0;
height: 2px; background: var(--gold); transition: width 0.3s ease;
}
.nav-link.active { color: var(--gold); }
.nav-link.active::after { width: 100%; }
/* Blog cards */
.blog-card { transition: transform 0.3s ease, border-color 0.3s ease; border: 1px solid var(--border); }
.blog-card:hover { transform: translateY(-4px); border-color: var(--gold); }
/* Modal */
.modal-backdrop {
position: fixed; inset: 0; z-index: 100;
background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal-content {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; max-width: 560px; width: 90%; padding: 2.5rem;
transform: scale(0.95); transition: transform 0.3s ease;
}
.modal-backdrop.open .modal-content { transform: scale(1); }
.small-caps { font-variant: small-caps; letter-spacing: 0.15em; }
/* Masonry gallery grid */
.masonry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
gap: 12px;
}
.masonry-grid .tile-tall { grid-row: span 2; }
@media (max-width: 1023px) {
.masonry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
}
@media (max-width: 639px) {
.masonry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.quote-mark {
font-family: 'Playfair Display', serif;
font-size: 5rem;
line-height: 1;
color: var(--gold);
opacity: 0.3;
}
/* ── IMPORTANT: Update these href values with your real page URLs ── */
/* e.g. href="/photography/" href="/about/" href="/stories/" etc. */
</style>
</head>
<body class="rah-page bg-bg">
<!-- ═══════════════════════════════════════
NAVIGATION
═══════════════════════════════════════ -->
<nav id="rah-navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" style="background: transparent;">
<div class="max-w-7xl mx-auto px-5 md:px-8 flex items-center justify-between h-16 md:h-20">
<!-- Logo -->
<a href="<?php echo home_url('/'); ?>" class="flex flex-col items-start leading-tight group cursor-pointer">
<span class="font-display italic text-gold text-lg md:text-xl font-bold tracking-wide">I Was Here.</span>
<span class="text-[8px] md:text-[9px] tracking-[0.18em] text-cream/70 font-body uppercase">Robert Allen Hill · rallenhill.com</span>
</a>
<!-- Desktop Nav — UPDATE THESE LINKS TO MATCH YOUR WORDPRESS PAGE SLUGS -->
<div class="hidden md:flex items-center gap-8">
<a href="<?php echo home_url('/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold" data-section="hero-s1a0">Home</a>
<a href="<?php echo home_url('/photography/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">Photography</a>
<a href="<?php echo home_url('/writing/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">Writing</a>
<a href="<?php echo home_url('/stories/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">Stories & Blog</a>
<a href="<?php echo home_url('/about/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">About</a>
<a href="<?php echo home_url('/connect/'); ?>" class="nav-link text-sm font-body text-cream hover:text-gold">Connect</a>
</div>
<!-- Mobile Menu Button -->
<button id="rah-mobile-btn" class="md:hidden p-2 text-cream hover:text-gold transition-colors" aria-label="Open menu">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</nav>
<!-- Mobile Menu Overlay -->
<div id="rah-mobile-menu" class="hidden fixed inset-0 bg-bg z-[60] flex flex-col items-center justify-center">
<button id="rah-mobile-close" class="absolute top-5 right-5 p-2 text-cream hover:text-gold transition-colors" aria-label="Close menu">
<i data-lucide="x" class="w-7 h-7"></i>
</button>
<div class="flex flex-col items-center gap-8">
<div class="flex flex-col items-center leading-tight">
<span class="font-display italic text-gold text-2xl font-bold tracking-wide">I Was Here.</span>
<span class="text-[9px] tracking-[0.18em] text-cream/70 font-body uppercase mt-1">Robert Allen Hill · rallenhill.com</span>
</div>
<div class="w-12 h-0.5 bg-gold opacity-40"></div>
<a href="<?php echo home_url('/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Home</a>
<a href="<?php echo home_url('/photography/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Photography</a>
<a href="<?php echo home_url('/writing/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Writing</a>
<a href="<?php echo home_url('/stories/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Stories & Blog</a>
<a href="<?php echo home_url('/about/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">About</a>
<a href="<?php echo home_url('/connect/'); ?>" class="rah-mobile-link font-display text-2xl text-cream hover:text-gold transition-colors">Connect</a>
</div>
</div>
<main>
<!-- ═══════════════════════════════════════
SECTION 1: HERO
═══════════════════════════════════════ -->
<section id="hero-s1a0" class="relative min-h-screen flex items-center justify-center grain overflow-hidden">
<!-- Iowa sunrise gradient background -->
<div class="absolute inset-0" style="background:
radial-gradient(ellipse 120% 80% at 50% 100%, #C9A84C22 0%, transparent 50%),
radial-gradient(ellipse 100% 60% at 30% 90%, #d4881a33 0%, transparent 40%),
radial-gradient(ellipse 80% 50% at 70% 85%, #c45e1a22 0%, transparent 45%),
linear-gradient(180deg,
#0a0e1a 0%,
#121a2e 15%,
#1a1a2a 30%,
#2a1a1a 50%,
#3d2208 68%,
#7a4a12 78%,
#c97a1a 88%,
#e8a832 95%,
#C9A84C 100%
);
"></div>
<div class="absolute inset-0" style="background:
radial-gradient(circle at 50% 95%, rgba(232,199,106,0.2) 0%, transparent 40%),
radial-gradient(circle at 20% 60%, rgba(10,14,26,0.5) 0%, transparent 50%),
radial-gradient(circle at 80% 40%, rgba(26,26,42,0.3) 0%, transparent 50%);
"></div>
<!-- TIP: Replace the gradient above with your own photo by adding:
background-image: url('/wp-content/uploads/YOUR-PHOTO.jpg');
background-size: cover; background-position: center;
to the first .absolute.inset-0 div above. -->
<div class="relative z-10 text-center px-5 max-w-3xl mx-auto py-20">
<p class="hero-fade hero-fade-1 text-gold text-xs md:text-sm tracking-[0.3em] uppercase font-body mb-6">Iowa City, Iowa</p>
<p class="hero-fade hero-fade-2 font-display italic text-cream/80 text-sm sm:text-base md:text-lg tracking-wide mb-5">Capturing moments · Telling stories · Leaving evidence</p>
<div class="hero-fade hero-fade-2 w-[50px] h-0.5 bg-gold mx-auto mb-5"></div>
<h1 class="hero-fade hero-fade-2 font-display text-cream text-5xl sm:text-6xl md:text-[6rem] font-bold leading-tight mb-5"
style="text-shadow: 0 0 60px rgba(201,168,76,0.25), 0 2px 40px rgba(0,0,0,0.5);">I Was Here.</h1>
<div class="hero-fade hero-fade-2 w-[50px] h-0.5 bg-gold mx-auto mb-8"></div>
<p class="hero-fade hero-fade-3 font-display italic text-cream/90 text-base sm:text-lg md:text-xl leading-relaxed max-w-2xl mx-auto mb-8">
“Before I take my last breath on my last day on this earth, I want to know that I have made a difference and have left evidence that I was here. A photograph can do that.”
</p>
<div class="hero-fade hero-fade-5 flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
<a href="<?php echo home_url('/photography/'); ?>" class="inline-flex items-center gap-2 bg-gold hover:bg-goldHover text-bg font-body font-semibold text-sm px-8 py-3.5 rounded-full transition-all duration-300 min-h-[44px]">
Explore the Gallery
</a>
<a href="<?php echo home_url('/stories/'); ?>" class="inline-flex items-center gap-2 border border-gold/60 hover:border-goldHover text-gold hover:text-goldHover font-body font-semibold text-sm px-8 py-3.5 rounded-full transition-all duration-300 min-h-[44px]">
Read My Stories
</a>
</div>
</div>
<!-- Scroll chevron -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 chevron-bounce">
<a href="#worlds-s2w5" class="text-gold/60 hover:text-gold transition-colors">
<i data-lucide="chevron-down" class="w-7 h-7"></i>
</a>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 2: FOUR WORLDS
═══════════════════════════════════════ -->
<section id="worlds-s2w5" class="py-20 md:py-28 px-5 md:px-8 bg-bg">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<p class="text-gold text-xs tracking-[0.3em] uppercase font-body mb-3">Discover</p>
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold mb-3">Enter the World of Robert Allen Hill</h2>
<p class="font-display italic text-gold/70 text-sm md:text-base mb-4">— because being here means leaving something behind.</p>
<div class="w-16 h-0.5 bg-gold mx-auto"></div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8">
<!-- Card 1: The Lens -->
<div class="world-card bg-surface rounded-xl p-7 md:p-8 cursor-pointer group"
data-card-title="The Lens — Fine Art Photography"
data-card-desc="Fine art photography rooted in the landscapes, wildlife, and quiet moments of Iowa and beyond. From golden sunrises over cornfields to the intimate macro world of bees on blossoms — every frame Robert captures is an act of preservation. His work has been sold internationally through Fine Art America, reaching collectors and art lovers across the globe. Each photograph is more than an image; it is a legacy, a whisper that says: this moment mattered.">
<div class="flex items-center gap-4 mb-4">
<span class="text-3xl font-display text-gold/30 font-bold">01</span>
<i data-lucide="camera" class="w-6 h-6 text-gold"></i>
</div>
<h3 class="font-display text-xl text-cream font-semibold mb-3 group-hover:text-gold transition-colors">THE LENS</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Fine art photography rooted in the landscapes, wildlife, and quiet moments of Iowa and beyond. From bees on blossoms to eagles in flight — every frame is a legacy.</p>
<a href="<?php echo home_url('/photography/'); ?>" class="text-gold text-sm font-medium inline-flex items-center gap-1.5 group-hover:gap-3 transition-all">
View Photography <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 2: The Page -->
<div class="world-card bg-surface rounded-xl p-7 md:p-8 cursor-pointer group"
data-card-title="The Page — Creative Writing"
data-card-desc="A creative writer exploring the vast terrain of the human experience through fiction, essays, and long-form storytelling. Robert is currently at work on a book that has been years in the making — a project born from decades of observation, conversation, and the stubborn belief that stories are how we make sense of the world.">
<div class="flex items-center gap-4 mb-4">
<span class="text-3xl font-display text-gold/30 font-bold">02</span>
<i data-lucide="pen-tool" class="w-6 h-6 text-gold"></i>
</div>
<h3 class="font-display text-xl text-cream font-semibold mb-3 group-hover:text-gold transition-colors">THE PAGE</h3>
<p class="text-muted text-sm leading-relaxed mb-5">A creative writer exploring the human experience through fiction, essays, and long-form storytelling. Currently at work on a book that has been years in the making.</p>
<a href="<?php echo home_url('/writing/'); ?>" class="text-gold text-sm font-medium inline-flex items-center gap-1.5 group-hover:gap-3 transition-all">
Explore Writing <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 3: Mickey's World -->
<div class="world-card bg-surface rounded-xl p-7 md:p-8 cursor-pointer group"
data-card-title="Mickey's World"
data-card-desc="Meet Mickey — a sleek, opinionated black cat who is thoroughly convinced he is, in fact, a dog. He fetches. He patrols. He files daily reports from his Iowa City apartment with the seriousness of a seasoned correspondent. Mickey doesn't just live with Robert — he co-authors the narrative, one paw at a time.">
<div class="flex items-center gap-4 mb-4">
<span class="text-3xl font-display text-gold/30 font-bold">03</span>
<i data-lucide="paw-print" class="w-6 h-6 text-gold"></i>
</div>
<h3 class="font-display text-xl text-cream font-semibold mb-3 group-hover:text-gold transition-colors">MICKEY'S WORLD</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Meet Mickey — a black cat who is thoroughly convinced he is a dog. His daily dispatches from Iowa City are equal parts comedy, chaos, and unexpected wisdom.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold text-sm font-medium inline-flex items-center gap-1.5 group-hover:gap-3 transition-all">
Meet Mickey <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
<!-- Card 4: The Archive -->
<div class="world-card bg-surface rounded-xl p-7 md:p-8 cursor-pointer group"
data-card-title="The Archive — Stories & Reflections"
data-card-desc="Stories don't expire. The Archive is a curated collection of tales, observations, and reflections spanning years of creative output — some freshly written, some rescued from the early days of the internet. Here you'll find personal essays, short fiction, meditations on photography and craft, and pieces that defy easy categorization.">
<div class="flex items-center gap-4 mb-4">
<span class="text-3xl font-display text-gold/30 font-bold">04</span>
<i data-lucide="archive" class="w-6 h-6 text-gold"></i>
</div>
<h3 class="font-display text-xl text-cream font-semibold mb-3 group-hover:text-gold transition-colors">THE ARCHIVE</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Stories don't expire. A curated collection of tales, observations, and reflections — some freshly written, some rescued from the early days of the internet.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold text-sm font-medium inline-flex items-center gap-1.5 group-hover:gap-3 transition-all">
Browse the Archive <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 3: FEATURED PHOTOGRAPHY
TIP: Replace gradient divs with <img> tags pointing to your
actual uploaded photos in /wp-content/uploads/
═══════════════════════════════════════ -->
<section id="gallery-s3g8" class="py-20 md:py-28 px-5 md:px-8 bg-deepSurface relative grain">
<div class="max-w-6xl mx-auto relative z-10">
<div class="text-center mb-16">
<p class="text-gold text-xs tracking-[0.3em] uppercase font-body mb-3">Portfolio</p>
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold mb-4">Through the Lens</h2>
<div class="w-16 h-0.5 bg-gold mx-auto"></div>
</div>
<div class="masonry-grid">
<div class="gallery-tile tile-tall" style="background: linear-gradient(135deg, #e8a832, #d4881a, #c45e1a, #7a4a12);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Iowa Sunrise</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(160deg, #8faec4, #5a7d99, #3a5570, #2a3d52);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Eagle in Flight</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(140deg, #e8d44a, #8ab83a, #5a9a3a, #7a5aa0);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Honey Bee on Bloom</span></div>
</div>
<div class="gallery-tile tile-tall" style="background: linear-gradient(180deg, #4a4a4a, #2a2a2a, #1a1a1a, #0a0a0a);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Black Angel, Iowa City</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(145deg, #d47a2a, #a85a1a, #6a3a12, #3a2008);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Barn at Dusk</span></div>
</div>
<div class="gallery-tile tile-tall" style="background: linear-gradient(150deg, #d43a3a, #b82a2a, #e8e8e8, #c0c0c0);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Cardinal in Snow</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(135deg, #2a7a4a, #1a6a5a, #0a5a5a, #3a8a5a);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Frog on Lily Pad</span></div>
</div>
<div class="gallery-tile" style="background: linear-gradient(160deg, #5a2a7a, #7a3a9a, #4a1a5a, #c9a84c44);">
<div class="tile-overlay"><span class="font-display text-bg font-bold text-lg">Chamber Music</span></div>
</div>
</div>
<div class="text-center mt-12">
<a href="<?php echo home_url('/photography/'); ?>" class="inline-flex items-center gap-2 text-gold hover:text-goldHover font-body font-semibold text-sm transition-colors">
Visit the Full Gallery <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 4: MICKEY'S WORLD BLOG PREVIEW
TIP: Replace these 3 articles with your actual
WordPress recent posts using a query loop, or
update the titles/excerpts manually as you publish.
═══════════════════════════════════════ -->
<section id="mickey-s4m1" class="py-20 md:py-28 px-5 md:px-8 bg-bg relative grain">
<div class="max-w-6xl mx-auto relative z-10">
<div class="text-center mb-16">
<div class="flex items-center justify-center gap-3 mb-4">
<i data-lucide="paw-print" class="w-5 h-5 text-gold"></i>
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold">Mickey's World</h2>
</div>
<p class="text-muted text-sm font-body mb-2">Latest Dispatches</p>
<p class="font-display italic text-gold/60 text-xs md:text-sm mb-4">Even the cat knows: show up. Every. Single. Day.</p>
<div class="w-16 h-0.5 bg-gold mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
<article class="blog-card bg-surface rounded-xl p-6 md:p-7">
<span class="text-muted text-xs font-body tracking-wider uppercase">July 2026</span>
<h3 class="font-display text-cream text-lg font-semibold mt-3 mb-3">The Morning Report</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Mickey's daily patrol of the apartment begins precisely at 5:47 AM. No alarm needed. He has opinions about your pillow, your blanket, and most importantly, your breakfast plans.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold hover:text-goldHover text-sm font-medium inline-flex items-center gap-1.5 transition-colors">Read More <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</article>
<article class="blog-card bg-surface rounded-xl p-6 md:p-7">
<span class="text-muted text-xs font-body tracking-wider uppercase">July 2026</span>
<h3 class="font-display text-cream text-lg font-semibold mt-3 mb-3">On the Matter of Fetch</h3>
<p class="text-muted text-sm leading-relaxed mb-5">Most cats ignore thrown toys. Mickey retrieves them. Nobody taught him this. He considers it one of his finer accomplishments.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold hover:text-goldHover text-sm font-medium inline-flex items-center gap-1.5 transition-colors">Read More <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</article>
<article class="blog-card bg-surface rounded-xl p-6 md:p-7">
<span class="text-muted text-xs font-body tracking-wider uppercase">July 2026</span>
<h3 class="font-display text-cream text-lg font-semibold mt-3 mb-3">Rainy Day Protocol</h3>
<p class="text-muted text-sm leading-relaxed mb-5">When the weather turns, Mickey activates what can only be described as his watchdog mode. He surveys each window, files his report, and naps on duty.</p>
<a href="<?php echo home_url('/stories/'); ?>" class="text-gold hover:text-goldHover text-sm font-medium inline-flex items-center gap-1.5 transition-colors">Read More <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i></a>
</article>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 5: ABOUT TEASER
TIP: Replace the RAH initials circle with your actual
headshot photo: <img src="/wp-content/uploads/robert-hill.jpg"
class="w-64 h-64 md:w-80 md:h-80 rounded-full object-cover" />
═══════════════════════════════════════ -->
<section id="about-s5a3" class="py-20 md:py-28 px-5 md:px-8 bg-surface">
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 items-center">
<!-- Portrait placeholder -->
<div class="flex justify-center">
<div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full flex items-center justify-center"
style="background: linear-gradient(135deg, #C9A84C22, #d4881a22, #1c1714 60%); border: 2px solid #3a3a3a; box-shadow: 0 0 60px rgba(201,168,76,0.08);">
<div class="absolute inset-3 rounded-full border border-gold/20"></div>
<span class="font-display text-gold text-5xl md:text-6xl font-bold" style="text-shadow: 0 2px 20px rgba(201,168,76,0.2);">RAH</span>
</div>
</div>
<!-- Bio -->
<div>
<p class="text-gold text-xs tracking-[0.3em] uppercase font-body mb-3">About the Artist</p>
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold mb-6">Robert Allen Hill</h2>
<p class="text-cream/85 text-sm md:text-base leading-relaxed mb-4">
Robert Allen Hill is a photographer, writer, and storyteller rooted in Iowa City, Iowa. His work spans fine art photography — sold internationally through Fine Art America — to creative fiction, personal essays, and the legendary daily chronicles of a certain opinionated black cat named Mickey.
</p>
<p class="text-cream/85 text-sm md:text-base leading-relaxed mb-8">
He has been creating and sharing since the early days of the internet, and believes deeply that every photograph, every story, every word is a small act of saying: <em class="text-gold font-display">I was here.</em>
</p>
<div class="flex flex-wrap gap-3 mb-8">
<!-- UPDATE these links with your real Instagram and Facebook URLs -->
<a href="https://instagram.com/rallenhill" target="_blank" rel="noopener" class="inline-flex items-center gap-2 border border-gold/40 hover:border-gold text-gold hover:text-goldHover text-sm px-5 py-2.5 rounded-full transition-all duration-300 min-h-[44px]">
<i data-lucide="instagram" class="w-4 h-4"></i> Follow on Instagram
</a>
<a href="https://facebook.com/RobertAllenHill" target="_blank" rel="noopener" class="inline-flex items-center gap-2 border border-gold/40 hover:border-gold text-gold hover:text-goldHover text-sm px-5 py-2.5 rounded-full transition-all duration-300 min-h-[44px]">
<i data-lucide="facebook" class="w-4 h-4"></i> Follow on Facebook
</a>
</div>
<a href="<?php echo home_url('/about/'); ?>" class="inline-flex items-center gap-2 bg-gold hover:bg-goldHover text-bg font-body font-semibold text-sm px-7 py-3 rounded-full transition-all duration-300 min-h-[44px]">
Read My Full Story <i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 6: QUOTE BREAK
═══════════════════════════════════════ -->
<section id="quote-s6q9" class="py-20 md:py-28 px-5 md:px-8 bg-bg relative grain">
<div class="max-w-3xl mx-auto text-center relative z-10">
<div class="quote-mark leading-none mb-2">“</div>
<blockquote class="font-display italic text-gold text-xl sm:text-2xl md:text-3xl leading-relaxed mb-6"
style="text-shadow: 0 2px 20px rgba(201,168,76,0.1);">
Photography is a way of feeling, touching, and loving. The things that you capture in your photographs are captured forever. The picture will remember things long after we have left this earth.
</blockquote>
<div class="w-12 h-0.5 bg-gold/40 mx-auto mb-4"></div>
<cite class="text-muted text-sm font-body not-italic tracking-wider">— Robert Allen Hill</cite>
<p class="text-gold/60 text-xs font-body tracking-[0.15em] mt-3" style="font-variant: small-caps;">— I Was Here. · Robert Allen Hill · Iowa City, Iowa</p>
<div class="quote-mark leading-none mt-4" style="transform: rotate(180deg);">“</div>
</div>
</section>
<!-- ═══════════════════════════════════════
SECTION 7: CONNECT
UPDATE: Fine Art America, Pixieset, Instagram,
Facebook URLs with your real profile links
═══════════════════════════════════════ -->
<section id="connect-s7c6" class="py-20 md:py-28 px-5 md:px-8 bg-surface border-t border-border">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<h2 class="font-display text-cream text-3xl md:text-4xl font-bold mb-4">Let's Connect</h2>
<div class="w-16 h-0.5 bg-gold mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
<div class="text-center md:text-left">
<h3 class="font-display text-cream text-lg font-semibold mb-4 flex items-center justify-center md:justify-start gap-2">
<i data-lucide="camera" class="w-4 h-4 text-gold"></i> Photography
</h3>
<ul class="space-y-2.5">
<li><a href="https://fineartamerica.com/profiles/robertallen-hill" target="_blank" rel="noopener" class="text-gold hover:text-goldHover text-sm transition-colors">Fine Art America Store</a></li>
<li><a href="https://rallenhill.pixieset.com" target="_blank" rel="noopener" class="text-gold hover:text-goldHover text-sm transition-colors">Pixieset Portfolio</a></li>
</ul>
</div>
<div class="text-center md:text-left">
<h3 class="font-display text-cream text-lg font-semibold mb-4 flex items-center justify-center md:justify-start gap-2">
<i data-lucide="pen-tool" class="w-4 h-4 text-gold"></i> Writing & Stories
</h3>
<ul class="space-y-2.5">
<li><a href="<?php echo home_url('/stories/'); ?>" class="text-gold hover:text-goldHover text-sm transition-colors">Subscribe to the Blog</a></li>
<li><a href="<?php echo home_url('/writing/'); ?>" class="text-gold hover:text-goldHover text-sm transition-colors">The Book Project</a></li>
</ul>
</div>
<div class="text-center md:text-left">
<h3 class="font-display text-cream text-lg font-semibold mb-4 flex items-center justify-center md:justify-start gap-2">
<i data-lucide="share-2" class="w-4 h-4 text-gold"></i> Social
</h3>
<ul class="space-y-2.5">
<li><a href="https://instagram.com/rallenhill" target="_blank" rel="noopener" class="text-gold hover:text-goldHover text-sm transition-colors inline-flex items-center gap-2"><i data-lucide="instagram" class="w-3.5 h-3.5"></i> Instagram</a></li>
<li><a href="https://facebook.com/RobertAllenHill" target="_blank" rel="noopener" class="text-gold hover:text-goldHover text-sm transition-colors inline-flex items-center gap-2"><i data-lucide="facebook" class="w-3.5 h-3.5"></i> Facebook</a></li>
</ul>
</div>
</div>
</div>
</section>
</main>
<!-- ═══════════════════════════════════════
FOOTER
═══════════════════════════════════════ -->
<footer class="bg-[#111111] border-t border-border py-5 px-5 md:px-8">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-muted">
<span>© <?php echo date('Y'); ?> Robert Allen Hill — Iowa City, Iowa</span>
<span class="text-gold/60 font-display italic tracking-wider"><em>I Was Here.</em> · rallenhill.com</span>
<div class="flex items-center gap-4">
<a href="https://instagram.com/rallenhill" target="_blank" rel="noopener" class="text-muted hover:text-gold transition-colors"><i data-lucide="instagram" class="w-4 h-4"></i></a>
<a href="https://facebook.com/RobertAllenHill" target="_blank" rel="noopener" class="text-muted hover:text-gold transition-colors"><i data-lucide="facebook" class="w-4 h-4"></i></a>
<a href="<?php echo home_url('/connect/'); ?>" class="text-muted hover:text-gold transition-colors"><i data-lucide="mail" class="w-4 h-4"></i></a>
</div>
</div>
</footer>
<!-- ═══════════════════════════════════════
WORLD CARD MODAL
═══════════════════════════════════════ -->
<div id="rah-modal" class="modal-backdrop">
<div class="modal-content">
<div class="flex items-start justify-between mb-5">
<h3 id="rah-modal-title" class="font-display text-gold text-xl font-bold"></h3>
<button id="rah-modal-close" class="text-muted hover:text-cream transition-colors p-1 -mt-1 -mr-1">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<p id="rah-modal-desc" class="text-cream/80 text-sm leading-relaxed"></p>
<div class="mt-6 pt-4 border-t border-border">
<button id="rah-modal-action" class="inline-flex items-center gap-2 bg-gold hover:bg-goldHover text-bg font-body font-semibold text-sm px-6 py-2.5 rounded-full transition-all duration-300 min-h-[44px]">
Explore <i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
<?php wp_footer(); ?>
<script>
// Initialise Lucide icons
if (typeof lucide !== 'undefined') lucide.createIcons();
// ── NAVBAR SCROLL ──────────────────────────────
const navbar = document.getElementById('rah-navbar');
window.addEventListener('scroll', function () {
if (window.scrollY > 80) {
navbar.classList.add('nav-scrolled');
} else {
navbar.classList.remove('nav-scrolled');
}
}, { passive: true });
// ── MOBILE MENU ────────────────────────────────
const mobileBtn = document.getElementById('rah-mobile-btn');
const mobileMenu = document.getElementById('rah-mobile-menu');
const mobileClose = document.getElementById('rah-mobile-close');
const mobileLinks = document.querySelectorAll('.rah-mobile-link');
function openMenu() { mobileMenu.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }
function closeMenu() { mobileMenu.classList.add('hidden'); document.body.style.overflow = ''; }
mobileBtn.addEventListener('click', openMenu);
mobileClose.addEventListener('click', closeMenu);
mobileLinks.forEach(function (l) { l.addEventListener('click', closeMenu); });
// ── WORLD CARD MODALS ──────────────────────────
const modal = document.getElementById('rah-modal');
const modalTitle = document.getElementById('rah-modal-title');
const modalDesc = document.getElementById('rah-modal-desc');
const modalClose = document.getElementById('rah-modal-close');
const modalBtn = document.getElementById('rah-modal-action');
function openModal(t, d) {
modalTitle.textContent = t;
modalDesc.textContent = d;
modal.classList.add('open');
document.body.style.overflow = 'hidden';
if (typeof lucide !== 'undefined') lucide.createIcons();
}
function closeModal() {
modal.classList.remove('open');
document.body.style.overflow = '';
}
document.querySelectorAll('.world-card').forEach(function (card) {
card.addEventListener('click', function () {
openModal(this.dataset.cardTitle, this.dataset.cardDesc);
});
});
modalClose.addEventListener('click', closeModal);
modalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', function (e) { if (e.target === modal) closeModal(); });
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') { closeModal(); closeMenu(); }
});
</script>
</body>
</html>
Iowa City, Iowa
Capturing moments · Telling stories · Leaving evidence
I Was Here.
“Before I take my last breath on my last day on this earth, I want to know that I have made a difference and have left evidence that I was here. A photograph can do that.”
Discover
Enter the World of Robert Allen Hill
— because being here means leaving something behind.
01
THE LENS
Fine art photography rooted in the landscapes, wildlife, and quiet moments of Iowa and beyond. From bees on blossoms to eagles in flight — every frame is a legacy.
02
THE PAGE
A creative writer exploring the human experience through fiction, essays, and long-form storytelling. Currently at work on a book that has been years in the making.
Mickey’s World
Latest Dispatches
Even the cat knows: show up. Every. Single. Day.
The Morning Report
Mickey’s daily patrol of the apartment begins precisely at 5:47 AM. No alarm needed. He has opinions about your pillow, your blanket, and most importantly, your breakfast plans.
On the Matter of Fetch
Most cats ignore thrown toys. Mickey retrieves them. Nobody taught him this. He considers it one of his finer accomplishments.
Rainy Day Protocol
When the weather turns, Mickey activates what can only be described as his watchdog mode. He surveys each window, files his report, and naps on duty.
RAH
About the Artist
Robert Allen Hill
Robert Allen Hill is a photographer, writer, and storyteller rooted in Iowa City, Iowa. His work spans fine art photography — sold internationally through Fine Art America — to creative fiction, personal essays, and the legendary daily chronicles of a certain opinionated black cat named Mickey.
He has been creating and sharing since the early days of the internet, and believes deeply that every photograph, every story, every word is a small act of saying: I was here.
“
Photography is a way of feeling, touching, and loving. The things that you capture in your photographs are captured forever. The picture will remember things long after we have left this earth.— Robert Allen Hill
— I Was Here. · Robert Allen Hill · Iowa City, Iowa
“