Skip to content

Commit d41eb58

Browse files
harshitpawar64harshitpawar64
committed
Add Linux to technologies, fix navigation bar styling and behavior
1 parent 427becd commit d41eb58

File tree

3 files changed

+66
-34
lines changed

3 files changed

+66
-34
lines changed

‎index.html‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -195,10 +195,10 @@
195195
<div class="blob w-96 h-96 bg-indigo-600" style="bottom: 10%; left: -15%;"></div>
196196

197197
<!-- Navigation -->
198-
<nav class="fixed top-0 left-0 right-0 bg-opacity-90 backdrop-blur-md shadow-lg z-50 px-6 py-4" style="background-color: rgba(10, 10, 15, 0.9);">
198+
<nav class="fixed top-0 left-0 right-0 bg-opacity-0 backdrop-blur-0 z-50 px-6 py-4 transition-all duration-300" id="main-nav">
199199
<div class="max-w-6xl mx-auto flex justify-between items-center">
200200
<a href="#" class="text-2xl font-bold gradient-text">HP</a>
201-
<div class="hidden md:flex items-center space-x-1">
201+
<div class="hidden md:flex items-center space-x-6">
202202
<a href="#about" class="nav-link text-white hover:text-white">About</a>
203203
<a href="#projects" class="nav-link text-white hover:text-white">Projects</a>
204204
<a href="#skills" class="nav-link text-white hover:text-white">Skills</a>
@@ -230,7 +230,7 @@ <h1 class="text-5xl md:text-7xl font-bold leading-tight mb-6 text-white">
230230
</h1>
231231
<div class="flex items-center mb-8">
232232
<div class="h-[2px] w-12 bg-[#ff5e62] mr-4"></div>
233-
<div class="typing-container">
233+
<div class="typing-container flex items-center">
234234
<span id="typing-text" class="text-xl md:text-2xl text-white font-medium"></span>
235235
</div>
236236
</div>
@@ -263,14 +263,14 @@ <h1 class="text-5xl md:text-7xl font-bold leading-tight mb-6 text-white">
263263
</div>
264264
</section>
265265

266-
<!-- About Me Section -->
266+
<!-- About Me Section -->
267267
<section id="about" class="py-24 px-4 sm:px-6 relative shape-container">
268268
<div class="max-w-6xl mx-auto">
269269
<h2 class="section-title text-3xl md:text-4xl font-bold text-white mb-16">About Me</h2>
270270

271271
<div class="section-3d p-8 md:p-12">
272-
<div class="flex flex-col md:flex-row gap-10">
273-
<div class="md:w-2/3" data-aos="fade-right">
272+
<div class="flex flex-col md:flex-row gap-8">
273+
<div class="md:w-3/5" data-aos="fade-right">
274274
<p class="text-lg text-gray-300 leading-relaxed mb-6">
275275
Hello! I'm <span class="text-[#ff5e62] font-medium">Harshit Pawar</span>, an aspiring developer with a passion for creating and learning. I'm currently exploring various technologies and frameworks, eager to build impactful projects.
276276
</p>
@@ -282,33 +282,33 @@ <h2 class="section-title text-3xl md:text-4xl font-bold text-white mb-16">About
282282
</p>
283283
</div>
284284

