Update skills, page breaks and add profile picture

app/frontend/src/components/CV/Experience.tsx

@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from "react-intl";
 
 import { Content } from "../common/Content";
 import { Headline, SubHeadline } from "../common/Headline";
-import { Spacer } from "../common/Spacer";
+import PageBreakAvoid from "../common/PageBreakAvoid";
 import { Paragraph } from "../common/Text";
 
 const messages = defineMessages({
@@ -25,44 +25,69 @@ const approxCurrentYears = {
   ),
 };
 
-const yourpassSkills = [
+const investbaySkills = [
   "DevOps",
-  "Front-End Development",
-  "Back-end Operations",
-  "Software Development",
-  "Kubernetes",
-  "TypeScript",
-  "Go",
-  "Linux",
-  "Linux Server",
+  "Google Cloud Platform (GCP)",
+  "Amazon Web Services (AWS)",
+  "Gitlab",
+  "Terraform",
+  "Cloud infrastructure",
+  "Cloud Applications",
+  "Software Development Life Cycle (SDLC)",
   "Linux System Administration",
-  "Back-End Web Development",
-  "Git",
+  "Go",
+  "TypeScript",
+  "Nix",
+  "GraphQL",
+  "gRPC",
   "PostgreSQL",
   "Node.js",
   "React.js",
+];
+
+const yourpassSkills = [
+  "DevOps",
+  "Software as a Service (SaaS)",
+  "Cloud Infrastructure",
+  "Kubernetes",
+  "Back-end Operations",
+  "Linux System Administration",
   "Amazon Web Services (AWS)",
-  "Amazon EKS",
+  "Terraform",
+  "Go (Programming Language)",
+  "gRPC",
+  "Front-End Development",
+  "React.js",
+  "Node.js",
+  "TypeScript",
+  "Nix",
+  "Software Development Life Cycle (SDLC)",
+  "Software Development",
+  "Git",
+  "PostgreSQL",
 ];
 
 const yoursystemSkills = [
   "DevOps",
-  "Front-End Development",
+  "Docker Swarm",
+  "Linux System Administration",
   "Back-end Operations",
+  "Front-End Development",
+  "Amazon Web Services (AWS)",
+  "Bash",
+  "Linux Server",
+  "Terraform",
+  "Cloud Infrastructure",
+  "Cloud Applications",
+  "Go (Programming Language)",
+  "TypeScript",
+  "Node.js",
+  "Software Development Life Cycle (SDLC)",
   "Software Development",
   "Kubernetes",
-  "TypeScript",
-  "Linux",
-  "Linux Server",
-  "Linux System Administration",
   "Back-End Web Development",
+  "GraphQL",
   "Git",
-  "Node.js",
-  "Vue.js",
-  "PHP",
-  "Bash",
-  "Amazon Web Services (AWS)",
-  "Amazon EKS",
 ];
 
 const Experience: React.FC = () => {
@@ -70,103 +95,109 @@ const Experience: React.FC = () => {
 
   return (
     <>
-      <Headline level={3}>INVESTBAY s.r.o.</Headline>
-      <SubHeadline level={4}>DevOps Architect</SubHeadline>
-      <Content>
-        <Paragraph>
-          {intl.formatMessage(
-            {
-              defaultMessage: "February 2024 - Present",
-              id: "Experience.investbay",
-            },
-            {
-              // not used atm
-              count: approxCurrentYears.InvestBay,
-            }
-          )}
-        </Paragraph>
-        <Paragraph>
-          <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
-          {yourpassSkills.join(" · ")}
-        </Paragraph>
-      </Content>
+      <PageBreakAvoid>
+        <Headline level={3}>INVESTBAY s.r.o.</Headline>
+        <SubHeadline level={4}>DevOps Architect</SubHeadline>
+        <Content>
+          <Paragraph>
+            {intl.formatMessage(
+              {
+                defaultMessage: "February 2024 - Present",
+                id: "Experience.investbay",
+              },
+              {
+                // not used atm
+                count: approxCurrentYears.InvestBay,
+              }
+            )}
+          </Paragraph>
+          <Paragraph>
+            <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
+            {investbaySkills.join(" · ")}
+          </Paragraph>
+        </Content>
+      </PageBreakAvoid>
 
-      <Headline level={3}>YOUR PASS s.r.o.</Headline>
-      <SubHeadline level={4}>DevOps Engineer</SubHeadline>
-      <Content>
-        <Paragraph>
-          {intl.formatMessage(
-            {
-              defaultMessage: "July 2021 - Present ({count} years)",
-              id: "Experience.yourpass",
-            },
-            {
-              count: approxCurrentYears.YourPass,
-            }
-          )}
-        </Paragraph>
-        <Paragraph>
-          <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
-          {yourpassSkills.join(" · ")}
-        </Paragraph>
-      </Content>
+      <PageBreakAvoid>
+        <Headline level={3}>YOUR PASS s.r.o.</Headline>
+        <SubHeadline level={4}>DevOps Engineer</SubHeadline>
+        <Content>
+          <Paragraph>
+            {intl.formatMessage(
+              {
+                defaultMessage: "July 2021 - Present ({count} years)",
+                id: "Experience.yourpass",
+              },
+              {
+                count: approxCurrentYears.YourPass,
+              }
+            )}
+          </Paragraph>
+          <Paragraph>
+            <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
+            {yourpassSkills.join(" · ")}
+          </Paragraph>
+        </Content>
+      </PageBreakAvoid>
 
-      <Spacer />
+      <PageBreakAvoid>
+        <Headline level={3}>YOUR SYSTEM s.r.o.</Headline>
+        <SubHeadline level={4}>SysOps</SubHeadline>
 
-      <Headline level={3}>YOUR SYSTEM s.r.o.</Headline>
-      <SubHeadline level={4}>SysOps</SubHeadline>
+        <Content>
+          <Paragraph>
+            {intl.formatMessage(
+              {
+                defaultMessage: "January 2022 - Present ({count} years)",
+                id: "Experience.yoursystem",
+              },
+              {
+                count: approxCurrentYears.YourSystemSysOps,
+              }
+            )}
+          </Paragraph>
+          <Paragraph>
+            <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
+            {yoursystemSkills.join(" · ")}
+          </Paragraph>
+        </Content>
 
-      <Content>
-        <Paragraph>
-          {intl.formatMessage(
-            {
-              defaultMessage: "January 2022 - Present ({count} years)",
+        <SubHeadline level={4}>Lead Developer/Architect</SubHeadline>
+
+        <Content>
+          <Paragraph>
+            {intl.formatMessage({
+              defaultMessage: "February 2016 - December 2021 (5 years)",
               id: "Experience.yoursystem",
-            },
-            {
-              count: approxCurrentYears.YourSystemSysOps,
-            }
-          )}
-        </Paragraph>
-        <Paragraph>
-          <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
-          {yoursystemSkills.join(" · ")}
-        </Paragraph>
-      </Content>
+            })}
+          </Paragraph>
+          <Paragraph>
+            <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
+            {yoursystemSkills.join(" · ")}
+          </Paragraph>
+        </Content>
+      </PageBreakAvoid>
 
-      <SubHeadline level={4}>Lead Developer/Architect</SubHeadline>
+      <PageBreakAvoid>
+        <Headline level={3}>Past experience</Headline>
+        <SubHeadline level={4}>Developer</SubHeadline>
 
-      <Content>
-        <Paragraph>
-          {intl.formatMessage({
-            defaultMessage: "February 2016 - December 2021 (5 years)",
-            id: "Experience.yoursystem",
-          })}
-        </Paragraph>
-        <Paragraph>
-          <strong>{intl.formatMessage(messages.skills)}:</strong>{" "}
-          {yoursystemSkills.join(" · ")}
-        </Paragraph>
-      </Content>
-
-      <Headline level={3}>Past experience</Headline>
-      <SubHeadline level={4}>Developer</SubHeadline>
-
-      <Content>
-        <Paragraph>
-          {intl.formatMessage({
-            defaultMessage: "Birth - February 2016",
-            id: "Experience.past",
-          })}
-        </Paragraph>
-        <Paragraph>
-          {intl.formatMessage({
-            defaultMessage:
-              "Working on smaller projects such as chats, forum based websites, web based presentations, most notably a system for handling the driver training center and driving school agenda... Tinkering...",
-            id: "Experience.pastDescription",
-          })}
-        </Paragraph>
-      </Content>
+        <Content>
+          <Paragraph>
+            {intl.formatMessage({
+              defaultMessage: "Birth - February 2016",
+              id: "Experience.past",
+            })}
+          </Paragraph>
+          <Paragraph>
+            {intl.formatMessage({
+              defaultMessage:
+                "Working on smaller projects such as chats, forum based websites, web based presentations, most notably a system for handling the driver training center and driving school agenda... Tinkering...",
+              id: "Experience.pastDescription",
+            })}
+          </Paragraph>
+        </Content>
+      </PageBreakAvoid>
     </>
   );
 };

app/frontend/src/components/CV/Skill.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { Spacer } from "../common/Spacer";
 import { Paragraph } from "../common/Text";
+import PageBreakAvoid from "../common/PageBreakAvoid";
 
 type SkillProps = {
   title: string;
@@ -11,13 +12,13 @@ const Skill: React.FC<React.PropsWithChildren<SkillProps>> = (props) => {
   const { children, title } = props;
 
   return (
-    <div>
+    <PageBreakAvoid>
       <strong>{title}</strong>
       <Spacer />
       {React.Children.map(children, (c) => (
         <Paragraph>{c}</Paragraph>
       ))}
-    </div>
+    </PageBreakAvoid>
   );
 };
 

app/frontend/src/components/CV/Skills.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl";
 
 import { SubHeadline } from "../common/Headline";
 import { List, ListItem } from "../common/List";
+import PageBreakAvoid from "../common/PageBreakAvoid";
 import { Spacer } from "../common/Spacer";
 import { Paragraph } from "../common/Text";
 import Skill from "./Skill";
@@ -99,8 +100,10 @@ const Skills: React.FC = () => {
       <List>
         {otherSkills.map((s) => (
           <ListItem key={s.title}>
-            <strong>{s.title}</strong>
-            {s.description && `: ${s.description}`}
+            <PageBreakAvoid>
+              <strong>{s.title}</strong>
+              {s.description && `: ${s.description}`}
+            </PageBreakAvoid>
           </ListItem>
         ))}
       </List>

app/frontend/src/components/CV/Summary.tsx

@@ -38,8 +38,7 @@ const Summary: React.FC = () => {
         knowledge of KNX systems.
       </Paragraph>
       <Caption>
-        -- This summary was graciously generated by an AI and then rewritten and
-        adjusted by a human
+        -- Summary graciously generated by an AI and curated by human
       </Caption>
     </>
   );

app/frontend/src/components/Layout/MainLayout.tsx

@@ -23,7 +23,7 @@ const Nav = styled("nav")({
   flex: "0 0 280px",
   width: 280,
   minHeight: "100%",
-  padding: "3rem 2rem 2rem",
+  padding: "2rem 2rem 2rem",
 
   [hideNavigationMQ]: {
     display: "none",

app/frontend/src/components/Navigation/MainNavigation.tsx

@@ -1,12 +1,23 @@
+import styled from "@emotion/styled";
 import React, { useEffect, useRef } from "react";
 import { useIntl } from "react-intl";
 
+import profile from "../../assets/profile.jpg";
 import { CONTACT_EMAIL, CONTACT_PHONE } from "../../config/environment";
 import { Contact } from "../common/Contact";
 import { List, ListItem } from "../common/List";
 import { Spacer } from "../common/Spacer";
 import NavigationHeadline from "./NavigationHeadline";
 
+const ProfileImg = styled("img")({
+  borderRadius: "50%",
+  border: "2px solid white",
+  display: "block",
+  margin: "0 auto",
+  maxWidth: "100%",
+  width: 150,
+});
+
 const getTopOffset = (input: HTMLElement) => {
   let el: HTMLElement | Element | null = input;
   let o = 0;
@@ -51,6 +62,13 @@ const MainNavigation: React.FC = () => {
       scrollPrev = window.scrollY;
       const top = getTopOffset(d);
 
+      console.log({
+        "window.innerHeight": window.innerHeight,
+        height,
+        top,
+        down,
+      });
+
       if (window.innerHeight > height) {
         d.style.marginTop = `${Math.max(window.scrollY, 0)}px`;
         return;
@@ -61,16 +79,24 @@ const MainNavigation: React.FC = () => {
         const wDelta = window.scrollY + window.innerHeight;
 
         const diff = wDelta - delta;
+        console.log({ delta, wDelta, "window.scrollY": window.scrollY, diff });
+
         if (diff > 0) {
           const sizeDelta = Math.min(window.innerHeight - height, 0);
           d.style.marginTop = `${Math.max(top + diff + sizeDelta, 0)}px`;
+          console.log({
+            sizeDelta,
+            marginTop: Math.max(top + diff + sizeDelta, 0),
+          });
         }
       } else {
         const delta = top;
         const wDelta = window.scrollY;
 
         const diff = wDelta - delta;
+        console.log({ delta, wDelta, "window.scrollY": window.scrollY, diff });
         if (diff < 0) {
+          console.log({ marginTop: Math.max(top + diff, 0) });
           d.style.marginTop = `${Math.max(top + diff, 0)}px`;
         }
       }
@@ -86,6 +112,8 @@ const MainNavigation: React.FC = () => {
 
   return (
     <div ref={ref}>
+      <ProfileImg src={profile} alt="profile picture" />
+
       <NavigationHeadline>
         {intl.formatMessage({
           defaultMessage: "Contact",

app/frontend/src/components/common/PageBreakAvoid.tsx

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+
+const PageBreakAvoid = styled("div")({
+  pageBreakInside: "avoid",
+});
+
+export default PageBreakAvoid;

flake.nix

@@ -8,7 +8,8 @@
     {
       formatter = nix.formatter;
 
-      packages = nix.lib.forAllSystems (pkgs:
+      packages = nix.lib.forAllSystems (
+        pkgs:
         let
           version = "rev-${self.shortRev or self.dirtyShortRev}";
           package = builtins.fromJSON (builtins.readFile ./app/frontend/package.json);
@@ -42,7 +43,9 @@
               "-w"
               "-X gopkg.c3c.cz/cv/app/server/internal/version.Tag=${version}"
               "-X gopkg.c3c.cz/cv/app/server/internal/version.Commit=${self.rev or self.dirtyRev}"
-              "-X gopkg.c3c.cz/cv/app/server/internal/version.commitTime=${builtins.toString (self.lastModified or 0)}"
+              "-X gopkg.c3c.cz/cv/app/server/internal/version.commitTime=${
+                builtins.toString (self.lastModified or 0)
+              }"
             ];
             vendorHash = "sha256-44xcyVk5KcurQLkVJv1MeAj+Pfcu53664pvVgHdyv3E=";
           };