ConstellationNetworking.github.io/about.html at main · ConstellationNetworking/ConstellationNetworking.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
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Us</title>
  <link rel="stylesheet" href="/assets/dist/tailwind.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  </link>
  <link rel="stylesheet" href="/assets/css/about.css">
  </link>

  <meta name="description" content="Learn more about Constellation Networking, our mission, and our team.">
  <meta name="keywords" content="Constellation Networking, about us, mission, team">
  <meta name="author" content="Constellation Networking Team">


  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-FTXQ5HF0C5"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

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

  <!-- Firebase -->
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
  <script src="assets/js/firebase_init.js"></script>
</head>

<body class="bg-gray-100">

  <!-- Header -->
  <header class="bg-black text-white">
    <div class="container mx-auto px-4 py-6">
      <!-- Navigation and Page Title -->
      <nav class="flex justify-between items-center">
        <a href="/index.html" class="text-xl font-semi-bold">Constellation</a>
        <div class="hidden md:flex space-x-4">
          <a href="/index.html" class="text-gray-300 hover:text-white">Home</a>
          <a href="/account.html" class="text-gray-300 hover:text-white">Account</a>
        </div>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main>
    <!-- About Us Section -->
    <section class="bg-white text-gray-800">
      <div class="container mx-auto px-4 py-12">
        <h1 class="text-4xl font-bold mb-4">About Us</h1>
        <p class="text-lg mb-12">Constellation is an Edtech networking platform for youth that presents them
          opportunities to and teaches them to network with peers in a gamified format.</p>

        <!-- At a glance
        <div class="bg-white py-24 sm:py-16">
          <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
              <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt class="text-base leading-7 text-gray-600">Monthly active users</dt>
                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
                  id="monthly-active-users">0</dd>
              </div>
              <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt class="text-base leading-7 text-gray-600">Weekly traffic</dt>
                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
                  id="website-views">0</dd>
              </div>
              <div class="mx-auto flex max-w-xs flex-col gap-y-4">
                <dt class="text-base leading-7 text-gray-600">Messages sent monthly</dt>
                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
                  id="messages-sent">0</dd>
              </div>
            </dl>
          </div>
        </div> -->

        <!-- Mission Statement -->
        <div class="bg-gray-900 text-white p-8 rounded-lg mb-12">
          <h2 class="text-3xl font-bold mb-4">Changing the experience for students.</h2>
          <p class="text-lg mb-8">At Constellation, we're revolutionizing the way students learn networking
            skills, providing a gamified, low-stress platform for them to connect and grow professionally.
            Our mission is to transform networking into a fundamental and enjoyable part of every student's
            educational journey.</p>
          <p class="text-lg">Constellation reimagines student networking by blending education and technology
            into a captivating platform that fosters professional growth and connections.</p>
        </div>

        <!-- Leadership Team -->
        <div class="mb-12 select-none">
          <h2 style="margin-top: 5px;" class="text-3xl font-bold mb-6">Our Team</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4  gap-6" id="members-container"
            style="align-items: flex-start; padding-top: 10px;">
            <button class="member-btn" onclick="window.location='/members/winnie_zhang.html'">
              <div class="text-center">
                <div class="w-24 h-24 mx-auto mb-2 relative">
                  <img src="/assets/img/about/winnie_zhang.jpg" alt="Winnie Zhang, CEO"
                    class="rounded-full absolute top-0 left-0 right-0 bottom-0 m-auto">
                </div>
                <!-- <p class="text-sm bg-yellow-600 text-white py-1 px-2 inline-block rounded-full mb-2">Executive Officer
                </p> -->
                <h3 class="text-lg font-semibold">Winnie Zhang</h3>
                <a onclick="window.location=`mailto:${this.innerHTML}`"
                  class="text-sm text-blue-600">wingsofzhang@gmail.com</a>
                <p style="padding-top: 10px;" class="text-sm text-black-600">Winnie Zhang is a devoted student driven by
                  a passion for intellectual pursuits and physical endeavors. Embracing an unwavering commitment to
                  continuous improvement, she seeks to create a platform that bridges the realms of gaming and social
                  media to motivate the next generation in establishing their network of peers and mentors and broaden
                  their horizons.</p>
              </div>
            </button>
            <button class="member-btn" onclick="window.location='/members/jerry_hu.html'">
              <div class="text-center">
                <div class="w-24 h-24 mx-auto mb-2 relative">
                  <img src="/assets/img/about/jerry_hu.jpg" alt="Jerry Hu, CTO"
                    class="rounded-full absolute top-0 left-0 right-0 bottom-0 m-auto">
                </div>
                <!-- <p class="text-sm bg-blue-600 text-white py-1 px-2 inline-block rounded-full mb-2">Chief Technology
                  Officer</p> -->
                <h3 class="text-lg font-semibold">Jerry Hu</h3>
                <a onclick="window.location=`mailto:${this.innerHTML}`"
                  class="text-sm text-blue-600">work.jerrywu@gmail.com</a>
                <p style="padding-top: 10px;" class="text-sm text-black-600">Jerry is an ambitious and innovative IB
                  student based in Surrey, Canada. With an exceptional talent
                  in coding, he taught himself multiple programming languages including Python, Javascript,
                  HTML/CSS, Swift, Java, and is continually expanding his expertise into C++. Beyond coding, Jerry is an
                  avid sports enthusiast, with many medals in badminton and loves to ski, snowboard, and golf.</p>
              </div>
            </button>
            <button class="member-btn" onclick="window.location='/members/eileen_tang.html'">
              <div class="text-center">
                <div class="w-24 h-24 mx-auto mb-2 relative">
                  <img src="/assets/img/about/eileen_tang.jpg" alt="Eileen Tang, Illustrations and UI"
                    class="rounded-full absolute top-0 left-0 right-0 bottom-0 m-auto">
                </div>
                <p class="text-sm bg-purple-600 text-white py-1 px-2 inline-block rounded-full mb-2">Illustrations and
                  UI</p>
                <h3 class="text-lg font-semibold">Eileen Tang</h3>
                <a onclick="window.location=`mailto:${this.innerHTML}`"
                  class="text-sm text-blue-600">eileentangbc@gmail.com</a>
                <p style="padding-top: 10px;" class="text-sm text-black-600">My name is Eileen Tang and I am in grade 9.
                  I go to J.N. Burnett Secondary and I joined Constellation in 2023. I primarily take part in arts and
                  design in the team. My hobbies and interests include painting, skiing, and listening to music.</p>
              </div>
            </button>
            <button class="member-btn" onclick="window.location='/members/vincent_xiao.html'">
              <div class="text-center">
                <div class="w-24 h-24 mx-auto mb-2 relative">
                  <img src="/assets/img/about/vincent_xiao.jpg" alt="Vincent Xiao, Assisting Technology"
                    class="rounded-full absolute top-0 left-0 right-0 bottom-0 m-auto">
                </div>
                <p class="text-sm bg-green-600 text-white py-1 px-2 inline-block rounded-full mb-2">Assisting Technology
                </p>
                <h3 class="text-lg font-semibold">Vincent Xiao</h3>
                <a onclick="window.location=`mailto:${this.innerHTML}`"
                  class="text-sm text-blue-600">vincentxiao0101@gmail.com</a>
                <p style="padding-top: 10px;" class="text-sm text-black-600">My name is Vincent. I currently study in
                  the IB program at Port Moody Secondary School and will graduate in 2025. I lose anything related to
                  robotics and STEM. In my free time, I like to do robotics and play golf.</p>
              </div>
            </button>
          </div>
          <div class="text-center mt-6" style="padding-top: 15px;">
            <a href="/volunteer_positions.html" class="text-blue-600 hover:underline">View open volunteer positions</a>
          </div>
        </div>

        <!-- Our History -->
        <div class="mb-12">
          <h2 class="text-3xl font-bold mb-6">Our History</h2>
          <div class="relative timeline">
            <!-- Timeline Item 4 -->
            <div class="timeline-item">
              <p class="text-sm text-gray-600 mb-1">January 11, 2024</p>
              <h3 class="text-lg font-semibold">Constellation v.2.0 ships</h3>
            </div>
            <!-- Timeline Item 3 -->
            <div class="timeline-item">
              <p class="text-sm text-gray-600 mb-1">November 23, 2023</p>
              <h3 class="text-lg font-semibold">Recruited 2 new members</h3>
            </div>
            <!-- Timeline Item 2 -->
            <div class="timeline-item">
              <p class="text-sm text-gray-600 mb-1">November 8, 2023</p>
              <h3 class="text-lg font-semibold">v.1.0 ships</h3>
            </div>
            <!-- Timeline Item 1 -->
            <div class="timeline-item">
              <p class="text-sm text-gray-600 mb-1">October 16, 2023</p>
              <h3 class="text-lg font-semibold">Team formed</h3>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black text-gray-400">
      <div class="relative isolate overflow-hidden bg-gray-900 py-16 sm:py-24 lg:py-32">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
          <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
            <div class="max-w-xl lg:max-w-lg">
              <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Subscribe to our newsletter.</h2>
              <p class="mt-4 text-lg leading-8 text-gray-300">The latest Constellation news, tips, and resources, sent
                straight to your inbox every month.</p>
              <div class="mt-6 flex max-w-md gap-x-4">
                <label for="email-address" class="sr-only">Email address</label>
                <input id="newsletter-email" name="email" type="email" autocomplete="email" required
                  class="min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
                  placeholder="Enter your email">
                <button onclick="addToNewsletter();"
                  class="flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">Subscribe</button>
              </div>
            </div>
            <dl class="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:pt-2">
              <div class="flex flex-col items-start">
                <div class="rounded-md bg-white/5 p-2 ring-1 ring-white/10">
                  <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
                  </svg>
                </div>
                <dt class="mt-4 font-semibold text-white">Weekly articles</dt>
                <dd class="mt-2 leading-7 text-gray-400">Get exclusive access to our weekly articles packed with the
                  latest insights, industry trends, and valuable resources, delivered right to your inbox every week.
                </dd>
              </div>
              <div class="flex flex-col items-start">
                <div class="rounded-md bg-white/5 p-2 ring-1 ring-white/10">
                  <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M10.05 4.575a1.575 1.575 0 10-3.15 0v3m3.15-3v-1.5a1.575 1.575 0 013.15 0v1.5m-3.15 0l.075 5.925m3.075.75V4.575m0 0a1.575 1.575 0 013.15 0V15M6.9 7.575a1.575 1.575 0 10-3.15 0v8.175a6.75 6.75 0 006.75 6.75h2.018a5.25 5.25 0 003.712-1.538l1.732-1.732a5.25 5.25 0 001.538-3.712l.003-2.024a.668.668 0 01.198-.471 1.575 1.575 0 10-2.228-2.228 3.818 3.818 0 00-1.12 2.687M6.9 7.575V12m6.27 4.318A4.49 4.49 0 0116.35 15m.002 0h-.002" />
                  </svg>
                </div>
                <dt class="mt-4 font-semibold text-white">No spam</dt>
                <dd class="mt-2 leading-7 text-gray-400">Rest assured, our newsletter is free from annoying spam. You'll
                  only receive high-quality content, curated with care, to keep you informed and inspired on a weekly
                  basis.</dd>
              </div>
            </dl>
          </div>
        </div>
        <div class="absolute left-1/2 top-0 -z-10 -translate-x-1/2 blur-3xl xl:-top-6" aria-hidden="true">
          <div class="aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
            style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
          </div>
        </div>
      </div>
    </footer>
  </main>

</body>
<script src="/assets/js/about.js"></script>

</html>