build: improve bundle size

* add `sideEffects` in package.json to activate tree shaking for
barrel files
* use dynamic imports on social links and icons
* resize social media images
* resize large project image (demo apcom)
* resize website logo

4 files changed, 94 insertions, 32 deletions

diff --git a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
index 88de5ef..97e4ea5 100644
--- a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
+++ b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
@@ -1,21 +1,62 @@
-import type { FC } from 'react';
-import {
-  ArrowIconPaths,
-  type ArrowOrientation,
-  CCBySAIconPaths,
-  CareerIconPaths,
-  CogIconPaths,
-  ComputerIconPaths,
-  EnvelopIconPaths,
-  FeedIconPaths,
-  HomeIconPaths,
-  MagnifyingGlassIconPaths,
-  MoonIconPaths,
-  PostsStackIconPaths,
-  SunIconPaths,
-  CrossIconPaths,
-  HelpIconPaths,
-} from './icons-paths';
+import dynamic from 'next/dynamic';
+import type { ComponentType, FC } from 'react';
+import type { ArrowOrientation, ArrowProps } from './icons-paths';
+
+const ArrowIconPaths: ComponentType<ArrowProps> = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.ArrowIconPaths)
+);
+
+const CCBySAIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.CCBySAIconPaths)
+);
+
+const CareerIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.CareerIconPaths)
+);
+
+const CogIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.CogIconPaths)
+);
+
+const ComputerIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.ComputerIconPaths)
+);
+
+const CrossIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.CrossIconPaths)
+);
+
+const EnvelopIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.EnvelopIconPaths)
+);
+
+const FeedIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.FeedIconPaths)
+);
+
+const HelpIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.HelpIconPaths)
+);
+
+const HomeIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.HomeIconPaths)
+);
+
+const MagnifyingGlassIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.MagnifyingGlassIconPaths)
+);
+
+const MoonIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.MoonIconPaths)
+);
+
+const PostsStackIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.PostsStackIconPaths)
+);
+
+const SunIconPaths = dynamic(async () =>
+  import('./icons-paths').then((mod) => mod.SunIconPaths)
+);
 
 export type SVGIconOrientation = ArrowOrientation;
 
diff --git a/src/components/atoms/images/logo/logo.module.scss b/src/components/atoms/images/logo/logo.module.scss
index beeb7ff..427e85b 100644
--- a/src/components/atoms/images/logo/logo.module.scss
+++ b/src/components/atoms/images/logo/logo.module.scss
@@ -18,11 +18,11 @@
 .letter {
   fill: var(--color-fg-inverted);
   stroke: var(--color-primary-darker);
-  stroke-width: 5;
+  stroke-width: 1;
 }
 
 .letter-shadow {
   fill: var(--color-shadow-darker);
   stroke: var(--color-shadow-darker);
-  stroke-width: 5;
+  stroke-width: 1;
 }
