devfolio-page 0.1.0

package/dist/generator/builder.js

@@ -0,0 +1,551 @@
+import { parseMarkdown, highlightCode, parseBio } from './markdown.js';
+import fs from 'fs/promises';
+import path from 'path';
+import Mustache from 'mustache';
+// =============================================================================
+// Main Build Function
+// =============================================================================
+export async function buildStaticSite(portfolio, options) {
+    const { outputDir } = options;
+    const theme = options.theme || portfolio.theme || 'srcl';
+    const themePath = path.join(import.meta.dirname, 'themes', theme);
+    const files = [];
+    // 1. Create directory structure
+    await createDirectoryStructure(outputDir);
+    // 2. Copy theme assets (CSS, JS)
+    const assetFiles = await copyThemeAssets(themePath, outputDir, portfolio.settings);
+    files.push(...assetFiles);
+    // 3. Copy fonts
+    const fontFiles = await copyFonts(outputDir);
+    files.push(...fontFiles);
+    // 4. Generate pages based on portfolio structure
+    const hasRichProjects = (portfolio.projects?.length ?? 0) > 0;
+    if (hasRichProjects) {
+        // Multi-page site with project case studies
+        const pageFiles = await generateMultiPageSite(portfolio, themePath, outputDir, theme);
+        files.push(...pageFiles);
+    }
+    else {
+        // Single-page site (backwards compatible)
+        const pageFiles = await generateSinglePageSite(portfolio, themePath, outputDir, theme);
+        files.push(...pageFiles);
+    }
+    return { outputDir, files };
+}
+// =============================================================================
+// Directory Structure
+// =============================================================================
+async function createDirectoryStructure(outputDir) {
+    await fs.mkdir(outputDir, { recursive: true });
+    await fs.mkdir(path.join(outputDir, 'assets'), { recursive: true });
+    await fs.mkdir(path.join(outputDir, 'assets/fonts'), { recursive: true });
+    await fs.mkdir(path.join(outputDir, 'projects'), { recursive: true });
+    await fs.mkdir(path.join(outputDir, 'images'), { recursive: true });
+}
+// =============================================================================
+// Single-Page Site (Backwards Compatible)
+// =============================================================================
+async function generateSinglePageSite(portfolio, themePath, outputDir, theme) {
+    const files = [];
+    // Load template and partials
+    const template = await fs.readFile(path.join(themePath, 'template.html'), 'utf-8');
+    const partials = await loadPartials(themePath);
+    // Prepare template data
+    const templateData = prepareTemplateData(portfolio);
+    // Render each partial
+    const renderedPartials = renderPartials(partials, templateData);
+    // Render main template with settings
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const html = Mustache.render(template, {
+        ...templateData,
+        ...renderedPartials,
+        // Settings
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        showGrid: settings.show_grid || false,
+        enableHotkeys: settings.enable_hotkeys !== false,
+        animate: settings.animate || 'subtle',
+        // Section existence flags for conditional nav
+        hasExperience: (portfolio.sections.experience?.length ?? 0) > 0,
+        hasProjects: (portfolio.sections.projects?.length ?? 0) > 0,
+        hasSkills: portfolio.sections.skills && Object.keys(portfolio.sections.skills).length > 0,
+        hasWriting: (portfolio.sections.writing?.length ?? 0) > 0,
+        hasEducation: (portfolio.sections.education?.length ?? 0) > 0,
+    });
+    // Write HTML
+    await fs.writeFile(path.join(outputDir, 'index.html'), html);
+    files.push('index.html');
+    return files;
+}
+// =============================================================================
+// Multi-Page Site
+// =============================================================================
+async function generateMultiPageSite(portfolio, themePath, outputDir, theme) {
+    const files = [];
+    // Check if theme has multi-page templates
+    const hasMultiPageTemplates = await fileExists(path.join(themePath, 'templates/homepage.html'));
+    if (!hasMultiPageTemplates) {
+        // Fall back to single-page generation
+        return generateSinglePageSite(portfolio, themePath, outputDir, theme);
+    }
+    // Generate homepage
+    const homepageFiles = await generateHomepage(portfolio, themePath, outputDir, theme);
+    files.push(...homepageFiles);
+    // Generate project pages
+    const projectFiles = await generateProjectPages(portfolio, themePath, outputDir, theme);
+    files.push(...projectFiles);
+    // Generate projects index
+    const projectIndexFiles = await generateProjectsIndex(portfolio, themePath, outputDir, theme);
+    files.push(...projectIndexFiles);
+    // Generate experiments index
+    const experimentsIndexFiles = await generateExperimentsIndex(portfolio, themePath, outputDir, theme);
+    files.push(...experimentsIndexFiles);
+    // Generate writing index
+    const writingIndexFiles = await generateWritingIndex(portfolio, themePath, outputDir, theme);
+    files.push(...writingIndexFiles);
+    // Copy user images
+    await copyUserImages(portfolio, outputDir);
+    return files;
+}
+async function generateHomepage(portfolio, themePath, outputDir, theme) {
+    const templatePath = path.join(themePath, 'templates/homepage.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';
+    const data = {
+        // Meta
+        name: portfolio.meta.name,
+        title: portfolio.meta.title,
+        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,
+        // Bio
+        bio: portfolio.bio,
+        bio_html: parseBio(portfolio.bio),
+        about_short: portfolio.about?.short || '',
+        // Featured content
+        featured_projects: portfolio.projects?.filter((p) => p.featured) || [],
+        featured_writing: portfolio.sections.writing?.filter((w) => 'featured' in w && w.featured) || [],
+        // Experiments preview
+        show_experiments: portfolio.layout?.show_experiments,
+        experiments: portfolio.experiments?.slice(0, 4) || [],
+        // Settings
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        showGrid: settings.show_grid || false,
+        enableHotkeys: settings.enable_hotkeys !== false,
+        animate: settings.animate || 'subtle',
+        // Navigation flags
+        hasProjects: (portfolio.projects?.length ?? 0) > 0,
+        hasExperiments: (portfolio.experiments?.length ?? 0) > 0,
+        hasWriting: (portfolio.sections.writing?.length ?? 0) > 0,
+    };
+    const html = Mustache.render(template, data);
+    await fs.writeFile(path.join(outputDir, 'index.html'), html);
+    return ['index.html'];
+}
+async function generateProjectPages(portfolio, themePath, outputDir, theme) {
+    if (!portfolio.projects || portfolio.projects.length === 0) {
+        return [];
+    }
+    const templatePath = path.join(themePath, 'templates/project.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const partials = await loadProjectPartials(themePath);
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const files = [];
+    for (const project of portfolio.projects) {
+        // Render each content section
+        const sectionsHtml = project.sections
+            .map((section) => renderContentSection(section, partials))
+            .join('\n');
+        const data = {
+            // Project data
+            ...project,
+            sections_html: sectionsHtml,
+            // Site meta
+            site_name: portfolio.meta.name,
+            // Navigation (fromSubdir=true since we're in /projects/)
+            nav_links: generateNavLinks(portfolio, true, 'project'),
+            // Settings
+            colorScheme: settings.color_scheme || defaultColorScheme,
+            showGrid: settings.show_grid || false,
+            enableHotkeys: settings.enable_hotkeys !== false,
+        };
+        const html = Mustache.render(template, data);
+        const filename = `projects/${project.id}.html`;
+        await fs.writeFile(path.join(outputDir, filename), html);
+        files.push(filename);
+    }
+    return files;
+}
+async function generateProjectsIndex(portfolio, themePath, outputDir, theme) {
+    const templatePath = path.join(themePath, 'templates/projects-index.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';
+    const data = {
+        site_name: portfolio.meta.name,
+        projects: portfolio.projects || [],
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        nav_links: generateNavLinks(portfolio, true, 'projects'),
+    };
+    const html = Mustache.render(template, data);
+    await fs.writeFile(path.join(outputDir, 'projects/index.html'), html);
+    return ['projects/index.html'];
+}
+async function generateExperimentsIndex(portfolio, themePath, outputDir, theme) {
+    // Only generate if experiments exist
+    if (!portfolio.experiments || portfolio.experiments.length === 0) {
+        return [];
+    }
+    const templatePath = path.join(themePath, 'templates/experiments-index.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    await fs.mkdir(path.join(outputDir, 'experiments'), { recursive: true });
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const data = {
+        site_name: portfolio.meta.name,
+        experiments: portfolio.experiments || [],
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        nav_links: generateNavLinks(portfolio, true, 'experiments'),
+    };
+    const html = Mustache.render(template, data);
+    await fs.writeFile(path.join(outputDir, 'experiments/index.html'), html);
+    return ['experiments/index.html'];
+}
+async function generateWritingIndex(portfolio, themePath, outputDir, theme) {
+    // Only generate if writing exists
+    if (!portfolio.sections.writing || portfolio.sections.writing.length === 0) {
+        return [];
+    }
+    const templatePath = path.join(themePath, 'templates/writing-index.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    await fs.mkdir(path.join(outputDir, 'writing'), { recursive: true });
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const data = {
+        site_name: portfolio.meta.name,
+        writing: portfolio.sections.writing || [],
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        nav_links: generateNavLinks(portfolio, true, 'writing'),
+    };
+    const html = Mustache.render(template, data);
+    await fs.writeFile(path.join(outputDir, 'writing/index.html'), html);
+    return ['writing/index.html'];
+}
+// =============================================================================
+// Content Section Rendering
+// =============================================================================
+async function loadProjectPartials(themePath) {
+    const partialsDir = path.join(themePath, 'partials/sections');
+    const partialNames = [
+        'overview',
+        'image',
+        'gallery',
+        'demo',
+        'code',
+        'metrics',
+        'outcomes',
+        'process',
+        'interactive',
+    ];
+    const partials = {};
+    for (const name of partialNames) {
+        const partialPath = path.join(partialsDir, `${name}.html`);
+        if (await fileExists(partialPath)) {
+            partials[name] = await fs.readFile(partialPath, 'utf-8');
+        }
+        else {
+            // Default fallback templates
+            partials[name] = getDefaultSectionTemplate(name);
+        }
+    }
+    return partials;
+}
+function getDefaultSectionTemplate(type) {
+    const defaults = {
+        overview: '<div class="section-overview">{{{content_html}}}</div>',
+        image: '<figure class="section-image"><img src="{{src}}" alt="{{alt}}">{{#caption}}<figcaption>{{caption}}</figcaption>{{/caption}}</figure>',
+        gallery: '<div class="section-gallery">{{#images}}<figure><img src="{{src}}" alt="{{alt}}">{{#caption}}<figcaption>{{caption}}</figcaption>{{/caption}}</figure>{{/images}}</div>',
+        demo: '<div class="section-demo">{{#title}}<h3>{{title}}</h3>{{/title}}{{{embed}}}</div>',
+        code: '<div class="section-code">{{#title}}<h3>{{title}}</h3>{{/title}}{{{code_html}}}</div>',
+        metrics: '<div class="section-metrics">{{#data}}<div class="metric"><span class="metric-value">{{value}}</span><span class="metric-label">{{label}}</span></div>{{/data}}</div>',
+        outcomes: '<div class="section-outcomes">{{{content_html}}}</div>',
+        process: '<div class="section-process">{{{content_html}}}</div>',
+        interactive: '<div class="section-interactive">{{#title}}<h3>{{title}}</h3>{{/title}}<iframe src="{{url}}" frameborder="0"></iframe></div>',
+    };
+    return defaults[type] || '';
+}
+function renderContentSection(section, partials) {
+    switch (section.type) {
+        case 'overview':
+            return Mustache.render(partials.overview, {
+                content_html: parseMarkdown(section.content),
+            });
+        case 'image':
+            return Mustache.render(partials.image, section);
+        case 'gallery':
+            return Mustache.render(partials.gallery, section);
+        case 'demo':
+            return Mustache.render(partials.demo, section);
+        case 'code':
+            return Mustache.render(partials.code, {
+                ...section,
+                code_html: highlightCode(section.code, section.language),
+            });
+        case 'metrics':
+            return Mustache.render(partials.metrics, section);
+        case 'outcomes':
+            return Mustache.render(partials.outcomes, {
+                content_html: parseMarkdown(section.content),
+            });
+        case 'process':
+            return Mustache.render(partials.process, {
+                content_html: parseMarkdown(section.content),
+            });
+        case 'interactive':
+            return Mustache.render(partials.interactive, section);
+        default:
+            return '';
+    }
+}
+function generateNavLinks(portfolio, fromSubdir = false, currentPage = 'home') {
+    const links = [];
+    const prefix = fromSubdir ? '../' : './';
+    // Note: "Home" is not included since the site name already links home
+    if ((portfolio.projects?.length ?? 0) > 0) {
+        links.push({
+            href: `${prefix}projects/`,
+            label: 'Projects',
+            active: currentPage === 'projects' || currentPage === 'project',
+        });
+    }
+    if ((portfolio.experiments?.length ?? 0) > 0) {
+        links.push({
+            href: `${prefix}experiments/`,
+            label: 'Experiments',
+            active: currentPage === 'experiments',
+        });
+    }
+    if ((portfolio.sections.writing?.length ?? 0) > 0) {
+        links.push({
+            href: `${prefix}writing/`,
+            label: 'Writing',
+            active: currentPage === 'writing',
+        });
+    }
+    return links;
+}
+// =============================================================================
+// Legacy Single-Page Helpers
+// =============================================================================
+async function loadPartials(themePath) {
+    const partialsDir = path.join(themePath, 'partials');
+    const partialNames = ['hero', 'experience', 'projects', 'skills', 'writing', 'education'];
+    const partials = {};
+    for (const name of partialNames) {
+        const partialPath = path.join(partialsDir, `${name}.html`);
+        if (await fileExists(partialPath)) {
+            partials[name] = await fs.readFile(partialPath, 'utf-8');
+        }
+        else {
+            partials[name] = '';
+        }
+    }
+    return partials;
+}
+function prepareTemplateData(portfolio) {
+    // Mark first experience item for default expansion
+    const experiences = (portfolio.sections.experience || []).map((exp, index) => ({
+        ...exp,
+        first: index === 0,
+    }));
+    // Format skills for table display
+    const skillCategories = formatSkills(portfolio.sections.skills || {});
+    // Format education
+    const educations = portfolio.sections.education || [];
+    return {
+        // Meta
+        name: portfolio.meta.name,
+        title: portfolio.meta.title,
+        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,
+        // Bio
+        bio: portfolio.bio,
+        bio_html: parseBio(portfolio.bio),
+        // Sections
+        experiences,
+        projects: portfolio.sections.projects || [],
+        skillCategories,
+        articles: portfolio.sections.writing || [],
+        educations,
+    };
+}
+function renderPartials(partials, templateData) {
+    const rendered = {};
+    for (const [name, template] of Object.entries(partials)) {
+        if (template) {
+            rendered[name] = Mustache.render(template, templateData);
+        }
+        else {
+            rendered[name] = '';
+        }
+    }
+    return rendered;
+}
+function formatSkills(skills) {
+    return Object.entries(skills).map(([category, techs]) => ({
+        category,
+        skills: techs.join(', '),
+    }));
+}
+// =============================================================================
+// Asset Copying
+// =============================================================================
+async function copyThemeAssets(themePath, outputDir, settings) {
+    const files = [];
+    // Copy CSS
+    const cssPath = path.join(themePath, 'styles.css');
+    if (await fileExists(cssPath)) {
+        await fs.copyFile(cssPath, path.join(outputDir, 'assets/styles.css'));
+        files.push('assets/styles.css');
+    }
+    // Copy JS (always needed for theme persistence and interactivity)
+    const jsPath = path.join(themePath, 'script.js');
+    if (await fileExists(jsPath)) {
+        await fs.copyFile(jsPath, path.join(outputDir, 'assets/script.js'));
+        files.push('assets/script.js');
+    }
+    return files;
+}
+async function copyFonts(outputDir) {
+    const files = [];
+    // Try to copy fonts from www-sacred if available
+    const srcFontDir = '/Users/louanne/www-sacred/public/fonts';
+    const destFontDir = path.join(outputDir, 'assets/fonts');
+    try {
+        const fontFiles = await fs.readdir(srcFontDir);
+        if (fontFiles.length > 0) {
+            await fs.mkdir(destFontDir, { recursive: true });
+            for (const file of fontFiles) {
+                if (file.endsWith('.woff') ||
+                    file.endsWith('.woff2') ||
+                    file.endsWith('.ttf') ||
+                    file.endsWith('.otf') ||
+                    file.endsWith('.css')) {
+                    await fs.copyFile(path.join(srcFontDir, file), path.join(destFontDir, file));
+                    files.push(`assets/fonts/${file}`);
+                }
+            }
+        }
+    }
+    catch {
+        // Fonts directory doesn't exist or isn't accessible - that's fine
+        // The CSS will fall back to system fonts
+    }
+    return files;
+}
+async function copyUserImages(portfolio, outputDir) {
+    const imagePaths = extractAllImagePaths(portfolio);
+    for (const imgPath of imagePaths) {
+        // Skip absolute URLs
+        if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
+            continue;
+        }
+        // Skip paths that start with / (they're relative to the site root)
+        const srcPath = imgPath.startsWith('/')
+            ? path.join(process.cwd(), imgPath)
+            : path.join(process.cwd(), imgPath);
+        const destPath = path.join(outputDir, imgPath);
+        try {
+            await fs.mkdir(path.dirname(destPath), { recursive: true });
+            await fs.copyFile(srcPath, destPath);
+        }
+        catch {
+            // Image doesn't exist - that's okay, it might be a placeholder
+            console.warn(`Warning: Could not copy image ${imgPath}`);
+        }
+    }
+}
+function extractAllImagePaths(portfolio) {
+    const paths = [];
+    // Extract from meta
+    const meta = portfolio.meta;
+    if (meta.avatar)
+        paths.push(meta.avatar);
+    if (meta.hero_image)
+        paths.push(meta.hero_image);
+    // Extract from rich projects
+    portfolio.projects?.forEach((project) => {
+        paths.push(project.thumbnail);
+        if (project.hero)
+            paths.push(project.hero);
+        project.sections.forEach((section) => {
+            if (section.type === 'image') {
+                paths.push(section.src);
+            }
+            else if (section.type === 'gallery') {
+                section.images.forEach((img) => paths.push(img.src));
+            }
+        });
+    });
+    // Extract from experiments
+    portfolio.experiments?.forEach((exp) => {
+        if (exp.image)
+            paths.push(exp.image);
+    });
+    // Extract from writing
+    portfolio.sections.writing?.forEach((post) => {
+        if ('cover' in post && post.cover)
+            paths.push(post.cover);
+    });
+    // Extract from timeline
+    portfolio.timeline?.forEach((item) => {
+        if (item.image)
+            paths.push(item.image);
+    });
+    // Extract from testimonials
+    portfolio.testimonials?.forEach((testimonial) => {
+        if (testimonial.image)
+            paths.push(testimonial.image);
+    });
+    return paths;
+}
+// =============================================================================
+// Utilities
+// =============================================================================
+async function fileExists(filePath) {
+    try {
+        await fs.access(filePath);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/generator/markdown.js

@@ -0,0 +1,57 @@
+import { marked } from 'marked';
+// Configure marked for safe rendering
+marked.setOptions({
+    gfm: true, // GitHub Flavored Markdown
+    breaks: true, // Convert \n to <br>
+});
+/**
+ * Parse markdown content to HTML
+ */
+export function parseMarkdown(content) {
+    return marked.parse(content);
+}
+/**
+ * Parse inline markdown (no block elements like <p>)
+ */
+export function parseMarkdownInline(content) {
+    return marked.parseInline(content);
+}
+/**
+ * Highlight code with language class for syntax highlighting
+ * Uses CSS classes compatible with Prism.js or highlight.js
+ */
+export function highlightCode(code, language) {
+    const escapedCode = escapeHtml(code);
+    const langClass = language ? `language-${language}` : '';
+    return `<pre><code class="${langClass}">${escapedCode}</code></pre>`;
+}
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+function escapeHtml(text) {
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;',
+    };
+    return text.replace(/[&<>"']/g, (m) => map[m]);
+}
+/**
+ * Parse bio text - preserves paragraph breaks
+ */
+export function parseBio(bio) {
+    // Split on double newlines to create paragraphs
+    const paragraphs = bio
+        .split(/\n\n+/)
+        .map((p) => p.trim())
+        .filter((p) => p.length > 0);
+    return paragraphs.map((p) => `<p>${parseMarkdownInline(p)}</p>`).join('\n');
+}
+/**
+ * Parse a list of highlights into HTML list items
+ */
+export function parseHighlights(highlights) {
+    return highlights.map((h) => `<li>${parseMarkdownInline(h)}</li>`).join('\n');
+}

package/dist/generator/themes/dark-academia/partials/education.html

@@ -0,0 +1,15 @@
+<section id="education" class="section">
+  <h2 class="section-title">Education</h2>
+  <div class="education-list">
+    {{#educations}}
+    <div class="education-item">
+      <div class="education-date">{{date.start}} &ndash; {{date.end}}</div>
+      <div class="education-details">
+        <div class="education-institution">{{institution}}</div>
+        <div class="education-degree">{{degree}}</div>
+        {{#description}}<div class="education-description">{{description}}</div>{{/description}}
+      </div>
+    </div>
+    {{/educations}}
+  </div>
+</section>

package/dist/generator/themes/dark-academia/partials/experience.html

@@ -0,0 +1,23 @@
+<section id="experience" class="section">
+  <h2 class="section-title">Experience</h2>
+  <div class="experience-list">
+    {{#experiences}}
+    <div class="experience-item">
+      <div class="experience-date">{{date.start}} &ndash; {{date.end}}</div>
+      <div class="experience-details">
+        <div class="experience-header">
+          <span class="experience-company">{{company}}</span>
+          <span class="experience-role"> &mdash; {{role}}</span>
+        </div>
+        {{#highlights.length}}
+        <ul class="experience-highlights">
+          {{#highlights}}
+          <li>{{.}}</li>
+          {{/highlights}}
+        </ul>
+        {{/highlights.length}}
+      </div>
+    </div>
+    {{/experiences}}
+  </div>
+</section>

package/dist/generator/themes/dark-academia/partials/hero.html

@@ -0,0 +1,15 @@
+<section class="hero">
+  <h1 class="hero-name">{{name}}</h1>
+  <p class="hero-title">{{title}}</p>
+  <p class="hero-location">{{location}}{{#timezone}} &middot; {{timezone}}{{/timezone}}</p>
+
+  <div class="hero-links">
+    {{#email}}<a href="mailto:{{email}}" class="hero-link">Email</a>{{/email}}
+    {{#website}}<a href="{{website}}" target="_blank" class="hero-link">Website</a>{{/website}}
+    {{#github}}<a href="https://github.com/{{github}}" target="_blank" class="hero-link">GitHub</a>{{/github}}
+    {{#linkedin}}<a href="https://linkedin.com/in/{{linkedin}}" target="_blank" class="hero-link">LinkedIn</a>{{/linkedin}}
+    {{#twitter}}<a href="https://twitter.com/{{twitter}}" target="_blank" class="hero-link">Twitter</a>{{/twitter}}
+  </div>
+
+  <p class="hero-bio">{{bio}}</p>
+</section>

package/dist/generator/themes/dark-academia/partials/projects.html

@@ -0,0 +1,17 @@
+<section id="projects" class="section">
+  <h2 class="section-title">Projects</h2>
+  <div class="projects-list">
+    {{#projects}}
+    <div class="project-item{{#featured}} featured{{/featured}}">
+      <div class="project-header">
+        <h3 class="project-name">{{name}}</h3>
+        {{#url}}<a href="{{url}}" target="_blank" class="project-link">View &rarr;</a>{{/url}}
+      </div>
+      <p class="project-description">{{description}}</p>
+      <div class="project-tags">
+        {{#tags}}<span class="project-tag">{{.}}</span>{{/tags}}
+      </div>
+    </div>
+    {{/projects}}
+  </div>
+</section>