npm - @jsonresume/jsonresume-theme-creative-studio - Versions diffs - 1.0.0 - Mend

@jsonresume/jsonresume-theme-creative-studio 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,73 @@
+# Creative Studio - JSON Resume Theme
+**Artistic yet professional** resume theme inspired by Behance portfolios. Features clean typography, soft gradient section headers, and creative energy restrained just enough for corporate use while maintaining ATS compatibility.
+## Features
+- **Rounded Sans-Serif Typography**: Uses Nunito and Poppins for a friendly, modern look
+- **Warm Coral Accent**: Signature #ff6363 color for headers, links, and highlights
+- **Soft Background Blocks**: Light #fff5f5 sections create subtle visual hierarchy
+- **Generous Line Height**: 1.9 line-height for excellent readability
+- **Gradient Hero Section**: Soft gradient background in the header for visual interest
+- **Tag-Style Keywords**: Rounded pill-shaped tags for skills, projects, and interests
+- **Professional Layout**: Single column, 800px max-width, optimized for printing
+## Design Philosophy
+Creative Studio strikes the perfect balance between artistic flair and professional presentation. It's designed for creative professionals who want to showcase their personality without sacrificing ATS compatibility or corporate acceptance.
+## Color Palette
+- **Accent**: #ff6363 (warm coral) - headers, links, tags
+- **Background**: #fff5f5 (soft pink) - section backgrounds
+- **Text**: #333 (dark gray) - primary text
+- **Secondary**: #555, #666, #999 - hierarchical text levels
+## Typography
+- **Headings**: Poppins (weights: 400, 600, 700)
+- **Body**: Nunito (weights: 400, 600, 700)
+- **Line Height**: 1.9 for exceptional readability
+## Installation
+```bash
+npm install @jsonresume/jsonresume-theme-creative-studio
+```
+## Usage
+### With resume-cli
+```bash
+resume export resume.html --theme creative-studio
+```
+### Programmatically
+```javascript
+const { render } = require('@jsonresume/jsonresume-theme-creative-studio');
+const resume = require('./resume.json');
+const html = render(resume);
+```
+## Sections Supported
+- ✅ Basics (name, label, contact, profiles)
+- ✅ Summary
+- ✅ Work Experience
+- ✅ Projects (with keyword tags)
+- ✅ Education
+- ✅ Certificates
+- ✅ Publications
+- ✅ Awards
+- ✅ Volunteer
+- ✅ Languages
+- ✅ Skills (with keyword tags)
+- ✅ Interests (with keyword tags)
+- ✅ References
+## License
+MIT

package/package.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "private": false,
+  "name": "@jsonresume/jsonresume-theme-creative-studio",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "license": "MIT",
+  "description": "Creative Studio theme - artistic yet professional with warm coral accents and rounded typography",
+  "devDependencies": {
+    "react": "^18",
+    "styled-components": "^6",
+    "@repo/eslint-config-custom": "^0.0.0"
+  },
+  "peerDependencies": {
+    "styled-components": "^6"
+  },
+  "dependencies": {
+    "marked": "^16.3.0",
+    "prismjs": "^1.29.0",
+    "react-icons": "^5.0.1"
+  },
+  "scripts": {
+    "lint": "eslint ."
+  }
+}

package/src/index.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { renderToString } from 'react-dom/server';
+import { ServerStyleSheet } from 'styled-components';
+import Resume from './ui/Resume';
+export const render = (resume) => {
+  const sheet = new ServerStyleSheet();
+  const html = renderToString(sheet.collectStyles(<Resume resume={resume} />));
+  const styles = sheet.getStyleTags();
+  return `<!DOCTYPE html><head>
+  <title>${resume.basics.name} - Resume</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <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@400;600;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+  <style>
+    html {
+      font-family: 'Nunito', 'Poppins', sans-serif;
+      background: #fff;
+      font-size: 16px;
+      color: #333;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    h1, h2, h3, h4, h5, h6 {
+      font-family: 'Poppins', sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+    h2 {
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: #ff6363;
+      margin-bottom: 1rem;
+    }
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #333;
+    }
+    p {
+      padding: 0;
+      margin: 0;
+      line-height: 1.9;
+    }
+    p, li {
+      font-size: 1rem;
+      line-height: 1.9;
+    }
+    a {
+      color: #ff6363;
+      text-decoration: none;
+      transition: color 0.2s ease;
+    }
+    a:hover {
+      color: #ff4545;
+    }
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+  </style>
+  ${styles}</head><body>${html}</body></html>`;
+};
+export { Resume };

