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

1 files changed, 23 insertions, 5 deletions

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<