Polish: accessibility, layout, and consistency fixes

- Remove duplicate theme-color meta in BaseLayout
- Fix Navigation aria-current: remove attr instead of setting to 'false'
- Make 404 heading responsive (text-4xl on mobile)
- Remove redundant min-h-screen from 404 layout
- Use CSS custom properties for blog prose colors instead of hardcoded hex
- Add focus-visible ring to FAQ summary elements
- Add Services and Now links to Footer
- Sort projects by featured flag

Author: Jamesking56

public/James King CV.pdf

@@ -12,6 +12,10 @@ const currentYear = new Date().getFullYear();
       </div>
 
       <div class="flex items-center gap-4">
+        <a href="/services" class="text-tokyo-muted hover:text-tokyo-fg transition-colors">Services</a>
+        <span class="text-tokyo-border">|</span>
+        <a href="/now" class="text-tokyo-muted hover:text-tokyo-fg transition-colors">Now</a>
+        <span class="text-tokyo-border">|</span>
         <a href="/humans.txt" class="text-tokyo-muted hover:text-tokyo-fg transition-colors">humans.txt</a>
         <span class="text-tokyo-border">|</span>
         <a href="https://github.com/Jamesking56?utm_source=jamesking.dev&utm_medium=referral" target="_blank" rel="noopener external" class="text-tokyo-accent underline hover:text-tokyo-accent-hover" aria-label="GitHub (opens in new tab)">GitHub<span class="text-xs text-tokyo-muted">↗</span></a>

src/components/Footer.astro

@@ -81,7 +81,11 @@ const currentPath = Astro.url.pathname;
       link.classList.toggle('text-tokyo-fg', !isActive);
       link.classList.toggle('hover:text-tokyo-fg-bright', !isActive);
       link.classList.toggle('hover:bg-tokyo-border/50', !isActive);
-      link.setAttribute('aria-current', isActive ? 'page' : 'false');
+      if (isActive) {
+        link.setAttribute('aria-current', 'page');
+      } else {
+        link.removeAttribute('aria-current');
+      }
     });
   }
 

src/components/Navigation.astro

@@ -29,7 +29,6 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="generator" content={Astro.generator} />
-    <meta name="theme-color" content="#1a1b26" />
     <ClientRouter fallback="swap" />
 
     <!-- Primary Meta Tags -->

src/layouts/BaseLayout.astro

@@ -26,7 +26,7 @@ const selectedJoke = jokes[Math.floor(Math.random() * jokes.length)];
 ---
 
 <Layout title="404 - Page Not Found">
-  <div class="min-h-screen grid grid-rows-[auto_1fr_auto]">
+  <div class="grid grid-rows-[auto_1fr_auto]">
     <div class="max-w-4xl mx-auto px-4 py-12 flex-1 flex items-center justify-center">
       <div class="text-center">
         <div class="bg-tokyo-bg-alt border border-tokyo-border rounded-lg overflow-hidden mb-8">
@@ -38,7 +38,7 @@ const selectedJoke = jokes[Math.floor(Math.random() * jokes.length)];
           </div>
           <div class="p-8">
             <p class="text-tokyo-muted mb-2">$ echo $?</p>
-            <h1 class="text-6xl font-bold text-tokyo-fg-bright mb-4">404</h1>
+            <h1 class="text-4xl sm:text-6xl font-bold text-tokyo-fg-bright mb-4">404</h1>
             <p class="text-xl text-tokyo-fg mb-6">Page not found</p>
             <div class="bg-tokyo-bg border border-tokyo-border rounded p-4 mb-4 text-left font-mono text-sm">
               <span class="text-tokyo-success">$</span> <span class="text-tokyo-cyan">{selectedJoke.code}</span>

src/pages/404.astro

@@ -79,13 +79,13 @@ const typeColors: Record<string, string> = {
 
     <style>
       .prose h2 {
-        border-left: 3px solid #7aa2f7;
+        border-left: 3px solid var(--color-tokyo-accent);
         padding-left: 1rem;
-        background-color: #24283b;
+        background-color: var(--color-tokyo-bg-alt);
         padding-top: 0.75rem;
         padding-bottom: 0.75rem;
         border-radius: 0 0.25rem 0.25rem 0;
-        color: #c0caf5;
+        color: var(--color-tokyo-fg-bright);
         margin-top: 2rem;
         margin-bottom: 1rem;
       }
@@ -98,7 +98,7 @@ const typeColors: Record<string, string> = {
       .prose figure figcaption {
         margin-top: 0;
         font-size: 0.875rem;
-        color: #565f89;
+        color: var(--color-tokyo-muted);
       }
     </style>
 

src/pages/blog/[slug].astro

@@ -55,7 +55,7 @@ const faqs = [
     <div class="space-y-4">
       {faqs.map(faq => (
         <details class="bg-tokyo-bg-alt border border-tokyo-border rounded group">
-          <summary class="p-4 cursor-pointer text-tokyo-fg-bright font-semibold flex items-center justify-between">
+          <summary class="p-4 cursor-pointer text-tokyo-fg-bright font-semibold flex items-center justify-between focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tokyo-accent/50 focus-visible:rounded">
             {faq.question}
             <span class="text-tokyo-muted group-open:rotate-90 transition-transform">&#9658;</span>
           </summary>

src/pages/faq.astro

@@ -3,10 +3,11 @@ import Layout from '../../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
 
 const allProjects = await getCollection('projects');
-const vsCore = allProjects.find(p => p.id === 'vs-core');
-const others = allProjects.filter(p => p.id !== 'vs-core' && p.id !== 'jamesking-dev');
-const jameskingDev = allProjects.find(p => p.id === 'jamesking-dev');
-const projects = [vsCore, ...others, jameskingDev];
+const sorted = allProjects.sort((a, b) => {
+  if (a.data.featured && !b.data.featured) return -1;
+  if (!a.data.featured && b.data.featured) return 1;
+  return 0;
+});
 ---
 
 <Layout title="Projects" description="Side projects and SaaS products built by James King. Includes Varsuite Core (multi-tenant SaaS), cloudfleet-cli-aur, dotfiles, and coding standards.">
@@ -17,7 +18,7 @@ const projects = [vsCore, ...others, jameskingDev];
     </p>
 
     <div class="grid md:grid-cols-2 gap-4">
-      {projects.map(project => (
+      {sorted.map(project => (
         <a href={`/projects/${project.id}`} class="bg-tokyo-bg-alt border border-tokyo-border rounded p-4 hover:border-tokyo-accent transition-colors group">
           <h3 class="text-lg font-semibold text-tokyo-fg-bright group-hover:text-tokyo-accent transition-colors">
             {project.data.title}