devfolio-page 0.2.3 → 0.2.5

package/dist/cli/helpers/validate.js

@@ -86,7 +86,7 @@ export function validatePortfolio(yamlPath) {
 export function getPortfolioSummary(portfolio) {
     return {
         name: portfolio.meta.name,
-        title: portfolio.meta.title,
+        title: portfolio.meta.title || '',
         experienceCount: portfolio.sections.experience?.length ?? 0,
         projectCount: portfolio.sections.projects?.length ?? 0,
         skillCategoryCount: portfolio.sections.skills

package/dist/cli/schemas/portfolio.schema.js

@@ -95,59 +95,59 @@ const contentSectionSchema = z.discriminatedUnion('type', [
 // Simple project schema (backwards compatible)
 const simpleProjectSchema = z.object({
     name: z.string().min(1, 'Project name is required'),
-    url: urlString.optional(),
-    description: z.string().optional(),
-    tags: z.array(z.string()).optional(),
-    featured: z.boolean().optional(),
+    url: urlString.optional().nullable(),
+    description: z.string().optional().nullable(),
+    tags: z.array(z.string()).optional().nullable(),
+    featured: z.boolean().optional().nullable(),
 });
 // Rich project schema (for case studies)
 const richProjectSchema = z.object({
     id: z.string().min(1, 'Project ID (URL slug) is required'),
     title: z.string().min(1, 'Project title is required'),
-    subtitle: z.string().optional(),
-    featured: z.boolean().optional(),
-    thumbnail: urlOrPath.optional(),
-    hero: urlOrPath.optional(),
+    subtitle: z.string().optional().nullable(),
+    featured: z.boolean().optional().nullable(),
+    thumbnail: urlOrPath.optional().nullable(),
+    hero: urlOrPath.optional().nullable(),
     meta: z.object({
-        year: z.union([z.string(), z.number()]).optional(),
-        role: z.string().optional(),
-        timeline: z.string().optional(),
-        tech: z.array(z.string()).optional(),
+        year: z.union([z.string(), z.number()]).optional().nullable(),
+        role: z.string().optional().nullable(),
+        timeline: z.string().optional().nullable(),
+        tech: z.array(z.string()).optional().nullable(),
         links: z
             .object({
-            github: urlString.optional(),
-            demo: urlString.optional(),
-            live: urlString.optional(),
-            case_study: urlString.optional(),
+            github: urlString.optional().nullable(),
+            demo: urlString.optional().nullable(),
+            live: urlString.optional().nullable(),
+            case_study: urlString.optional().nullable(),
         })
-            .optional(),
-    }).optional(),
-    sections: z.array(contentSectionSchema).optional(),
+            .optional().nullable(),
+    }).optional().nullable(),
+    sections: z.array(contentSectionSchema).optional().nullable(),
 });
 // =============================================================================
 // Experience & Education Schemas
 // =============================================================================
 const experienceSchema = z.object({
     company: z.string().min(1, 'Company name is required'),
-    role: z.string().optional(),
+    role: z.string().optional().nullable(),
     date: z.object({
-        start: dateFormat.optional(),
-        end: dateOrPresent.optional(),
-    }).optional(),
-    location: z.string().optional(),
-    description: z.string().optional(),
-    highlights: z.array(z.string()).optional(),
+        start: dateFormat.optional().nullable(),
+        end: dateOrPresent.optional().nullable(),
+    }).optional().nullable(),
+    location: z.string().optional().nullable(),
+    description: z.string().optional().nullable(),
+    highlights: z.array(z.string()).optional().nullable(),
 });
 const educationSchema = z.object({
     institution: z.string().min(1, 'Institution name is required'),
-    degree: z.string().optional(),
+    degree: z.string().optional().nullable(),
     date: z.object({
-        start: dateFormat.optional(),
-        end: dateFormat.optional(),
-    }).optional(),
-    location: z.string().optional(),
-    description: z.string().optional(),
-    highlights: z.array(z.string()).optional(),
+        start: dateFormat.optional().nullable(),
+        end: dateFormat.optional().nullable(),
+    }).optional().nullable(),
+    location: z.string().optional().nullable(),
+    description: z.string().optional().nullable(),
+    highlights: z.array(z.string()).optional().nullable(),
 });
 // =============================================================================
 // Skills Schemas
