@jsonresume/jsonresume-theme-tokyo-modernist 1.0.0

package/.eslintrc.js

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+module.exports = {
+  root: true,
+  extends: ['@repo/eslint-config-custom'],
+  parser: '@typescript-eslint/parser',
+  rules: {},
+};

package/README.md

@@ -0,0 +1,92 @@
+# Tokyo Modernist Resume Theme
+
+A minimal futuristic JSON Resume theme combining geometric precision with expressive typography. Built on an 8pt grid system with clean lines, strong hierarchies, and restrained asymmetry.
+
+## Design Philosophy
+
+Tokyo Modernist balances creative tech sensibility with cultural precision. It looks at home in design studios and modern engineering firms alike, featuring:
+
+- **Typography**: Outfit variable-width geometric sans serif
+- **Color**: Deep magenta (#c71585) accents with subtle gray subheaders
+- **Layout**: Vertical rhythm built on 8pt grid with tighter line spacing
+- **Style**: Minimal futurism meets typographic focus
+
+## Key Features
+
+- **Geometric Precision**: 8px grid-based spacing for perfect alignment
+- **Bold Typography**: Strong uppercase headings with negative letter-spacing
+- **Asymmetric Elements**: Strategic use of geometric shapes and gradients
+- **Minimal Color**: Restrained use of deep magenta for maximum impact
+- **Clean Hierarchy**: Clear visual distinction between heading levels
+- **Print-Optimized**: Designed to look great on screen and paper
+
+## Design Details
+
+### Typography Scale
+- **Name**: 56px, 800 weight, uppercase, -2px letter-spacing
+- **Section Titles**: 32px, 800 weight, uppercase, -1px letter-spacing
+- **Position**: 22px, 700 weight
+- **Company**: 18px, 600 weight, magenta color
+- **Body**: 16-17px, 1.7 line height
+
+### Color Palette
+- **Primary Text**: #1a1d23 (near-black)
+- **Accent**: #c71585 (deep magenta)
+- **Subheader**: #6b7280 (gray)
+- **Body Text**: #4b5563 (medium gray)
+- **Meta Text**: #9ca3af (light gray)
+- **Background**: #fafbfc (off-white)
+
+### Geometric Elements
+- **8pt Grid**: All spacing in multiples of 8px (8, 16, 24, 32, 40, 48, 56)
+- **Triangular Accents**: Clipped diagonal gradients in corners
+- **Diamond Bullets**: Custom bullet points using clip-path
+- **Gradient Bars**: Vertical gradient stripes in skill cards
+- **Hover Effects**: Subtle color transitions and shadow reveals
+
+## Usage
+
+Install the theme:
+
+```bash
+npm install @jsonresume/jsonresume-theme-tokyo-modernist
+```
+
+Use with JSON Resume CLI:
+
+```bash
+resume export resume.html --theme tokyo-modernist
+```
+
+Or specify in your resume.json:
+
+```json
+{
+  "meta": {
+    "theme": "tokyo-modernist"
+  }
+}
+```
+
+## Components Used
+
+This theme leverages the @resume/core component library:
+
+- **Section**: Semantic section wrapper
+- **SectionTitle**: Heading component
+- **DateRange**: Formatted date ranges with localization
+- **ContactInfo**: Email, phone, location, profiles
+
+## Browser Support
+
+- Modern evergreen browsers (Chrome, Firefox, Safari, Edge)
+- Print-optimized for PDF generation
+- Responsive design for mobile viewing
+
+## License
+
+MIT
+
+## Credits
+
+Created for jsonresume.org - the open source initiative to create a JSON-based standard for resumes.

package/package.json

@@ -0,0 +1,35 @@
+{
+  "private": false,
+  "name": "@jsonresume/jsonresume-theme-tokyo-modernist",
+  "version": "1.0.0",
+  "main": "./src/index.js",
+  "license": "MIT",
+  "description": "Tokyo Modernist theme - Minimal futurism with geometric precision, built on 8pt grid with Outfit typography and deep magenta accents",
+  "keywords": [
+    "resume",
+    "json-resume",
+    "theme",
+    "modern",
+    "futuristic",
+    "geometric",
+    "minimalist",
+    "tokyo"
+  ],
+  "devDependencies": {
+    "react": "^19.2.0",
+    "styled-components": "^6.1.19",
+    "@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",
+    "@resume/core": "^0.1.0"
+  },
+  "scripts": {
+    "lint": "eslint src || exit 0"
+  }
+}

package/src/index.js

@@ -0,0 +1,90 @@
+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=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <style>
+    html {
+      font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #fafbfc;
+      font-size: 16px;
+      color: #1a1d23;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      font-family: 'Outfit', sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+
+    h2 {
+      font-size: 2rem;
+      font-weight: 800;
+      color: #1a1d23;
+      margin-bottom: 1rem;
+    }
+
+    h3 {
+      font-size: 1.375rem;
+      font-weight: 700;
+      color: #1a1d23;
+    }
+
+    p {
+      padding: 0;
+      margin: 0;
+      line-height: 1.7;
+    }
+
+    p, li {
+      font-size: 1rem;
+      line-height: 1.7;
+    }
+
+    a {
+      color: #c71585;
+      text-decoration: none;
+      transition: color 0.2s ease;
+    }
+
+    a:hover {
+      color: #a0115f;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    @media print {
+      html {
+        background: white;
+      }
+    }
+  </style>
+  ${styles}</head><body>${html}</body></html>`;
+};
+
+export { Resume };

package/src/ui/Resume.js

@@ -0,0 +1,248 @@
+import React from 'react';
+import { Section, DateRange } from '@resume/core';
+import {
+  Layout,
+  Header,
+  Name,
+  Label,
+  StyledContactInfo,
+  Summary,
+  StyledSectionTitle,
+  WorkItem,
+  WorkHeader,
+  Position,
+  Company,
+  DateText,
+  WorkSummary,
+  Highlights,
+  EducationItem,
+  Institution,
+  Degree,
+  EducationDate,
+  SkillsGrid,
+  SkillCategory,
+  SkillName,
+  SkillTags,
+  ProjectItem,
+} from './styles';
+
+// Tokyo Modernist Theme - Minimal futurism with typographic focus
+// Built on 8pt grid system with geometric precision
+// Outfit variable-width geometric sans from Google Fonts
+// Deep magenta accent (#c71585) with subtle gray subheaders
+// Strong headings, clean geometry, restrained asymmetry
+
+function Resume({ resume }) {
+  const {
+    basics = {},
+    work = [],
+    education = [],
+    skills = [],
+    projects = [],
+    volunteer = [],
+    awards = [],
+    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 && (
+        <Section>
+          <StyledSectionTitle>Experience</StyledSectionTitle>
+          {work.map((job, index) => (
+            <WorkItem key={index}>
+              <WorkHeader>
+                <div>
+                  <Position>{job.position}</Position>
+                  {job.name && <Company>{job.name}</Company>}
+                </div>
+                <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>
+              )}
+            </WorkItem>
+          ))}
+        </Section>
+      )}
+
+      {skills?.length > 0 && (
+        <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>
+      )}
+
+      {education?.length > 0 && (
+        <Section>
+          <StyledSectionTitle>Education</StyledSectionTitle>
+          {education.map((edu, index) => (
+            <EducationItem 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>
+            </EducationItem>
+          ))}
+        </Section>
+      )}
+
+      {projects?.length > 0 && (
+        <Section>
+          <StyledSectionTitle>Projects</StyledSectionTitle>
+          {projects.map((project, index) => (
+            <ProjectItem 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>
+              )}
+            </ProjectItem>
+          ))}
+        </Section>
+      )}
+
+      {volunteer?.length > 0 && (
+        <Section>
+          <StyledSectionTitle>Volunteer</StyledSectionTitle>
+          {volunteer.map((vol, index) => (
+            <WorkItem key={index}>
+              <WorkHeader>
+                <div>
+                  <Position>{vol.position}</Position>
+                  {vol.organization && <Company>{vol.organization}</Company>}
+                </div>
+                {(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>
+              )}
+            </WorkItem>
+          ))}
+        </Section>
+      )}
+
+      {awards?.length > 0 && (
+        <Section>
+          <StyledSectionTitle>Awards</StyledSectionTitle>
+          {awards.map((award, index) => (
+            <EducationItem 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>}
+            </EducationItem>
+          ))}
+        </Section>
+      )}
+
+      {publications?.length > 0 && (
+        <Section>
+          <StyledSectionTitle>Publications</StyledSectionTitle>
+          {publications.map((pub, index) => (
+            <EducationItem 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>}
+            </EducationItem>
+          ))}
+        </Section>
+      )}
+
+      {languages?.length > 0 && (
+        <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>
+      )}
+
+      {interests?.length > 0 && (
+        <Section>
+          <StyledSectionTitle>Interests</StyledSectionTitle>
+          <SkillsGrid>
+            {interests.map((interest, index) => (
+              <SkillCategory key={index}>
+                <SkillName>{interest.name}</SkillName>
+                {interest.keywords?.length > 0 && (
+                  <SkillTags>{interest.keywords.join(' • ')}</SkillTags>
+                )}
+              </SkillCategory>
+            ))}
+          </SkillsGrid>
+        </Section>
+      )}
+
+      {references?.length > 0 && (
+        <Section>
+          <StyledSectionTitle>References</StyledSectionTitle>
+          {references.map((ref, index) => (
+            <EducationItem key={index}>
+              <Institution>{ref.name}</Institution>
+              {ref.reference && <WorkSummary>{ref.reference}</WorkSummary>}
+            </EducationItem>
+          ))}
+        </Section>
+      )}
+    </Layout>
+  );
+}
+
+export default Resume;

package/src/ui/styles.js

@@ -0,0 +1,323 @@
+import styled from 'styled-components';
+import { SectionTitle, ContactInfo } from '@resume/core';
+
+export const Layout = styled.div`
+  max-width: 840px;
+  margin: 0 auto;
+  padding: 48px 40px;
+  background: #fafbfc;
+  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  color: #1a1d23;
+  line-height: 1.6;
+
+  @media print {
+    padding: 40px;
+    background: white;
+  }
+`;
+
+export const Header = styled.header`
+  margin-bottom: 56px;
+  padding: 40px;
+  background: linear-gradient(
+    135deg,
+    rgba(199, 21, 133, 0.03) 0%,
+    rgba(199, 21, 133, 0.01) 100%
+  );
+  border-left: 8px solid #c71585;
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 120px;
+    height: 120px;
+    background: linear-gradient(135deg, transparent 50%, #c71585 50%);
+    opacity: 0.08;
+    clip-path: polygon(100% 0, 100% 100%, 0 0);
+  }
+`;
+
+export const Name = styled.h1`
+  font-size: 56px;
+  font-weight: 800;
+  color: #1a1d23;
+  margin: 0 0 8px 0;
+  letter-spacing: -2px;
+  line-height: 1.1;
+  text-transform: uppercase;
+  font-variation-settings: 'wght' 800;
+`;
+
+export const Label = styled.div`
+  font-size: 20px;
+  color: #6b7280;
+  margin-bottom: 24px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-size: 14px;
+`;
+
+export const StyledContactInfo = styled(ContactInfo)`
+  font-size: 15px;
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+
+  a {
+    font-size: 15px;
+    color: #c71585;
+    text-decoration: none;
+    font-weight: 600;
+    position: relative;
+    padding-bottom: 2px;
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: #c71585;
+      transition: width 0.3s ease;
+    }
+
+    &:hover:after {
+      width: 100%;
+    }
+  }
+`;
+
+export const Summary = styled.p`
+  font-size: 17px;
+  line-height: 1.7;
+  color: #4b5563;
+  margin: 24px 0 0 0;
+  max-width: 680px;
+`;
+
+export const StyledSectionTitle = styled(SectionTitle)`
+  font-size: 32px;
+  font-weight: 800;
+  color: #1a1d23;
+  margin: 48px 0 32px 0;
+  padding-bottom: 16px;
+  border-bottom: 3px solid #c71585;
+  position: relative;
+  text-transform: uppercase;
+  letter-spacing: -1px;
+  display: inline-block;
+  min-width: 280px;
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    right: -40px;
+    width: 32px;
+    height: 3px;
+    background: #e5e7eb;
+  }
+`;
+
+export const WorkItem = styled.div`
+  margin-bottom: 40px;
+  padding: 32px;
+  background: white;
+  border-left: 4px solid #e5e7eb;
+  position: relative;
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-left-color: #c71585;
+    box-shadow: -4px 0 0 0 rgba(199, 21, 133, 0.1);
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 32px;
+    left: -8px;
+    width: 8px;
+    height: 8px;
+    background: #c71585;
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export const WorkHeader = styled.div`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: start;
+  margin-bottom: 16px;
+  gap: 24px;
+
+  @media (max-width: 640px) {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+`;
+
+export const Position = styled.h3`
+  font-size: 22px;
+  font-weight: 700;
+  color: #1a1d23;
+  margin: 0;
+  letter-spacing: -0.5px;
+`;
+
+export const Company = styled.div`
+  font-size: 18px;
+  color: #c71585;
+  font-weight: 600;
+  margin-top: 4px;
+  letter-spacing: 0.2px;
+`;
+
+export const DateText = styled.div`
+  font-size: 13px;
+  color: #9ca3af;
+  font-weight: 600;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-align: right;
+
+  @media (max-width: 640px) {
+    text-align: left;
+  }
+`;
+
+export const WorkSummary = styled.p`
+  margin: 16px 0;
+  color: #4b5563;
+  line-height: 1.7;
+  font-size: 16px;
+`;
+
+export const Highlights = styled.ul`
+  margin: 16px 0 0 0;
+  padding: 0;
+  list-style-type: none;
+  display: grid;
+  gap: 12px;
+
+  li {
+    color: #4b5563;
+    line-height: 1.7;
+    font-size: 15px;
+    padding-left: 24px;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 10px;
+      width: 12px;
+      height: 2px;
+      background: #c71585;
+    }
+  }
+`;
+
+export const EducationItem = styled.div`
+  margin-bottom: 32px;
+  padding: 24px 32px;
+  background: white;
+  border-top: 2px solid #e5e7eb;
+  border-bottom: 2px solid #e5e7eb;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export const Institution = styled.h3`
+  font-size: 20px;
+  font-weight: 700;
+  color: #1a1d23;
+  margin: 0 0 8px 0;
+  letter-spacing: -0.3px;
+`;
+
+export const Degree = styled.div`
+  font-size: 17px;
+  color: #4b5563;
+  margin-bottom: 8px;
+  font-weight: 500;
+`;
+
+export const EducationDate = styled.div`
+  font-size: 13px;
+  color: #9ca3af;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+export const SkillsGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+`;
+
+export const SkillCategory = styled.div`
+  padding: 24px;
+  background: white;
+  border: 2px solid #e5e7eb;
+  position: relative;
+  overflow: hidden;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: linear-gradient(180deg, #c71585 0%, transparent 100%);
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+    background: linear-gradient(135deg, transparent 50%, #c71585 50%);
+    opacity: 0.08;
+    clip-path: polygon(100% 0, 100% 100%, 0 0);
+  }
+`;
+
+export const SkillName = styled.h4`
+  font-size: 16px;
+  font-weight: 700;
+  color: #1a1d23;
+  margin: 0 0 12px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  font-size: 14px;
+`;
+
+export const SkillTags = styled.div`
+  font-size: 14px;
+  color: #6b7280;
+  line-height: 1.6;
+  font-weight: 500;
+`;
+
+export const ProjectItem = styled(WorkItem)`
+  background: linear-gradient(135deg, rgba(199, 21, 133, 0.02) 0%, white 100%);
+`;