Align RSS feed cards with shared Phosphor glow-border styling

[Copilot]

The Latest Thoughts cards were using bespoke border/glow styling that diverged from the shared Phosphor treatment used by the Portfolio case study cards. This change switches the RSS cards onto the same glow-border iridescent styling contract and removes the local overrides that were muting the effect.

• Shared Phosphor card treatment

  • Add glow-border to RSS feed cards so they use the same shimmer/border/glow stack as Portfolio cards
  • Keep the existing card structure and hover lift behavior unchanged

• Remove local style overrides

  • Drop the hand-rolled border, box-shadow, and hover border/shadow rules from .feed-card
  • Retain only the local shell/layout concerns: overflow and transform transition/hover lift

• Tighten the component contract

  • Update the RssFeed source test to assert the shared class composition
  • Assert that the local .feed-card block now only contains the remaining layout/transform rules

<article class="feed-card glow-border iridescent rounded-xl p-6 flex flex-col">

Original prompt

Four polish fixes for the Phosphor design system

---

Fix 1 — RssFeed "Latest Thoughts" card shimmer/border should match Portfolio "Work That Ships" cards exactly

File: src/components/sections/RssFeed.svelte

The feed-card class has its own hand-rolled border, box-shadow, and hover styles that don't match the Phosphor .glow-border.iridescent treatment used on the Portfolio case study cards. The feed cards already have class="feed-card iridescent rounded-xl p-6 flex flex-col" — they use .iridescent — but .feed-card overrides the border and shadow with custom values that are weaker/different.

Changes:

1. Remove from .feed-card the border, box-shadow and hover border-color/box-shadow rules — let .glow-border and .iridescent from global.css handle those (exactly as Portfolio cards do). Keep only the transition, overflow: hidden, and transform rules in .feed-card.
2. Add glow-border to the article's class list alongside iridescent:

   <!-- Before: -->
   <article class="feed-card iridescent rounded-xl p-6 flex flex-col" ...>
   <!-- After: -->
   <article class="feed-card glow-border iridescent rounded-xl p-6 flex flex-col" ...>

3. Remove the now-redundant hover border/shadow overrides from .feed-card:hover — keep only transform: translateY(-3px).

The goal: feed cards should be visually identical to Portfolio case study cards in their border, glow, and shimmer treatment.

---

Fix 2 — Delete redundant contact info block from Contact.svelte

File: src/components/sections/Contact.svelte

Find and delete the entire "Contact details" block containing the phone number and location. This is the <div class="space-y-6 mb-6"> block that contains:

• The <a href="tel:+19807297877"> phone link with the TEL label and "980.729.7877" text
• The location <div class="flex items-center gap-4"> with the LOC label and "Charlotte, North Carolina" text

Delete both <a> and <div> elements and their full contents inside that space-y-6 wrapper. Also delete the wrapper <div class="space-y-6 mb-6"> itself since it will be empty.

Do not touch anything else — the Quick Start cards, the heading, the form, or the Calendly button remain untouched.

---

Fix 3 — Portfolio case study card label chips: apply full Phosphor bracket-tag chip treatment including iridescent shimmer

File: src/components/sections/Portfolio.svelte

The label chip in the top-left of each case study card (e.g. "Azure Migration", "Zero Trust") currently uses the base .chip class with a plain blue border/color:

<span class="chip" style="color: var(--color-primary); border-color: rgba(0,120,212,0.3);">
  {study.label}
</span>

Replace with a Phosphor bracket-tag chip that:

1. Uses [ LABEL ] bracket wrapping with the same bracket style as the Hero role chips
2. Applies iridescent shimmer (matching the card's own shimmer treatment)
3. Uses the cyan color palette (not the blue --color-primary) to visually match the hero chips

Replace the <span class="chip" ...> with:

<span class="case-label iridescent">
  <span class="case-label-bracket" aria-hidden="true">[</span>
  {study.label}
  <span class="case-label-bracket" aria-hidden="true">]</span>
</span>

Add to <style> in Portfolio.svelte:

/* Phosphor — bracket chip for case study card labels */
.case-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.06);
  color: var(--color-cyan);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.case-label-bracket {
  color: var(--color-cyan);
  opacity: 0.45;
  font-weight: 300;
}

This gives the label chips the same [ TAG ] bracket treatment and iridescent shimmer as the Hero role tags, making them consistent across the site.

---

Fix 4 — Footer top spacing: add padding-top so content doesn't sit flush against the border

File: src/components/layout/Footer.svelte

The <div class="section-container py-12"> already has py-12 but the content is still sitting nearly flush against the top border-top: 1px solid var(--color-border) of the footer element.

The issue is the footer <footer> element itself has no top padding, and section-container with py-12 should be sufficient — but check if there's something compressing it.

Change py-12 to pt-16 pb-12 on the <div class="section-container py-12">:

<!-- Before: -->
<div class="section-container py-12">
<!-- After: -->
<div class="section-container pt-16 pb-12">

This adds a clear breathing gap between the footer border line and the first row of content (the Brand / Navigation / Connect columns).

---

Files changed

File	Change
src/components/sections/RssFeed.svelte	Add glow-border c...

This pull request was created from Copilot chat.

[Copilot]

Pull request overview

This PR aligns the “Latest Thoughts” RSS feed cards with the shared Phosphor card styling contract used elsewhere (notably Portfolio cards), by switching them to the shared glow-border iridescent utility treatment and removing bespoke border/glow overrides.

Changes:

• Add glow-border to RSS feed card markup so global Phosphor utilities own the border/glow styling.
• Remove local .feed-card border/shadow and hover border/shadow overrides, keeping only layout/transform behavior.
• Update the RssFeed source test to assert the new class composition and the slimmed-down .feed-card styling.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/components/sections/RssFeed.svelte	Applies shared glow-border iridescent styling to feed cards and removes local border/shadow overrides.
src/components/sections/RssFeed.test.ts	Updates tests to assert the new shared class contract and reduced local .feed-card CSS.

---

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