diff --git a/src/components/atoms/images/logo/logo.tsx b/src/components/atoms/images/logo/logo.tsx
index 5c575a5..bf9c890 100644
--- a/src/components/atoms/images/logo/logo.tsx
+++ b/src/components/atoms/images/logo/logo.tsx
@@ -20,27 +20,30 @@ export const Logo: FC<LogoProps> = ({ heading, ...props }) => (
     {...props}
     className={styles.wrapper}
     role="img"
-    viewBox="0 0 512 512"
+    viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
   >
     {heading ? <title>{heading}</title> : null}
-    <path className={styles['bg-left']} d="M 0,0 H 506 L 0,506 Z" />
-    <path className={styles['bg-right']} d="M 512,512 H 6 L 512,6 Z" />
+    <path className={styles['bg-left']} d="M 0,0 H 98.828125 L 0,98.828125 Z" />
+    <path
+      className={styles['bg-right']}
+      d="M 100,100 H 1.171875 L 100,1.171875 Z"
+    />
     <path
       className={styles['letter-shadow']}
-      d="m 66.049088,353.26557 h 57.233082 l 15.4763,-40.00476 h 56.64908 l 15.76831,40.00476 h 57.2331 L 196.28357,165.21398 h -58.10911 z m 80.009522,-79.42552 21.02441,-55.18904 21.02439,55.18904 z"
+      d="m 12.900213,68.997182 h 11.178336 l 3.022715,-7.81343 h 11.064273 l 3.079748,7.81343 h 11.17834 L 38.336635,32.268355 H 26.987199 Z m 15.626859,-15.512797 4.10633,-10.77911 4.106327,10.77911 z"
     />
     <path
       className={styles.letter}
-      d="m 59.569539,346.78602 h 57.233081 l 15.4763,-40.00476 H 188.928 l 15.76831,40.00476 h 57.2331 L 189.80402,158.73443 h -58.10911 z m 80.009521,-79.42552 21.02441,-55.18904 21.02439,55.18904 z"
+      d="m 11.634676,67.731645 h 11.178336 l 3.022715,-7.81343 H 36.9 l 3.079748,7.81343 h 11.17834 L 37.071098,31.002818 H 25.721662 Z m 15.626859,-15.512797 4.10633,-10.77911 4.106326,10.77911 z"
     />
     <path
       className={styles['letter-shadow']}
-      d="m 288.84935,353.26557 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.32931 0,-38.5447 -21.60841,-69.20532 -67.74528,-69.20532 h -96.94586 z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15651 0,15.47629 -8.46817,26.28049 -25.40449,26.28049 z"
+      d="m 56.415889,68.997182 h 10.722078 v -9.866594 h 7.984527 c 8.212658,0 13.459633,-5.589168 13.459633,-13.345568 0,-7.528262 -4.220393,-13.516665 -13.2315,-13.516665 H 56.415889 Z M 67.137967,50.917928 V 40.481014 h 5.817301 c 3.19381,0 4.676652,2.053166 4.676652,5.304006 0,3.022712 -1.65394,5.132908 -4.961815,5.132908 z"
     />
     <path
       className={styles.letter}
-      d="m 282.3698,346.78602 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.3293 0,-38.54471 -21.60841,-69.20533 -67.74528,-69.20533 H 282.3698 Z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15652 0,15.47628 -8.46817,26.28048 -25.40449,26.28048 z"
+      d="M 55.150352,67.731645 H 65.87243 v -9.866594 h 7.984527 c 8.212658,0 13.459633,-5.589168 13.459633,-13.345567 0,-7.528263 -4.220393,-13.516666 -13.2315,-13.516666 H 55.150352 Z M 65.87243,49.652391 V 39.215477 h 5.8173 c 3.193811,0 4.676653,2.053166 4.676653,5.304007 0,3.022711 -1.65394,5.132907 -4.961815,5.132907 z"
     />
   </svg>
 );
diff --git a/src/components/atoms/links/social-link/social-link.tsx b/src/components/atoms/links/social-link/social-link.tsx
index 1da1e7d..89ecee3 100644
--- a/src/components/atoms/links/social-link/social-link.tsx
+++ b/src/components/atoms/links/social-link/social-link.tsx
@@ -1,10 +1,28 @@
-import type { AnchorHTMLAttributes, FC } from 'react';
-import GithubIcon from '../../../../assets/images/social-media/github.svg';
-import GitlabIcon from '../../../../assets/images/social-media/gitlab.svg';
-import LinkedInIcon from '../../../../assets/images/social-media/linkedin.svg';
-import TwitterIcon from '../../../../assets/images/social-media/twitter.svg';
+import dynamic from 'next/dynamic';
+import type {
+  AnchorHTMLAttributes,
+  ComponentType,
+  FC,
+  SVGAttributes,
+} from 'react';
 import styles from './social-link.module.scss';
 
+const GithubIcon: ComponentType<SVGAttributes<SVGElement>> = dynamic(
+  async () => import('../../../../assets/images/social-media/github.svg')
+);
+
+const GitlabIcon: ComponentType<SVGAttributes<SVGElement>> = dynamic(
+  async () => import('../../../../assets/images/social-media/gitlab.svg')
+);
+
+const LinkedInIcon: ComponentType<SVGAttributes<SVGElement>> = dynamic(
+  async () => import('../../../../assets/images/social-media/linkedin.svg')
+);
+
+const TwitterIcon: ComponentType<SVGAttributes<SVGElement>> = dynamic(
+  async () => import('../../../../assets/images/social-media/twitter.svg')
+);
+
 export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter';
 
 export type SocialLinkProps = Omit<