-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
360 lines (302 loc) · 16.8 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
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
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Ameer Jamal | Software Engineer</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description"
content=" Welcome to my software engineering portfolio! Here, you can view my latest projects and experience in software engineering.">
<meta name="keywords"
content="software engineer, software development, web development, full-stack development, programming, coding, projects, portfolio, resume, Ameer Jamal, Ameer">
<link rel="apple-touch-icon" href="/images/favicon_io/apple-touch-icon.png">
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" type="image/png" href="/images/android-chrome-192x192.png" sizes="96x96">
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="logo">
<!-- <span class="fas fa-laptop-code large fa-2x"></span> -->
<div class="logoPadder" style="padding-top: 5.5%;">
<img class="logoImg" src="images/Aj logo Circle.webp" alt="">
</div>
</div>
<div class="content">
<div class="inner">
<h1>Ameer Jamal</h1>
<p style="font-size: 1.2rem;margin: 0px 0px 0.1rem;">Software Engineer.</p>
<div class="subIntro">
<p>Revolutionizing the digital landscape
with a passion for crafting <br>efficient,
Creative, and user-friendly software solutions</p>
</div>
</div>
</div>
<nav>
<ul>
<li><a href="#intro">About Me</a></li>
<li><a href="#work">Projects</a></li>
<li><a href="#about">Education</a></li>
<li><a href="#contact">Contact Me</a></li>
<!--<li><a href="#elements">Elements</a></li>-->
</ul>
</nav>
</header>
<!-- Header Ends Here -->
<!-- Main -->
<div id="main">
<!-- Intro -->
<article id="intro">
<h2 class="major">Intro</h2>
<span class="image main">
<!-- This is for displaying separate images depending on screen size (mobile or not) -->
<picture class="image main">
<source srcset="/images/aboutMeBanner.webp" media="(min-width: 30em)">
<img loading="lazy" src="/images/Welcome.webp" media="(min-width: 10em)" height="auto" height="400"
decoding="async">
</picture>
</span>
<p>Welcome to my portfolio, a digital showcase of my passion for software engineering! I'm a
highly motivated engineer with a BSc degree in software engineering,
and I'm always looking for new ways to expand my knowledge and make a positive impact on the world.
<br>
<br>
I have a proven track record of success, with several projects under my belt that demonstrate my
technical skills and attention to detail. My ultimate goal is to become a tech lead, where I can use
my experience to guide and mentor others while supporting the success of
my company. So come on in, take a look around, and let's explore the world of software engineering
together!
</p>
</article>
<!-- Work -->
<article id="work">
<h2 class="major">Projects </h2>
<h3 class="major">ClassCloud</h3>
<span class="image main"><img src="images/ClassCloud-poster.webp" alt="" /></span>
<p>ClassCloud is an innovative educational website designed to facilitate
collaborative learning for younger children and parents. Through interactive features,
including educational video resources and short quizzes, ClassCloud empowers children to gain a
deeper understanding of a wide range of topics, while simultaneously providing parents with valuable
insights into how much time their children spend actively studying.
<br>
With ClassCloud, learning is not just a solitary activity, but rather an immersive and enjoyable
experience that can be shared by parents and children alike.
</p>
<p>This was developed using JavaScript, PHP, CSS, and HTML and runs on a
MySQL database utilizing <a href="https://www.usbwebserver.net/webserver/"
target="_blank">USBWEBSERVER</a> for enhanced portability.Additionally, I utilized the powerful
testing capabilities of Python and Selenium for faster and more efficient testing.
<br>
In order to provide full transparency and promote
best practices, I have created a <a
href="https://docs.google.com/document/d/1XHldCfklCUGSwFDmXfx0vxNYQR1D_xEq/edit?usp=sharing&ouid=113659250904504719311&rtpof=true&sd=true"
target="_blank">
comprehensive technical documentation </a> totaling 165 pages. This
documentation includes critical components such as requirement analysis (SRS), UML diagrams,
Software Design Specification (SDD), and a testing document, among others.
<br>
As a testament to its quality and innovation, the project received an impressive 90% grade upon
completion. For those interested in exploring the project in greater detail, the code is available
for
<a href="https://github.com/Ameer-Jamal/class-cloud-repo" target="_blank"> review here</a>
</p>
<img class="image main" loading="lazy" style="height: 1330%;width:100%;" src="images/Animation1.webp"
decoding="async" alt="An animation of the project should be here...">
<p>This website features a sleek and intuitive landing page, complete with user-friendly login and
signup interfaces for both parents and students. Upon authentication, students are seamlessly
redirected to the educational portal, while parents are directed to the parent portal and admins to
the admin page.
<br><br>
To ensure that the website is tailored to meet the unique needs of its users, students are
redirected to different pages based on their age, with a particular focus on simple topics that are
easily digestible for a younger demographic. This approach reflects our unwavering commitment to
providing a high-quality and accessible educational experience for all users.
</p>
<img class="image main" loading="lazy"alt="An animation of the project should be here..." style="height: 130%;width:100%;" src="images/Animation2.webp"
decoding="async">
<p> Our educational platform offers a comprehensive programming course for seventh-grade
students. This page utilizes the user-friendly and convenient <a
href="https://pyscript.net/">PyScript's</a>
API, which allows real-time Python
interpreter, allowing students to seamlessly follow educational programming content. With PyScript,
students can engagingly practice their programming skills, offering a
unique educational experience.
<br><br>
In addition to our programming course, our website features an innovative and intuitive sidebar with
a built-in YouTube search. This feature was inspired by the realization that users frequently turn
to YouTube to gain a deeper understanding of various topics. With our built-in YouTube search, users
can efficiently and conveniently search for videos to fix or understand errors, streamlining the
learning process and promoting a more effective and immersive educational experience.
</p>
<img class="image main" loading="lazy"alt="An animation of the project should be here..." style="height: 130%;width:100%;" src="images/Animation6parent.webp" decoding="async">
<p>The parent portal offers a user-friendly interface that provides valuable insights into the
performance and learning habits of their child. telling us information on our child-like
what their best and worst grades are,
and more importantly how much time have they actually been studying on the website.
<br><br>
This feature is
made possible through the implementation of an asynchronous JavaScript timer, which is highly
intelligent and can detect when a child is actively engaged in a learning session. The timer checks
whether the student has their mouse on the tab and is actively participating in a course, and then
promptly sends this data back to the database for real-time analysis. This allows parents to take a
quick and comprehensive look at their child's study habits, providing them with an effective
tool for tracking their child's study time and making informed educational decisions.
</p>
<!-- ------------------------------------------------------------------- -->
<br>
<h3 class="major"> Unbeatable Tic-Tac-Toe</h3>
<img class="image main" loading="lazy"alt="An animation of the project should be here..." style="height: 130%;width:100%;" src="images/Animation5AI.webp" decoding="async">
<p>This project is the well-known Tic-Tac-Toe pen and paper-game with an AI utilizing the min-max
algorithm to make it impossible to defeat
<br><br>
meaning you can either end in a tie or the AI will win, the reason for this is that the minmax
implementation works by exploring all possible moves and counter-moves, building a game tree of all
possible future states of the game. At each level of the tree, it alternates between maximizing the
player's score and minimizing the opponent's score.
The algorithm then chooses the move that leads to the best possible outcome for the player.
<br><br>
By leveraging the p5.js library, this website is able to render the game board in a visually
pleasing manner and enable user interaction through the drawing of X's and O's, providing a highly
effective solution for this type of project.
For more information about how this works, you can check out my <a
href="https://docs.google.com/document/d/1Oyr5bGgGdiYDZ7FreKAV4JlVQOVoDJRo/edit?usp=sharing&ouid=113659250904504719311&rtpof=true&sd=true"
target="_blank"> documentation here</a> or the<a
href="https://github.com/Ameer-Jamal/minmax-TicTactoe" target="_blank"> code here</a>
<br>The home page of the website boasts a visually unique design. It features a dynamic
background GIF that seamlessly moves behind the large, transparent text, creating an eye-catching
and
captivating aesthetic.
</p>
<!-- ------------------------------------------------------------------- -->
<br>
<h3 class="major">Angular Project</h3>
<img class="image main" loading="lazy"alt="An animation of the project should be here..." style="height: 130%;width:100%;" src="images/Animation4angular.webp"
decoding="async">
<p>During my internship, I had the opportunity to work on an exciting Angular project that provided me
with an in-depth understanding of Angular and Angular Material. The project involved the development
of custom components and API integration to retrieve survey data, which was then displayed based on
its categorization as either closed, published, or expired.
To enhance the user experience, I leveraged Angular Material to create visually appealing and highly
functional tabs that provided users with the ability to view all surveys at a glance. Overall, this
project was an excellent opportunity for me to further develop my Angular skills and enhance my
knowledge of web development best practices.</p>
<!-- ------------------------------------------------------------------- -->
<br>
<h3 class="major">Active Contributor</h3>
<img class="image main" loading="lazy"alt="An img should be here..." style="height: 130%;width:100%;" src="images/grepper.webp">
<p>Grepper is an online community-driven platform that provides developers with a vast collection of
code snippets and solutions to coding problems. As a passionate developer and a member of the
Grepper community, I am thrilled to be part of this platform that is dedicated to helping developers
of all skill levels to overcome coding obstacles.
<br><br>
Through my contributions on Grepper, I have had the opportunity to help over 3000 developers by
providing them with reliable and efficient solutions to their coding problems. It has been
incredibly fulfilling to see the impact of my contributions and the appreciation from the community.
I have also been able to enhance my problem-solving skills and deepen my understanding of coding
best practices by reviewing and improving the code of other developers.
</p>
</article>
<!-- About -->
<article id="about">
<h2 class="major">About</h2>
<span class="image main"><img loading="lazy"alt="An Banner should be here..." src="images/Education-Banner.webp" style="height: 130%; " alt="" /></span>
<p>My educational background comprises of a Bachelor's degree in Software Engineering earned from the
esteemed Princess Sumaya University for Technology. I have acquired hands-on experience in HTML5,
CSS, and JavaScript, and further boosted my skill set with a certification in Scrum methodologies. I
am a self-motivated individual who is always eager to learn and grow, and I have taken advantage of
online learning opportunities by taking multiple courses on Udemy. My quest for knowledge has led
me to complete an internship as a web developer, where I had the opportunity to work with Angular
and gain practical experience in the field. My education is a representation of my dedication to
technology and my commitment to continuous learning.
<br>
<br>
I enjoy applying my skills to the real world as I have taken advantage of Python and Selenium
to build automation projects that improve my efficiency.
My expertise extends beyond just front-end development and I have utilized PHP for
back-end development in my HTML, and CSS projects, showcasing my full-stack capabilities. My
projects
and attention to detail
are a testament to my problem-solving skills and ability to find creative solutions to enhance my
work. Overall, my education, experience, and projects demonstrate my passion for
technology and my drive to continuously improve and expand my skill set.
</p>
</article>
<!-- Contact -->
<article id="contact" style="zoom: 1;">
<h2 class="major">REACH OUT</h2>
<form action="https://formspree.io/f/xnqypvyy" method="POST" id="contactForm">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="email" name="email">
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="button" onclick="submitAndResetForm()" value="Send Message" class="primary" />
</li>
<li><input type="reset" value="Reset" /></li>
</ul>
<ul class="icons">
<h2 class="">Socials</h2>
<li><a href="https://www.linkedin.com/in/ameer-jamal/" class="icon brands fa-linkedin "><span
class="label">linkedin</span></a></li>
<li><a href="https://github.com/Ameer-Jamal/" class="icon brands fa-github"><span
class="label">GitHub</span></a></li>
<li><a href="#CV" class="icon brands" style="font-weight:800 ;">cv<span
class="label">CV</span></a></li>
</ul>
</form>
</article>
</article>
<!-- Contact -->
<article id="CV" style="zoom: 1;">
<h2 class="major">CV</h2>
<!-- <iframe src="" >
</iframe> -->
<object data='assets/Web-CV.pdf#zoom=FitH' style="height:55rem; width:100%;">
<p>Oops! Looks like Your browser doesn't support PDFs!</p>
<p><strong><a href="assets/Web-CV.pdf" download>Download Instead</a></strong></p>
</object>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="contact">
<ul class="icons">
<li><a href="https://www.linkedin.com/in/ameer-jamal/" class="icon brands fa-linkedin "><span
class="label">Instagram</span></a></li>
<li><a href="https://github.com/Ameer-Jamal/" class="icon brands fa-github"><span
class="label">GitHub</span></a></li>
<li>
<a href="mailto: [email protected]" class="icon brands">
<span class="icon fa-envelope"></span>
</a>
</li>
</ul>
</p>
<p class="contact small">CCA 3.0 license</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>