Merge pull request #21 from TOM-BOHN/sandbox

Merge sandbox into main

Author: TOM-BOHN

CONTRIBUTING.md

@@ -71,9 +71,10 @@ tom-bohn.github.io/
 │   ├── accredible-badge/ # Accredible badge fetcher
 │   └── trailhead-badge/  # Trailhead badge fetcher
 ├── public/               # Static assets
+│   ├── icons/            # Site favicon and PWA icons
+│   ├── images/           # General images (e.g. profile photo)
 │   ├── badges/           # Badge images
-│   ├── education/        # Education images
-│   └── profile.jpg       # Profile picture
+│   └── education/        # Education images
 └── .github/              # GitHub Actions workflows
 ```
 

PR_DESCRIPTION.md

@@ -100,9 +100,10 @@ The development server will be available at `http://localhost:3000`.
 │   ├── accredible-badge/ # Accredible badge fetcher
 │   └── trailhead-badge/  # Trailhead badge fetcher
 └── public/               # Static assets
+    ├── icons/            # Site favicon and PWA icons (SVG + generated PNGs)
+    ├── images/           # General images (e.g. profile photo)
     ├── badges/           # Badge images
-    ├── education/        # Education images
-    └── profile.jpg       # Profile picture
+    └── education/        # Education images
 ```
 
 ## 🚢 Deployment
@@ -115,6 +116,15 @@ The site uses Next.js static export (`output: 'export'`) which generates a fully
 
 The `CNAME` file is located in the `public/` directory. This ensures it's included in the static export and deployed to GitHub Pages, enabling the custom domain `thomaslbohn.com`.
 
+## 🖼️ Icons
+
+Site icons live in `public/icons/`:
+
+- **icon.svg** – Source favicon (TLB on orange–blue gradient), sized so TLB stays visible when shown in a circle (e.g. in search results).
+- **apple-touch-icon.png**, **android-chrome-192x192.png**, **android-chrome-512x512.png** – PNGs generated from the SVG.
+
+To regenerate PNGs after editing the SVG: `npm run generate:icons` (requires `sharp` as a devDependency).
+
 ## 📝 Content Management
 
 - **Blog Posts**: Written in Markdown and stored in `content/blog/`

README.md

@@ -1,4 +1,9 @@
 import Image from 'next/image'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'About',
+}
 
 export default function About() {
   return (
@@ -35,7 +40,7 @@ export default function About() {
                   />
                   <div className="relative w-full h-full rounded-lg overflow-hidden bg-bg-secondary shadow-2xl">
                     <Image
-                      src="/profile.jpg"
+                      src="/images/profile.jpg"
                       alt="Thomas Bohn"
                       fill
                       className="object-cover"

app/about/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next'
 import { getBlogPost, getBlogPosts } from '@/lib/blog'
 import { notFound } from 'next/navigation'
 import Link from 'next/link'
@@ -12,6 +13,13 @@ export async function generateStaticParams() {
   }))
 }
 
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> | { slug: string } }): Promise<Metadata> {
+  const resolvedParams = await Promise.resolve(params)
+  const post = await getBlogPost(resolvedParams.slug)
+  if (!post) return {}
+  return { title: post.title }
+}
+
 export default async function BlogPost({ params }: { params: Promise<{ slug: string }> | { slug: string } }) {
   const resolvedParams = await Promise.resolve(params)
   const post = await getBlogPost(resolvedParams.slug)

app/blog/[slug]/page.tsx

@@ -1,7 +1,12 @@
 import Link from 'next/link'
+import type { Metadata } from 'next'
 import { getBlogPosts } from '@/lib/blog'
 import { FaMedium } from 'react-icons/fa'
 
+export const metadata: Metadata = {
+  title: 'Blog',
+}
+
 export default async function Blog() {
   const posts = await getBlogPosts()
 

app/blog/page.tsx

@@ -1,7 +1,12 @@
+import type { Metadata } from 'next'
 import { getLearningData } from '@/lib/hub'
 import { LearningSection } from '@/components/hub/LearningSection'
 import { LearningPageHeader } from '@/components/hub/LearningPageHeader'
 
+export const metadata: Metadata = {
+  title: 'Certifications',
+}
+
 export default async function Certifications() {
   const learningData = await getLearningData()
 

app/certifications/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Contact',
+}
+
+export default function ContactLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

app/contact/layout.tsx

@@ -173,10 +173,10 @@ html[data-theme="xanga"] body .xanga-shell [class*="bg-bg-primary"] {
   background-color: var(--bg-tertiary) !important;
 }
 
-/* Containerized boxes for Xanga mode */
+/* Containerized boxes for Xanga mode (exclude decorative background layers) */
 html[data-theme="xanga"] body main > div:not(.xanga-shell),
 html[data-theme="xanga"] body .xanga-shell .container > div,
-html[data-theme="xanga"] body .xanga-main-content > div {
+html[data-theme="xanga"] body .xanga-main-content > div:not(.stars-bg):not(.nebula-bg) {
   background-color: var(--bg-secondary);
   border: 2px solid var(--border-navy);
   padding: 20px;
@@ -192,6 +192,18 @@ html[data-theme="xanga"] body .xanga-applet {
   border-radius: 0 !important;
 }
 
+/* Sidebar applets: blue outline to match main section boxes (not orange) */
+html[data-theme="xanga"] body .xanga-sidebar .xanga-applet,
+html[data-theme="xanga"] body .xanga-sidebar [class*="border"] {
+  border-color: var(--border-navy) !important;
+}
+html[data-theme="xanga"] body .xanga-sidebar button {
+  border-color: var(--border-navy) !important;
+}
+html[data-theme="xanga"] body .xanga-sidebar button:hover {
+  border-color: var(--border-navy) !important;
+}
+
 html[data-theme="xanga"] body header {
   background-color: var(--bg-tertiary) !important;
   border-bottom: 1px solid var(--border-navy) !important;
@@ -202,6 +214,39 @@ html[data-theme="xanga"] body header a {
   text-decoration: none !important;
 }
 
+/* Header nav in Xanga: all links same blue by default (core + VIP, override text-accent) */
+html[data-theme="xanga"] body header nav a,
+html[data-theme="xanga"] body header nav a[class*="text-accent"] {
+  color: var(--link) !important;
+}
+
+/* Header nav hover in Xanga: same as light/dark (transparent, orange text) */
+html[data-theme="xanga"] body header nav a:hover,
+html[data-theme="xanga"] body header nav a:focus-visible {
+  background-color: transparent !important;
+  color: var(--accent-orange) !important;
+  box-shadow: none;
+}
+html[data-theme="xanga"] body header nav a:hover *,
+html[data-theme="xanga"] body header nav a:focus-visible * {
+  color: var(--accent-orange) !important;
+}
+
+/* Light and dark: same nav hover (text color change, no box) */
+html[data-theme="light"] body header nav a:hover,
+html[data-theme="light"] body header nav a:focus-visible,
+html[data-theme="dark"] body header nav a:hover,
+html[data-theme="dark"] body header nav a:focus-visible {
+  background-color: transparent;
+  color: var(--accent-orange) !important;
+}
+html[data-theme="light"] body header nav a:hover *,
+html[data-theme="light"] body header nav a:focus-visible *,
+html[data-theme="dark"] body header nav a:hover *,
+html[data-theme="dark"] body header nav a:focus-visible * {
+  color: var(--accent-orange) !important;
+}
+
 /* Remove underlines from page headings (h1 with font-mono) in Xanga mode */
 html[data-theme="xanga"] body h1.font-mono {
   text-decoration: none !important;
@@ -497,7 +542,7 @@ html[data-theme="xanga"] body ::-webkit-scrollbar-thumb:hover {
   }
 }
 
-/* Star Background for Dark Mode */
+/* Star Background for Dark Mode (above nebula so stars stay visible) */
 [data-theme="dark"] .stars-bg {
   position: fixed;
   inset: 0;
@@ -513,19 +558,19 @@ html[data-theme="xanga"] body ::-webkit-scrollbar-thumb:hover {
   background-size: 350px 200px;
   animation: twinkle 8s ease-in-out infinite alternate;
   pointer-events: none;
-  z-index: 0;
+  z-index: 1;
 }
 
 @keyframes twinkle {
   0% {
-    opacity: 0.3;
+    opacity: 0.5;
   }
   100% {
-    opacity: 0.6;
+    opacity: 0.9;
   }
 }
 
-/* Nebula Effect for Dark Mode */
+/* Nebula Effect for Dark Mode (behind stars) */
 [data-theme="dark"] .nebula-bg {
   position: fixed;
   inset: 0;

app/globals.css

@@ -1,6 +1,11 @@
+import type { Metadata } from 'next'
 import { getHubSections } from '@/lib/hub'
 import { HubPageWrapper } from '@/components/hub/HubPageWrapper'
 
+export const metadata: Metadata = {
+  title: 'Hub',
+}
+
 export default async function Hub() {
   const sections = await getHubSections()