From 4d611a554e71a60892f65bae5a0fa8643471c2f0 Mon Sep 17 00:00:00 2001
From: Han Yeong-woo <han@yeongwoo.dev>
Date: Mon, 18 Sep 2023 14:47:21 +0900
Subject: [PATCH 1/4] design: add color token bg-backdrop

---
 apps/portfolio/tailwind.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/portfolio/tailwind.config.ts b/apps/portfolio/tailwind.config.ts
index 4d449f5..ab8a173 100644
--- a/apps/portfolio/tailwind.config.ts
+++ b/apps/portfolio/tailwind.config.ts
@@ -48,6 +48,7 @@ const config = {
       primary: {
         DEFAULT: COLORS.zinc['900'],
       },
+      backdrop: 'rgb(0 0 0 / 0.4)',
     },
 
     textColor: {

From 107bb4329dd15fcfb1cd861467a56340f8b2b478 Mon Sep 17 00:00:00 2001
From: Han Yeong-woo <han@yeongwoo.dev>
Date: Tue, 19 Sep 2023 06:44:09 +0900
Subject: [PATCH 2/4] design: re-define tailwind wordBreak utilities

---
 apps/portfolio/tailwind.config.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/apps/portfolio/tailwind.config.ts b/apps/portfolio/tailwind.config.ts
index ab8a173..bd1ee7e 100644
--- a/apps/portfolio/tailwind.config.ts
+++ b/apps/portfolio/tailwind.config.ts
@@ -14,6 +14,7 @@ const config = {
   content: ['./src/**/*.astro'],
   corePlugins: {
     preflight: false,
+    wordBreak: false,
   },
 
   theme: {
@@ -106,6 +107,23 @@ const config = {
         '.scheme-dark': {
           colorScheme: 'dark',
         },
+
+        '.break-normal': {
+          wordBreak: 'normal',
+          overflowWrap: 'normal',
+        },
+        '.break-all': {
+          wordBreak: 'break-all',
+        },
+        '.break-keep': {
+          wordBreak: 'keep-all',
+        },
+        '.break-overflow-word': {
+          overflowWrap: 'break-word',
+        },
+        '.break-overflow-anywhere': {
+          overflowWrap: 'anywhere',
+        },
       });
     }),
   ],

From 3e94b648f2746bc637b7715655fc1772ec5b394e Mon Sep 17 00:00:00 2001
From: Han Yeong-woo <han@yeongwoo.dev>
Date: Tue, 19 Sep 2023 19:39:27 +0900
Subject: [PATCH 3/4] design: add color token text-icon-brand

---
 apps/portfolio/tailwind.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/portfolio/tailwind.config.ts b/apps/portfolio/tailwind.config.ts
index bd1ee7e..8d618c0 100644
--- a/apps/portfolio/tailwind.config.ts
+++ b/apps/portfolio/tailwind.config.ts
@@ -72,6 +72,9 @@ const config = {
         primary: {
           DEFAULT: COLORS.zinc['200'],
         },
+        brand: {
+          DEFAULT: COLORS.brand,
+        },
       },
     },
 

From 8e122646bca9b31aa4ba84f95a96a23e1c4e94ce Mon Sep 17 00:00:00 2001
From: Han Yeong-woo <han@yeongwoo.dev>
Date: Tue, 19 Sep 2023 19:39:45 +0900
Subject: [PATCH 4/4] feat: not ready modal

---
 apps/portfolio/src/components/Header.astro    |  12 +-
 .../src/components/NotReadyDialogButton.astro |  90 +++++++
 apps/portfolio/src/components/WorkCard.astro  |  10 +-
 .../src/components/pages/index/About.astro    |  12 +-
 .../src/components/svgs/ProcessBuilding.astro | 238 ++++++++++++++++++
 .../src/components/svgs/icons/XIcon.astro     |  13 +
 6 files changed, 363 insertions(+), 12 deletions(-)
 create mode 100644 apps/portfolio/src/components/NotReadyDialogButton.astro
 create mode 100644 apps/portfolio/src/components/svgs/ProcessBuilding.astro
 create mode 100644 apps/portfolio/src/components/svgs/icons/XIcon.astro

diff --git a/apps/portfolio/src/components/Header.astro b/apps/portfolio/src/components/Header.astro
index ebd9e19..139eefa 100644
--- a/apps/portfolio/src/components/Header.astro
+++ b/apps/portfolio/src/components/Header.astro
@@ -3,6 +3,7 @@ import Links from '../core/links.js';
 import Button from './Button.astro';
 import InternalLink from './InternalLink.astro';
 import { listIconPath } from './svgs/icons/icon-path.js';
+import NotReadyDialogButton from './NotReadyDialogButton.astro';
 
 export type { Props as HeaderProps };
 
@@ -56,12 +57,19 @@ const NAV_ID = 'nav-menu';
     >
       작업물
     </InternalLink>
-    <a
+    {/* TODO: Uncomment */}
+    {
+      /* <a
       href="https://blog.yeongwoo.dev/"
       class="block p-6 text-[1.5rem] font-bold text-secondary"
+    > */
+    }
+    <NotReadyDialogButton
+      class="w-full p-6 text-[1.5rem] font-bold text-secondary"
     >
       블로그
-    </a>
+    </NotReadyDialogButton>
+    {/* </a> */}
   </nav>
 </header>
 
