page load fix

src/index.md

@@ -4,7 +4,7 @@ layout: "layout.njk"
 ---
 <!-- Hero Section -->
 <section id="hero" class="text-center py-20">
-    <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Senior Network Engineer</h1>
+    <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Proven Network Engineer</h1>
     <p id="typewriter" class="text-xl md:text-2xl text-blue-400 font-medium mb-8 h-8"></p>
     <p class="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto mb-8">10+ years of experience in troubleshooting, designing, and deploying robust network solutions. Let's build a reliable and efficient network for your business.</p>
     <div class="flex justify-center space-x-4">
@@ -34,8 +34,10 @@ layout: "layout.njk"
     <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
         {%- for service in services -%}
         <div class="card">
+            <div class="flex md:flex-row items-center mb-2">
                 <i class="fas {{ service.icon }} icon"></i>
-            <h3 class="text-xl font-bold mb-2 text-white">{{ service.name }}</h3>
+                <h3 class="text-xl font-bold text-white">{{ service.name }}</h3>
+            </div>
             <p class="text-gray-400">{{ service.description }}</p>
         </div>
         {%- endfor -%}
@@ -50,8 +52,8 @@ layout: "layout.njk"
             <h3 class="text-2xl font-bold mb-6 text-center text-white">Technical Skills</h3>
             <div class="card">
                 {% for skill in skills %}
-                <h4 class="text-lg font-semibold mb-2 text-blue-400">{{ skill.name }}</h4>
-                <p class="text-gray-400 mb-4">{{ skill.keywords }}</p>
+                <h4 class="text-lg font-semibold mb-1 text-blue-400">{{ skill.name }}</h4>
+                <p class="text-gray-400 mb-5">{{ skill.keywords }}</p>
                 {%- endfor -%}
             </div>
         </div>

src/js/main.js

@@ -1,72 +1,89 @@
-// Mobile menu toggle
+// --- Element Selectors ---
 const mobileMenuButton = document.getElementById('mobile-menu-button');
 const mobileMenu = document.getElementById('mobile-menu');
+const header = document.querySelector('header');
+const typewriterElement = document.getElementById('typewriter');
 
+// --- Mobile Menu Toggle ---
 if (mobileMenuButton && mobileMenu) {
     mobileMenuButton.addEventListener('click', () => {
         mobileMenu.classList.toggle('hidden');
     });
 }
 
-// Typewriter Effect
-const typewriterElement = document.getElementById('typewriter');
-const text = "Specializing in ISP Environments";
-let index = 0;
-let isDeleting = false;
+// --- Typewriter Effect ---
+if (typewriterElement) {
+    const text = "Specializing in ISP Environments";
+    let index = 0;
     
-function type() {
+    function type() {
         const currentText = text.substring(0, index);
-    if (typewriterElement) {
         typewriterElement.textContent = currentText;
-    }
-    if (!isDeleting && index < text.length) {
+        if (index < text.length) {
             index++;
             setTimeout(type, 100);
-    } else {
-        // Keep the full text visible
         }
+    }
+    // Start typing effect after a short delay
+    setTimeout(type, 500);
 }
 
-// Start typing effect on load
-document.addEventListener('DOMContentLoaded', () => {
-    if (typewriterElement) {
-        setTimeout(type, 500);
-    }
-});
+// --- Reusable Scroll Function ---
+/**
+ * Instantly scrolls to a target element, accounting for the sticky header.
+ * @param {string} targetId The ID of the element to scroll to.
+ */
+function jumpToTarget(targetId) {
+    const targetElement = document.getElementById(targetId);
+    if (!targetElement) return;
 
-// Smooth scrolling for anchor links
+    const headerOffset = header ? header.offsetHeight : 0;
+    const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
+    const offsetPosition = elementPosition - headerOffset;
+
+    // Use 'auto' behavior for an instant jump
+    window.scrollTo({
+        top: offsetPosition,
+        behavior: 'auto' 
+    });
+}
+
+// --- Event Listeners for Scrolling ---
+
+// 1. Handle clicks on section links (e.g., /#about)
 document.querySelectorAll('a[href^="/#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
-        // Check if the current page is the homepage.
         const isHomePage = window.location.pathname === '/';
         const targetId = this.getAttribute('href').substring(2);
-        const targetElement = document.getElementById(targetId);
 
-        // If we are on the homepage AND the target element exists, then smooth scroll.
-        if (isHomePage && targetElement) {
-            e.preventDefault(); // Stop the browser from navigating.
-            targetElement.scrollIntoView({
+        if (isHomePage) {
+            e.preventDefault();
+            // For on-page clicks, we still want a smooth scroll
+            const targetElement = document.getElementById(targetId);
+            if(targetElement) {
+                const headerOffset = header ? header.offsetHeight : 0;
+                const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
+                const offsetPosition = elementPosition - headerOffset;
+                window.scrollTo({
+                    top: offsetPosition,
                     behavior: 'smooth'
                 });
             }
-        // If we are on any other page (like /blog/), this 'if' condition is false,
-        // so e.preventDefault() is NOT called, and the browser performs its
-        // default action: navigating to the homepage and jumping to the hash.
+        }
+        // If not on the homepage, let the browser navigate.
+        // The 'load' event listener below will handle the final positioning.
 
-        // Close mobile menu on any nav link click
         if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
             mobileMenu.classList.add('hidden');
         }
     });
 });
 
-// Smooth scrolling for the main home link
+// 2. Handle clicks on the main home link (e.g., /)
 document.querySelectorAll('a[href="/"]').forEach(anchor => {
     anchor.addEventListener('click', function(e) {
-        // If we are already on the homepage
         if (window.location.pathname === '/') {
-            e.preventDefault(); // Prevent the page from reloading
-            // Scroll smoothly to the top of the page
+            e.preventDefault();
             window.scrollTo({
                 top: 0,
                 behavior: 'smooth'
@@ -74,3 +91,13 @@ document.querySelectorAll('a[href="/"]').forEach(anchor => {
         }
     });
 });
+
+// 3. Handle positioning after page load if there's a hash in the URL
+// We use the 'load' event to ensure all assets (like images) are loaded
+// and the page dimensions are final before we calculate the scroll.
+window.addEventListener('load', () => {
+    if (window.location.hash) {
+        const targetId = window.location.hash.substring(1);
+        jumpToTarget(targetId);
+    }
+});