Skip to content

Commit c9d3423

Browse files
shahealamitshahealamit
authored
Updated index page and DevOps Engineer Patna landing page with branding and favicon
1 parent a9cdaee commit c9d3423

1 file changed

Lines changed: 141 additions & 106 deletions

File tree

‎index.html‎

Lines changed: 141 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@
1414
<meta name="description"
1515
content="DevOps engineer in Patna offering freelance DevOps services across India. Expert in CI/CD pipelines, Jenkins automation, Docker containerization, AWS EC2 cloud deployments, and Linux infrastructure. Hire the best DevOps engineer in Patna for scalable and secure systems.">
1616

17-
<meta name="keywords"
18-
content="devops engineer, devops freelancer, ci cd engineer, jenkins docker aws, cloud devops engineer, linux devops, remote devops engineer">
17+
<meta name="keywords" content="devops engineer in patna,freelance devops engineer patna,hire devops engineer in patna,devops engineer india,ci cd engineer patna">
18+
1919

2020
<meta name="author" content="Shahe Alam">
2121
<link rel="canonical" href="https://shahealamit.github.io/">
2222

23+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
24+
2325
<!-- Open Graph -->
2426
<meta property="og:title" content="DevOps Engineer | CI/CD, Jenkins, Docker, AWS">
2527
<meta property="og:description"
@@ -85,130 +87,164 @@ <h1>DevOps Engineer in Patna</h1>
8587
</div>
8688

8789
<nav
88-
class="fixed top-0 w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800 transition-all duration-300">
89-
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
90-
<a href="#" class="flex flex-col group">
91-
<span class="text-xl font-bold text-white tracking-wide group-hover:text-teal-400 transition-colors">Md
92-
Shahe <span class="text-teal-500">Alam</span></span>
93-
<span class="text-[10px] text-slate-400 uppercase tracking-widest">DevOps Engineer</span>
94-
</a>
95-
<div class="hidden md:flex space-x-8 text-sm font-medium">
96-
<a href="#home" class="hover:text-teal-400 transition-colors">Home</a>
97-
<a href="#about" class="hover:text-teal-400 transition-colors">About</a>
98-
<a href="#skills" class="hover:text-teal-400 transition-colors">Skills</a>
99-
<a href="#resume" class="hover:text-teal-400 transition-colors">Journey</a>
100-
<a href="#projects" class="hover:text-teal-400 transition-colors">Projects</a>
101-
<a href="#contact"
102-
class="px-5 py-2 border border-teal-500 text-teal-400 rounded-full hover:bg-teal-500 hover:text-white transition-all">Let's
103-
Talk</a>
104-
</div>
105-
<button id="mobile-btn" class="md:hidden text-xl text-white"><i class="fas fa-bars"></i></button>
106-
</div>
107-
<div id="mobile-menu" class="hidden md:hidden bg-slate-900 border-t border-slate-700 absolute w-full left-0">
108-
<div class="flex flex-col p-4 space-y-4 text-center">
109-
<a href="/" class="block hover:text-teal-400">Home</a>
110-
<a href="#about" class="block hover:text-teal-400">About</a>
111-
<a href="#resume" class="block hover:text-teal-400">Resume</a>
112-
<a href="#projects" class="block hover:text-teal-400">Projects</a>
113-
<a href="#contact" class="block text-teal-400 font-bold">Contact Me</a>
114-
</div>
115-
</div>
116-
</nav>
90+
class="fixed top-0 w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800 transition-all duration-300">
91+
92+
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
93+
94+
<!-- LOGO + BRAND -->
95+
<a href="/" class="flex items-center gap-3 group">
96+
<img
97+
src="logo.png"
98+
alt="Shahe Alam DevOps Engineer in Patna"
99+
class="h-9 w-auto"
100+
>
101+
<div class="leading-tight hidden sm:block">
102+
<span
103+
class="block text-white font-bold tracking-wide group-hover:text-teal-400 transition-colors">
104+
Shahe Alam
105+
</span>
106+
<span class="text-[10px] text-slate-400 uppercase tracking-widest">
107+
DevOps Engineer
108+
</span>
109+
</div>
110+
</a>
117111

