jsonresume-theme-two-column-modernist 1.0.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "jsonresume-theme-two-column-modernist",
+  "version": "1.0.0",
+  "description": "Structured European minimalism with asymmetric two-column layout and neutral grotesk typography",
+  "main": "src/index.js",
+  "keywords": [
+    "jsonresume",
+    "theme",
+    "two-column",
+    "european",
+    "minimalist",
+    "structured",
+    "grotesk",
+    "swiss-design"
+  ],
+  "dependencies": {
+    "@resume/core": "0.1.0",
+    "styled-components": "6.1.19"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/Resume.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  Container,
+  LeftColumn,
+  RightColumn,
+  Divider,
+} from './components/styles.jsx';
+import { Header } from './components/Header';
+import { Skills } from './components/Skills';
+import { Languages } from './components/Languages';
+import {
+  SummarySection,
+  WorkSection,
+  EducationSection,
+  ProjectsSection,
+  InterestsSection,
+} from './components/ContentSection';
+import {
+  VolunteerSection,
+  AwardsSection,
+  PublicationsSection,
+  ReferencesSection,
+} from './components/AdditionalSections';
+
+function Resume({ resume }) {
+  const {
+    basics,
+    work,
+    education,
+    skills,
+    languages,
+    projects,
+    volunteer,
+    awards,
+    publications,
+    interests,
+    references,
+  } = resume;
+
+  return (
+    <Container>
+      <LeftColumn>
+        <Header basics={basics} />
+        {(basics?.email ||
+          basics?.phone ||
+          basics?.url ||
+          basics?.location) && <Divider />}
+        {basics?.profiles && basics.profiles.length > 0 && <Divider />}
+        {skills && skills.length > 0 && (
+          <>
+            <Divider />
+            <Skills skills={skills} />
+          </>
+        )}
+        {languages && languages.length > 0 && (
+          <>
+            <Divider />
+            <Languages languages={languages} />
+          </>
+        )}
+      </LeftColumn>
+
+      <RightColumn>
+        <SummarySection summary={basics?.summary} />
+        <WorkSection work={work} />
+        <EducationSection education={education} />
+        <ProjectsSection projects={projects} />
+        <VolunteerSection volunteer={volunteer} />
+        <AwardsSection awards={awards} />
+        <PublicationsSection publications={publications} />
+        <InterestsSection interests={interests} />
+        <ReferencesSection references={references} />
+      </RightColumn>
+    </Container>
+  );
+}
+
+export default Resume;

package/src/components/AdditionalSections.jsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { safeUrl } from '@resume/core';
+import {
+  Section,
+  Title,
+  Entry,
+  EntryHeader,
+  EntryTitle,
+  EntryMeta,
+  EntryOrganization,
+  EntryDate,
+  EntryDescription,
+  HighlightsList,
+  HighlightItem,
+} from './sharedStyles.jsx';
+
+export function VolunteerSection({ volunteer }) {
+  if (!volunteer || volunteer.length === 0) return null;
+
+  return (
+    <Section>
+      <Title>Volunteer</Title>
+      {volunteer.map((vol, i) => (
+        <Entry key={i}>
+          <EntryHeader>
+            {vol.position && <EntryTitle>{vol.position}</EntryTitle>}
+            <EntryMeta>
+              {vol.organization && (
+                <EntryOrganization>{vol.organization}</EntryOrganization>
+              )}
+              {(vol.startDate || vol.endDate) && (
+                <EntryDate>
+                  {vol.startDate} – {vol.endDate || 'Present'}
+                </EntryDate>
+              )}
+            </EntryMeta>
+          </EntryHeader>
+          {vol.summary && <EntryDescription>{vol.summary}</EntryDescription>}
+          {vol.highlights && vol.highlights.length > 0 && (
+            <HighlightsList>
+              {vol.highlights.map((highlight, j) => (
+                <HighlightItem key={j}>{highlight}</HighlightItem>
+              ))}
+            </HighlightsList>
+          )}
+        </Entry>
+      ))}
+    </Section>
+  );
+}
+
+export function AwardsSection({ awards }) {
+  if (!awards || awards.length === 0) return null;
+
+  return (
+    <Section>
+      <Title>Awards</Title>
+      {awards.map((award, i) => (
+        <Entry key={i}>
+          <EntryHeader>
+            {award.title && <EntryTitle>{award.title}</EntryTitle>}
+            <EntryMeta>
+              {award.awarder && (
+                <EntryOrganization>{award.awarder}</EntryOrganization>
+              )}
+              {award.date && <EntryDate>{award.date}</EntryDate>}
+            </EntryMeta>
+          </EntryHeader>
+          {award.summary && (
+            <EntryDescription>{award.summary}</EntryDescription>
+          )}
+        </Entry>
+      ))}
+    </Section>
+  );
+}
+
+export function PublicationsSection({ publications }) {
+  if (!publications || publications.length === 0) return null;
+
+  return (
+    <Section>
+      <Title>Publications</Title>
+      {publications.map((pub, i) => (
+        <Entry key={i}>
+          <EntryHeader>
+            {pub.name && <EntryTitle>{pub.name}</EntryTitle>}
+            <EntryMeta>
+              {pub.publisher && (
+                <EntryOrganization>{pub.publisher}</EntryOrganization>
+              )}
+              {pub.releaseDate && <EntryDate>{pub.releaseDate}</EntryDate>}
+            </EntryMeta>
+          </EntryHeader>
+          {pub.summary && <EntryDescription>{pub.summary}</EntryDescription>}
+          {pub.url && (
+            <div>
+              <a
+                href={safeUrl(pub.url)}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View Publication
+              </a>
+            </div>
+          )}
+        </Entry>
+      ))}
+    </Section>
+  );
+}
+
+export function ReferencesSection({ references }) {
+  if (!references || references.length === 0) return null;
+
+  return (
+    <Section>
+      <Title>References</Title>
+      {references.map((ref, i) => (
+        <Entry key={i}>
+          {ref.name && <EntryTitle>{ref.name}</EntryTitle>}
+          {ref.reference && (
+            <EntryDescription>{ref.reference}</EntryDescription>
+          )}
+        </Entry>
+      ))}
+    </Section>
+  );
+}

