|
<!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"> |
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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"> |
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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 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> |
|
|
|
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> |
