-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
654 lines (630 loc) · 31.4 KB
/
Copy pathindex.html
File metadata and controls
654 lines (630 loc) · 31.4 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
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Noah Chen is a student engineer and cellist in San Carlos, California, exploring embedded systems, acoustics, robotics, and music technology."
/>
<meta name="theme-color" content="#0d1420" />
<title>Noah Chen | Student Engineer and Cellist</title>
<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=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<header class="site-header" data-header>
<a class="brand" href="#home" aria-label="Noah Chen — home">
<span class="brand-monogram" aria-hidden="true">NC</span>
<span>
<strong>Noah Chen</strong>
<small>Student Engineer and Cellist</small>
</span>
</a>
<button
class="nav-toggle"
type="button"
aria-expanded="false"
aria-controls="site-navigation"
aria-label="Open navigation menu"
>
<span></span><span></span><span></span>
</button>
<nav id="site-navigation" class="site-nav" aria-label="Primary navigation">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#music">Music</a>
<a href="#leadership">Leadership</a>
<a href="#community">Community</a>
<a href="#experience">Experience</a>
<a href="#future">Future</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main id="main-content">
<!-- Hero -->
<section id="home" class="hero section" aria-labelledby="hero-title">
<div class="hero-grid" aria-hidden="true"></div>
<div class="hero-layout">
<div class="hero-content reveal">
<p class="eyebrow">Student Engineer <span>·</span> Cellist <span>·</span> Builder</p>
<p class="hero-name">Noah Chen</p>
<p class="hero-role">Student Engineer and Cellist</p>
<h1 id="hero-title">Building at the intersection of sound, technology, and human experience.</h1>
<p class="hero-summary">
I am a high school student from San Carlos, California, exploring embedded systems, acoustics,
digital signal processing, mechatronics, robotics, music technology, and hands-on engineering.
</p>
<div class="hero-actions">
<a class="button button-primary" href="#projects">Explore My Work</a>
<a class="button button-secondary" href="#contact">Contact Me</a>
</div>
<div class="hero-details" aria-label="Areas of interest">
<span>Embedded systems</span>
<span>Acoustics</span>
<span>Physical computing</span>
</div>
</div>
<figure class="hero-portrait reveal">
<img
src="images/hero_image.jpeg"
alt="Noah Chen performing cello with an orchestra"
width="1191"
height="789"
fetchpriority="high"
decoding="async"
data-fallback-image
/>
<figcaption class="image-fallback">
<span>Cello Performance</span>
<strong>Noah Chen</strong>
</figcaption>
</figure>
</div>
<p class="section-index" aria-hidden="true">00 / 09</p>
</section>
<!-- About -->
<section id="about" class="section" aria-labelledby="about-title">
<div class="section-heading reveal">
<p class="eyebrow">01 / About</p>
<h2 id="about-title">Listening carefully. Building practically.</h2>
</div>
<div class="about-layout">
<div class="editorial-copy reveal">
<p class="lead">
I enjoy projects that connect physical systems, software, sound, and real-world users.
</p>
<p>
My experience as a cellist has led me toward acoustics and music technology, while robotics,
embedded programming, 3D printing, mentoring, and community service have helped me develop a
practical approach to problem solving.
</p>
<p>
I am continuing to build working knowledge across embedded systems, digital signal processing,
mechatronics, robotics, physical prototyping, cello performance, mentoring, and technical
community service.
</p>
</div>
<aside class="panel reveal" aria-labelledby="exploring-title">
<p class="panel-kicker">Working Notes</p>
<h3 id="exploring-title">Currently Exploring</h3>
<ul class="tag-list">
<li>Real-time pitch detection</li>
<li>ESP32 development</li>
<li>Analog audio circuits</li>
<li>Embedded user interfaces</li>
<li>Musical acoustics</li>
<li>Acoustical design</li>
<li>Mechatronics</li>
<li>Robotics programming</li>
<li>Educational technology</li>
</ul>
</aside>
</div>
</section>
<!-- Projects -->
<section id="projects" class="section projects-section" aria-labelledby="projects-title">
<div class="section-heading reveal">
<p class="eyebrow">02 / Featured Projects</p>
<h2 id="projects-title">Engineering case studies</h2>
<p>Projects developed through testing, iteration, and attention to the people who will use them.</p>
</div>
<div class="case-studies">
<article class="case-study reveal">
<figure class="media-frame media-frame-wide">
<img
src="images/smart-tuner-schematic.jpg"
alt="Schematic for Noah Chen's ESP32-S3 smart tuner"
loading="lazy"
data-fallback-image
/>
<figcaption class="image-fallback">
<span>Embedded Systems</span>
<strong>Smart tuner schematic</strong>
</figcaption>
</figure>
<div class="case-study-body">
<div class="case-study-topline">
<p class="eyebrow">Embedded Systems · DSP · Music Technology</p>
<span class="status status-progress">In Development</span>
</div>
<h3>ESP32-S3 Smart Tuner</h3>
<p>
A real-time smart tuner for bowed string instruments, combining an ESP32-S3, digital
pitch-detection algorithms, analog and digital audio inputs, embedded firmware, a display
interface, and custom hardware design.
</p>
<ul class="tag-list compact" aria-label="Smart tuner technologies">
<li>ESP32-S3</li><li>C</li><li>ESP-IDF</li><li>YIN</li><li>I2S audio</li>
<li>FreeRTOS concepts</li><li>Analog electronics</li><li>KiCad</li>
</ul>
<dl class="metrics metrics-three">
<div><dt>48 / 48</dt><dd>Tests passing</dd></div>
<div><dt>≈ 29.4 ms</dt><dd>Average analysis</dd></div>
<div><dt>≈ 76%</dt><dd>Runtime reduction</dd></div>
</dl>
<div class="case-study-actions">
<button class="button button-primary" type="button" data-modal-open="tuner-details">
View Details
</button>
<span class="private-label" title="This repository is not publicly accessible">Private Repository</span>
</div>
</div>
</article>
<article class="case-study case-study-reverse reveal">
<figure class="media-frame media-frame-wide">
<img
src="images/vocabforge-screenshot.jpg"
alt="VocabForge vocabulary study application interface"
loading="lazy"
data-fallback-image
/>
<figcaption class="image-fallback">
<span>Educational Technology</span>
<strong>VocabForge interface</strong>
</figcaption>
</figure>
<div class="case-study-body">
<div class="case-study-topline">
<p class="eyebrow">Web Development · Educational Technology</p>
<span class="status">Working Local Prototype</span>
</div>
<h3>VocabForge</h3>
<p>
A browser-based SAT vocabulary study application designed to help users review selected
vocabulary through active practice. I personally organized the vocabulary content and directed
the structure and functionality of the application.
</p>
<ul class="feature-list">
<li>Vocabulary flashcards</li>
<li>Customizable vocabulary mock tests</li>
</ul>
<ul class="tag-list compact" aria-label="VocabForge technologies">
<li>HTML</li><li>CSS</li><li>JavaScript</li><li>Content organization</li><li>Interface testing</li>
</ul>
<div class="case-study-actions">
<button class="button button-primary" type="button" data-modal-open="vocabforge-details">
View Details
</button>
<a
class="button button-secondary"
href="https://github.com/Char-Az/VocabForge"
target="_blank"
rel="noopener noreferrer"
>View on GitHub <span aria-hidden="true">↗</span></a>
</div>
</div>
</article>
</div>
</section>
<!-- Music -->
<section id="music" class="section" aria-labelledby="music-title">
<div class="section-heading reveal">
<p class="eyebrow">03 / Music</p>
<h2 id="music-title">Practice, resonance, and ensemble listening</h2>
<p>
I have studied cello for more than ten years. Through orchestra, chamber music, solo performance,
competition, and mentoring, music has shaped how I listen, collaborate, practice, and approach
technical problems.
</p>
</div>
<div class="music-layout">
<article class="content-card reveal">
<figure class="media-frame">
<img
src="images/pyo-performance.jpg"
alt="Noah Chen performing cello with the Peninsula Youth Orchestra"
loading="lazy"
data-fallback-image
/>
<figcaption class="image-fallback">
<span>Orchestra</span>
<strong>Peninsula Youth Orchestra</strong>
</figcaption>
</figure>
<div class="card-body">
<p class="eyebrow">Senior Orchestra · Joined 2025</p>
<h3>Peninsula Youth Orchestra</h3>
<p>Performs in the organization’s highest-level ensemble as fourth-chair cello.</p>
<h4>Featured repertoire</h4>
<ul class="lined-list">
<li>Tchaikovsky — <cite>Capriccio Italien</cite></li>
<li>Sibelius — <cite>Finlandia</cite></li>
<li>Dvořák — <cite>Symphony No. 8</cite></li>
</ul>
</div>
</article>
<article class="content-card reveal">
<figure class="media-frame">
<img
src="images/cello-performance.jpg"
alt="Noah Chen in a cello performance"
loading="lazy"
data-fallback-image
/>
<figcaption class="image-fallback">
<span>Cello</span>
<strong>Performance and competition</strong>
</figcaption>
</figure>
<div class="card-body">
<p class="eyebrow">Solo · Chamber · Orchestral</p>
<h3>Performance and Competition</h3>
<p>
More than ten years of cello study, including solo, chamber, and orchestral performance,
competition experience, and advanced classical repertoire.
</p>
<p>
Third place, Bay Area Innovative Music Competition. I am especially interested in Romantic and
twentieth-century repertoire, acoustics, and musical perception.
</p>
</div>
</article>
</div>
</section>
<!-- Leadership -->
<section id="leadership" class="section" aria-labelledby="leadership-title">
<div class="section-heading reveal">
<p class="eyebrow">04 / Leadership and Mentoring</p>
<h2 id="leadership-title">Helping others build confidence</h2>
</div>
<article class="feature-panel reveal">
<div>
<p class="eyebrow">Cello Mentor and Instructor · Since August 2024</p>
<h3>Patient instruction, practical practice habits</h3>
<p>
Mentors younger cello students through regular instruction, helping them develop technique,
musical understanding, practice habits, and confidence.
</p>
</div>
<dl class="metrics metrics-three">
<div><dt>3</dt><dd>Students Mentored</dd></div>
<div><dt>41+</dt><dd>Instructional Hours</dd></div>
<div><dt>2024</dt><dd>Started Mentoring</dd></div>
</dl>
</article>
<article class="initiative reveal">
<div class="initiative-visuals">
<figure class="media-frame logo-frame">
<img
src="images/strings-for-change-logo.png"
alt="Strings for Change logo"
loading="lazy"
data-fallback-image
/>
<figcaption class="image-fallback"><strong>Strings for Change</strong></figcaption>
</figure>
<figure class="media-frame">
<img
src="images/strings-for-change-performance.jpg"
alt="Strings for Change musicians performing together"
loading="lazy"
data-fallback-image
/>
<figcaption class="image-fallback">
<span>Community Music</span><strong>Performance</strong>
</figcaption>
</figure>
</div>
<div class="initiative-copy">
<p class="eyebrow">Co-Founder and Cellist · Founded 2025</p>
<h3>Strings for Change</h3>
<p>
Co-founded a student chamber-music initiative that organizes performances in support of community
causes. I help coordinate musicians, prepare repertoire, perform, organize events, and manage
project logistics.
</p>
<p>Performances have supported First Place for Youth and LifeMoves.</p>
<dl class="metrics metrics-four">
<div><dt>10</dt><dd>Performances</dd></div>
<div><dt>6</dt><dd>Musicians</dd></div>
<div><dt>$700+</dt><dd>Raised</dd></div>
<div><dt>2025</dt><dd>Founded</dd></div>
</dl>
<a
class="text-link"
href="https://sites.google.com/view/strings-for-change/home"
target="_blank"
rel="noopener noreferrer"
>Visit Strings for Change <span aria-hidden="true">↗</span></a>
</div>
</article>
</section>
<!-- Community -->
<section id="community" class="section" aria-labelledby="community-title">
<div class="section-heading reveal">
<p class="eyebrow">05 / Community Technical Service</p>
<h2 id="community-title">Making fabrication tools more approachable</h2>
</div>
<article class="split-feature reveal">
<figure class="media-frame">
<img
src="images/library-3d-printing.jpg"
alt="3D printing equipment at the San Carlos Library"
loading="lazy"
data-fallback-image
/>
<figcaption class="image-fallback">
<span>Fabrication · Technical Support</span>
<strong>Library 3D printing</strong>
</figcaption>
</figure>
<div class="card-body">
<p class="eyebrow">Friends of the San Carlos Library · Since June 2024</p>
<h3>3D Printing Volunteer</h3>
<p>
Supports library visitors with 3D-printing projects, reviews STL files, monitors print jobs,
performs weekly printer maintenance, and troubleshoots common hardware and printing issues.
</p>
<p class="tool-note"><strong>Tools:</strong> Ultimaker 3D printers and Cura slicing software</p>
<ul class="responsibility-grid">
<li>Preparing and reviewing print files</li>
<li>Monitoring active prints</li>
<li>Diagnosing failed prints</li>
<li>Assisting visitors with Cura</li>
<li>Leveling beds and replacing filament</li>
<li>Explaining equipment use</li>
</ul>
<dl class="metrics metrics-four">
<div><dt>200+</dt><dd>Print Jobs Supported</dd></div>
<div><dt>100+</dt><dd>STL Files Reviewed or Monitored</dd></div>
<div><dt>30+</dt><dd>Technical Issues Troubleshot</dd></div>
<div><dt>Weekly</dt><dd>Printer Maintenance</dd></div>
</dl>
</div>
</article>
</section>
<!-- Experience -->
<section id="experience" class="section" aria-labelledby="experience-title">
<div class="section-heading reveal">
<p class="eyebrow">06 / Experience</p>
<h2 id="experience-title">Communication in real-world environments</h2>
</div>
<div class="experience-stack">
<article class="split-feature reveal">
<figure class="media-frame">
<img
src="images/china-eastern-sfo-internship.jpg"
alt="China Eastern Airlines operations at San Francisco International Airport"
loading="lazy"
data-fallback-image
/>
<figcaption class="image-fallback">
<span>Airport Operations</span>
<strong>Customer service internship</strong>
</figcaption>
</figure>
<div class="card-body">
<div class="case-study-topline">
<p class="eyebrow">China Eastern Airlines · SFO</p>
<span class="status status-progress">Ongoing</span>
</div>
<h3>Customer Service Representative Intern</h3>
<p class="date-line">June 20–August 10, 2026 · Approximately 90 hours expected</p>
<p>
Provides in-person guidance and information to airline passengers, assists travelers with
check-in and boarding, answers questions about airline procedures, and helps resolve customer
concerns.
</p>
<ul class="responsibility-grid">
<li>Guiding travelers through airline procedures</li>
<li>Explaining check-in and baggage requirements</li>
<li>Assisting with boarding procedures</li>
<li>Clarifying required travel documents</li>
<li>Coordinating with relevant staff</li>
<li>Communicating with varied backgrounds</li>
</ul>
</div>
</article>
<article class="upcoming-card reveal">
<div>
<p class="eyebrow">Schoolhouse · Upcoming Involvement</p>
<h3>Schoolhouse SAT Math Tutor</h3>
<p>
Preparing to tutor students in SAT Math concepts, problem-solving strategies, and study planning.
</p>
</div>
<span class="status status-upcoming">Upcoming</span>
</article>
</div>
</section>
<!-- Skills -->
<section id="skills" class="section" aria-labelledby="skills-title">
<div class="section-heading reveal">
<p class="eyebrow">Technical and Creative Toolkit</p>
<h2 id="skills-title">Skills developed through use</h2>
<p>Labels describe my current experience honestly and are not ratings.</p>
</div>
<div class="skills-grid">
<article class="skill-card reveal">
<span>Working Knowledge</span><h3>Programming</h3>
<p>C · C++ · Python · Java · HTML · CSS · JavaScript</p>
</article>
<article class="skill-card reveal">
<span>Working Knowledge</span><h3>Embedded Systems</h3>
<p>ESP32-S3 · ESP-IDF · FreeRTOS concepts · I2S audio · Real-time DSP · Displays · Debugging</p>
</article>
<article class="skill-card reveal">
<span>Currently Learning</span><h3>Electronics</h3>
<p>Schematic design · Breadboarding · Soldering · Analog audio · Sensors · Battery-powered systems</p>
</article>
<article class="skill-card reveal">
<span>Working Knowledge</span><h3>Engineering Tools</h3>
<p>VS Code · Git · GitHub · KiCad · Cura · Ultimaker printers · Documentation · Test planning</p>
</article>
<article class="skill-card reveal">
<span>Experienced</span><h3>Music</h3>
<p>Cello · Chamber music · Orchestra · Music mentoring · Score study · Performance</p>
</article>
<article class="skill-card reveal">
<span>Experienced</span><h3>Communication and Service</h3>
<p>Customer guidance · Mentoring · Technical support · Public communication · Coordination · Teamwork</p>
</article>
</div>
</section>
<!-- Future -->
<section id="future" class="section" aria-labelledby="future-title">
<div class="section-heading reveal">
<p class="eyebrow">07 / Future Direction</p>
<h2 id="future-title">Two paths, one interest in physical systems</h2>
<p>
I am currently equally interested in acoustic engineering and mechatronics. Acoustic engineering
connects my experience as a cellist with my interest in engineering, sound, and physical systems.
Mechatronics interests me because robotics brings programming, electronics, sensing, actuation, and
mechanical design together in one working system.
</p>
</div>
<div class="pathway-grid">
<article class="pathway-card reveal">
<p class="pathway-number">A / 01</p>
<h3>Acoustic Engineering</h3>
<p>
I am especially interested in acoustical design and in understanding how engineering can shape the
way people produce, experience, and interact with sound.
</p>
<ul class="tag-list compact">
<li>Acoustical design</li><li>Musical acoustics</li><li>Audio electronics</li>
<li>Digital signal processing</li><li>Sound measurement</li><li>Instrument technology</li>
<li>Psychoacoustics</li>
</ul>
</article>
<article class="pathway-card reveal">
<p class="pathway-number">B / 02</p>
<h3>Mechatronics and Robotics</h3>
<p>
My experience in school robotics has made me interested in how complex mechanisms can be designed,
programmed, tested, and improved by a team.
</p>
<ul class="tag-list compact">
<li>Robotics</li><li>Embedded control</li><li>Sensing and actuation</li>
<li>Mechanical systems</li><li>Electronics</li><li>Automation</li>
<li>Intelligent physical devices</li>
</ul>
</article>
</div>
<ol class="roadmap reveal" aria-label="Future direction roadmap">
<li><span>Current</span><p>Build projects, strengthen technical skills, perform, mentor, and gain practical experience.</p></li>
<li><span>College</span><p>Study engineering, physics, programming, electronics, mechanics, acoustics, and design.</p></li>
<li><span>Future</span><p>Work on acoustical design, robotics, embedded devices, or systems that combine software with the physical world.</p></li>
</ol>
</section>
<!-- Contact -->
<section id="contact" class="section contact-section" aria-labelledby="contact-title">
<div class="section-heading reveal">
<p class="eyebrow">08 / Contact</p>
<h2 id="contact-title">Let’s start a conversation.</h2>
<p>I welcome conversations about engineering, music, mentorship, and practical opportunities to learn.</p>
</div>
<div class="contact-layout">
<div class="contact-details reveal">
<p class="contact-label">Email</p>
<a href="mailto:noahchen482@gmail.com">noahchen482@gmail.com</a>
<p class="contact-label">GitHub</p>
<a href="https://github.com/Char-Az" target="_blank" rel="noopener noreferrer">github.com/Char-Az</a>
<p class="contact-label">Location</p>
<p>San Carlos, California</p>
</div>
<form class="contact-form reveal" data-contact-form>
<label for="contact-name">Name</label>
<input id="contact-name" name="name" type="text" autocomplete="name" required />
<label for="contact-email">Email</label>
<input id="contact-email" name="email" type="email" autocomplete="email" required />
<label for="contact-subject">Subject</label>
<input id="contact-subject" name="subject" type="text" required />
<label for="contact-message">Message</label>
<textarea id="contact-message" name="message" rows="6" required></textarea>
<button class="button button-primary" type="submit">Open Email Draft</button>
<p class="form-note">This form opens your email application. It does not send data to a server.</p>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div>
<strong>Noah Chen</strong>
<span>Student Engineer and Cellist</span>
<span>San Carlos, California</span>
</div>
<div class="footer-links">
<a href="mailto:noahchen482@gmail.com">Email</a>
<a href="https://github.com/Char-Az" target="_blank" rel="noopener noreferrer">GitHub</a>
</div>
<p>Built with HTML, CSS, and JavaScript. © <span data-current-year></span></p>
</footer>
<!-- Accessible project details modal -->
<div class="modal" data-modal hidden>
<div class="modal-backdrop" data-modal-close></div>
<div
class="modal-dialog"
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
aria-describedby="modal-description"
tabindex="-1"
>
<button class="modal-close" type="button" data-modal-close aria-label="Close project details">×</button>
<div class="modal-content" data-modal-content></div>
</div>
</div>
<template id="tuner-details">
<p class="eyebrow">Embedded Systems · In Development</p>
<h2 id="modal-title">ESP32-S3 Smart Tuner</h2>
<p id="modal-description">
A case study in real-time audio analysis, embedded firmware, and purpose-built hardware for bowed strings.
</p>
<div class="modal-sections">
<section><h3>Motivation and Goal</h3><p>Connect cello practice with embedded engineering by creating a responsive, dedicated tuning tool for bowed string instruments.</p></section>
<section><h3>Current Progress</h3><p>The pitch-analysis software has a deterministic test suite, runtime measurements, ring-buffer processing, smoothing, and signal-rejection logic. Breadboard hardware development remains in progress.</p></section>
<section><h3>Firmware Architecture</h3><p>A real-time multitask architecture separates audio acquisition, pitch analysis, interface work, and system coordination. Dynamic memory allocation is avoided inside real-time processing loops.</p></section>
<section><h3>Pitch Detection</h3><p>The design explores YIN pitch detection and autocorrelation with generated audio signals, smoothing, and rejection of unreliable input.</p></section>
<section><h3>Hardware Design</h3><p>The system combines ESP32-S3 processing, I2S audio, an MCP6002-based analog front end, an ST7789 display, soldered prototyping, and schematic and PCB work in KiCad.</p></section>
<section><h3>Testing and Results</h3><p>All 48 deterministic software tests pass. Pitch-analysis runtime was reduced by approximately 76%, averaging about 29.4 ms with a measured maximum of approximately 31.3 ms.</p></section>
<section><h3>Current Challenges</h3><p>Validating the full audio path, balancing latency with stable readings, controlling noise, and translating the tested software into complete prototype hardware.</p></section>
<section><h3>Future Steps</h3><ol><li>Complete the breadboard prototype.</li><li>Design and validate the PCB.</li><li>Build an enclosed prototype with a custom case.</li></ol></section>
</div>
</template>
<template id="vocabforge-details">
<p class="eyebrow">Educational Technology · Working Local Prototype</p>
<h2 id="modal-title">VocabForge</h2>
<p id="modal-description">A focused browser-based tool for active vocabulary review.</p>
<div class="modal-sections">
<section><h3>Purpose</h3><p>Support selected SAT vocabulary review through a simple, repeatable active-practice workflow.</p></section>
<section><h3>Current Features</h3><ul><li>Vocabulary flashcards</li><li>Customizable vocabulary mock tests</li></ul></section>
<section><h3>Intended Learning Workflow</h3><p>Review selected words with flashcards, then use a customizable mock test to practice recall.</p></section>
<section><h3>Content Organization</h3><p>I personally organized the vocabulary content and directed the structure and functionality of the application.</p></section>
<section><h3>Interface Decisions</h3><p>The interface prioritizes readable study content, straightforward controls, and a browser-based experience that works without a complex setup.</p></section>
<section><h3>Current Limitations</h3><p>The project is a local prototype and does not yet have a public live deployment.</p></section>
<section><h3>Possible Future Improvements</h3><p>Future changes will be based on testing the existing flashcard and mock-test workflows before expanding the feature set.</p></section>
</div>
<a class="button button-primary" href="https://github.com/Char-Az/VocabForge" target="_blank" rel="noopener noreferrer">View on GitHub <span aria-hidden="true">↗</span></a>
</template>
</body>
</html>