package/src/ui/Awards.js ADDED Viewed

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import Section from './Section';
+import Date from './Date';
+const AwardItem = styled.div`
+  margin-bottom: 1.5rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const AwardTitle = styled.h3`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.25rem;
+`;
+const Awarder = styled.p`
+  color: #ff6363;
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.25rem;
+`;
+const AwardDate = styled.p`
+  color: #999;
+  font-size: 0.9rem;
+  font-style: italic;
+`;
+const Summary = styled.p`
+  margin-top: 0.5rem;
+  color: #555;
+`;
+const Awards = ({ awards }) => {
+  if (!awards || awards.length === 0) return null;
+  return (
+    <Section title="Awards">
+      {awards.map((award, i) => (
+        <AwardItem key={i}>
+          <AwardTitle>{award.title}</AwardTitle>
+          {award.awarder && <Awarder>{award.awarder}</Awarder>}
+          {award.date && (
+            <AwardDate>
+              <Date date={award.date} />
+            </AwardDate>
+          )}
+          {award.summary && <Summary>{award.summary}</Summary>}
+        </AwardItem>
+      ))}
+    </Section>
+  );
+};
+export default Awards;

package/src/ui/Certificates.js ADDED Viewed

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import Section from './Section';
+import Date from './Date';
+const CertItem = styled.div`
+  margin-bottom: 1.5rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const CertName = styled.h3`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.25rem;
+`;
+const Issuer = styled.p`
+  color: #ff6363;
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.25rem;
+`;
+const CertDate = styled.p`
+  color: #999;
+  font-size: 0.9rem;
+  font-style: italic;
+`;
+const CertLink = styled.a`
+  display: inline-block;
+  margin-top: 0.5rem;
+  color: #ff6363;
+  font-weight: 600;
+  font-size: 0.9rem;
+`;
+const Certificates = ({ certificates }) => {
+  if (!certificates || certificates.length === 0) return null;
+  return (
+    <Section title="Certificates">
+      {certificates.map((cert, i) => (
+        <CertItem key={i}>
+          <CertName>{cert.name}</CertName>
+          {cert.issuer && <Issuer>{cert.issuer}</Issuer>}
+          {cert.date && (
+            <CertDate>
+              <Date date={cert.date} />
+            </CertDate>
+          )}
+          {cert.url && (
+            <CertLink href={cert.url} target="_blank" rel="noopener noreferrer">
+              View Certificate →
+            </CertLink>
+          )}
+        </CertItem>
+      ))}
+    </Section>
+  );
+};
+export default Certificates;

package/src/ui/Date.js ADDED Viewed

@@ -0,0 +1,11 @@
+const Date = ({ date }) => {
+  if (!date) return null;
+  const dateObj = new window.Date(date);
+  const month = dateObj.toLocaleString('default', { month: 'short' });
+  const year = dateObj.getFullYear();
+  return `${month} ${year}`;
+};
+export default Date;

package/src/ui/DateRange.js ADDED Viewed

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import Date from './Date';
+const DateRangeText = styled.p`
+  color: #999;
+  font-size: 0.95rem;
+  font-style: italic;
+`;
+const DateRange = ({ startDate, endDate }) => {
+  if (!startDate) return null;
+  return (
+    <DateRangeText>
+      <Date date={startDate} /> -{' '}
+      {endDate ? <Date date={endDate} /> : 'Present'}
+    </DateRangeText>
+  );
+};
+export default DateRange;