118-
<!-- Hero -->
119-
<section id="home" class="min-h-screen md:h-[85vh] flex items-center pt-28 md:pt-24 relative overflow-hidden">
112+
<!-- DESKTOP MENU -->
113+
<div class="hidden md:flex space-x-8 text-sm font-medium items-center">
114+
<a href="/#home" class="hover:text-teal-400 transition-colors">Home</a>
115+
<a href="/#about" class="hover:text-teal-400 transition-colors">About</a>
116+
<a href="/#skills" class="hover:text-teal-400 transition-colors">Skills</a>
117+
<a href="/#resume" class="hover:text-teal-400 transition-colors">Journey</a>
118+
<a href="/#projects" class="hover:text-teal-400 transition-colors">Projects</a>
119+
<a href="/#contact"
120+
class="px-5 py-2 border border-teal-500 text-teal-400 rounded-full
121+
hover:bg-teal-500 hover:text-white transition-all">
122+
Let's Talk
123+
</a>
124+
</div>
120125

126+
<!-- MOBILE BUTTON -->
127+
<button id="mobile-btn" class="md:hidden text-xl text-white">
128+
<i class="fas fa-bars"></i>
129+
</button>
130+
</div>
131+
132+
<!-- MOBILE MENU -->
133+
<div id="mobile-menu"
134+
class="hidden md:hidden bg-slate-900 border-t border-slate-700 absolute w-full left-0">
135+
<div class="flex flex-col p-4 space-y-4 text-center">
136+
<a href="/#home" class="block hover:text-teal-400">Home</a>
137+
<a href="/#about" class="block hover:text-teal-400">About</a>
138+
<a href="/#resume" class="block hover:text-teal-400">Journey</a>
139+
<a href="/#projects" class="block hover:text-teal-400">Projects</a>
140+
<a href="/#contact" class="block text-teal-400 font-bold">Contact Me</a>
141+
</div>
142+
</div>
143+
</nav>
121144

122-
<!-- Background Video -->
123-
<div class="absolute inset-0 -z-20">
124-
<video autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover opacity-70">
125-
<source src="video.mp4" type="video/mp4">
126-
</video>
127-
<div class="absolute inset-0 bg-slate-950/85"></div>
128-
</div>
129145

130-
<!-- Soft background glow -->
131-
<div class="absolute top-10 left-10 w-72 h-72 bg-teal-500/10 rounded-full blur-[120px] -z-10"></div>
132-
<div class="absolute bottom-10 right-10 w-72 h-72 bg-blue-500/10 rounded-full blur-[120px] -z-10"></div>
146+
<!-- Hero -->
147+
<section id="home" class="min-h-screen md:h-[85vh] flex items-center pt-28 md:pt-24 relative overflow-hidden">
148+
149+
<!-- Background Image -->
150+
<div class="absolute inset-0 -z-20">
151+
<img
152+
src="hero-bg.png"
153+
alt="DevOps Engineer in Patna background"
154+
class="absolute inset-0 w-full h-full object-cover"
155+
>
156+
<div class="absolute inset-0 bg-slate-950/85"></div>
157+
</div>
133158

134-
<div class="container mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center relative z-10">
159+
<!-- Soft background glow -->
160+
<div class="absolute top-10 left-10 w-72 h-72 bg-teal-500/10 rounded-full blur-[120px] -z-10"></div>
161+
<div class="absolute bottom-10 right-10 w-72 h-72 bg-blue-500/10 rounded-full blur-[120px] -z-10"></div>
135162

136-
<!-- LEFT CONTENT -->
137-
<div data-aos="fade-right" data-aos-duration="900">
163+
<div class="container mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center relative z-10">
138164