@@ -172,38 +172,38 @@ const richSkillsSchema = z.object({
 // =============================================================================
 const writingSchema = z.object({
     title: z.string().min(1, 'Article title is required'),
-    url: urlString.optional(),
-    date: dateFormat.optional(),
-    description: z.string().optional(),
-    excerpt: z.string().optional(),
-    cover: urlOrPath.optional(),
-    publication: z.string().optional(),
-    tags: z.array(z.string()).optional(),
-    featured: z.boolean().optional(),
+    url: urlString.optional().nullable(),
+    date: dateFormat.optional().nullable(),
+    description: z.string().optional().nullable(),
+    excerpt: z.string().optional().nullable(),
+    cover: urlOrPath.optional().nullable(),
+    publication: z.string().optional().nullable(),
+    tags: z.array(z.string()).optional().nullable(),
+    featured: z.boolean().optional().nullable(),
 });
 // =============================================================================
 // New Content Types
 // =============================================================================
 const experimentSchema = z.object({
     title: z.string().min(1, 'Experiment title is required'),
-    description: z.string().optional(),
-    image: urlOrPath.optional(),
-    github: urlString.optional(),
-    demo: urlString.optional(),
-    tags: z.array(z.string()).optional(),
+    description: z.string().optional().nullable(),
+    image: urlOrPath.optional().nullable(),
+    github: urlString.optional().nullable(),
+    demo: urlString.optional().nullable(),
+    tags: z.array(z.string()).optional().nullable(),
 });
 const testimonialSchema = z.object({
     quote: z.string().min(1, 'Quote is required'),
-    author: z.string().optional(),
-    company: z.string().optional(),
-    role: z.string().optional(),
-    image: urlOrPath.optional(),
+    author: z.string().optional().nullable(),
+    company: z.string().optional().nullable(),
+    role: z.string().optional().nullable(),
+    image: urlOrPath.optional().nullable(),
 });
 const timelineItemSchema = z.object({
-    year: z.union([z.string(), z.number()]).optional(),
+    year: z.union([z.string(), z.number()]).optional().nullable(),
     title: z.string().min(1, 'Timeline item title is required'),
-    description: z.string().optional(),
-    image: urlOrPath.optional(),
+    description: z.string().optional().nullable(),
+    image: urlOrPath.optional().nullable(),
 });
 // =============================================================================
 // Settings & Layout Schemas
@@ -227,50 +227,50 @@ export const portfolioSchema = z.object({
     // Core metadata
     meta: z.object({
         name: z.string().min(1, 'Name is required'),
-        title: z.string().optional(),
-        tagline: z.string().optional(),
-        location: z.string().optional(),
-        timezone: z.string().optional(),
-        avatar: urlOrPath.optional(),
-        hero_image: urlOrPath.optional(),
+        title: z.string().optional().nullable(),
+        tagline: z.string().optional().nullable(),
+        location: z.string().optional().nullable(),
+        timezone: z.string().optional().nullable(),
+        avatar: urlOrPath.optional().nullable(),
+        hero_image: urlOrPath.optional().nullable(),
     }),
     // Contact information
     contact: z.object({
-        email: z.string().email('Must be a valid email address').optional(),
-        website: urlString.optional(),
-        github: z.string().optional(),
-        linkedin: z.string().optional(),
-        twitter: z.string().optional(),
-    }).optional(),
+        email: z.string().email('Must be a valid email address').optional().nullable(),
+        website: urlString.optional().nullable(),
+        github: z.string().optional().nullable(),
+        linkedin: z.string().optional().nullable(),
+        twitter: z.string().optional().nullable(),
+    }).optional().nullable(),
     // Bio
-    bio: z.string().optional(),
+    bio: z.string().optional().nullable(),
     // Extended about section (optional)
     about: z
         .object({
-        short: z.string().optional(),
-        long: z.string().optional(),
+        short: z.string().optional().nullable(),
+        long: z.string().optional().nullable(),
     })
-        .optional(),
+        .optional().nullable(),
     // Sections (backwards compatible structure)
     sections: z.object({
-        experience: z.array(experienceSchema).optional(),
-        projects: z.array(simpleProjectSchema).optional(),
-        skills: simpleSkillsSchema.optional(),
-        writing: z.array(writingSchema).optional(),
-        education: z.array(educationSchema).optional(),
-    }).optional(),
+        experience: z.array(experienceSchema).optional().nullable(),
+        projects: z.array(simpleProjectSchema).optional().nullable(),
+        skills: simpleSkillsSchema.optional().nullable(),
+        writing: z.array(writingSchema).optional().nullable(),
+        education: z.array(educationSchema).optional().nullable(),
+    }).optional().nullable(),
     // Rich projects (new structure for case studies)
-    projects: z.array(richProjectSchema).optional(),
+    projects: z.array(richProjectSchema).optional().nullable(),
     // New content types
-    experiments: z.array(experimentSchema).optional(),
-    testimonials: z.array(testimonialSchema).optional(),
-    timeline: z.array(timelineItemSchema).optional(),
+    experiments: z.array(experimentSchema).optional().nullable(),
+    testimonials: z.array(testimonialSchema).optional().nullable(),
+    timeline: z.array(timelineItemSchema).optional().nullable(),
     // Theme selection
-    theme: z.enum(['srcl', 'modern', 'minimal', 'dark-academia']).optional(),
+    theme: z.enum(['srcl', 'modern', 'minimal', 'dark-academia']).optional().nullable(),
     // Layout configuration
-    layout: layoutSchema.optional(),
+    layout: layoutSchema.optional().nullable(),
     // Settings
-    settings: settingsSchema.optional(),
+    settings: settingsSchema.optional().nullable(),
 });
 // =============================================================================
 // Helper Functions

