Formatting

app/frontend/package.json

@@ -30,7 +30,7 @@
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/stylis": "^4.2.0",
-    "@vitejs/plugin-react-swc": "^3.0.0",
+    "@vitejs/plugin-react-swc": "^3.7.1",
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-typescript": "^3.6.3",
@@ -47,6 +47,6 @@
     "stylis": "^4.2.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^4.3.9"
+    "vite": "^5.4.10"
   }
 }

app/frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import createCache, { EmotionCache } from "@emotion/cache";
+import createCache from "@emotion/cache";
 import { CacheProvider, Global, ThemeProvider, css } from "@emotion/react";
 import styled from "@emotion/styled";
 import normalizeCss from "normalize.css/normalize.css?inline";
@@ -13,7 +13,7 @@ const themeCache = createCache({
   key: "cv",
 });
 
-const i: EmotionCache["insert"] = (...args) => themeCache.insert(...args);
+const i = themeCache.insert.bind(themeCache);
 themeCache.insert = (...args) => {
   args[2].tags.forEach((t) => {
     if (!t.getAttribute("media")) {

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

@@ -16,12 +16,12 @@ type OtherSkill = {
 const otherSkills: OtherSkill[] = [
   {
     title: "Strong proficiency in",
-    description: "Go, Typescript (and Javascript), Bash, IaaC tools",
+    description: "IaaC tooling, Go, Typescript (and Javascript), Bash",
   },
   {
     title: "Infrastructure related skills",
     description:
-      "Kubernetes and AWS EKS, Containerized applications, Linux system administration, Amazon Web Services - good understanding of Networking, RDS, Queues. Notable experience with GCP/Azure.",
+      "Kubernetes and AWS EKS, Containerized applications, Linux system administration, Amazon Web Services - good understanding of Networking, Databases, Queues and many other managed services. Notable experience with GCP/Azure. Experience with most major platforms such as Github, Gitlab, Gitea, Bitbucket and their tooling.",
   },
   {
     title: "Databases",
@@ -30,7 +30,7 @@ const otherSkills: OtherSkill[] = [
   {
     title: "Some of the relevant Frameworks/Tooling",
     description:
-      "Terraform, Prometheus, Grafana, Nix shell, React, Webpack, Rollup, Esbuild, deep understanding of Git",
+      "Terraform, Prometheus, Grafana, InfluxDB, Prometheus, Elasticsearch, Nix, React, Esbuild, deep understanding of Git",
   },
   {
     title: "Software Development",
@@ -59,11 +59,16 @@ const Skills: React.FC = () => {
           id: "BOZ+do",
         })}
       </Skill>
-      <Skill title="Front-End Development">
+      <Skill title="Infrastructure operations">
         {intl.formatMessage({
           defaultMessage:
-            "Extensive experience in frontend development spanning back to the early 2000s.",
+            "Throughout my career, I have gained valuable experience in developing, maintaining and monitoring high-load infrastructure clusters.",
-          id: "AjT8sf",
+          id: "PKLG9N",
+        })}
+        {intl.formatMessage({
+          defaultMessage:
+            "Following the OCI (Open Container Initiative) and leveraging Docker and Kubernetes to create highly available deployments, primarily on the AWS platform, was a challenging and enjoyable experience, that has greatly enhanced my skills in this area.",
+          id: "VRhCte",
         })}
       </Skill>
       <Skill title="Back-End Development">
@@ -74,20 +79,15 @@ const Skills: React.FC = () => {
         })}
         {intl.formatMessage({
           defaultMessage:
-            "In recent years, the main focus was on Go to write tooling and backend services.",
+            "In recent years, my focus was on Go to write tooling and backend services.",
-          id: "FxkFRP",
+          id: "y/ymnB",
         })}
       </Skill>
-      <Skill title="Infrastructure operations">
+      <Skill title="Front-End Development">
         {intl.formatMessage({
           defaultMessage:
-            "Throughout my career, I have gained valuable experience in developing and maintaining high-load infrastructures over several years.",
+            "Extensive experience in frontend development spanning back to the early 2000s.",
-          id: "YBTD7C",
+          id: "AjT8sf",
-        })}
-        {intl.formatMessage({
-          defaultMessage:
-            "Following the OCI (Open Container Initiative) and leveraging Docker and Kubernetes to create highly available deployments, primarily on the AWS platform, was a challenging and enjoyable experience, that has greatly enhanced my skills in this area.",
-          id: "VRhCte",
         })}
       </Skill>
       <Spacer withDivider />

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

@@ -6,6 +6,10 @@ import { hideNavigationMQ } from "./navigationBreakpoint";
 
 const Root = styled("div")({
   background: "rgb(215, 215, 215)",
+  "@media print": {
+    // Nav background
+    background: "rgb(41, 62, 73)",
+  },
 });
 
 const Container = styled("div")({

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

@@ -93,6 +93,20 @@ const MainNavigation: React.FC = () => {
         })}
       </NavigationHeadline>
 
+      <Spacer />
+
+      <List>
+        <ListItem>
+          {intl.formatMessage(
+            {
+              defaultMessage: "If there is a need,{br}there is a path.",
+              id: "Wg8h9t",
+            },
+            { br: <br /> },
+          )}
+        </ListItem>
+      </List>
+
       <NavigationHeadline href="#skills">
         {intl.formatMessage({
           defaultMessage: "Top Skills",

app/frontend/src/views/Dashboard.tsx

@@ -43,9 +43,10 @@ const Dashboard: React.FC = () => {
         <Summary />
       </Content>
 
-      <div id="skills" />
       <Spacer withDivider />
 
+      <div id="skills" />
+
       <Headline level={2}>
         {intl.formatMessage({
           defaultMessage: "Skills",
@@ -57,9 +58,10 @@ const Dashboard: React.FC = () => {
         <Skills />
       </Content>
 
-      <div id="experience" />
       <Spacer withDivider />
 
+      <div id="experience" />
+
       <Headline level={2}>
         {intl.formatMessage({
           defaultMessage: "Experience",

flake.nix

@@ -28,7 +28,7 @@
               npm run check
             '';
             npmInstallFlags = "--no-audit --no-progress --no-fund";
-            npmDepsHash = "sha256-yINvhHFYT00khqo9D3rIDNSvJMdhQ1M5xa9SJEDZito=";
+            npmDepsHash = "sha256-P+TNtlilrzlnkclZtYrG163ucEavm9koei69ZG3sOSM=";
             npmPackFlags = [ "--ignore-scripts" ];
           };
 
@@ -73,13 +73,13 @@
 
       devShells = nix.lib.forAllSystems (pkgs: {
         default = nix.lib.mkDevenvShell {
+          inherit pkgs;
+
           inputs = {
             self = self;
             nixpkgs = pkgs;
           };
 
-          pkgs = pkgs;
-
           modules = [
             {
               packages = [
@@ -88,7 +88,7 @@
               ];
 
               enterShell = ''
-                cp ${nix.lib.eslint-config-file} ./app/frontend/eslint.shared.mjs
+                cp -f ${nix.lib.eslint-config-file} ./app/frontend/eslint.shared.mjs
               '';
 
               scripts = {