chore: complete code simplification pass

- Remove unused types file (src/types/index.ts)
- Remove unused EXTERNAL_LINK_CLASSES export from card-styles
- Document card container function purposes (cardContainerClasses, cardSurfaceContainerClasses)
- Unify project card props types with shared ProjectData interface
- Extract reusable Breadcrumb navigation component
- Create collection sorting utilities (byOrder, byYearDesc, byPublishDateDesc, byPatentDateDesc, byOrderOrYearDesc)
- Create test helper for AstroContainer (renderComponent, getTestContainer)
- Centralize Hero profile data in profile.ts
- Document ExternalLink variants in JSDoc
- Update simplify.md to mark all items complete

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: cbenge509

simplify.md

@@ -0,0 +1,41 @@
+---
+import type {HTMLAttributes} from 'astro/types';
+
+/**
+ * Breadcrumb navigation component for consistent page hierarchy display.
+ * Renders Home link followed by current page name.
+ *
+ * @example
+ * ```astro
+ * <Breadcrumb currentPage="About" />
+ * <Breadcrumb currentPage="Publications" class="mb-12" />
+ * ```
+ */
+interface Props extends HTMLAttributes<'nav'> {
+  /** Current page name to display */
+  currentPage: string;
+}
+
+const {currentPage, class: className, ...attrs} = Astro.props;
+---
+
+<nav
+  aria-label="Breadcrumb"
+  class:list={['mb-8', className]}
+  {...attrs}
+>
+  <ol class="flex items-center gap-2 text-sm text-text-secondary dark:text-text-secondary-dark">
+    <li>
+      <a
+        href="/"
+        class="min-h-11 inline-flex items-center hover:text-accent dark:hover:text-accent-dark transition-colors duration-150 focus-ring rounded"
+      >
+        Home
+      </a>
+    </li>
+    <li aria-hidden="true">/</li>
+    <li aria-current="page" class="text-text dark:text-text-dark">
+      {currentPage}
+    </li>
+  </ol>
+</nav>

src/components/Breadcrumb.astro

@@ -0,0 +1,71 @@
+import {experimental_AstroContainer as AstroContainer} from 'astro/container';
+import {describe, it, expect} from 'vitest';
+import Breadcrumb from './Breadcrumb.astro';
+
+describe('Breadcrumb', () => {
+  it('renders current page name', async () => {
+    const container = await AstroContainer.create();
+    const result = await container.renderToString(Breadcrumb, {
+      props: {currentPage: 'About'},
+    });
+    expect(result).toContain('About');
+  });
+
+  it('renders Home link', async () => {
+    const container = await AstroContainer.create();
+    const result = await container.renderToString(Breadcrumb, {
+      props: {currentPage: 'Test'},
+    });
+    expect(result).toContain('href="/"');
+    expect(result).toContain('Home');
+  });
+
+  it('has aria-label for accessibility', async () => {
+    const container = await AstroContainer.create();
+    const result = await container.renderToString(Breadcrumb, {
+      props: {currentPage: 'Test'},
+    });
+    expect(result).toContain('aria-label="Breadcrumb"');
+  });
+
+  it('marks current page with aria-current', async () => {
+    const container = await AstroContainer.create();
+    const result = await container.renderToString(Breadcrumb, {
+      props: {currentPage: 'Publications'},
+    });
+    expect(result).toContain('aria-current="page"');
+  });
+
+  it('has focus-ring on Home link', async () => {
+    const container = await AstroContainer.create();
+    const result = await container.renderToString(Breadcrumb, {
+      props: {currentPage: 'Test'},
+    });
+    expect(result).toContain('focus-ring');
+  });
+
+  it('has separator with aria-hidden', async () => {
+    const container = await AstroContainer.create();
+    const result = await container.renderToString(Breadcrumb, {
+      props: {currentPage: 'Test'},
+    });
+    expect(result).toContain('aria-hidden="true"');
+    expect(result).toContain('/');
+  });
+
+  it('applies custom class', async () => {
+    const container = await AstroContainer.create();
+    const result = await container.renderToString(Breadcrumb, {
+      props: {currentPage: 'Test', class: 'custom-breadcrumb'},
+    });
+    expect(result).toContain('custom-breadcrumb');
+  });
+
+  it('has minimum touch target on Home link', async () => {
+    const container = await AstroContainer.create();
+    const result = await container.renderToString(Breadcrumb, {
+      props: {currentPage: 'Test'},
+    });
+    expect(result).toContain('min-h-11');
+  });
+});

src/components/Breadcrumb.test.ts

@@ -7,13 +7,28 @@ import {cn} from '../utils/cn';
  *
  * Features:
  * - Always opens in new tab with security attributes
- * - Automatic aria-label enhancement
+ * - Automatic aria-label enhancement with "(opens in new tab)"
  * - Multiple visual variants and sizes
  * - Optional prefix icons (PDF, GitHub, external)
  * - Arrow suffix indicator
  * - Dark mode support
  * - Focus ring for keyboard navigation
  *
