-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
243 lines (217 loc) · 11.4 KB
/
index.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
<!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>Zaid Hoda</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/6f0cc397ef.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Home -->
<div id="header">
<div class="container">
<nav>
<img src="files/logo.png" class="logo">
<ul>
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="header-text">
<h1>Hi, I'm <span>Zaid.</span></h1>
<p>Electrical & Mechatronics Engineering @ UCalgary</p>
<div class="icons">
<a href="https://www.linkedin.com/in/zaidhoda/" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/zzaid17" target="_blank" aria-label="GitHub"><i class="fa-brands fa-github"></i></a>
<a href="files/resume.pdf" target="_blank" aria-label="Resume"><div class="resume-icon">Resume</div></a>
</div>
</div>
</div>
</div>
<!-- About -->
<div id="about">
<div class="container">
<img src="files/zaid.jpg">
<div id="about-text">
<h1 class="sub-title">About Me</h1>
<p>
My name is Zaid and I'm currently a third-year electrical engineering student at the Schulich
School of Engineering, at the University of Calgary. I am minoring in mechatronics and have a strong
background in software development. I have a wide variety of interests in the fields of science and
technology, such as space exploration, machine learning, robotics, and more.
<br><br>
Growing up, I displayed great interest in my math and science coursework at school. This continued
throughout high school when I further explored my calculus and physics classes, which inspired me
to pursue engineering. I also loved programming, so my initial plan was actually to pick software
engineering as my major after my first year. My interest in electrical engineering ultimately
emerged after realizing how much I enjoyed my physics and circuits courses in my first year,
as well as seeing the applications of calculus and differential equations in electrical
engineering.
<br><br>
I've been all over Canada, having lived in London, Halifax, Fort McMurray, and Calgary, in that exact
order. I've been living in Calgary since I was 8 (12 years now), so it's been home for a while. Before
my parents moved here, I was born in Hyderabad, India. In my free time, you can usually find me listening
to music, lifting weights, playing video games or working on various personal projects here and there,
such as this website. I also love to travel, so I'm always on the hunt for an international internship!
</p>
</div>
</div>
</div>
<!-- Experience -->
<div id="experience">
<div class="container">
<h1 class="sub-title">Experience</h1>
<div class="experience-item">
<a href="https://www.calgarytospace.ca" target="_blank"><img src="files/calgarytospace.png" alt="CalgaryToSpace"
class="experience-image"></a>
<div class="experience-details">
<h2>Electrical Subteam Member</h2>
<h3>CalgaryToSpace (January 2024 - present)</h3>
<p>I have always had a deep-rooted passion for space exploration, being fascinated by NASA missions and the
like since childhood. One of my most rewarding experiences in engineering has been joining
CalgaryToSpace, a student team working on Calgary's first student-developed satellite,
aiming to encourage and promote the aerospace industry in the community. At CalgaryToSpace, I have had
the opportunity to design circuit boards, develop firmware, and test and troubleshoot various satellite
components. I have also taken up a leadership role, helping onboard and mentor new members. These
experiences have enabled me to directly contribute to furthering an initiative that engages my community
in a field that I am passionate about.</p>
</div>
</div>
<div class="experience-item">
<a href="https://www.ucalgary.ca/labs/autonomous-systems/home-0" target="_blank"><img src="files/schulich.jpg"
alt="Schulich School of Engineering" class="experience-image"></a>
<div class="experience-details">
<h2>Robotics Research Intern</h2>
<h3>Schulich School of Engineering (May 2024 - August 2024)</h3>
<p>This past summer, I had the opportunity to work as a research intern for Dr. Henry Leung at the Schulich
School of Engineering, where I assisted with the development of an assistive robot for the City of
Calgary that would greet and help citizens in City Hall. As a research intern, I used ROS 2 to interface
the robot's laser scanner to allow for autonomous navigation and mapping. I also worked with an ESP32
microcontroller and gyroscope sensors, writing custom Arduino/C++ code to publish inertial measurement
unit (IMU) data, which contributed to the robot's navigation and localization system.. This served as a
great learning opportunity and also fostered a certain level of independence due to the often individual
nature of working in academia.</p>
</div>
</div>
<div class="experience-item">
<a href="https://schulichignite.com/" target="_blank"><img src="files/ignite.jpg" alt="Schulich Ignite" class="experience-image"></a>
<div class="experience-details">
<h2>Programming Mentor</h2>
<h3>Schulich Ignite (October 2023 - April 2024)</h3>
<p>Throughout high school, I found that it was very difficult to teach myself programming. The complexity
of software development made it feel overwhelming to begin as a teenager. Thus, in my second year, I
chose to join Schulich Ignite, an on-campus club that offers volunteering opportunities for undergraduate
students to serve as mentors for high school students wishing to learn to code. Many students went on to
showcase great interest and passion in programming and I am very grateful to have had the opportunity to
help them pursue their goals and potentially further careers in software development.
</p>
</div>
</div>
</div>
</div>
<!-- Projects -->
<div id="projects">
<div class="container">
<h1 class="sub-title">Projects</h1>
<div class="project-row">
<div class="project-item">
<img src="files/basys3.jpg" class="project-image" data-modal="modal1">
<h2>Basys3 Digital Signal Processing Module</h2>
</div>
<div class="project-item">
<img src="files/laptop.jpg" class="project-image" data-modal="modal2">
<h2>Personal Portfolio Website</h2>
</div>
<div class="project-item">
<img src="files/planet.jpeg" class="project-image" data-modal="modal3">
<h2>Exoplanet Detection</h2>
</div>
<div class="project-item">
<img src="files/console.jpg" class="project-image" data-modal="modal4">
<h2>Retro Video Game Console</h2>
</div>
<div class="project-item">
<img src="" class="project-image" data-modal="modal5">
<h2>Automated Indoor Garden</h2>
</div>
</div>
</div>
</div>
<!-- Modals -->
<div id="modal1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Basys3 Digital Signal Processing Module</h2>
<p>Details incoming...</p>
<a href="https://github.com/zzaid17" target="_blank" aria-label="GitHub Repository">
<i class="fa-brands fa-github"></i></a>
</div>
</div>
<div id="modal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Personal Portfolio Website</h2>
<p>This personal portfolio website showcases my skills, projects, and experience. It was created using HTML, CSS, and JavaScript for a
responsive and interactive design on the front end, and integrates Firebase on the back end to handle incoming data from the contact
form. I maintained a GitHub repository for version control and deployed the project on GitHub pages, connecting the site to a Cloudflare
domain.</p><br>
<a href="https://github.com/zzaid17/zzaid17.github.io" target="_blank" aria-label="GitHub Repository">
<i class="fa-brands fa-github"></i></a>
</div>
</div>
<div id="modal3" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Exoplanet Detection</h2>
<p>Details incoming...</p>
<a href="https://github.com/zzaid17" target="_blank" aria-label="GitHub Repository">
<i class="fa-brands fa-github"></i></a>
</div>
</div>
<div id="modal4" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Retro Video Game Console</h2>
<p>For my final project for ENGG 200, an introductory engineering design and entrepreneurship course, I collaborated with a team of four to
design and build a retro video game console with a built-in reaction time game and F1-themed wheel. The game prompts the player to turn the
console up, down, left, or right within the given time limit. If this is done enough times, the player advances to the next level. Each
level requires faster reaction times for the player to avoid getting eliminated. The console uses an MPU6050 gyroscope, for which I
developed custom Arduino code in C++ and also helped set up the required circuits. Our group pitched the design to students and TAs, and I
authored a comprehensive technical report on the project, for which we received a grade of 100%.</p>
<a href="https://github.com/zzaid17" target="_blank" aria-label="GitHub Repository">
<i class="fa-brands fa-github"></i></a>
</div>
</div>
<div id="modal5" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Automated Indoor Garden</h2>
<p>Details about this project...</p>
<a href="https://github.com/zzaid17" target="_blank" aria-label="GitHub Repository">
<i class="fa-brands fa-github"></i></a>
</div>
</div>
<!-- Contact -->
<div id="contact">
<h1 class ="sub-title">Contact Me</h1>
<!-- Success and Error Message -->
<div id="success-message" class="hidden">Form submitted successfully!</div>
<div id="error-message" class="hidden">Error submitting form. Please try again later.</div>
<div class="contact">
<form action="" id="contactForm">
<input type="text" id="name" placeholder="Your Name" required>
<input type="email" id="email" placeholder="Your Email" required>
<textarea id="message" rows="6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
</div>
</div>
<script type="module" src="contactForm.js"></script>
<script type="module" src="popup.js"></script>
</body>
</html>