-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
332 lines (320 loc) · 18.5 KB
/
Copy pathindex.html
File metadata and controls
332 lines (320 loc) · 18.5 KB
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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title data-bind="name">Your Name</title>
<meta name="description" content="Personal site, accomplishments, and writing." />
<meta property="og:title" content="Your Name" />
<meta property="og:description" content="Personal site, accomplishments, and writing." />
<meta property="og:type" content="website" />
<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=Instrument+Serif:ital@0;1&family=Inter:wght@400;450;500;600;700&display=swap"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./assets/css/styles.css?v=202640" />
</head>
<body class="min-h-screen home-page">
<header class="glass">
<div class="site-nav-shell">
<a href="./index.html" class="taste-brand" data-profile-brand>
<img src="./assets/images/evanpfp.png" alt="" width="32" height="32" />
<span data-bind="name">Your Name</span>
</a>
<nav class="hidden md:flex items-center gap-6 text-sm" aria-label="Primary">
<a class="hover:text-black text-[color:var(--muted)]" href="./index.html" aria-current="page">Home</a>
<a class="hover:text-black text-[color:var(--muted)]" href="./blog/index.html">Blog</a>
<a class="hover:text-black text-[color:var(--muted)]" href="#projects">Projects</a>
<a class="btn btn-ghost" data-bind-href="linkedin" href="https://www.linkedin.com/in/your-handle">LinkedIn</a>
<a class="btn btn-primary" data-bind-href="github" href="https://github.com/your-handle">GitHub</a>
</nav>
<button
id="mobileNavToggle"
class="md:hidden btn btn-outline"
type="button"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="mobileNavMenu"
>
Menu
</button>
</div>
<div id="mobileNavMenu" class="hidden md:hidden px-6 pb-6">
<div class="card p-4 flex flex-col gap-3 text-sm">
<a class="hover:text-black" href="./index.html">Home</a>
<a class="hover:text-black" href="./blog/index.html">Blog</a>
<a class="hover:text-black" href="#projects">Projects</a>
<a class="hover:text-black" data-bind-href="linkedin" href="https://www.linkedin.com/in/your-handle">LinkedIn</a>
<a class="hover:text-black" data-bind-href="github" href="https://github.com/your-handle">GitHub</a>
</div>
</div>
</header>
<main>
<!-- Vertical orbital opener: the first viewport stays composed while
project previews rotate along a right-edge arc as the page scrolls. -->
<section id="showcase" class="taste-hero orbital-hero" aria-labelledby="landing-title" data-orbital-hero>
<div class="taste-hero-inner">
<div class="taste-hero-copy">
<span class="taste-announcement">Open to collab</span>
<h1 id="landing-title" class="taste-hero-title" data-bind="name">Your Name</h1>
<p class="taste-hero-accent" data-bind="tagline">AI • ML • Robotics</p>
<p class="taste-hero-bio" data-bind="bio">
Short bio placeholder. Share your focus areas, what you love building, and the impact you want to make.
</p>
<div class="taste-hero-actions">
<a class="btn btn-primary" data-bind-href="github" href="https://github.com/your-handle">View GitHub</a>
<a class="btn btn-outline" data-bind-href="linkedin" href="https://www.linkedin.com/in/your-handle">Connect on LinkedIn</a>
<a class="btn btn-ghost" href="./blog/index.html">Read the blog</a>
</div>
</div>
<div class="orbital-stage" data-orbital-stage aria-label="Selected project previews">
<div class="orbital-wheel" data-orbital-wheel>
<a class="orbital-card" href="./projects/cleartext.html" data-orbital-card data-label="ClearText" data-subtitle="Document intelligence · 2026">
<img
src="./assets/images/showcase/cleartext.jpg"
alt="ClearText interface turning a dense document into cited, plain-language guidance"
width="1280"
height="797"
loading="eager"
decoding="async"
fetchpriority="high"
/>
</a>
<a class="orbital-card" href="./blog/posts/first-place-and-first-honors-gsef.html" data-orbital-card data-label="First place at GSEF" data-subtitle="Science fair · 2026">
<img
src="./assets/images/showcase/gsef-win.jpg"
alt="Evan at his science fair board holding first-place ribbons and certificates at GSEF"
width="1400"
height="933"
loading="eager"
decoding="async"
/>
</a>
<a class="orbital-card" href="./projects/volsurf.html" data-orbital-card data-label="VolSurf" data-subtitle="Options and quantitative finance · 2026">
<img
src="./assets/images/showcase/volsurf.jpg"
alt="VolSurf dashboard showing an implied volatility surface with summary statistics"
width="1280"
height="454"
loading="eager"
decoding="async"
/>
</a>
<a class="orbital-card" href="./blog/posts/divergent-teams-hackathon-shelfsync.html" data-orbital-card data-label="Divergent Teams Hackathon" data-subtitle="First place, finance · 2026">
<img
src="./assets/images/showcase/divergent-win.jpg"
alt="Evan and his teammate at the Microsoft Atlanta office after winning the Divergent Teams Hackathon"
width="1275"
height="850"
loading="eager"
decoding="async"
/>
</a>
<a class="orbital-card orbital-card--graph" href="./projects/frost-drought-prediction-ml.html" data-orbital-card data-label="Frost & Drought Prediction" data-subtitle="Climate machine learning · 2026">
<img
src="./assets/images/showcase/frost-drought.jpg"
alt="Feature importance chart from the frost and drought prediction models"
width="1280"
height="1097"
loading="eager"
decoding="async"
/>
</a>
<a class="orbital-card" href="./projects/cricket-coach.html" data-orbital-card data-label="Cricket Coach" data-subtitle="Sports analytics · 2026">
<img
src="./assets/images/showcase/cricket-coach.jpg"
alt="Cricket Coach landing page for uploading a clip and getting technique feedback"
width="1280"
height="846"
loading="eager"
decoding="async"
/>
</a>
</div>
<div class="orbital-caption" aria-live="polite">
<span>Selected project</span>
<strong data-orbital-title>ClearText</strong>
<small data-orbital-subtitle>Document intelligence · 2026</small>
</div>
</div>
<noscript>
<div class="orbital-fallback">
<a href="./projects/cleartext.html">
<img src="./assets/images/showcase/cleartext.jpg" alt="ClearText interface" width="1280" height="797" />
</a>
</div>
</noscript>
</div>
</section>
<section id="projects" class="container mx-auto px-6 py-16 space-y-8">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
<div class="space-y-2">
<p class="eyebrow">All projects</p>
<h2 class="section-title">Highlights from recent work</h2>
</div>
</div>
<div class="project-list">
<!-- Featured lead project -->
<article class="project-featured project-item">
<div class="space-y-3">
<p class="text-sm text-[color:var(--muted)]">Document intelligence</p>
<h3 class="text-2xl sm:text-3xl font-semibold tracking-tight leading-tight">ClearText: Evidence-Constrained, Local-First Document Intelligence</h3>
<div class="flex gap-2 flex-wrap pt-1">
<span class="badge">NLP</span>
<span class="badge badge-muted">AI Safety</span>
</div>
</div>
<div class="space-y-5">
<p class="text-[color:var(--text-soft)] leading-relaxed">
Local-first NLP pipeline with fact-only generation, containerized stages, Kubernetes scaling, and CPU-optimized inference.
</p>
<div class="flex gap-4 flex-wrap text-sm">
<a class="btn btn-outline" href="./projects/cleartext.html" aria-label="Read more about ClearText">Read more</a>
<a class="btn btn-ghost" href="https://github.com/your-handle/cleartext" aria-label="ClearText GitHub repository">GitHub</a>
</div>
</div>
</article>
<!-- Standard rows -->
<a class="project-row project-item" href="./projects/limit-order-book-trading-simulator.html" aria-label="Read more about Limit Order Book Trading Simulator">
<div>
<p class="text-xs text-[color:var(--muted)] mb-1">RL infrastructure</p>
<h3 class="text-lg font-semibold tracking-tight">Limit Order Book Trading Simulator</h3>
<div class="flex gap-2 flex-wrap mt-2 md:hidden">
<span class="badge">Systems</span><span class="badge badge-muted">RL</span>
</div>
</div>
<p class="text-sm text-[color:var(--muted)] leading-relaxed">
Distributed simulator and evaluation stack for RL agents with Gym-style APIs, metrics logging, and Kubernetes orchestration.
</p>
<span class="project-arrow hidden md:inline-flex items-center text-sm font-medium" aria-hidden="true">Read more →</span>
</a>
<a class="project-row project-item" href="./projects/volsurf.html" aria-label="Read more about VolSurf">
<div>
<p class="text-xs text-[color:var(--muted)] mb-1">Options & quant</p>
<h3 class="text-lg font-semibold tracking-tight">VolSurf: Implied Volatility Surface Explorer</h3>
<div class="flex gap-2 flex-wrap mt-2 md:hidden">
<span class="badge">Quant</span><span class="badge badge-muted">Options</span>
</div>
</div>
<p class="text-sm text-[color:var(--muted)] leading-relaxed">
Web app to build and visualize IV surfaces across strike and expiry: 3D view, Greeks, put–call parity, smile vs smirk. Black–Scholes and IV solver implemented in-project; FastAPI + React.
</p>
<span class="project-arrow hidden md:inline-flex items-center text-sm font-medium" aria-hidden="true">Read more →</span>
</a>
<a class="project-row project-item" href="./projects/navier-stokes-webgpu.html" aria-label="Read more about Navier–Stokes WebGPU">
<div>
<p class="text-xs text-[color:var(--muted)] mb-1">Graphics / simulation</p>
<h3 class="text-lg font-semibold tracking-tight">Navier–Stokes WebGPU</h3>
<div class="flex gap-2 flex-wrap mt-2 md:hidden">
<span class="badge">WebGPU</span><span class="badge badge-muted">Graphics</span>
</div>
</div>
<p class="text-sm text-[color:var(--muted)] leading-relaxed">
Real-time 2D incompressible fluid in the browser via raw WebGPU and WGSL. Stam’s Stable Fluids; click-drag to inject dye and velocity. No Three.js: compute and render pipelines from scratch.
</p>
<span class="project-arrow hidden md:inline-flex items-center text-sm font-medium" aria-hidden="true">Read more →</span>
</a>
<a class="project-row project-item" href="./projects/frost-drought-prediction-ml.html" aria-label="Read more about Frost and Drought Prediction with ML">
<div>
<p class="text-xs text-[color:var(--muted)] mb-1">Climate forecasting</p>
<h3 class="text-lg font-semibold tracking-tight">Frost & Drought Prediction with ML</h3>
<div class="flex gap-2 flex-wrap mt-2 md:hidden">
<span class="badge">ML</span><span class="badge badge-muted">Data</span>
</div>
</div>
<p class="text-sm text-[color:var(--muted)] leading-relaxed">
Fine-scale (10–30 m) frost and drought forecasting with fused satellite + reanalysis data, ConvLSTM transfer learning, and SHAP interpretability.
</p>
<span class="project-arrow hidden md:inline-flex items-center text-sm font-medium" aria-hidden="true">Read more →</span>
</a>
<a class="project-row project-item" href="./projects/accentcoach.html" aria-label="Read more about the AI-Driven Pronunciation Feedback Platform">
<div>
<p class="text-xs text-[color:var(--muted)] mb-1">Speech ML</p>
<h3 class="text-lg font-semibold tracking-tight">AI-Driven Pronunciation Feedback Platform</h3>
<div class="flex gap-2 flex-wrap mt-2 md:hidden">
<span class="badge">Speech</span><span class="badge badge-muted">Platform</span>
</div>
</div>
<p class="text-sm text-[color:var(--muted)] leading-relaxed">
Full-stack platform with modular audio scoring services, workflow orchestration, and scalable Kubernetes deployment.
</p>
<span class="project-arrow hidden md:inline-flex items-center text-sm font-medium" aria-hidden="true">Read more →</span>
</a>
<a class="project-row project-item" href="./projects/table-tennis-ai-referee.html" aria-label="Read more about the Table Tennis Game Monitoring System">
<div>
<p class="text-xs text-[color:var(--muted)] mb-1">Real-time vision</p>
<h3 class="text-lg font-semibold tracking-tight">Table Tennis Game Monitoring System</h3>
<div class="flex gap-2 flex-wrap mt-2 md:hidden">
<span class="badge">Computer Vision</span><span class="badge badge-muted">Real-time</span>
</div>
</div>
<p class="text-sm text-[color:var(--muted)] leading-relaxed">
Low-latency CV pipeline for ball/paddle/table tracking with event detection and containerized inference services.
</p>
<span class="project-arrow hidden md:inline-flex items-center text-sm font-medium" aria-hidden="true">Read more →</span>
</a>
<a class="project-row project-item" href="./projects/cricket-coach.html" aria-label="Read more about the Cricket Technique Analysis Platform">
<div>
<p class="text-xs text-[color:var(--muted)] mb-1">Sports analytics</p>
<h3 class="text-lg font-semibold tracking-tight">Cricket Technique Analysis Platform</h3>
<div class="flex gap-2 flex-wrap mt-2 md:hidden">
<span class="badge">Motion</span><span class="badge badge-muted">ML</span>
</div>
</div>
<p class="text-sm text-[color:var(--muted)] leading-relaxed">
Vision-based coaching pipeline with kinematic feature extraction, event segmentation, and modular analysis services.
</p>
<span class="project-arrow hidden md:inline-flex items-center text-sm font-medium" aria-hidden="true">Read more →</span>
</a>
</div>
</section>
<section id="latest-post" class="container mx-auto px-6 pb-20 space-y-6">
<div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
<div class="space-y-2">
<h2 class="section-title">Latest post</h2>
</div>
<a class="btn btn-outline" href="./blog/index.html">Go to blog</a>
</div>
<article class="card flex flex-col md:flex-row md:items-center md:justify-between gap-6 p-6">
<div class="space-y-3">
<p class="text-sm text-[color:var(--muted)]">Apr 2026</p>
<h3 class="text-2xl font-semibold">
We Won the Divergent Teams Hackathon
</h3>
<p class="text-sm text-[color:var(--muted)] max-w-2xl">
First place in the finance pathway at Microsoft Atlanta with ShelfSync — dynamic pricing, brand-funded discounts at the register, and nationals ahead.
</p>
<div class="flex gap-2 flex-wrap">
<span class="badge">Hackathon</span>
<span class="badge badge-muted">ShelfSync</span>
<span class="badge badge-muted">Microsoft</span>
</div>
</div>
<div class="flex shrink-0 gap-3">
<a class="btn btn-secondary" href="./blog/index.html">All posts</a>
<a class="btn btn-primary" href="./blog/posts/divergent-teams-hackathon-shelfsync.html">Read</a>
</div>
</article>
</section>
</main>
<footer class="border-t border-[color:var(--border)]">
<div class="container mx-auto px-6 py-10 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
<div>
<p class="font-semibold" data-bind="name">Your Name</p>
</div>
<div class="flex flex-wrap gap-4 text-sm">
<a class="btn btn-ghost" data-bind-href="linkedin" href="https://www.linkedin.com/in/your-handle">LinkedIn</a>
<a class="btn btn-ghost" data-bind-href="github" href="https://github.com/your-handle">GitHub</a>
<a class="btn btn-ghost" href="./blog/index.html">Blog</a>
</div>
<p class="text-xs text-[color:var(--muted)]">© <span id="year"></span> All rights reserved.</p>
</div>
</footer>
<script src="./assets/js/vendor/gsap.min.js"></script>
<script src="./assets/js/vendor/ScrollTrigger.min.js"></script>
<script src="./assets/js/main.js?v=202644"></script>
</body>
</html>