amandayyang15.github.io/index.html at main · amandayyang15/amandayyang15.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
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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Amanda Yang</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/png" href="assets/favicon.png">
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-PDYMVVTKHP"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-PDYMVVTKHP');
  </script>
</head>


<body>
  <script src="main.js"></script>

  <!-- NAVIGATION BAR -->
  <header>
    <nav>
      <div class="nav-logo">
        <a href="#">
          <img src="assets/text logo.svg">
        </a>
      </div>

      <div class="nav-bar">
        <ol>
          <li>
            <a href="#about">
              About
            </a>
          </li>
          <li>
            <a href="#projects">
              Projects
            </a>
          </li>
          <li>
            <a href="#freelance">
              Freelance
            </a>
          </li>
          <li>
            <a href="#contact" class="color3-s-button">
              Get in Touch
            </a>
          </li>
        </ol>
      </div>
    </nav>
  </header>

  <main>
    <!-- INTRO SECTION -->
    <div class="introBox">
      <div class="introBox-text">
        <h1>hello!</h1>
        <p>I'm Amanda, currently attending UBC for Computer Engineering and interning at Walt Disney Animation Studios.</p>
        <p>Welcome to my first web dev project 😎</p>
      </div>
      <div class="introbox-contactIcons">
        <a class="contactIcon" target="_blank" href="https://www.linkedin.com/in/amandayyang15/"><img src="assets/inlinked.svg"></a>
        <a class="contactIcon" target="_blank" href="https://github.com/amandayyang15"><img src="assets/github.svg"></a>
        <a class="contactIcon" target="_blank" href="https://www.figma.com/@amandayyang15"><img src="assets/figma.svg"></a>
        <a class="contactIcon" target="_blank" href="https://www.behance.net/amandayyang15"><img src="assets/behance.svg"></a>
      </div>
      <div class="introbox-CTA">
        <a class="color3-t-button" href="#projects">View Projects</a>
        <a class="color3-s-button" href="#contact">Let's Chat :)</a>
      </div>
    </div>

    <!-- ABOUT ME -->
    <div id="about" class="aboutMe">
      <h1> about me </h1>
      <p>
        Hello! My name is Amanda and I enjoy creating things.
        <br>
        <br>
        I attribute my interest in creating things to my childhood fascination with arts and crafts. It is this passion for being creative and using my imagination that has led to my desire to draw inspiration from the world around me.
        <br>
        <br>
        As I've grown, my focus has shifted towards engineering, with a specific interest in developing market-oriented products that have a real impact. I am particularly interested in improving human-computer interaction and ensuring that both technology and overall design are optimized to enhance the user experience. My goal is to create products that genuinely resonate with and benefit the people who use them :)
      </p>
    </div>
    <!-- INTERESTS -->
    <div class="interests">
      <h1>
        interests
      </h1>
      <p>
        Some things I enjoy learning about and doing :)
      </p>
      <div class="interestsGrid">
        <div class="interestsGrid-card">SOFTWARE DEVELOPMENT</div>
        <div class="interestsGrid-card">HUMAN-CENTRED DESIGN</div>
        <div class="interestsGrid-card">PRODUCT MANAGEMENT</div>
        <div class="interestsGrid-card">CREATIVE TECHNOLOGIES</div>
        <div class="interestsGrid-card">GRAPHIC DESIGN</div>
        <div class="interestsGrid-card">
          <img src="assets/20221016_UBC_Intramural_Volleyball.gif">
          <div class="interestsGrid-overlay">VOLLEYBALL 💕</div>
        </div>
      </div>
    </div>

    <!-- PROJECTS -->
    <div id="projects" class="projects">
      <h1> projects </h1>
      <p>
        Some of my projects and experiences
      </p>
      <div class="projects-list">
        <div class="project-picL-card"> <!--aero software-->
          <img class="project-pic" loading="lazy" src="assets/nwhack2025.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>NWHACKS 2025</h3>
              <h2>🥇Red Squid Dead Squid</h2>
              <p>
                Inspired by Squid Game, my team built a real-world "Red Light, Green Light" game using a mobile app, Raspberry Pi-powered doll, and computer vision. Players register and compete while motion detection triggers real-time eliminations. WebSocket architecture synchronizes gameplay across devices, combining mobile development, distributed systems, and computer vision technologies.
              </div>
            <div class="project-buttons">
              <div class="project-CTA-group">
                <a class="project-CTA color3-s-button" target="_blank" href="https://devpost.com/software/red-squid-dead-squid">
                  devpost
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="project-picR-card"> <!--girlCode-->
          <img class="project-pic" loading="lazy" src="assets/nwhack2024.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>NWHACKS 2024</h3>
              <h2>🥇Noodle Doodle</h2>
              <p>
                My team built an automated noodle-making machine controlled through a custom iOS app. Users customize spice level, noodle texture, and toppings while the Raspberry Pi-powered machine handles cooking and assembly using servo motors. The system combines a Swift/SwiftUI frontend with Python/Flask backend, showcasing mobile development and IoT hardware integration.
              </div>
            <div class="project-buttons">
              <div class="project-CTA-group">
                <a class="project-CTA color3-s-button" target="_blank" href="https://devpost.com/software/noodle-doodle">
                  devpost
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="project-picL-card"> <!--aero software-->
          <img class="project-pic" loading="lazy" src="assets/aero.gif">
          <div class="project-contents">
            <div class="project-text">
              <h3>AVIONICS SOFTWARE MEMBER</h3>
              <h2>UBC AeroDesign</h2>
              <p>
                The software team develops applications for our aircraft and ground command station, including gathering flight data, implementing ground station software, computer vision, machine learning, and architecting software systems.
              </div>
            <div class="project-buttons">
              <div class="project-CTA-group">
              </div>
            </div>
          </div>
        </div>

        <div class="project-picR-card"> <!--girlCode-->
          <img class="project-pic" loading="lazy" src="assets/girlcodexaritizia.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>GIRLCODE X ARITZIA HACKATHON</h3>
              <h2>Your Perfect Capsule Closet</h2>
              <p>
                In 24 hours, my team created a front-end Aritizia-inspired UI prototype and back-end program with image processing and trained a SVM classification model with team. The application takes input image path of a person’s face and style preferences, and outputs user’s personal color class “skin season” with Aritizia piece recommendations.
              </div>
            <div class="project-buttons">

              <div class="project-CTA-group">
                <a class="project-CTA color3-s-button" target="_blank" href="https://devpost.com/software/your-perfect-capsule-wardrobe">
                  devpost
                </a>
                <a class="project-CTA color3-s-button" target="_blank" href="https://amandayyang15.github.io/girlcode/hero.html">
                  launch front-end
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="project-picL-card"> <!--dragon slayer-->
          <img class="project-pic" loading="lazy" src="assets/dragon slayer.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>WEB GAME DEVELOPMENT</h3>
              <h2>Dragon Slayer</h2>
              <p>
                In an effort to learn Javascript, I followed a <a style="text-decoration: underline !important;" target="_blank" href="https://youtu.be/nu_pCVPKzTk?t=11750">RPG Javascript game tutorial</a>. Unsatisfied with the original UI, I played around in Figma and learned how to do pixel art. To enhance the game play I added features such as changing backgrounds, a visual weapon status, and a kill count.
             </p>
            </div>
            <div class="project-buttons">
              <div class="project-CTA-group">
                <a class="project-CTA color3-s-button" target="_blank" href="https://github.com/amandayyang15/dragon-slayer">
                  view code
                </a>
                <a class="project-CTA color3-s-button" target="_blank" href="https://amandayyang15.github.io/dragon-slayer/">
                  launch game
                </a>
              </div>

            </div>
          </div>
        </div>
        <div class="project-picR-card"> <!--personal website-->
          <img class="project-pic" loading="lazy" src="assets/personal website - square-min.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>WEB DEVELOPMENT</h3>
              <h2>Personal Website</h2>
              <p>
                My very first personal technical/web dev project (the website you are looking at right now 👀). This entire website was created using vanilla HTML and CSS.
             </p>
            </div>
            <!-- <div class="project-buttons">
              <a class="project-CTA color3-s-button" target="_blank" href="https://github.com/amandayyang15/amandayyang15.github.io">
                view code
              </a>
            </div> -->
          </div>
        </div>
        <div class="project-picL-card"> <!--mechanical design-->
          <img class="project-pic" loading="lazy" src="assets/mech design - square-min.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>MECHANICAL DESIGN</h3>
              <h2>UBC AeroDesign</h2>
              <p>
              This team works on designing and manufacturing the plane cabin and integrating all the plane components together. I worked on the empty weight estimation spreadhsheet to ensure proper center of gravity balance. I also designed a spring-loaded hatch mechanism using SolidWorks, and manufactured with 3D printing and laser cutting.
             </p>
            </div>
            <div class="project-buttons">
              <!-- <a class="project-CTA color3-s-button" target="_blank" href="https://ubcaerodesign.com/">
                view team website
              </a> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- FREELANCE -->
    <div id="freelance" class="projects">
      <h1> freelance projects </h1>
      <p>
        Client work encompassing branding, marketing, graphic design, and web development
      </p>
      <div class="projects-list">
        <!--<div class="project-picL-card">
          <img class="project-pic" loading="lazy" src="assets/haroldimages.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>IN PROGRESS</h3>
              <h2>Harold Images</h2>
              <p>
                The client expressed his goal of optimizing his business website, which led to the decision to create a cohesive brand identity. This identity will serve as the foundation for designing a full-stack website, complete with a backend client login system to enhance workflow and convenience.
              </div>
          </div>
        </div>-->

        <div class="project-picR-card"> <!--aero software-->
          <img class="project-pic" loading="lazy" src="assets/freelance-thebennett.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>2023</h3>
              <h2>The Bennett</h2>
              <p>
                The business set a goal to enhance its appeal among a younger demographic. After a series of meetings, we identified the need for a more unified and revitalized brand identity. Additionally, we recognized the importance of devising more impactful strategies to communicate the business's unique selling points, tailored to resonate with the target market.
              </div>
            <div class="project-buttons">
              <div class="project-skills">
                <a class="contactIcon" target="_blank" href="https://www.behance.net/gallery/175186527/The-Bennett-Craft-Kitchen-Brand-Identity"><img src="assets/behance.svg"></a>
              </div>
              <div class="project-CTA-group">
                <a class="project-CTA color3-s-button" target="_blank" href="assets/The Bennett Brand Identity.pdf">
                  brand identity
                </a>
                <a class="project-CTA color3-s-button" target="_blank" href="assets/The Bennett Marketing Proposal.pdf">
                  marketing proposal
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="project-picL-card"> <!--ubc aero-->
          <img class="project-pic" loading="lazy" src="assets/freelance-ubcaerodesign.png">
          <div class="project-contents">
            <div class="project-text">
              <h3>2023</h3>
              <h2>UBC Aerodesign</h2>
              <p>
                I took charge of the complete logo redesign for our team, overseeing the creation of the new logo and actively involved in designing all related merchandise, such as banners and business cards featuring the updated logo. Given that the entire team served as the project's "client," I proactively collected feedback and continuously refined design concepts throughout the process.
             </p>
            </div>
            <div class="project-buttons">
              <div class="project-skills">
                <a class="contactIcon" target="_blank" href="https://www.behance.net/gallery/175099449/UBC-AeroDesign-Visual-Identity"><img src="assets/behance.svg"></a>
              </div>
              <div class="project-CTA-group">
                <a class="project-CTA color3-s-button" target="_blank" href="assets/UBC AeroDesign Branding Identitiy 2023 V3.pdf">
                  brand identity
                </a>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- GET IN TOUCH -->
    <div id="contact" class="getInTouch">
      <h1>get in touch</h1>
      <p>I’m  currently open to new opportunities, my inbox is always open!</p>
      <p>Find me everywhere @amandayyang15</p>
      <div class="getInTouch-contactIcons">
        <a class="contactIcon" target="_blank" href="mailto:amandayyang15@gmail.com"><img src="assets/mail.svg" width: 100%></a>
        <a class="contactIcon" target="_blank" href="https://www.linkedin.com/in/amandayyang15/"><img src="assets/inlinked.svg" style="display: flex !important;"></a>
        <a class="contactIcon" target="_blank" href="https://github.com/amandayyang15"><img src="assets/github.svg"></a>
        <a class="contactIcon" target="_blank" href="https://www.figma.com/@amandayyang15"><img src="assets/figma.svg"></a>
        <a class="contactIcon" target="_blank" href="https://www.behance.net/amandayyang15"><img src="assets/behance.svg"></a>
      </div>
    </div>
  </main>
</body>

<footer>
  <div class="foot">
    <div class="nav-bar"><a href="#">HOME</a></div>
    <div class="nav-bar"><a href="#about">ABOUT</a></div>
    <div class="nav-bar"><a href="#projects">PROJECTS </a></div>
    <div class="nav-bar"><a href="#freelance">FREELANCE </a></div>
    <div class="nav-bar"><a href="#contact">GET IN TOUCH</a></div>
  </div>
  <div class="copyright">
    <p>© 2025 Amanda Yang | Vancouver, BC Canada</p>
  </div>
</footer>

</html>