package/src/ui/Education.js ADDED Viewed

@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+import Section from './Section';
+import DateRange from './DateRange';
+const EducationItem = styled.div`
+  margin-bottom: 2rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const Degree = styled.h3`
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.25rem;
+`;
+const Institution = styled.p`
+  font-size: 1.1rem;
+  color: #ff6363;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+`;
+const Area = styled.p`
+  color: #666;
+  margin-top: 0.25rem;
+`;
+const Courses = styled.ul`
+  margin-top: 0.75rem;
+  padding-left: 1.5rem;
+  list-style: disc;
+  li {
+    color: #555;
+    margin-bottom: 0.5rem;
+  }
+`;
+const Education = ({ education }) => {
+  if (!education || education.length === 0) return null;
+  return (
+    <Section title="Education">
+      {education.map((item, i) => (
+        <EducationItem key={i}>
+          <Degree>
+            {item.studyType} {item.area && `in ${item.area}`}
+          </Degree>
+          <Institution>{item.institution}</Institution>
+          <DateRange startDate={item.startDate} endDate={item.endDate} />
+          {item.score && <Area>GPA: {item.score}</Area>}
+          {item.courses && item.courses.length > 0 && (
+            <Courses>
+              {item.courses.map((course, j) => (
+                <li key={j}>{course}</li>
+              ))}
+            </Courses>
+          )}
+        </EducationItem>
+      ))}
+    </Section>
+  );
+};
+export default Education;

package/src/ui/Hero.js ADDED Viewed

@@ -0,0 +1,115 @@
+import styled from 'styled-components';
+import { FaEnvelope, FaPhone, FaGlobe, FaMapMarkerAlt } from 'react-icons/fa';
+const HeroContainer = styled.div`
+  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
+  padding: 40px;
+  border-radius: 12px;
+  margin-bottom: 40px;
+  text-align: center;
+`;
+const Name = styled.h1`
+  font-size: 3rem;
+  font-weight: 700;
+  color: #333;
+  margin-bottom: 0.5rem;
+  line-height: 1.2;
+`;
+const Label = styled.p`
+  font-size: 1.25rem;
+  color: #ff6363;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+`;
+const ContactInfo = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 20px;
+`;
+const ContactItem = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+  font-size: 0.95rem;
+  svg {
+    color: #ff6363;
+  }
+`;
+const Profiles = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 20px;
+`;
+const ProfileLink = styled.a`
+  color: #ff6363;
+  font-weight: 600;
+  font-size: 0.95rem;
+`;
+const Hero = ({ basics }) => {
+  if (!basics) return null;
+  return (
+    <HeroContainer>
+      <Name>{basics.name}</Name>
+      {basics.label && <Label>{basics.label}</Label>}
+      <ContactInfo>
+        {basics.email && (
+          <ContactItem href={`mailto:${basics.email}`}>
+            <FaEnvelope /> {basics.email}
+          </ContactItem>
+        )}
+        {basics.phone && (
+          <ContactItem href={`tel:${basics.phone}`}>
+            <FaPhone /> {basics.phone}
+          </ContactItem>
+        )}
+        {basics.url && (
+          <ContactItem
+            href={basics.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaGlobe /> {basics.url.replace(/^https?:\/\//, '')}
+          </ContactItem>
+        )}
+        {basics.location?.city && (
+          <ContactItem as="span">
+            <FaMapMarkerAlt /> {basics.location.city}
+            {basics.location.region && `, ${basics.location.region}`}
+          </ContactItem>
+        )}
+      </ContactInfo>
+      {basics.profiles && basics.profiles.length > 0 && (
+        <Profiles>
+          {basics.profiles.map((profile, i) => (
+            <ProfileLink
+              key={i}
+              href={profile.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {profile.network}
+            </ProfileLink>
+          ))}
+        </Profiles>
+      )}
+    </HeroContainer>
+  );
+};
+export default Hero;

package/src/ui/Interests.js ADDED Viewed

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+import Section from './Section';
+const InterestList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+`;
+const InterestItem = styled.div`
+  background: #ffe8e8;
+  padding: 15px 20px;
+  border-radius: 20px;
+`;
+const InterestName = styled.h3`
+  font-size: 1rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+`;
+const Keywords = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+`;
+const Keyword = styled.span`
+  background: #fff;
+  color: #ff6363;
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 0.85rem;
+`;
+const Interests = ({ interests }) => {
+  if (!interests || interests.length === 0) return null;
+  return (
+    <Section title="Interests">
+      <InterestList>
+        {interests.map((interest, i) => (
+          <InterestItem key={i}>
+            <InterestName>{interest.name}</InterestName>
+            {interest.keywords && interest.keywords.length > 0 && (
+              <Keywords>
+                {interest.keywords.map((keyword, j) => (
+                  <Keyword key={j}>{keyword}</Keyword>
+                ))}
+              </Keywords>
+            )}
+          </InterestItem>
+        ))}
+      </InterestList>
+    </Section>
+  );
+};
+export default Interests;

package/src/ui/Languages.js ADDED Viewed

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import Section from './Section';
+const LanguageList = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+`;
+const LanguageItem = styled.div`
+  background: #ffe8e8;
+  padding: 15px;
+  border-radius: 8px;
+`;
+const LanguageName = styled.h3`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.25rem;
+`;
+const Fluency = styled.p`
+  color: #ff6363;
+  font-weight: 600;
+  font-size: 0.9rem;
+`;
+const Languages = ({ languages }) => {
+  if (!languages || languages.length === 0) return null;
+  return (
+    <Section title="Languages">
+      <LanguageList>
+        {languages.map((lang, i) => (
+          <LanguageItem key={i}>
+            <LanguageName>{lang.language}</LanguageName>
+            {lang.fluency && <Fluency>{lang.fluency}</Fluency>}
+          </LanguageItem>
+        ))}
+      </LanguageList>
+    </Section>
+  );
+};
+export default Languages;

