-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
457 lines (421 loc) · 22.9 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
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!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>Doha Hmeid | Front-end Developer</title>
<meta name="author" content="Doha Hmeid">
<meta name="keywords"
content="Doha Hmeid, dohmeid, Front-end, developer, Software engineer, web developer, HTML, CSS, javaScript, React js, portfolio">
<meta name="description"
content="Hey, I'm Doha Hmeid, a computer systems engineering graduate and front end developer.">
<link rel="icon" type="image/png" sizes="16x16 32x32 48x48" href="assets/images/icon/icon.png">
<link rel="stylesheet" type="text/css" href="./assets/css/all.min.css">
</head>
<body>
<!-- Splash Screen-->
<div class="splash-screen" id="splash-screen">
<p>Loading...</p>
<div class="eyes"></div>
</div>
<!-- the circle pointer around the curosr -->
<div class="cursor-circle"></div>
<!-- the up button - redirects to home page -->
<a href="#home-page" class="up-button" aria-label="Go to home page" tabindex="9">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</a>
<!-- fixed background containing multiple moving circles -->
<div class="circles-background">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- header, includes the navbar -->
<header id="nav-header">
<div class="logo"><a id="logo" href="#home-page" aria-label="Go to home page" tabindex="0"> <DOHA
HMEID/></a></div>
<nav>
<input type="checkbox" class="menu-toggle" id="menu-toggle" name="menu-toggle" value="nav menu toggle"
tabindex="1">
<label class="menu-label" for="menu-toggle"><span class='menu-button'></span></label>
<ul>
<li><a href="#home-page" class="current-page" aria-label="Go to home page" tabindex="2">Home</a></li>
<li><a href="#about-page" aria-label="Go to about page" tabindex="3">About</a></li>
<li><a href="#skills-page" aria-label="Go to skills page" tabindex="4">Skills</a></li>
<li><a href="#projects-page" aria-label="Go to projects page" tabindex="5">Projects</a></li>
<li><a href="#contact-page" aria-label="Go to contact page" tabindex="6">Contact</a></li>
</ul>
</nav>
</header>
<!-- main includes the main pages for the website -->
<main>
<!-- home page section -->
<section class="home-page" id="home-page">
<h1>DOHA HMEID</h1>
<div class="description">
<h2>Computer Systems Engineer | Front-end Developer | Tech Enthusiast</h2>
<p>Passionate about innovation and lifelong learning</p>
</div>
<div class="buttons-container">
<a href="#contact-page" class="contact-btn" aria-label="Go to contact page" tabindex="7">Contact Me</a>
<a href="./assets/cv/Doha_Hmeid.pdf" class="cv-btn" aria-label="Download CV" tabindex="8"
download>Download CV</a>
</div>
</section>
<!-- About section -->
<section class="about-page" id="about-page">
<div class="border-div">
<div class="img-container"><img src="assets/images/doha/doha.jpg" alt="Doha Profile Picture"></div>
<article>
<h2>Who is Doha?</h2>
<p>
Greetings! I'm Doha Hmeid, a <mark>Computer Systems Engineering graduate</mark> from Birzeit
University, where I
graduated with honors.
</p>
<p>
Specializing in <mark>front-end development</mark>, I excel on creating dynamic and
high-performance web
applications. Proficient in React.js, JavaScript, HTML5, and CSS, I transform design concepts
into
interactive digital experiences.
</p>
<p>
I'm eager to find opportunities in the ever-evolving field of software development, where I can
continue to hone my skills and address real-world challenges in a professional and collaborative
environment.
</p>
</article>
</div>
</section>
<!-- skills section -->
<section class="skills-page" id="skills-page">
<h2><i class="far fa-star" aria-hidden="true"></i>Skills<i class="far fa-star" aria-hidden="true"></i>
</h2>
<h3>
Below are some of the skills I've developed during my university studies and software development
journey.</h3>
<ul>
<li><i class="fab fa-html5" aria-hidden="true"></i>HTML</li>
<li><i class="fab fa-css3-alt"></i>CSS</li>
<li><i class="fab fa-js-square"></i>JavaScript</li>
<li><i class="devicon-typescript-plain"></i>TypeScript</li>
<li><i class="fab fa-react"></i>React js</li>
<li><i class="devicon-git-plain"></i>GIT</li>
<li><i class="fab fa-github"></i>Github</li>
<li>Jest</li>
<li><i class="devicon-cypressio-plain"></i>Cypress</li>
<li><i class="devicon-java-plain"></i>Java</li>
<li><i class="devicon-c-plain"></i>C</li>
<li><i class="devicon-python-plain"></i>Python</li>
<li><i class="devicon-azuresqldatabase-plain"></i>SQL</li>
<li><i class="devicon-mysql-original"></i>MySQL</li>
<li><i class="devicon-mongodb-plain-wordmark"></i>MonogoDB</li>
<li><i class="devicon-express-original-wordmark"></i>Express js</li>
<li><i class="devicon-nodejs-plain-wordmark"></i>Node js</li>
<li>RESTful API</li>
<li><i class="devicon-figma-plain"></i>Figma</li>
<li><i class="devicon-vscode-plain"></i>VS code</li>
<li><i class="devicon-android-plain"></i>Android Studio</li>
<li><i class="devicon-firebase-plain"></i>Firebase</li>
<li><i class="fab fa-linux"></i>Linux</li>
</ul>
</section>
<!-- projects section -->
<section class="projects-page" id="projects-page">
<h2><i class="fas fa-code" aria-hidden="true"></i>My Projects<i class="fas fa-code" aria-hidden="true"></i>
</h2>
<ul class="projects">
<li class="project">
<img src="assets/images/projects/travelhub.png" alt="TravelHub project">
<h3 class="project-title">TravelHub</h3>
<ul class="topics">
<li>React js</li>
<li>TypeScript</li>
<li>Jest</li>
<li>React testing library</li>
<li>Axios</li>
</ul>
<p class="project-text">
TravelHub is an all-in-one travel booking platform, aimed at delivering a seamless and
user-friendly experience for finding and booking accommodations.It
boasts an easy-to-navigate interface with powerful features that serve both travelers and
administrators.
</p>
<div class="projectsButtons">
<a class="code-link" href="https://github.com/dohmeid/travel-accommodation-booking-platform"
target="_blank" aria-label="Go to the project code of TravelHub" tabindex="14">View</a>
<a class="code-link" href="https://travelhub-dohmeid.netlify.app/" target="_blank"
aria-label="Go to the live project of TravelHub" tabindex="14">Live</a>
</div>
</li>
<li class="project">
<img src="assets/images/projects/note-keeper.png" alt="Note Keeper website project">
<h3 class="project-title">Note Keeper</h3>
<ul class="topics">
<li>React js</li>
<li>JavaScript</li>
<li>MonogoDB</li>
<li>Node.js</li>
<li>RESTful Api</li>
<li>Express.js</li>
<li>NPM</li>
</ul>
<p class="project-text">
This project creates a note-keeping application that performs CRUD operations on notes. It
consists of a frontend (FE) component that complements the backend (BE) part of the website.
</p>
<div class="projectsButtons">
<a class="code-link" href="https://github.com/dohmeid/my-note-keeper-react" target="_blank"
aria-label="Go to the project code Note Keeper" tabindex="12">FrontEnd</a>
<a class="code-link" href="https://github.com/dohmeid/my-note-keeper" target="_blank"
aria-label="Go to the live project of Twitter profile mock-up" tabindex="12">BackEnd</a>
</div>
</li>
<li class="project">
<img src="assets/images/projects/shopping-list-project.png" alt="shopping list project">
<h3 class="project-title">shopping list</h3>
<ul class="topics">
<li>React js</li>
<li>CRUD operations</li>
<li>JavaScript</li>
</ul>
<p class="project-text">
This project designs and implements a shopping cart interface with the following features:
Product Grid, Add to Cart, Cart Details, Item Removal, Total Amount, Checkout
</p>
<div class="projectsButtons">
<a class="code-link" href="https://github.com/dohmeid/shopping-list" target="_blank"
aria-label="Go to the project code of shopping list" tabindex="14">View</a>
<a class="code-link" href="https://shopping-list-makeup-store.netlify.app/" target="_blank"
aria-label="Go to the live project of shopping list" tabindex="14">Live</a>
</div>
</li>
<li class="project">
<img src="assets/images/projects/twitter-mock-up.png" alt="Twitter profile mock-up">
<h3 class="project-title">Twitter profile mock-up</h3>
<ul class="topics">
<li>React</li>
<li>JavaScript</li>
<li>Clone</li>
</ul>
<p class="project-text">
This project implements a simple mockup for a Twitter profile using ReactJS. (note that this
mock-up only represents the design and does not include any functionalities).
</p>
<div class="projectsButtons">
<a class="code-link" href="https://github.com/dohmeid/twitter-profile-clone" target="_blank"
aria-label="Go to the project code of the Twitter profile mock-up" tabindex="12">View</a>
<a class="code-link" href="https://twitter-mock-up.netlify.app/" target="_blank"
aria-label="Go to the live project of Twitter profile mock-up" tabindex="12">Live</a>
</div>
</li>
<li class="project">
<img src="assets/images/projects/todo-list-project.png" alt="todo list project">
<h3 class="project-title">FullStack todo list</h3>
<ul class="topics">
<li>React js</li>
<li>TypeScript</li>
<li>MonogoDB</li>
<li>Node.js</li>
<li>Express.js</li>
<li>NPM</li>
</ul>
<p class="project-text">
This project creates a TODO List web application with various features to manage tasks
efficiently. The web app performs CRUD operations on todos' list. It consists of a
frontend component that complements the backend part of the website.
</p>
<a class="code-link" href="https://github.com/dohmeid/fullStack-todoList-typeScript" target="_blank"
aria-label="Go to the project code of FullStack todo list" tabindex="15">View</a>
</li>
<li class="project">
<img src="assets/images/projects/secret-code-game.png" alt="guess the secret code game project">
<h3 class="project-title">guess secret code</h3>
<ul class="topics">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React js</li>
</ul>
<p class="project-text">
An online game made using react framework. When the user starts the game, a secret code is
generated.
The player has 8 chances for guessing the code.
</p>
<a class="code-link" href="https://github.com/dohmeid/Task2" target="_blank"
aria-label="Go to the project code of guess the secret code game" tabindex="10">View</a>
</li>
<li class="project">
<img src="assets/images/projects/events-management-system.png"
alt="events management system react project">
<h3 class="project-title">events management system</h3>
<ul class="topics">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React js</li>
<li>Cypress</li>
<li>Firebase</li>
</ul>
<p class="project-text">
A website created using react to manage events. The user can add new events, edit curret events,
search through events list and sort them based on name and date.
</p>
<a class="code-link" href="https://github.com/dohmeid/Task1" target="_blank"
aria-label="Go to the project code of the events management system" tabindex="11">View</a>
</li>
<li class="project">
<img src="assets/images/projects/training-center-system.png"
alt="training center system android mobile app">
<h3 class="project-title">Training Center System</h3>
<ul class="topics">
<li>Java</li>
<li>Android Studio</li>
<li>Mobile App</li>
</ul>
<p class="project-text">
An android mobile application that helps a training center in managing course offering,
registration, and admission process.
</p>
<a class="code-link" href="https://github.com/dohmeid/TrainingCenterProject" target="_blank"
aria-label="Go to the project code of the training center system android mobile app"
tabindex="12">View</a>
</li>
<li class="project">
<img src="assets/images/projects/blood-donation-system.png"
alt="blood donation management system project">
<h3 class="project-title">blood donation system</h3>
<ul class="topics">
<li>Java</li>
<li>SQL</li>
<li>MySQL</li>
<li>Database System</li>
</ul>
<p class="project-text">
A database system that provides a simple and effective way to manage blood donation operations.
Made using java and MySQL.
</p>
<a class="code-link" href="https://github.com/dohmeid/Blood-Donation-System" target="_blank"
aria-label="Go to the project code of the blood donation management system"
tabindex="13">View</a>
</li>
</ul>
</section>
<!-- Contact info section -->
<section class="contact-page" id="contact-page">
<h2>Get in Touch</h2>
<div class="contact-info-container">
<form method="post" action="#">
<div class="name-container row">
<label for="name">FULL NAME</label>
<input type="text" class="name" id="name" name="name" required tabindex="16">
</div>
<div class="email-container row">
<label for="email">EMAIL ADDRESS</label>
<input type="email" class="email" id="email" name="email" required tabindex="17">
</div>
<div class="subject-container row">
<label for="subject">SUBJECT</label>
<input type="text" class="subject" id="subject" name="subject" required tabindex="18">
</div>
<div class="message-container row">
<label for="message">MESSAGE</label>
<textarea class="message" id="message" rows="8" name="message" required
tabindex="19"></textarea>
</div>
<input type="submit" value="Send Message" tabindex="20">
<input type="reset" value="Reset" tabindex="21">
</form>
<article>
<h3>Contact Info</h3>
<p> Hello there! If you have any questions, comments, or just want to connect, I'm all ears!
Feel free to contact me anytime, and I'll get back to you as soon as I can.
</p>
<ul class="info-list">
<li>
<span><i class="fas fa-map-marker-alt" aria-hidden="true"></i></span>
<div class="info-container">
<h4>Location</h4>
<p>Ramallah, Palestine</p>
</div>
</li>
<li>
<span><i class="fa fa-envelope" aria-hidden="true"></i></span>
<div class="info-container">
<h4>Email</h4>
<p>doha.hmeid@gmail.com</p>
</div>
</li>
<li>
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<div class="info-container">
<h4>Mobile Number</h4>
<p>+(970) 59-802-5104</p>
</div>
</li>
<li>
<span><i class="fa fa-globe" aria-hidden="true"></i></span>
<div class="info-container">
<h4>Languages</h4>
<p>English + Arabic</p>
</div>
</li>
</ul>
<ul class="social-media">
<li>
<a href="https://www.linkedin.com/in/dohmeid/" target="_blank" aria-label="Go to LinkedIn"
tabindex="22">
<span class="tooltip">LinkedIn</span>
<span><i class="fab fa-linkedin-in" aria-hidden="true"></i></span>
</a>
</li>
<li>
<a href="https://github.com/dohmeid" target="_blank" aria-label="Go to GitHub"
tabindex="23">
<span class="tooltip">GitHub</span>
<span><i class="fab fa-github-alt" aria-hidden="true"></i></span>
</a>
</li>
<li>
<a href="https://discord.com/users/953030181692530729" target="_blank"
aria-label="Go to discord" tabindex="24">
<span class="tooltip">Discord</span>
<span><i class="fab fa-discord" aria-hidden="true"></i></span>
</a>
</li>
<li>
<a href="https://m.facebook.com/doha.hmeid?mibextid=LQQJ4d" target="_blank"
aria-label="Go to Facebook" tabindex="25">
<span class="tooltip">Facebook</span>
<span><i class="fab fa-facebook-f" aria-hidden="true"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/dohmeid/" target="_blank" aria-label="Go to Instagram"
tabindex="26">
<span class="tooltip">Instagram</span>
<span><i class="fab fa-instagram" aria-hidden="true"></i>
</span>
</a>
</li>
</ul>
</article>
</div>
</section>
</main>
<footer>
<small>Copyright © 2024 - Designed & Developed by Doha Hmeid</small>
<small>All Rights Reserved</small>
</footer>
<script type="text/javascript" src="assets/js/script.js"></script>
</body>
</html>