jsonresume-theme-bold-header-statement 1.0.0 → 1.1.0

package/dist/style.css

@@ -0,0 +1,139 @@
+/**
+ * Resume Core Design Tokens
+ * Framework-agnostic CSS variables for theming
+ * Based on 2025 resume best practices and ATS compatibility research
+ */
+
+:root {
+  /* Typography - ATS-friendly fonts */
+  --resume-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --resume-font-serif: Cambria, Georgia, "Times New Roman", serif;
+  --resume-font-mono: "Courier New", Courier, monospace;
+
+  /* Font Sizes - Optimal readability */
+  --resume-size-name: 36px;        /* Large, prominent name */
+  --resume-size-heading: 16px;     /* Section titles */
+  --resume-size-subheading: 14px;  /* Job titles, degrees */
+  --resume-size-body: 11px;        /* Body text, descriptions */
+  --resume-size-small: 10px;       /* Dates, locations, metadata */
+
+  /* Font Weights */
+  --resume-weight-normal: 400;
+  --resume-weight-medium: 500;
+  --resume-weight-semibold: 600;
+  --resume-weight-bold: 700;
+
+  /* Line Heights */
+  --resume-line-height-tight: 1.2;
+  --resume-line-height-normal: 1.5;
+  --resume-line-height-relaxed: 1.75;
+
+  /* Colors - Professional Theme (default) */
+  --resume-color-primary: #1a1a1a;
+  --resume-color-secondary: #4a4a4a;
+  --resume-color-accent: #2563eb;
+  --resume-color-background: #ffffff;
+  --resume-color-border: #e5e7eb;
+
+  /* Spacing - Consistent rhythm */
+  --resume-space-section: 24px;   /* Between major sections */
+  --resume-space-item: 16px;      /* Between list items */
+  --resume-space-tight: 8px;      /* Within items */
+  --resume-space-margin: 48px;    /* Page margins */
+
+  /* Layout - Optimal line length */
+  --resume-max-width: 660px;      /* ~80 chars at body size */
+  --resume-column-gap: 24px;
+
+  /* Border Radius */
+  --resume-radius-sm: 4px;
+  --resume-radius-md: 8px;
+  --resume-radius-lg: 12px;
+
+  /* Shadows - Subtle depth */
+  --resume-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --resume-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Modern Theme Variant */
+[data-theme="modern"] {
+  --resume-color-primary: #0f172a;
+  --resume-color-secondary: #475569;
+  --resume-color-accent: #8b5cf6;
+  --resume-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Classic Theme Variant */
+[data-theme="classic"] {
+  --resume-color-primary: #000000;
+  --resume-color-secondary: #333333;
+  --resume-color-accent: #0066cc;
+  --resume-font-sans: Georgia, "Times New Roman", serif;
+}
+
+/* Minimal Theme Variant */
+[data-theme="minimal"] {
+  --resume-color-primary: #18181b;
+  --resume-color-secondary: #71717a;
+  --resume-color-accent: #000000;
+  --resume-space-section: 32px;
+  --resume-space-item: 20px;
+}
+
+/* High Contrast Variant (Accessibility) */
+[data-theme="high-contrast"] {
+  --resume-color-primary: #000000;
+  --resume-color-secondary: #000000;
+  --resume-color-accent: #0000ff;
+  --resume-color-background: #ffffff;
+  --resume-color-border: #000000;
+}
+
+/* Print Styles - ATS-Friendly PDF Export */
+@media print {
+  :root {
+    /* Optimize for print */
+    --resume-space-section: 18px;
+    --resume-space-item: 12px;
+  }
+
+  @page {
+    size: A4;
+    margin: 0.5in;
+  }
+
+  /* Prevent awkward breaks */
+  .resume-section {
+    page-break-inside: avoid;
+  }
+
+  .resume-item {
+    break-inside: avoid;
+  }
+
+  /* Widows and orphans control */
+  p, li {
+    widows: 3;
+    orphans: 3;
+  }
+
+  /* Hyphenation for long words */
+  .resume-description {
+    hyphens: auto;
+  }
+
+  /* Hide interactive elements */
+  .no-print {
+    display: none !important;
+  }
+}
+
+/* RTL Support */
+[dir="rtl"] {
+  text-align: right;
+}
+
+[dir="rtl"] .resume-item {
+  padding-left: 0;
+  padding-right: var(--resume-space-tight);
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "jsonresume-theme-bold-header-statement",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Magazine-inspired layout with commanding header and confident personal brand aesthetic",
-  "main": "src/index.js",
+  "main": "./dist/index.js",
   "type": "module",
   "license": "MIT",
   "keywords": [
@@ -20,6 +20,23 @@
   },
   "dependencies": {
     "styled-components": "^6.1.19",
-    "@resume/core": "0.1.0"
+    "@jsonresume/core": "0.1.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.jsx",
+      "default": "./dist/index.js"
+    },
+    "./dist": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^5.4.21"
+  },
+  "scripts": {
+    "build": "vite build"
   }
 }

package/src/Resume.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Header } from './components/Header.jsx';
-import { WorkSection } from './components/WorkSection.jsx';
-import { SkillsSection } from './components/SkillsSection.jsx';
-import { EducationSection } from './components/EducationSection.jsx';
-import { ProjectsSection } from './components/ProjectsSection.jsx';
+import {
+  Section,
+  SectionTitle,
+  ContactInfo,
+  DateRange,
+} from '@jsonresume/core';
 
