Feature/update 24 07 2023

package.json

@@ -20,36 +20,36 @@
   "dependencies": {
     "@fontsource/open-sans": "^4.5.14",
     "@fontsource/source-serif-pro": "^4.5.9",
-    "babel-plugin-styled-components": "^2.1.1",
-    "gatsby": "^5.9.0",
-    "gatsby-plugin-layout": "^4.9.0",
-    "gatsby-plugin-manifest": "^5.9.0",
-    "gatsby-plugin-react-helmet": "^6.9.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "gatsby": "^5.11.0",
+    "gatsby-plugin-layout": "^4.11.0",
+    "gatsby-plugin-manifest": "^5.11.0",
+    "gatsby-plugin-react-helmet": "^6.11.0",
     "gatsby-plugin-react-svg": "^3.3.0",
-    "gatsby-plugin-styled-components": "^6.9.0",
+    "gatsby-plugin-styled-components": "^6.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "styled-components": "^5.3.10",
+    "styled-components": "^6.0.5",
     "styled-media-query": "^2.1.2",
-    "styled-reset-advanced": "^1.0.3"
+    "styled-reset-advanced": "^1.0.3",
+    "stylis": "^4.3.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
     "@types/react-helmet": "^6.1.6",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.49.0",
-    "eslint": "^8.39.0",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.8",
-    "typescript": "^5.0.4"
+    "prettier": "^3.0.0",
+    "typescript": "^5.1.6"
   }
 }

src/components/atoms/Title/Title.tsx

@@ -22,21 +22,21 @@ export const Title: FunctionComponent<TitleProps> = ({
   size = TitleSizes.small,
   tag = "h3",
 }) => (
-  <StyledTitle as={tag} hasUnderline={hasUnderline} size={size}>
+  <StyledTitle $hasUnderline={hasUnderline} as={tag} size={size}>
     {children}
   </StyledTitle>
 );
 
 interface StyledTitleProps {
-  hasUnderline: boolean;
+  $hasUnderline: boolean;
   size: TitleSizes;
 }
 
 const StyledTitle = styled.h3<StyledTitleProps>`
   font-family: ${({ theme }) => theme.secondaryFont};
 
-  ${({ hasUnderline, theme }) =>
-    hasUnderline &&
+  ${({ $hasUnderline, theme }) =>
+    $hasUnderline &&
     underline({
       backgroundColor: theme.primaryBackgroundColor,
       color: theme.primaryTextColor,

src/components/layouts/Introduction/Introduction.tsx

@@ -53,12 +53,12 @@ export const Introduction: FunctionComponent = () => (
       After two fun years at code d'azur I was approached for a lead role
       at Touchtribe and decided to go for it. At Touchtribe I was the lead
       developer on multiple projects which was really improving my management
-      skills.
+      and leadership skills.
     </Paragraph>
     <Paragraph>
       Six months after I started at Touchtribe I was promoted to a team lead.
       This basically meant I would keep the same responsibilities as before but
-      I would also start guiding a team of developers. In my case my team
+      I would also start leading a team of developers. In my case my team
       consisted entirely of junior developers which were a lot of fun to guide.
     </Paragraph>
     <Paragraph>

src/components/layouts/PersonalInterests/PersonalInterests.tsx

@@ -12,7 +12,7 @@ export const PersonalInterests: FunctionComponent = () => (
     </Paragraph>
     <Paragraph>
       When I&apos;m not on a basketball court, skateboard or yoga mat, I&apos;m
-      spending most of my time with my girlfriend and our two-year old son Eden
+      spending most of my time with my girlfriend and our four-year old son Eden
       👼.
     </Paragraph>
     <Paragraph>

src/components/molecules/Toggle/Toggle.tsx

@@ -11,13 +11,13 @@ export const Toggle: FunctionComponent<ToggleProps> = ({
   isChecked,
   onChange,
 }) => (
-  <StyledToggle isChecked={isChecked}>
+  <StyledToggle $isChecked={isChecked}>
     <input checked={isChecked} onChange={onChange} type="checkbox" />
   </StyledToggle>
 );
 
 interface StyledToggleProps {
-  isChecked: boolean;
+  $isChecked: boolean;
 }
 
 const StyledToggle = styled.div<StyledToggleProps>`
