create-foliokit 0.0.0-stage → 1.0.1

package/templates/default/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "developer-portfolio-template",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "packageManager": "npm@11.20.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build && node scripts/generate-seo.mjs",
+    "preview": "vite preview",
+    "test": "node --test"
+  },
+  "dependencies": {
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "lucide-react": "1.69.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.2.1",
+    "typescript": "7.0.2",
+    "vite": "8.3.6"
+  }
+}

package/templates/default/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/templates/default/scripts/generate-seo.mjs

@@ -0,0 +1,34 @@
+import { readFile, writeFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { loadEnv } from 'vite'
+
+const outputDirectory = resolve('dist')
+const env = loadEnv('production', process.cwd(), '')
+const htmlPath = resolve(outputDirectory, 'index.html')
+let html = await readFile(htmlPath, 'utf8')
+const metadataSiteUrl = html.match(/<meta property="og:url" content="([^"]+)"\s*\/>/)?.[1]
+const configuredSiteUrl = process.env.SITE_URL ?? env.SITE_URL ?? metadataSiteUrl
+
+if (!configuredSiteUrl) process.exit(0)
+
+const site = new URL(configuredSiteUrl)
+if (site.protocol !== 'https:' || site.pathname !== '/' || site.search || site.hash) {
+  throw new Error('SITE_URL must be the HTTPS origin only, such as https://portfolio.example')
+}
+
+const origin = site.origin
+const openGraphUrl = `<meta property="og:url" content="${origin}/" />`
+if (/<meta property="og:url" content="[^"]+"\s*\/>/.test(html)) {
+  html = html.replace(/<meta property="og:url" content="[^"]+"\s*\/>/, openGraphUrl)
+} else {
+  html = html.replace('</head>', `    ${openGraphUrl}\n  </head>`)
+}
+html = html.replace('</head>', `    <link rel="canonical" href="${origin}/" />\n  </head>`)
+await writeFile(htmlPath, html)
+
+const sitemap = '<?xml version="1.0" encoding="UTF-8"?>\n'
+  + '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n'
+  + `  <url><loc>${origin}/</loc></url>\n`
+  + '</urlset>\n'
+await writeFile(resolve(outputDirectory, 'sitemap.xml'), sitemap)
+await writeFile(resolve(outputDirectory, 'robots.txt'), `User-agent: *\nAllow: /\nSitemap: ${origin}/sitemap.xml\n`)

package/templates/default/src/App.tsx