package/src/components/ContentSection.jsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { safeUrl } from '@resume/core';
+import {
+  Section,
+  Title,
+  Entry,
+  EntryHeader,
+  EntryTitle,
+  EntryMeta,
+  EntryOrganization,
+  EntryDate,
+  EntryDescription,
+  HighlightsList,
+  HighlightItem,
+  Summary,
+  SkillList,
+  SkillItem,
+} from './sharedStyles.jsx';
+
+export function WorkSection({ work }) {
+  if (!work || work.length === 0) return null;
+
+  return (
+    <Section>
+      <Title>Experience</Title>
+      {work.map((job, i) => (
+        <Entry key={i}>
+          <EntryHeader>
+            {job.position && <EntryTitle>{job.position}</EntryTitle>}
+            <EntryMeta>
+              {job.name && <EntryOrganization>{job.name}</EntryOrganization>}
+              {(job.startDate || job.endDate) && (
+                <EntryDate>
+                  {job.startDate} – {job.endDate || 'Present'}
+                </EntryDate>
+              )}
+            </EntryMeta>
+          </EntryHeader>
+          {job.summary && <EntryDescription>{job.summary}</EntryDescription>}
+          {job.highlights && job.highlights.length > 0 && (
+            <HighlightsList>
+              {job.highlights.map((highlight, j) => (
+                <HighlightItem key={j}>{highlight}</HighlightItem>
+              ))}
+            </HighlightsList>
+          )}
+        </Entry>
+      ))}
+    </Section>
+  );
+}
+
+export function EducationSection({ education }) {
+  if (!education || education.length === 0) return null;
+
+  return (
+    <Section>
+      <Title>Education</Title>
+      {education.map((edu, i) => (
+        <Entry key={i}>
+          <EntryHeader>
+            {edu.studyType && edu.area && (
+              <EntryTitle>
+                {edu.studyType} in {edu.area}
+              </EntryTitle>
+            )}
+            <EntryMeta>
+              {edu.institution && (
+                <EntryOrganization>{edu.institution}</EntryOrganization>
+              )}
+              {(edu.startDate || edu.endDate) && (
+                <EntryDate>
+                  {edu.startDate} – {edu.endDate || 'Present'}
+                </EntryDate>
+              )}
+            </EntryMeta>
+          </EntryHeader>
+          {edu.score && <EntryDescription>GPA: {edu.score}</EntryDescription>}
+          {edu.courses && edu.courses.length > 0 && (
+            <HighlightsList>
+              {edu.courses.map((course, j) => (
+                <HighlightItem key={j}>{course}</HighlightItem>
+              ))}
+            </HighlightsList>
+          )}
+        </Entry>
+      ))}
+    </Section>
+  );
+}
+
+export function ProjectsSection({ projects }) {
+  if (!projects || projects.length === 0) return null;
+
+  return (
+    <Section>
+      <Title>Projects</Title>
+      {projects.map((project, i) => (
+        <Entry key={i}>
+          <EntryHeader>
+            {project.name && <EntryTitle>{project.name}</EntryTitle>}
+            {(project.startDate || project.endDate) && (
+              <EntryMeta>
+                <EntryDate>
+                  {project.startDate} – {project.endDate || 'Present'}
+                </EntryDate>
+              </EntryMeta>
+            )}
+          </EntryHeader>
+          {project.description && (
+            <EntryDescription>{project.description}</EntryDescription>
+          )}
+          {project.highlights && project.highlights.length > 0 && (
+            <HighlightsList>
+              {project.highlights.map((highlight, j) => (
+                <HighlightItem key={j}>{highlight}</HighlightItem>
+              ))}
+            </HighlightsList>
+          )}
+          {project.url && (
+            <div>
+              <a
+                href={safeUrl(project.url)}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View Project
+              </a>
+            </div>
+          )}
+        </Entry>
+      ))}
+    </Section>
+  );
+}
+
+export function SummarySection({ summary }) {
+  if (!summary) return null;
+
+  return (
+    <Section>
+      <Summary>{summary}</Summary>
+    </Section>
+  );
+}
+
+export function InterestsSection({ interests }) {
+  if (!interests || interests.length === 0) return null;
+
+  return (
+    <Section>
+      <Title>Interests</Title>
+      <SkillList>
+        {interests.map((interest, i) => (
+          <SkillItem key={i}>{interest.name}</SkillItem>
+        ))}
+      </SkillList>
+    </Section>
+  );
+}

