devfolio-page 0.2.8 → 0.2.10

package/README.md

@@ -95,12 +95,16 @@ devfolio-page validate portfolio.yaml
 
 ## YAML Schema
 
+### Basic Example
+
 ```yaml
 meta:
   name: Your Name
   title: Your Title
   location: Your Location
   timezone: America/Los_Angeles  # optional
+  tagline: A short tagline        # optional
+  avatar: images/avatar.jpg       # optional
 
 contact:
   email: you@example.com
@@ -113,6 +117,14 @@ bio: |
   A few sentences about yourself.
   Can be multiple lines.
 
+# Extended about section (generates dedicated /about page)
+about:
+  short: Brief intro for homepage
+  long: |
+    Longer bio with markdown support.
+
+    Multiple paragraphs work great here.
+
 sections:
   experience:
     - company: Company Name
@@ -142,6 +154,7 @@ sections:
       url: https://...
       date: 2024-12
       description: Brief description  # optional
+      featured: true  # optional
 
   education:
     - institution: University Name
@@ -163,6 +176,81 @@ settings:
   animate: subtle        # none, subtle, or full
 ```
 
+### Rich Projects (Case Studies)
+
+For a multi-page portfolio with dedicated project pages, use the top-level `projects` field:
+
+```yaml
+projects:
+  - id: my-project           # URL slug: /projects/my-project.html
+    title: My Project
+    subtitle: A brief tagline
+    featured: true
+    thumbnail: images/project-thumb.jpg
+    hero: images/project-hero.jpg
+    meta:
+      year: 2024
+      role: Lead Developer
+      timeline: 3 months
+      tech: [React, Node.js, PostgreSQL]
+      links:
+        github: https://github.com/...
+        demo: https://demo.example.com
+        live: https://example.com
+    sections:
+      - type: overview
+        content: |
+          Markdown content describing the project.
+      - type: image
+        src: images/screenshot.png
+        caption: Main dashboard view
+      - type: metrics
+        data:
+          - label: Users
+            value: "10,000+"
+          - label: Uptime
+            value: "99.9%"
+      - type: outcomes
+        content: |
+          What was achieved and lessons learned.
+```
+
+### Experiments
+
+For side projects and explorations:
+
+```yaml
+experiments:
+  - title: Creative Coding
+    description: Generative art experiments
+    image: images/experiment.png
+    github: https://github.com/...
+    demo: https://demo.example.com
+    tags: [p5.js, WebGL]
+```
+
+### Page Customization
+
+Customize titles and descriptions for each page:
+
+```yaml
+pages:
+  projects:
+    title: My Work
+    description: A curated selection of projects and case studies.
+  about:
+    title: About Me
+    description: Designer, developer, and coffee enthusiast.
+  experiments:
+    title: Lab
+    description: Creative experiments and explorations.
+  writing:
+    title: Blog
+    description: Thoughts on design and technology.
+```
+
+If not specified, each theme provides sensible defaults.
+
 ## Themes
 
 ### SRCL (Default)

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

@@ -220,6 +220,16 @@ const layoutSchema = z.object({
     show_experiments: z.boolean().optional(),
     show_timeline: z.boolean().optional(),
 });
+const pageContentSchema = z.object({
+    title: z.string().optional().nullable(),
+    description: z.string().optional().nullable(),
+});
+const pagesSchema = z.object({
+    projects: pageContentSchema.optional().nullable(),
+    about: pageContentSchema.optional().nullable(),
+    experiments: pageContentSchema.optional().nullable(),
+    writing: pageContentSchema.optional().nullable(),
+});
 // =============================================================================
 // Main Portfolio Schema
 // =============================================================================
@@ -271,6 +281,8 @@ export const portfolioSchema = z.object({
     layout: layoutSchema.optional().nullable(),
     // Settings
     settings: settingsSchema.optional().nullable(),
+    // Page content customization
+    pages: pagesSchema.optional().nullable(),
 });
 // =============================================================================
 // Helper Functions

package/dist/generator/builder.js

@@ -235,6 +235,8 @@ async function generateProjectsIndex(portfolio, themePath, outputDir, theme) {
         projects: portfolio.projects || [],
         colorScheme: settings.color_scheme || defaultColorScheme,
         nav_links: generateNavLinks(portfolio, true, 'projects'),
+        page_title: portfolio.pages?.projects?.title,
+        page_description: portfolio.pages?.projects?.description,
     };
     const html = Mustache.render(template, data);
     await fs.writeFile(path.join(outputDir, 'projects/index.html'), html);