+// Layout
 const Layout = styled.div`
   max-width: 900px;
   margin: 0 auto;
@@ -28,6 +30,74 @@ const ContentWrapper = styled.div`
   }
 `;
 
+// Header
+const HeaderSection = styled.header`
+  width: 100%;
+  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
+  padding: 80px 60px;
+  margin-bottom: 60px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: 300px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 50%;
+    transform: translate(30%, -30%);
+  }
+
+  @media print {
+    padding: 60px 40px;
+    background: #0f766e;
+  }
+`;
+
+const Name = styled.h1`
+  font-size: 4rem;
+  font-weight: 900;
+  color: white;
+  margin: 0 0 16px 0;
+  letter-spacing: -2px;
+  line-height: 1;
+  text-transform: uppercase;
+  position: relative;
+  z-index: 1;
+
+  @media print {
+    font-size: 3.5rem;
+  }
+`;
+
+const Label = styled.div`
+  font-size: 1.5rem;
+  color: rgba(255, 255, 255, 0.95);
+  margin-bottom: 32px;
+  font-weight: 300;
+  letter-spacing: 0.5px;
+  position: relative;
+  z-index: 1;
+`;
+
+const StyledContactInfo = styled(ContactInfo)`
+  font-size: 16px;
+  position: relative;
+  z-index: 1;
+
+  a {
+    color: white;
+    font-weight: 400;
+  }
+
+  span {
+    color: rgba(255, 255, 255, 0.9);
+  }
+`;
+
 const Summary = styled.p`
   font-size: 18px;
   line-height: 1.8;
@@ -37,6 +107,376 @@ const Summary = styled.p`
   max-width: 800px;
 `;
 
