-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathAbout.html
More file actions
289 lines (269 loc) · 16.9 KB
/
About.html
File metadata and controls
289 lines (269 loc) · 16.9 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About</title>
<link rel="stylesheet" href="Styles\reset.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<!--My cutsom css-->
<link rel="stylesheet" href="Styles\style.css">
</head>
<body class="text-bg-dark p-3">
<header class="title-section">
<div>
<br>
<div class="container-fluid p-0">
<header class="header-bg d-flex align-items-center justify-content-center">
<h1 class="text-white fw-bold">About Me - Hassan ElGhayaty</h1>
</header>
</div>
<nav class="navbar navbar-expand-sm" style="background-color: #43472387;">
<div class="container-fluid">
<!-- Brand (optional) -->
<!-- <a class="navbar-brand" href="#">Brand</a> -->
<!-- Toggler button for small screens -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<!-- Dropdown for Projects -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="projectsMenu" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Projects
</a>
<ul class="dropdown-menu" aria-labelledby="projectsMenu">
<li><a class="dropdown-item" href="Soft_Projects.html">Software Projects</a></li>
<li><a class="dropdown-item" href="Manu_Projects.html">Manufacturing Engineering Projects</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="About.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="FunStuff.html">Fun Stuff</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<section id="main-aboutme" class="mt-5">
<div class="container-fluid px-5">
<div class="row align-items-start gy-4">
<!-- Text Column -->
<div class="col-md-6">
<h2 class="mb-4 text-start ps-3">Personal Branding Statement</h2>
<p class="p-3">
I use my Manufacturing Engineering and Software Development skills for revolutionizing technology in the engineering industry. Known for achieving the number 1 spot in the previous bootcamp I participated in, I am excited to showcase my ability to utilize my hands-on skills in a competitive and high-paced workspace to create initiatives in advancing technology in the engineering industry. Using versatility, I adapt to diverse technical challenges and deliver scalable solutions, by providing strong development skills and innovative ideas to the field. Through my determination, I believe in creating a meaningful impact when I serve teams building transformative technology.
</p>
</div>
<!-- Image Column -->
<div class="col-md-6 text-center">
<img src="Images\About Me Images\main photo.jpg" alt="Personal Branding" class="img-fluid rounded w-75 rounded-5">
</div>
</div>
</div>
</section>
<br>
<hr>
<!-- Unique Value Proposition & Top Skills Section -->
<section id="value-skills" class="mt-5 text-white">
<div class="container-fluid px-5">
<div class="row gy-4 justify-content-center">
<!-- Value Proposition -->
<div class="col-lg-6">
<div class="p-4 bg-dark rounded shadow-lg h-100">
<h2 class="text-center display-5 fw-bold mb-3">Unique Value Proposition</h2>
<p class="text-center fs-5">
I leverage software development skills, coupled with manufacturing knowledge,
to design innovative, scalable solutions that drive technological advancement
in the engineering industry.
</p>
</div>
</div>
<!-- Top Skills -->
<div class="col-lg-6">
<div class="p-4 bg-dark rounded shadow-lg h-100">
<h2 class="text-center display-5 fw-bold mb-3">Top Skills</h2>
<ul class="list-unstyled fs-5 text-center mb-0">
<li>• Data Experience</li>
<li>• Backend Software Development</li>
<li>• Manufacturing Engineering</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Highlighted Projects Section -->
<section id="highlighted-projects" class="mt-5 text-white">
<div class="container-fluid px-5">
<div class="row gy-4">
<div class="col-12">
<h2 class="mb-4 text-center ps-3 display-5 fw-bold">Highlighted Projects</h2>
</div>
</div>
<div class="row gy-4">
<!-- Project 1 -->
<div class="col-md-4">
<div class="card bg-dark text-white border-light shadow-lg h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-3 text-center text-warning fw-bold">Polaris Autonomous Sailboat</h5>
<p class="card-text"><strong>Skills:</strong> C++, Docker, MongoDB, Git, REST APIs, VS Code</p>
<p class="card-text"><strong>Date:</strong> Jan 2024 – Present</p>
<p class="card-text"><strong>Collaborators:</strong> UBC Sailbot Software Team</p>
<p class="card-text"><strong>Learnings:</strong> Real-time backend systems, satellite communication, modular C++ architecture, Protobuf, Git workflow improvements.</p>
<p class="card-text mt-auto"><strong>Accomplishments:</strong> Remote transceiver enabling smooth server-to-boat communication, improved data integrity, enhanced reliability, real-world autonomous vessel contribution.</p>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="col-md-4">
<div class="card bg-dark text-white border-light shadow-lg h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-3 text-center text-warning fw-bold">Cellular Automata Biological Simulation</h5>
<p class="card-text"><strong>Skills:</strong> Java, OOP, algorithms, testing frameworks</p>
<p class="card-text"><strong>Date:</strong> Sep 2023 – Dec 2023</p>
<p class="card-text"><strong>Collaborators:</strong> UBC Biomedical Engineering Bootcamp Team</p>
<p class="card-text"><strong>Learnings:</strong> Modular simulation design, test-driven development, computational modeling of biological processes.</p>
<p class="card-text mt-auto"><strong>Accomplishments:</strong> #1 bootcamp ranking, fully functional cellular simulation, extensive test execution, rapid algorithmic learning demonstrated.</p>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="col-md-4">
<div class="card bg-dark text-white border-light shadow-lg h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-3 text-center text-warning fw-bold">Thunderdrive RC Car</h5>
<p class="card-text"><strong>Skills:</strong> SolidWorks, machining, thermoforming, injection molding, robotics, operations analysis</p>
<p class="card-text"><strong>Date:</strong> September, 2023 – April, 2024</p>
<p class="card-text"><strong>Collaborators:</strong> UBC Manufacturing Engineering Instructors & Project Teams</p>
<p class="card-text"><strong>Learnings:</strong> Manufacturable component design, hands-on fabrication, root-cause analysis, workflow optimization.</p>
<p class="card-text mt-auto"><strong>Accomplishments:</strong> Multiple components designed & manufactured including RC car shell, professional-grade fabrication completed, operational efficiency improvements in case studies.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Summary & Digital Presence Section -->
<section id="portfolio-summary" class="mt-5 text-white">
<div class="container-fluid px-5">
<div class="row gy-4">
<div class="col-12">
<h2 class="mb-4 text-center ps-3 display-5 fw-bold">Portfolio Summary & Digital Presence</h2>
</div>
<!-- Summary Box -->
<div class="col-md-6">
<div class="p-4 bg-dark rounded shadow-lg h-100">
<h4 class="text-center mb-3">What My Portfolio Reflects</h4>
<p class="fs-5 text-start">
My portfolio demonstrates a multidisciplinary engineer comfortable with hands-on manufacturing processes
and advanced software development. It shows a consistent pattern of solving complex problems,
contributing to collaborative engineering teams, and building reliable systems.
It highlights both technical depth and adaptability, ranging from autonomous robotics to data-driven manufacturing improvements.
</p>
</div>
</div>
<!-- Digital Presence Box -->
<div class="col-md-6">
<div class="p-4 bg-dark rounded shadow-lg h-100">
<h4 class="text-center mb-3">Digital Presence & Sharing</h4>
<ul class="list-unstyled fs-5">
<li><strong>Primary Social Media:</strong> LinkedIn</li>
<li><strong>Technical Presence:</strong> GitHub</li>
<li><strong>Preferred Expression:</strong> Text + Visual Demonstrations</li>
<li><strong>Layout Style:</strong> Simple, clean, professional structure with modern visuals</li>
<li><strong>Portfolio Must-Haves:</strong> Clear introduction, project sections with images, GitHub links, visual demos, About Me section, Contact page, responsive design</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<br>
<hr>
<section id="about-activities" class="mt-5">
<div class="container">
<h2 class="mb-5 text-center">A Bit More About Me</h2>
<div class="row mb-4">
<div class="col-md-6 text-start">
<p>
Other than academic involvements and passion for industry, I love being active by
<strong>playing sports and staying fit</strong>. Here are the following sports/activities that I enjoy participating in:
</p>
<ul style="list-style-type: disc; padding-left: 1.5rem;">
<li>Football (Soccer)</li>
<li>Gym</li>
<li>Hiking</li>
<li>Camping</li>
</ul>
</div>
<div class="col-md-6 text-center">
<img src="Images\About Me Images\About Pic.png"
class="img-fluid rounded"
alt="Sports activities illustration"
style="max-height: 400px; max-width: 500px;">
</div>
</div>
<div class="row mb-4 mt-5 align-items-center">
<div class="col-md-4 text-center">
<img src="Images/About Me Images/IMG_3270.jpg"
class="img-fluid rounded"
alt="Sports activities illustration"
style="max-height: 500px; width: 100%;">
</div>
<div class="col-md-8">
<p>
I strongly believe that, as they say, <strong>health is wealth</strong>, so I use that as my motivation to remain healthy and active.
It helps me maintain my current wellbeing while also being very busy working/studying.
</p>
<p>
<strong>Work/Life Balance</strong> is very crucial in our life, and it is critical that we not just focus on one of them as each path on its own could negatively affect the other.
It has been proven that healthy/active employees are more productive and have significantly higher morale when it comes to performing at companies, which I believe is very inspiring.
</p>
</div>
</div>
</div>
<br>
<h1 class="mt-5 text-center"> Check out my most recent hike views!</h1>
<div class="row mb-4">
<div class="col-md-6 text-center">
<img src="Images/About Me Images/IMG_2930.jpg"
class="img-fluid rounded"
alt="Sports activities illustration"
style="max-height: 380px; width: 80%;">
</div>
<div class="col-md-6 text-center">
<img src="Images/About Me Images/IMG_2933.jpg"
class="img-fluid rounded"
alt="Sports activities illustration"
style="max-height: 380px; width: 90%;">
</div>
</div>
</section>
<footer class="site-footer text-center text-white">
<div class="container py-4">
<p>© 2025 Hassan ElGhayaty. All rights reserved.</p>
<p>
<a href="index.html" class="text-white">Home</a> |
<a href="About.html" class="text-white">About</a> |
<a href="Contact.html" class="text-white">Contact</a>
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>