jsonresume-theme-desert-modern 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# Desert Modern - JSON Resume Theme
+
+A warm minimalist JSON Resume theme inspired by desert landscapes and contemporary architecture. Designed for creative technologists, wellness professionals, and anyone who wants a calm, grounded presentation.
+
+## Design Specification
+
+- **Vibe:** Warm minimalism with sand-toned calm
+- **Layout:** Single column with gentle vertical rhythm and thin separators
+- **Typography:** Light sans-serif stack (Nunito, Inter) with generous letter spacing
+- **Colors:** Accent `#d97706` (desert amber) on a soft cream background
+- **Notes:** Ideal for portfolios with both creative and professional touchpoints
+
+## Highlights
+
+- Soft cream paper background with subtle shadowing for print-friendly warmth
+- Thin amber dividers and section markers to reinforce the desert tone
+- Balanced typography with lighter weights for headings and relaxed body copy
+- Clean metadata layout prioritizing readability and ATS compatibility
+
+## Supported JSON Resume Sections
+
+All 12 standard sections render with consistent styling:
+
+- Basics (name, contact, summary)
+- Work
+- Projects
+- Education
+- Skills
+- Volunteer
+- Awards
+- Certifications
+- Publications
+- Languages
+- Interests
+- References
+
+## Usage
+
+```bash
+npm install jsonresume-theme-desert-modern
+jsonresume serve --theme desert-modern
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "jsonresume-theme-desert-modern",
+  "version": "0.1.0",
+  "description": "Warm minimalist resume theme inspired by desert modern aesthetics",
+  "main": "src/index.js",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "jsonresume",
+    "theme",
+    "desert",
+    "minimalist",
+    "modern"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "styled-components": "^6.1.19",
+    "@resume/core": "0.1.0"
+  }
+}

package/src/Resume.jsx

@@ -0,0 +1,333 @@
+import React from 'react';
+import { DateRange } from '@resume/core';
+import {
+  Layout,
+  Header,
+  Name,
+  Label,
+  StyledContactInfo,
+  Summary,
+  SectionBlock,
+  SectionHeading,
+  Entry,
+  EntryHeader,
+  EntryTitle,
+  EntrySubtitle,
+  EntryMeta,
+  EntrySummary,
+  BulletList,
+  SkillGrid,
+  SkillCard,
+  SkillTitle,
+  KeywordList,
+  Pill,
+  Anchor,
+} from './styles';
+
+const joinParts = (...parts) => parts.filter(Boolean).join(' • ');
+
+const renderHighlights = (items) =>
+  items?.length ? (
+    <BulletList>
+      {items.map((text, index) => (
+        <li key={index}>{text}</li>
+      ))}
+    </BulletList>
+  ) : null;
+
+function Resume({ resume }) {
+  const {
+    basics = {},
+    work = [],
+    education = [],
+    projects = [],
+    volunteer = [],
+    skills = [],
+    awards = [],
+    certificates = [],
+    publications = [],
+    languages = [],
+    interests = [],
+    references = [],
+  } = resume;
+
+  return (
+    <Layout>
+      <Header>
+        {basics.name && <Name>{basics.name}</Name>}
+        {basics.label && <Label>{basics.label}</Label>}
+        <StyledContactInfo basics={basics} />
+        {basics.summary && <Summary>{basics.summary}</Summary>}
+      </Header>
+
+      {work?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Experience</SectionHeading>
+          {work.map((job, index) => (
+            <Entry key={index}>
+              <EntryHeader>
+                <div>
+                  {job.position && <EntryTitle>{job.position}</EntryTitle>}
+                  {job.name || job.location ? (
+                    <EntrySubtitle>
+                      {joinParts(job.name, job.location)}
+                    </EntrySubtitle>
+                  ) : null}
+                </div>
+                {(job.startDate || job.endDate) && (
+                  <EntryMeta>
+                    <DateRange
+                      startDate={job.startDate}
+                      endDate={job.endDate}
+                    />
+                  </EntryMeta>
+                )}
+              </EntryHeader>
+              {job.summary && <EntrySummary>{job.summary}</EntrySummary>}
+              {renderHighlights(job.highlights)}
+            </Entry>
+          ))}
+        </SectionBlock>
+      )}
+
+      {projects?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Projects</SectionHeading>
+          {projects.map((project, index) => {
+            const summary = project.description || project.summary;
+            const descriptor = joinParts(project.entity, project.type);
+            return (
+              <Entry key={index}>
+                <EntryHeader>
+                  <div>
+                    {project.name && <EntryTitle>{project.name}</EntryTitle>}
+                    {(descriptor || project.url) && (
+                      <EntrySubtitle>
+                        {descriptor}
+                        {descriptor && project.url ? ' • ' : ''}
+                        {project.url && (
+                          <Anchor href={project.url}>{project.url}</Anchor>
+                        )}
+                      </EntrySubtitle>
+                    )}
+                  </div>
+                  {(project.startDate || project.endDate) && (
+                    <EntryMeta>
+                      <DateRange
+                        startDate={project.startDate}
+                        endDate={project.endDate}
+                      />
+                    </EntryMeta>
+                  )}
+                </EntryHeader>
+                {summary && <EntrySummary>{summary}</EntrySummary>}
+                {renderHighlights(project.highlights)}
+                {project.keywords?.length > 0 && (
+                  <KeywordList>{project.keywords.join(' • ')}</KeywordList>
+                )}
+              </Entry>
+            );
+          })}
+        </SectionBlock>
+      )}
+
+      {education?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Education</SectionHeading>
+          {education.map((edu, index) => (
+            <Entry key={index}>
+              <EntryHeader>
+                <div>
+                  {edu.institution && (
+                    <EntryTitle>{edu.institution}</EntryTitle>
+                  )}
+                  {(edu.studyType || edu.area || edu.score) && (
+                    <EntrySubtitle>
+                      {joinParts(
+                        [edu.studyType, edu.area].filter(Boolean).join(' in '),
+                        edu.score
+                      )}
+                    </EntrySubtitle>
+                  )}
+                </div>
+                {(edu.startDate || edu.endDate) && (
+                  <EntryMeta>
+                    <DateRange
+                      startDate={edu.startDate}
+                      endDate={edu.endDate}
+                    />
+                  </EntryMeta>
+                )}
+              </EntryHeader>
+              {edu.courses?.length > 0 && (
+                <KeywordList>Key courses: {edu.courses.join(', ')}</KeywordList>
+              )}
+            </Entry>
+          ))}
+        </SectionBlock>
+      )}
+
+      {skills?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Skills</SectionHeading>
+          <SkillGrid>
+            {skills.map((skill, index) => (
+              <SkillCard key={index}>
+                <SkillTitle>
+                  {skill.name}
+                  {skill.level && <Pill>{skill.level}</Pill>}
+                </SkillTitle>
+                {skill.keywords?.length > 0 && (
+                  <KeywordList>{skill.keywords.join(' • ')}</KeywordList>
+                )}
+              </SkillCard>
+            ))}
+          </SkillGrid>
+        </SectionBlock>
+      )}
+
+      {volunteer?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Volunteer</SectionHeading>
+          {volunteer.map((item, index) => (
+            <Entry key={index}>
+              <EntryHeader>
+                <div>
+                  {item.position && <EntryTitle>{item.position}</EntryTitle>}
+                  {(item.organization || item.location) && (
+                    <EntrySubtitle>
+                      {joinParts(item.organization, item.location)}
+                    </EntrySubtitle>
+                  )}
+                </div>
+                {(item.startDate || item.endDate) && (
+                  <EntryMeta>
+                    <DateRange
+                      startDate={item.startDate}
+                      endDate={item.endDate}
+                    />
+                  </EntryMeta>
+                )}
+              </EntryHeader>
+              {item.summary && <EntrySummary>{item.summary}</EntrySummary>}
+              {renderHighlights(item.highlights)}
+            </Entry>
+          ))}
+        </SectionBlock>
+      )}
+
+      {awards?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Awards</SectionHeading>
+          {awards.map((award, index) => (
+            <Entry key={index}>
+              <EntryHeader>
+                <div>
+                  {award.title && <EntryTitle>{award.title}</EntryTitle>}
+                  {award.awarder && (
+                    <EntrySubtitle>Issued by {award.awarder}</EntrySubtitle>
+                  )}
+                </div>
+                {award.date && <EntryMeta>{award.date}</EntryMeta>}
+              </EntryHeader>
+              {award.summary && <EntrySummary>{award.summary}</EntrySummary>}
+            </Entry>
+          ))}
+        </SectionBlock>
+      )}
+
+      {certificates?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Certifications</SectionHeading>
+          {certificates.map((cert, index) => (
+            <Entry key={index}>
+              <EntryHeader>
+                <div>
+                  {cert.name && <EntryTitle>{cert.name}</EntryTitle>}
+                  {cert.issuer && (
+                    <EntrySubtitle>Issued by {cert.issuer}</EntrySubtitle>
+                  )}
+                </div>
+                {cert.date && <EntryMeta>{cert.date}</EntryMeta>}
+              </EntryHeader>
+              {cert.summary && <EntrySummary>{cert.summary}</EntrySummary>}
+              {cert.url && (
+                <KeywordList>
+                  <Anchor href={cert.url}>{cert.url}</Anchor>
+                </KeywordList>
+              )}
+            </Entry>
+          ))}
+        </SectionBlock>
+      )}
+
+      {publications?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Publications</SectionHeading>
+          {publications.map((pub, index) => (
+            <Entry key={index}>
+              <EntryHeader>
+                <div>
+                  {pub.name && <EntryTitle>{pub.name}</EntryTitle>}
+                  {(pub.publisher || pub.url) && (
+                    <EntrySubtitle>
+                      {pub.publisher}
+                      {pub.publisher && pub.url ? ' • ' : ''}
+                      {pub.url && <Anchor href={pub.url}>{pub.url}</Anchor>}
+                    </EntrySubtitle>
+                  )}
+                </div>
+                {pub.releaseDate && <EntryMeta>{pub.releaseDate}</EntryMeta>}
+              </EntryHeader>
+              {pub.summary && <EntrySummary>{pub.summary}</EntrySummary>}
+            </Entry>
+          ))}
+        </SectionBlock>
+      )}
+
+      {languages?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Languages</SectionHeading>
+          <SkillGrid>
+            {languages.map((lang, index) => (
+              <SkillCard key={index}>
+                <SkillTitle>{lang.language}</SkillTitle>
+                {lang.fluency && <Pill>{lang.fluency}</Pill>}
+              </SkillCard>
+            ))}
+          </SkillGrid>
+        </SectionBlock>
+      )}
+
+      {interests?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>Interests</SectionHeading>
+          <SkillGrid>
+            {interests.map((interest, index) => (
+              <SkillCard key={index}>
+                <SkillTitle>{interest.name}</SkillTitle>
+                {interest.keywords?.length > 0 && (
+                  <KeywordList>{interest.keywords.join(' • ')}</KeywordList>
+                )}
+              </SkillCard>
+            ))}
+          </SkillGrid>
+        </SectionBlock>
+      )}
+
+      {references?.length > 0 && (
+        <SectionBlock>
+          <SectionHeading>References</SectionHeading>
+          {references.map((ref, index) => (
+            <Entry key={index}>
+              {ref.name && <EntryTitle>{ref.name}</EntryTitle>}
+              {ref.reference && <EntrySummary>{ref.reference}</EntrySummary>}
+            </Entry>
+          ))}
+        </SectionBlock>
+      )}
+    </Layout>
+  );
+}
+
+export default Resume;

package/src/index.js

@@ -0,0 +1,54 @@
+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">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${resume.basics?.name || 'Resume'} - Resume</title>
+  <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=Nunito:wght@300;400;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  ${styles}
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      background: #fdf7f2;
+      color: #1f2933;
+    }
+    @media print {
+      body {
+        background: white;
+      }
+      @page {
+        margin: 0.5in;
+      }
+    }
+  </style>
+</head>
+<body>
+  ${html}
+</body>
+</html>`;
+  } finally {
+    sheet.seal();
+  }
+}
+
+export { Resume };

