Hugging Face's logo

Spaces:
sametgirgin
/
seanalytics
Running

App Files Community
seanalytics
File size: 9,153 Bytes
5a5c4ba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!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>