@@ -273,6 +275,8 @@ async function generateAboutPage(portfolio, themePath, outputDir, theme) {
         hasEducation: (portfolio.sections?.education?.length ?? 0) > 0,
         colorScheme: settings.color_scheme || defaultColorScheme,
         nav_links: generateNavLinks(portfolio, true, 'about'),
+        page_title: portfolio.pages?.about?.title,
+        page_description: portfolio.pages?.about?.description,
     };
     const html = Mustache.render(template, data);
     await fs.writeFile(path.join(outputDir, 'about/index.html'), html);
@@ -296,6 +300,8 @@ async function generateExperimentsIndex(portfolio, themePath, outputDir, theme)
         experiments: portfolio.experiments || [],
         colorScheme: settings.color_scheme || defaultColorScheme,
         nav_links: generateNavLinks(portfolio, true, 'experiments'),
+        page_title: portfolio.pages?.experiments?.title,
+        page_description: portfolio.pages?.experiments?.description,
     };
     const html = Mustache.render(template, data);
     await fs.writeFile(path.join(outputDir, 'experiments/index.html'), html);
@@ -319,6 +325,8 @@ async function generateWritingIndex(portfolio, themePath, outputDir, theme) {
         writing: portfolio.sections.writing || [],
         colorScheme: settings.color_scheme || defaultColorScheme,
         nav_links: generateNavLinks(portfolio, true, 'writing'),
+        page_title: portfolio.pages?.writing?.title,
+        page_description: portfolio.pages?.writing?.description,
     };
     const html = Mustache.render(template, data);
     await fs.writeFile(path.join(outputDir, 'writing/index.html'), html);
@@ -824,6 +832,8 @@ async function generateProjectsIndexInMemory(portfolio, themePath, theme, files)
         projects: portfolio.projects || [],
         colorScheme: settings.color_scheme || defaultColorScheme,
         nav_links: generateNavLinks(portfolio, true, 'projects'),
+        page_title: portfolio.pages?.projects?.title,
+        page_description: portfolio.pages?.projects?.description,
     };
     const html = Mustache.render(template, data);
     files.set('projects/index.html', Buffer.from(html, 'utf-8'));
@@ -860,6 +870,8 @@ async function generateAboutPageInMemory(portfolio, themePath, theme, files) {
         hasEducation: (portfolio.sections?.education?.length ?? 0) > 0,
         colorScheme: settings.color_scheme || defaultColorScheme,
         nav_links: generateNavLinks(portfolio, true, 'about'),
+        page_title: portfolio.pages?.about?.title,
+        page_description: portfolio.pages?.about?.description,
     };
     const html = Mustache.render(template, data);
     files.set('about/index.html', Buffer.from(html, 'utf-8'));
@@ -881,6 +893,8 @@ async function generateExperimentsIndexInMemory(portfolio, themePath, theme, fil
         experiments: portfolio.experiments || [],
         colorScheme: settings.color_scheme || defaultColorScheme,
         nav_links: generateNavLinks(portfolio, true, 'experiments'),
+        page_title: portfolio.pages?.experiments?.title,
+        page_description: portfolio.pages?.experiments?.description,
     };
     const html = Mustache.render(template, data);
     files.set('experiments/index.html', Buffer.from(html, 'utf-8'));
@@ -902,6 +916,8 @@ async function generateWritingIndexInMemory(portfolio, themePath, theme, files)
         writing: portfolio.sections.writing || [],
         colorScheme: settings.color_scheme || defaultColorScheme,
         nav_links: generateNavLinks(portfolio, true, 'writing'),
+        page_title: portfolio.pages?.writing?.title,
+        page_description: portfolio.pages?.writing?.description,
     };
     const html = Mustache.render(template, data);
     files.set('writing/index.html', Buffer.from(html, 'utf-8'));

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

@@ -47,8 +47,8 @@
   <main class="page-content">
     <header class="page-header">
       <div class="header-ornament"></div>
