create-foliokit 1.0.0 → 1.0.1

package/templates/default/data.ts

@@ -12,82 +12,14 @@
  * - Social & Brand Icons: https://simpleicons.org
  */
 
-export interface Skill {
-  name: string
-  icon: string
-  category?: string
-}
+import type { PortfolioConfig } from './types.js'
+export type { Skill, Project, ContentItem, Testimonial, SocialIcon, PortfolioConfig } from './types.js'
 
-export interface Project {
-  name: string
-  category?: string
-  description: string
-  image?: string
-  imageAlt?: string
-  technologies: Skill[]
-  liveUrl?: string
-  githubUrl?: string
-  featured?: boolean
-}
-
-export interface ContentItem {
-  title: string
-  organization?: string
-  date?: string
-  description?: string
-  image?: string
-  links?: { label: string; url: string }[]
-}
-
-export interface Testimonial {
-  name: string
-  role: string
-  company?: string
-  message: string
-  image?: string
-}
-
-export interface SocialIcon {
-  label: string
-  icon: string
-  url?: string
-  color?: string
-}
-
-export interface PortfolioConfig {
-  profile: {
-    name: string
-    headline: string
-    introduction: string
-    about: string
-    location?: string
-    timeZone?: string
-    timeZoneLabel?: string
-    profileImage?: string
-    resumeUrl?: string
-    quote?: string
-  }
-  seo: {
-    title: string
-    description: string
-    siteUrl?: string
-    image?: string
-  }
-  socialIcons: SocialIcon[]
-  skills: Skill[]
-  projects: Project[]
-  experience: ContentItem[]
-  education: ContentItem[]
-  testimonials: Testimonial[]
-  contact: {
-    email?: string
-  }
-}
-
-export const portfolioConfig: PortfolioConfig = {
+export const portfolioConfig: PortfolioConfig = {
   // Personal Information
   profile: {
     name: 'Your Name',
+    profileImage: '/avatar-placeholder.png', // Replace with '/my-photo.jpg' after copying your photo into public/.
     headline: 'Full Stack Developer',
     introduction: "Hey, there! I'm a",
     about: `Hey, there! I'm a developer who loves building products that people actually use. Write a couple of sentences here about who you are, what you do, and what you're currently working on.
@@ -98,16 +30,9 @@ Wrap up with what you're excited about right now — side projects, open source,
     location: 'Delhi, India',
     timeZone: 'Asia/Kolkata', // IANA time zone for the live clock
     timeZoneLabel: 'IST',
-    profileImage: '/avatar-placeholder.svg', // Path relative to public/ directory
     quote: 'Build with curiosity. Share what you learn.',
-  },
-
-  // SEO & Metadata
-  seo: {
-    title: '{{name}} — {{headline}}',
-    description: '{{name}} is a {{headline}} building useful, thoughtful web experiences.',
-  },
-
+  },
+
   // Social Links
   // Add, edit, remove, or reorder your social media profiles.
   // Find brand icons at: https://simpleicons.org (built-in icons: 'mail', 'file-text')
@@ -116,8 +41,40 @@ Wrap up with what you're excited about right now — side projects, open source,
     { label: 'LinkedIn', icon: 'linkedin', url: 'https://linkedin.com/in/your-username', color: '#0a66c2' },
     { label: 'Instagram', icon: 'instagram', url: 'https://instagram.com/your-username', color: '#e4405f' },
     { label: 'X', icon: 'x', url: 'https://x.com/your-username', color: '#f2f0e9' },
-  ],
-
+  ],
+
+  // Work Experience
+  // Add, edit, remove, or reorder work history. Leave empty ([]) to hide this section.
+  // Optional logo: copy an image to public/ and set image: '/company-logo.png'. Omit image to show the Logo placeholder.
+  experience: [
+    {
+      title: 'Your Role',
+      organization: 'Company Name',
+      organizationUrl: 'https://example.com', // Placeholder: replace with the company website URL.
+      image: '', // Set to '/company-logo.png' after copying the image into public/.
+      imageAlt: 'Company Name logo',
+      imagePlaceholder: '/experience-logo-placeholder.png',
+      location: 'City, Country', // Replace with the role's location, or leave '' to hide it.
+      date: 'Month YYYY – Present',
+      description: 'Replace this sample with your role, company, and dates.',
+    },
+  ],
+
+  // Education
+  // Add, edit, remove, or reorder education. Leave empty ([]) to hide this section.
+  education: [
+    {
+      title: 'Degree or Program',
+      organization: 'Your University',
+      organizationUrl: 'https://example.com', // Placeholder: replace with the university website URL.
+      image: '', // Set to '/school-logo.png' after copying the image into public/.
+      imageAlt: 'University logo',
+      location: 'City, Country', // Replace with the school's location, or leave '' to hide it.
+      date: 'YYYY – YYYY',
+      description: 'Add your major, score, or another education detail here.',
+    },
+  ],
+
   // Skills
   // Add, edit, remove, or reorder skills.
   // Find skill icon identifiers at: https://skillicons.dev
@@ -145,8 +102,8 @@ Wrap up with what you're excited about right now — side projects, open source,
     { name: 'GitHub', icon: 'github', category: 'Tools' },
     { name: 'npm', icon: 'npm', category: 'Tools' },
     { name: 'GitHub Actions', icon: 'githubactions', category: 'Tools' },
-  ],
-
+  ],
+
   // Projects
   // Add, edit, remove, or reorder projects. Set featured: true to highlight in the 3D gallery.
   // Technology icon identifiers also come from: https://skillicons.dev
@@ -155,7 +112,7 @@ Wrap up with what you're excited about right now — side projects, open source,
       name: 'Project One',
       category: 'PROJECT CATEGORY',
       description: 'Add a short description of this project, the problem it solves, and what you built.',
-      image: '/project-placeholder.svg',
+      image: '/project-placeholder.png', // Replace with '/my-project.png' after copying it into public/.
       imageAlt: 'Project image placeholder, 1200 by 675 pixels',
       technologies: [{ name: 'React', icon: 'react' }, { name: 'TypeScript', icon: 'ts' }],
       featured: true, // Highlights project in the 3D magazine gallery
@@ -164,7 +121,7 @@ Wrap up with what you're excited about right now — side projects, open source,
       name: 'Project Two',
       category: 'PROJECT CATEGORY',
       description: 'Describe another project here. Replace the title, image, and technology stack in data.ts.',
-      image: '/project-placeholder.svg',
+      image: '/project-placeholder.png', // Replace with '/my-project.png' after copying it into public/.
       imageAlt: 'Project image placeholder, 1200 by 675 pixels',
       technologies: [{ name: 'Node.js', icon: 'nodejs' }, { name: 'Express.js', icon: 'express' }, { name: 'MongoDB', icon: 'mongodb' }],
     },
@@ -172,34 +129,12 @@ Wrap up with what you're excited about right now — side projects, open source,
       name: 'Project Three',
       category: 'PROJECT CATEGORY',
       description: 'Use this space to explain what you made and the tools or technologies you used.',
-      image: '/project-placeholder.svg',
+      image: '/project-placeholder.png', // Replace with '/my-project.png' after copying it into public/.
       imageAlt: 'Project image placeholder, 1200 by 675 pixels',
       technologies: [{ name: 'Python', icon: 'python' }, { name: 'C', icon: 'c' }, { name: 'Java', icon: 'java' }],
     },
-  ],
-
-  // Work Experience
-  // Add, edit, remove, or reorder work history. Leave empty ([]) to hide this section.
-  experience: [
-    {
-      title: 'Your Role',
-      organization: 'Company Name',
-      date: 'Month YYYY – Present',
-      description: 'Replace this sample with your role, company, and dates.',
-    },
-  ],
-
-  // Education
-  // Add, edit, remove, or reorder education. Leave empty ([]) to hide this section.
-  education: [
-    {
-      title: 'Degree or Program',
-      organization: 'Your University',
-      date: 'YYYY – YYYY',
-      description: 'Add your major, score, or another education detail here.',
-    },
-  ],
-
+  ],
+
   // Testimonials
   // Add, edit, remove, or reorder testimonials. Leave empty ([]) to hide this section.
   testimonials: [
@@ -218,10 +153,17 @@ Wrap up with what you're excited about right now — side projects, open source,
       role: 'Role or designation',
       message: 'Replace this placeholder with a genuine testimonial before publishing.',
     },
-  ],
-
+  ],
+
   // Contact
   contact: {
     email: 'hello@example.com',
-  },
-}
+  },
+
+  // SEO & Metadata
+  seo: {
+    title: '{{name}} — {{headline}}',
+    description: '{{name}} is a {{headline}} building useful, thoughtful web experiences.',
+  },
+}
+

package/templates/default/src/App.tsx

@@ -3,7 +3,24 @@ 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'
+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
@@ -35,11 +52,11 @@ function BioSocialLinks() {
       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' }] : []),
+    ...(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="Social profiles and resume">
+    <div className="about-social-icons social-links" aria-label={ui.accessibility.socialLinks}>
       {links.map((link) => (
         <a
           className="social-link"
@@ -65,8 +82,8 @@ function Contact() {
       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' }] : []),
+    ...(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()
@@ -74,7 +91,7 @@ function Contact() {
     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 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}`
   }
@@ -83,36 +100,36 @@ function Contact() {
     <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>
+          <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>Send a message.</h3>
-              <p>Your email app will open with the message ready to send.</p>
+              <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">Your name</span>
-              <input name="name" type="text" placeholder="Your name" autoComplete="name" required />
+              <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">Your email</span>
-              <input name="email" type="email" placeholder="Your email address" autoComplete="email" required />
+              <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">Your message</span>
-              <textarea name="message" placeholder="What would you like to discuss?" rows={3} required />
+              <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">Send message</span><ArrowRight size={16} aria-hidden="true" /></button>
+            <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">Follow &amp; connect.</h3>
-              <p>Find me across these platforms.</p>
+              <h3 id="contact-social-title">{ui.contact.socialTitle}</h3>
+              <p>{ui.contact.socialHelp}</p>
             </div>
             <div className="contact-social-links">
               {contactLinks.map((link) => {
@@ -130,7 +147,7 @@ function Contact() {
                 >
                   <SocialBrandIcon name={link.label} icon={link.icon} />
                   {(downloadName || link.icon === 'mail') && (
-                    <span className="text-interaction">{downloadName ? 'Resume' : 'Email'}</span>
+                    <span className="text-interaction">{downloadName ? ui.contact.resumeLink : ui.contact.emailLink}</span>
                   )}
                 </a>
               })}
@@ -163,7 +180,7 @@ function LocationAndClock() {
 
   if (!config.profile.location && !config.profile.timeZone) return null
   return (
-    <div className="profile-metadata" aria-label="Location and local time">
+    <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>
@@ -181,9 +198,9 @@ function Navigation() {
   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' }] : []),
+    ...(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(() => {
@@ -220,14 +237,14 @@ function Navigation() {
       <button
         className="menu-toggle"
         type="button"
-        aria-label={menuOpen ? 'Close navigation' : 'Open navigation'}
+        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="Main navigation">
+      <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' : ''}`}
@@ -253,7 +270,7 @@ function Navigation() {
 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">
+    <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>)}
@@ -280,7 +297,7 @@ function Hero({ includeAbout }: { includeAbout: boolean }) {
                 onError={() => setProfileImageUnavailable(true)}
               />
             ) : (
-              <div className="profile-photo profile-photo-placeholder" role="img" aria-label={`${config.profile.name} profile placeholder`}>
+              <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>
             )}
@@ -288,13 +305,15 @@ function Hero({ includeAbout }: { includeAbout: boolean }) {
           <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 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="Waving hand">👋</span>
+              <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>
@@ -313,8 +332,8 @@ function Skills() {
   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">
+        <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"
@@ -349,7 +368,7 @@ function Projects() {
   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>
+        <h2 id="projects-title">{ui.sections.projects}<span className="projects-period">.</span></h2>
       </div>
       <ProjectMagazineGallery projects={config.projects} />
       <div className="project-grid">
@@ -374,14 +393,14 @@ function Projects() {
                 <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 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={`Open ${project.name} GitHub repository`} data-tooltip="GitHub repository">
+                    <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>GitHub</span>
+                      <span>{ui.projects.github}</span>
                     </a>
                   )}
                 </div>
@@ -389,7 +408,7 @@ function Projects() {
               <p>{project.description}</p>
               {project.technologies.length > 0 && (
                 <div className="project-stack">
-                  <h4>Technologies Used:</h4>
+                  <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>
@@ -470,6 +489,14 @@ function HoverTooltipLayer() {
   )
 }
 
+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 (
@@ -482,14 +509,17 @@ function ContentSection({ id, title, description, items }: { id: string; title:
         <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 }} />}
+              {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.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.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 && <p className="portfolio-content-date portfolio-history-date">{item.date}</p>}
+              {(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>
@@ -505,7 +535,7 @@ function Testimonials() {
   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>
+        <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}`}>
@@ -532,16 +562,16 @@ function App() {
       <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.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}. 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>
+        <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 />

package/templates/default/src/ProjectMagazineGallery.tsx

@@ -1,10 +1,18 @@
 import { useEffect, useRef, useState, type CSSProperties, type PointerEvent, type KeyboardEvent, type WheelEvent } from 'react'
 import { projectCardId } from './utils'
-import type { Project } from '../data'
+import type { Project } from '../types.js'
 import './ProjectMagazineGallery.css'
 
 type Props = { projects: Project[] }
 
+// Gallery-specific labels stay beside the gallery component.
+const galleryUi = {
+  carouselLabel: 'Featured project carousel',
+  galleryHelp: 'Project gallery. Swipe, drag, or use a horizontal trackpad gesture to browse. Use the left and right arrow keys while focused.',
+  projectDetails: 'Open {project} project details',
+  viewProject: 'VIEW PROJECT',
+}
+
 function getOffset(index: number, activeIndex: number, count: number) {
   let offset = index - activeIndex
   if (offset > count / 2) offset -= count
@@ -117,13 +125,13 @@ function ProjectMagazineGallery({ projects }: Props) {
   const viewportStyle = { '--drag-x': `${dragX}px` } as CSSProperties
 
   return (
-    <section className="project-magazine-gallery" aria-label="Featured project carousel">
+    <section className="project-magazine-gallery" aria-label={galleryUi.carouselLabel}>
       <div
         className={`magazine-viewport${isDragging ? ' is-dragging' : ''}`}
         style={viewportStyle}
         role="region"
         aria-roledescription="project carousel"
-        aria-label="Project magazine gallery. Swipe, drag, or use a horizontal trackpad gesture to browse. Use the left and right arrow keys while focused."
+        aria-label={galleryUi.galleryHelp}
         tabIndex={0}
         onKeyDown={handleKeyDown}
         onWheel={handleWheel}
@@ -171,7 +179,7 @@ function ProjectMagazineGallery({ projects }: Props) {
               data-featured={project.featured || undefined}
               type="button"
               style={cardStyle}
-              aria-label={`Open ${project.name} project details`}
+              aria-label={galleryUi.projectDetails.replace('{project}', project.name)}
               aria-hidden={distance > 1}
               tabIndex={distance > 1 ? -1 : 0}
               onPointerEnter={(event) => { if (event.pointerType === 'mouse') setHoverIndex(index) }}
@@ -196,7 +204,7 @@ function ProjectMagazineGallery({ projects }: Props) {
                 </span>
                 <span className="magazine-cover-title">{project.name}</span>
                 <span className="magazine-cover-description">{project.description}</span>
-                <span className="magazine-cover-hint">VIEW PROJECT <span aria-hidden="true">↗</span></span>
+                <span className="magazine-cover-hint">{galleryUi.viewProject} <span aria-hidden="true">↗</span></span>
               </span>
             </button>
           )

package/templates/default/src/main.tsx

@@ -1,8 +1,26 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import { portfolioConfig } from '../data'
 import './styles.css'
 
+
+const replaceProfileTokens = (value: string) => value
+  .replaceAll('{{name}}', portfolioConfig.profile.name)
+  .replaceAll('{{headline}}', portfolioConfig.profile.headline)
+const pageTitle = replaceProfileTokens(portfolioConfig.seo.title)
+const pageDescription = replaceProfileTokens(portfolioConfig.seo.description)
+document.title = pageTitle
+document.querySelector('meta[name="description"]')?.setAttribute('content', pageDescription)
+document.querySelector('meta[property="og:title"]')?.setAttribute('content', pageTitle)
+document.querySelector('meta[property="og:description"]')?.setAttribute('content', pageDescription)
+document.querySelector('meta[name="twitter:title"]')?.setAttribute('content', pageTitle)
+document.querySelector('meta[name="twitter:description"]')?.setAttribute('content', pageDescription)
+if (portfolioConfig.seo.image) {
+  document.querySelector('meta[property="og:image"]')?.setAttribute('content', portfolioConfig.seo.image)
+  document.querySelector('meta[name="twitter:image"]')?.setAttribute('content', portfolioConfig.seo.image)
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />