devfolio-page 0.2.4 → 0.2.6

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/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/styles.css

@@ -896,6 +896,200 @@ a:hover {
   gap: var(--spacing-xs);
 }
 
+/* --------------------------------------------
+   About Page
+   -------------------------------------------- */
+.about-content {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.about-avatar {
+  text-align: center;
+  margin-bottom: var(--spacing-2xl);
+}
+
+.about-avatar img {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid var(--border-color);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.about-bio {
+  margin-bottom: var(--spacing-3xl);
+  line-height: 1.85;
+}
+
+.about-bio h2,
+.about-bio h3 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--text-tertiary);
+  margin-top: var(--spacing-2xl);
+  margin-bottom: var(--spacing-md);
+  padding-bottom: var(--spacing-xs);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.about-bio h2:first-child,
+.about-bio h3:first-child {
+  margin-top: 0;
+}
+
+.about-bio p {
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+.about-bio p:last-child {
+  margin-bottom: 0;
+}
+
+.about-bio ul,
+.about-bio ol {
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-md);
+  padding-left: var(--spacing-lg);
+}
+
+.about-bio li {
+  margin-bottom: var(--spacing-xs);
+}
+
+/* About Skills Section */
+.about-skills {
+  margin-bottom: var(--spacing-3xl);
+  padding-top: var(--spacing-xl);
+  border-top: 1px solid var(--border-color);
+}
+
+.about-skills h2 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--text-tertiary);
+  margin-bottom: var(--spacing-xl);
+}
+
+.skill-category {
+  margin-bottom: var(--spacing-lg);
+}
+
+.skill-category:last-child {
+  margin-bottom: 0;
+}
+
+.skill-category h3 {
+  font-family: var(--font-sans);
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.skill-category .project-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+}
+
+/* About Education Section */
+.about-education {
+  margin-bottom: var(--spacing-3xl);
+  padding-top: var(--spacing-xl);
+  border-top: 1px solid var(--border-color);
+}
+
+.about-education h2 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--text-tertiary);
+  margin-bottom: var(--spacing-xl);
+}
+
+.about-education .education-item {
+  display: block;
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.about-education .education-item:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.about-education .education-item h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.about-education .education-item .degree {
+  font-style: italic;
+  color: var(--text-secondary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.about-education .education-item .date {
+  font-family: var(--font-sans);
+  font-size: 0.8rem;
+  color: var(--text-tertiary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.about-education .education-item .description {
+  font-size: 0.9rem;
+  color: var(--text-tertiary);
+}
+
+/* About Contact Section */
+.about-contact {
+  padding-top: var(--spacing-xl);
+  border-top: 1px solid var(--border-color);
+}
+
+.about-contact h2 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--text-tertiary);
+  margin-bottom: var(--spacing-lg);
+}
+
+.contact-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm) var(--spacing-lg);
+}
+
+.contact-links a {
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.contact-links a:hover {
+  color: var(--accent-color);
+}
+
 /* Print styles */
 @media print {
   .site-nav {

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/dark-academia/templates/experiments-index.html

@@ -21,7 +21,6 @@
     <div class="nav-content">
       <a href="../" class="nav-logo">{{site_name}}</a>
       <div class="nav-links">
-        <a href="../">Home</a>
         {{#nav_links}}
         <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
         {{/nav_links}}

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

@@ -21,9 +21,9 @@
     <div class="nav-content">
       <a href="./" class="nav-logo">{{name}}</a>
       <div class="nav-links">
-        {{#hasProjects}}<a href="./projects/">Projects</a>{{/hasProjects}}
-        {{#hasExperiments}}<a href="./experiments/">Experiments</a>{{/hasExperiments}}
-        {{#hasWriting}}<a href="./writing/">Writing</a>{{/hasWriting}}
+        {{#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">

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

@@ -21,7 +21,6 @@
     <div class="nav-content">
       <a href="../" class="nav-logo">{{site_name}}</a>
       <div class="nav-links">
-        <a href="../">Home</a>
         {{#nav_links}}
         <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
         {{/nav_links}}

package/dist/generator/themes/dark-academia/templates/projects-index.html

@@ -21,7 +21,6 @@
     <div class="nav-content">
       <a href="../" class="nav-logo">{{site_name}}</a>
       <div class="nav-links">
-        <a href="../">Home</a>
         {{#nav_links}}
         <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
         {{/nav_links}}

package/dist/generator/themes/dark-academia/templates/writing-index.html

@@ -21,7 +21,6 @@
     <div class="nav-content">
       <a href="../" class="nav-logo">{{site_name}}</a>
       <div class="nav-links">
-        <a href="../">Home</a>
         {{#nav_links}}
         <a href="{{href}}"{{#active}} class="active"{{/active}}>{{label}}</a>
         {{/nav_links}}