-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
503 lines (483 loc) · 19.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
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
<!doctype html>
<html lang="en">
<head>
<!-- Required start meta tags -->
<!-- META CHARSET -->
<meta charset="utf-8">
<!-- META HTTP-EQUIV -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- META VIEWPORT -->
<meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1.0">
<!-- Website Title -->
<title>Abdul Ahad - Portfolio</title>
<!-- META DESCRIPTION -->
<meta name="description" content="Explore Abdul Ahad's portfolio website showcasing web development projects, programming skills, and design expertise.">
<!-- META KEYWORDS -->
<meta name="keywords" content="Abdul Ahad, portfolio, web development, programming, projects, HTML, CSS, JavaScript, frontend development, backend development, software engineering, web design, coding, freelancer, resume, skills">
<!-- META AUTHOR -->
<meta name="author" content="Abdul Ahad">
<!-- Required end meta tags -->
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
<link href="https://abdulahad.site" rel="canonical">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MMS9SQYP1B"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MMS9SQYP1B');
</script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
<!-- main css -->
<link rel="stylesheet" href="css/style.css">
<!-- AOS CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<body>
<!--================ Start Header Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html" title="Abdul Ahad"><img src="assets/images/logo.png" alt="abdul ahad"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav justify-content-end">
<li class="nav-item active"><a class="nav-link" href="index.html" title="Home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about.html" title="About">About</a></li>
<li class="nav-item"><a class="nav-link" href="services.html" title="Services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="portfolio.html" title="Portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html" title="Contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="coming-soon.html" title="Templates">Templates</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================ End Header Area =================-->
<!--================ Start Home Banner Area =================-->
<section class="home_banner_area" data-aos="fade-up" data-aos-duration="1000">
<div class="banner_inner">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="banner_content">
<h3 class="text-uppercase">Hello</h3>
<h1 class="text-uppercase">I am Abdul Ahad</h1>
<h5 class="text-uppercase">Mern Stack Developer</h5>
<div class="d-flex align-items-center">
<a class="primary_btn" target="_blank" href="mailto:[email protected]" title="Hire Me"><span>Hire Me</span></a>
<a class="primary_btn tr-bg" target="_blank" href="assets/pdf/cv/mycv.pdf" title="Get CV"><span>Get CV</span></a>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="home_right_img">
<img src="assets/images/banner/home-right.png" alt="vector boy">
</div>
</div>
</div>
</div>
</div>
</section>
<!--================ End Home Banner Area =================-->
<!--================ Start About Us Area =================-->
<section class="about_area section_gap" data-aos="fade-up" data-aos-duration="1000">
<div class="container">
<div class="row justify-content-start align-items-center">
<div class="col-lg-5">
<div class="about_img">
<img src="assets/images/about-us.png" alt="vector boy">
</div>
</div>
<div class="offset-lg-1 col-lg-5">
<div class="main_title text-left">
<h2>let’s <br>
Introduce about <br>
myself</h2>
<p>
Hi, I'm <h1 class="text-size">Abdul Ahad</h1> a <h1 class="text-size">MERN Stack Developer</h1> passionate about creating dynamic and engaging web applications. Here, you'll find a showcase of my projects, skills, and experiences in the world of web development.
</p>
<p>
"With a background in computer science and a fervent curiosity for technology, I embarked on my journey into the realm of web development. My expertise lies in utilizing the MERN stack – <h1 class="text-size">MongoDB</h1>, <h1 class="text-size">Express.js</h1>, <h1 class="text-size">React.js</h1>, <h1 class="text-size">Next.js</h1> and <h1 class="text-size">Node.js</h1> – to craft seamless, feature-rich applications that cater to diverse user needs."
</p>
<a class="primary_btn" href="profile.html" title="Profile"><span>Profile</span></a>
<a class="primary_btn tr-bg" href="assets/pdf/cv/mycv.pdf" target="_blank" title="Download CV"><span>Download CV</span></a>
</div>
</div>
</div>
</div>
</section>
<!--================ End About Us Area =================-->
<!--================ Srart Brand Area =================-->
<section class="brand_area section_gap_bottom" data-aos="fade-up" data-aos-duration="1000">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="main_title">
<h2>Experience & Skills</h2>
<p>
Years of hands-on experience coupled with a diverse skill set, ensuring
<br>proficient and reliable service delivery.
</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/html.svg" alt="html icon">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/css.svg" alt="css icon">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/js.svg" alt="javascript icon">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/react.svg" alt="react icon">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/next.svg" alt="next icon">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/tailwind.svg" alt="tailwind icon">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/mongodb.svg" alt="mongodb icon">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/node.svg" alt="node icon">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="single-brand-item d-table">
<div class="d-table-cell text-center">
<img src="assets/images/skills/expressjs.svg" alt="expressjs icon">
</div>
</div>
</div>
</div>
</div>
<div class="offset-lg-2 col-lg-4 col-md-6">
<div class="client-info">
<div class="d-flex mb-50">
<span class="lage">03</span>
<span class="smll">Years Experience Working</span>
</div>
<div class="call-now d-flex">
<div>
<span class="fa fa-phone"></span>
</div>
<div class="ml-15">
<p>call us now</p>
<h3>+92 315 8359722</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================ End Brand Area =================-->
<!--================ Start Features Area =================-->
<section class="features_area" data-aos="fade-up" data-aos-duration="1000">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="main_title">
<h2>service offers </h2>
<p>
Unlock the potential of your digital ventures with my tailored service
<br> offerings as a <h1 class="text-size">MERN stack developer.</h1>
</p>
</div>
</div>
</div>
<div class="row feature_inner">
<div class="col-lg-3 col-md-6">
<div class="feature_item">
<img src="assets/images/services/web-application-development.png" alt="web application development">
<h4>Web Application Development</h4>
<p>Tailored apps crafted for unique needs, ensuring seamless functionality and optimal performance.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="feature_item">
<img src="assets/images/services/responsive-design.png" alt="responsive design">
<h4>Responsive Website Design</h4>
<p>Dynamic designs adapting flawlessly across devices, ensuring an optimal user experience.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="feature_item">
<img src="assets/images/services/api-development-and-integration.png" alt="api development and integration">
<h4>API Development and Integration</h4>
<p>Creating and seamlessly integrating APIs to enhance functionality and streamline processes.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="feature_item">
<img src="assets/images/services/db-management-and-optimization.png" alt="db management and optimization">
<h4>DB Management and Optimization</h4>
<p>Efficiently managing and optimizing databases for enhanced performance and streamlined operations.</p>
</div>
</div>
</div>
</div>
</section>
<!--================ End Features Area =================-->
<!--================Start Portfolio Area =================-->
<section class="portfolio_area" id="portfolio" data-aos="fade-up" data-aos-duration="1000">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="main_title text-left">
<h2>quality work <br>
Recently done project </h2>
</div>
</div>
</div>
<div class="filters portfolio-filter">
<ul>
<li class="active" data-filter="*" title="ALL">all</li>
<li data-filter=".html-css" title="HTML/CSS">html/css</li>
<li data-filter=".js" title="JavaScript">js</li>
<li data-filter=".react-js" title="ReactJS">react js</li>
<li data-filter=".next-js" title="NextJS">next js</li>
</ul>
</div>
<div class="filters-content">
<div class="row portfolio-grid justify-content-center" id="portfolio-items"></div>
</div>
</div>
</section>
<!--================End Portfolio Area =================-->
<!--================ Start Testimonial Area =================-->
<div class="testimonial_area section_gap_bottom" data-aos="fade-up" data-aos-duration="1000">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<div class="main_title">
<h2>client say about me</h2>
<p>Discover what clients have to say about their experiences working with me and the <br>solutions provided. Testimonials speak volumes.</p>
</div>
</div>
</div>
<div class="row">
<div class="testi_slider owl-carousel">
<div class="testi_item">
<div class="row">
<div class="col-lg-4">
<img src="assets/images/testimonials/user.png" alt="user">
</div>
<div class="col-lg-8">
<div class="testi_text">
<h4>Zainab Ahmed</h4>
<p>Abdul Ahad is professional, skilled, and collaborative. Highly recommend for enjoyable and successful projects. Great partnership!</p>
</div>
</div>
</div>
</div>
<div class="testi_item">
<div class="row">
<div class="col-lg-4">
<img src="assets/images/testimonials/user.png" alt="user">
</div>
<div class="col-lg-8">
<div class="testi_text">
<h4>Hasan Khan</h4>
<p>Abdul Ahad is exceptional, reliable, and invaluable. Pleasure to work with. Highly recommend for quality results and navigating challenges.</p>
</div>
</div>
</div>
</div>
<div class="testi_item">
<div class="row">
<div class="col-lg-4">
<img src="assets/images/testimonials/user.png" alt="user">
</div>
<div class="col-lg-8">
<div class="testi_text">
<h4>Aisha Malik</h4>
<p>Fantastic collaboration! Abdul Ahad is creative, detail-oriented, and committed. Look forward to more successful projects together!</p>
</div>
</div>
</div>
</div>
<div class="testi_item">
<div class="row">
<div class="col-lg-4">
<img src="assets/images/testimonials/user.png" alt="user">
</div>
<div class="col-lg-8">
<div class="testi_text">
<h4>Bilal Mahmood</h4>
<p>Abdul Ahad is proactive, skilled, and effective. Highly recommend for successful initiatives. Great communicator and problem-solver.</p>
</div>
</div>
</div>
</div>
<div class="testi_item">
<div class="row">
<div class="col-lg-4">
<img src="assets/images/testimonials/user.png" alt="user">
</div>
<div class="col-lg-8">
<div class="testi_text">
<h4>Mariam Ali</h4>
<p>Abdul Ahad is dedicated, reliable, and outstanding. A privilege to work alongside. Highly recommend for exceeding expectations.</p>
</div>
</div>
</div>
</div>
<div class="testi_item">
<div class="row">
<div class="col-lg-4">
<img src="assets/images/testimonials/user.png" alt="user">
</div>
<div class="col-lg-8">
<div class="testi_text">
<h4>Ahmed Raza</h4>
<p>Abdul Ahad is rewarding to work with. Positive, adaptable, and reliable. Look forward to continued successful collaborations.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--================ End Testimonial Area =================-->
<!--================ Start Newsletter Area =================-->
<section class="newsletter_area" data-aos="fade-up" data-aos-duration="1000">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12">
<div class="subscription_box text-center">
<h2 class="text-uppercase text-white">get update from anywhere</h2>
<p class="text-white">
Receive updates on the go, accessible from anywhere, anytime.
</p>
<div class="subcribe-form">
<form name="submit-to-google-sheet" class="subscription relative">
<input name="Email" placeholder="Email address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email address'" type="email" required>
<button class="primary-btn hover d-inline">Get Started</button>
<div id="subscribing-alert"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================ End Newsletter Area =================-->
<!--================Footer Area =================-->
<footer class="footer_area">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="footer_top flex-column">
<div class="footer_logo">
<a href="#">
<img src="assets/images/logo.png" alt="abdul ahad">
</a>
<h4>Follow Me</h4>
</div>
<div class="footer_social">
<a href="https://www.facebook.com/@syedabdulahad.coder" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="https://github.com/AR-AbdulAhad" target="_blank" title="GitHub"><i class="fa fa-github"></i></a>
<a href="https://www.linkedin.com/in/dev-abdul-ahad" target="_blank" title="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="https://wa.me/+923158359722" target="_blank" title="Whatsapp"><i class="fa fa-whatsapp"></i></a>
</div>
</div>
</div>
</div>
<div class="row footer_bottom justify-content-center">
<p class="col-lg-8 col-sm-12 footer-text">
Copyright ©
<script>document.write(new Date().getFullYear());</script>
All rights reserved | Powered by Abdul Ahad</p>
</div>
</div>
</footer>
<!--================End Footer Area =================-->
<!--================start Preloader Area =================-->
<div id="preloader"></div>
<!--================End Preloader Area =================-->
<!-- Scroll to top button -->
<button onclick="topFunction()" id="scrollToTopBtn" title="Go to top">
<i class="fa fa-angle-up"></i>
</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/subscription.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope-min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<!-- AOS JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
<!--gmaps Js-->
<script src="js/theme.js"></script>
<script src="js/portfolio.js"></script>
<script src="js/preloader.js"></script>
<script src="js/scrolltotopbutton.js"></script>
<script src="js/whatsappchat.js"></script>
</body>
</html>