seanalytics / index.html
sametgirgin's picture
Add 2 files
5a5c4ba verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seanalytics | Data Science with a Splash of Humor</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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap');
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: #f8fafc;
color: #1e293b;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
.gradient-bg {
background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #6366f1 100%);
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.article-card {
transition: all 0.3s ease;
}
.wave-shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.wave-shape svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
}
.wave-shape .shape-fill {
fill: #FFFFFF;
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="gradient-bg text-white relative overflow-hidden">
<div class="container mx-auto px-6 py-24 md:py-32 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Seanalytics</h1>
<p class="text-xl md:text-2xl mb-8 font-light">Making data science less "standard deviation" and more "standard vacation"</p>
<div class="flex justify-center space-x-4">
<a href="#work" class="px-6 py-3 bg-white text-indigo-600 rounded-full font-semibold hover:bg-indigo-50 transition">View Work</a>
<a href="#contact" class="px-6 py-3 border-2 border-white rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition">Get In Touch</a>
</div>
</div>
</div>
<div class="wave-shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</section>
<!-- About Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Diving Deep into Data</h2>
<p class="text-lg text-slate-600 mb-8">
Hi, I'm Sean (aka Seanalytics), a data scientist who believes numbers tell stories and visualizations should be as delightful as a day at the beach.
I specialize in transforming complex data into actionable insights with a side of humor.
</p>
<div class="flex flex-wrap justify-center gap-4 mb-12">
<span class="px-4 py-2 bg-indigo-50 text-indigo-600 rounded-full">Python</span>
<span class="px-4 py-2 bg-indigo-50 text-indigo-600 rounded-full">Machine Learning</span>
<span class="px-4 py-2 bg-indigo-50 text-indigo-600 rounded-full">Data Visualization</span>
<span class="px-4 py-2 bg-indigo-50 text-indigo-600 rounded-full">SQL</span>
<span class="px-4 py-2 bg-indigo-50 text-indigo-600 rounded-full">Big Data</span>
</div>
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Data visualization on a laptop" class="rounded-xl shadow-lg mx-auto w-full max-w-3xl">
</div>
</div>
</section>
<!-- Work Section -->
<section id="work" class="py-16 bg-slate-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Featured Analyses</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 rounded-xl overflow-hidden shadow-md">
<div class="h-48 bg-indigo-100 flex items-center justify-center">
<i class="fas fa-chart-line text-6xl text-indigo-500"></i>
</div>
<div class="p-6">
<span class="text-sm text-indigo-500">Market Research</span>
<h3 class="text-xl font-bold mt-2 mb-3">Predicting Coffee Trends</h3>
<p class="text-slate-600 mb-4">How machine learning can help cafes optimize their bean selection based on weather patterns and social media sentiment.</p>
<a href="#" class="text-indigo-500 font-semibold hover:text-indigo-700 flex items-center">
Read Analysis
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- Article 2 -->
<div class="article-card bg-white rounded-xl overflow-hidden shadow-md">
<div class="h-48 bg-blue-100 flex items-center justify-center">
<i class="fas fa-dna text-6xl text-blue-500"></i>
</div>
<div class="p-6">
<span class="text-sm text-blue-500">Bioinformatics</span>
<h3 class="text-xl font-bold mt-2 mb-3">Genomic Data Compression</h3>
<p class="text-slate-600 mb-4">Novel algorithms for reducing storage requirements of genomic data while maintaining research integrity.</p>
<a href="#" class="text-blue-500 font-semibold hover:text-blue-700 flex items-center">
Read Analysis
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- Article 3 -->
<div class="article-card bg-white rounded-xl overflow-hidden shadow-md">
<div class="h-48 bg-green-100 flex items-center justify-center">
<i class="fas fa-shopping-cart text-6xl text-green-500"></i>
</div>
<div class="p-6">
<span class="text-sm text-green-500">E-commerce</span>
<h3 class="text-xl font-bold mt-2 mb-3">Cart Abandonment Patterns</h3>
<p class="text-slate-600 mb-4">Identifying the precise moment when shoppers lose interest and implementing interventions to recover sales.</p>
<a href="#" class="text-green-500 font-semibold hover:text-green-700 flex items-center">
Read Analysis
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- Article 4 -->
<div class="article-card bg-white rounded-xl overflow-hidden shadow-md">
<div class="h-48 bg-purple-100 flex items-center justify-center">
<i class="fas fa-heartbeat text-6xl text-purple-500"></i>
</div>
<div class="p-6">
<span class="text-sm text-purple-500">Healthcare</span>
<h3 class="text-xl font-bold mt-2 mb-3">ER Wait Time Predictor</h3>
<p class="text-slate-600 mb-4">Using historical data and real-time inputs to forecast emergency room wait times with 89% accuracy.</p>
<a href="#" class="text-purple-500 font-semibold hover:text-purple-700 flex items-center">
Read Analysis
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<!-- Article 5 -->
<div class="article-card bg-white rounded-xl overflow-hidden shadow-md">
<div class="h-48 bg-yellow-100 flex items-center justify-center">
<i class
</html>