audit: WCAG, SEO, responsiveness, and optimization pass

app/components/shared/GuideModal.tsx

@@ -9,26 +9,59 @@ interface GuideModalProps {
 	onClose: () => void;
 }
 
+const FOCUSABLE_SELECTORS =
+	'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
 const GuideModal: React.FC<GuideModalProps> = ({ isOpen, onClose }) => {
 	const modalRef = useRef<HTMLDivElement>(null);
+	const closeButtonRef = useRef<HTMLButtonElement>(null);
 
-	// Focus management
+	// Focus the close button when modal opens
 	useEffect(() => {
 		if (isOpen) {
-			modalRef.current?.focus();
+			closeButtonRef.current?.focus();
 		}
 	}, [isOpen]);
 
+	// Focus trap + close key handling
 	const handleKeyDown = useCallback(
 		(e: KeyboardEvent) => {
 			if (!isOpen) return;
 
-			switch (e.key) {
-				case "Escape":
-				case "?":
+			if (e.key === "Escape" || e.key === "?") {
+				e.preventDefault();
+				onClose();
+				return;
+			}
+
+			// Tab trap: keep focus inside the modal
+			if (e.key === "Tab") {
+				const modal = modalRef.current;
+				if (!modal) return;
+
+				const focusable = Array.from(
+					modal.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS),
+				).filter((el) => !el.hasAttribute("disabled"));
+
+				if (focusable.length === 0) {
 					e.preventDefault();
-					onClose();
-					break;
+					return;
+				}
+
+				const first = focusable[0];
+				const last = focusable[focusable.length - 1];
+
+				if (e.shiftKey) {
+					if (document.activeElement === first) {
+						e.preventDefault();
+						last.focus();
+					}
+				} else {
+					if (document.activeElement === last) {
+						e.preventDefault();
+						first.focus();
+					}
+				}
 			}
 		},
 		[isOpen, onClose],
@@ -52,6 +85,9 @@ const GuideModal: React.FC<GuideModalProps> = ({ isOpen, onClose }) => {
 				>
 					<motion.div
 						ref={modalRef}
+						role="dialog"
+						aria-modal="true"
+						aria-labelledby="guide-modal-title"
 						className="guide-modal guide-modal--v2"
 						initial={{ opacity: 0, scale: 0.95, y: 20 }}
 						animate={{ opacity: 1, scale: 1, y: 0 }}
@@ -61,14 +97,16 @@ const GuideModal: React.FC<GuideModalProps> = ({ isOpen, onClose }) => {
 						tabIndex={-1}
 					>
 						<div className="guide-modal__header">
-							<h2>Guide</h2>
+							<h2 id="guide-modal-title">Guide</h2>
 							<button
+								ref={closeButtonRef}
 								type="button"
 								className="guide-modal__close"
 								onClick={onClose}
 								aria-label="Close guide"
 							>
-								<kbd>?</kbd> / <kbd>Esc</kbd>
+								<kbd aria-hidden="true">?</kbd> /{" "}
+								<kbd aria-hidden="true">Esc</kbd>
 							</button>
 						</div>
 

app/globals.scss

@@ -35,6 +35,19 @@ code {
     source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
+/* Visually hidden but available to screen readers */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 ::-webkit-scrollbar {
   display: none;
 }

app/layout.tsx

@@ -3,35 +3,90 @@ import "./globals.scss";
 import "./styles/guide-modal.scss";
 import Script from "next/script";
 
+const BASE_URL = "https://carsonsgit.github.io";
+
 export const metadata: Metadata = {
-	title: "carsonSgit Portfolio",
+	title: "Carson Spriggs — Software Developer & Student",
 	description:
-		"My personal portfolio. Showcasing my projects, experience, and more.",
+		"Portfolio of Carson Spriggs, a software developer and engineering student at Memorial University. Co-Chair of CUSEC, CS alumni of John Abbott College. Projects in AI, IoT, full-stack, and more.",
+	authors: [{ name: "Carson Spriggs" }],
+	keywords: [
+		"Carson Spriggs",
+		"software developer",
+		"portfolio",
+		"full-stack",
+		"AI",
+		"React",
+		"Next.js",
+		"TypeScript",
+		"Memorial University",
+		"CUSEC",
+		"John Abbott College",
+	],
 	icons: {
 		icon: "/favicon.ico",
 	},
 	manifest: "/manifest.json",
+	alternates: {
+		canonical: BASE_URL,
+	},
 	openGraph: {
-		title: "carsonSgit Portfolio",
+		title: "Carson Spriggs — Software Developer & Student",
 		description:
-			"My personal portfolio. Showcasing my projects, experience, and more.",
-		url: "https://carsonsgit.github.io",
-		siteName: "carsonSgit Portfolio",
+			"Portfolio of Carson Spriggs, a software developer and engineering student at Memorial University. Co-Chair of CUSEC, CS alumni of John Abbott College.",
+		url: BASE_URL,
+		siteName: "Carson Spriggs Portfolio",
 		locale: "en_US",
 		type: "website",
 	},
 	twitter: {
 		card: "summary",
-		title: "carsonSgit Portfolio",
+		title: "Carson Spriggs — Software Developer & Student",
 		description:
-			"My personal portfolio. Showcasing my projects, experience, and more.",
+			"Portfolio of Carson Spriggs, a software developer and engineering student at Memorial University. Co-Chair of CUSEC, CS alumni of John Abbott College.",
 	},
 };
 
 export const viewport: Viewport = {
 	themeColor: "#0d0d0f",
 };
 
+const jsonLd = {
+	"@context": "https://schema.org",
+	"@type": "Person",
+	name: "Carson Spriggs",
+	url: BASE_URL,
+	sameAs: [
+		"https://github.com/carsonSgit",
+		"https://linkedin.com/in/carsonspriggs",
+	],
+	jobTitle: "Software Developer",
+	worksFor: {
+		"@type": "Organization",
+		name: "Botpress",
+	},
+	alumniOf: [
+		{
+			"@type": "CollegeOrUniversity",
+			name: "Memorial University of Newfoundland",
+			url: "https://www.mun.ca/",
+		},
+		{
+			"@type": "CollegeOrUniversity",
+			name: "John Abbott College",
+			url: "https://www.johnabbott.qc.ca/",
+		},
+	],
+	knowsAbout: [
+		"Software Development",
+		"Artificial Intelligence",
+		"IoT",
+		"Full-Stack Development",
+		"DevOps",
+		"Machine Learning",
+	],
+};
+
 export default function RootLayout({
 	children,
 }: {
@@ -40,6 +95,8 @@ export default function RootLayout({
 	return (
 		<html lang="en" data-theme="mono">
 			<head>
+				{/* Preconnect to analytics origin to reduce latency */}
+				<link rel="preconnect" href="https://cloud.umami.is" />
 				<link
 					rel="preload"
 					href="/fonts/CommitMono-400-Regular.woff2"
@@ -54,14 +111,21 @@ export default function RootLayout({
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
+				<script
+					type="application/ld+json"
+					// biome-ignore lint/security/noDangerouslySetInnerHtml: static JSON-LD, no user input
+					dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+				/>
 			</head>
-			<Script
-				src="https://cloud.umami.is/script.js"
-				data-website-id="3a4253fc-dee7-4c4e-bd4a-a5eba54a2df1"
-				strategy="afterInteractive"
-				defer
-			/>
-			<body className="theme-mono">{children}</body>
+			<body className="theme-mono">
+				{children}
+				<Script
+					src="https://cloud.umami.is/script.js"
+					data-website-id="3a4253fc-dee7-4c4e-bd4a-a5eba54a2df1"
+					strategy="afterInteractive"
+					defer
+				/>
+			</body>
 		</html>
 	);
 }

app/styles/guide-modal.scss

@@ -6,7 +6,8 @@
   --guide-modal-border: rgba(255, 255, 255, 0.1);
   --guide-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
   --guide-text: #e8e8ec;
-  --guide-text-muted: #71717a;
+  // Increased from #71717a → #8a8a94 for WCAG AA contrast on modal background
+  --guide-text-muted: #8a8a94;
   --guide-border: rgba(255, 255, 255, 0.1);
   --guide-surface: rgba(255, 255, 255, 0.03);
   --guide-accent: #60a5fa;
@@ -36,11 +37,19 @@
   kbd {
     font-family: 'CommitMono', monospace;
     font-size: 0.875rem;
-    color: #71717a;
+    color: #8a8a94;
     transition: color 150ms ease;
   }
 
-  &:hover,
+  &:hover {
+    border-color: #60a5fa;
+    background: rgba(255, 255, 255, 0.06);
+
+    kbd {
+      color: #e8e8ec;
+    }
+  }
+
   &:focus {
     border-color: #60a5fa;
     background: rgba(255, 255, 255, 0.06);
@@ -51,6 +60,11 @@
     }
   }
 
+  &:focus-visible {
+    outline: 2px solid #60a5fa;
+    outline-offset: 2px;
+  }
+
   @media (max-width: 768px) {
     bottom: 1rem;
     right: 1rem;
@@ -139,6 +153,16 @@
     &:hover {
       color: var(--guide-text);
     }
+
+    &:focus {
+      color: var(--guide-text);
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--guide-accent);
+      outline-offset: 2px;
+    }
   }
 
   &__content {

app/themes/mono/components/AsciiFooter.tsx

@@ -26,6 +26,7 @@ const AsciiFooter = () => {
 			<pre className="ascii-footer__art" aria-hidden="true">
 				{PENGUIN}
 			</pre>
+			<p className="sr-only">Thanks for stopping by!</p>
 		</footer>
 	);
 };

app/themes/mono/components/BracketLink.tsx

@@ -4,10 +4,13 @@ interface BracketLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 	children: React.ReactNode;
 }
 
-const BracketLink = ({ children, ...props }: BracketLinkProps) => {
+const BracketLink = ({ children, target, ...props }: BracketLinkProps) => {
 	return (
-		<a className="bracket-link" {...props}>
+		<a className="bracket-link" target={target} {...props}>
 			{children}
+			{target === "_blank" && (
+				<span className="sr-only">(opens in new tab)</span>
+			)}
 		</a>
 	);
 };

app/themes/mono/components/EducationList.tsx

@@ -5,8 +5,8 @@ import { educationExp } from "../../../data/experiences";
 
 const EducationList = () => {
 	return (
-		<section>
-			<h2>Education</h2>
+		<section aria-labelledby="education-heading">
+			<h2 id="education-heading">Education</h2>
 			<Accordion.Root multiple className="section-list" aria-label="Education">
 				{educationExp.map((item) => {
 					const dateRange = item.date.join(" - ");
@@ -35,6 +35,7 @@ const EducationList = () => {
 												onKeyDown={(e) => e.stopPropagation()}
 											>
 												@ {item.institution}
+												<span className="sr-only">(opens in new tab)</span>
 											</a>
 										</span>
 									</div>

app/themes/mono/components/ExperienceList.tsx

@@ -5,8 +5,8 @@ import { professionalExp } from "../../../data/experiences";
 
 const ExperienceList = () => {
 	return (
-		<section>
-			<h2>Experience</h2>
+		<section aria-labelledby="experience-heading">
+			<h2 id="experience-heading">Experience</h2>
 			<Accordion.Root multiple className="section-list" aria-label="Experience">
 				{professionalExp.map((item) => {
 					const dateRange = item.date.join(" - ");
@@ -35,6 +35,7 @@ const ExperienceList = () => {
 												onKeyDown={(e) => e.stopPropagation()}
 											>
 												@ {item.institution}
+												<span className="sr-only">(opens in new tab)</span>
 											</a>
 										</span>
 									</div>

app/themes/mono/components/Intro.tsx

@@ -9,15 +9,20 @@ const LINKS = [
 
 const Intro = () => {
 	return (
-		<section className="intro">
+		<section className="intro" aria-labelledby="intro-heading">
 			<div className="intro__header">
 				<Avatar.Root className="intro__avatar">
-					<Avatar.Image src="/klungo.png" alt="Carson Spriggs" />
+					<Avatar.Image
+						src="/klungo.png"
+						alt="Carson Spriggs"
+						width={56}
+						height={56}
+					/>
 					<Avatar.Fallback>CS</Avatar.Fallback>
 				</Avatar.Root>
 
 				<div className="intro__title-group">
-					<h1>Carson</h1>
+					<h1 id="intro-heading">Carson</h1>
 					<p className="intro__subtitle">Software Developer @ Botpress</p>
 				</div>
 			</div>