[WIP] Add LinkedIn button and reorder contact button row

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Summary

Four UI improvements based on review of the live site (screenshot attached):

---

1. Add LinkedIn button & reorder the contact button row (src/components/sections/Contact.svelte)

In the "Social / links" flex row (currently: GitHub → Book Me → Blog):

• Add a LinkedIn btn btn-outline button linking to https://www.linkedin.com/in/jaysonknight (or the correct LinkedIn URL — use a placeholder if unsure)
• Move the red Book Me button to the end of the row so the final order is: GitHub → LinkedIn → Blog → Book Me

<!-- Social / links  (lines ~154-173 in Contact.svelte) -->
<div class="flex flex-wrap gap-3">
  <a href="https://github.com/jaypatrick" target="_blank" rel="noopener noreferrer" class="btn btn-outline" style="padding: 0.5rem 1.25rem; font-size: 0.8rem;">GitHub</a>
  <a href="https://www.linkedin.com/in/jaysonknight" target="_blank" rel="noopener noreferrer" class="btn btn-outline" style="padding: 0.5rem 1.25rem; font-size: 0.8rem;">LinkedIn</a>
  <a href="/blog" class="btn btn-outline" style="padding: 0.5rem 1.25rem; font-size: 0.8rem;">Blog</a>
  <a href="https://calendly.com/jaysonknight" onclick={openCalendlyPopup} class="btn btn-red" style="padding: 0.5rem 1.25rem; font-size: 0.8rem;">📅 Book Me</a>
</div>

---

2. Fix Blog nav tab — other links stop working after clicking Blog (src/components/layout/Header.svelte)

Root cause: The navLinks array uses relative hash hrefs (#home, #about, etc.). After navigating to /blog, clicking those hash anchors resolves to /blog#about (same page) instead of /#about on the home page — nothing happens.

Fix: Change all hash-based hrefs in navLinks to absolute paths so they work from any route:

const navLinks = [
  { href: '/#home',      label: 'Home' },
  { href: '/#about',     label: 'About' },
  { href: '/#services',  label: 'Services' },
  { href: '/#portfolio', label: 'Portfolio' },
  { href: '/blog',       label: 'Blog' },
  { href: '/#contact',   label: 'Contact' },
];

Also update the activeHref comparison logic — the scroll-based IntersectionObserver sets activeHref to #about, #services, etc. (without the leading /). After changing the hrefs to /#about, the activeHref === href check will fail. Fix by either:

• Storing activeHref with the leading slash too (e.g. /#about), or
• Keeping internal activeHref values as bare hashes and comparing href.endsWith(activeHref) or stripping the / prefix for the comparison.

The cleanest approach: keep the internal activeHref as bare #section-id for the observer logic, and when comparing for active state do: activeHref === href || '/' + activeHref === href.

---

3. Make the embedded Calendly widget dark (src/components/sections/Contact.svelte)

Calendly inline widgets accept theming via URL query parameters. Update both the initInlineWidget URL and the data-url attribute on the container div to include dark theme params matching the site palette:

https://calendly.com/jaysonknight?background_color=0d1117&text_color=e2e8f0&primary_color=00d4ff&hide_gdpr_banner=1

In the $effect block (around line 97):

calendly.initInlineWidget({
  url: 'https://calendly.com/jaysonknight?background_color=0d1117&text_color=e2e8f0&primary_color=00d4ff&hide_gdpr_banner=1',
  parentElement: calendlyInlineContainer,
});

And update the data-url attribute on the container div (around line 343):

data-url="https://calendly.com/jaysonknight?background_color=0d1117&text_color=e2e8f0&primary_color=00d4ff&hide_gdpr_banner=1"

---

4. Tighten vertical spacing — reduce large gaps between sections (src/styles/global.css + src/components/sections/Contact.svelte)

global.css — reduce section-pad:

.section-pad {
  padding-top: 4rem;    /* was 5rem */
  padding-bottom: 4rem; /* was 5rem */
}

@media (min-width: 1024px) {
  .section-pad {
    padding-top: 6rem;    /* was 8rem */
    padding-bottom: 6rem; /* was 8rem */
  }
}

Contact.svelte — tighten the inner gaps:

• Change gap-16 → gap-10 on the two-column grid (line ~110)
• Change mb-10 → mb-6 on the intro paragraph (line ~119)
• Change mb-10 → mb-6 on the contact details block (line ~125)
• Change mt-16 → mt-10 on the Calendly section wrapper (line ~337)

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: - Add LinkedIn to the row of buttons including Github, Book Me, Blog. Move red book me button to the end of the row.

• When clicking the Blog header tab, once you click it, you can't click on other tab menu links, nothing happens.
• Can the embedded "Book Directly" Calendly widget be made dark? The white on black does not look good.
• Tighten up some of the vertical spacing, there are large gaps between sections in some places

Assistant: Now I have everything I need. Let me create the PR with all fou...

This pull request was created from Copilot chat.

[Copilot]

Pull request overview

Updates site UI/navigation to improve discoverability (LinkedIn link), fix header section links when navigating from /blog, and tighten spacing + Calendly embed theming.

Changes:

• Reduced global section padding and tightened Contact section internal spacing.
• Added a LinkedIn button and reordered the Contact “Social / links” button row.
• Fixed Header nav section links to work from /blog by using absolute /#section hrefs and updated active-link detection.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/styles/global.css	Reduces .section-pad vertical padding for tighter section spacing site-wide.
src/components/sections/Contact.svelte	Adds LinkedIn CTA, reorders buttons, tightens layout gaps, and applies dark theme params to Calendly inline widget via a shared URL constant.
src/components/layout/Header.svelte	Makes hash nav links absolute (/#...) and introduces isActiveLink to keep active-state styling working with the new href format and /blog.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.