package/src/ui/Projects.js ADDED Viewed

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+import Section from './Section';
+import DateRange from './DateRange';
+const ProjectItem = styled.div`
+  margin-bottom: 2rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const ProjectName = styled.h3`
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.25rem;
+`;
+const ProjectLink = styled.a`
+  color: #ff6363;
+  font-weight: 600;
+  margin-left: 0.5rem;
+  font-size: 0.95rem;
+`;
+const Description = styled.p`
+  margin-top: 0.75rem;
+  color: #555;
+`;
+const Keywords = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 0.75rem;
+`;
+const Keyword = styled.span`
+  background: #ffe8e8;
+  color: #ff6363;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 0.85rem;
+  font-weight: 600;
+`;
+const Projects = ({ projects }) => {
+  if (!projects || projects.length === 0) return null;
+  return (
+    <Section title="Projects">
+      {projects.map((project, i) => (
+        <ProjectItem key={i}>
+          <ProjectName>
+            {project.name}
+            {project.url && (
+              <ProjectLink
+                href={project.url}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                View Project →
+              </ProjectLink>
+            )}
+          </ProjectName>
+          <DateRange startDate={project.startDate} endDate={project.endDate} />
+          {project.description && (
+            <Description>{project.description}</Description>
+          )}
+          {project.keywords && project.keywords.length > 0 && (
+            <Keywords>
+              {project.keywords.map((keyword, j) => (
+                <Keyword key={j}>{keyword}</Keyword>
+              ))}
+            </Keywords>
+          )}
+        </ProjectItem>
+      ))}
+    </Section>
+  );
+};
+export default Projects;