diff --git a/apps/portfolio/src/components/NotReadyDialogButton.astro b/apps/portfolio/src/components/NotReadyDialogButton.astro
new file mode 100644
index 0000000..b023a4e
--- /dev/null
+++ b/apps/portfolio/src/components/NotReadyDialogButton.astro
@@ -0,0 +1,90 @@
+---
+import Button from './Button.astro';
+import ProcessBuilding from './svgs/ProcessBuilding.astro';
+import XIcon from './svgs/icons/XIcon.astro';
+
+interface Props {
+  class?: string;
+}
+
+const { class: className } = Astro.props;
+---
+
+<not-ready-dialog-button>
+  <button
+    type="button"
+    data-open-button
+    class:list={[
+      'block cursor-pointer border-0 bg-transparent text-start leading-[inherit]',
+      className,
+    ]}
+  >
+    <slot />
+  </button>
+
+  <dialog
+    class="mx-auto mb-auto mt-16 max-h-none max-w-none bg-transparent backdrop:bg-backdrop"
+  >
+    <div class="relative rounded-lg bg-primary p-12">
+      <Button
+        data-close-button
+        aria-label="모달 닫기"
+        class="absolute right-3 top-3"
+      >
+        <XIcon width="2rem" height="2rem" />
+      </Button>
+      <div class="flex flex-col items-center gap-8">
+        <ProcessBuilding
+          width="12.3125rem"
+          height="11.1875rem"
+          aria-hidden="true"
+          class="h-auto w-full max-w-[12.3125rem] text-icon-brand"
+        />
+
+        <p
+          class="text-center text-[1.5rem] font-bold text-primary break-keep break-overflow-anywhere"
+        >
+          아직 준비되지 않은 콘텐츠입니다!
+        </p>
+      </div>
+    </div>
+  </dialog>
+</not-ready-dialog-button>
+
+<script>
+  class NotReadyDialogButton extends HTMLElement {
+    constructor() {
+      super();
+
+      const SELF_NAME = 'NotReadyDialogButton';
+
+      const dialogEl = this.querySelector('dialog');
+      if (!(dialogEl instanceof HTMLDialogElement)) {
+        throw new Error(`Can not find dialogEl in ${SELF_NAME}`);
+      }
+      dialogEl.addEventListener('click', (e) => {
+        if (e.target === e.currentTarget) {
+          dialogEl.close();
+        }
+      });
+
+      const openButtonEl = this.querySelector('button[data-open-button]');
+      if (!(openButtonEl instanceof HTMLButtonElement)) {
+        throw new Error(`Can not find openButtonEl in ${SELF_NAME}`);
+      }
+      openButtonEl.addEventListener('click', () => {
+        dialogEl.showModal();
+      });
+
+      const closeButtonEl = this.querySelector('button[data-close-button]');
+      if (!(closeButtonEl instanceof HTMLButtonElement)) {
+        throw new Error(`Can not find closeButtonEl in ${SELF_NAME}`);
+      }
+      closeButtonEl.addEventListener('click', () => {
+        dialogEl.close();
+      });
+    }
+  }
+
+  customElements.define('not-ready-dialog-button', NotReadyDialogButton);
+</script>
diff --git a/apps/portfolio/src/components/WorkCard.astro b/apps/portfolio/src/components/WorkCard.astro
index 17b8d7c..0e50497 100644
--- a/apps/portfolio/src/components/WorkCard.astro
+++ b/apps/portfolio/src/components/WorkCard.astro
@@ -1,8 +1,7 @@
 ---
 import { Image } from 'astro:assets';
 import { getEntries } from 'astro:content';
-import Links from '../core/links.js';
-import InternalLink from './InternalLink.astro';
+import NotReadyDialogButton from './NotReadyDialogButton.astro';
 import TechIcon from './svgs/icons/TechIcon.astro';
 
 import type { CollectionEntry } from 'astro:content';
@@ -22,7 +21,9 @@ const techs = await getEntries(work.data.techs);
 ---
 
 <article class={className}>
-  <InternalLink href={Links.work(work.slug)} class="block">
+  <NotReadyDialogButton>
+    {/* TODO: Uncomment */}
+    {/* <InternalLink href={Links.work(work.slug)} class="block"> */}
     <Image
       src={work.data.cover}
       alt="썸네일"
@@ -55,5 +56,6 @@ const techs = await getEntries(work.data.techs);
         }
       </ul>
     </div>
-  </InternalLink>
+    {/* </InternalLink> */}
+  </NotReadyDialogButton>
 </article>
diff --git a/apps/portfolio/src/components/pages/index/About.astro b/apps/portfolio/src/components/pages/index/About.astro
index c63e975..ae82ea9 100644
--- a/apps/portfolio/src/components/pages/index/About.astro
+++ b/apps/portfolio/src/components/pages/index/About.astro
@@ -1,7 +1,6 @@
 ---
 import EnvelopeSimpleIcon from '../../svgs/icons/EnvelopeSimpleIcon.astro';
 import GitHubIcon from '../../svgs/icons/GitHubIcon.astro';
-import PencilSimpleLineIcon from '../../svgs/icons/PencilSimpleLineIcon.astro';
 
 import type { IconProps } from '../../svgs/types.js';
 
@@ -28,11 +27,12 @@ const contacts: Contact[] = [
     name: 'Email',
     href: 'mailto:han@yeongwoo.dev',
   },
-  {
-    icon: PencilSimpleLineIcon,
-    name: 'Blog',
-    href: 'https://blog.yeongwoo.dev',
-  },
+  // TODO: Uncomment
+  // {
+  //   icon: PencilSimpleLineIcon,
+  //   name: 'Blog',
+  //   href: 'https://blog.yeongwoo.dev',
+  // },
 ];
 ---
 
