-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
421 lines (416 loc) · 24 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
<!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">
<link rel="stylesheet" href="./css/all.min.css">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/Master.css">
<link rel="shortcut icon" href="./Images/my-icon.png" type="image/x-icon">
<title>Ahmed M. Ezzeldeen</title>
<script defer src="./js/Scrolling.js"></script>
</head>
<body>
<!--======================= Start Header Section =======================-->
<header>
<div class="logo">
<h1>
<a href="#">
<!-- <img src="./Images/my-icon.png" alt="logo-icon"> -->
Home
<span class="func-brackets">( )</span>
</a>
</h1>
</div>
<nav class="links-cont">
<div class="links">
<ul>
<li><a href="#About-Me"><span class="dot_point">.</span>about<span class="func-brackets">(
)</span></a></li>
<li><a href="#Skills"><span class="dot_point">.</span>myTechArsenal<span class="func-brackets">(
)</span></a></li>
<li><a href="#Services"><span class="dot_point">.</span>myServices<span class="func-brackets">(
)</span></a></li>
<li><a href="#Work"><span class="dot_point">.</span>myWork<span class="func-brackets">( )</span></a>
</li>
<li><a href="#Contact"><span class="dot_point">.</span>contact<span class="func-brackets">(
)</span></a></li>
</ul>
</div>
</nav>
<div class="btn-cont">
<a class="btn btn-outline-primary" href="https://www.linkedin.com/in/Ahmed3zzEldeen/" target="_blank">Hire
Me</a>
<!-- -->
<div class="menu-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<!--======================= End Header Section =======================-->
<div class="page-container">
<!--======================= Start The hero Section =======================-->
<section class="hero">
<div class="hero-text">
<h2 class="aein-move-hidden from-top">Hi, I am <span>Ahmed M. Ezzeldeen</span></h2>
<h3 class="aein-move-hidden from-top">I am <span class="arr-text">Front End Web Developer</span></h3>
<p class="aein-move-hidden from-right">I am passionate about making the world a better place by finding
space between code and design. I love
learning about the latest technologies and finding out how to improve my craft. I am detail-oriented
and
focused. When I am not in front of a computer, I like playing chess or drinking ice coffee and
relaxing.
</p>
</div>
<div class="hero-social">
<a href="https://docs.google.com/document/d/1TphwTxYbZ9dV-COMYObQXrnPsXhqMQ9DHe9Wn2Hotg0"
target="_blank" class="hero-btn btn aein-move-hidden from-left">resume</a>
<div class="social-icons aein-move-hidden from-right">
<a href="https://www.GitHub.com/Ahmed3zzEldeen" target="_blank"><i
class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/Ahmed3zzEldeen" target="_blank"><i
class="fa-brands fa-linkedin"></i></a>
<a href="https://www.Twitter.com/Ahmed3zzeldeen" target="_blank"><i
class="fa-brands fa-twitter"></i></a>
</div>
</div>
<div class="scroll-down-arrow aein-move-hidden from-bottom">
<a href="#About-Me"><i class="fa-solid fa-arrow-down fa-2x "></i></a>
</div>
</section>
<!--======================= End The Main Section =======================-->
<!--======================= Start About Section =======================-->
<section id="About-Me">
<div class="section-heading">
<h2 class="aein-move-hidden from-top">About me</h2>
</div>
<div class="about-cont">
<div class="img-about-cont aein-move-hidden from-left ">
<div class="img-about-me-cover">
<img src="./Images/img-1.png" alt="">
</div>
</div>
<div class="p-about-me aein-move-hidden from-right no-blur">
<h2 class="highlight-text aein-move-hidden from-left ">Hello There !</h2>
<p class="aein-move-hidden from-top">
My name is <span class="highlight-text">Ahmed M. Ezzeldeen.</span> A CS Student, self-taught
programmer passionate and fast learner , I am a full-stack developer with MERN Stack. I love to
work with new technologies and develop web applications. Currently, I am learning how to improve
the
performance of progressive web applications for a better user experience seedling. Now I am
working
as a Javascript Developer.
</p>
<div class="box-of-all-text aein-move-hidden from-bottom">
<div class="box-of-text">
<h3>Full Name : <span class="text-secondary">Ahmed M. Ezzeldeen</span></h3>
</div>
<div class="box-of-text">
<h3>Birthday : <span class="text-secondary">25 March</span></h3>
</div>
<div class="box-of-text">
<h3>Experience : <span class="text-secondary">7 Month</span></h3>
</div>
<div class="box-of-text">
<h3>Email : <a href="mailto:[email protected]"
class="text-secondary">[email protected]</a></h3>
</div>
<div class="box-of-text">
<h3>Freelance : <span class="text-secondary">Available</span></h3>
</div>
</div>
<a href="https://www.linkedin.com/in/Ahmed3zzEldeen/" target="_blank"
class="btn btn-outline-primary aein-move-hidden from-right ">Hire Me</a>
</div>
</div>
<div id="History">
<h2 class="his-block-title">Work Experience</h2>
<div class="his-block aein-move-hidden from-right">
<h2 class="company-title"><a
href="https://www.linkedin.com/company/%D9%83%D8%A7%D9%84%D8%A8%D9%86%D9%8A%D8%A7%D9%86-%D8%A7%D9%84%D9%85%D8%B1%D8%B5%D9%88%D8%B5/"
target="_blank">Kalbonyan El Marsos</a></h2>
<h3 class="job-title">Software Engineer Intern | <span>Dec 2022 - PRESENT</span></h3>
<p class="job-responsibility">
This internship aims to develop our skills in Programming foundation and web Development.
Through this internship, I was able to take courses of over +250 hr of content on this
topic:<br />
- Programming foundation, Git & GitHub - HTML, CSS & Js (ES6)<br />
- React Js, Node Js, MongoDB - AWS & Serverless<br />
I also had to do 4 advanced-level tasks by myself each focusing on one of these topics:<br />
- HTML & CSS - JavaScript<br />
- React JS - Node JS<br />
</p>
</div>
<h2 class="his-block-title aein-move-hidden from-bottom">EDUCATION</h2>
<div class="his-block aein-move-hidden from-left">
<h2 class="company-title">Faculty of Science Cairo University</h2>
<h3 class="job-title">A Computer Science Student | <span> 2021 - PRESENT</span> </h3>
<p class="job-responsibility">
- Completed coursework in Data Structures and Algorithms, Object-Oriented Programming, and
Computer Networks<br />
- Achieved high GPA<br />
- Participated in a hackathon and coding competition <br />
- Completed an internship in a relevant field <br />
</p>
</div>
<div class="his-block aein-move-hidden from-left">
<h2 class="company-title">Faculty of Science Helwan University</h2>
<h3 class="job-title">A General Physics Student | <span> 2020 - 2021</span> </h3>
<p class="job-responsibility">
Ahmed took up General physics in Faculty of Science Helwan University for a year
before shifting to Faculty of Science Cairo University.<br />
He graduated with top marks and ranked seventeenth highest GPA in his department.
</p>
</div>
</div>
<a href="#History" class="show-more-arrow aein-move-hidden from-origin">
<h2>Show More</h2>
</a>
</section>
<!--======================= End About Section =======================-->
<!--======================= Start My Skills Section =======================-->
<section id="Skills">
<div class="section-heading">
<h2 class=" aein-move-hidden from-top">My tech arsenal</h2>
</div>
<!-- In Progress - Beginner - Intermediate - Professional (Advanced) - Masterpiece -->
<div class="tech-container">
<div class="skills-container">
<div class="skill">
<div class="img-cont aein-move-hidden from-top">
<img src="./Images/skills/html.png" alt="html-icon">
</div>
<h4 class="skill-name" data-status="Professional">HTML</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-right">
<img src="./Images/skills/css.png" alt="CSS-icon">
</div>
<h4 class="skill-name" data-status="Professional">CSS</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-bottom">
<img src="./Images/skills/Javascript.png" alt="JavaScript-icon">
</div>
<h4 class="skill-name" data-status="Intermediate">Js</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-left">
<img src="./Images/skills/sass.png" alt="SASS-icon">
</div>
<h4 class="skill-name" data-status="Intermediate">SASS</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-top">
<img src="./Images/skills/pug-js.png" alt="Pug-js-icon">
</div>
<h4 class="skill-name" data-status="Intermediate">Pug</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-right">
<img src="./Images/skills/gulp-js.png" alt="Gulp-js-icon">
</div>
<h4 class="skill-name" data-status="In Progress">Gulp.js</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-bottom">
<img src="./Images/skills/react.png" alt="React-icon">
</div>
<h4 class="skill-name" data-status="In Progress">React</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-left">
<img src="./Images/skills/redux.png" alt="Redux-icon">
</div>
<h4 class="skill-name" data-status="In Progress">Redux</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-top">
<img src="./Images/skills/next-js.png" alt="Next-icon">
</div>
<h4 class="skill-name" data-status="In Progress">Next</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-right">
<img src="./Images/skills/node-js.png" alt="node-js-icon">
</div>
<h4 class="skill-name" data-status="In Progress">Node.js</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-bottom">
<img src="./Images/skills/express-js.png" alt="Express-icon">
</div>
<h4 class="skill-name" data-status="In Progress">Express</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-left">
<img src="./Images/skills/php.png" alt="php-icon">
</div>
<h4 class="skill-name" data-status="In Progress">PHP</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-top">
<img src="./Images/skills/MySQL.png" alt="mysql-icon">
</div>
<h4 class="skill-name" data-status="In Progress">MySQL</h4>
</div>
<div class="skill">
<div class="img-cont aein-move-hidden from-right">
<img src="./Images/skills/aws.png" alt="aws-icon">
</div>
<h4 class="skill-name" data-status="In Progress">AWS</h4>
</div>
</div>
</div>
</section>
<!--======================= End My Skills Section =======================-->
<!--======================= Start My Services Section =======================-->
<section id="Services">
<div class="section-heading">
<h2 class="aein-move-hidden from-top">My Services</h2>
</div>
<div class="service-cont aein-move-hidden from-left no-blur">
<div class="service-img-cont">
<img src="./Images/webLap.png" alt="">
</div>
<div class="service-description-cont aein-move-hidden from-right no-blur">
<h3>Web design</h3>
<p>
I can program the front end of your site with the highest efficiency using the latest
technologies
</p>
<div class="service-buttons">
<a class="btn" href="#Work">See projects <i class="fas fa-eye"></i></a>
<a class="btn"
href="https://wa.me/201003164971?text=I%27m%20interested%20in%20your%20Web%20Design%20Service"
target="_blank">Contact <i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
<div class="service-cont aein-move-hidden from-right no-blur">
<div class="service-img-cont">
<img src="./Images/uiLap.png" alt="">
</div>
<div class="service-description-cont aein-move-hidden from-left no-blur">
<h3>UI / UX</h3>
<p>
I will design an attractive user interface for your application or website
</p>
<div class="service-buttons">
<a class="btn" href="#Work">See projects <i class="fas fa-eye"></i></a>
<a class="btn"
href="https://wa.me/201003164971?text=I%27m%20interested%20in%20your%20UI%20UX%20Service"
target="_blank">Contact <i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
</section>
<!--======================= End My Services Section =======================-->
<!--======================= Start Work Section =======================-->
<section id="Work">
<div class="section-heading aein-move-hidden from-top">
<h2>Some of my work </h2>
</div>
<!-- work-buttons shuffle-buttons -->
<ul class="work-buttons shuffle-buttons">
<li class="btn active aein-move-hidden from-left" data-category="All">All</li>
<li class="btn aein-move-hidden from-left" data-category="Websites">Websites</li>
<li class="btn aein-move-hidden from-left" data-category="Products">Products</li>
<li class="btn aein-move-hidden from-left" data-category="Challenges">Challenges</li>
<li class="btn active aein-move-hidden from-left" data-category="Games">Games</li>
</ul>
<div class="gallery" id="work-gallery">
</div>
<ul class="work-buttons">
<li class="more-btn active"> Show More <i class="fa-solid fa-arrow-down"></i></li>
<li class="less-btn"><a href="#Work">Show less <i class="fa-solid fa-arrow-up"></i></a></li>
</ul>
</section>
<!--======================= End Work Section =======================-->
<!--======================= Start contact Section =======================-->
<section id="Contact">
<div class="section-heading aein-move-hidden from-top">
<h2>Contact me</h2>
</div>
<div class="Contact-container">
<div class="form-cont aein-move-hidden from-left">
<form action="https://usebasin.com/f/ede97d96d867" method="POST" target="_blank">
<div class="form-group col name-input aein-move-hidden from-top">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Enter your name" required>
<i class="fa fa-user fa-fw"></i>
<span class="asterisks">*</span>
<div class="custom-alert-danger">
Your Name Must Be Larger Than <strong> 3 </strong> Characters
</div>
</div>
<div class="form-group col aein-move-hidden from-bottom">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" required>
<i class="fa fa-envelope fa-fw"></i>
<span class="asterisks">*</span>
<div class="custom-alert-danger">
Email Can't Be <strong> Empty </strong>
</div>
</div>
<div class="form-group aein-move-hidden from-top">
<label for="msg">Your message</label>
<textarea name="message" id="msg" cols="30" rows="5" placeholder="Your message!"
required></textarea>
<span class="asterisks">*</span>
<div class="custom-alert-danger">
Message Can't be less then <strong> 10 </strong> Characters
</div>
</div>
<div class="btn-Send-cont aein-move-hidden from-origin">
<input type="submit" value="Send message">
<i class="fa fa-paper-plane fa-fw send-icon"></i>
</div>
</form>
</div>
<div class="social-cont aein-move-hidden from-right">
<p class="aein-move-hidden from-top">
<strong><span class="highlight-text full-text">DON'T BE SHY!</span></strong>
Feel free to get in touch with me.
I am always open to discussing
new projects, creative ideas or
opportunities to be part of your visions.
</p>
<h3 class="aein-move-hidden from-bottom">You can reach me at</h3>
<ul class="social aein-move-hidden from-top">
<li><a href="https://www.linkedin.com/in/ahmed3zzeldeen/" target="_blank"><i
class="fa-brands fa-linkedin-in"></i> Linkedin</a></li>
<li><a href="https://www.GitHub.com/Ahmed3zzEldeen" target="_blank"><i
class="fa-brands fa-github-alt"></i> GitHub</a></li>
<li><a href="https://www.Twitter.com/Ahmed3zzeldeen" target="_blank"><i
class="fa-brands fa-twitter"></i> Twitter</a></li>
<li><a href="https://www.Facebook.com/Ahmed3zzeldeen" target="_blank"><i
class="fa-brands fa-facebook-f"></i> Facebook</a></li>
<li><a href="https://telegram.me/Ahmed3zzeldeen" target="_blank"><i
class="fa-solid fa-paper-plane"></i> Telegram</a></li>
<li><a href="https://wa.me/201003164971?text=Hi" target="_blank"><i
class="fa-brands fa-whatsapp"></i> Whatsapp</a></li>
</ul>
</div>
</div>
</section>
<!--======================= End contact Section =======================-->
</div>
<!--======================= Start Footer Section =======================-->
<footer>
<div class="footer-container aein-move-hidden from-bottom">
<h4 class="developer-name-cont"> <∖> with <span>🧡</span> & <span>🍕</span> By <a
href="#">Ahmed M. Ezzeldeen</a>
</h4>
<p class="copy-right-text">© 2022 <span>Diamond-Script</span> All Right Reserved</p>
</div>
</footer>
<!--======================= End Footer Section =======================-->
<script src="./js/all.min.js"></script>
<script src="./js/main.js"></script>
<script src="./js/projects.js"></script>
</body>
</html>