File size: 14,186 Bytes
5ac1a91 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paige Turner | Investigative Journalist</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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:wght@400;700&family=Source+Code+Pro&display=swap" rel="stylesheet">
<style>
.typewriter {
font-family: 'Source Code Pro', monospace;
}
.serif {
font-family: 'Playfair Display', serif;
}
.article-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.hero-section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1585829365295-ab7cd400c7e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80');
background-size: cover;
background-position: center;
}
</style>
</head>
<body class="bg-white text-gray-800">
<!-- Navigation -->
<nav class="sticky top-0 z-50 bg-white shadow-sm">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="bg-red-600 w-8 h-8 rounded-full"></div>
<span class="font-bold text-xl serif">Paige Turner</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#about" class="hover:text-red-600 transition">About</a>
<a href="#articles" class="hover:text-red-600 transition">Articles</a>
<a href="#contact" class="hover:text-red-600 transition">Contact</a>
</div>
<button class="md:hidden">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</nav>
<!-- Hero Section - Updated with photo in first fold -->
<section class="hero-section text-white min-h-[80vh] flex items-center py-16">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/3 mb-10 md:mb-0 md:mr-12 flex justify-center">
<div class="relative w-64 h-64 md:w-80 md:h-80">
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="Paige Turner"
class="rounded-full w-full h-full object-cover border-4 border-white shadow-xl">
</div>
</div>
<div class="md:w-2/3 text-center md:text-left">
<h1 class="text-4xl md:text-6xl font-bold mb-6 serif">Paige Turner</h1>
<div class="typewriter text-xl md:text-3xl mb-8 inline-block">
<span class="bg-black px-4 py-2 text-red-400">Stories so good, you'll never skip a Page</span>
</div>
<div class="flex justify-center md:justify-start space-x-4">
<a href="#articles" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-sm font-bold transition inline-block">
Read My Work
</a>
<a href="#contact" class="border border-white hover:bg-white hover:text-black text-white px-8 py-3 rounded-sm font-bold transition inline-block">
Contact
</a>
</div>
</div>
</div>
</div>
</section>
<!-- About Section (Updated to remove duplicate photo) -->
<section id="about" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center serif">About Paige</h2>
<div class="max-w-4xl mx-auto">
<p class="text-lg mb-4">Paige Turner is an award-winning investigative journalist specializing in disinformation campaigns, social justice issues, and human rights violations. With over a decade of experience unraveling complex stories, Paige has worked with major publications including The Sentinel, Global Eye, and TruthFront.</p>
<p class="text-lg mb-4">Her groundbreaking series on algorithmic bias in content moderation earned the 2022 Grantham Prize for Environmental Journalism, while her exposé on covert surveillance in marginalized communities received the 2021 Sidney Award for Public Service Journalism.</p>
<p class="text-lg">When not chasing leads or fact-checking sources, Paige teaches investigative techniques at the Center for Ethical Journalism and mentors emerging reporters through the Reporters Without Margins fellowship program.</p>
</div>
</div>
</section>
<!-- Articles Section -->
<section id="articles" class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center serif">Featured Articles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Article 1 -->
<div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Article thumbnail" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-xs font-semibold text-red-600 uppercase tracking-wider">Investigation</span>
<h3 class="font-bold text-xl mt-2 mb-3">Bots Don't Lie (But Their Creators Do)</h3>
<p class="text-gray-600 mb-4">Uncovering the global network of state-sponsored disinformation farms and their impact on democratic processes.</p>
<a href="#" class="text-red-600 font-medium hover:underline">Read More →</a>
</div>
</div>
<!-- Article 2 -->
<div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
<img src="https://images.unsplash.com/photo-1617791160536-598cf32026fb?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Article thumbnail" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-xs font-semibold text-red-600 uppercase tracking-wider">Exposé</span>
<h3 class="font-bold text-xl mt-2 mb-3">The Algorithmic Redline</h3>
<p class="text-gray-600 mb-4">How AI-powered lending platforms systematically disadvantage minority communities while claiming neutrality.</p>
<a href="#" class="text-red-600 font-medium hover:underline">Read More →</a>
</div>
</div>
<!-- Article 3 -->
<div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Article thumbnail" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-xs font-semibold text-red-600 uppercase tracking-wider">Feature</span>
<h3 class="font-bold text-xl mt-2 mb-3">Gig Dreams, Surveillance Realities</h3>
<p class="text-gray-600 mb-4">The hidden costs of platform work: When productivity tracking becomes worker exploitation.</p>
<a href="#" class="text-red-600 font-medium hover:underline">Read More →</a>
</div>
</div>
<!-- Article 4 -->
<div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
<img src="https://images.unsplash.com/photo-1642790553418-162464971920?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Article thumbnail" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-xs font-semibold text-red-600 uppercase tracking-wider">Analysis</span>
<h3 class="font-bold text-xl mt-2 mb-3">Shadow Censorship in Plain Sight</h3>
<p class="text-gray-600 mb-4">How content moderation rules are weaponized against marginalized voices through opaque algorithmic enforcement.</p>
<a href="#" class="text-red-600 font-medium hover:underline">Read More →</a>
</div>
</div>
<!-- Article 5 -->
<div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
<img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Article thumbnail" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-xs font-semibold text-red-600 uppercase tracking-wider">Profile</span>
<h3 class="font-bold text-xl mt-2 mb-3">The Whistleblower's Dilemma</h3>
<p class="text-gray-600 mb-4">Meet the corporate insiders risking everything to expose unethical AI development practices.</p>
<a href="#" class="text-red-600 font-medium hover:underline">Read More →</a>
</div>
</div>
<!-- Article 6 - Bonus -->
<div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Article thumbnail" class="w-full h-48 object-cover">
<div class="p-6">
<span class="text-xs font-semibold text-red-600 uppercase tracking-wider">Opinion</span>
<h3 class="font-bold text-xl mt-2 mb-3">Why Journalism Needs More Rebels</h3>
<p class="text-gray-600 mb-4">In an era of platform capture and PR spin, investigative reporting must embrace radical transparency.</p>
<a href="#" class="text-red-600 font-medium hover:underline">Read More →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-900 text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-12 text-center serif">Get In Touch</h2>
<div class="max-w-2xl mx-auto text-center">
<p class="text-lg mb-8">For story pitches, speaking engagements, or just to share your thoughts on my work.</p>
<a href="mailto:[email protected]" class="text-xl font-medium text-red-400 hover:text-red-300 transition mb-8 inline-block">
[email protected]
</a>
<div class="flex justify-center space-x-6 mt-8">
<a href="#" class="text-2xl hover:text-red-400 transition" title="LinkedIn">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="text-2xl hover:text-red-400 transition" title="Twitter/X">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-2xl hover:text-red-400 transition" title="Bluesky">
<i class="fas fa-cloud"></i>
</a>
<a href="#" class="text-2xl hover:text-red-400 transition" title="Hugging Face">
<i class="fas fa-robot"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black text-gray-400 py-8">
<div class="container mx-auto px-4 text-center text-sm">
<p>© 2023 Paige Turner. All rights reserved.</p>
<p class="mt-2">Journalism with spine since 2012</p>
</div>
</footer>
<script>
// Simple script for smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=fdaudens/deepsite-portfolio-demo" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html> |