+// Section styles
+const StyledSectionTitle = styled(SectionTitle)`
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f766e;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin: 60px 0 32px 0;
+  padding-bottom: 12px;
+  border-bottom: 3px solid #0f766e;
+`;
+
+const ContentBlock = styled.div`
+  margin-bottom: 50px;
+  background: #fafafa;
+  padding: 32px;
+  border-radius: 8px;
+  border-left: 5px solid #0f766e;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @media print {
+    background: white;
+    border: 1px solid #e5e7eb;
+    padding: 24px;
+  }
+`;
+
+// Work section
+const WorkHeader = styled.div`
+  margin-bottom: 16px;
+`;
+
+const Position = styled.h3`
+  font-size: 22px;
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.5px;
+`;
+
+const Company = styled.div`
+  font-size: 18px;
+  color: #0f766e;
+  font-weight: 500;
+  margin-bottom: 8px;
+`;
+
+const DateText = styled.div`
+  font-size: 14px;
+  color: #6b7280;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const WorkSummary = styled.p`
+  margin: 16px 0;
+  color: #4b5563;
+  line-height: 1.7;
+  font-size: 16px;
+  font-weight: 300;
+`;
+
+const Highlights = styled.ul`
+  margin: 16px 0 0 0;
+  padding-left: 24px;
+  list-style-type: none;
+
+  li {
+    margin: 10px 0;
+    color: #374151;
+    line-height: 1.7;
+    font-weight: 300;
+    position: relative;
+    padding-left: 8px;
+
+    &::before {
+      content: '▸';
+      position: absolute;
+      left: -16px;
+      color: #0f766e;
+      font-weight: 700;
+    }
+  }
+`;
+
+// Skills section
+const SkillsGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 28px;
+`;
+
+const SkillCategory = styled.div`
+  padding: 28px;
+  background: white;
+  border-radius: 8px;
+  border: 2px solid #0f766e;
+  transition: transform 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+`;
+
+const SkillName = styled.h4`
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f766e;
+  margin: 0 0 12px 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const SkillTags = styled.div`
+  font-size: 14px;
+  color: #6b7280;
+  line-height: 1.6;
+  font-weight: 300;
+`;
+
+// Education section
+const Institution = styled.h3`
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 8px 0;
+`;
+
+const Degree = styled.div`
+  font-size: 16px;
+  color: #4b5563;
+  margin-bottom: 8px;
+  font-weight: 400;
+`;
+
+const EducationDate = styled.div`
+  font-size: 14px;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+// Sub-components
+function Header({ basics }) {
+  return (
+    <HeaderSection>
+      <Name>{basics.name}</Name>
+      {basics.label && <Label>{basics.label}</Label>}
+      <StyledContactInfo basics={basics} />
+    </HeaderSection>
+  );
+}
+
+function WorkSection({ work }) {
+  if (!work?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Experience</StyledSectionTitle>
+      {work.map((job, index) => (
+        <ContentBlock key={index}>
+          <WorkHeader>
+            <Position>{job.position}</Position>
+            {job.name && <Company>{job.name}</Company>}
+            <DateText>
+              <DateRange startDate={job.startDate} endDate={job.endDate} />
+            </DateText>
+          </WorkHeader>
+          {job.summary && <WorkSummary>{job.summary}</WorkSummary>}
+          {job.highlights?.length > 0 && (
+            <Highlights>
+              {job.highlights.map((highlight, i) => (
+                <li key={i}>{highlight}</li>
+              ))}
+            </Highlights>
+          )}
+        </ContentBlock>
+      ))}
+    </Section>
+  );
+}
+
+function SkillsSection({ skills }) {
+  if (!skills?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Skills</StyledSectionTitle>
+      <SkillsGrid>
+        {skills.map((skill, index) => (
+          <SkillCategory key={index}>
+            <SkillName>{skill.name}</SkillName>
+            {skill.keywords?.length > 0 && (
+              <SkillTags>{skill.keywords.join(', ')}</SkillTags>
+            )}
+          </SkillCategory>
+        ))}
+      </SkillsGrid>
+    </Section>
+  );
+}
+
+function EducationSection({ education }) {
+  if (!education?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Education</StyledSectionTitle>
+      {education.map((edu, index) => (
+        <ContentBlock key={index}>
+          <Institution>{edu.institution}</Institution>
+          <Degree>
+            {edu.studyType} in {edu.area}
+            {edu.score && ` • ${edu.score}`}
+          </Degree>
+          <EducationDate>
+            <DateRange startDate={edu.startDate} endDate={edu.endDate} />
+          </EducationDate>
+        </ContentBlock>
+      ))}
+    </Section>
+  );
+}
+
+function ProjectsSection({ projects }) {
+  if (!projects?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Projects</StyledSectionTitle>
+      {projects.map((project, index) => (
+        <ContentBlock key={index}>
+          <Position>{project.name}</Position>
+          {project.description && (
+            <WorkSummary>{project.description}</WorkSummary>
+          )}
+          {project.highlights?.length > 0 && (
+            <Highlights>
+              {project.highlights.map((highlight, i) => (
+                <li key={i}>{highlight}</li>
+              ))}
+            </Highlights>
+          )}
+        </ContentBlock>
+      ))}
+    </Section>
+  );
+}
+
+function VolunteerSection({ volunteer }) {
+  if (!volunteer?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Volunteer</StyledSectionTitle>
+      {volunteer.map((vol, index) => (
+        <ContentBlock key={index}>
+          <WorkHeader>
+            <Position>{vol.position}</Position>
+            {vol.organization && <Company>{vol.organization}</Company>}
+            {(vol.startDate || vol.endDate) && (
+              <DateText>
+                <DateRange startDate={vol.startDate} endDate={vol.endDate} />
+              </DateText>
+            )}
+          </WorkHeader>
+          {vol.summary && <WorkSummary>{vol.summary}</WorkSummary>}
+          {vol.highlights?.length > 0 && (
+            <Highlights>
+              {vol.highlights.map((highlight, i) => (
+                <li key={i}>{highlight}</li>
+              ))}
+            </Highlights>
+          )}
+        </ContentBlock>
+      ))}
+    </Section>
+  );
+}
+
+function AwardsSection({ awards }) {
+  if (!awards?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Awards</StyledSectionTitle>
+      {awards.map((award, index) => (
+        <ContentBlock key={index}>
+          <Institution>{award.title}</Institution>
+          {award.awarder && <Degree>Awarded by {award.awarder}</Degree>}
+          {award.date && <EducationDate>{award.date}</EducationDate>}
+          {award.summary && <WorkSummary>{award.summary}</WorkSummary>}
+        </ContentBlock>
+      ))}
+    </Section>
+  );
+}
+
+function CertificatesSection({ certificates }) {
+  if (!certificates?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Certificates</StyledSectionTitle>
+      {certificates.map((cert, index) => (
+        <ContentBlock key={index}>
+          <Institution>{cert.name}</Institution>
+          {cert.issuer && <Degree>Issued by {cert.issuer}</Degree>}
+          {cert.date && <EducationDate>{cert.date}</EducationDate>}
+        </ContentBlock>
+      ))}
+    </Section>
+  );
+}
+
+function PublicationsSection({ publications }) {
+  if (!publications?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Publications</StyledSectionTitle>
+      {publications.map((pub, index) => (
+        <ContentBlock key={index}>
+          <Institution>{pub.name}</Institution>
+          {pub.publisher && <Degree>Published by {pub.publisher}</Degree>}
+          {pub.releaseDate && <EducationDate>{pub.releaseDate}</EducationDate>}
+          {pub.summary && <WorkSummary>{pub.summary}</WorkSummary>}
+        </ContentBlock>
+      ))}
+    </Section>
+  );
+}
+
+function LanguagesSection({ languages }) {
+  if (!languages?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>Languages</StyledSectionTitle>
+      <SkillsGrid>
+        {languages.map((lang, index) => (
+          <SkillCategory key={index}>
+            <SkillName>{lang.language}</SkillName>
+            {lang.fluency && <SkillTags>{lang.fluency}</SkillTags>}
+          </SkillCategory>
+        ))}
+      </SkillsGrid>
+    </Section>
+  );
+}
+
+function ReferencesSection({ references }) {
+  if (!references?.length) return null;
+
+  return (
+    <Section>
+      <StyledSectionTitle>References</StyledSectionTitle>
+      {references.map((ref, index) => (
+        <ContentBlock key={index}>
+          <Institution>{ref.name}</Institution>
+          {ref.reference && <WorkSummary>{ref.reference}</WorkSummary>}
+        </ContentBlock>
+      ))}
+    </Section>
+  );
+}
+
+// Main component
 function Resume({ resume }) {
   const {
     basics = {},
@@ -44,6 +484,12 @@ function Resume({ resume }) {
     education = [],
     skills = [],
     projects = [],
+    volunteer = [],
+    awards = [],
+    certificates = [],
+    publications = [],
+    languages = [],
+    references = [],
   } = resume;
 
   return (
@@ -55,6 +501,12 @@ function Resume({ resume }) {
         <SkillsSection skills={skills} />
         <EducationSection education={education} />
         <ProjectsSection projects={projects} />
+        <VolunteerSection volunteer={volunteer} />
+        <AwardsSection awards={awards} />
+        <CertificatesSection certificates={certificates} />
+        <PublicationsSection publications={publications} />
+        <LanguagesSection languages={languages} />
+        <ReferencesSection references={references} />
       </ContentWrapper>
     </Layout>
   );

package/vite.config.js

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    ssr: true,
+    target: 'node18',
+    outDir: './dist',
+    emptyOutDir: true,
+    minify: false,
+    lib: {
+      entry: './src/index.jsx',
+      formats: ['es'],
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react-dom/server', 'react/jsx-runtime'],
+      output: {
+        exports: 'named',
+      },
+    },
+  },
+  ssr: {
+    // Force bundle these packages instead of externalizing
+    noExternal: [
+      'styled-components',
+      '@emotion/is-prop-valid',
+      'stylis',
+      'shallowequal',
+    ],
+  },
+});