package/src/ui/Publications.js ADDED Viewed

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import Section from './Section';
+import Date from './Date';
+const PubItem = styled.div`
+  margin-bottom: 1.5rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const PubName = styled.h3`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.25rem;
+`;
+const Publisher = styled.p`
+  color: #ff6363;
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.25rem;
+`;
+const PubDate = styled.p`
+  color: #999;
+  font-size: 0.9rem;
+  font-style: italic;
+`;
+const Summary = styled.p`
+  margin-top: 0.5rem;
+  color: #555;
+`;
+const PubLink = styled.a`
+  display: inline-block;
+  margin-top: 0.5rem;
+  color: #ff6363;
+  font-weight: 600;
+  font-size: 0.9rem;
+`;
+const Publications = ({ publications }) => {
+  if (!publications || publications.length === 0) return null;
+  return (
+    <Section title="Publications">
+      {publications.map((pub, i) => (
+        <PubItem key={i}>
+          <PubName>{pub.name}</PubName>
+          {pub.publisher && <Publisher>{pub.publisher}</Publisher>}
+          {pub.releaseDate && (
+            <PubDate>
+              <Date date={pub.releaseDate} />
+            </PubDate>
+          )}
+          {pub.summary && <Summary>{pub.summary}</Summary>}
+          {pub.url && (
+            <PubLink href={pub.url} target="_blank" rel="noopener noreferrer">
+              Read Publication →
+            </PubLink>
+          )}
+        </PubItem>
+      ))}
+    </Section>
+  );
+};
+export default Publications;

package/src/ui/References.js ADDED Viewed

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import Section from './Section';
+const ReferenceItem = styled.div`
+  margin-bottom: 1.5rem;
+  background: #ffe8e8;
+  padding: 20px;
+  border-radius: 8px;
+  border-left: 4px solid #ff6363;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const RefName = styled.h3`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+`;
+const Quote = styled.p`
+  color: #555;
+  font-style: italic;
+  line-height: 1.9;
+`;
+const References = ({ references }) => {
+  if (!references || references.length === 0) return null;
+  return (
+    <Section title="References">
+      {references.map((ref, i) => (
+        <ReferenceItem key={i}>
+          <RefName>{ref.name}</RefName>
+          {ref.reference && <Quote>"{ref.reference}"</Quote>}
+        </ReferenceItem>
+      ))}
+    </Section>
+  );
+};
+export default References;

package/src/ui/Resume.js ADDED Viewed

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import Projects from './Projects';
+import Hero from './Hero';
+import Summary from './Summary';
+import Education from './Education';
+import Work from './Work';
+import Certificates from './Certificates';
+import Publications from './Publications';
+import Awards from './Awards';
+import Skills from './Skills';
+import Interests from './Interests';
+import Languages from './Languages';
+import References from './References';
+import Volunteer from './Volunteer';
+const Layout = styled.div`
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  line-height: 1.9;
+`;
+const Resume = ({ resume }) => {
+  return (
+    <Layout>
+      <Hero basics={resume.basics} />
+      <Summary basics={resume.basics} />
+      <Work work={resume.work} />
+      <Projects projects={resume.projects} />
+      <Education education={resume.education} />
+      <Certificates certificates={resume.certificates} />
+      <Publications publications={resume.publications} />
+      <Awards awards={resume.awards} />
+      <Volunteer volunteer={resume.volunteer} />
+      <Languages languages={resume.languages} />
+      <Skills skills={resume.skills} />
+      <Interests interests={resume.interests} />
+      <References references={resume.references} />
+    </Layout>
+  );
+};
+export default Resume;

package/src/ui/Section.js ADDED Viewed

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+const SectionContainer = styled.section`
+  background: #fff5f5;
+  padding: 30px;
+  border-radius: 12px;
+  margin-bottom: 30px;
+`;
+const SectionTitle = styled.h2`
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #ff6363;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid #ff6363;
+`;
+const Section = ({ title, children }) => {
+  if (!children) return null;
+  return (
+    <SectionContainer>
+      <SectionTitle>{title}</SectionTitle>
+      {children}
+    </SectionContainer>
+  );
+};
+export default Section;

