-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsydeClass.html
300 lines (262 loc) · 15.5 KB
/
sydeClass.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>SYDE Class Profile - Hargun Sibal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- JavaScript plugins (requires jQuery) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- ===== Box Icons ===== -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<!-- ===== Favicons ===== -->
<link rel="shortcut icon" sizes="180x180" href="assets/img/hargun.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/hargun.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/hargun.png">
<link rel="manifest" href="assets/img/site.webmanifest">
<link rel="shortcut icon" href="assets/img/hargun.png">
</head>
<body>
<!-- ===== NAVIGATION ===== -->
<div class="navigation">
<nav class="navbar custom-navbar navbar-static-top ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html"><img src="assets/img/hargunTurban.png"
class="icon"></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-mobile">
<div class="menu-btn" id="menu-icon">
<div class="menu-btn__burger"></div>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html"> Home </a></li>
<li><a href="about.html"> About </a></li>
<li><a href="music.html"> Music </a></li>
<li><a href="work.html"> Work </a></li>
<li><a href="assets/pdf/Hargun Sibal Resume 2B.pdf" target="_blank"> Resume </a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<main class="main">
<!-- ===== HEADER ===== -->
<section class="project-header my-padding">
<div class="container">
<div class="row">
<div class="col-med-12 col-sm-12">
<h1>SYDE 2026 Class Profile</h1>
<p class="project-type">SYDE Project: <a class="link" href="https://syde26.life/"
target="_blank">Website Link</a></p>
<p class="project-description">Was tasked to be the Software Team Lead for a small group of 7 individuals. The purpose was to give insight and an in-depth look at the SYDE 2026’s 1A term through a website for future and current students,
similar to reports created by previous cohorts.</p>
</div>
</div>
</div>
</section>
<br>
<div class="container col-lg-12 my-padding">
<div class="row">
<img src="assets/img/sydelogoLong.jpg" alt="OYMS Long Image">
</div>
</div>
<!-- ===== PROJECT INFO ====== -->
<section class="project-info my-padding">
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-3">
<br>
<h2><b>Role</b></h2>
<p>Web Development<br>
</p>
</div>
<div class="col-sm-6 col-lg-4"><br>
<h2><b>Timeline</b></h2>
<p>April 1-22, 2022<br>
GitHub file: <a class="link" href="https://github.com/SYDE-26/1A-Class-Profile-Website"
target="_blank">SYDE 2026</a>
</p>
</div>
<div class="col-sm-6 col-lg-3"><br>
<h2><b>Tools</b></h2>
<p>
React<br>
Firebase Firestore<br>
Material-UI<br>
JavaScript<br>
Chart.js<br>
Vercel<br>
</p>
</div>
<div class="col-sm-6 col-lg-2"><br>
<h2><b>Team</b></h2>
<p><a href="https://syde26.life/about" class="link" target="_blank">View the team here!</a><br>
</p>
</div>
</div>
</div>
</section>
<!-- ===== CASE STUDY ====== -->
<section class="project-info">
<div class="container case-study">
<div class="row">
<div class="col-sm-4 col-lg-5">
<h1 class="project-subtitle"><b>The Task</b></h1>
</div>
<div class="col-sm-6 col-lg-7">
<br>
<p>A class profile is an introspection of the demographics and lifestyles of a class, allowing others to explore different perspectives
and learn more about the class. This idea was started by systems design engineering students, and so as first year students, a group
of us took charge to carry on the torch.
<br><br>
The goal of this project is to display the results of our class survey that was used to gain information in key areas of student life, as well as all of the
data analysis performed by the data team that really allows us to gain more insight on those parts of our lives. We really want to help the younger applicants
know what they are getting into and try to display all of this in a manner that is visually appealing and straightforward so that any audience who looks
through the profile will be able to learn a bit more about our class.
<br><br>
In the past simple reports have been created, but going forward we would love to carry on the tradition that the SYDE Class of 25 created, to maintain a website to
store all this information.
</p>
</p>
</div>
</div>
</div>
<div class="container case-study">
<div class="row">
<div class="col-sm-4 col-lg-5">
<h1 class="project-subtitle"><b>Execute</b></h1>
</div>
<div class="col-sm-6 col-lg-7">
<br>
<p> In early March the team leads and PM's (roughly 7 of us in total) came together and made a plan on how we wanted to organize the project since it involved
around 20 individuals. We came up with the plan that the data team would first gather, analyze, and clean up all the data that was collected, and then the
design team would come up with a figma design in the month of March, and to finish it off, the software team would convert the design and add all the data
to the web application. As the team lead, it was my responsiblity to make sure all the work was assigned to everyone, and if anyone on the team needed help,
I was there to aid them.
The list of things that needed to be done included:
<ol class="list">
<li>First, organize all the tasks on Click-Up so everyone knew who was assigned what</li>
<li>Second, give everyone components to work on in the project so things can be done smoothly</li>
<li>Third, make site responsive on all devices (IOS, MacOS, Windows Edge, Chrome, Firefox etc.)</li>
</ol>
</p>
</p>
</div>
</div>
</div>
<div class="container case-study">
<div class="row">
<div class="col-sm-4 col-lg-5">
<h1 class="project-subtitle"><b>My Work</b></h1>
</div>
<div class="col-sm-6 col-lg-7"><br>
<p>As the team lead, I was responsible with overseeing most of the final product to make sure everything functioned as it was meant to, and also to fit the design document.
I specifically worked on the overall responsiveness of the site (on mobile and desktop), the Photo Gallery, fetching the data from the Firebase Firestore and displaying it on the site using Chart.js, and helped with each of the pages and members on the team wherever they needed help. A small video is linked at the bottom to view the whole site but the Insyder page has not been shown since thats for our eyes only :) You can also see a few small screenshots below:
</p><br>
</div>
<figure>
<img src="assets/img/photogallery.png"
alt="Splash Page" class="wireframe"><br><br>
<figcaption>Worked on the Photo Gallery page, and made custom carousel components, and each month shows a glimpse to the audience of what first year was like for us!</figcaption>
</figure>
<br>
<figure>
<img src="assets/img/firebase.png"
alt="Firebase" class="wireframe"><br><br>
<figcaption>This screenshot is an example of data that was fetched from the Firestore and was then displayed on the site to fetch data very easily and efficiently. Also used Chart.js for creating the graphs on each page.</figcaption>
</figure><br>
<video class="video1" width="100%" height="1000" autoplay loop>
<source src="assets/videos/syde26.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
<p></p>
<br>
</div>
</div>
<div class="container case-study">
<div class="row">
<div class="col-sm-4 col-lg-5">
<h1 class="project-subtitle"><b>Future?</b></h1>
</div>
<div class="col-sm-6 col-lg-7"><br>
<p>This was my first software project in which I was not the only developer. In addition to this, I was the software lead,
so that made for an interesting experience. I definitely see the benefits of developing with others, as it allows
for so many more ideas to be tested and perspectives to explore. Overall, I am proud of myself and the team for what we accomplished!
<br><br>
The class profile may be released, but it is not complete. This is something that we are committed to working on for the full
five years of our degree, and this is only the first release. The design team will continue to meet and work on the design of the
site, new features (dark and light theme perhaps?), and tidying up the little details.</p>
<p><br>
Overall, I am very glad that I was given this opportunity to work on the website along side
my friends! Simply having the luxury of using my own ideas and developing something that looks almost identical to the figma design was truly amazing.
</p><br>
</div>
</div>
</section>
<br><br><br>
<!-- ===== FOOTER ===== -->
<section id="contact">
<div class="container text-center">
<div class="row">
<h3 class="contact__title">Thanks for taking the time to take a look at my work!</h3><br>
<p class="contact__description">Like what you see?</p>
<p class="contact__description">Let's keep the conversation going!</p>
<div class="contact__icons text-center">
<div class="contact__icons">
<a href="mailto: [email protected]" target="_blank" class="contact__email">
<img src="assets/img/email.png" class="grow" width="50">  </a>
<a href="https://www.linkedin.com/in/hargunsibal/" target="_blank"
class="contact__linkedin"><img src="assets/img/linkedin.png" class="grow"
width="50">  </a>
<a href="https://github.com/hargun-27" target="_blank" class="contact__github">
<img src="assets/img/github.png" class="grow" width="50">  </a>
<a href="https://www.youtube.com/channel/UCSQ7ZbLMM17kP7LzgW7ECMw" target="_blank" class="contact__github">
<img src="assets/img/youtube.png" class="grow" width="50">  </a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ===== FOOTER ===== -->
<div class="container text-center">
<p class="footer-text">Created and designed by Hargun Sibal</p>
</div>
<!-- ===== MAIN JS ===== -->
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
<script>
// Changing the defaults
window.sr = ScrollReveal({
origin: 'top',
distance: '80px',
duration: 2000,
reset: true
});
// Customizing a reveal set
sr.reveal('.about', {});
sr.reveal('.projects__header', {});
sr.reveal('.contact__email', { origin: 'bottom' });
sr.reveal('.contact__linkedin', { origin: 'bottom', delay: 200 });
sr.reveal('.contact__github', { origin: 'bottom', delay: 400 });
sr.reveal('.contact__instagram', { origin: 'bottom', delay: 600 });
</script>
<script src="assets/js/main.js"></script>
</body>
</html>