experience and pages

cv.tsx

@@ -24,7 +24,7 @@ const tw = createTw({
 
 const linkStyles = "no-underline text-slate-50 flex flex-row gap-1"
 const pageStyles = "w-full h-full text-slate-50 bg-slate-950 flex flex-col p-12 text-base"
-const sectionStyles = "w-full flex flex-col m-4"
+const sectionStyles = "w-full flex flex-col"
 const svg = (paths: string[]) =>
   <Svg style={tw("w-4 h-4")} viewBox="0 0 19 19">
     {paths.map(p => (
@@ -73,6 +73,9 @@ const tech = {
     "OAuth2",
     "H2",
     "Spring Boot Actuator",
+    "Maven",
+    "Gradle",
+    "Ant",
   ],
   web: [
     "JavaScript",
@@ -102,6 +105,7 @@ const tech = {
     "vim",
     "Monit",
     "CLI",
+    "pandoc",
   ],
   git: [
     "git",
@@ -132,18 +136,65 @@ const tech = {
     "Apache Spark",
     "Apache NiFi",
   ],
+  python: [
+    "python",
+    "BeautifulSoup4",
+    "requests",
+    "pypandoc",
+    "markdownify",
+    "html2text",
+    "Poetry",
+  ],
+  nextjs: [
+    "NextJS 12",
+    "NextJS 13",
+    "NextJS 14",
+  ],
+  styles: [
+    "CSS",
+    "SASS",
+    "TailwindCSS",
+    "DaisyUI",
+    "tailwind-scrollbar",
+  ],
+  general: [
+    "Markdown",
+    "Google",
+    "DuckDuckGo",
+    "PDF",
+    "Email",
+  ],
 }
 
 const techKeys = [...Object.keys(tech)] as const
 
-const cnetTech: string[] = techKeys
+const filterKeysIncl = (obj: readonly string[], keys: string[]) => {
-  .filter(e => !e.includes("hybris"))
+  return obj.filter(e => keys.includes(e))
-  .filter(e => !e.includes("payment"))
+}
+const filterKeysExcl = (obj: readonly string[], keys: string[]) => {
+  return obj.filter(e => !keys.includes(e))
+}
+
+const cnetTech: string[] = filterKeysExcl(techKeys,
+  ["hybris", "payment", "dataIntegration", "python", "nextjs", "styles"]
+)
   // @ts-ignore
   .map(e => tech[e]).flat()
-const raTech: string[] = techKeys
+const raTech: string[] = filterKeysExcl(techKeys,
+  ["dataIntegration", "python", "nextjs", "styles"]
+)
   // @ts-ignore
   .map(e => tech[e]).flat()
+const ncTech: string[] = filterKeysIncl(techKeys,
+  ["java", "dataIntegration", "git"]
+)
+  // @ts-ignore
+  .map(e => tech[e]).flat()
+const hoi2Tech: string[] = filterKeysIncl(techKeys,
+  ["python", "nextjs", "styles", "linux", "git", "general"]
+)
+  // @ts-ignore
+  .map(e => tech[e]).flat().concat(["Wix"])
 
 
 const experience = ({
@@ -155,7 +206,8 @@ const experience = ({
   description,
   technologies,
   links
-}: Experience) => (
+}: Experience) =>
+  <View style={tw(sectionStyles)}>
     <View style={tw("w-full flex flex-col mt-2 border-2 border-slate-50 p-4 rounded-2xl")}>
       <View style={tw("flex flex-row flex-wrap gap-1")}>
         <Text>{position}</Text>
@@ -182,13 +234,13 @@ const experience = ({
       <View style={tw("flex flex-row flex-wrap")}>
         {technologies.map(t => (
           <View key={t} style={tw("flex flex-row")}>
-          <View style={tw("border-2 border-teal-200 h-1 mx-1 mb-1 rounded-full")}></View>
+            <View style={tw("border-2 border-teal-200 h-1 mx-1 mt-1 rounded-full")}></View>
             <Text style={tw("text-xs")}>{t}</Text>
           </View>
         ))}
       </View>
     </View>
-)
+  </View>
 
 const Links = () => (
   <View style={tw("flex flex-row gap-4 w-full text-sm justify-center p-4")}>
@@ -199,53 +251,6 @@ const Links = () => (
   </View>
 )
 
-const Experience = () => (
-  <View style={tw(sectionStyles)}>
-    <Text style={tw("text-3xl")}>Experience</Text>
-    {experience({
-      company: "HOI 2 Bunker",
-      position: "Freelance Full Stack Software Developer",
-      location: "UK",
-      from: new Date("22 Jun 2023"),
-      to: new Date("27 Jun 2023"),
-      description: "",
-      technologies: raTech
-    })}
-    {experience({
-      company: "North Concepts",
-      position: "Technical Writer for Java Data Pipeline Library",
-      location: "Canada",
-      from: new Date("25 May 2023"),
-      to: new Date("20 Jun 2023"),
-      description: "Wrote technical documentation and content for the DataPipeline library by NorthConcepts.",
-      technologies: [...tech.java, ...tech.dataIntegration, ...tech.git, "WordPress"]
-    })}
-    {experience({
-      company: "RA Creative",
-      position: "Full Stack Software Developer",
-      location: "Nottingham, UK",
-      from: new Date("Dec 2020"),
-      to: new Date("20 Jan 2023"),
-      description: "Worked on seven international eCommerce web apps serving customers in the US and Europe.",
-      technologies: raTech,
-      links: [
-        { text: "RA Creative", href: "https://racreative.co.uk/" },
-        { text: "Parcel Lab", href: "https://parcellab.com/" },
-        { text: "Wells Fargo", href: "https://www.wellsfargo.com/" },
-      ]
-    })}
-    {experience({
-      company: "Central Net",
-      position: "Full Stack + Mobile Software Developer",
-      location: "Blagoevgrad, Bulgaria",
-      from: new Date("May 2016"),
-      to: new Date("May 2020"),
-      description: "Developed a full-stack web + android app helping students book exams, browse resources, see events, news and more.",
-      technologies: cnetTech
-    })}
-  </View>
-)
-
 const Intro = () => (
   <View style={tw("text-center border-2 border-slate-50 rounded-full")}>
     <Text style={tw("text-5xl")}>Ivan K. Dimitrov</Text>
@@ -268,7 +273,57 @@ const CV = () => (
       style={tw(pageStyles)}>
       <Intro />
       {divider}
-      <Experience />
+      <Text style={tw("text-3xl mt-2")}>Experience</Text>
+      <View style={tw("my-auto")}>
+        {experience({
+          company: "HOI 2 Bunker",
+          position: "Freelance Full Stack Software Developer",
+          location: "UK",
+          from: new Date("22 Jun 2023"),
+          to: new Date("27 Jun 2023"),
+          description: "Scraped an old wiki website with over 500 pages and created a new static site generated using Markdown.",
+          technologies: hoi2Tech
+        })}
+        {experience({
+          company: "North Concepts",
+          position: "Technical Writer for Java Data Pipeline Library",
+          location: "Canada",
+          from: new Date("25 May 2023"),
+          to: new Date("20 Jun 2023"),
+          description: "Wrote technical documentation and content for the DataPipeline library by NorthConcepts.",
+          technologies: ncTech
+        })}
+        {experience({
+          company: "RA Creative",
+          position: "Full Stack Software Developer",
+          location: "Nottingham, UK",
+          from: new Date("Dec 2020"),
+          to: new Date("20 Jan 2023"),
+          description: "Worked on seven international eCommerce web apps serving customers in the US and Europe.",
+          technologies: raTech,
+          links: [
+            { text: "RA Creative", href: "https://racreative.co.uk/" },
+            { text: "Parcel Lab", href: "https://parcellab.com/" },
+            { text: "Wells Fargo", href: "https://www.wellsfargo.com/" },
+          ]
+        })}
+      </View>
+    </Page>
+    <Page
+      size="A4"
+      style={tw(pageStyles)}
+    >
+      <View style={tw("my-auto")}>
+        {experience({
+          company: "Central Net",
+          position: "Full Stack + Mobile Software Developer",
+          location: "Blagoevgrad, Bulgaria",
+          from: new Date("May 2016"),
+          to: new Date("May 2020"),
+          description: "Developed a full-stack web + android app helping students book exams, browse resources, see events, news and more.",
+          technologies: cnetTech
+        })}
+      </View>
     </Page>
   </Document>
 );