quantamShade0337.github.io/about.html at main · quantamShade0337/quantamShade0337.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="color-scheme" content="light" />
  <title>About Ethan Soh</title>
  <meta name="description" content="The stories, people, hobbies, and experiences behind Ethan Soh's work." />
  <meta property="og:title" content="About Ethan Soh" />
  <meta property="og:description" content="Programming, Swift Accelerator, photography, guitar, robotics, 3D printing, and everything in between." />
  <meta property="og:image" content="about-assets/building.webp" />
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,12 92,86 8,86' fill='%231d1d1f'/></svg>" />
  <link rel="stylesheet" href="style.css?v=19" />
  <link rel="stylesheet" href="about.css?v=7" />
</head>
<body>
  <main>
    <section class="story-hero">
      <div class="container">
        <a class="story-back" href="index.html">← Back to my work</a>
        <div class="story-intro">
          <p class="story-kicker reveal">About me</p>
          <h1 class="reveal" style="--d:.06s">A more thoughtful introduction.</h1>
          <p class="story-lead reveal" style="--d:.12s">I’m Ethan. I build software, take photos, play guitar, print things that sometimes fail seven times, and try to fit all of that around school.</p>
        </div>
        <figure class="story-cover reveal" style="--d:.18s">
          <img src="about-assets/building.webp" width="4032" height="3024" alt="Ethan working with other students at a technology event" />
          <figcaption>Probably fixing something five minutes before it needs to work.</figcaption>
        </figure>
      </div>
    </section>

    <section class="story-section tint-sky">
      <div class="container story-grid">
        <div class="story-copy reveal">
          <h2>It started with robots.</h2>
          <p>I first got into programming in primary school through robotics. At the time, coding was mostly a way to make a robot move and hopefully stop it from crashing into things.</p>
          <p>It was only later, when I joined the Swift Accelerator Programme in secondary school, that programming really clicked for me. I realised that I had the freedom to make almost anything I wanted. Once I understood that, I started coding a lot more—not because I had to, but because I genuinely wanted to see whether my ideas could become real.</p>
        </div>
        <figure class="story-photo reveal" style="--d:.1s">
          <img src="about-assets/vision-pro.webp" width="4032" height="3024" alt="Ethan helping at a technology event with an Apple Vision Pro" loading="lazy" />
          <figcaption>Helping out at an event after finishing the programme myself.</figcaption>
        </figure>
      </div>
    </section>

    <section class="story-section">
      <div class="container story-narrow">
        <h2 class="reveal">More than just Swift.</h2>
        <div class="story-columns">
          <p class="reveal">Swift Accelerator taught me a lot about building apps, but the most valuable parts had very little to do with code. I worked with all sorts of new people, and my friend group grew by a lot.</p>
          <p class="reveal" style="--d:.08s">I learnt how to communicate ideas, work with different personalities, take responsibility, and lead when I needed to. I probably learnt as much from the people around me as I did from the programme itself.</p>
          <p class="reveal" style="--d:.16s">I still help out with events there, and I’m currently a mentor. It feels slightly strange helping people in the same place where I started, but it’s also one of the most meaningful parts of the experience.</p>
        </div>
      </div>
    </section>

    <section class="story-section story-dark">
      <div class="container">
        <div class="story-dark-copy">
          <h2 class="reveal">Knowing when to take the shot.</h2>
          <p class="reveal">Concert photography taught me to stay aware of everything happening around me. A good moment might last less than a second, so you have to notice it and be ready.</p>
          <p class="reveal">It also taught me when to put the camera down. Getting a good photo is satisfying, but enjoying the moment itself is often more important than documenting it. I’m still learning how to balance both.</p>
        </div>
        <div class="photo-wall" aria-label="A selection of photographs by Ethan">
          <figure class="concert-landscape reveal">
            <img src="about-assets/concert-blue.jpg" width="4000" height="3000" alt="A singer performing beneath blue stage lights" loading="lazy" />
          </figure>
          <figure class="concert-portrait reveal" style="--d:.08s">
            <img src="about-assets/concert-spotlight.jpeg" width="1440" height="1975" alt="A singer standing in a spotlight during a concert" loading="lazy" />
          </figure>
        </div>
        <div class="gallery-footer reveal">
          <p class="gallery-note">Two moments where the lighting, subject, and timing lined up.</p>
          <a class="gallery-link" href="photography.html">Explore more photos <span>›</span></a>
        </div>
      </div>
    </section>

    <section class="story-section tint-cream">
      <div class="container story-split">
        <div class="story-copy reveal">
          <h2>I only wanted to learn a few chords.</h2>
          <p>I first picked up guitar because I wanted to play church songs with a few basic chords. That was supposed to be enough.</p>
          <p>Over time, I started noticing how many possibilities there were in music. I wanted to understand why certain chords worked together, why some progressions felt completely different from others, and how songs were actually put together. That curiosity pushed me beyond memorising chord shapes and into learning more about music theory.</p>
          <p>I’m still learning, but that is probably the part I enjoy most.</p>
        </div>
        <figure class="guitar-photo reveal" style="--d:.1s">
          <img src="about-assets/guitar.jpeg" width="1365" height="2048" alt="Ethan playing an acoustic guitar outdoors" loading="lazy" />
          <figcaption>Started with G, C, D and Em. Then music theory made everything considerably more complicated.</figcaption>
        </figure>
      </div>
    </section>

    <section class="story-section">
      <div class="container story-grid story-grid-reverse">
        <div class="print-visual reveal" aria-hidden="true">
          <svg viewBox="0 0 320 320" role="img">
            <path d="m160 38 102 58v124l-102 60-102-60V96l102-58Z" fill="#f5f5f7" stroke="#1d1d1f" stroke-width="4"/>
            <path d="m59 97 101 59 101-59M160 156v123" fill="none" stroke="#1d1d1f" stroke-width="4"/>
            <path d="m104 122 101-59M104 181l56 33 56-33" fill="none" stroke="#0071e3" stroke-width="8" stroke-linecap="round"/>
          </svg>
          <span>attempt 7 of 7</span>
        </div>
        <div class="story-copy reveal" style="--d:.1s">
          <h2>Making things physical.</h2>
          <p>Robotics started in primary school, but I never completely left it behind. I still experiment with Arduino and Raspberry Pi projects, except now I also have a 3D printer.</p>
          <p>Recently, I tried printing a case for my AirPods. For some reason, the print refused to stick to the bed. I changed the settings, cleaned the bed, restarted the print, and repeated that process at least seven times before getting one that worked.</p>
          <p>It was incredibly annoying, but finally holding the successful print made it worth it. Mostly.</p>
        </div>
      </div>
    </section>

    <section class="story-closing">
      <div class="container story-closing-inner">
        <h2 class="reveal">School first. Then I go all in.</h2>
        <p class="reveal">I don’t really balance school and coding at the same time. During exam periods, I temporarily stop most of my projects and focus on studying. Once exams are over, I go all in again.</p>
        <p class="reveal">It means some projects sit untouched for a while, but I would rather pause them properly than do everything badly at once. The ideas are usually still waiting for me when I come back.</p>
        <div class="cta-row reveal">
          <a class="btn btn-blue" href="index.html#work">See what I build</a>
          <a class="link-chevron" href="index.html#contact">Say hello <span>›</span></a>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container footer-inner">
      <p>© 2026 Ethan Soh.</p>
      <div class="footer-links">
        <a href="index.html">Work</a>
        <a href="https://github.com/quantamShade0337" target="_blank" rel="noopener">GitHub</a>
        <a href="https://www.linkedin.com/in/ethan-soh-9548863a9/" target="_blank" rel="noopener">LinkedIn</a>
      </div>
    </div>
  </footer>

  <script src="about.js?v=1" defer></script>
</body>
</html>