package/dist/generator/builder.js

@@ -119,6 +119,9 @@ async function generateMultiPageSite(portfolio, themePath, outputDir, theme) {
     // Generate homepage
     const homepageFiles = await generateHomepage(portfolio, themePath, outputDir, theme);
     files.push(...homepageFiles);
+    // Generate about page
+    const aboutFiles = await generateAboutPage(portfolio, themePath, outputDir, theme);
+    files.push(...aboutFiles);
     // Generate project pages
     const projectFiles = await generateProjectPages(portfolio, themePath, outputDir, theme);
     files.push(...projectFiles);
@@ -150,14 +153,14 @@ async function generateHomepage(portfolio, themePath, outputDir, theme) {
         location: portfolio.meta.location,
         timezone: portfolio.meta.timezone,
         // Contact
-        email: portfolio.contact.email,
-        website: portfolio.contact.website,
-        github: portfolio.contact.github,
-        linkedin: portfolio.contact.linkedin,
-        twitter: portfolio.contact.twitter,
+        email: portfolio.contact?.email,
+        website: portfolio.contact?.website,
+        github: portfolio.contact?.github,
+        linkedin: portfolio.contact?.linkedin,
+        twitter: portfolio.contact?.twitter,
         // Bio
-        bio: portfolio.bio,
-        bio_html: parseBio(portfolio.bio),
+        bio: portfolio.bio || '',
+        bio_html: parseBio(portfolio.bio || ''),
         about_short: portfolio.about?.short || '',
         // Featured content
         featured_projects: portfolio.projects?.filter((p) => p.featured) || [],
@@ -235,6 +238,44 @@ async function generateProjectsIndex(portfolio, themePath, outputDir, theme) {
     await fs.writeFile(path.join(outputDir, 'projects/index.html'), html);
     return ['projects/index.html'];
 }
+async function generateAboutPage(portfolio, themePath, outputDir, theme) {
+    // Only generate if about section exists
+    if (!portfolio.about?.long && !portfolio.about?.short) {
+        return [];
+    }
+    const templatePath = path.join(themePath, 'templates/about.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    await fs.mkdir(path.join(outputDir, 'about'), { recursive: true });
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    // Convert skills object to array format for template
+    const skillsArray = portfolio.sections?.skills
+        ? Object.entries(portfolio.sections.skills).map(([category, items]) => ({
+            category,
+            items,
+        }))
+        : [];
+    const data = {
+        site_name: portfolio.meta.name,
+        tagline: portfolio.meta.tagline,
+        avatar: portfolio.meta.avatar,
+        about_content: parseMarkdown(portfolio.about?.long || portfolio.about?.short || ''),
+        contact: portfolio.contact,
+        hasContact: !!(portfolio.contact?.email || portfolio.contact?.github || portfolio.contact?.linkedin || portfolio.contact?.twitter || portfolio.contact?.website),
+        skills: skillsArray,
+        hasSkills: skillsArray.length > 0,
+        education: portfolio.sections?.education || [],
+        hasEducation: (portfolio.sections?.education?.length ?? 0) > 0,
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        nav_links: generateNavLinks(portfolio, true, 'about'),
+    };
+    const html = Mustache.render(template, data);
+    await fs.writeFile(path.join(outputDir, 'about/index.html'), html);
+    return ['about/index.html'];
+}
 async function generateExperimentsIndex(portfolio, themePath, outputDir, theme) {
     // Only generate if experiments exist
     if (!portfolio.experiments || portfolio.experiments.length === 0) {
@@ -360,7 +401,20 @@ function renderContentSection(section, partials) {
 function generateNavLinks(portfolio, fromSubdir = false, currentPage = 'home') {
     const links = [];
     const prefix = fromSubdir ? '../' : './';
-    // Note: "Home" is not included since the site name already links home
+    // Always include Home link
+    links.push({
+        href: fromSubdir ? '../' : './',
+        label: 'Home',
+        active: currentPage === 'home',
+    });
+    // Include About link if about section exists
+    if (portfolio.about?.long || portfolio.about?.short) {
+        links.push({
+            href: `${prefix}about/`,
+            label: 'About',
+            active: currentPage === 'about',
+        });
+    }
     if ((portfolio.projects?.length ?? 0) > 0) {
         links.push({
             href: `${prefix}projects/`,
@@ -375,7 +429,7 @@ function generateNavLinks(portfolio, fromSubdir = false, currentPage = 'home') {
             active: currentPage === 'experiments',
         });
     }
-    if ((portfolio.sections.writing?.length ?? 0) > 0) {
+    if ((portfolio.sections?.writing?.length ?? 0) > 0) {
         links.push({
             href: `${prefix}writing/`,
             label: 'Writing',
@@ -419,14 +473,14 @@ function prepareTemplateData(portfolio) {
         location: portfolio.meta.location,
         timezone: portfolio.meta.timezone,
         // Contact
-        email: portfolio.contact.email,
-        website: portfolio.contact.website,
-        github: portfolio.contact.github,
-        linkedin: portfolio.contact.linkedin,
-        twitter: portfolio.contact.twitter,
+        email: portfolio.contact?.email,
+        website: portfolio.contact?.website,
+        github: portfolio.contact?.github,
+        linkedin: portfolio.contact?.linkedin,
+        twitter: portfolio.contact?.twitter,
         // Bio
-        bio: portfolio.bio,
-        bio_html: parseBio(portfolio.bio),
+        bio: portfolio.bio || '',
+        bio_html: parseBio(portfolio.bio || ''),
         // Sections
         experiences,
         projects: portfolio.sections.projects || [],
@@ -665,6 +719,9 @@ async function generateMultiPageSiteInMemory(portfolio, themePath, theme, files)
     // Generate homepage
     const homepageFiles = await generateHomepageInMemory(portfolio, themePath, theme, files);
     fileList.push(...homepageFiles);
+    // Generate about page
+    const aboutFiles = await generateAboutPageInMemory(portfolio, themePath, theme, files);
+    fileList.push(...aboutFiles);
     // Generate project pages
     const projectFiles = await generateProjectPagesInMemory(portfolio, themePath, theme, files);
     fileList.push(...projectFiles);
@@ -694,13 +751,13 @@ async function generateHomepageInMemory(portfolio, themePath, theme, files) {
         title: portfolio.meta.title,
         location: portfolio.meta.location,
         timezone: portfolio.meta.timezone,
-        email: portfolio.contact.email,
-        website: portfolio.contact.website,
-        github: portfolio.contact.github,
-        linkedin: portfolio.contact.linkedin,
-        twitter: portfolio.contact.twitter,
-        bio: portfolio.bio,
-        bio_html: parseBio(portfolio.bio),
+        email: portfolio.contact?.email,
+        website: portfolio.contact?.website,
+        github: portfolio.contact?.github,
+        linkedin: portfolio.contact?.linkedin,
+        twitter: portfolio.contact?.twitter,
+        bio: portfolio.bio || '',
+        bio_html: parseBio(portfolio.bio || ''),
         about_short: portfolio.about?.short || '',
         featured_projects: portfolio.projects?.filter((p) => p.featured) || [],
         featured_writing: portfolio.sections.writing?.filter((w) => 'featured' in w && w.featured) || [],
@@ -769,6 +826,42 @@ async function generateProjectsIndexInMemory(portfolio, themePath, theme, files)
     files.set('projects/index.html', Buffer.from(html, 'utf-8'));
     return ['projects/index.html'];
 }
+async function generateAboutPageInMemory(portfolio, themePath, theme, files) {
+    if (!portfolio.about?.long && !portfolio.about?.short) {
+        return [];
+    }
+    const templatePath = path.join(themePath, 'templates/about.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    // Convert skills object to array format for template
+    const skillsArray = portfolio.sections?.skills
+        ? Object.entries(portfolio.sections.skills).map(([category, items]) => ({
+            category,
+            items,
+        }))
+        : [];
+    const data = {
+        site_name: portfolio.meta.name,
+        tagline: portfolio.meta.tagline,
+        avatar: portfolio.meta.avatar,
+        about_content: parseMarkdown(portfolio.about?.long || portfolio.about?.short || ''),
+        contact: portfolio.contact,
+        hasContact: !!(portfolio.contact?.email || portfolio.contact?.github || portfolio.contact?.linkedin || portfolio.contact?.twitter || portfolio.contact?.website),
+        skills: skillsArray,
+        hasSkills: skillsArray.length > 0,
+        education: portfolio.sections?.education || [],
+        hasEducation: (portfolio.sections?.education?.length ?? 0) > 0,
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        nav_links: generateNavLinks(portfolio, true, 'about'),
+    };
+    const html = Mustache.render(template, data);
+    files.set('about/index.html', Buffer.from(html, 'utf-8'));
+    return ['about/index.html'];
+}
 async function generateExperimentsIndexInMemory(portfolio, themePath, theme, files) {
     if (!portfolio.experiments || portfolio.experiments.length === 0) {
         return [];

package/dist/generator/themes/dark-academia/templates/about.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - {{site_name}}</title>
+  <meta name="description" content="About {{site_name}}">
+  <link rel="stylesheet" href="../assets/styles.css">
+  <script>
+    (function() {
+      try {
+        var saved = localStorage.getItem('academia-theme');
+        if (saved) document.documentElement.dataset.theme = saved;
+      } catch(e) {}
+    })();
+  </script>
+</head>
+<body class="academia-theme" data-theme="{{colorScheme}}">
+
+  <nav class="site-nav">
+    <div class="nav-content">
+      <a href="../" class="nav-logo">{{site_name}}</a>
+      <div class="nav-links">
+        {{#nav_links}}
+        <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
+        {{/nav_links}}
+      </div>
+      <button class="theme-btn" title="Toggle theme" aria-label="Toggle theme">
+        <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+        <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+      </button>
+    </div>
+  </nav>
+
+  <main class="page-content">
+    <header class="page-header">
+      <div class="header-ornament"></div>
+      <h1>About</h1>
+      {{#tagline}}<p>{{tagline}}</p>{{/tagline}}
+    </header>
+
+    <div class="about-content">
+      {{#avatar}}
+      <div class="about-avatar">
+        <img src="{{avatar}}" alt="{{site_name}}" />
+      </div>
+      {{/avatar}}
+
+      <div class="about-bio">
+        {{{about_content}}}
+      </div>
+
+      {{#hasSkills}}
+      <section class="about-skills">
+        <h2>Skills & Expertise</h2>
+        {{#skills}}
+        <div class="skill-category">
+          <h3>{{category}}</h3>
+          <div class="project-tags">
+            {{#items}}<span class="tag">{{.}}</span>{{/items}}
+          </div>
+        </div>
+        {{/skills}}
+      </section>
+      {{/hasSkills}}
+
+      {{#hasEducation}}
+      <section class="about-education">
+        <h2>Education</h2>
+        {{#education}}
+        <div class="education-item">
+          <h3>{{institution}}</h3>
+          {{#degree}}<p class="degree">{{degree}}</p>{{/degree}}
+          {{#date}}<p class="date">{{date.start}} - {{date.end}}</p>{{/date}}
+          {{#description}}<p class="description">{{description}}</p>{{/description}}
+        </div>
+        {{/education}}
+      </section>
+      {{/hasEducation}}
+
+      {{#hasContact}}
+      <section class="about-contact">
+        <h2>Correspondence</h2>
+        <div class="contact-links">
+          {{#contact.email}}<a href="mailto:{{contact.email}}">{{contact.email}}</a>{{/contact.email}}
+          {{#contact.github}}<a href="https://github.com/{{contact.github}}" target="_blank">Archives</a>{{/contact.github}}
+          {{#contact.linkedin}}<a href="https://linkedin.com/in/{{contact.linkedin}}" target="_blank">LinkedIn</a>{{/contact.linkedin}}
+          {{#contact.twitter}}<a href="https://twitter.com/{{contact.twitter}}" target="_blank">Twitter</a>{{/contact.twitter}}
+          {{#contact.website}}<a href="{{contact.website}}" target="_blank">Website</a>{{/contact.website}}
+        </div>
+      </section>
+      {{/hasContact}}
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="footer-ornament"></div>
+    <p>Crafted with <a href="https://devfolio.page" target="_blank">devfolio.page</a></p>
+  </footer>
+
+  <script src="../assets/script.js"></script>
+</body>
+</html>

package/dist/generator/themes/modern/templates/about.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - {{site_name}}</title>
+  <meta name="description" content="About {{site_name}}">
+  <link rel="stylesheet" href="../assets/styles.css">
+  <script>
+    (function() {
+      try {
+        var saved = localStorage.getItem('modern-theme');
+        if (saved) document.documentElement.dataset.theme = saved;
+      } catch(e) {}
+    })();
+  </script>
+</head>
+<body class="modern-theme" data-theme="{{colorScheme}}">
+
+  <header class="site-header">
+    <div class="header-content">
+      <a href="../" class="logo">{{site_name}}</a>
+      <nav class="nav">
+        {{#nav_links}}
+        <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
+        {{/nav_links}}
+      </nav>
+      <button class="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
+        <svg class="icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+        <svg class="icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+      </button>
+    </div>
+  </header>
+
+  <main class="main-content">
+    <header class="page-header">
+      <h1>About</h1>
+      {{#tagline}}<p>{{tagline}}</p>{{/tagline}}
+    </header>
+
+    <div class="about-content">
+      {{#avatar}}
+      <div class="about-avatar">
+        <img src="{{avatar}}" alt="{{site_name}}" />
+      </div>
+      {{/avatar}}
+
+      <div class="about-bio">
+        {{{about_content}}}
+      </div>
+
+      {{#hasSkills}}
+      <section class="about-skills">
+        <h2>Skills</h2>
+        {{#skills}}
+        <div class="skill-category">
+          <h3>{{category}}</h3>
+          <div class="project-tags">
+            {{#items}}<span class="project-tag">{{.}}</span>{{/items}}
+          </div>
+        </div>
+        {{/skills}}
+      </section>
+      {{/hasSkills}}
+
+      {{#hasEducation}}
+      <section class="about-education">
+        <h2>Education</h2>
+        {{#education}}
+        <div class="education-item">
+          <h3>{{institution}}</h3>
+          {{#degree}}<p class="degree">{{degree}}</p>{{/degree}}
+          {{#date}}<p class="date">{{date.start}} - {{date.end}}</p>{{/date}}
+          {{#description}}<p class="description">{{description}}</p>{{/description}}
+        </div>
+        {{/education}}
+      </section>
+      {{/hasEducation}}
+
+      {{#hasContact}}
+      <section class="about-contact">
+        <h2>Contact</h2>
+        <div class="contact-links">
+          {{#contact.email}}<a href="mailto:{{contact.email}}">{{contact.email}}</a>{{/contact.email}}
+          {{#contact.github}}<a href="https://github.com/{{contact.github}}" target="_blank">GitHub</a>{{/contact.github}}
+          {{#contact.linkedin}}<a href="https://linkedin.com/in/{{contact.linkedin}}" target="_blank">LinkedIn</a>{{/contact.linkedin}}
+          {{#contact.twitter}}<a href="https://twitter.com/{{contact.twitter}}" target="_blank">Twitter</a>{{/contact.twitter}}
+          {{#contact.website}}<a href="{{contact.website}}" target="_blank">Website</a>{{/contact.website}}
+        </div>
+      </section>
+      {{/hasContact}}
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <p>Built with <a href="https://devfolio.page" target="_blank">devfolio.page</a></p>
+  </footer>
+
+  <script src="../assets/script.js"></script>
+</body>
+</html>

package/dist/generator/themes/srcl/templates/about.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - {{site_name}}</title>
+  <meta name="description" content="About {{site_name}}">
+  <link rel="stylesheet" href="../assets/styles.css">
+  <script>
+    // Load theme preference before render to prevent flash
+    (function() {
+      try {
+        var saved = localStorage.getItem('srcl-theme');
+        if (saved) document.documentElement.dataset.theme = saved;
+      } catch(e) {}
+    })();
+  </script>
+</head>
+<body class="srcl-theme" data-theme="{{colorScheme}}">
+
+  <!-- Action Bar -->
+  <div class="srcl-action-bar">
+    <nav class="primary">
+      <a href="../" class="nav-home">{{site_name}}</a>
+      {{#nav_links}}
+      <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
+      {{/nav_links}}
+    </nav>
+    <div class="secondary">
+      <button class="hotkey" data-hotkey="ctrl+t" title="Toggle theme (Ctrl+T)">
+        <span class="key">^T</span>
+      </button>
+    </div>
+  </div>
+
+  <main class="content">
+    <header class="page-header">
+      <h1>About</h1>
+      {{#tagline}}<p class="page-description">{{tagline}}</p>{{/tagline}}
+    </header>
+
+    <div class="about-content">
+      {{#avatar}}
+      <div class="about-avatar">
+        <img src="{{avatar}}" alt="{{site_name}}" />
+      </div>
+      {{/avatar}}
+
+      <div class="about-bio">
+        {{{about_content}}}
+      </div>
+
+      {{#hasSkills}}
+      <section class="about-skills">
+        <h2>Skills</h2>
+        {{#skills}}
+        <div class="skill-category">
+          <h3>{{category}}</h3>
+          <div class="skill-tags">
+            {{#items}}<span class="tag">{{.}}</span>{{/items}}
+          </div>
+        </div>
+        {{/skills}}
+      </section>
+      {{/hasSkills}}
+
+      {{#hasEducation}}
+      <section class="about-education">
+        <h2>Education</h2>
+        {{#education}}
+        <div class="education-item">
+          <h3>{{institution}}</h3>
+          {{#degree}}<p class="degree">{{degree}}</p>{{/degree}}
+          {{#date}}<p class="date">{{date.start}} - {{date.end}}</p>{{/date}}
+          {{#description}}<p class="description">{{description}}</p>{{/description}}
+        </div>
+        {{/education}}
+      </section>
+      {{/hasEducation}}
+
+      {{#hasContact}}
+      <section class="about-contact">
+        <h2>Contact</h2>
+        <div class="contact-links">
+          {{#contact.email}}<a href="mailto:{{contact.email}}">{{contact.email}}</a>{{/contact.email}}
+          {{#contact.github}}<a href="https://github.com/{{contact.github}}" target="_blank">GitHub</a>{{/contact.github}}
+          {{#contact.linkedin}}<a href="https://linkedin.com/in/{{contact.linkedin}}" target="_blank">LinkedIn</a>{{/contact.linkedin}}
+          {{#contact.twitter}}<a href="https://twitter.com/{{contact.twitter}}" target="_blank">Twitter</a>{{/contact.twitter}}
+          {{#contact.website}}<a href="{{contact.website}}" target="_blank">Website</a>{{/contact.website}}
+        </div>
+      </section>
+      {{/hasContact}}
+    </div>
+  </main>
+
+  <footer class="srcl-footer">
+    <p>Built with <a href="https://devfolio.page" target="_blank">devfolio.page</a> using <a href="https://sacred.computer" target="_blank">SRCL</a></p>
+  </footer>
+
+  <script src="../assets/script.js"></script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devfolio-page",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Your portfolio as code. Version control it like software.",
   "type": "module",
   "bin": {

package/src/generator/themes/dark-academia/templates/about.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - {{site_name}}</title>
+  <meta name="description" content="About {{site_name}}">
+  <link rel="stylesheet" href="../assets/styles.css">
+  <script>
+    (function() {
+      try {
+        var saved = localStorage.getItem('academia-theme');
+        if (saved) document.documentElement.dataset.theme = saved;
+      } catch(e) {}
+    })();
+  </script>
+</head>
+<body class="academia-theme" data-theme="{{colorScheme}}">
+
+  <nav class="site-nav">
+    <div class="nav-content">
+      <a href="../" class="nav-logo">{{site_name}}</a>
+      <div class="nav-links">
+        {{#nav_links}}
+        <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
+        {{/nav_links}}
+      </div>
+      <button class="theme-btn" title="Toggle theme" aria-label="Toggle theme">
+        <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+        <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+      </button>
+    </div>
+  </nav>
+
+  <main class="page-content">
+    <header class="page-header">
+      <div class="header-ornament"></div>
+      <h1>About</h1>
+      {{#tagline}}<p>{{tagline}}</p>{{/tagline}}
+    </header>
+
+    <div class="about-content">
+      {{#avatar}}
+      <div class="about-avatar">
+        <img src="{{avatar}}" alt="{{site_name}}" />
+      </div>
+      {{/avatar}}
+
+      <div class="about-bio">
+        {{{about_content}}}
+      </div>
+
+      {{#hasSkills}}
+      <section class="about-skills">
+        <h2>Skills & Expertise</h2>
+        {{#skills}}
+        <div class="skill-category">
+          <h3>{{category}}</h3>
+          <div class="project-tags">
+            {{#items}}<span class="tag">{{.}}</span>{{/items}}
+          </div>
+        </div>
+        {{/skills}}
+      </section>
+      {{/hasSkills}}
+
+      {{#hasEducation}}
+      <section class="about-education">
+        <h2>Education</h2>
+        {{#education}}
+        <div class="education-item">
+          <h3>{{institution}}</h3>
+          {{#degree}}<p class="degree">{{degree}}</p>{{/degree}}
+          {{#date}}<p class="date">{{date.start}} - {{date.end}}</p>{{/date}}
+          {{#description}}<p class="description">{{description}}</p>{{/description}}
+        </div>
+        {{/education}}
+      </section>
+      {{/hasEducation}}
+
+      {{#hasContact}}
+      <section class="about-contact">
+        <h2>Correspondence</h2>
+        <div class="contact-links">
+          {{#contact.email}}<a href="mailto:{{contact.email}}">{{contact.email}}</a>{{/contact.email}}
+          {{#contact.github}}<a href="https://github.com/{{contact.github}}" target="_blank">Archives</a>{{/contact.github}}
+          {{#contact.linkedin}}<a href="https://linkedin.com/in/{{contact.linkedin}}" target="_blank">LinkedIn</a>{{/contact.linkedin}}
+          {{#contact.twitter}}<a href="https://twitter.com/{{contact.twitter}}" target="_blank">Twitter</a>{{/contact.twitter}}
+          {{#contact.website}}<a href="{{contact.website}}" target="_blank">Website</a>{{/contact.website}}
+        </div>
+      </section>
+      {{/hasContact}}
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="footer-ornament"></div>
+    <p>Crafted with <a href="https://devfolio.page" target="_blank">devfolio.page</a></p>
+  </footer>
+
+  <script src="../assets/script.js"></script>
+</body>
+</html>

package/src/generator/themes/modern/templates/about.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - {{site_name}}</title>
+  <meta name="description" content="About {{site_name}}">
+  <link rel="stylesheet" href="../assets/styles.css">
+  <script>
+    (function() {
+      try {
+        var saved = localStorage.getItem('modern-theme');
+        if (saved) document.documentElement.dataset.theme = saved;
+      } catch(e) {}
+    })();
+  </script>
+</head>
+<body class="modern-theme" data-theme="{{colorScheme}}">
+
+  <header class="site-header">
+    <div class="header-content">
+      <a href="../" class="logo">{{site_name}}</a>
+      <nav class="nav">
+        {{#nav_links}}
+        <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
+        {{/nav_links}}
+      </nav>
+      <button class="theme-toggle" title="Toggle theme" aria-label="Toggle theme">
+        <svg class="icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+        <svg class="icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+      </button>
+    </div>
+  </header>
+
+  <main class="main-content">
+    <header class="page-header">
+      <h1>About</h1>
+      {{#tagline}}<p>{{tagline}}</p>{{/tagline}}
+    </header>
+
+    <div class="about-content">
+      {{#avatar}}
+      <div class="about-avatar">
+        <img src="{{avatar}}" alt="{{site_name}}" />
+      </div>
+      {{/avatar}}
+
+      <div class="about-bio">
+        {{{about_content}}}
+      </div>
+
+      {{#hasSkills}}
+      <section class="about-skills">
+        <h2>Skills</h2>
+        {{#skills}}
+        <div class="skill-category">
+          <h3>{{category}}</h3>
+          <div class="project-tags">
+            {{#items}}<span class="project-tag">{{.}}</span>{{/items}}
+          </div>
+        </div>
+        {{/skills}}
+      </section>
+      {{/hasSkills}}
+
+      {{#hasEducation}}
+      <section class="about-education">
+        <h2>Education</h2>
+        {{#education}}
+        <div class="education-item">
+          <h3>{{institution}}</h3>
+          {{#degree}}<p class="degree">{{degree}}</p>{{/degree}}
+          {{#date}}<p class="date">{{date.start}} - {{date.end}}</p>{{/date}}
+          {{#description}}<p class="description">{{description}}</p>{{/description}}
+        </div>
+        {{/education}}
+      </section>
+      {{/hasEducation}}
+
+      {{#hasContact}}
+      <section class="about-contact">
+        <h2>Contact</h2>
+        <div class="contact-links">
+          {{#contact.email}}<a href="mailto:{{contact.email}}">{{contact.email}}</a>{{/contact.email}}
+          {{#contact.github}}<a href="https://github.com/{{contact.github}}" target="_blank">GitHub</a>{{/contact.github}}
+          {{#contact.linkedin}}<a href="https://linkedin.com/in/{{contact.linkedin}}" target="_blank">LinkedIn</a>{{/contact.linkedin}}
+          {{#contact.twitter}}<a href="https://twitter.com/{{contact.twitter}}" target="_blank">Twitter</a>{{/contact.twitter}}
+          {{#contact.website}}<a href="{{contact.website}}" target="_blank">Website</a>{{/contact.website}}
+        </div>
+      </section>
+      {{/hasContact}}
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <p>Built with <a href="https://devfolio.page" target="_blank">devfolio.page</a></p>
+  </footer>
+
+  <script src="../assets/script.js"></script>
+</body>
+</html>

package/src/generator/themes/srcl/templates/about.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - {{site_name}}</title>
+  <meta name="description" content="About {{site_name}}">
+  <link rel="stylesheet" href="../assets/styles.css">
+  <script>
+    // Load theme preference before render to prevent flash
+    (function() {
+      try {
+        var saved = localStorage.getItem('srcl-theme');
+        if (saved) document.documentElement.dataset.theme = saved;
+      } catch(e) {}
+    })();
+  </script>
+</head>
+<body class="srcl-theme" data-theme="{{colorScheme}}">
+
+  <!-- Action Bar -->
+  <div class="srcl-action-bar">
+    <nav class="primary">
+      <a href="../" class="nav-home">{{site_name}}</a>
+      {{#nav_links}}
+      <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
+      {{/nav_links}}
+    </nav>
+    <div class="secondary">
+      <button class="hotkey" data-hotkey="ctrl+t" title="Toggle theme (Ctrl+T)">
+        <span class="key">^T</span>
+      </button>
+    </div>
+  </div>
+
+  <main class="content">
+    <header class="page-header">
+      <h1>About</h1>
+      {{#tagline}}<p class="page-description">{{tagline}}</p>{{/tagline}}
+    </header>
+
+    <div class="about-content">
+      {{#avatar}}
+      <div class="about-avatar">
+        <img src="{{avatar}}" alt="{{site_name}}" />
+      </div>
+      {{/avatar}}
+
+      <div class="about-bio">
+        {{{about_content}}}
+      </div>
+
+      {{#hasSkills}}
+      <section class="about-skills">
+        <h2>Skills</h2>
+        {{#skills}}
+        <div class="skill-category">
+          <h3>{{category}}</h3>
+          <div class="skill-tags">
+            {{#items}}<span class="tag">{{.}}</span>{{/items}}
+          </div>
+        </div>
+        {{/skills}}
+      </section>
+      {{/hasSkills}}
+
+      {{#hasEducation}}
+      <section class="about-education">
+        <h2>Education</h2>
+        {{#education}}
+        <div class="education-item">
+          <h3>{{institution}}</h3>
+          {{#degree}}<p class="degree">{{degree}}</p>{{/degree}}
+          {{#date}}<p class="date">{{date.start}} - {{date.end}}</p>{{/date}}
+          {{#description}}<p class="description">{{description}}</p>{{/description}}
+        </div>
+        {{/education}}
+      </section>
+      {{/hasEducation}}
+
+      {{#hasContact}}
+      <section class="about-contact">
+        <h2>Contact</h2>
+        <div class="contact-links">
+          {{#contact.email}}<a href="mailto:{{contact.email}}">{{contact.email}}</a>{{/contact.email}}
+          {{#contact.github}}<a href="https://github.com/{{contact.github}}" target="_blank">GitHub</a>{{/contact.github}}
+          {{#contact.linkedin}}<a href="https://linkedin.com/in/{{contact.linkedin}}" target="_blank">LinkedIn</a>{{/contact.linkedin}}
+          {{#contact.twitter}}<a href="https://twitter.com/{{contact.twitter}}" target="_blank">Twitter</a>{{/contact.twitter}}
+          {{#contact.website}}<a href="{{contact.website}}" target="_blank">Website</a>{{/contact.website}}
+        </div>
+      </section>
+      {{/hasContact}}
+    </div>
+  </main>
+
+  <footer class="srcl-footer">
+    <p>Built with <a href="https://devfolio.page" target="_blank">devfolio.page</a> using <a href="https://sacred.computer" target="_blank">SRCL</a></p>
+  </footer>
+
+  <script src="../assets/script.js"></script>
+</body>
+</html>