crystalyangsite/gallery.html at main · Crustaly/crystalyangsite · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-ERF50X8WXR"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-ERF50X8WXR');
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Crystal Yang - The Gallery</title>
  <link rel="icon" href="images/indexLogo.png" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="gallery.css">
</head>
<body>

  <!-- Header Section -->
  <div class="header">
    <a href="index.html" class="logo">
      <img src="images/indexLogo.png" alt="Logo" class="logo-image">
    </a>
    <div class="header-right">
      <a href="projects.html">stuff i've built</a>
      <a href="press.html">in the news</a>
      <a href="gallery.html">the gallery</a>
    </div>
  </div>

  <!-- Gallery Header -->
  <div class="gallery-header">
    <h1>The Gallery</h1>
    <p class="subheading">Explore some snapshots of my projects, events, and life.</p>
  </div>

  <!-- Gallery Grid Section -->
  <div class="gallery-grid">
    <div class="gallery-item">
      <img src="images/gallery/crystal_yang_code.jpeg" alt="Gallery Image 1">
      <p class="caption">Dallas Road Trip to Lockheed Martin with CS Club Nerds</p>
    </div>

    <div class="gallery-item">
      <img src="images/gallery/gwc_officers.jpeg" alt="Gallery Image 3">
      <p class="caption">Girls Who Code Officers <3</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/crystal_yang_tower.jpeg" alt="Gallery Image 4">
      <p class="caption">Engineering Geniuses Build Giant Spaghetti Tower</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/icmi.jpg" alt="Gallery Image 10">
      <p class="caption">ACM ICMI '23</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/newsstation-crystal_yang.jpeg" alt="Gallery Image 2">
      <p class="caption">First Time on Live TV!!!</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/state.png" alt="Gallery Image 5">
      <p class="caption">All-State Orchestra Crew :D</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/codewars.png" alt="Gallery Image 6">
      <p class="caption">HP Codewars Win!!!</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/crystal_yang_cool.jpeg" alt="Gallery Image 7">
      <p class="caption">M&TSI Roomies!</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/stemnight.png" alt="Gallery Image 8">
      <p class="caption">STEM Night With K-8 Students</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/alexandnicole.jpg" alt="Gallery Image 9">
      <p class="caption">Orchestra Banquet '23</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/viola.png" alt="Gallery Image 9">
      <p class="caption">TMEA Honor Orchestra '23</p>
    </div>

    <div class="gallery-item">
      <img src="images/gallery/bakery.jpg" alt="Gallery Image 6">
      <p class="caption">Coding the USACO Problem "Bakery" in an Amesterdam Bakery</p>
    </div>
    <div class="gallery-item">
      <img src="images/press/IMG_3298.jpeg" alt="Gallery Image 7">
      <p class="caption">Houston Science Fair</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/horizonBeatles.png" alt="Gallery Image 10">
      <p class="caption">The Best String Quartet!</p>
    </div>
    <div class="gallery-item">
      <img src="images/gallery/supergwc.png" alt="Gallery Image 8">
      <p class="caption">Girls Who Code!</p>
    </div>


  </div>

  <!-- JavaScript for Carousel Functionality -->
  <script src="gallery.js"></script>
</body>
  <footer style="text-align: center; padding: 20px; background-color: #86d3ff; font-size: 14px;">
    <p>
      <a href="https://www.linkedin.com/in/crustaly/" target="_blank" style="margin: 0 10px;">
        LinkedIn</a> |
      <a href="mailto:yangjcrystal@gmail.com" style="margin: 0 10px;">
        Email</a> |
      <a href="https://github.com/Crustaly" target="_blank" style="margin: 0 10px;">
        GitHub</a>
    </p>
    <p>&copy; 2025 Crystal Yang</p>
  </footer>

</html>