diff --git a/apps/portfolio/src/components/svgs/ProcessBuilding.astro b/apps/portfolio/src/components/svgs/ProcessBuilding.astro
new file mode 100644
index 0000000..4231e48
--- /dev/null
+++ b/apps/portfolio/src/components/svgs/ProcessBuilding.astro
@@ -0,0 +1,238 @@
+---
+// From: https://www.manypixels.co/gallery
+
+import type { IconProps } from './types.js';
+
+type Props = IconProps;
+---
+
+<svg viewBox="0 0 197 179" {...Astro.props}>
+  <path
+    fill="#ffc9b0"
+    d="M65.16 113.246c-3.49 3.74-6.73 7.73-10 11.71l-14.86-13.45c-3.67-3.33-11.05-10.23-6.26-15.31a10.431 10.431 0 0 1 2.83-1.78c2.19-1.17 4.39-2.93 6.85-2.53a8.071 8.071 0 0 1 3.92 2.33 54.208 54.208 0 0 1 5.44 5.16c1.39 1.66 1.06 2.56 1.93 4.35.87 1.79 3.17 3.21 4.64 4.54l5.51 4.98Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M55.18 125.946a1 1 0 0 1-.67-.25l-7.86-7.11-7-6.35c-2.59-2.34-8-7.2-8.16-12a6.29 6.29 0 0 1 1.83-4.71 8.542 8.542 0 0 1 2.51-1.69l.6-.33 1.31-.75c1.81-1.06 3.86-2.26 6.17-1.89a9.05 9.05 0 0 1 4.43 2.57c.41.37.83.75 1.26 1.12a40.008 40.008 0 0 1 4.28 4.15 6.888 6.888 0 0 1 1.48 2.94c.138.555.332 1.094.58 1.61a11.427 11.427 0 0 0 3 3.08c.49.4 1 .79 1.39 1.16l5.5 5a1 1 0 0 1 .06 1.43c-3.28 3.52-6.4 7.33-9.42 11l-.52.64a1.007 1.007 0 0 1-.7.36l-.07.02Zm-14.21-15.19 7 6.35 7.08 6.4c2.78-3.4 5.65-6.9 8.67-10.2l-4.76-4.31c-.38-.34-.83-.71-1.3-1.08a12.758 12.758 0 0 1-3.57-3.77 9.949 9.949 0 0 1-.7-1.94 4.883 4.883 0 0 0-1.09-2.19 37.84 37.84 0 0 0-4.06-3.93l-1.29-1.14a7.31 7.31 0 0 0-3.41-2.09c-1.6-.26-3.17.67-4.84 1.65-.46.27-.92.54-1.38.78l-.61.32a6.9 6.9 0 0 0-2 1.27 4.381 4.381 0 0 0-1.29 3.26c.16 4 5.31 8.63 7.5 10.62h.05Z"
+  ></path>
+  <path
+    fill="#fff"
+    d="M59.32 107.036s15.35 10.31 18.2 11.74c0 0 16.35-19.93 33.59-19.93H130c10.93 0 19.78 9.77 19.78 21.83v33.89H94.05v-22.06c-7.74 4.4-12.12 7-15.66 7.79-5 1.15-10.88-2.72-27.13-19.44l8.06-13.82Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M149.78 155.566H94.05a1.002 1.002 0 0 1-1-1v-20.36c-6.84 3.89-11 6.24-14.43 7-5.65 1.3-11.95-3.12-28.08-19.72a1.002 1.002 0 0 1-.15-1.2l8.04-13.78a1.002 1.002 0 0 1 1.044-.482.989.989 0 0 1 .376.152c.15.1 13.44 9 17.42 11.31a78.947 78.947 0 0 1 9.94-9.48c5.82-4.65 14.68-10.19 23.88-10.19h18.89c11.46 0 20.78 10.24 20.78 22.83v33.89a1.004 1.004 0 0 1-.275.719.99.99 0 0 1-.705.311Zm-54.73-2h53.73v-32.89c0-11.49-8.42-20.83-18.78-20.83h-18.89c-16.56 0-32.65 19.37-32.81 19.57a1 1 0 0 1-1.23.26c-2.5-1.26-14.08-9-17.43-11.21l-7.14 12.21c14.77 15.16 21 19.69 25.67 18.62 3.18-.74 7.27-3.06 14-6.91l1.35-.77a1 1 0 0 1 1.49.87l.04 21.08Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="m118.712 106.27-1.545-.215a4.409 4.409 0 0 1-3.76-4.976l.827-5.942 10.311 1.434-.827 5.943a4.416 4.416 0 0 1-3.28 3.666 4.422 4.422 0 0 1-1.726.09Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M119.34 107.306a6.437 6.437 0 0 1-.76-.05l-1.55-.22a5.413 5.413 0 0 1-4.61-6.1l.82-5.91a.99.99 0 0 1 .39-.66 1 1 0 0 1 .74-.19l10.28 1.43a.999.999 0 0 1 .85 1.12l-.82 5.92a5.408 5.408 0 0 1-5.34 4.66Zm-2-2.25 1.55.22a3.408 3.408 0 0 0 3.85-2.91l.68-4.92-8.3-1.16-.68 4.93a3.401 3.401 0 0 0 2.9 3.84Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="M104.299 65.641c.661-4.753-2.253-9.087-6.509-9.679-4.256-.592-8.242 2.782-8.903 7.535-.661 4.754 2.253 9.087 6.508 9.68 4.256.591 8.242-2.782 8.904-7.536Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M96.43 74.246a6.985 6.985 0 0 1-1.12-.08 8.309 8.309 0 0 1-5.88-3.66 10.42 10.42 0 0 1 1.88-13.49 8.31 8.31 0 0 1 6.58-2c4.79.67 8.09 5.52 7.36 10.81a10.18 10.18 0 0 1-3.45 6.39 8.38 8.38 0 0 1-5.37 2.03Zm.44-17.35a6.47 6.47 0 0 0-4.18 1.6 8.2 8.2 0 0 0-2.76 5.14 8.23 8.23 0 0 0 1.25 5.71 6.23 6.23 0 0 0 9.42 1.31 8.217 8.217 0 0 0 2.76-5.15c.58-4.2-1.95-8-5.65-8.55a5.941 5.941 0 0 0-.89-.06h.05Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="M159.05 44.796c-.69 8.66-2.2 23.89-6 31.38-6.53 12.9-20.45 24-33.7 22.17a27.32 27.32 0 0 1-22.83-19.12 33.408 33.408 0 0 1-1.19-14.93s-.41-3.66 2.22-17.33c2.63-13.67 4.15-20.79 31.15-21.36 20.83-.43 31.05 10.52 30.35 19.19Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M122.05 99.506c-.95.003-1.899-.06-2.84-.19a28.402 28.402 0 0 1-23.64-19.81 34.59 34.59 0 0 1-1.24-15.26c-.06-.81-.15-5.1 2.24-17.49 2.59-13.46 4.15-21.58 32.11-22.17 15.67-.31 23.55 5.51 26.85 9 3.3 3.49 4.83 7.41 4.52 11.25-1.27 15.76-3.26 26.14-6.11 31.75-7.82 15.5-21.38 22.92-31.89 22.92Zm7.81-72.93h-1.14c-26.34.56-27.62 7.24-30.19 20.55-2.57 13.31-2.21 17-2.2 17 .005.08.005.16 0 .24a32.62 32.62 0 0 0 1.1 14.55 26.446 26.446 0 0 0 22 18.44c13.19 1.83 26.68-9.78 32.68-21.63 4-8 5.44-25.32 5.9-31 .26-3.27-1.15-6.72-4-9.72-4.99-5.37-13.77-8.41-24.15-8.41v-.02Z"
+  ></path>
+  <path
+    fill="#725858"
+    d="M108.74 73.976c3.59-.71 13.34-.5 17.94 2.63 6.08 4.14 2.25 9 7.62 7.91 3.73-.74 4.82-.92 7.32-3.81 3.29-3.79 3.21-9.47 4-14.22a14.16 14.16 0 0 1 1.48-4.89 7.152 7.152 0 0 1 7.06-3.29c9.58 1.52 4.19 14 2.73 19.65l-4.16-.58-.35 3.4a31.917 31.917 0 0 1-33.06 17.57 27.32 27.32 0 0 1-22.83-19.12c1.241.411 2.507.745 3.79 1 3.66.64 2.2-2.79 5.52-5.08a7.792 7.792 0 0 1 2.94-1.17Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M123.87 99.656a33.369 33.369 0 0 1-4.66-.32 28.4 28.4 0 0 1-23.64-19.83 1 1 0 0 1 .24-1 1.001 1.001 0 0 1 1-.25c1.199.406 2.421.74 3.66 1 1.32.23 1.44 0 2-1.32a7.878 7.878 0 0 1 2.77-3.6 8.71 8.71 0 0 1 3.29-1.32c3.95-.78 13.84-.51 18.7 2.79a10.231 10.231 0 0 1 4.41 6.25c.49 1.66.55 1.87 2.45 1.5h.15c3.53-.7 4.36-.86 6.61-3.45 2.25-2.59 2.85-6.65 3.33-10.45.14-1.09.28-2.22.47-3.3a14.843 14.843 0 0 1 1.61-5.22 8.135 8.135 0 0 1 8.07-3.77 7.123 7.123 0 0 1 5.21 3.14c2.49 4 .52 10.45-.92 15.17-.29 1-.56 1.83-.75 2.58a1.002 1.002 0 0 1-1.11.74l-3.13-.44-.24 2.37c-.017.122-.054.24-.11.35a32.839 32.839 0 0 1-29.41 18.38Zm-25.74-18.91a26.388 26.388 0 0 0 21.35 16.61 30.818 30.818 0 0 0 31.95-16.85l.33-3.21a1 1 0 0 1 1.13-.89l3.29.46c.16-.56.34-1.16.54-1.8 1.32-4.36 3.14-10.33 1.14-13.53a5.165 5.165 0 0 0-3.84-2.22 6.17 6.17 0 0 0-6 2.82 13.234 13.234 0 0 0-1.35 4.54c-.18 1-.31 2.08-.45 3.2-.52 4.09-1 8.32-3.81 11.51-2.81 3.19-4.07 3.38-7.73 4.1h-.16c-3.68.73-4.25-1.2-4.75-2.89a8.241 8.241 0 0 0-3.62-5.17c-4.15-2.83-13.49-3.21-17.19-2.48a6.794 6.794 0 0 0-2.54 1 5.835 5.835 0 0 0-2.07 2.77c-.6 1.32-1.35 3-4.18 2.47-.61-.09-1.29-.24-2.04-.44Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M134.165 65.18a2.815 2.815 0 0 0-2.406-3.172 2.815 2.815 0 0 0-3.18 2.395 2.815 2.815 0 0 0 2.406 3.171 2.815 2.815 0 0 0 3.18-2.394Zm-26.495-.504a2.82 2.82 0 1 0 0-5.64 2.82 2.82 0 0 0 0 5.64Zm15.87 7.04a28.342 28.342 0 0 1-6.92-1 1.822 1.822 0 0 1-1.28-1.32c-.53-2.18 3.11-6.15 4.71-7.76a1 1 0 1 1 1.41 1.42c-2.24 2.26-4.17 4.93-4.19 5.78 2.056.528 4.167.817 6.29.86a1 1 0 0 1 1 1 1 1 0 0 1-1.02 1.02Zm17.36-9.49a2 2 0 0 1-1.95-1.53c-.07-.29-.8-2.6-4.23-3-3.9-.5-5.41.91-5.47 1a2 2 0 0 1-3.272-.513 1.992 1.992 0 0 1 .342-2.218c.28-.31 2.89-3 8.92-2.2 6.33.82 7.56 5.88 7.61 6.09a2.002 2.002 0 0 1-1.51 2.4 2.275 2.275 0 0 1-.44-.03Zm-27.37-5.4a2.003 2.003 0 0 1-1.53-.72 8.32 8.32 0 0 0-5-2.5c-2.34-.22-2.88.75-2.9.79a.557.557 0 0 0 0-.1l-3.67-1.46c.54-1.38 2.62-3.61 6.95-3.21a12.309 12.309 0 0 1 7.72 3.91 1.995 1.995 0 0 1 .285 2.133 1.999 1.999 0 0 1-1.815 1.157h-.04Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="M150.25 66.586s8.07-4.07 11.12 3c3.05 7.07-2.33 17.75-14.05 12.8l2.93-15.8Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M152.98 84.716a15.546 15.546 0 0 1-6-1.36 1 1 0 0 1-.6-1.11l2.93-15.84a1.001 1.001 0 0 1 .53-.71c.18-.09 4.39-2.18 8.17-.8a7.44 7.44 0 0 1 4.31 4.33 11.715 11.715 0 0 1-2.24 12.63 9.685 9.685 0 0 1-7.1 2.86Zm-4.55-2.91c4.16 1.54 7.75 1.07 10.17-1.36a9.815 9.815 0 0 0 1.83-10.43 5.56 5.56 0 0 0-3.17-3.24c-2.36-.86-5.1.08-6.14.51l-2.69 14.52Z"
+  ></path>
+  <path
+    fill="#fff"
+    d="m124.97 82.506-10.37-1.57s-.24 8.61 4 9.75c4.24 1.14 6.37-8.18 6.37-8.18Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M119.28 91.736c-.338 0-.675-.048-1-.14-4.84-1.3-4.73-9.78-4.71-10.74a1 1 0 0 1 1.15-.96l10.4 1.61a1.007 1.007 0 0 1 .82 1.22c-.16.68-1.63 6.64-4.72 8.48a3.672 3.672 0 0 1-1.94.53Zm-3.67-9.69c.11 2.61.8 7 3.22 7.62a1.661 1.661 0 0 0 1.36-.21c1.66-1 2.92-4.19 3.52-6.18l-8.1-1.23Zm-21.56 51.46a1.002 1.002 0 0 1-1-1v-19a.998.998 0 0 1 1-1 .998.998 0 0 1 1 1v19a1.001 1.001 0 0 1-1 1Z"
+  ></path>
+  <path
+    fill="currentColor"
+    d="m128.076 4.577 10.632 1.37a27.102 27.102 0 0 1 23.416 30.34l-1.002 7.776-64.388-8.294 1.002-7.776a27.099 27.099 0 0 1 30.34-23.416Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M161.14 45.046h-.13l-64.39-8.29a1 1 0 0 1-.66-.39.93.93 0 0 1-.2-.73l1-7.78a28.109 28.109 0 0 1 31.46-24.29l10.63 1.37a28.142 28.142 0 0 1 24.28 31.46l-1 7.78a1.002 1.002 0 0 1-.99.87Zm-63.27-10.15 62.4 8 .87-6.78a26.118 26.118 0 0 0-22.55-29.22l-10.63-1.37a26.09 26.09 0 0 0-29.22 22.58l-.87 6.79Z"
+  ></path>
+  <path
+    fill="currentColor"
+    d="M162.728 44.267 95.146 35.56a6.06 6.06 0 0 0-6.784 5.237l-.002.01a6.06 6.06 0 0 0 5.237 6.784l67.581 8.706a6.06 6.06 0 0 0 6.785-5.237l.001-.01a6.06 6.06 0 0 0-5.236-6.784Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M161.96 57.336a7 7 0 0 1-.91-.06l-67.57-8.7a7.06 7.06 0 1 1 1.8-14l67.57 8.7a7.067 7.067 0 0 1 6.11 7.91 7.089 7.089 0 0 1-7 6.15Zm-.65-2a5.07 5.07 0 0 0 5.66-4.38 5.005 5.005 0 0 0-1-3.74 4.993 4.993 0 0 0-3.36-1.93l-67.58-8.78a5.07 5.07 0 0 0-1.3 10l67.58 8.83Z"
+  ></path>
+  <path
+    fill="currentColor"
+    d="M133.913 1.258a9.851 9.851 0 0 1 8.511 11.028l-3.72 28.881-19.539-2.516 3.721-28.882a9.838 9.838 0 0 1 3.751-6.54 9.853 9.853 0 0 1 7.276-1.97Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M138.71 42.166h-.13l-19.54-2.52a1.001 1.001 0 0 1-.86-1.12l3.72-28.88a10.87 10.87 0 0 1 12.15-9.38 10.87 10.87 0 0 1 9.38 12.14l-3.72 28.88a1 1 0 0 1-1 .88Zm-18.42-4.38 17.56 2.26 3.58-27.9a8.85 8.85 0 0 0-7.65-9.91 8.85 8.85 0 0 0-9.91 7.65l-3.58 27.9Z"
+  ></path>
+  <path fill="#f56132" d="M107.75 98.546h-8.43v24.44h8.43v-24.44Z"></path>
+  <path
+    fill="#093f68"
+    d="M107.75 123.986h-8.43a1.002 1.002 0 0 1-1-1v-24.48a1 1 0 0 1 1-1h8.43a1 1 0 0 1 1 1v24.44a1.007 1.007 0 0 1-.608.96.996.996 0 0 1-.392.08Zm-7.43-2h6.43v-22.48h-6.43v22.48Z"
+  ></path>
+  <path fill="#f56132" d="M138.2 98.846h-8.43v24.13h8.43v-24.13Z"></path>
+  <path
+    fill="#093f68"
+    d="M138.2 123.986h-8.43a1.002 1.002 0 0 1-1-1v-24.14a.998.998 0 0 1 1-1h8.43a1 1 0 0 1 1 1v24.14a1 1 0 0 1-1 1Zm-7.43-2h6.43v-22.14h-6.43v22.14Z"
+  ></path>
+  <path fill="#f56132" d="M142.89 122.976H94.05v31.97h48.84v-31.97Z"></path>
+  <path
+    fill="#093f68"
+    d="M142.89 155.946H94.05a1.002 1.002 0 0 1-1-1v-32a.998.998 0 0 1 1-1h48.84a.997.997 0 0 1 1 1v32a1 1 0 0 1-1 1Zm-47.84-2h46.84v-30H95.05v30Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="m151.563 151.561 8.144 1.845a3.889 3.889 0 0 0 4.653-2.934l2.863-12.629a3.89 3.89 0 0 0-2.934-4.654l-8.144-1.846a3.89 3.89 0 0 0-4.653 2.934l-2.863 12.63a3.89 3.89 0 0 0 2.934 4.654Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M160.56 154.506a4.464 4.464 0 0 1-1.08-.13l-8.16-1.87a4.889 4.889 0 0 1-3.68-5.85l2.86-12.64a4.881 4.881 0 0 1 5.84-3.68l8.16 1.84a4.9 4.9 0 0 1 3.69 5.85l-2.87 12.64a4.898 4.898 0 0 1-4.76 3.84Zm-5.3-22.27a2.862 2.862 0 0 0-1.53.45 2.83 2.83 0 0 0-1.3 1.82l-2.86 12.64a2.878 2.878 0 0 0 1.143 2.991c.309.219.658.375 1.027.459l8.16 1.85a2.88 2.88 0 0 0 2.177-.367 2.87 2.87 0 0 0 1.273-1.803l2.87-12.64a2.91 2.91 0 0 0-2.18-3.46l-8.16-1.84a2.77 2.77 0 0 0-.62-.09v-.01Z"
+  ></path>
+  <path
+    fill="#fff"
+    d="m184.73 122.836-30.58-15.82a1.733 1.733 0 0 1-.853-2.092c.088-.261.236-.497.433-.688l17.75-17.34 21.43-20.94a1.732 1.732 0 0 1 2.781.477c.159.334.208.71.139 1.073l-3.92 24.63-4.68 29.45a1.727 1.727 0 0 1-1.717 1.443 1.733 1.733 0 0 1-.783-.193Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M185.52 124.026a2.645 2.645 0 0 1-1.25-.31l-30.58-15.81a2.727 2.727 0 0 1-1.452-2.028 2.729 2.729 0 0 1 .802-2.362l39.17-38.27a2.73 2.73 0 0 1 4.61 2.38l-8.6 54.09a2.715 2.715 0 0 1-1.46 2 2.76 2.76 0 0 1-1.24.31Zm-.34-2.08a.734.734 0 0 0 .931-.221.73.73 0 0 0 .129-.319l8.61-54.09a.722.722 0 0 0-.4-.77.689.689 0 0 0-.84.13l-39.18 38.27a.713.713 0 0 0-.184.294.712.712 0 0 0-.026.346.71.71 0 0 0 .38.54l30.58 15.82Z"
+  ></path>
+  <path
+    fill="#fff"
+    d="M173.684 106.718a1.65 1.65 0 0 1 .707 2.224l-9.188 17.764-2.931-1.516 9.188-17.764a1.65 1.65 0 0 1 2.224-.708Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M165.2 127.696c-.16 0-.318-.037-.46-.11l-2.93-1.52a1.002 1.002 0 0 1-.5-.58 1 1 0 0 1 .07-.76l9.17-17.74a2.656 2.656 0 0 1 4.379-.486 2.652 2.652 0 0 1 .331 2.926l-9.17 17.73a1.006 1.006 0 0 1-.89.54Zm-1.59-2.94 1.16.6 8.71-16.85a.67.67 0 0 0 .05-.5.708.708 0 0 0-.32-.38.65.65 0 0 0-.87.28l-8.73 16.85Z"
+  ></path>
+  <path
+    fill="#f56132"
+    d="M160.35 140.636c2.17-4.2 4.87-7.71 6.65-10.69a2.479 2.479 0 0 0-1-3.46l-4-2.07a2.48 2.48 0 0 0-1.956-.146 2.484 2.484 0 0 0-1.454 1.316c-1.4 3.18-2.71 7.41-4.89 11.61-5.18 10-17.56 13.9-6 19.86 11.56 5.96 7.47-6.4 12.65-16.42Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M152.52 159.606a12.19 12.19 0 0 1-5.34-1.67c-3.25-1.68-4.92-3.34-5.23-5.23-.44-2.65 1.76-5 4.55-7.88a36.027 36.027 0 0 0 6.3-8.09 73.835 73.835 0 0 0 3.3-7.67c.54-1.39 1.05-2.7 1.57-3.88a3.409 3.409 0 0 1 2-1.85 3.53 3.53 0 0 1 2.76.17l4 2.07a3.478 3.478 0 0 1 1.76 2.15 3.389 3.389 0 0 1-.35 2.71c-.66 1.11-1.44 2.28-2.26 3.52a72.96 72.96 0 0 0-4.35 7.12 35.446 35.446 0 0 0-3 9.82c-.77 4-1.39 7.1-3.8 8.27a4.447 4.447 0 0 1-1.91.44Zm8.32-34.47a1.481 1.481 0 0 0-.794.236 1.48 1.48 0 0 0-.546.624c-.5 1.13-1 2.42-1.53 3.79a76.897 76.897 0 0 1-3.39 7.87 37.312 37.312 0 0 1-6.63 8.55c-2.31 2.42-4.31 4.51-4 6.17.2 1.18 1.6 2.46 4.18 3.79 2.58 1.33 4.43 1.74 5.51 1.22 1.51-.73 2.07-3.57 2.71-6.85a37.29 37.29 0 0 1 3.08-10.36 77.642 77.642 0 0 1 4.46-7.31c.81-1.22 1.58-2.37 2.22-3.44a1.44 1.44 0 0 0 .14-1.13 1.5 1.5 0 0 0-.76-.92l-4-2.07a1.54 1.54 0 0 0-.65-.17Z"
+  ></path>
+  <path
+    fill="#ffbc0e"
+    d="M191.91 92.106a12.59 12.59 0 0 1-4.51-1c-4.36-2 0-8.79-5.92-3.06-5.92 5.73-10-1.14-10-1.14l21.43-20.94a1.73 1.73 0 0 1 2.92 1.54l-3.92 24.6Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M191.92 93.106h-.06a13.292 13.292 0 0 1-4.88-1.11c-2.42-1.13-2.71-3.39-2.87-4.74v-.19a19.427 19.427 0 0 0-1.91 1.69c-2 1.94-4.08 2.78-6.15 2.5-3.35-.45-5.32-3.72-5.4-3.85a.998.998 0 0 1 .16-1.23l21.43-20.93a2.73 2.73 0 0 1 4.61 2.38l-3.92 24.64a1 1 0 0 1-1.01.84Zm-7.44-8.33a1.6 1.6 0 0 1 .48.08c.9.32 1 1.29 1.13 2.15.18 1.43.42 2.57 1.73 3.18 1.03.457 2.128.744 3.25.85l3.78-23.72a.722.722 0 0 0-.4-.77.689.689 0 0 0-.84.13l-20.82 20.33a5.82 5.82 0 0 0 3.5 2.27c1.43.19 2.95-.47 4.5-2 1.91-1.77 2.89-2.5 3.69-2.5Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="m155.914 139.696 8.266 2.409a2.08 2.08 0 0 0 2.579-1.415l.098-.336a2.08 2.08 0 0 0-1.415-2.579l-8.266-2.409a2.08 2.08 0 0 0-2.579 1.415l-.098.336a2.08 2.08 0 0 0 1.415 2.579Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M164.73 143.206a3.287 3.287 0 0 1-.86-.12l-8.27-2.41a3.08 3.08 0 0 1-2.09-3.82l.1-.34a3.082 3.082 0 0 1 3.81-2.09l8.27 2.41a3.09 3.09 0 0 1 2.1 3.82l-.1.34a3.08 3.08 0 0 1-2.96 2.21Zm-8.57-4.45 8.27 2.41a1.082 1.082 0 0 0 1.34-.73l.1-.34a1.089 1.089 0 0 0-.74-1.34l-8.27-2.41a1.054 1.054 0 0 0-.82.09 1.08 1.08 0 0 0-.51.64l-.1.34a1.054 1.054 0 0 0 .09.82c.138.249.367.436.64.52Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="m154.652 144.031 8.266 2.409a2.08 2.08 0 0 0 2.579-1.415l.098-.336a2.08 2.08 0 0 0-1.415-2.579l-8.266-2.409a2.081 2.081 0 0 0-2.579 1.415l-.098.336a2.08 2.08 0 0 0 1.415 2.579Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M163.43 147.506a3.287 3.287 0 0 1-.86-.12l-8.27-2.41a3.081 3.081 0 0 1-1.839-1.476 3.058 3.058 0 0 1-.251-2.344l.1-.34a3.082 3.082 0 0 1 3.81-2.09l8.27 2.41a3.08 3.08 0 0 1 2.1 3.81l-.1.34a3.088 3.088 0 0 1-2.96 2.22Zm-8.17-6.9a1.056 1.056 0 0 0-1 .77l-.1.34a1.092 1.092 0 0 0 .73 1.34l8.27 2.41a1.09 1.09 0 0 0 1.34-.74l.1-.34a1.08 1.08 0 0 0-.74-1.33l-8.27-2.41a.973.973 0 0 0-.29-.01l-.04-.03Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="m153.384 148.357 8.266 2.409a2.08 2.08 0 0 0 2.579-1.415l.098-.336a2.08 2.08 0 0 0-1.415-2.579l-8.266-2.409a2.08 2.08 0 0 0-2.579 1.415l-.098.336a2.08 2.08 0 0 0 1.415 2.579Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M162.21 151.866a2.91 2.91 0 0 1-.86-.13l-8.27-2.41a3.082 3.082 0 0 1-1.835-1.472 3.061 3.061 0 0 1-.255-2.338l.1-.34a3.057 3.057 0 0 1 3.81-2.09l8.27 2.41a3.066 3.066 0 0 1 2.204 2.614c.043.402.004.809-.114 1.196l-.09.34a3.096 3.096 0 0 1-2.96 2.22Zm-8.57-4.46 8.27 2.41a1.082 1.082 0 0 0 1.34-.73l.09-.34a.999.999 0 0 0-.73-1.33l-8.27-2.41a1.054 1.054 0 0 0-.82.09 1 1 0 0 0-.51.64l-.1.34a1.058 1.058 0 0 0 .09.82 1.057 1.057 0 0 0 .64.51Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="m152.125 152.672 8.266 2.409a2.08 2.08 0 0 0 2.579-1.414l.098-.336a2.08 2.08 0 0 0-1.415-2.579l-8.266-2.41a2.08 2.08 0 0 0-2.579 1.415l-.098.336a2.08 2.08 0 0 0 1.415 2.579Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M160.95 156.186a3.287 3.287 0 0 1-.86-.12l-8.27-2.41a3.085 3.085 0 0 1-1.84-1.47 3.112 3.112 0 0 1-.25-2.35l.1-.33a3.079 3.079 0 0 1 1.469-1.842 3.06 3.06 0 0 1 2.341-.258l8.27 2.41a3.057 3.057 0 0 1 1.839 1.475 3.058 3.058 0 0 1 .251 2.345l-.09.33a3.093 3.093 0 0 1-2.96 2.22Zm-8.17-6.9a1.048 1.048 0 0 0-1.03.78l-.1.33a1.054 1.054 0 0 0 .09.82 1.003 1.003 0 0 0 .64.52l8.27 2.41a1.082 1.082 0 0 0 1.34-.73l.09-.34a1.062 1.062 0 0 0-.09-.82.995.995 0 0 0-.64-.52l-8.27-2.41a.983.983 0 0 0-.3-.04Zm-34.05-2.84a13.462 13.462 0 0 1-13.45-13.44v-1.08a.997.997 0 0 1 1-1h24.89a.997.997 0 0 1 1 1v1.08a13.458 13.458 0 0 1-13.44 13.44Zm-11.45-13.52v.08a11.448 11.448 0 0 0 11.445 11.111 11.449 11.449 0 0 0 11.445-11.111v-.08h-22.89Z"
+  ></path>
+  <path fill="currentColor" d="M99.18 130.866H1v46.98h98.18v-46.98Z"></path>
+  <path
+    fill="#093f68"
+    d="M99.18 178.846H1a1.002 1.002 0 0 1-1-1v-47a.997.997 0 0 1 1-1h98.18a.998.998 0 0 1 1 1v47a1 1 0 0 1-1 1Zm-97.18-2h96.18v-45H2v45Z"
+  ></path>
+  <path fill="currentColor" d="M195.86 153.176H90.67v24.67h105.19v-24.67Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M195.86 178.846H90.67a1.002 1.002 0 0 1-1-1v-24.67a.998.998 0 0 1 1-1h105.19a.997.997 0 0 1 1 1v24.67a1 1 0 0 1-1 1Zm-104.19-2h103.19v-22.67H91.67v22.67Z"
+  ></path>
+  <path fill="currentColor" d="M29.8 108.546H1v22.32h28.8v-22.32Z"></path>
+  <path
+    fill="#093f68"
+    d="M29.81 131.866H1a1.002 1.002 0 0 1-1-1v-22.36a.997.997 0 0 1 1-1h28.81a.998.998 0 0 1 1 1v22.32a1.003 1.003 0 0 1-1 1.04Zm-27.81-2h26.81v-20.36H2v20.36Z"
+  ></path>
+  <path fill="currentColor" d="M1 153.176c0 .67 98.18 0 98.18 0Z"></path>
+  <path
+    fill="#093f68"
+    d="M25.43 154.506c-24.52 0-24.76-.24-25.11-.59a1.003 1.003 0 0 1-.187-1.175.992.992 0 0 1 .762-.531.998.998 0 0 1 .475.056c3.72.48 71.72.12 97.83-.06a.998.998 0 0 1 1 1 1 1 0 0 1-1 1c-.24 0-24.66.16-48.84.25-10.31.05-18.48.05-24.93.05Z"
+  ></path>
+  <path fill="currentColor" d="M51.2 130.866c-.17 0 0 22.31 0 22.31Z"></path>
+  <path
+    fill="#093f68"
+    d="M51.2 154.176a1.002 1.002 0 0 1-1-1c-.17-22.55-.11-22.61.29-23a1 1 0 0 1 .71-.29.998.998 0 0 1 1 1 .78.78 0 0 1 0 .22c-.09 1.26 0 13.81 0 22.08a1 1 0 0 1-1 1v-.01Zm-21.39 24.67a1.002 1.002 0 0 1-1-1v-24.34a.997.997 0 0 1 1-1 .998.998 0 0 1 1 1v24.37a.998.998 0 0 1-1 .97Z"
+  ></path>
+  <path
+    fill="#ffbc0e"
+    d="M29.81 126.666c5.18-.994 10.5-.994 15.68 0 8.39 1.68 16.61 2.35 24.5 1.18 7.89-1.17 6.38-1 12.42-.67 6.04.33 15.6 1.26 15.6 1.26v2.43h-68.2v-4.2Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M98.01 131.866h-68.2a1.002 1.002 0 0 1-1-1v-4.2a1 1 0 0 1 .77-1 42.1 42.1 0 0 1 16.11 0c9.19 1.84 17.08 2.22 24.15 1.17l.79-.12c6-.89 6.08-.9 9.68-.68l2.15.12c6 .33 15.55 1.25 15.65 1.26a1 1 0 0 1 .9 1v2.43a.994.994 0 0 1-.286.72 1.007 1.007 0 0 1-.714.3Zm-67.2-2h66.2v-.52c-2.53-.24-9.79-.9-14.66-1.17l-2.17-.13c-3.39-.21-3.39-.21-9.26.67l-.78.12c-7.3 1.08-15.43.7-24.84-1.19a41.37 41.37 0 0 0-14.49-.15v2.37Z"
+  ></path>
+  <path
+    fill="currentColor"
+    d="M69.64 82.826H26.42a2.11 2.11 0 0 0-2.11 2.11v16.67a2.11 2.11 0 0 0 2.11 2.11h43.22a2.11 2.11 0 0 0 2.11-2.11v-16.67a2.11 2.11 0 0 0-2.11-2.11Z"
+  ></path>
+  <path
+    fill="#093f68"
+    d="M69.64 104.706H26.43a3.102 3.102 0 0 1-3.1-3.1v-16.68a3.1 3.1 0 0 1 3.1-3.1h43.23a3.1 3.1 0 0 1 3.11 3.1v16.68a3.102 3.102 0 0 1-3.13 3.1Zm-43.21-20.88a1.1 1.1 0 0 0-1.1 1.1v16.68a1.099 1.099 0 0 0 1.1 1.1h43.23a1.11 1.11 0 0 0 1.11-1.1v-16.68a1.11 1.11 0 0 0-1.11-1.1H26.43Zm120.06 95.02a1.002 1.002 0 0 1-1-1v-24.67a.997.997 0 0 1 1.707-.707.996.996 0 0 1 .293.707v24.67a1 1 0 0 1-1 1Z"
+  ></path>
+  <path
+    fill="#ffc9b0"
+    d="M49.69 108.506s-5.41-9.45-3.3-10c2.11-.55 9 8.46 9 8.46"></path>
+  <path
+    fill="#093f68"
+    d="M49.69 109.506a1.006 1.006 0 0 1-.87-.5c-1.42-2.48-4.62-8.47-3.75-10.53a1.58 1.58 0 0 1 1.06-.94c1.26-.33 4 .94 10.06 8.82a.997.997 0 0 1 .073 1.111 1 1 0 0 1-1.663.109c-3.06-4-6.39-7.43-7.71-8 .1 1.29 1.68 5 3.67 8.45a.998.998 0 0 1-.38 1.36 1.01 1.01 0 0 1-.49.12Z"
+  ></path>
+</svg>
diff --git a/apps/portfolio/src/components/svgs/icons/XIcon.astro b/apps/portfolio/src/components/svgs/icons/XIcon.astro
new file mode 100644
index 0000000..22746c2
--- /dev/null
+++ b/apps/portfolio/src/components/svgs/icons/XIcon.astro
@@ -0,0 +1,13 @@
+---
+// From: https://github.com/phosphor-icons/core/blob/c67d7a849f450be1bfe64fd5820471e4019e5ff0/assets/regular/x.svg
+
+import { xIconPath } from './icon-path.js';
+
+import type { IconProps } from '../types.js';
+
+type Props = IconProps;
+---
+
+<svg viewBox="0 0 48 48" {...Astro.props}>
+  <path fill="currentColor" d={xIconPath}></path>
+</svg>