139-
<!-- Availability badge -->
140-
<div class="inline-block px-4 py-1 mb-6 text-xs font-semibold tracking-wide text-teal-400 uppercase
141-
bg-teal-500/10 rounded-full border border-teal-500/20">
142-
Available for DevOps & Freelance Projects
143-
</div>
165+
<!-- LEFT CONTENT -->
166+
<div data-aos="fade-right" data-aos-duration="900">
144167

168+
<!-- Availability badge -->
169+
<div class="inline-block px-4 py-1 mb-6 text-xs font-semibold tracking-wide text-teal-400 uppercase
170+
bg-teal-500/10 rounded-full border border-teal-500/20">
171+
Available for DevOps & Freelance Projects
172+
</div>
145173

146-
<h1 class="text-4xl md:text-5xl font-bold text-white mb-3 leading-tight">
147-
DevOps Engineer in Patna
148-
</h1>
174+
<!-- H1 -->
175+
<h1 class="text-4xl md:text-5xl font-bold text-white mb-3 leading-tight">
176+
DevOps Engineer in Patna
177+
</h1>
178+
179+
<!-- SEO SUPPORT LINE (hidden) -->
180+
<p class="sr-only">
181+
Hire a DevOps engineer in Patna for freelance and remote DevOps services.
182+
Expertise in CI/CD pipelines, Jenkins automation, Docker containerization,
183+
AWS cloud deployments, and Linux infrastructure.
184+
</p>
185+
186+
<!-- H2 -->
187+
<h2 class="text-2xl md:text-3xl font-semibold text-teal-400 mb-6">
188+
Shahe Alam — DevOps & Cloud Engineer
189+
</h2>
149190

191+
<!-- Description -->
192+
<p class="text-slate-300 text-lg mb-8 max-w-xl leading-relaxed">
193+
Building and managing <strong>CI/CD pipelines</strong>,
194+
automating <strong>cloud infrastructure</strong>, and deploying
195+
<strong>containerized applications</strong> using
196+
<strong>AWS, Docker, Jenkins, and Linux</strong> for startups
197+
and growing teams.
198+
</p>
199+
200+
<!-- CTA -->
201+
<div class="flex flex-col md:flex-row gap-4">
202+
<a href="#contact" class="px-6 py-3 rounded-full bg-teal-500 text-slate-950 font-semibold
203+
hover:bg-teal-400 transition-all">
204+
Hire Me
205+
</a>
206+
<a href="#projects" class="px-6 py-3 rounded-full border border-slate-600 text-slate-300
207+
hover:border-teal-400 hover:text-teal-400 transition-all">
208+
View Projects
209+
</a>
210+
</div>
211+
</div>
150212

151-
<h2 class="text-2xl md:text-3xl font-semibold text-teal-400 mb-6">
152-
Shahe Alam — DevOps & Cloud Engineer
153-
</h2>
213+
<!-- RIGHT VISUAL -->
214+
<div class="flex justify-center items-center" data-aos="zoom-in" data-aos-duration="1200">
215+
<div class="solar-system relative">
154216

155-
<!-- DESCRIPTION -->
156-
<p class="text-slate-300 text-lg mb-8 max-w-xl leading-relaxed">
157-
Building and managing <strong>CI/CD pipelines</strong>,
158-
automating <strong>cloud infrastructure</strong>, and deploying
159-
<strong>containerized applications</strong> using
160-
<strong>AWS, Docker, Jenkins, and Linux</strong> for startups
161-
and growing teams.
162-
</p>
163-
164-
<!-- CTA -->
165-
<div class="flex flex-col md:flex-row gap-4">
166-
<a href="#contact" class="px-6 py-3 rounded-full bg-teal-500 text-slate-950 font-semibold
167-
hover:bg-teal-400 transition-all">
168-
Hire Me
169-
</a>
170-
<a href="#projects" class="px-6 py-3 rounded-full border border-slate-600 text-slate-300
171-
hover:border-teal-400 hover:text-teal-400 transition-all">
172-
View Projects
173-
</a>
217+
<div class="absolute z-10 w-32 h-32 rounded-full border-4 border-slate-800
218+
shadow-[0_0_40px_rgba(20,184,166,0.5)] overflow-hidden bg-slate-900">
219+
<img src="about.jpg" alt="Shahe Alam DevOps Engineer" class="w-full h-full object-cover">
174220
</div>
175-
</div>
176221

