jsonresume-theme-data-driven 0.1.0

package/README.md

@@ -0,0 +1,48 @@
+# Data-Driven JSON Resume Theme
+
+An analytical and metrics-focused theme for JSON Resume, designed to highlight quantifiable achievements and data-driven results.
+
+## Design Principles
+
+**Vibe**: Analytical and factual
+**Layout**: Single column with strong headings and bullet hierarchy
+**Typography**: Geometric sans-serif; compact
+**Accent Color**: Sky blue (#0ea5e9)
+**Focus**: Metrics and measurable outcomes
+
+## Key Features
+
+- **Metrics Emphasis**: Automatically bolds numbers, percentages, and dollar amounts in highlights and descriptions
+- **Strong Visual Hierarchy**: Uppercase section titles, clear heading structure
+- **Compact Layout**: Space-efficient design maximizing content density
+- **Geometric Typography**: Clean, modern sans-serif fonts (DM Sans, Inter)
+- **Bullet Hierarchy**: Clear visual structure drawing attention to key results
+- **Data-First Approach**: Every section feels quantified and analytical
+
+## Perfect For
+
+- Data analysts and scientists
+- Product managers tracking metrics
+- Engineers highlighting performance improvements
+- Anyone with quantifiable achievements
+- Roles requiring analytical thinking
+
+## Usage
+
+```javascript
+import { render } from 'jsonresume-theme-data-driven';
+
+const html = render(resumeData);
+```
+
+## Styling
+
+The theme uses sky blue (#0ea5e9) as the primary accent color, creating a professional, analytical appearance. Numbers and metrics are automatically emphasized with bold formatting to draw the reader's eye to measurable outcomes.
+
+## Built With
+
+This theme is built using [@resume/core](../../core) primitives, ensuring consistency with the JSON Resume ecosystem.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "jsonresume-theme-data-driven",
+  "version": "0.1.0",
+  "description": "Data-driven analytical theme with sky blue accent - built with @resume/core",
+  "type": "module",
+  "main": "./src/index.jsx",
+  "exports": {
+    ".": "./src/index.jsx"
+  },
+  "keywords": [
+    "jsonresume",
+    "theme",
+    "resume",
+    "cv",
+    "data-driven",
+    "analytical",
+    "metrics",
+    "compact"
+  ],
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "styled-components": "^6.1.19",
+    "@resume/core": "0.1.0"
+  },
+  "devDependencies": {
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "styled-components": "^6"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/src/index.jsx

@@ -0,0 +1,36 @@
+/**
+ * JSON Resume Data-Driven Theme
+ * Analytical design with metrics-focused layout and sky blue accent
+ * Built with @resume/core primitives and React SSR
+ */
+
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+import Resume from './ui/Resume.jsx';
+
+export const render = (resume) => {
+  const sheet = new ServerStyleSheet();
+  try {
+    const html = renderToString(
+      sheet.collectStyles(<Resume resume={resume} />)
+    );
+    const styles = sheet.getStyleTags();
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${resume.basics?.name || 'Resume'}</title>
+  ${styles}
+</head>
+<body>
+  ${html}
+</body>
+</html>`;
+  } finally {
+    sheet.seal();
+  }
+};
+
+export { Resume };
+export default { render };

package/src/ui/Resume.jsx

@@ -0,0 +1,562 @@
+import styled, { createGlobalStyle } from 'styled-components';
+import { formatDateRange } from '@resume/core';
+
+const GlobalStyle = createGlobalStyle`
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  :root {
+    --resume-color-primary: #0f172a;
+    --resume-color-secondary: #475569;
+    --resume-color-accent: #0ea5e9;
+    --resume-color-accent-dark: #0284c7;
+    --resume-color-border: #e2e8f0;
+    --resume-color-bg: #ffffff;
+    --resume-font-geometric: 'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  body {
+    font-family: var(--resume-font-geometric);
+    font-size: 11px;
+    line-height: 1.5;
+    color: var(--resume-color-primary);
+    background: var(--resume-color-bg);
+    padding: 0;
+  }
+
+  @media print {
+    body {
+      padding: 0;
+    }
+  }
+`;
+
+const Container = styled.div`
+  max-width: 750px;
+  margin: 0 auto;
+  padding: 32px 40px;
+
+  @media print {
+    padding: 16px;
+  }
+
+  @media (max-width: 600px) {
+    padding: 20px;
+  }
+`;
+
+const Header = styled.header`
+  margin-bottom: 28px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--resume-color-accent);
+`;
+
+const Name = styled.h1`
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--resume-color-primary);
+  margin-bottom: 4px;
+  letter-spacing: -0.03em;
+  text-transform: uppercase;
+`;
+
+const Label = styled.div`
+  font-size: 13px;
+  color: var(--resume-color-accent);
+  font-weight: 600;
+  margin-bottom: 10px;
+  letter-spacing: 0.02em;
+`;
+
+const Contact = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 10px;
+  color: var(--resume-color-secondary);
+  font-weight: 500;
+
+  a {
+    color: var(--resume-color-accent);
+    text-decoration: none;
+  }
+`;
+
+const Summary = styled.p`
+  margin-top: 12px;
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--resume-color-secondary);
+`;
+
+const Section = styled.section`
+  margin-bottom: 24px;
+
+  @media print {
+    page-break-inside: avoid;
+  }
+`;
+
+const SectionTitle = styled.h2`
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--resume-color-primary);
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--resume-color-border);
+  padding-bottom: 4px;
+`;
+
+const Item = styled.div`
+  margin-bottom: 16px;
+  padding-left: 0;
+
+  @media print {
+    page-break-inside: avoid;
+  }
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 3px;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`;
+
+const ItemTitle = styled.div`
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--resume-color-primary);
+`;
+
+const ItemSubtitle = styled.div`
+  font-size: 11px;
+  color: var(--resume-color-secondary);
+  margin-bottom: 2px;
+  font-weight: 600;
+`;
+
+const ItemMeta = styled.div`
+  display: flex;
+  gap: 12px;
+  font-size: 10px;
+  color: var(--resume-color-secondary);
+  margin-bottom: 6px;
+  font-weight: 500;
+`;
+
+const Description = styled.p`
+  margin-bottom: 6px;
+  color: var(--resume-color-secondary);
+  line-height: 1.5;
+  font-size: 10px;
+`;
+
+const Highlights = styled.ul`
+  list-style: none;
+  margin-top: 4px;
+
+  li {
+    position: relative;
+    padding-left: 12px;
+    margin-bottom: 3px;
+    color: var(--resume-color-secondary);
+    font-size: 10px;
+    line-height: 1.5;
+
+    &::before {
+      content: '▪';
+      position: absolute;
+      left: 0;
+      color: var(--resume-color-accent);
+      font-weight: 700;
+    }
+
+    strong,
+    b {
+      color: var(--resume-color-primary);
+      font-weight: 700;
+    }
+  }
+`;
+
+const SkillGroup = styled.div`
+  margin-bottom: 10px;
+
+  strong {
+    display: block;
+    margin-bottom: 6px;
+    color: var(--resume-color-primary);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+`;
+
+const BadgeList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+`;
+
+const Badge = styled.span`
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 600;
+  background: transparent;
+  color: var(--resume-color-accent);
+  border: 1px solid var(--resume-color-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+`;
+
+// Bold numbers and percentages for data-driven emphasis
+function boldNumbers(text) {
+  if (!text) return text;
+  // Match: $1.5M, 42%, 1,200+, 99.9%, etc.
+  // Unified regex to avoid nested <strong> tags
+  return text.replace(
+    /(\$)?(\d+(?:,\d{3})*(?:\.\d+)?)([KkMmBb])?([+\-])?(%)?/g,
+    (match, dollar, number, suffix, plusminus, percent) => {
+      // Only bold if it has special markers (dollar, suffix, plusminus, percent, comma, or decimal)
+      const hasMarker =
+        dollar ||
+        suffix ||
+        plusminus ||
+        percent ||
+        number.includes(',') ||
+        number.includes('.');
+      if (!hasMarker) return match;
+
+      const parts = [dollar, number, suffix, plusminus, percent]
+        .filter(Boolean)
+        .join('');
+      return `<strong>${parts}</strong>`;
+    }
+  );
+}
+
+function Resume({ resume }) {
+  const {
+    basics = {},
+    work = [],
+    education = [],
+    skills = [],
+    projects = [],
+    volunteer = [],
+    awards = [],
+  } = resume;
+
+  return (
+    <>
+      <GlobalStyle />
+      <Container>
+        {/* Hero */}
+        <Header>
+          {basics.name && <Name>{basics.name}</Name>}
+          {basics.label && <Label>{basics.label}</Label>}
+          {(basics.email ||
+            basics.phone ||
+            basics.url ||
+            basics.location ||
+            basics.profiles?.length > 0) && (
+            <Contact>
+              {basics.email && (
+                <a href={`mailto:${basics.email}`}>{basics.email}</a>
+              )}
+              {basics.phone && <span>{basics.phone}</span>}
+              {basics.url && (
+                <a href={basics.url} target="_blank" rel="noopener noreferrer">
+                  {basics.url.replace(/^https?:\/\//, '')}
+                </a>
+              )}
+              {basics.location && (
+                <span>
+                  {[basics.location.city, basics.location.region]
+                    .filter(Boolean)
+                    .join(', ')}
+                </span>
+              )}
+              {basics.profiles?.map((profile, i) => (
+                <a
+                  key={i}
+                  href={profile.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {profile.network}
+                </a>
+              ))}
+            </Contact>
+          )}
+          {basics.summary && (
+            <Summary
+              dangerouslySetInnerHTML={{ __html: boldNumbers(basics.summary) }}
+            />
+          )}
+        </Header>
+
+        {/* Work Experience */}
+        {work.length > 0 && (
+          <Section>
+            <SectionTitle>Professional Experience</SectionTitle>
+            {work.map((job, i) => (
+              <Item key={i}>
+                <ItemHeader>
+                  <ItemTitle>{job.position}</ItemTitle>
+                </ItemHeader>
+                {job.name && <ItemSubtitle>{job.name}</ItemSubtitle>}
+                {(job.startDate || job.location) && (
+                  <ItemMeta>
+                    {job.startDate && (
+                      <span>
+                        {formatDateRange({
+                          startDate: job.startDate,
+                          endDate: job.endDate,
+                        })}
+                      </span>
+                    )}
+                    {job.location && <span>{job.location}</span>}
+                  </ItemMeta>
+                )}
+                {job.summary && (
+                  <Description
+                    dangerouslySetInnerHTML={{
+                      __html: boldNumbers(job.summary),
+                    }}
+                  />
+                )}
+                {job.highlights?.length > 0 && (
+                  <Highlights>
+                    {job.highlights.map((highlight, j) => (
+                      <li
+                        key={j}
+                        dangerouslySetInnerHTML={{
+                          __html: boldNumbers(highlight),
+                        }}
+                      />
+                    ))}
+                  </Highlights>
+                )}
+              </Item>
+            ))}
+          </Section>
+        )}
+
+        {/* Education */}
+        {education.length > 0 && (
+          <Section>
+            <SectionTitle>Education</SectionTitle>
+            {education.map((edu, i) => {
+              const title = [edu.studyType, edu.area]
+                .filter(Boolean)
+                .join(' in ');
+              const highlights = [];
+              if (edu.score)
+                highlights.push(`GPA: <strong>${edu.score}</strong>`);
+              if (edu.courses?.length > 0)
+                highlights.push(`Courses: ${edu.courses.join(', ')}`);
+
+              return (
+                <Item key={i}>
+                  <ItemHeader>
+                    <ItemTitle>{title || edu.institution}</ItemTitle>
+                  </ItemHeader>
+                  {title && <ItemSubtitle>{edu.institution}</ItemSubtitle>}
+                  {edu.startDate && (
+                    <ItemMeta>
+                      <span>
+                        {formatDateRange({
+                          startDate: edu.startDate,
+                          endDate: edu.endDate,
+                        })}
+                      </span>
+                    </ItemMeta>
+                  )}
+                  {highlights.length > 0 && (
+                    <Highlights>
+                      {highlights.map((highlight, j) => (
+                        <li
+                          key={j}
+                          dangerouslySetInnerHTML={{ __html: highlight }}
+                        />
+                      ))}
+                    </Highlights>
+                  )}
+                </Item>
+              );
+            })}
+          </Section>
+        )}
+
+        {/* Skills */}
+        {skills.length > 0 && (
+          <Section>
+            <SectionTitle>Technical Skills</SectionTitle>
+            {skills.map((skillGroup, i) => (
+              <SkillGroup key={i}>
+                {skillGroup.name && <strong>{skillGroup.name}</strong>}
+                {skillGroup.keywords?.length > 0 && (
+                  <BadgeList>
+                    {skillGroup.keywords.map((keyword, j) => (
+                      <Badge key={j}>{keyword}</Badge>
+                    ))}
+                  </BadgeList>
+                )}
+              </SkillGroup>
+            ))}
+          </Section>
+        )}
+
+        {/* Projects */}
+        {projects.length > 0 && (
+          <Section>
+            <SectionTitle>Key Projects</SectionTitle>
+            {projects.map((project, i) => (
+              <Item key={i}>
+                <ItemHeader>
+                  <ItemTitle>{project.name}</ItemTitle>
+                </ItemHeader>
+                {project.startDate && (
+                  <ItemMeta>
+                    <span>
+                      {formatDateRange({
+                        startDate: project.startDate,
+                        endDate: project.endDate,
+                      })}
+                    </span>
+                  </ItemMeta>
+                )}
+                {project.description && (
+                  <Description
+                    dangerouslySetInnerHTML={{
+                      __html: boldNumbers(project.description),
+                    }}
+                  />
+                )}
+                {project.url && (
+                  <Description>
+                    <a
+                      href={project.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {project.url}
+                    </a>
+                  </Description>
+                )}
+                {project.keywords?.length > 0 && (
+                  <BadgeList>
+                    {project.keywords.map((keyword, j) => (
+                      <Badge key={j}>{keyword}</Badge>
+                    ))}
+                  </BadgeList>
+                )}
+                {project.highlights?.length > 0 && (
+                  <Highlights>
+                    {project.highlights.map((highlight, j) => (
+                      <li
+                        key={j}
+                        dangerouslySetInnerHTML={{
+                          __html: boldNumbers(highlight),
+                        }}
+                      />
+                    ))}
+                  </Highlights>
+                )}
+              </Item>
+            ))}
+          </Section>
+        )}
+
+        {/* Volunteer */}
+        {volunteer.length > 0 && (
+          <Section>
+            <SectionTitle>Volunteer Work</SectionTitle>
+            {volunteer.map((vol, i) => (
+              <Item key={i}>
+                <ItemHeader>
+                  <ItemTitle>{vol.position}</ItemTitle>
+                </ItemHeader>
+                {vol.organization && (
+                  <ItemSubtitle>{vol.organization}</ItemSubtitle>
+                )}
+                {vol.startDate && (
+                  <ItemMeta>
+                    <span>
+                      {formatDateRange({
+                        startDate: vol.startDate,
+                        endDate: vol.endDate,
+                      })}
+                    </span>
+                  </ItemMeta>
+                )}
+                {vol.summary && (
+                  <Description
+                    dangerouslySetInnerHTML={{
+                      __html: boldNumbers(vol.summary),
+                    }}
+                  />
+                )}
+                {vol.highlights?.length > 0 && (
+                  <Highlights>
+                    {vol.highlights.map((highlight, j) => (
+                      <li
+                        key={j}
+                        dangerouslySetInnerHTML={{
+                          __html: boldNumbers(highlight),
+                        }}
+                      />
+                    ))}
+                  </Highlights>
+                )}
+              </Item>
+            ))}
+          </Section>
+        )}
+
+        {/* Awards */}
+        {awards.length > 0 && (
+          <Section>
+            <SectionTitle>Awards & Recognition</SectionTitle>
+            {awards.map((award, i) => (
+              <Item key={i}>
+                <ItemHeader>
+                  <ItemTitle>{award.title}</ItemTitle>
+                </ItemHeader>
+                {award.awarder && <ItemSubtitle>{award.awarder}</ItemSubtitle>}
+                {award.date && (
+                  <ItemMeta>
+                    <span>{award.date}</span>
+                  </ItemMeta>
+                )}
+                {award.summary && (
+                  <Description
+                    dangerouslySetInnerHTML={{
+                      __html: boldNumbers(award.summary),
+                    }}
+                  />
+                )}
+              </Item>
+            ))}
+          </Section>
+        )}
+      </Container>
+    </>
+  );
+}
+
+export default Resume;

package/tests/theme.test.js

@@ -0,0 +1,178 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '../src/index.jsx';
+
+const completeResume = {
+  basics: {
+    name: 'Sarah Martinez',
+    label: 'Data Analytics Manager',
+    email: 'sarah.martinez@example.com',
+    phone: '+1 (555) 987-6543',
+    url: 'https://sarahmartinez.io',
+    summary:
+      'Analytics leader with 10+ years driving data-driven decision making. Delivered $5M in cost savings through optimization initiatives.',
+    location: {
+      city: 'Austin',
+      region: 'TX',
+    },
+    profiles: [
+      { network: 'LinkedIn', url: 'https://linkedin.com/in/sarahmartinez' },
+      { network: 'GitHub', url: 'https://github.com/smartinez' },
+    ],
+  },
+  work: [
+    {
+      name: 'DataCorp Analytics',
+      position: 'Senior Analytics Manager',
+      location: 'Austin, TX',
+      startDate: '2020-06-01',
+      endDate: null,
+      summary: 'Leading team of 8 analysts across 3 business units',
+      highlights: [
+        'Increased revenue forecasting accuracy by 42% through ML model implementation',
+        'Reduced operational costs by $2.3M annually via process optimization',
+        'Built real-time dashboard serving 500+ daily users with 99.9% uptime',
+      ],
+    },
+  ],
+  education: [
+    {
+      institution: 'University of Texas at Austin',
+      area: 'Statistics',
+      studyType: 'Master of Science',
+      startDate: '2014-09-01',
+      endDate: '2016-05-31',
+      score: '3.9',
+      courses: ['Machine Learning', 'Statistical Modeling', 'Data Mining'],
+    },
+  ],
+  skills: [
+    {
+      name: 'Analytics',
+      keywords: ['Python', 'R', 'SQL', 'Tableau', 'Power BI'],
+    },
+  ],
+  projects: [
+    {
+      name: 'Predictive Analytics Platform',
+      description:
+        'Built ML-powered forecasting system processing 50GB daily data',
+      highlights: [
+        'Achieved 87% prediction accuracy (15% improvement over baseline)',
+        'Deployed to 1,200+ users across 5 business units',
+      ],
+      keywords: ['Python', 'TensorFlow', 'PostgreSQL', 'Docker'],
+      startDate: '2021-01-01',
+      endDate: '2022-12-31',
+      url: 'https://github.com/smartinez/predictive-analytics',
+    },
+  ],
+};
+
+describe('Data-Driven Theme', () => {
+  it('renders complete HTML document', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('<!DOCTYPE html>');
+    expect(html).toContain('<html lang="en">');
+    expect(html).toContain('</html>');
+  });
+
+  it('applies data-driven sky blue accent', () => {
+    const html = render(completeResume);
+
+    // Sky blue accent color in CSS
+    expect(html).toContain('#0ea5e9');
+  });
+
+  it('renders basics section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Sarah Martinez');
+    expect(html).toContain('Data Analytics Manager');
+    expect(html).toContain('sarah.martinez@example.com');
+  });
+
+  it('renders work experience', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Professional Experience');
+    expect(html).toContain('DataCorp Analytics');
+    expect(html).toContain('Senior Analytics Manager');
+  });
+
+  it('bolds numbers in summary', () => {
+    const html = render(completeResume);
+
+    // Numbers in summary should be wrapped in <strong> tags
+    expect(html).toContain('<strong>10+</strong>');
+    expect(html).toContain('<strong>$5M</strong>');
+  });
+
+  it('bolds numbers in work highlights', () => {
+    const html = render(completeResume);
+
+    // Metrics should be emphasized
+    expect(html).toContain('<strong>42%</strong>');
+    expect(html).toContain('<strong>$2.3M</strong>');
+    expect(html).toContain('<strong>99.9%</strong>');
+  });
+
+  it('renders education section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Education');
+    expect(html).toContain('University of Texas at Austin');
+    expect(html).toContain('Statistics');
+  });
+
+  it('renders skills section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Technical Skills');
+    expect(html).toContain('Python');
+    expect(html).toContain('SQL');
+  });
+
+  it('renders projects section', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('Key Projects');
+    expect(html).toContain('Predictive Analytics Platform');
+  });
+
+  it('bolds numbers in project highlights', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('<strong>87%</strong>');
+    expect(html).toContain('<strong>1,200+</strong>');
+  });
+
+  it('includes styled-components CSS', () => {
+    const html = render(completeResume);
+
+    // Styled-components generates style tags
+    expect(html).toContain('<style');
+    expect(html).toContain('data-styled');
+  });
+
+  it('uses geometric sans-serif font', () => {
+    const html = render(completeResume);
+
+    expect(html).toContain('DM Sans');
+  });
+
+  it('handles minimal data gracefully', () => {
+    const minimalResume = {
+      basics: {
+        name: 'John Doe',
+        email: 'john@example.com',
+      },
+    };
+
+    const html = render(minimalResume);
+
+    expect(html).toContain('John Doe');
+    expect(html).toContain('john@example.com');
+    expect(html).toContain('</html>');
+  });
+});

package/vitest.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  esbuild: {
+    jsx: 'automatic',
+  },
+  test: {
+    environment: 'node',
+    globals: true,
+  },
+});