package/src/components/Header.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import styled from 'styled-components';
+import { safeUrl } from '@resume/core';
+
+const HeaderContainer = styled.header`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+const Name = styled.h1`
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0;
+  color: #1f1f1f;
+`;
+
+const Title = styled.p`
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #4b5563;
+  margin: 0;
+  letter-spacing: 0.01em;
+`;
+
+const Contact = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: #4b5563;
+
+  a {
+    color: #1f1f1f;
+    text-decoration: none;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #6b7280;
+    }
+  }
+`;
+
+export function Header({ basics }) {
+  if (!basics) return null;
+
+  return (
+    <>
+      <HeaderContainer>
+        <Name>{basics.name}</Name>
+        {basics.label && <Title>{basics.label}</Title>}
+      </HeaderContainer>
+
+      {(basics.email || basics.phone || basics.url || basics.location) && (
+        <Contact>
+          {basics.email && (
+            <div>
+              <a href={`mailto:${basics.email}`}>{basics.email}</a>
+            </div>
+          )}
+          {basics.phone && <div>{basics.phone}</div>}
+          {basics.url && (
+            <div>
+              <a
+                href={safeUrl(basics.url)}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {basics.url.replace(/^https?:\/\//, '')}
+              </a>
+            </div>
+          )}
+          {basics.location && (
+            <div>
+              {[
+                basics.location.city,
+                basics.location.region,
+                basics.location.countryCode,
+              ]
+                .filter(Boolean)
+                .join(', ')}
+            </div>
+          )}
+        </Contact>
+      )}
+
+      {basics.profiles && basics.profiles.length > 0 && (
+        <Contact>
+          {basics.profiles.map((profile, i) => (
+            <div key={i}>
+              <a
+                href={safeUrl(profile.url)}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {profile.network}
+                {profile.username && `: @${profile.username}`}
+              </a>
+            </div>
+          ))}
+        </Contact>
+      )}
+    </>
+  );
+}

package/src/components/Languages.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const SidebarSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const SidebarTitle = styled.h2`
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin: 0;
+  color: #1f1f1f;
+`;
+
+const LanguageList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const LanguageItem = styled.li`
+  font-size: 0.85rem;
+  color: #374151;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const LanguageName = styled.span`
+  font-weight: 500;
+  color: #1f1f1f;
+`;
+
+const LanguageFluency = styled.span`
+  font-size: 0.8rem;
+  color: #6b7280;
+`;
+
+export function Languages({ languages }) {
+  if (!languages || languages.length === 0) return null;
+
+  return (
+    <SidebarSection>
+      <SidebarTitle>Languages</SidebarTitle>
+      <LanguageList>
+        {languages.map((lang, i) => (
+          <LanguageItem key={i}>
+            <LanguageName>{lang.language}</LanguageName>
+            {lang.fluency && <LanguageFluency>{lang.fluency}</LanguageFluency>}
+          </LanguageItem>
+        ))}
+      </LanguageList>
+    </SidebarSection>
+  );
+}

package/src/components/Skills.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const SidebarSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const SidebarTitle = styled.h2`
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin: 0;
+  color: #1f1f1f;
+`;
+
+const SkillCategory = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const SkillName = styled.h3`
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin: 0;
+  color: #1f1f1f;
+`;
+
+const SkillList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+`;
+
+const SkillItem = styled.li`
+  font-size: 0.8rem;
+  color: #4b5563;
+  background: #f3f4f6;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+`;
+
+export function Skills({ skills }) {
+  if (!skills || skills.length === 0) return null;
+
+  return (
+    <SidebarSection>
+      <SidebarTitle>Skills</SidebarTitle>
+      {skills.map((skill, i) => (
+        <SkillCategory key={i}>
+          {skill.name && <SkillName>{skill.name}</SkillName>}
+          {skill.keywords && skill.keywords.length > 0 && (
+            <SkillList>
+              {skill.keywords.map((keyword, j) => (
+                <SkillItem key={j}>{keyword}</SkillItem>
+              ))}
+            </SkillList>
+          )}
+        </SkillCategory>
+      ))}
+    </SidebarSection>
+  );
+}

package/src/components/sharedStyles.jsx

@@ -0,0 +1,111 @@
+import styled from 'styled-components';
+
+export const Section = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
+
+export const Title = styled.h2`
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0;
+  color: #1f1f1f;
+  border-bottom: 1px solid #d1d5db;
+  padding-bottom: 0.5rem;
+`;
+
+export const Entry = styled.article`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+export const EntryHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+
+export const EntryTitle = styled.h3`
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: #1f1f1f;
+`;
+
+export const EntryMeta = styled.div`
+  font-size: 0.85rem;
+  color: #6b7280;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+`;
+
+export const EntryOrganization = styled.span`
+  font-weight: 500;
+  color: #4b5563;
+`;
+
+export const EntryDate = styled.span`
+  color: #9ca3af;
+  font-size: 0.8rem;
+`;
+
+export const EntryDescription = styled.p`
+  font-size: 0.9rem;
+  line-height: 1.7;
+  color: #374151;
+  margin: 0;
+  white-space: pre-wrap;
+`;
+
+export const HighlightsList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+export const HighlightItem = styled.li`
+  font-size: 0.85rem;
+  color: #4b5563;
+  padding-left: 1rem;
+  position: relative;
+
+  &::before {
+    content: '—';
+    position: absolute;
+    left: 0;
+    color: #d1d5db;
+  }
+`;
+
+export const Summary = styled.p`
+  font-size: 0.9rem;
+  line-height: 1.7;
+  color: #374151;
+  margin: 0;
+  white-space: pre-wrap;
+`;
+
+export const SkillList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+`;
+
+export const SkillItem = styled.li`
+  font-size: 0.8rem;
+  color: #4b5563;
+  background: #f3f4f6;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+`;

package/src/components/styles.jsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: grid;
+  grid-template-columns: 30% 70%;
+  gap: 3rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 3rem 2rem;
+  font-family: 'Space Grotesk', 'Archivo', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  line-height: 1.6;
+  color: #1f1f1f;
+  background: #ffffff;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    padding: 2rem 1rem;
+  }
+
+  @media print {
+    padding: 1rem;
+    gap: 2rem;
+  }
+`;
+
+export const LeftColumn = styled.aside`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+`;
+
+export const RightColumn = styled.main`
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+`;
+
+export const Divider = styled.hr`
+  border: none;
+  border-top: 1px solid #d1d5db;
+  margin: 0;
+`;

package/src/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+import Resume from './Resume.jsx';
+
+export function 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">
+  <title>${resume.basics?.name || 'Resume'} - Resume</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+  ${styles}
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: 'Space Grotesk', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #ffffff;
+    }
+    @media print {
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      @page {
+        margin: 0.5cm;
+      }
+    }
+  </style>
+</head>
+<body>
+  ${html}
+</body>
+</html>`;
+  } finally {
+    sheet.seal();
+  }
+}