177-
<!-- RIGHT VISUAL -->
178-
<div class="flex justify-center items-center" data-aos="zoom-in" data-aos-duration="1200">
179-
<div class="solar-system relative">
180-
181-
<div class="absolute z-10 w-32 h-32 rounded-full border-4 border-slate-800
182-
shadow-[0_0_40px_rgba(20,184,166,0.5)] overflow-hidden bg-slate-900">
183-
<img src="about.jpg" alt="Shahe Alam DevOps Engineer" class="w-full h-full object-cover">
222+
<div class="orbit orbit-1">
223+
<div class="planet-container" style="transform: translate(110px, 0);">
224+
<div class="planet-icon"><i class="fab fa-docker"></i></div>
184225
</div>
226+
</div>
185227

186-
<div class="orbit orbit-1">
187-
<div class="planet-container" style="transform: translate(110px, 0);">
188-
<div class="planet-icon"><i class="fab fa-docker"></i></div>
189-
</div>
228+
<div class="orbit orbit-2">
229+
<div class="planet-container" style="transform: translate(0, 170px);">
230+
<div class="planet-icon"><i class="fab fa-aws"></i></div>
190231
</div>
191-
192-
<div class="orbit orbit-2">
193-
<div class="planet-container" style="transform: translate(0, 170px);">
194-
<div class="planet-icon"><i class="fab fa-aws"></i></div>
195-
</div>
196-
<div class="planet-container" style="transform: translate(170px, 0);">
197-
<div class="planet-icon"><i class="fab fa-jenkins"></i></div>
198-
</div>
232+
<div class="planet-container" style="transform: translate(170px, 0);">
233+
<div class="planet-icon"><i class="fab fa-jenkins"></i></div>
199234
</div>
235+
</div>
200236

201-
<div class="orbit orbit-3">
202-
<div class="planet-container" style="transform: translate(-230px, 0);">
203-
<div class="planet-icon"><i class="fas fa-server"></i></div>
204-
</div>
237+
<div class="orbit orbit-3">
238+
<div class="planet-container" style="transform: translate(-230px, 0);">
239+
<div class="planet-icon"><i class="fas fa-server"></i></div>
205240
</div>
206-
207241
</div>
208-
</div>
209242

243+
</div>
210244
</div>
211-
</section>
245+
246+
</div>
247+
</section>
212248

213249
<!-- about -->
214250
<section id="about" class="py-24 bg-slate-900/50 relative">
@@ -946,7 +982,7 @@ <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
946982

947983

948984
<!-- Footer -->
949-
<footer class="bg-slate-950 py-8 border-t border-slate-900 text-center">
985+
<footer class="bg-slate-950 py-8 border-t border-slate-900 text-center">
950986
<p class="text-slate-500 text-sm">
951987
&copy; 2025 Md Shahe Alam. All rights reserved.
952988
</p>
@@ -960,7 +996,7 @@ <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
960996
DevOps Engineer in Patna
961997
</a>
962998
|
963-
<a href="/devops-engineer-patna.html" class="text-teal-400 hover:underline">
999+
<a href="/devops-engineer-patna.html#freelance" class="text-teal-400 hover:underline">
9641000
Freelance DevOps Engineer Patna
9651001
</a>
9661002
</p>
@@ -972,4 +1008,3 @@ <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
9721008
</body>
9731009

9741010
</html>
975-

0 commit comments

Comments
 (0)