diff --git a/src/index.md b/src/index.md index 1f61905..d1d991a 100644 --- a/src/index.md +++ b/src/index.md @@ -4,7 +4,7 @@ layout: "layout.njk" ---
-

Senior Network Engineer

+

Proven Network Engineer

10+ years of experience in troubleshooting, designing, and deploying robust network solutions. Let's build a reliable and efficient network for your business.

@@ -34,8 +34,10 @@ layout: "layout.njk"
{%- for service in services -%}
- -

{{ service.name }}

+
+ +

{{ service.name }}

+

{{ service.description }}

{%- endfor -%} @@ -50,8 +52,8 @@ layout: "layout.njk"

Technical Skills

{% for skill in skills %} -

{{ skill.name }}

-

{{ skill.keywords }}

+

{{ skill.name }}

+

{{ skill.keywords }}

{%- endfor -%}
@@ -89,7 +91,7 @@ layout: "layout.njk" {% if role.company %}

- {{ role.company }} + {{ role.company }}

{% endif %} @@ -110,12 +112,12 @@ layout: "layout.njk"
diff --git a/src/js/main.js b/src/js/main.js index 25db1dd..07f2394 100644 --- a/src/js/main.js +++ b/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; - -function type() { - const currentText = text.substring(0, index); - if (typewriterElement) { +// --- Typewriter Effect --- +if (typewriterElement) { + const text = "Specializing in ISP Environments"; + let index = 0; + + function type() { + const currentText = text.substring(0, index); typewriterElement.textContent = currentText; + if (index < text.length) { + index++; + setTimeout(type, 100); + } } - if (!isDeleting && 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({ - behavior: 'smooth' - }); + 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); + } +});