@@ -0,0 +1,582 @@
+import { ArrowRight, Clock3, ExternalLink, FileText, Mail, MapPin, Menu, MessageCircle, UserRound, X } from 'lucide-react'
+import { type CSSProperties, type FormEvent, useEffect, useState } from 'react'
+import ProjectMagazineGallery from './ProjectMagazineGallery'
+import BrandIcon from './BrandIcon'
+import { projectCardId } from './utils'
+import { portfolioConfig as config } from '../data'
+import type { ContentItem } from '../types.js'
+
+// Edit website labels and helper text here; portfolio content lives in data.ts.
+const ui = {
+  navigation: { skills: 'Skills', projects: 'Projects', contact: 'Contact', openMenu: 'Open navigation', closeMenu: 'Close navigation', ariaLabel: 'Main navigation' },
+  sections: { about: 'About', skills: 'Technical Skills', projects: 'Featured Projects', experience: 'Work Experience', education: 'Education', testimonials: 'Testimonials' },
+  projects: { live: 'Live', liveTooltip: 'Live demo', github: 'GitHub', githubTooltip: 'GitHub repository', technologies: 'Technologies Used:' },
+  contact: {
+    title: 'Let’s Connect', intro: 'Have a project in mind? Send a message or find me here.', formTitle: 'Send a message.',
+    formHelp: 'Your email app will open with the message ready to send.', name: 'Your name', email: 'Your email address',
+    message: 'Your message', messagePlaceholder: 'What would you like to discuss?', send: 'Send message',
+    socialTitle: 'Follow & connect.', socialHelp: 'Find me across these platforms.', emailSubject: 'Portfolio message from {name}',
+    emailLink: 'Email', resumeLink: 'Resume', resumePdfLink: 'Resume (PDF)',
+  },
+  accessibility: { socialLinks: 'Social profiles and resume', locationAndTime: 'Location and local time', skills: 'Skills', verified: 'Verified', wavingHand: 'Waving hand', profilePlaceholder: '{name} profile placeholder' },
+  footer: { copyright: 'All rights reserved.', credit: 'Built by' },
+}
+
+function safeExternalUrl(value?: string) {
+  if (!value?.trim()) return undefined
+  try {
+    const url = new URL(value)
+    return url.protocol === 'http:' || url.protocol === 'https:' ? url.href : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function safeResumeHref(value?: string) {
+  const path = value?.trim()
+  if (!path) return undefined
+  const externalUrl = safeExternalUrl(path)
+  if (externalUrl) return externalUrl
+  return path.startsWith('/') && !path.startsWith('//') ? path : undefined
+}
+
+function SocialBrandIcon({ name, icon, className = 'brand-icon' }: { name: string; icon?: string; className?: string }) {
+  if (icon === 'file-text') return <FileText className={className} size={19} aria-hidden="true" />
+  if (icon === 'mail') return <Mail className={className} size={19} aria-hidden="true" />
+  return <BrandIcon name={name} className={className} src={`https://api.iconify.design/simple-icons/${icon ?? 'link'}.svg?color=%23f5f5f5`} width={19} height={19} />
+}
+
+function BioSocialLinks() {
+  const links = [
+    ...config.socialIcons.flatMap((social) => {
+      const href = safeExternalUrl(social.url)
+      return href ? [{ ...social, href }] : []
+    }),
+    ...(safeResumeHref(config.profile.resumeUrl) ? [{ label: ui.contact.resumeLink, icon: 'file-text', href: safeResumeHref(config.profile.resumeUrl)!, color: '#d7ff62', downloadName: config.profile.resumeUrl!.split('/').pop() || 'Resume.pdf' }] : []),
+  ]
+  if (links.length === 0) return null
+  return (
+    <div className="about-social-icons social-links" aria-label={ui.accessibility.socialLinks}>
+      {links.map((link) => (
+        <a
+          className="social-link"
+          href={link.href}
+          key={link.label}
+          style={{ '--social-color': link.color } as CSSProperties}
+          aria-label={link.label}
+          data-tooltip={link.label}
+          target={link.href.startsWith('http') ? '_blank' : undefined}
+          rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+          download={'downloadName' in link ? link.downloadName : undefined}
+        >
+          <SocialBrandIcon name={link.label} icon={link.icon} className="social-icon brand-icon" />
+        </a>
+      ))}
+    </div>
+  )
+}
+
+function Contact() {
+  const contactLinks = [
+    ...config.socialIcons.flatMap((social) => {
+      const url = safeExternalUrl(social.url)
+      return url ? [{ ...social, url }] : []
+    }),
+    ...(config.contact?.email ? [{ label: ui.contact.emailLink, icon: 'mail', url: `mailto:${config.contact.email}`, color: '#a4a5a8' }] : []),
+    ...(safeResumeHref(config.profile.resumeUrl) ? [{ label: ui.contact.resumePdfLink, icon: 'file-text', url: safeResumeHref(config.profile.resumeUrl)!, color: '#d7ff62', downloadName: config.profile.resumeUrl!.split('/').pop() || 'Resume.pdf' }] : []),
+  ]
+  function openEmailDraft(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const values = new FormData(event.currentTarget)
+    const name = String(values.get('name') ?? '').trim()
+    const email = String(values.get('email') ?? '').trim()
+    const message = String(values.get('message') ?? '').trim()
+    const subject = encodeURIComponent(ui.contact.emailSubject.replace('{name}', name))
+    const body = encodeURIComponent(`${message}\n\nFrom: ${name}\nEmail: ${email}`)
+    if (config.contact?.email) window.location.href = `mailto:${config.contact.email}?subject=${subject}&body=${body}`
+  }
+
+  return (
+    <section className="contact-section section-wrap" id="contact" aria-labelledby="contact-title">
+      <div className="contact-panel dotted-frame">
+        <header className="contact-heading">
+          <h2 id="contact-title">{ui.contact.title}<span>.</span></h2>
+          <p>{ui.contact.intro}</p>
+        </header>
+        <div className="contact-content">
+          {config.contact?.email && <form className="contact-form" onSubmit={openEmailDraft}>
+            <div className="contact-subheading">
+              <h3>{ui.contact.formTitle}</h3>
+              <p>{ui.contact.formHelp}</p>
+            </div>
+            <label className="contact-field">
+              <UserRound size={16} aria-hidden="true" />
+              <span className="sr-only">{ui.contact.name}</span>
+              <input name="name" type="text" placeholder={ui.contact.name} autoComplete="name" required />
+            </label>
+            <label className="contact-field">
+              <Mail size={16} aria-hidden="true" />
+              <span className="sr-only">{ui.contact.email}</span>
+              <input name="email" type="email" placeholder={ui.contact.email} autoComplete="email" required />
+            </label>
+            <label className="contact-field contact-message-field">
+              <MessageCircle size={16} aria-hidden="true" />
+              <span className="sr-only">{ui.contact.message}</span>
+              <textarea name="message" placeholder={ui.contact.messagePlaceholder} rows={3} required />
+            </label>
+            <button className="contact-submit" type="submit"><span className="text-interaction">{ui.contact.send}</span><ArrowRight size={16} aria-hidden="true" /></button>
+          </form>}
+          {(contactLinks.length > 0 || config.socialIcons.some((icon) => safeExternalUrl(icon.url))) && <aside className="contact-social-panel" aria-labelledby="contact-social-title">
+            <div className="contact-subheading">
+              <h3 id="contact-social-title">{ui.contact.socialTitle}</h3>
+              <p>{ui.contact.socialHelp}</p>
+            </div>
+            <div className="contact-social-links">
+              {contactLinks.map((link) => {
+                const downloadName = 'downloadName' in link ? link.downloadName : undefined
+                return <a
+                  className="contact-social-link"
+                  href={link.url}
+                  key={link.label}
+                  style={{ '--social-color': link.color } as CSSProperties}
+                  aria-label={link.label}
+                  data-tooltip={link.label}
+                  target={link.icon === 'mail' ? undefined : '_blank'}
+                  rel={link.icon === 'mail' ? undefined : 'noopener noreferrer'}
+                  download={downloadName}
+                >
+                  <SocialBrandIcon name={link.label} icon={link.icon} />
+                  {(downloadName || link.icon === 'mail') && (
+                    <span className="text-interaction">{downloadName ? ui.contact.resumeLink : ui.contact.emailLink}</span>
+                  )}
+                </a>
+              })}
+            </div>
+          </aside>}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const timeFormatter = new Intl.DateTimeFormat('en-US', {
+  timeZone: config.profile.timeZone || 'UTC',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  hour12: true,
+})
+
+function LocationAndClock() {
+  const [time, setTime] = useState(() => timeFormatter.format(new Date()))
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setTime(timeFormatter.format(new Date()))
+    }, 1_000)
+
+    return () => window.clearInterval(intervalId)
+  }, [])
+
+  if (!config.profile.location && !config.profile.timeZone) return null
+  return (
+    <div className="profile-metadata" aria-label={ui.accessibility.locationAndTime}>
+      {config.profile.location && <span className="profile-metadata-item">
+        <MapPin size={13} aria-hidden="true" />
+        <span>{config.profile.location}</span>
+      </span>}
+      {config.profile.timeZone && <span className="profile-metadata-item profile-time-item">
+        <Clock3 size={13} aria-hidden="true" />
+        <time>{time} {config.profile.timeZoneLabel ?? config.profile.timeZone}</time>
+      </span>}
+    </div>
+  )
+}
+
+function Navigation() {
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [activeSection, setActiveSection] = useState('home')
+
+  const navigation = [
+    ...(config.skills?.length ? [{ label: ui.navigation.skills, href: '#skills' }] : []),
+    ...(config.projects?.length ? [{ label: ui.navigation.projects, href: '#projects' }] : []),
+    ...(config.contact?.email || config.socialIcons?.length ? [{ label: ui.navigation.contact, href: '#contact' }] : []),
+  ]
+
+  useEffect(() => {
+    const desktopViewport = window.matchMedia('(min-width: 601px)')
+    const closeMenuOnDesktop = () => {
+      if (desktopViewport.matches) setMenuOpen(false)
+    }
+    desktopViewport.addEventListener('change', closeMenuOnDesktop)
+    return () => desktopViewport.removeEventListener('change', closeMenuOnDesktop)
+  }, [])
+
+  useEffect(() => {
+    const sections = ['home', 'skills', 'projects', 'experience', 'education', 'testimonials', 'contact']
+      .map((id) => document.getElementById(id))
+      .filter((section): section is HTMLElement => section !== null)
+    if (!('IntersectionObserver' in window)) return
+
+    const observer = new IntersectionObserver((entries) => {
+      const visibleSections = entries
+        .filter((entry) => entry.isIntersecting)
+        .sort((first, second) => second.intersectionRatio - first.intersectionRatio)
+      if (visibleSections[0]) setActiveSection(visibleSections[0].target.id)
+    }, { rootMargin: '-20% 0px -65% 0px', threshold: [0, 0.2, 0.5] })
+
+    sections.forEach((section) => observer.observe(section))
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <header className="site-header" onKeyDown={(event) => { if (event.key === 'Escape') setMenuOpen(false) }}>
+      <a className="wordmark" href="#home" aria-label={`${config.profile.name}, home`} onClick={() => { setActiveSection('home'); setMenuOpen(false) }}>
+        {config.profile.name}
+      </a>
+      <button
+        className="menu-toggle"
+        type="button"
+        aria-label={menuOpen ? ui.navigation.closeMenu : ui.navigation.openMenu}
+        aria-expanded={menuOpen}
+        aria-controls="primary-navigation"
+        onClick={() => setMenuOpen((open) => !open)}
+      >
+        {menuOpen ? <X size={20} /> : <Menu size={20} />}
+      </button>
+      <nav id="primary-navigation" className={menuOpen ? 'main-nav is-open' : 'main-nav'} aria-label={ui.navigation.ariaLabel}>
+        {navigation.map((item) => (
+          <a
+            className={`nav-link text-interaction${item.href.slice(1) === activeSection ? ' is-active' : ''}`}
+            key={item.label}
+            href={item.href}
+            aria-current={item.href.slice(1) === activeSection ? 'location' : undefined}
+            onClick={() => {
+              setActiveSection(item.href.slice(1))
+              setMenuOpen(false)
+            }}
+          >
+            <span className="nav-label-swap" data-label={item.label}>
+              <span className="nav-label-primary">{item.label}</span>
+              <span className="nav-label-copy" aria-hidden="true">{item.label}</span>
+            </span>
+          </a>
+        ))}
+      </nav>
+    </header>
+  )
+}
+
+function ProfileBio({ embedded = false }: { embedded?: boolean }) {
+  if (!config.profile.about?.trim()) return null
+  return (
+    <section className={embedded ? 'profile-bio profile-bio-embedded' : 'profile-bio section-wrap'} id="about" aria-label={ui.sections.about}>
+      <div className="profile-bio-content">
+        <div className="profile-bio-copy">
+          {config.profile.about.split(/\n\s*\n/).filter(Boolean).map((paragraph, index) => <p key={index}>{paragraph}</p>)}
+        </div>
+        <BioSocialLinks />
+      </div>
+    </section>
+  )
+}
+
+function Hero({ includeAbout }: { includeAbout: boolean }) {
+  const [profileImageUnavailable, setProfileImageUnavailable] = useState(false)
+
+  return (
+    <section className="hero section-wrap" id="home" aria-labelledby="hero-title">
+      <div className="profile-header">
+        <div className="profile-identity">
+          <div className="profile-photo-stage">
+            {config.profile.profileImage && !profileImageUnavailable ? (
+              <img
+                className="profile-photo"
+                src={config.profile.profileImage}
+                alt={`${config.profile.name} profile`}
+                onError={() => setProfileImageUnavailable(true)}
+              />
+            ) : (
+              <div className="profile-photo profile-photo-placeholder" role="img" aria-label={ui.accessibility.profilePlaceholder.replace('{name}', config.profile.name)}>
+                {config.profile.name.split(/\s+/).map((part) => part[0]).join('').slice(0, 2).toUpperCase()}
+              </div>
+            )}
+          </div>
+          <div className="profile-copy">
+            <h1 className="profile-heading" id="hero-title">
+              <span>{config.profile.name}</span>
+              <span className="verified-mark" role="img" aria-label={ui.accessibility.verified}>
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill="currentColor" d="M12 1.5 14.7 4l3.6-1.2L19 6.8 22.5 9l-1.8 3 1.8 3-3.5 2.2-.7 4-3.6-1.2L12 22.5 9.3 20l-3.6 1.2-.7-4L1.5 15l1.8-3-1.8-3L5 6.8l.7-4L9.3 4z" />
+                  <path d="m7.8 12.2 2.7 2.7 5.8-5.8" fill="none" stroke="#050505" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.4" />
+                </svg>
+              </span>
+            </h1>
+            <p className="profile-intro">
+              <span className="waving-hand" role="img" aria-label={ui.accessibility.wavingHand}>👋</span>
+              <span>{config.profile.introduction} </span>
+              <span className="profile-role">{config.profile.headline}</span>
+            </p>
+          </div>
+        </div>
+        <LocationAndClock />
+      </div>
+      <div className="profile-divider" aria-hidden="true" />
+      {includeAbout && <ProfileBio embedded />}
+    </section>
+  )
+}
+
+function Skills() {
+  if (!config.skills || config.skills.length === 0) return null
+  return (
+    <section className="skills section-wrap" id="skills" aria-labelledby="skills-title">
+      <div className="skills-panel dotted-frame">
+        <h2 id="skills-title">{ui.sections.skills}<span>.</span></h2>
+        <div className="skills-grid" aria-label={ui.accessibility.skills}>
+          {config.skills.map((skill) => (
+            <div
+              className="skill-tile"
+              key={skill.name}
+              role="img"
+              aria-label={skill.category ? `${skill.name}, ${skill.category}` : skill.name}
+              data-category={skill.category}
+            >
+              <img
+                className="skill-logo"
+                src={`https://skillicons.dev/icons?i=${skill.icon}&theme=dark`}
+                alt=""
+                loading="lazy"
+                onError={(event) => {
+                  event.currentTarget.hidden = true
+                  const fallback = event.currentTarget.nextElementSibling
+                  if (fallback instanceof HTMLElement) fallback.hidden = false
+                }}
+              />
+              <span className="skill-logo-fallback" hidden aria-hidden="true">{skill.icon.slice(0, 2).toUpperCase()}</span>
+              <span className="skill-name" aria-hidden="true">{skill.name}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function Projects() {
+  if (!config.projects || config.projects.length === 0) return null
+  return (
+    <section className="projects section-wrap" id="projects" aria-labelledby="projects-title">
+      <div className="projects-intro">
+        <h2 id="projects-title">{ui.sections.projects}<span className="projects-period">.</span></h2>
+      </div>
+      <ProjectMagazineGallery projects={config.projects} />
+      <div className="project-grid">
+        {config.projects.map((project) => (
+          <article className={`project-card${project.featured ? ' is-featured' : ''}`} id={projectCardId(project.name)} key={project.name} data-featured={project.featured || undefined}>
+            {project.image ? (
+              <>
+                <img
+                  className="project-thumbnail"
+                  src={project.image}
+                  alt={project.imageAlt ?? `${project.name} project thumbnail`}
+                  loading="lazy"
+                  onError={(event) => { event.currentTarget.hidden = true; const fallback = event.currentTarget.nextElementSibling; if (fallback instanceof HTMLElement) fallback.hidden = false }}
+                />
+                <div className="project-thumbnail project-thumbnail-placeholder" aria-hidden="true" hidden>{project.name.slice(0, 2).toUpperCase()}</div>
+              </>
+            ) : (
+              <div className="project-thumbnail project-thumbnail-placeholder" aria-hidden="true">{project.name.slice(0, 2).toUpperCase()}</div>
+            )}
+            <div className="project-info">
+              <div className="project-heading-row">
+                <h3 className="text-interaction">{project.name}</h3>
+                <div className="project-actions">
+                  {safeExternalUrl(project.liveUrl) && (
+                    <a href={safeExternalUrl(project.liveUrl)} target="_blank" rel="noopener noreferrer" aria-label={`${ui.projects.liveTooltip}: ${project.name}`} data-tooltip={ui.projects.liveTooltip}>
+                      <ExternalLink size={13} aria-hidden="true" /><span>{ui.projects.live}</span>
+                    </a>
+                  )}
+                  {safeExternalUrl(project.githubUrl) && (
+                    <a href={safeExternalUrl(project.githubUrl)} target="_blank" rel="noopener noreferrer" aria-label={`${ui.projects.githubTooltip}: ${project.name}`} data-tooltip={ui.projects.githubTooltip}>
+                      <BrandIcon name="GitHub" className="brand-icon" src="https://api.iconify.design/simple-icons/github.svg?color=%23f5f5f5" width={14} height={14} />
+                      <span>{ui.projects.github}</span>
+                    </a>
+                  )}
+                </div>
+              </div>
+              <p>{project.description}</p>
+              {project.technologies.length > 0 && (
+                <div className="project-stack">
+                  <h4>{ui.projects.technologies}</h4>
+                  <div className="project-tech-list" aria-label={`${project.name} technologies`}>
+                    {project.technologies.map((technology) => (
+                      <span className="project-tech-pill" key={technology.name}>{technology.name}</span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function HoverTooltipLayer() {
+  const [tooltip, setTooltip] = useState<{ text: string; left: number; top: number; below: boolean } | null>(null)
+
+  useEffect(() => {
+    function clearTooltip() {
+      setTooltip(null)
+    }
+
+    function showTooltip(event: Event) {
+      if (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(hover: none)').matches) return
+      const trigger = (event.target as Element | null)?.closest<HTMLElement>('[data-tooltip]')
+      const text = trigger?.dataset.tooltip
+      if (!trigger || !text) return
+
+      const rect = trigger.getBoundingClientRect()
+      const below = rect.top < 44
+      setTooltip({
+        text,
+        left: Math.max(112, Math.min(window.innerWidth - 112, rect.left + rect.width / 2)),
+        top: below ? rect.bottom + 8 : rect.top - 7,
+        below,
+      })
+    }
+
+    function hideTooltip(event: Event) {
+      const related = (event as PointerEvent | FocusEvent).relatedTarget
+      const target = event.target as Element | null
+      if (related instanceof Node && target?.closest('[data-tooltip]')?.contains(related)) return
+      setTooltip(null)
+    }
+
+    function hideOnEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') setTooltip(null)
+    }
+
+    document.addEventListener('pointerover', showTooltip)
+    document.addEventListener('pointerout', hideTooltip)
+    document.addEventListener('focusin', showTooltip)
+    document.addEventListener('focusout', hideTooltip)
+    document.addEventListener('keydown', hideOnEscape)
+    window.addEventListener('resize', clearTooltip)
+    window.addEventListener('scroll', clearTooltip, true)
+    return () => {
+      document.removeEventListener('pointerover', showTooltip)
+      document.removeEventListener('pointerout', hideTooltip)
+      document.removeEventListener('focusin', showTooltip)
+      document.removeEventListener('focusout', hideTooltip)
+      document.removeEventListener('keydown', hideOnEscape)
+      window.removeEventListener('resize', clearTooltip)
+      window.removeEventListener('scroll', clearTooltip, true)
+    }
+  }, [])
+
+  if (!tooltip) return null
+  return (
+    <div
+      className={`site-tooltip${tooltip.below ? ' is-below' : ''}`}
+      role="tooltip"
+      style={{ left: tooltip.left, top: tooltip.top }}
+    >
+      {tooltip.text}
+    </div>
+  )
+}
+
+function ExperienceLogo({ item }: { item: ContentItem }) {
+  const [imageUnavailable, setImageUnavailable] = useState(false)
+  if (item.image && !imageUnavailable) {
+    return <img className="portfolio-history-logo" src={item.image} alt={item.imageAlt?.trim() || `${item.organization || item.title} logo`} loading="lazy" onError={() => setImageUnavailable(true)} />
+  }
+  return <img className="portfolio-history-logo" src={item.imagePlaceholder || '/experience-logo-placeholder.png'} alt={`${item.organization || item.title} logo placeholder`} />
+}
+
+function ContentSection({ id, title, description, items }: { id: string; title: string; description?: string; items: ContentItem[] }) {
+  if (!items || items.length === 0) return null
+  return (
+    <section className="portfolio-content-section section-wrap" id={id} aria-labelledby={`${id}-title`}>
+      <div className={`portfolio-content-panel dotted-frame${id === 'experience' || id === 'education' ? ' portfolio-history-panel' : ''}`}>
+        <header>
+          <h2 id={`${id}-title`}>{title}<span>.</span></h2>
+          {description && <p>{description}</p>}
+        </header>
+        <div className={id === 'experience' || id === 'education' ? 'portfolio-history-list' : 'portfolio-content-grid'}>
+          {items.map((item) => (
+            <article className={id === 'experience' || id === 'education' ? `portfolio-history-row${id === 'education' ? ' is-education-row' : ''}${item.links?.some((link) => link.url.trim()) ? ' is-linked' : ''}` : 'portfolio-content-card'} key={`${item.title}-${item.organization ?? ''}`}>
+              {id === 'experience' && <ExperienceLogo item={item} />}
+              {id === 'education' && item.image && <img className="portfolio-history-logo" src={item.image} alt={item.imageAlt?.trim() || `${item.organization || item.title} logo`} loading="lazy" onError={(event) => { event.currentTarget.hidden = true }} />}
+              <div className="portfolio-history-main">
+                <h3 className={id === 'experience' || id === 'education' ? 'text-interaction' : undefined}>{item.title}</h3>
+                {item.organization && <p className="portfolio-content-organization">{item.organizationUrl && safeExternalUrl(item.organizationUrl) ? <a className="portfolio-organization-link" href={safeExternalUrl(item.organizationUrl)} target="_blank" rel="noopener noreferrer"><span>{item.organization}</span><ExternalLink size={12} aria-hidden="true" /></a> : item.organization}{item.links?.filter((link) => link.url.trim()).map((link) => <a className="portfolio-history-link" key={link.url} href={link.url} target="_blank" rel="noopener noreferrer" aria-label={`${link.label}: ${item.organization}`}><ExternalLink size={14} aria-hidden="true" /></a>)}</p>}
+                {item.description && <p className="portfolio-history-description">{item.description}</p>}
+              </div>
+              {(item.date || item.location) && <div className="portfolio-history-meta">
+                {item.date && <p className="portfolio-content-date portfolio-history-date">{item.date}</p>}
+                {item.location && <p className="portfolio-history-location"><MapPin size={12} aria-hidden="true" />{item.location}</p>}
+              </div>}
+              {id !== 'experience' && id !== 'education' && item.image && <img src={item.image} alt={item.title} loading="lazy" onError={(event) => { event.currentTarget.hidden = true }} />}
+              {id !== 'experience' && id !== 'education' && item.links?.filter((link) => link.url.trim()).map((link) => <a key={link.url} href={link.url} target="_blank" rel="noopener noreferrer">{link.label}</a>)}
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function Testimonials() {
+  if (!config.testimonials || config.testimonials.length === 0) return null
+  return (
+    <section className="portfolio-content-section section-wrap" id="testimonials" aria-labelledby="testimonials-title">
+      <div className="portfolio-content-panel dotted-frame">
+        <header><h2 id="testimonials-title">{ui.sections.testimonials}<span>.</span></h2></header>
+        <div className="portfolio-content-grid testimonial-grid">
+          {config.testimonials.map((testimonial) => (
+            <article className="portfolio-content-card testimonial-card" key={`${testimonial.name}-${testimonial.role}`}>
+              {testimonial.image && (
+                <>
+                  <img src={testimonial.image} alt={`${testimonial.name} profile`} loading="lazy" onError={(event) => { event.currentTarget.hidden = true; const fallback = event.currentTarget.nextElementSibling; if (fallback instanceof HTMLElement) fallback.hidden = false }} />
+                  <span className="testimonial-avatar-fallback" aria-hidden="true" hidden>{testimonial.name.split(/\s+/).map((part) => part[0]).join('').slice(0, 2).toUpperCase()}</span>
+                </>
+              )}
+              <blockquote>{testimonial.message}</blockquote>
+              <h3>{testimonial.name}</h3>
+              <p className="portfolio-content-organization">{testimonial.role}{testimonial.company ? ` · ${testimonial.company}` : ''}</p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function App() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        <Hero includeAbout={true} />
+        {config.experience?.length > 0 && <ContentSection id="experience" title={ui.sections.experience} items={config.experience} />}
+        {config.education?.length > 0 && <ContentSection id="education" title={ui.sections.education} items={config.education} />}
+        {config.skills?.length > 0 && <Skills />}
+        {config.projects?.length > 0 && <Projects />}
+        {config.testimonials?.length > 0 && <Testimonials />}
+        {(config.contact?.email || config.socialIcons?.length > 0) && <Contact />}
+      </main>
+      <footer className="site-footer">
+        <p className="footer-copyright">© {new Date().getFullYear()} {config.profile.name}. {ui.footer.copyright}</p>
+        <p className="footer-credit">{ui.footer.credit} {config.profile.name}</p>
+        {config.profile.quote && <p className="footer-quote">&quot;{config.profile.quote}&quot;</p>}
+      </footer>
+      <HoverTooltipLayer />
+    </>
+  )
+}
+
+export default App