-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
311 lines (282 loc) · 18.2 KB
/
index.html
File metadata and controls
311 lines (282 loc) · 18.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoe Droulias — CS Student & Builder</title>
<!-- meta tags for SEO and social sharing -->
<meta name="description" content="Portfolio of Zoe Droulias — McGill Computer Science student, web developer, and creative builder. Currently building Lockd In and Friday Frenzies.">
<meta name="author" content="Zoe Droulias">
<meta property="og:title" content="Zoe Droulias — CS Student & Builder">
<meta property="og:description" content="Computer Science at McGill. Building things at the intersection of tech and creativity.">
<meta property="og:type" content="website">
<!-- favicon and stylesheet -->
<link rel="icon" href="static/assets/coding-memoji.png" type="image/png">
<link rel="stylesheet" href="static/styles.css">
</head>
<body>
<!-- sticky nav for jumping between sections -->
<nav class="navbar" aria-label="Main navigation">
<a href="#top" class="nav-logo">zd.</a>
<ul class="nav-links">
<li><a href="#about">about</a></li>
<li><a href="#now">now</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#skills">skills</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
<main id="top">
<!-- hero section: first impression with animated entrance -->
<section class="hero">
<div class="hero-content reveal">
<img class="hero-image" src="static/assets/coding-memoji.png" alt="Zoe's memoji coding on a laptop">
<p class="hero-greeting">hey, i'm</p>
<h1 class="hero-name">Zoe Droulias.</h1>
<!-- typing cursor effect on tagline -->
<p class="hero-tagline">
i make stuff with <span class="highlight" id="typed-text"></span><span class="cursor">|</span>
</p>
<!-- social/cv links -->
<div class="hero-links" aria-label="Social and CV links">
<a href="https://www.linkedin.com/in/zoedroulias/" target="_blank" rel="noopener" aria-label="LinkedIn">
<img src="static/assets/linkedin.png" alt="LinkedIn logo">
</a>
<a href="https://github.com/zcoder365" target="_blank" rel="noopener" aria-label="GitHub">
<img src="static/assets/github.png" alt="GitHub logo">
</a>
<a href="static/assets/Zoe Droulias CV.pdf" target="_blank" rel="noopener" aria-label="View CV">
<img src="static/assets/cv-icon.png" alt="CV document icon">
</a>
</div>
<!-- scroll prompt -->
<a href="#about" class="scroll-prompt" aria-label="Scroll to about section">
<span>scroll</span>
<span class="arrow">↓</span>
</a>
</div>
</section>
<!-- about me section: rewrite with personality -->
<section id="about" class="section reveal">
<h2 class="section-heading">about me</h2>
<div class="about-content">
<p>
i'm a junior <strong>computer science</strong> student at <strong>McGill University</strong>, with a minor in communication studies. i'm a creative generalist who lives somewhere between code, music, and words.
</p>
<p>
when i'm not deep in a flask backend or chasing a stubborn python bug, you'll find me writing songs in logic pro, getting lost in a fiction novel, or sketching out my next side project in notion.
</p>
<p>
this summer i'm headed to <strong>NYC</strong> to join <strong>Citi</strong> as an application development summer analyst. i'm most excited about full-stack web dev, data science, and building tools that feel <em>good</em> to use.
</p>
</div>
</section>
<!-- "now" section: live work-in-progress, super current -->
<section id="now" class="section reveal">
<h2 class="section-heading">currently building</h2>
<p class="section-subtitle">what's open in my VS Code right now 👩🏻💻</p>
<div class="now-grid">
<article class="now-card">
<div class="now-card-header">
<span class="status-dot" aria-hidden="true"></span>
<span class="status-text">active</span>
</div>
<h3>Lockd In</h3>
<p class="now-card-stack">Vanilla JS · Firebase · Firestore · Flask · Railway</p>
<p class="now-card-desc">
a group scheduling PWA, basically because doodle polls give me hives. mobile-first, google auth, real-time availability — find when your friends are actually free without the back-and-forth.
</p>
</article>
<article class="now-card">
<div class="now-card-header">
<span class="status-dot" aria-hidden="true"></span>
<span class="status-text">active</span>
</div>
<h3>Friday Frenzies</h3>
<p class="now-card-stack">JavaScript · Firebase · Netlify · Resend</p>
<p class="now-card-desc">
a tiny weekly check-in app for me and my friend group — share a high, share a low, and a serverless function emails everyone every friday so we don't forget. warm scrapbook aesthetic because financial-app design didn't fit the vibe.
</p>
</article>
</div>
</section>
<!-- projects gallery: existing projects, redesigned dark cards -->
<section id="projects" class="section reveal">
<h2 class="section-heading">my projects</h2>
<p class="section-subtitle">stuff i've shipped, hacked together, or stayed up too late on 💻</p>
<div class="project-gallery">
<!-- Promptl -->
<article class="project-card">
<div class="project-card__top">
<img src="static/assets/promptl.png" alt="Promptl lightbulb icon" class="project-icon">
<a href="https://promptl.com" class="project-card__link" target="_blank" rel="noopener" aria-label="Visit Promptl website">
website ↗
</a>
</div>
<h3 class="project-card__title">Promptl</h3>
<p class="project-card__languages">Python · HTML · CSS · JavaScript · Flask · MongoDB · bcrypt</p>
<p class="project-card__description">
my longest-running project — a writing app for kids with learning differences that turns prompts into a game with rewards. the goal is to make the blank-page panic feel less like a wall and more like a starting line.
</p>
</article>
<!-- Online Boggle -->
<article class="project-card">
<div class="project-card__top">
<img src="data:image/svg+xml,%3csvg stroke-width='1.5' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cstyle%3e.b%7bfill:none%3bstroke:%239933FF%3bstroke-miterlimit:10%3b%7d%3c/style%3e%3c/defs%3e%3crect class='b' x='10.09' y='1.5' width='3.82' height='3.82'/%3e%3crect class='b' x='1.5' y='1.5' width='3.82' height='3.82'/%3e%3crect class='b' x='18.68' y='1.5' width='3.82' height='3.82'/%3e%3crect class='b' x='10.09' y='10.09' width='3.82' height='3.82'/%3e%3crect class='b' x='1.5' y='10.09' width='3.82' height='3.82'/%3e%3crect class='b' x='18.68' y='10.09' width='3.82' height='3.82'/%3e%3crect class='b' x='10.09' y='18.68' width='3.82' height='3.82'/%3e%3crect class='b' x='1.5' y='18.68' width='3.82' height='3.82'/%3e%3crect class='b' x='18.68' y='18.68' width='3.82' height='3.82'/%3e%3c/svg%3e" alt="3x3 grid icon" class="project-icon">
<a href="https://github.com/zcoder365/Boggle" class="project-card__link" target="_blank" rel="noopener" aria-label="View Online Boggle on GitHub">
github ↗
</a>
</div>
<h3 class="project-card__title">Online Boggle</h3>
<p class="project-card__languages">Python · HTML · CSS</p>
<p class="project-card__description">
the classic word game, but online and in your browser. drag across adjacent letters to make words, get scored in real-time. mostly a love letter to road-trip boredom.
</p>
</article>
<!-- Friendship Bracelet Visualizer -->
<article class="project-card">
<div class="project-card__top">
<img src="static/assets/bracelet.png" alt="Friendship bracelet icon" class="project-icon">
<a href="https://github.com/zcoder365/FriendshipBraceletVisualizer" class="project-card__link" target="_blank" rel="noopener" aria-label="View Friendship Bracelet Visualizer on GitHub">
github ↗
</a>
</div>
<h3 class="project-card__title">Friendship Bracelet Visualizer</h3>
<p class="project-card__languages">Python · HTML · CSS</p>
<p class="project-card__description">
plan your friendship bracelet design before you commit to 4 hours of knotting. swap colors, try patterns, and skip the "i'm 60% done and i hate it" moment.
</p>
</article>
<!-- My Series of Fortunate Events -->
<article class="project-card">
<div class="project-card__top">
<img src="data:image/svg+xml,%3csvg stroke-width='1.5' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cstyle%3e.b%7bfill:none%3bstroke:%239933FF%3bstroke-miterlimit:10%3b%7d%3c/style%3e%3c/defs%3e%3cpath class='b' d='M20.59 22.5H5.32A1.91 1.91 0 0 1 4 19.24a1.89 1.89 0 0 1 1.35-.56h15.24'/%3e%3cline class='b' x1='19.64' y1='18.68' x2='19.64' y2='22.5'/%3e%3cpath class='b' d='M20.59 1.5v17.18H5.32a1.91 1.91 0 0 0-1.91 1.91V3.41A1.92 1.92 0 0 1 5.32 1.5Z'/%3e%3cpolygon class='b' points='12 13.91 10.07 12.96 8.18 13.91 8.18 1.5 12 1.5 12 13.91'/%3e%3c/svg%3e" alt="Notebook icon" class="project-icon">
<a href="https://github.com/zcoder365/MySeriesofFortunateEvents" class="project-card__link" target="_blank" rel="noopener" aria-label="View My Series of Fortunate Events on GitHub">
github ↗
</a>
</div>
<h3 class="project-card__title">My Series of Fortunate Events</h3>
<p class="project-card__languages">Python · HTML · CSS · JavaScript</p>
<p class="project-card__description">
a journaling app where you log moments and rate them out of 10. at the end of the year you scroll back through and (hopefully) realize the year was better than you remembered.
</p>
</article>
<!-- Goodreads Book Trend Analysis -->
<article class="project-card">
<div class="project-card__top">
<img src="https://img.icons8.com/ios/250/9933FF/journal.png" alt="Journal icon" class="project-icon">
<a href="https://github.com/zcoder365/BookAnalysis" class="project-card__link" target="_blank" rel="noopener" aria-label="View Book Analysis on GitHub">
github ↗
</a>
</div>
<h3 class="project-card__title">Goodreads Book Trend Analysis</h3>
<p class="project-card__languages">Python · Selenium · Beautiful Soup · CSV · re</p>
<p class="project-card__description">
scraped 1200 popular books off goodreads from 2020-2025 to ask: is bookstagram dying, and what's everyone actually reading? findings: yes, kind of, and genres run in cycles. full report + viz included.
</p>
</article>
<!-- McBurn -->
<article class="project-card">
<div class="project-card__top">
<img src="https://img.icons8.com/ios/250/9933FF/dashboard.png" alt="Dashboard icon" class="project-icon">
<a href="https://github.com/zcoder365/McBurn-McHacks13" class="project-card__link" target="_blank" rel="noopener" aria-label="View McBurn on GitHub">
github ↗
</a>
</div>
<h3 class="project-card__title">McBurn</h3>
<p class="project-card__languages">Python · HTML · CSS · Flask · SQLite</p>
<p class="project-card__description">
built at McHacks 13 — a flask app that flags student burnout before it gets bad. uses lifestyle tracking + a little ML to nudge you toward sleep, breaks, or actually eating. extremely on-theme for finals season.
</p>
</article>
</div>
</section>
<!-- skills section: tag grid instead of table for modern feel -->
<section id="skills" class="section reveal">
<h2 class="section-heading">skills & toolkit</h2>
<p class="section-subtitle">what i know, what i'm learning, and what's always open in a tab 🛠️</p>
<div class="skills-grid">
<div class="skill-category">
<h3 class="skill-category-title">languages</h3>
<div class="skill-tags">
<span class="skill-tag">Python</span>
<span class="skill-tag">Java</span>
<span class="skill-tag">C++</span>
<span class="skill-tag">SQL</span>
<span class="skill-tag">HTML</span>
<span class="skill-tag">CSS</span>
<span class="skill-tag">JavaScript</span>
</div>
</div>
<div class="skill-category">
<h3 class="skill-category-title">frameworks & libraries</h3>
<div class="skill-tags">
<span class="skill-tag">Flask</span>
<span class="skill-tag">Firebase</span>
<span class="skill-tag">Pandas</span>
<span class="skill-tag">NumPy</span>
<span class="skill-tag">Matplotlib</span>
<span class="skill-tag">Seaborn</span>
<span class="skill-tag">NoSQL</span>
</div>
</div>
<div class="skill-category">
<h3 class="skill-category-title">tools & platforms</h3>
<div class="skill-tags">
<span class="skill-tag">VS Code</span>
<span class="skill-tag">GitHub</span>
<span class="skill-tag">Railway</span>
<span class="skill-tag">Netlify</span>
<span class="skill-tag">Render</span>
<span class="skill-tag">Tableau</span>
<span class="skill-tag">AWS LightSail</span>
</div>
</div>
<div class="skill-category">
<h3 class="skill-category-title">coursework</h3>
<div class="skill-tags">
<span class="skill-tag">Data Structures & Algorithms</span>
<span class="skill-tag">Software Design</span>
<span class="skill-tag">Web Development</span>
<span class="skill-tag">Theory of Computation</span>
<span class="skill-tag">NLP & Data Science</span>
<span class="skill-tag">Discrete Structures</span>
</div>
</div>
<div class="skill-category">
<h3 class="skill-category-title">interests</h3>
<div class="skill-tags">
<span class="skill-tag">data science</span>
<span class="skill-tag">web dev</span>
<span class="skill-tag">UI/UX</span>
<span class="skill-tag">music production</span>
<span class="skill-tag">songwriting</span>
</div>
</div>
</div>
</section>
<!-- contact / footer section -->
<section id="contact" class="section reveal">
<h2 class="section-heading">let's connect</h2>
<p class="section-subtitle">i'd love to hear from you 💌</p>
<div class="contact-links">
<a href="https://www.linkedin.com/in/zoedroulias/" target="_blank" rel="noopener" class="contact-button">
LinkedIn ↗
</a>
<a href="https://github.com/zcoder365" target="_blank" rel="noopener" class="contact-button">
GitHub ↗
</a>
<a href="static/assets/Zoe Droulias CV.pdf" target="_blank" rel="noopener" class="contact-button">
Download CV ↗
</a>
</div>
</section>
</main>
<!-- footer -->
<footer class="footer">
<p>© 2026 Zoe Droulias · built with care 💜</p>
</footer>
<!-- script for animations and interactivity -->
<script src="static/script.js"></script>
</body>
</html>