-
Notifications
You must be signed in to change notification settings - Fork 1
/
our_story.html
332 lines (324 loc) · 13.3 KB
/
our_story.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Our Story</title>
<!-- General Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Throughout the year, the team develops a number of different skills as members research, design, and build the robot."
/>
<!-- Link Google Fonts -->
<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=Outfit:[email protected]&family=Overpass+Mono:[email protected]&display=swap"
rel="stylesheet"
/>
<!-- Link CSS -->
<link rel="stylesheet" type="text/css" href="assets/scss/OurStory.css" />
<link rel="stylesheet" type="text/css" href="assets/scss/default.css" />
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<!-- Loads module Html -->
<script src="./components/Header.js"></script>
<script src="./components/Footer.js"></script>
<!-- Gets instagram posts -->
<script src="./assets/javascript/getInstagramPosts.js" defer></script>
</head>
<body>
<!-- Header will be loaded here -->
<main>
<picture id="backgroundContainer">
<source
type="image/webp"
srcset="
assets/images/photos/MoonBackground/MoonBackground-320w.webp?width=320 320w,
assets/images/photos/MoonBackground/MoonBackground-520w.webp?width=520 520w,
assets/images/photos/MoonBackground/MoonBackground-768w.webp?width=768 768w,
assets/images/photos/MoonBackground/MoonBackground-1200w.webp?width=1200 1200w,
assets/images/photos/MoonBackground/MoonBackground-1920w.webp?width=1920 1920w
"
sizes="100vw"
/>
<img
src="assets/images/photos/MoonBackground/MoonBackground-320w.jpg"
srcset="
assets/images/photos/MoonBackground/MoonBackground-320w.jpg?width=320 320w,
assets/images/photos/MoonBackground/MoonBackground-520w.jpg?width=520 520w,
assets/images/photos/MoonBackground/MoonBackground-768w.jpg?width=768 768w,
assets/images/photos/MoonBackground/MoonBackground-1200w.jpg?width=1200 1200w,
assets/images/photos/MoonBackground/MoonBackground-1920w.jpg?width=1920 1920w
"
sizes="100vw"
alt="Background image of the moon"
class="backgroundImage"
/>
</picture>
<section id="teamTextSection">
<div class="contentWidthContainer" role="presentation">
<h2>
We believe that good design is powerful, hard work is essential, and
exploring the unknown is important.
</h2>
<hr role="presentation" />
<div role="presentation">
<article>
<h3>Mission</h3>
<p>
Our mission is to develop ourselves by developing a rover for
space, among our other projects.
</p>
</article>
<hr role="presentation" />
<article>
<h3>Value</h3>
<p>
Key club values are communication, execution, and determination.
</p>
</article>
</div>
<hr />
<article>
<h3>About Us</h3>
<p>
TrickFire’s mission is to give us students hands-on, relevant
experiences crucial to entering the working world. Here, students
can gain skills in software, mechanical, and electrical
engineering, business, and marketing. You can work on a robotic
arm, a sponsorship packet, and a drone all in the same club if
you’re willing to put in the time. All of these learning
opportunities and experiences will improve our resumes, give us
great talking points, and create fond memories!
</p>
</article>
<hr role="presentation" />
<article>
<h3>About Team</h3>
<p>
TrickFire is made up of smaller teams that all contribute their
own disciplines to the final rover and provide members with
different opportunities to flex their skills. Members can join
multiple teams and each team works on several different projects
in their own subteams, so there is always something new and
interesting to be worked on. Interdisciplinarity is encouraged and
supported.
</p>
</article>
<hr />
</div>
</section>
<section id="teamLeadersSection">
<div class="contentWidthContainer" role="presentation">
<h3 id="leaderTitle">Team Leaders</h3>
<article>
<div class="profile" role="presentation">
<picture>
<source
type="image/webp"
srcset="assets/images/photos/ProfileImages/VladProfile.webp"
/>
<img
src="assets/images/photos/ProfileImages/VladProfile.jpg"
alt="Profile picture of Vlad"
loading="lazy"
encoding="async"
/>
</picture>
<h3>Vlad</h3>
</div>
<div class="quote" role="presentation">
<h3>“Robots are pretty neat!"</h3>
<p>
As the software lead, I am responsible for leading the
development of rover code that is well-documented, easy to
expand, and that is robust through heavy cooperation with the
rest of the software team. As one of the presidents, I work with
Adan R. to direct TrickFire's overall direction.
</p>
</div>
</article>
<article class="reversed">
<div class="profile" role="presentation">
<picture>
<source
type="image/webp"
srcset="assets/images/photos/ProfileImages/AdanProfile.webp"
/>
<img
src="assets/images/photos/ProfileImages/AdanProfile.jpg"
alt="Profile picture of Adan"
loading="lazy"
encoding="async"
/>
</picture>
<h3>Adan</h3>
</div>
<div class="quote" role="presentation">
<h3>“Our rovers use grease. Money is one kind.”</h3>
<p>
As the Finance Lead, I am responsible for locating and securing
funding for the club. I coordinate and approve all club
purchases, be they for parts, materials, or tools. Among my
other responsibilities, as the other president of the club, I
help organize club events and keep track of the club and rover
budget.
</p>
</div>
</article>
<article>
<div class="profile" role="presentation">
<picture>
<source
type="image/webp"
srcset="assets/images/photos/ProfileImages/ThomasProfile.webp"
/>
<img
src="assets/images/photos/ProfileImages/ThomasProfile.jpg"
alt="Profile picture of Thomas"
loading="lazy"
encoding="async"
/>
</picture>
<h3>Thomas</h3>
</div>
<div class="quote" role="presentation">
<h3>“Making things picture perfect”</h3>
<p>
As the Marketing Lead for TrickFire Robotics team, I oversee a
branding team and oversees all marketing projects for
recruitment and events that the club hosts throughout the year!
As one of the officers I also work with Adan R. to manage
university and alumni relations!
</p>
</div>
</article>
<article class="reversed">
<div class="profile" role="presentation">
<picture>
<source
type="image/webp"
srcset="assets/images/photos/ProfileImages/DangProfile.webp"
/>
<img
src="assets/images/photos/ProfileImages/DangProfile.jpg"
alt="Profile picture of Adan"
loading="lazy"
encoding="async"
/>
</picture>
<h3>Dang</h3>
</div>
<div class="quote" role="presentation">
<h3>“Life is wild!”</h3>
<p>
As the Biology Lead, I work with our Biology team to develop
detection methods that can identify microbes in the soil. We aim
to develop light, accurate and efficient systems that can detect
life in multi ways from imaging to metabolism. Working with a
rover system, we aim to be open-minded about untraditional life
forms and always look beyond just Earth mophologies.
</p>
</div>
</article>
<article>
<div class="profile" role="presentation">
<picture>
<source
type="image/webp"
srcset="assets/images/photos/ProfileImages/JasonProfile.webp"
/>
<img
src="assets/images/photos/ProfileImages/JasonProfile.jpg"
alt="Profile picture of Jason"
loading="lazy"
encoding="async"
/>
</picture>
<h3>Jason</h3>
</div>
<div class="quote" role="presentation">
<h3>“Knocked down 6, get up 7”</h3>
<p>
As the Electrical Co-Lead for the Trickfire Robotics team, I'm
driven to inspire, grow, and lead by example. There's always a
lot to do, and I'm in love with every second of it.
</p>
</div>
</article>
<article class="reversed">
<div class="profile" role="presentation">
<picture>
<source
type="image/webp"
srcset="
assets/images/photos/ProfileImages/ChristianProfile.webp
"
/>
<img
src="assets/images/photos/ProfileImages/ChristianProfile.jpg"
alt="Profile picture of Christian"
loading="lazy"
encoding="async"
/>
</picture>
<h3>Christian</h3>
</div>
<div class="quote" role="presentation">
<h3>"Don't let out the magic smoke!"</h3>
<p>
As the electrical co-lead, I'm responsible for ensuring key
electrical systems are properly integrated into the robots.
Additionally, I work with my co-lead, Jason T., to provide
effective documention and understanding of electrical systems
for all members of TrickFire.
</p>
</div>
</article>
<article>
<div class="profile" role="presentation">
<picture>
<source
type="image/webp"
srcset="assets/images/photos/ProfileImages/EliasProfile.webp"
/>
<img
src="assets/images/photos/ProfileImages/EliasProfile.jpg"
alt="Profile picture of Elias"
loading="lazy"
encoding="async"
/>
</picture>
<h3>Elias</h3>
</div>
<div class="quote" role="presentation">
<h3>“Go find a way to break it!”</h3>
<p>
As the Mechanical Lead of TrickFire, I lead the drafting and
design of static and dynamic rover systems. I encourage Design
for Manufacturing (DFM) to a high standard. DFM is the most
important lesson a hands-on project can offer. Mechanical
Engineers must learn how to utilize standard and innovative
manufacturing tools just as we learned to use our environment to
shape the modern world. The Trickfire Mechanical Team is
determined to make it to competition and will use iterative
design cycles to achieve this.
</p>
</div>
</article>
</div>
</section>
<div class="contentWidthContainer" role="presentation">
<section id="teamInstagramSection">
<h3>Our Story on Instagram</h3>
<div id="photoContainer" role="presentation"></div>
</section>
</div>
</main>
<!-- Footer will be loaded here -->
</body>
</html>