@@ -52,8 +52,8 @@ const StyledToggle = styled.div<StyledToggleProps>`
     transition: transform 200ms ease-out;
   }
 
-  ${({ isChecked }) =>
-    isChecked &&
+  ${({ $isChecked }) =>
+    $isChecked &&
     css`
       background-color: ${({ theme }) => theme.primaryAccentColor};
 

src/styles/mixins/underline.ts

@@ -1,20 +1,29 @@
 // This mixin is based on https://eager.io/blog/smarter-link-underlines/
-import { css, FlattenSimpleInterpolation } from "styled-components";
+import { css } from "styled-components";
 
-export const textShadowToCropUnderline = (
-  backgroundColor: string
-): FlattenSimpleInterpolation => css`
-  text-shadow: 0 0.03em ${backgroundColor}, 0 -0.03em ${backgroundColor},
-    0.03em 0 ${backgroundColor}, -0.03em 0 ${backgroundColor},
-    0.06em 0 ${backgroundColor}, -0.06em 0 ${backgroundColor},
-    0.09em 0 ${backgroundColor}, -0.09em 0 ${backgroundColor},
-    0.12em 0 ${backgroundColor}, -0.12em 0 ${backgroundColor},
-    0.15em 0 ${backgroundColor}, -0.15em 0 ${backgroundColor},
-    0.18em 0 ${backgroundColor}, -0.18em 0 ${backgroundColor};
+export const textShadowToCropUnderline = (backgroundColor: string) => css`
+  text-shadow:
+    0 0.03em ${backgroundColor},
+    0 -0.03em ${backgroundColor},
+    0.03em 0 ${backgroundColor},
+    -0.03em 0 ${backgroundColor},
+    0.06em 0 ${backgroundColor},
+    -0.06em 0 ${backgroundColor},
+    0.09em 0 ${backgroundColor},
+    -0.09em 0 ${backgroundColor},
+    0.12em 0 ${backgroundColor},
+    -0.12em 0 ${backgroundColor},
+    0.15em 0 ${backgroundColor},
+    -0.15em 0 ${backgroundColor},
+    0.18em 0 ${backgroundColor},
+    -0.18em 0 ${backgroundColor};
 `;
 
-export const animateUnderline = (): FlattenSimpleInterpolation => css`
-  background-size: 0.05em 1px, 0.05em 1px, 100% 1px;
+export const animateUnderline = () => css`
+  background-size:
+    0.05em 1px,
+    0.05em 1px,
+    100% 1px;
 `;
 
 export const underline = ({
@@ -27,20 +36,29 @@ export const underline = ({
   backgroundColor: string;
   color: string;
   underlinePosition?: string;
-}): FlattenSimpleInterpolation => css`
+}) => css`
   ${textShadowToCropUnderline(backgroundColor)}
   background-image: linear-gradient(${backgroundColor}, ${backgroundColor}),
         linear-gradient(${backgroundColor}, ${backgroundColor}),
         linear-gradient(${color}, ${color});
-  background-position: 0 90%, 100% 90%, 0 ${underlinePosition};
+  background-position:
+    0 90%,
+    100% 90%,
+    0 ${underlinePosition};
   background-repeat: no-repeat, no-repeat, no-repeat;
 
   ${animate
     ? css`
         transition: background-size 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        background-size: 0.05em 1px, 0.05em 1px, 0 1px;
+        background-size:
+          0.05em 1px,
+          0.05em 1px,
+          0 1px;
       `
     : css`
-        background-size: 0.05em 1px, 0.05em 1px, 100% 1px;
+        background-size:
+          0.05em 1px,
+          0.05em 1px,
+          100% 1px;
       `}
 `;