create-foliokit 0.0.0-stage → 1.0.0

package/templates/default/src/App.tsx

@@ -0,0 +1,552 @@
+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, type ContentItem } from '../data'
+
+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: 'Resume', 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="Social profiles and resume">
+      {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: 'Email', icon: 'mail', url: `mailto:${config.contact.email}`, color: '#a4a5a8' }] : []),
+    ...(safeResumeHref(config.profile.resumeUrl) ? [{ label: 'Resume (PDF)', 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(`Portfolio message from ${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">Let’s Connect<span>.</span></h2>
+          <p>Have a project in mind? Send a message or find me here.</p>
+        </header>
+        <div className="contact-content">
+          {config.contact?.email && <form className="contact-form" onSubmit={openEmailDraft}>
+            <div className="contact-subheading">
+              <h3>Send a message.</h3>
+              <p>Your email app will open with the message ready to send.</p>
+            </div>
+            <label className="contact-field">
+              <UserRound size={16} aria-hidden="true" />
+              <span className="sr-only">Your name</span>
+              <input name="name" type="text" placeholder="Your name" autoComplete="name" required />
+            </label>
+            <label className="contact-field">
+              <Mail size={16} aria-hidden="true" />
+              <span className="sr-only">Your email</span>
+              <input name="email" type="email" placeholder="Your email address" autoComplete="email" required />
+            </label>
+            <label className="contact-field contact-message-field">
+              <MessageCircle size={16} aria-hidden="true" />
+              <span className="sr-only">Your message</span>
+              <textarea name="message" placeholder="What would you like to discuss?" rows={3} required />
+            </label>
+            <button className="contact-submit" type="submit"><span className="text-interaction">Send message</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">Follow &amp; connect.</h3>
+              <p>Find me across these platforms.</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 ? 'Resume' : 'Email'}</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="Location and local time">
+      {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: 'Skills', href: '#skills' }] : []),
+    ...(config.projects?.length ? [{ label: 'Projects', href: '#projects' }] : []),
+    ...(config.contact?.email || config.socialIcons?.length ? [{ label: '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 ? 'Close navigation' : 'Open navigation'}
+        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="Main navigation">
+        {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="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={`${config.profile.name} profile placeholder`}>
+                {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="name-heart-wrap">
+                <img className="name-heart-icon" src="/love-always-wins.png" alt="Heart" width="20" height="20" />
+                {config.profile.quote && <span className="heart-message" role="tooltip">{config.profile.quote}</span>}
+              </span>
+            </h1>
+            <p className="profile-intro">
+              <span className="waving-hand" role="img" aria-label="Waving hand">👋</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">Technical Skills<span>.</span></h2>
+        <div className="skills-grid" aria-label="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">Featured 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={`Open ${project.name} live demo`} data-tooltip="Live demo">
+                      <ExternalLink size={13} aria-hidden="true" /><span>Live</span>
+                    </a>
+                  )}
+                  {safeExternalUrl(project.githubUrl) && (
+                    <a href={safeExternalUrl(project.githubUrl)} target="_blank" rel="noopener noreferrer" aria-label={`Open ${project.name} GitHub repository`} data-tooltip="GitHub repository">
+                      <BrandIcon name="GitHub" className="brand-icon" src="https://api.iconify.design/simple-icons/github.svg?color=%23f5f5f5" width={14} height={14} />
+                      <span>GitHub</span>
+                    </a>
+                  )}
+                </div>
+              </div>
+              <p>{project.description}</p>
+              {project.technologies.length > 0 && (
+                <div className="project-stack">
+                  <h4>Technologies Used:</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 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' && (item.image ? <img className="portfolio-history-logo" src={item.image} alt="" loading="lazy" onError={(event) => { event.currentTarget.hidden = true }} /> : <span className="portfolio-history-logo portfolio-history-logo-placeholder" aria-hidden="true">Logo</span>)}
+              {id === 'education' && item.image && <img className="portfolio-history-logo" src={item.image} alt="" 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.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 && <p className="portfolio-content-date portfolio-history-date">{item.date}</p>}
+              {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">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="Work Experience" items={config.experience} />}
+        {config.education?.length > 0 && <ContentSection id="education" title="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}. All rights reserved.</p>
+        <p className="footer-credit">Made with <img className="footer-heart" src="/footer-heart.png" alt="" aria-hidden="true" width="14" height="14" /> by {config.profile.name}</p>
+        {config.profile.quote && <p className="footer-quote">&quot;{config.profile.quote}&quot;</p>}
+      </footer>
+      <HoverTooltipLayer />
+    </>
+  )
+}
+
+export default App

package/templates/default/src/BrandIcon.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+
+type Props = {
+  name: string
+  src: string
+  width: number
+  height: number
+  className?: string
+  loading?: 'eager' | 'lazy'
+}
+
+function shortLabel(name: string) {
+  const labels: Record<string, string> = {
+    GitHub: 'GH',
+  }
+  if (labels[name]) return labels[name]
+  return name.split(/[^a-z0-9]+/i).filter(Boolean).map((part) => part[0]).join('').slice(0, 2).toUpperCase()
+}
+
+function BrandIcon({ name, src, width, height, className, loading = 'lazy' }: Props) {
+  const [unavailable, setUnavailable] = useState(false)
+  if (unavailable) {
+    return (
+      <span
+        className={`brand-icon-fallback${className ? ` ${className}` : ''}`}
+        style={{ width, height, flexBasis: width }}
+        aria-hidden="true"
+      >
+        {shortLabel(name)}
+      </span>
+    )
+  }
+  return <img className={className} src={src} alt="" width={width} height={height} loading={loading} onError={() => setUnavailable(true)} />
+}
+
+export default BrandIcon