package/src/styles.js

@@ -0,0 +1,244 @@
+import styled from 'styled-components';
+import { Section, SectionTitle, ContactInfo } from '@resume/core';
+
+const ACCENT = '#d97706';
+
+export const Layout = styled.div`
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 64px 72px;
+  background: #fefbf5;
+  color: #3f2f25;
+  font-family: 'Nunito', 'Inter', 'Segoe UI', sans-serif;
+  line-height: 1.7;
+  border-radius: 20px;
+  box-shadow: 0 32px 60px rgba(149, 108, 57, 0.12);
+  border: 1px solid rgba(217, 119, 6, 0.16);
+
+  @media (max-width: 720px) {
+    padding: 48px 28px;
+  }
+
+  @media print {
+    padding: 40px 48px;
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+    background: white;
+  }
+`;
+
+export const Header = styled.header`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 40px;
+  padding-bottom: 28px;
+  border-bottom: 1px solid rgba(217, 119, 6, 0.25);
+`;
+
+export const Name = styled.h1`
+  font-size: 38px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: #92400e;
+  margin: 0;
+`;
+
+export const Label = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: #b45309;
+`;
+
+export const StyledContactInfo = styled(ContactInfo)`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 24px;
+  font-size: 13px;
+  color: #6f5d4e;
+
+  a {
+    color: #b45309;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-color 0.2s ease;
+
+    &:hover {
+      border-color: rgba(217, 119, 6, 0.5);
+    }
+  }
+`;
+
+export const Summary = styled.p`
+  margin: 0;
+  padding: 18px 22px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(217, 119, 6, 0.12);
+  color: #4f3d31;
+  font-size: 15px;
+  line-height: 1.8;
+`;
+
+export const SectionBlock = styled(Section)`
+  margin-bottom: 36px;
+  padding-top: 24px;
+  border-top: 1px solid rgba(217, 119, 6, 0.18);
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+
+export const SectionHeading = styled(SectionTitle)`
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: #b45309;
+  margin: 0 0 20px 0;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 2px;
+    background: currentColor;
+    opacity: 0.4;
+  }
+`;
+
+export const Entry = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export const EntryHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+
+  @media (max-width: 640px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+`;
+
+export const EntryTitle = styled.h3`
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  color: #4a3326;
+  letter-spacing: 0.01em;
+`;
+
+export const EntrySubtitle = styled.div`
+  font-size: 14px;
+  color: #7c6a58;
+`;
+
+export const EntryMeta = styled.div`
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #b45309;
+  white-space: nowrap;
+`;
+
+export const EntrySummary = styled.p`
+  margin: 0;
+  color: #4f3d31;
+  line-height: 1.75;
+  font-size: 14px;
+`;
+
+export const BulletList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 8px;
+
+  li {
+    position: relative;
+    padding-left: 18px;
+    color: #4f3d31;
+    font-size: 14px;
+    line-height: 1.7;
+  }
+
+  li::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 10px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: ${ACCENT};
+    opacity: 0.6;
+  }
+`;
+
+export const SkillGrid = styled.div`
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+`;
+
+export const SkillCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const SkillTitle = styled.div`
+  font-size: 15px;
+  font-weight: 600;
+  color: #4a3326;
+`;
+
+export const KeywordList = styled.div`
+  font-size: 13px;
+  color: #6f5d4e;
+`;
+
+export const Pill = styled.span`
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(217, 119, 6, 0.14);
+  color: #8a4d0f;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+`;
+
+export const Anchor = styled.a`
+  color: #b45309;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(217, 119, 6, 0.3);
+  transition: border-color 0.2s ease;
+
+  &:hover {
+    border-color: rgba(217, 119, 6, 0.6);
+  }
+`;