285-
<div class="md:w-1/3" data-aos="fade-left">
286-
<div class="glassmorphism p-6 rounded-xl">
287-
<h3 class="text-xl font-bold mb-4 gradient-text blue">My Focus</h3>
288-
<ul class="space-y-3">
285+
<div class="md:w-2/5" data-aos="fade-left">
286+
<div class="glassmorphism p-5 rounded-xl">
287+
<h3 class="text-xl font-bold mb-3 gradient-text blue">My Focus</h3>
288+
<ul class="space-y-2">
289289
<li class="flex items-start">
290-
<div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-[#ff5e62]/20 rounded-full mr-3 mt-1">
290+
<div class="w-5 h-5 flex-shrink-0 flex items-center justify-center bg-[#ff5e62]/20 rounded-full mr-2 mt-1">
291291
<i class="fas fa-code text-[#ff5e62] text-xs"></i>
292292
</div>
293-
<span class="text-gray-300">Clean, efficient code</span>
293+
<span class="text-gray-300 text-sm">Clean, efficient code</span>
294294
</li>
295295
<li class="flex items-start">
296-
<div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-[#7459ea]/20 rounded-full mr-3 mt-1">
296+
<div class="w-5 h-5 flex-shrink-0 flex items-center justify-center bg-[#7459ea]/20 rounded-full mr-2 mt-1">
297297
<i class="fas fa-laptop-code text-[#7459ea] text-xs"></i>
298298
</div>
299-
<span class="text-gray-300">Exploring new technologies</span>
299+
<span class="text-gray-300 text-sm">Exploring new technologies</span>
300300
</li>
301301
<li class="flex items-start">
302-
<div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-[#00d2ff]/20 rounded-full mr-3 mt-1">
302+
<div class="w-5 h-5 flex-shrink-0 flex items-center justify-center bg-[#00d2ff]/20 rounded-full mr-2 mt-1">
303303
<i class="fas fa-lightbulb text-[#00d2ff] text-xs"></i>
304304
</div>
305-
<span class="text-gray-300">Problem-solving</span>
305+
<span class="text-gray-300 text-sm">Problem-solving</span>
306306
</li>
307307
<li class="flex items-start">
308-
<div class="w-6 h-6 flex-shrink-0 flex items-center justify-center bg-[#ff5e62]/20 rounded-full mr-3 mt-1">
308+
<div class="w-5 h-5 flex-shrink-0 flex items-center justify-center bg-[#ff5e62]/20 rounded-full mr-2 mt-1">
309309
<i class="fas fa-users text-[#ff5e62] text-xs"></i>
310310
</div>
311-
<span class="text-gray-300">Collaborative development</span>
311+
<span class="text-gray-300 text-sm">Collaborative development</span>
312312
</li>
313313
</ul>
314314
</div>
@@ -362,6 +362,7 @@ <h3 class="text-2xl font-bold text-white">Technologies</h3>
362362
<div class="tech-pill"><i class="fab fa-docker"></i>Docker</div>
363363
<div class="tech-pill"><i class="fas fa-cloud"></i>AWS</div>
364364
<div class="tech-pill"><i class="fas fa-dharmachakra"></i>Kubernetes</div>
365+
<div class="tech-pill"><i class="fab fa-linux"></i>Linux</div>
365366
</div>
366367
</div>
367368
</div>
@@ -388,16 +389,16 @@ <h3 class="text-2xl font-bold text-white">Tools</h3>
388389
</div>
389390
</div>
390391
</div>
391-
</section>
392+
</section>
392393

393394
<!-- Projects Section -->
394395
<section id="projects" class="py-24 px-4 sm:px-6 relative shape-container">
395396
<div class="max-w-6xl mx-auto">
396397
<h2 class="section-title text-3xl md:text-4xl font-bold text-white mb-16">My Projects</h2>
397398

398399
<div class="section-3d p-8 md:p-12">
399-
<div id="projects-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
400-
<!-- Projects will be loaded here by JavaScript -->
400+
<div id="projects-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
401+
<!-- Projects will be loaded here by JavaScript -->
401402
<div id="loading-message" class="col-span-full flex flex-col items-center py-12">
402403
<div class="w-12 h-12 rounded-full border-4 border-[#ff5e62] border-b-transparent animate-spin mb-4"></div>
403404
<p class="text-gray-400">Loading projects from GitHub...</p>
@@ -406,9 +407,9 @@ <h2 class="section-title text-3xl md:text-4xl font-bold text-white mb-16">My Pro
406407
<p id="error-message" class="col-span-full text-center text-[#ff5e62] hidden">Failed to load projects. Please try again later.</p>
407408
</div>
408409
</div>
409-
</section>
410+
</section>
410411

411-
<!-- Contact Section -->
412+
<!-- Contact Section -->
412413
<section id="contact" class="py-24 px-4 sm:px-6 relative shape-container">
413414
<div class="max-w-6xl mx-auto">
414415
<h2 class="section-title text-3xl md:text-4xl font-bold text-white mb-16">Let's Connect</h2>
@@ -450,9 +451,9 @@ <h3 class="text-2xl font-bold gradient-text mb-6">Get In Touch</h3>
450451
<div class="font-medium text-white">GitHub</div>
451452
<div class="text-gray-400 group-hover:text-[#7459ea] transition-colors">github.com/harshitpawar64</div>
452453
</div>
453-
</a>
454-
</div>
455-
</div>
454+
</a>
455+
</div>
456+
</div>
456457

457458
<div class="md:w-1/2 mt-12 md:mt-0" data-aos="fade-left">
458459
<div class="glassmorphism p-6 md:p-8 rounded-xl">

‎script.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const projectsContainer = document.getElementById('projects-container');
66
const loadingMessage = document.getElementById('loading-message');
77
const errorMessage = document.getElementById('error-message');
88
const currentYearElement = document.getElementById('current-year');
9+
const mainNav = document.getElementById('main-nav');
910

1011
// Initialize on page load
1112
document.addEventListener('DOMContentLoaded', () => {
@@ -50,6 +51,9 @@ document.addEventListener('DOMContentLoaded', () => {
5051
if (window.innerWidth > 768) {
5152
initParticleBackground();
5253
}
54+
55+
// Setup navigation bar scroll behavior
56+
setupNavScroll();
5357
});
5458

5559
// Create geometric shapes for visual interest
@@ -269,6 +273,10 @@ function initTypeEffect() {
269273
const container = typingTextElement.parentNode;
270274
container.classList.add('typing-container');
271275

276+
// Ensure proper vertical alignment
277+
container.style.display = 'flex';
278+
container.style.alignItems = 'center';
279+
272280
function typeEffect() {
273281
const currentPhrase = phrases[currentPhraseIndex];
274282

@@ -531,3 +539,26 @@ window.addEventListener('scroll', () => {
531539
element.style.transform = `translateY(${scrollPosition * speed * direction}px)`;
532540
});
533541
});
542+
543+
// Setup navigation bar scroll behavior
544+
function setupNavScroll() {
545+
const scrollThreshold = 100; // Pixels to scroll before changing nav style
546+
547+
window.addEventListener('scroll', () => {
548+
if (window.scrollY > scrollThreshold) {
549+
// Scrolled down - add background and shadow
550+
mainNav.classList.add('bg-opacity-90', 'backdrop-blur-md', 'shadow-lg');
551+
mainNav.style.backgroundColor = 'rgba(10, 10, 15, 0.9)';
552+
} else {
553+
// At top - transparent
554+
mainNav.classList.remove('bg-opacity-90', 'backdrop-blur-md', 'shadow-lg');
555+
mainNav.style.backgroundColor = 'transparent';
556+
}
557+
});
558+
559+
// Trigger once on page load to set initial state
560+
if (window.scrollY > scrollThreshold) {
561+
mainNav.classList.add('bg-opacity-90', 'backdrop-blur-md', 'shadow-lg');
562+
mainNav.style.backgroundColor = 'rgba(10, 10, 15, 0.9)';
563+
}
564+
}

‎style.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -203,19 +203,19 @@ p, li, a {
203203
position: relative;
204204
font-weight: 500;
205205
transition: color 0.3s var(--easing);
206-
padding: 0.5rem 1rem;
206+
padding: 0.5rem 0;
207207
}
208208

209209
.nav-link::after {
210210
content: '';
211211
position: absolute;
212-
bottom: 0;
213-
left: 50%;
212+
bottom: -2px;
213+
left: 0;
214214
width: 0;
215215
height: 2px;
216216
background: var(--gradient-primary);
217-
transition: all 0.3s var(--easing);
218-
transform: translateX(-50%);
217+
transition: width 0.3s var(--easing);
218+
transform: none;
219219
border-radius: 2px;
220220
}
221221

@@ -224,7 +224,7 @@ p, li, a {
224224
}
225225

226226
.nav-link:hover::after {
227-
width: 70%;
227+
width: 100%;
228228
}
229229

230230
/* Animated underline for section headers */
@@ -249,7 +249,7 @@ p, li, a {
249249
.typing-container {
250250
display: inline-block;
251251
min-width: 260px;
252-
height: 1.5em;
252+
height: 1.8em;
253253
vertical-align: bottom;
254254
line-height: 1.5;
255255
position: relative;
@@ -265,7 +265,7 @@ p, li, a {
265265
.typing-cursor {
266266
display: inline-block;
267267
width: 3px;
268-
height: 1.2em;
268+
height: 1.5em;
269269
background-color: var(--accent-1);
270270
margin-left: 2px;
271271
vertical-align: text-bottom;

0 commit comments

Comments
 (0)