-      <h1>About</h1>
-      {{#tagline}}<p>{{tagline}}</p>{{/tagline}}
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}About{{/page_title}}</h1>
+      {{#page_description}}<p>{{page_description}}</p>{{/page_description}}{{^page_description}}{{#tagline}}<p>{{tagline}}</p>{{/tagline}}{{/page_description}}
     </header>
 
     <div class="about-content">

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

@@ -47,8 +47,8 @@
   <main class="page-content">
     <header class="page-header">
       <div class="header-ornament"></div>
-      <h1>Experiments</h1>
-      <p>Explorations, studies, and curious investigations.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Experiments{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Explorations, studies, and curious investigations.{{/page_description}}</p>
     </header>
 
     <div class="experiments-list">

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

@@ -47,8 +47,8 @@
   <main class="page-content">
     <header class="page-header">
       <div class="header-ornament"></div>
-      <h1>Complete Works</h1>
-      <p>A collection of projects spanning research, development, and creative endeavors.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Complete Works{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}A collection of projects spanning research, development, and creative endeavors.{{/page_description}}</p>
     </header>
 
     <div class="projects-list">

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

@@ -47,8 +47,8 @@
   <main class="page-content">
     <header class="page-header">
       <div class="header-ornament"></div>
-      <h1>Publications</h1>
-      <p>Articles, essays, and scholarly writings.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Publications{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Articles, essays, and scholarly writings.{{/page_description}}</p>
     </header>
 
     <div class="writing-list">

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

@@ -46,8 +46,8 @@
 
   <main class="main-content">
     <header class="page-header">
-      <h1>About</h1>
-      {{#tagline}}<p>{{tagline}}</p>{{/tagline}}
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}About{{/page_title}}</h1>
+      {{#page_description}}<p>{{page_description}}</p>{{/page_description}}{{^page_description}}{{#tagline}}<p>{{tagline}}</p>{{/tagline}}{{/page_description}}
     </header>
 
     <div class="about-content">

package/dist/generator/themes/modern/templates/experiments-index.html

@@ -46,8 +46,8 @@
 
   <main class="main-content">
     <header class="page-header">
-      <h1>Experiments</h1>
-      <p>Side projects, explorations, and things I'm tinkering with.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Experiments{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Side projects, explorations, and things I'm tinkering with.{{/page_description}}</p>
     </header>
 
     <div class="experiments-grid">

package/dist/generator/themes/modern/templates/projects-index.html

@@ -46,8 +46,8 @@
 
   <main class="main-content">
     <header class="page-header">
-      <h1>Projects</h1>
-      <p>A collection of work spanning product development, open source, and research.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Projects{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}A collection of work spanning product development, open source, and research.{{/page_description}}</p>
     </header>
 
     <div class="projects-grid">

package/dist/generator/themes/modern/templates/writing-index.html

@@ -46,8 +46,8 @@
 
   <main class="main-content">
     <header class="page-header">
-      <h1>Writing</h1>
-      <p>Articles, blog posts, and technical writing.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Writing{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Articles, blog posts, and technical writing.{{/page_description}}</p>
     </header>
 
     <div class="writing-list">

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

@@ -35,8 +35,8 @@
 
   <main class="content">
     <header class="page-header">
-      <h1>About</h1>
-      {{#tagline}}<p class="page-description">{{tagline}}</p>{{/tagline}}
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}About{{/page_title}}</h1>
+      {{#page_description}}<p class="page-description">{{page_description}}</p>{{/page_description}}{{^page_description}}{{#tagline}}<p class="page-description">{{tagline}}</p>{{/tagline}}{{/page_description}}
     </header>
 
     <div class="about-content">

package/dist/generator/themes/srcl/templates/experiments-index.html

@@ -35,8 +35,8 @@
 
   <main class="content">
     <header class="page-header">
-      <h1>Experiments</h1>
-      <p class="page-description">Side projects, explorations, and things I'm tinkering with.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Experiments{{/page_title}}</h1>
+      <p class="page-description">{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Side projects, explorations, and things I'm tinkering with.{{/page_description}}</p>
     </header>
 
     <div class="experiments-grid full-width">

package/dist/generator/themes/srcl/templates/projects-index.html

@@ -35,8 +35,8 @@
 
   <main class="content">
     <header class="page-header">
-      <h1>Projects</h1>
-      <p class="page-description">A collection of work spanning product development, open source, and research.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Projects{{/page_title}}</h1>
+      <p class="page-description">{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}A collection of work spanning product development, open source, and research.{{/page_description}}</p>
     </header>
 
     <div class="projects-grid full-width">

package/dist/generator/themes/srcl/templates/writing-index.html

@@ -35,8 +35,8 @@
 
   <main class="content">
     <header class="page-header">
-      <h1>Writing</h1>
-      <p class="page-description">Articles, blog posts, and technical writing.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Writing{{/page_title}}</h1>
+      <p class="page-description">{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Articles, blog posts, and technical writing.{{/page_description}}</p>
     </header>
 
     <ul class="writing-list full-width">

package/package.json

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

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

@@ -47,8 +47,8 @@
   <main class="page-content">
     <header class="page-header">
       <div class="header-ornament"></div>
-      <h1>About</h1>
-      {{#tagline}}<p>{{tagline}}</p>{{/tagline}}
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}About{{/page_title}}</h1>
+      {{#page_description}}<p>{{page_description}}</p>{{/page_description}}{{^page_description}}{{#tagline}}<p>{{tagline}}</p>{{/tagline}}{{/page_description}}
     </header>
 
     <div class="about-content">

package/src/generator/themes/dark-academia/templates/experiments-index.html

@@ -47,8 +47,8 @@
   <main class="page-content">
     <header class="page-header">
       <div class="header-ornament"></div>
-      <h1>Experiments</h1>
-      <p>Explorations, studies, and curious investigations.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Experiments{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Explorations, studies, and curious investigations.{{/page_description}}</p>
     </header>
 
     <div class="experiments-list">

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

@@ -47,8 +47,8 @@
   <main class="page-content">
     <header class="page-header">
       <div class="header-ornament"></div>
-      <h1>Complete Works</h1>
-      <p>A collection of projects spanning research, development, and creative endeavors.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Complete Works{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}A collection of projects spanning research, development, and creative endeavors.{{/page_description}}</p>
     </header>
 
     <div class="projects-list">

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

@@ -47,8 +47,8 @@
   <main class="page-content">
     <header class="page-header">
       <div class="header-ornament"></div>
-      <h1>Publications</h1>
-      <p>Articles, essays, and scholarly writings.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Publications{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Articles, essays, and scholarly writings.{{/page_description}}</p>
     </header>
 
     <div class="writing-list">

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

@@ -46,8 +46,8 @@
 
   <main class="main-content">
     <header class="page-header">
-      <h1>About</h1>
-      {{#tagline}}<p>{{tagline}}</p>{{/tagline}}
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}About{{/page_title}}</h1>
+      {{#page_description}}<p>{{page_description}}</p>{{/page_description}}{{^page_description}}{{#tagline}}<p>{{tagline}}</p>{{/tagline}}{{/page_description}}
     </header>
 
     <div class="about-content">

package/src/generator/themes/modern/templates/experiments-index.html

@@ -46,8 +46,8 @@
 
   <main class="main-content">
     <header class="page-header">
-      <h1>Experiments</h1>
-      <p>Side projects, explorations, and things I'm tinkering with.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Experiments{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Side projects, explorations, and things I'm tinkering with.{{/page_description}}</p>
     </header>
 
     <div class="experiments-grid">

package/src/generator/themes/modern/templates/projects-index.html

@@ -46,8 +46,8 @@
 
   <main class="main-content">
     <header class="page-header">
-      <h1>Projects</h1>
-      <p>A collection of work spanning product development, open source, and research.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Projects{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}A collection of work spanning product development, open source, and research.{{/page_description}}</p>
     </header>
 
     <div class="projects-grid">

package/src/generator/themes/modern/templates/writing-index.html

@@ -46,8 +46,8 @@
 
   <main class="main-content">
     <header class="page-header">
-      <h1>Writing</h1>
-      <p>Articles, blog posts, and technical writing.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Writing{{/page_title}}</h1>
+      <p>{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Articles, blog posts, and technical writing.{{/page_description}}</p>
     </header>
 
     <div class="writing-list">

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

@@ -35,8 +35,8 @@
 
   <main class="content">
     <header class="page-header">
-      <h1>About</h1>
-      {{#tagline}}<p class="page-description">{{tagline}}</p>{{/tagline}}
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}About{{/page_title}}</h1>
+      {{#page_description}}<p class="page-description">{{page_description}}</p>{{/page_description}}{{^page_description}}{{#tagline}}<p class="page-description">{{tagline}}</p>{{/tagline}}{{/page_description}}
     </header>
 
     <div class="about-content">

package/src/generator/themes/srcl/templates/experiments-index.html

@@ -35,8 +35,8 @@
 
   <main class="content">
     <header class="page-header">
-      <h1>Experiments</h1>
-      <p class="page-description">Side projects, explorations, and things I'm tinkering with.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Experiments{{/page_title}}</h1>
+      <p class="page-description">{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Side projects, explorations, and things I'm tinkering with.{{/page_description}}</p>
     </header>
 
     <div class="experiments-grid full-width">

package/src/generator/themes/srcl/templates/projects-index.html

@@ -35,8 +35,8 @@
 
   <main class="content">
     <header class="page-header">
-      <h1>Projects</h1>
-      <p class="page-description">A collection of work spanning product development, open source, and research.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Projects{{/page_title}}</h1>
+      <p class="page-description">{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}A collection of work spanning product development, open source, and research.{{/page_description}}</p>
     </header>
 
     <div class="projects-grid full-width">

package/src/generator/themes/srcl/templates/writing-index.html

@@ -35,8 +35,8 @@
 
   <main class="content">
     <header class="page-header">
-      <h1>Writing</h1>
-      <p class="page-description">Articles, blog posts, and technical writing.</p>
+      <h1>{{#page_title}}{{page_title}}{{/page_title}}{{^page_title}}Writing{{/page_title}}</h1>
+      <p class="page-description">{{#page_description}}{{page_description}}{{/page_description}}{{^page_description}}Articles, blog posts, and technical writing.{{/page_description}}</p>
     </header>
 
     <ul class="writing-list full-width">