-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
372 lines (329 loc) · 27.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Md Jahid Hasan - Web & WordPress Developer | DevOps Enthusiast</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive-style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/10005a5d45.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header Section Starts Here -->
<header class="header-section" id="header-section">
<div class="container">
<div class="row justify-content-center align-items-md-center align-items-start py-3">
<div class="col-lg-3 col-2">
<a href="/" class="site-link"><img src="media/Logo.png" alt="Site Logo" class="site-logo"></a>
</div>
<!-- Responsive Toggle Area Starts Here-->
<div class="col-10 d-md-none d-block">
<div class="responsive-mobile-menu-col-inner d-flex flex-column align-items-end">
<div class="responsive-mobile-menu-toggle-icon-div d-flex align-items-end">
<span class="btn btn-primary" type="button" data-toggle="collapse" data-target="#toggleContent" aria-expanded="false" aria-controls="toggleContent"><i class="fa-solid fa-bars"></i></span>
</div>
</div>
</div>
<div class="collapse mt-3 toggle-content col-12" id="toggleContent">
<div class="card card-body d-flex flex-column gap-4">
<ul class="p-md-0 pt-2 m-0 list-unstyled d-flex flex-md-row flex-column justify-content-center align-items-center gap-lg-5 gap-2">
<li class="dropdown"><a href="#about-section" class="header-nav-link dropdown-toggle text-decoration-none d-inline-block" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item header-nav-link d-inline-block" href="#about-section">About Me</a></li>
<li><a class="dropdown-item header-nav-link d-inline-block" href="#skills-section">My Skills</a></li>
<li><a class="dropdown-item header-nav-link d-inline-block" href="#experiences-section">Experiences</a></li>
</ul>
</li>
<li><a href="#projects-section" class="header-nav-link text-decoration-none d-inline-block">Projects</a></li>
<li><a href="#certifications-section" class="header-nav-link text-decoration-none d-inline-block">Certifications</a></li>
<li><a href="#contact-section" class="header-nav-link text-decoration-none d-inline-block" loading="lazy">Contact</a></li>
</ul>
<ul class="p-0 m-0 list-unstyled d-flex justify-content-md-end justify-content-center align-items-center gap-lg-3 gap-3">
<li><a href="https://github.com/hmjahid" target="_blank" class="header-social-link d-inline-block"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/hmjahid" target="_blank" class="header-social-link d-inline-block"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://medium.com/@mdjahidhasan919" target="_blank" class="header-social-link d-inline-block"><i class="fa-brands fa-medium"></i></a></li>
</ul>
</div>
</div>
<!-- Responsive Toggle Area Ends Here-->
<div class="col-lg-6 col-md-8 d-md-block d-none">
<ul class="p-md-0 pt-2 m-0 list-unstyled d-flex justify-content-center align-items-center gap-lg-5 gap-3">
<li class="dropdown"><a href="#about-section" class="header-nav-link dropdown-toggle text-decoration-none d-inline-block" role="button" data-bs-toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item header-nav-link d-inline-block" href="#about-section">About Me</a></li>
<li><a class="dropdown-item header-nav-link d-inline-block" href="#skills-section">My Skills</a></li>
<li><a class="dropdown-item header-nav-link d-inline-block" href="#experiences-section">Experiences</a></li>
</ul>
</li>
<li><a href="#projects-section" class="header-nav-link text-decoration-none d-inline-block">Projects</a></li>
<li><a href="#certifications-section" class="header-nav-link text-decoration-none d-inline-block">Certifications</a></li>
<li><a href="#contact-section" class="header-nav-link text-decoration-none d-inline-block" loading="lazy">Contact</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-2 col-6 d-md-block d-none">
<ul class="p-0 m-0 list-unstyled d-flex justify-content-end align-items-center gap-lg-3 gap-md-2 gap-1">
<li><a href="https://github.com/hmjahid" target="_blank" class="header-social-link d-inline-block"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/hmjahid" target="_blank" class="header-social-link d-inline-block"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://medium.com/@mdjahidhasan919" target="_blank" class="header-social-link d-inline-block"><i class="fa-brands fa-medium"></i></a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- Header Section Ends Here -->
<!-- Hero Section Starts Here -->
<section class="hero-section" id="hero-section">
<div class="container">
<div class="row flex-lg-row flex-column-reverse justify-content-between align-items-center gap-lg-0 gap-4">
<div class="col-lg-6">
<div class="hero-col-inner d-flex flex-column gap-2">
<h1 class="hero-title m-0 pb-2">Md Jahid Hasan</h1>
<h3 class="hero-subtitle section-subtitle m-0">Web & WordPress Developer | DevOps Enthusiast</h3>
<p class="hero-desc desc-text m-0">I am an experienced web developer with over 1.5 years of expertise in WordPress development, specializing in creating dynamic and user-friendly websites. My skills include custom theme development, server migration, website optimization, and maintenance, making me adept at delivering tailored solutions to meet client needs.
I have extensive experience with page builders like Divi, Elementor, and WPBakery Builder, enabling me to craft visually appealing and responsive designs efficiently. My knowledge of WordPress's ecosystem allows me to integrate functionality seamlessly, ensuring sites are not only aesthetically pleasing but also perform exceptionally.Proficient in leveraging modern DevOps tools such as Docker, Kubernetes, Prometheus, Grafana, and AWS, I streamline workflows and enhance development processes, making me a versatile contributor to any team.
I take pride in my ability to troubleshoot issues, implement effective solutions, and manage projects to meet deadlines. My focus on detail, creativity, and understanding of both technical and design aspects makes me the ideal fit for a web developer role. I thrive in collaborative environments and am committed to delivering quality results that align with your business goals.
</p>
<div class="hero-btn-div contact-btn-div">
<a href="#contact-section" class="hero-btn contact-btn text-decoration-none d-inline-block">Contact Me</a>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="hero-img-col-inner">
<img src="media/Hero Image.png" alt="Hero Images" class="hero-img">
</div>
</div>
</div>
</div>
</section>
<!-- Hero Section Ends Here -->
<!-- About Section Starts Here -->
<section class="about-section" id="about-section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="about-col-inner d-flex flex-column justify-content-center align-items-center gap-2">
<h2 class="about-title section-title m-0">About Me & My Skills</h2>
<p class="about-desc desc-text m-0 pt-3">🌟 Assalamu Alaikum! I'm Md Jahid Hasan, based in Jashore, Bangladesh. As a passionate and detail-driven Web & WordPress Developer, I thrive on challenges and focus intently on my responsibilities. With more than a year of hands-on experience in WordPress and over two years in web development, I specialize in creating high-quality WordPress sites in Linux environments, using tools like Elementor and Divi Builder. I’m a quick learner, constantly eager to explore new technologies. For a deeper dive into my coding projects, feel free to visit my GitHub: https://github.com/hmjahid.</p>
<p class="about-desc desc-text m-0 pt-2">🌐 Linux System Administrator and DevOps Enthusiast:
I'm passionate about Linux and system administration, with expertise in various distributions, server OS, and virtualization tools like Proxmox and VirtualBox. My skills in containerization, including Docker and Kubernetes, and my familiarity with cloud computing on AWS, enable me to work efficiently in dynamic environments. I’m proficient with Ansible and enjoy leveraging monitoring tools such as Nagios, Prometheus, and Grafana to optimize systems. With strong creative and analytical abilities, I am detail-oriented and committed, excelling both in team settings and independently.</p>
<ul class="m-0 p-0 list-unstyled">
<li>
<p class="about-desc desc-text m-0 pt-2">🛠️ Expertise: HTML, CSS, Git, Github, Linux (Redhat, Centos, Fedora, Alma Linux, Rocky Linux, Debian, Ubuntu, Ubuntu Server), Docker, Podman, Portainer, Unix (FreeBSD), Minikube</p>
</li>
<li>
<p class="about-desc desc-text m-0 pt-2">🛠️ Comfortable: AWS, Kubernetes, Kind, K0S, Helm, Ansible, Bash, Python, Nagios, Prometheus, Grafana, VMWare, VirtualBox, KVM/QEMU, Proxmox, TrueNAS, Nginx, Apache, Javascript, MySQL, PHP</p>
</li>
<li>
<p class="about-desc desc-text m-0 pt-2">🛠️ Familiar: Terraform, ArgoCD, Devtron, Vault, Minio, ELK Stack, Jenkins, Gitlab, OpenStack, OpenNebula, CloudStack, Openshift, React.js, Trivy, SonarQube</p>
</li>
<li>
<p class="about-desc desc-text m-0 pt-2">🛠️ Tools: VS Code, Netlify, Pantheon, Gitkraken, PyCharm, OpenLens, Rancher, Figma, Canva, Nextcloud, Trello, XAMPP</p>
</li>
<li>
<p class="about-desc desc-text m-0 pt-2">🛠️ CMS & Tools: WordPress, Divi, Elementor, LocalWP</p>
</li>
</ul>
<p class="about-desc desc-text m-0 pt-2 text-start">🚀 Let's talk more: "[email protected]"</p>
</div>
</div>
</div>
<div class="row gap-3">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
</section>
<!-- About Section Starts Here -->
<!-- Projects Section Starts Here -->
<section class="projects-section" id="projects-section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="projects-intro-col-inner d-flex flex-column justify-content-center align-items-center gap-2">
<h2 class="projects-title section-title m-0">Projects</h2>
<p class="projects-desc desc-text mb-6">I have completed some projets on WordPress and Web Development. These projects are selected from them.</p>
<!-- <p class="projects-desc desc-text m-0 pt-5">Coming Soon. In Sha ALLAH.</p> -->
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="projects-intro-col-inner d-flex flex-column justify-content-center align-items-center gap-2">
<h3 class="projects-sub-title section-sub-title m-0">WordPress Projects</h3>
<!-- <p class="projects-desc desc-text m-0 pt-5">Coming Soon. In Sha ALLAH.</p> -->
</div>
</div>
</div>
<div class="row flex-wrap gap-3 justify-content-between project-details-row">
<div class="col-lg-6 project-details-card">
<div class="project-details-card-inner d-flex flex-column justify-content-center align-items-center gap-2">
<div class="project-image-container">
<img src="/media/Shelly-Obrien.png" alt="" srcset="">
</div>
<div class="project-title-box">
<div class="project-name">Hypnotherapy with Shelly O’Brien</div>
<a href="https://shellyobrienhypnotherapy.com/" target="_blank" class="project-live-link">Live Site</a>
</div>
<div class="project-description"><b>Project overview: </b>Hello there! I offer a personalised service aimed at helping you recognize your potential, overcome challenges, and achieve your goals, no matter what they are. With a non-judgmental approach and a wealth of life experience, I enjoy working with individuals from all backgrounds.</div>
<div class="project-role"><b>My role: </b>I developed the Shelly O'Brien Hypnotherapy website using the Divi Builder and Divi Theme. My role involved creating a visually appealing, user-friendly design, ensuring responsive functionality, and customizing the layout to align with the client's vision and branding.</div>
</div>
</div>
<!-- <div class="col-lg-6 project-details-card">
<div class="project-details-card-inner d-flex flex-column justify-content-center align-items-center gap-2">
<div class="project-image-container">
<img src="/media/AdsPLannerAi.png" alt="" srcset="">
</div>
<div class="project-title-box">
<div class="project-name">AdsPlanner Ai</div>
<a href="https://adsplanner.ai/" target="_blank" class="project-live-link">Live Site</a>
</div>
<div class="project-description"><b>Project overview: </b>Generate high-converting, on-brand ad creatives for paid ad campaigns. Tailored for 5 key ad disciplines, optimized across 10 platforms, and designed for 25 ad ...</div>
<div class="project-role"><b>My role: </b>In colleboration with my teammates at Monday Digital, I was responsible for building and enhancing the frontend interface using modern web development practices from figma design. I worked extensively with Advanced Custom Fields (ACF) to create dynamic and customizable components, ensuring the website met the unique requirements of the client.</div>
</div>
</div> -->
</div>
<div class="row">
<div class="col-12">
<div class="projects-intro-col-inner d-flex flex-column justify-content-center align-items-center gap-2">
<h3 class="projects-sub-title section-sub-title m-0 mt-4">DevOps Projects</h3>
<!-- <p class="projects-desc desc-text m-0 pt-5">Coming Soon. In Sha ALLAH.</p> -->
</div>
</div>
</div>
<div class="row flex-wrap gap-3 justify-content-between project-details-row">
<div class="col-lg-6 project-details-card">
<div class="project-details-card-inner d-flex flex-column justify-content-center align-items-center gap-2">
<div class="project-image-container">
<img src="/media/multi-tier-php-application.jpg" alt="" srcset="">
</div>
<div class="project-title-box">
<div class="project-name">Multi-Tier Web Application Deployment in Docker Using Docker Compose</div>
<a href="https://medium.com/@mdjahidhasan919/deploying-a-6-tier-php-application-with-docker-c6c35834b582" target="_blank" class="project-live-link">Medium Article</a>
</div>
<div class="project-description"><b>Project overview: </b>Designed and deployed a scalable, six-tier web application using Docker to demonstrate expertise in containerization and DevOps practices.</div>
</div>
</div>
<div class="col-lg-6 project-details-card">
<div class="project-details-card-inner d-flex flex-column justify-content-center align-items-center gap-2">
<div class="project-image-container">
<img src="/media/auto-scalable-woocommerce.jpg" alt="" srcset="">
</div>
<div class="project-title-box">
<div class="project-name">Deploying an Autoscalable WooCommerce Setup with MySQL, Redis, phpMyAdmin, and FileBrowser: A Journey to Docker and Kubernetes (Minikube)</div>
<a href="https://medium.com/@mdjahidhasan919/deploying-woocommerce-with-mysql-redis-phpmyadmin-and-filebrowser-a-journey-to-docker-and-ec7e928c7bed" target="_blank" class="project-live-link">Medium Article</a>
</div>
<div class="project-description"><b>Project overview: </b>I recently had the opportunity to deploy a full WooCommerce application, complete with MySQL, Redis, phpMyAdmin, and FileBrowser, in both Docker and Kubernetes (Minikube). It's been an exciting journey in learning how to manage and scale a full-fledged eCommerce platform using containers!</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section Starts Here -->
<!-- Cetifications Section Starts Here -->
<section class="certifications-section" id="certifications-section">
<div class="container">
<div class="row">
<div class="col-12">
<div class="certifications-intro-col-inner d-flex flex-column justify-content-center align-items-center gap-2">
<h2 class="certifications-title section-title m-0">Certifications</h2>
<p class="certifications-desc desc-text m-0">I have obtained some certifications on Linux, Cloud, WordPress and Web Development. The certifications are below:</p>
<p class="certifications-desc desc-text m-0 pt-5">Coming Soon. In Sha ALLAH.</p>
</div>
</div>
</div>
<div class="row flex-wrap gap-3">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
</section>
<!-- Cetifications Section Ends Here -->
<!-- Contact Section Starts Here -->
<section class="contact-section" id="contact-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10">
<div class="contact-col-inner d-flex flex-column justify-content-center gap-3">
<h2 class="contact-title section-title m-0 text-center">Contact</h2>
<p class="contact-desc desc-text m-0 text-center">Send me your thoughts, requiremnts or planning ...</p>
<form class="contact-form d-flex flex-column justify-content-center align-items-center gap-1" target="_blank" action="c39b17ede6e556da2bc371351f585f74" method="POST">
<input type="text" name="name" class="form-control" placeholder="Full Name" required="">
<input type="email" name="email" class="form-control" placeholder="Email Address" required="">
<textarea type="text" placeholder="Your Message" class="form-control" name="message" rows="10" required=""></textarea>
<div class="contact-submit-btn-div">
<button type="submit" class="contact-btn">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section Ends Here -->
<!-- Footer Section Starts Here -->
<footer class="footer-section" id="footer-section">
<div class="container">
<div class="row align-items-end gap-md-0 gap-5">
<div class="col-lg-3 col-md-6">
<div class="footer-iconic-col-inner d-flex flex-column justify-content-lg-start justify-content-center align-items-center gap-3">
<a href="/" class="site-link"><img src="media/Logo.png" alt="Site Logo" class="site-logo"></a>
<h3 class="footer-social-title section-subtitle m-0">Social Links</h3>
<ul class="p-0 m-0 list-unstyled d-flex justify-content-start align-items-center gap-lg-3 gap-3">
<li><a href="https://github.com/hmjahid" target="_blank" class="footer-social-link d-inline-block"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/hmjahid" target="_blank" class="footer-social-link d-inline-block"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://medium.com/@mdjahidhasan919" target="_blank" class="footer-social-link d-inline-block"><i class="fa-brands fa-medium"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 d-lg-none d-block">
<div class="footer-nav-col-inner d-flex flex-column justify-content-end align-items-center gap-3">
<h3 class="footer-nav-title section-subtitle m-0 text-md-end text-center">Quick Links</h3>
<ul class="p-0 m-0 list-unstyled d-flex flex-column justify-content-center align-items-lg-start align-items-center gap-1">
<li><a href="" class="footer-nav-link d-inline-block" loading="lazy">Home</a></li>
<li><a href="#skills" class="footer-nav-link d-inline-block">Skills</a></li>
<li><a href="#ecperiences" class="footer-nav-link d-inline-block">Experiences</a></li>
<li><a href="#hire-me" class="footer-nav-link d-inline-block">Hire Me</a></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="footer-content-col-inner d-flex flex-column justify-content-end align-items-center pt-lg-0 pt-md-5 pt-0 gap-3">
<p class="footer-copyright-desc desc-text m-0 text-center">Copyright © 2025 <a href="#header-section" class="footer-content-link d-inline-block">Md Jahid Hasan</a>. All Rights Reserved ®</p>
<p class="footer-dd-desc desc-text m-0 text-center">Designed & Developed by <a href="#header-section" class="footer-content-link d-inline-block">Md Jahid Hasan</a></p>
</div>
</div>
<div class="col-lg-3 d-lg-block d-none">
<div class="footer-nav-col-inner d-flex flex-column justify-content-end align-items-center gap-3">
<h3 class="footer-nav-title section-subtitle m-0 text-md-end text-center">Quick Links</h3>
<ul class="p-0 m-0 list-unstyled d-flex flex-column justify-content-center align-items-lg-start align-items-center gap-1">
<li><a href="" class="footer-nav-link d-inline-block" loading="lazy">Home</a></li>
<li><a href="#skills-section" class="footer-nav-link d-inline-block">Skills</a></li>
<li><a href="#experiences-section" class="footer-nav-link d-inline-block">Experiences</a></li>
<li><a href="#hire-me" class="footer-nav-link d-inline-block">Hire Me</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Section Endss Here -->
<!-- Bootstrap JS and dependencies (Popper.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>