+ * VARIANTS:
+ * - `text`: Inline link within text, subtle hover. Use in paragraphs.
+ * - `button`: Solid filled button. Use for primary CTAs (Hero, Contact).
+ * - `button-outlined`: Border button. Use for secondary CTAs next to solid buttons.
+ * - `card-action`: Small link in cards. Use for PDF/Code/DOI links in cards.
+ * - `badge`: Pill-shaped with backdrop blur. Use for floating overlays on images.
+ *
+ * SIZES: xs | sm | base | lg
+ * - Button variants: affect padding and min-height
+ * - Text/card-action: affect gap and font-size only
+ *
+ * COLOR SCHEMES (button variant only):
+ * - `accent`: Blue background, white text (primary CTA)
+ * - `neutral`: Surface background, text color, accent hover
+ *
  * @example
  * ```astro
  * <!-- Text link -->
@@ -85,52 +100,43 @@ const {
   ...attrs
 } = Astro.props;
 
+// Base classes shared by button variants
+const buttonBase = 'inline-flex items-center justify-center rounded-lg transition-colors duration-150';
+
+// Button color schemes
+const buttonColors: Record<string, string> = {
+  accent: 'bg-accent dark:bg-accent text-white hover:bg-accent-hover dark:hover:bg-accent-hover',
+  neutral: cn(
+    'bg-surface dark:bg-surface-dark',
+    'text-text dark:text-text-dark',
+    'hover:bg-accent hover:text-white dark:hover:bg-accent-dark'
+  ),
+};
+
 // Variant-specific classes (including rounding - don't add generic rounded later)
 const variantClasses: Record<string, string> = {
   text: cn(
-    'inline-flex items-center',
+    'inline-flex items-center rounded',
     'text-text dark:text-text-dark',
     'hover:text-accent dark:hover:text-accent-dark',
-    'transition-colors duration-150',
-    'rounded'
+    'transition-colors duration-150'
   ),
-  button:
-    colorScheme === 'accent'
-      ? cn(
-          'inline-flex items-center justify-center',
-          'rounded-lg font-medium',
-          'bg-accent dark:bg-accent text-white',
-          'hover:bg-accent-hover dark:hover:bg-accent-hover',
-          'transition-colors duration-150'
-        )
-      : cn(
-          'inline-flex items-center justify-center',
-          'rounded-lg font-medium',
-          'bg-surface dark:bg-surface-dark',
-          'text-text dark:text-text-dark',
-          'hover:bg-accent hover:text-white dark:hover:bg-accent-dark',
-          'transition-colors duration-150'
-        ),
+  button: cn(buttonBase, 'font-medium', buttonColors[colorScheme]),
   'button-outlined': cn(
-    'inline-flex items-center justify-center',
-    'rounded-lg',
+    buttonBase,
     'border border-border dark:border-border-dark',
     'text-text dark:text-text-dark',
-    'hover:bg-surface-dark/5 dark:hover:bg-surface/5',
-    'transition-colors duration-150'
+    'hover:bg-surface-dark/5 dark:hover:bg-surface/5'
   ),
   'card-action': cn(
-    'inline-flex items-center',
+    'inline-flex items-center rounded',
     'text-accent dark:text-accent-dark',
     'hover:underline',
-    'px-1 -mx-1',
-    'rounded'
+    'px-1 -mx-1'
   ),
   badge: cn(
-    'inline-flex items-center',
-    'rounded-full font-medium',
-    'bg-bg/90 dark:bg-bg-dark/90',
-    'backdrop-blur-sm',
+    'inline-flex items-center rounded-full font-medium',
+    'bg-bg/90 dark:bg-bg-dark/90 backdrop-blur-sm',
     'text-text dark:text-text-dark',
     'hover:bg-accent hover:text-white dark:hover:bg-accent-dark',
     'transition-colors duration-150'

src/components/ExternalLink.astro

@@ -4,7 +4,7 @@ import {Image} from 'astro:assets';
 import ProjectTag from './ProjectTag.astro';
 import ExternalLink from './ExternalLink.astro';
 import placeholderImage from '../assets/images/projects/placeholder.svg';
-import {CATEGORY_TO_VARIANT, CATEGORY_LABELS} from '../utils/project-categories';
+import {CATEGORY_TO_VARIANT, CATEGORY_LABELS, type ProjectData} from '../utils/project-categories';
 
 /**
  * Featured Project Card component for displaying highlighted projects
@@ -28,17 +28,7 @@ import {CATEGORY_TO_VARIANT, CATEGORY_LABELS} from '../utils/project-categories'
  */
 export interface Props extends HTMLAttributes<'article'> {
   /** Project data from content collection */
-  project: {
-    title: string;
-    description: string;
-    image: ImageMetadata;
-    category: 'leader' | 'builder' | 'winner' | 'research';
-    skills: string[];
-    tools: string[];
-    githubUrl?: string;
-    achievement?: string;
-    affiliation?: string;
-  };
+  project: ProjectData;
   /** Project slug for linking to detail page */
   slug: string;
 }

src/components/FeaturedProjectCard.astro

@@ -2,7 +2,7 @@
 import type {HTMLAttributes} from 'astro/types';
 import {Image} from 'astro:assets';
 import profileImage from '../assets/images/profile/portfolio_image.jpg';
-import {getSocialLink} from '../data/profile';
+import {getSocialLink, HERO_PROFILE} from '../data/profile';
 import ExternalLink from './ExternalLink.astro';
 
 /**
@@ -30,17 +30,8 @@ interface Props extends HTMLAttributes<'section'> {
 
 const {class: className, showImage = true, ...attrs} = Astro.props;
 
-// Profile data - could be externalized to content collection later
-const profile = {
-  name: 'Cris Benge',
-  role: 'Head of Federal Innovation, Google',
-  credentials: [
-    {label: 'Senior Leadership', type: 'education' as const},
-    {label: 'Research', type: 'education' as const},
-    {label: 'Data Science', type: 'education' as const},
-    {label: 'TS/SCI w/ Polygraph', type: 'clearance' as const},
-  ],
-};
+// Profile data from centralized source
+const profile = HERO_PROFILE;
 ---
 
 <section