hide old experience + compact skills

src/cv-maker/core/schema.ts

@@ -1,7 +1,16 @@
-import { Schema as S } from "effect"
+import { DateTime, Duration, Schema as S } from "effect"
 
 const httpsRegex = /https:\/\//;
 
+// collapse old jobs
+// hide social profiles
+// hide phone
+
+export class ViewSettings
+  extends S.Class<ProjectTechnology>("ProjectTechnology")({
+    collapseOld: S.Boolean
+  }) { }
+
 export class ProjectTechnology
   extends S.Class<ProjectTechnology>("ProjectTechnology")({
     id: S.NonEmptyString,
@@ -58,7 +67,24 @@ export class EmploymentRecord
       }).pipe(S.partial),
     projects:
       ProjectDetails.pipe(S.NonEmptyArray)
-  }) { }
+  }) {
+
+    get sortedProjects() {
+      return [...this.projects]
+        .sort((a,b) => b.order - a.order)
+    };
+
+    isMonthPast(monthPast: number) {
+
+      const now = Duration.millis(DateTime.unsafeNow().epochMillis);
+      const end = Duration.millis(DateTime.unsafeMake(this.start).epochMillis);
+
+      const daysPast = Duration.subtract(end)(now).pipe(Duration.toDays);
+
+      return daysPast > monthPast * 30;
+    }
+
+  }
 
 export class Me
   extends S.Class<Me>("Me")({

src/cv-maker/core/template.tsx

@@ -13,7 +13,7 @@ export function Resume(resume: ResumeObject) {
           <div className="section-header">
             <span id="label">Why I'm the Right Choice for "{coverLetter.position}"</span>
           </div>
-          <div className="p-3 bg-so">
+          <div className="p-2 bg-so">
             {coverLetter.content.map(line => <p dangerouslySetInnerHTML={{ __html: line }}></p>)}
           </div>
 
@@ -24,7 +24,7 @@ export function Resume(resume: ResumeObject) {
         <span id="label">Summary</span>
       </div>
 
-      <div className="bg-so p-3">
+      <div className="bg-so p-2">
         {resume.me.expertSummary.map(s =>
           <p dangerouslySetInnerHTML={{ __html: s }}></p>
         )}
@@ -34,24 +34,21 @@ export function Resume(resume: ResumeObject) {
         <span id="label">Skills</span>
       </div>
 
-      <div className="flex gap-1 flex-wrap">
+      <div className="flex flex-wrap gap-1">
         {Object.entries(getSkills(resume)).map(([category, group]) => (
-          <div className="w-32" key={category}>
-            <span className="uppercase font-light text-sm">{category}</span>
-            <div className="flex flex-wrap">
-              {group.map((t, idx) => (
-                <span 
-                  key={idx} 
-                  className="bg-so p-1 text-sm ml-1 mt-1"
-                >
-                  {t.technology.name}
-                </span>
-              ))}
-            </div>
+          <div key={category} className="flex items-center gap-1">
+            <span className="uppercase font-medium">{category}:</span>
+            {group.map((t, idx) => (
+              <span 
+                key={idx} 
+                className="bg-so p-1 text-xs"
+              >
+                {t.technology.name}
+              </span>
+            ))}
           </div>
         ))}
       </div>
-
       <div className="section-header pt-1">
         <span id="label">Employment history</span>
       </div>
@@ -107,7 +104,7 @@ function ProjectStack(project: ProjectDetails) {
 
 function ResumeHead(resume: ResumeObject) {
   return (
-    <div id="head" className="pb-6">
+    <div id="head" className="pb-4">
       <div className="text-4xl font-thin">{resume.me.name}</div>
       <div className="text-lg font-light">{Headline(resume)}</div>
       <div className="flex gap-1.5 text-sm font-extralight">
@@ -171,27 +168,33 @@ function CompanyProject(project: ProjectDetails, isLast: boolean) {
 function EmploymentHistory(resume: ResumeObject) {
   return (
     <div id="employment">
-      {resume.employmentHistory.map(company => {
-
-        const projects = 
-          [...company.projects]
-            .sort((a,b) => b.order - a.order)
-            .map((project, id) => CompanyProject(project, id == company.projects.length - 1))
+      {resume.employmentHistory.map(er => {
+
+        const isOld = er.isMonthPast(60);
+
+        let clazz = "border-b-1 border-gray-300 mb-2 p-2";
+
+        if (isOld) clazz += " bg-neutral-100";
+
+        const allRoles =
+          Array.dedupeWith(er.projects.flatMap(_ => _.roles), (a, b) => a.toLowerCase() == b.toLocaleLowerCase()).join('/')
 
         return (
-          <div className="border-b-1 border-gray-300 mb-2 pb-1">
-            <div style={{ "display": "flex" }}>
-              <span className="font-extralight text-sm">{CompanyHeader(company)}</span>
-              <span
-                style={{ "marginLeft": "auto" }}
-              >{getPeriod(company)}</span>
-            </div>
-            <span
-              style={{ display: "block", marginBottom: "5px" }}
-            >{CompanySubHeader(company)}</span>
-            <div className="flex flex-col">
-            {projects}
+          <div className={clazz}>
+            <div className="flex">
+              <span className="font-extralight text-sm">{CompanyHeader(er)}</span>
+              <span className="ml-auto">{getPeriod(er)}</span>
             </div>
+            <span className="block">{CompanySubHeader(er)}</span>
+            {isOld ? 
+              <div>
+                <span className="font-medium">Roles: </span>
+                <span>{allRoles}</span>
+              </div> : 
+              <div className="flex flex-col">
+                { er.sortedProjects.map((project, id) => CompanyProject(project, id == er.projects.length - 1)) }
+              </div>
+            }            
 
           </div>
         )

src/cv-maker/core/utils.ts

@@ -6,7 +6,7 @@ import { Resume } from "#/cv-maker/core/template"
 export const resumeObjectToHTML = 
   (resume: ResumeObject) => {
     try {
-      return render(Resume(resume))
+      return render(Resume(S.decodeSync(ResumeObject)(resume)))
     } catch (e) {
       console.log("render error", e);
       return ""

src/cv-maker/index.html

@@ -23,7 +23,7 @@
   </script>
 </head>
 
-<body x-data="state" class="flex flex-col p-16 pt-8 justify-center">
+<body x-data="state" class="flex flex-col p-16 pt-8 justify-center text-sm">
   <!-- navigation -->
   <div 
     class="no-print pb-2 flex gap-2 justify-center items-baseline md:w-3/4"

src/cv-maker/main.ts

@@ -80,12 +80,6 @@ async function loadStoredResume() {
       name: key
     });
   };
-
-  const lastResumeId = state.availableResumes.at(-1)?.id;
-
-  if (lastResumeId) {
-    state.currentResume = lastResumeId;
-  }
 
 }
 
@@ -196,6 +190,10 @@ async function setup() {
   window.addEventListener('delete', () => {
     localStorage.removeItem(state.currentResume);
     loadStoredResume();
+    const nextResume = state.availableResumes.at(-1);
+    if (nextResume) {
+      state.currentResume = nextResume.id;
+    }
     selectResume();
   });
 

src/cv-maker/style.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 
-
 @theme {
   --color-so: #f1f8ff;
 }