complete (mostly) reorx theme

src/scss/print.css

@@ -28,7 +28,8 @@ body {
   }
 }
 
-.page-unit {
+.page-unit,
+.section-item {
   page-break-inside: avoid;
   page-break-after: auto;
 }

src/themes/data.js

@@ -7,13 +7,17 @@ export function getRenderData(cvData) {
     fn: {
       reformatDate,
       getIconSVG,
-      urlNoSchema,
+      noSchemaURL,
     }
   }
 }
 
 /* fn */
 
-function urlNoSchema(url) {
+function noSchemaURL(url) {
-  return url.replace(/https?:\/\//, '')
+  url = url.replace(/https?:\/\//, '')
+  if (url.endsWith('/')) {
+    url = url.slice(0, -1)
+  }
+  return url
 }

src/themes/reorx/index.ejs

@@ -1,17 +1,21 @@
+<%
+function linkInDiv(url) {
+  if (!url) return ''
+  return `<div class="url row"><a href="${url}">${fn.noSchemaURL(url)}</a></div>`
+}
+%>
+
 <!-- Basics -->
 <section class="basics-section">
   <h1><%= cv.basics.name %></h1>
   <% if (cv.basics.label) { %>
-    <div class="label"><%= cv.basics.label %></div>
+    <div class="label row"><%= cv.basics.label %></div>
-  <% } %>
-  <% if (cv.basics.url) { %>
-    <div class="url">
-      <a href="<%= cv.basics.url %>"><%= fn.urlNoSchema(cv.basics.url) %></a></div>
   <% } %>
+  <%- linkInDiv(cv.basics.url) %>
   <% if (cv.basics.summary) { %>
     <div class="summary"><%= cv.basics.summary %></div>
   <% } %>
-  <div class="contact">
+  <div class="contact row">
     <% if (cv.basics.email) { %>
       <div class="item">
         <%- fn.getIconSVG('mdi:email') %>
@@ -33,57 +37,73 @@
   </div>
 </section>
 
+
 <%
 function dateRange(item, preserveDay) {
   let {startDate, endDate} = item
   if (!startDate && !endDate) return ''
   if (!preserveDay) {
-    const format = 'YYYY-MM'
+    const format = 'MMM YYYY'
     startDate = fn.reformatDate(startDate, format)
     endDate = fn.reformatDate(endDate, format)
   }
-  return `<p>${startDate}~${endDate}</p>`
+  return `<div class="date-range">${startDate} – ${endDate}</div>`
 }
 %>
 
 <!-- Educations -->
 <% if (cv.education) { %>
-<section>
+<section class="education-section">
   <div class="section-title">
     <h2>Educations</h2>
     <div class="line"></div>
   </div>
   <% for (const item of cv.education) { %>
-    <div class="education page-unit">
+    <div class="education section-item">
+      <div class="row space-between">
         <h3><%= item.institution %></h3>
-      <p><%= item.url %></p>
-      <p><%= item.area %></p>
-      <p><%= item.score %></p>
         <%- dateRange(item) %>
       </div>
+      <div class="study row fz-4">
+        <%= item.studyType %>, <%= item.area %>
+      </div>
+      <div class="score row">Overall GPA: <%= item.score %></div>
+      <% if (item.courses && item.courses.length > 0) { %>
+        <div class="courses row">
+          Courses: <%= item.courses.join('; ') %>
+        </div>
+      <% } %>
+      <%- linkInDiv(item.url) %>
+    </div>
   <% } %>
 </section>
 <% } %>
 
 <!-- Work -->
 <% if (cv.work) { %>
-<section>
+<section class="work-section">
   <div class="section-title">
     <h2>Work</h2>
     <div class="line"></div>
   </div>
   <% for (const item of cv.work) { %>
-    <div class="work page-unit">
+    <div class="work section-item">
+      <div class="row space-between">
         <h3><%= item.name %></h3>
-      <p><%= item.url %></p>
         <%- dateRange(item) %>
-      <p><%= item.position %></p>
-      <div class="summary"><%= item.summary %></div>
-      <div class="highlights">
-        <% for (const hl of item.highlights) { %>
-          <div class="item"><%= hl %></div>
-        <% } %>
       </div>
+      <div class="position row fz-4"><%= item.position %></div>
+      <div class="summary row"><%= item.summary %></div>
+      <% if (item.highlights && item.highlights.length > 0) { %>
+        <div class="highlights row">
+          <ul>
+          <% for (const hl of item.highlights) { %>
+            <li><%= hl %></li>
+          <% } %>
+          </ul>
+        </div>
+      <% } %>
+      <%- linkInDiv(item.url) %>
     </div>
   <% } %>
 </section>
@@ -91,27 +111,33 @@ function dateRange(item, preserveDay) {
 
 <!-- Projects -->
 <% if (cv.projects) { %>
-<section>
+<section class="projects-section">
   <div class="section-title">
     <h2>Projects</h2>
     <div class="line"></div>
   </div>
   <% for (const item of cv.projects) { %>
-    <div class="project page-unit">
+    <div class="project section-item">
+      <div class="row space-between">
         <h3><%= item.name %></h3>
-      <p><%= item.url %></p>
-      <p><%= item.description %></p>
         <%- dateRange(item) %>
-      <div class="highlights">
-        <% for (const hl of item.highlights) { %>
-          <div class="item"><%= hl %></div>
-        <% } %>
       </div>
+      <div class="row lh-para"><%= item.description %></div>
+      <% if (item.highlights && item.highlights.length > 0) { %>
+        <div class="highlights row">
+          <ul>
+          <% for (const hl of item.highlights) { %>
+            <li><%= hl %></li>
+          <% } %>
+          </ul>
+        </div>
+      <% } %>
       <div class="keywords">
         <% for (const kw of item.keywords) { %>
           <span class="item"><%= kw %></span>
         <% } %>
       </div>
+      <%- linkInDiv(item.url) %>
     </div>
   <% } %>
 </section>
@@ -119,38 +145,46 @@ function dateRange(item, preserveDay) {
 
 <!-- Side-projects -->
 <% if (cv.sideProjects) { %>
-<section>
+<section class="sideprojects-section">
   <div class="section-title">
     <h2>Side-projects</h2>
     <div class="line"></div>
   </div>
   <% for (const item of cv.sideProjects) { %>
-    <div class="sideproject page-unit">
+    <div class="sideproject section-item">
       <h3><%= item.name %></h3>
       <p><%= item.url %></p>
       <p><%= item.description %></p>
       <%- dateRange(item) %>
+      <% if (item.keywords && item.keywords.length > 0) { %>
+
+      <% } %>
         <div class="keywords">
           <% for (const kw of item.keywords) { %>
             <span class="item"><%= kw %></span>
           <% } %>
         </div>
     </div>
+    </div>
   <% } %>
 </section>
 <% } %>
 
 <!-- Skills -->
 <% if (cv.skills) { %>
-<section>
+<section class="skills-section">
   <div class="section-title">
     <h2>Skills</h2>
     <div class="line"></div>
   </div>
+  <div class="two-columns">
   <% for (const item of cv.skills) { %>
-    <div class="skill">
+    <div class="skill section-item">
       <h3><%= item.name %></h3>
-      <div class="level"><%= item.level %></div>
+      <div class="level row"><%= item.level %></div>
+      <% if (item.keywords && item.keywords.length > 0) { %>
+
+      <% } %>
         <div class="keywords">
           <% for (const kw of item.keywords) { %>
             <span class="item"><%= kw %></span>
@@ -158,20 +192,21 @@ function dateRange(item, preserveDay) {
         </div>
     </div>
   <% } %>
+  </div>
 </section>
 <% } %>
 
 <!-- Languages -->
 <% if (cv.languages) { %>
-<section class="page-unit">
+<section class="languages-section page-unit">
   <div class="section-title">
     <h2>Languages</h2>
     <div class="line"></div>
   </div>
   <% for (const item of cv.languages) { %>
-    <div class="language">
+    <div class="language section-item">
       <h3><%= item.language %></h3>
-      <div class="fluency"><%= item.fluency %></div>
+      <div class="fluency row"><%= item.fluency %></div>
     </div>
   <% } %>
 </section>

src/themes/reorx/index.scss

@@ -1,5 +1,10 @@
 $color-signature: #2A3FFB;
 $color-text-dim: #777;
+$fz-1: 36px;
+$fz-2: 22px;
+$fz-3: 18px;
+$fz-4: 16px;
+$lh-para: 1.4;
 
 .cv-container {
   font-size: 14px;
@@ -15,23 +20,85 @@ $color-text-dim: #777;
   }
 }
 
+section {
+  .section-title {
+    margin-top: 3em;
+    display: flex;
+    h2 {
+      font-size: $fz-2;
+      font-weight: 600;
+      color: $color-signature;
+      margin: 0;
+    }
+    .line {
+      flex-grow: 1;
+      margin: 14px 0 0 1em;
+      height: 2px;
+      background-color: $color-signature;
+    }
+  }
+
+  .section-item {
+    margin-top: 1.5em;
+
+    h3 {
+      font-size: $fz-3;
+      margin: 0;
+    }
+
+    ul {
+      margin: .8em 0;
+      padding-left: 16px;
+      li {
+        margin-bottom: .4em;
+      }
+    }
+  }
+
+  .row {
+    margin: .4em 0;
+  }
+  .space-between {
+    display: flex;
+    justify-content: space-between;
+  }
+  .lh-para {
+    line-height: $lh-para;
+  }
+  .fz-4 {
+    font-size: $fz-4;
+  }
+
+  .keywords {
+    display: flex;
+    .item {
+      font-size: 13px;
+      color: $color-text-dim;
+      margin-right: .8em;
+      padding: 0 4px;
+      height: 22px;
+      line-height: 21px;
+      background: #f4f4f4;
+    }
+  }
+
+  .two-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 .basics-section {
   h1 {
-    font-size: 36px;
+    font-size: $fz-1;
     font-weight: 600;
     margin: .2em 0 .2em 0;
   }
-  .label {
-    margin: .4em 0;
-  }
-  .url {
-    margin: .4em 0;
-  }
   .summary {
-    margin: .4em 0;
+    margin: .8em 0;
+    line-height: $lh-para;
   }
   .contact {
-    margin: .4em 0;
     color: $color-text-dim;
 
     display: flex;
@@ -47,19 +114,14 @@ $color-text-dim: #777;
   }
 }
 
-.section-title {
+.education-section {
-  margin-top: 3em;
+}
-  display: flex;
+
-  h2 {
+.work-section {
-    font-size: 22px;
+}
-    font-weight: 600;
+
-    color: $color-signature;
+.skills-section {
-    margin: 0;
+  .section-item {
-  }
+
-  .line {
-    flex-grow: 1;
-    margin: 14px 0 0 1em;
-    height: 2px;
-    background-color: $color-signature;
   }
 }