package/src/ui/Skills.js ADDED Viewed

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import Section from './Section';
+const SkillCategory = styled.div`
+  margin-bottom: 1.5rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const SkillName = styled.h3`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+`;
+const SkillList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+const SkillItem = styled.span`
+  background: #ffe8e8;
+  color: #ff6363;
+  padding: 6px 14px;
+  border-radius: 16px;
+  font-size: 0.9rem;
+  font-weight: 600;
+`;
+const Skills = ({ skills }) => {
+  if (!skills || skills.length === 0) return null;
+  return (
+    <Section title="Skills">
+      {skills.map((skill, i) => (
+        <SkillCategory key={i}>
+          <SkillName>{skill.name}</SkillName>
+          {skill.keywords && skill.keywords.length > 0 && (
+            <SkillList>
+              {skill.keywords.map((keyword, j) => (
+                <SkillItem key={j}>{keyword}</SkillItem>
+              ))}
+            </SkillList>
+          )}
+        </SkillCategory>
+      ))}
+    </Section>
+  );
+};
+export default Skills;

package/src/ui/Summary.js ADDED Viewed

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import Section from './Section';
+const SummaryText = styled.p`
+  font-size: 1.1rem;
+  line-height: 1.9;
+  color: #555;
+`;
+const Summary = ({ basics }) => {
+  if (!basics?.summary) return null;
+  return (
+    <Section title="About">
+      <SummaryText>{basics.summary}</SummaryText>
+    </Section>
+  );
+};
+export default Summary;

package/src/ui/Volunteer.js ADDED Viewed

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import Section from './Section';
+import DateRange from './DateRange';
+const VolunteerItem = styled.div`
+  margin-bottom: 2rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const Position = styled.h3`
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.25rem;
+`;
+const Organization = styled.p`
+  font-size: 1.1rem;
+  color: #ff6363;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+`;
+const Description = styled.p`
+  margin-top: 0.75rem;
+  color: #555;
+`;
+const Volunteer = ({ volunteer }) => {
+  if (!volunteer || volunteer.length === 0) return null;
+  return (
+    <Section title="Volunteer">
+      {volunteer.map((item, i) => (
+        <VolunteerItem key={i}>
+          <Position>{item.position}</Position>
+          <Organization>{item.organization}</Organization>
+          <DateRange startDate={item.startDate} endDate={item.endDate} />
+          {item.summary && <Description>{item.summary}</Description>}
+        </VolunteerItem>
+      ))}
+    </Section>
+  );
+};
+export default Volunteer;

package/src/ui/Work.js ADDED Viewed

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+import Section from './Section';
+import DateRange from './DateRange';
+const WorkItem = styled.div`
+  margin-bottom: 2rem;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const Position = styled.h3`
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.25rem;
+`;
+const Company = styled.p`
+  font-size: 1.1rem;
+  color: #ff6363;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+`;
+const Description = styled.p`
+  margin-top: 0.75rem;
+  color: #555;
+`;
+const Highlights = styled.ul`
+  margin-top: 0.75rem;
+  padding-left: 1.5rem;
+  list-style: disc;
+  li {
+    color: #555;
+    margin-bottom: 0.5rem;
+  }
+`;
+const Work = ({ work }) => {
+  if (!work || work.length === 0) return null;
+  return (
+    <Section title="Experience">
+      {work.map((item, i) => (
+        <WorkItem key={i}>
+          <Position>{item.position}</Position>
+          <Company>{item.name}</Company>
+          <DateRange startDate={item.startDate} endDate={item.endDate} />
+          {item.summary && <Description>{item.summary}</Description>}
+          {item.highlights && item.highlights.length > 0 && (
+            <Highlights>
+              {item.highlights.map((highlight, j) => (
+                <li key={j}>{highlight}</li>
+              ))}
+            </Highlights>
+          )}
+        </WorkItem>
+      ))}
+    </Section>
+  );
+};
+export default Work;