From 542875bf24ee456423371f8a6e407f813b903674 Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Wed, 13 Mar 2024 12:09:12 +0900
Subject: [PATCH] Add about page temporarily

---
 apps/blog/app/about/page.module.scss          | 48 ++++++++++++++
 apps/blog/app/about/page.tsx                  | 64 +++++++++++++++++++
 .../src/components/DrawerContent/index.tsx    |  1 +
 3 files changed, 113 insertions(+)
 create mode 100644 apps/blog/app/about/page.module.scss
 create mode 100644 apps/blog/app/about/page.tsx

diff --git a/apps/blog/app/about/page.module.scss b/apps/blog/app/about/page.module.scss
new file mode 100644
index 00000000..10cb6ee3
--- /dev/null
+++ b/apps/blog/app/about/page.module.scss
@@ -0,0 +1,48 @@
+.about {
+    width: clamp(0px, map-get($container-width, small), 100%);
+    margin: $global-navigation-height auto 0;
+
+    &__container {
+        padding: 0 12px;
+    }
+
+    &__profile {
+        margin: 24px 0;
+
+        > img {
+            display: block;
+            margin: 0 auto;
+            border-radius: 50%;
+        }
+    }
+
+    &__title {
+        margin: 0 0 24px;
+        text-align: center;
+    }
+
+    &__contact {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        @include respond-to(medium) {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 8px;
+        }
+
+        > li > a {
+            display: flex;
+            padding: 8px;
+            align-items: center;
+            border: 1px solid color(sub);
+            border-radius: 8px;
+
+            > i {
+                margin-right: 8px;
+                font-size: 2em;
+            }
+        }
+    }
+}
diff --git a/apps/blog/app/about/page.tsx b/apps/blog/app/about/page.tsx
new file mode 100644
index 00000000..73bc77ce
--- /dev/null
+++ b/apps/blog/app/about/page.tsx
@@ -0,0 +1,64 @@
+import { Icon } from "@marshallku/icon";
+import { classNames } from "@marshallku/utils";
+import Typography from "#components/Typography";
+import styles from "./page.module.scss";
+import Button from "#components/Button";
+
+export const dynamic = "error";
+
+const cx = classNames(styles, "about");
+
+export function generateMetadata() {
+    return {
+        title: "About Me",
+    };
+}
+
+export default function AboutPage() {
+    return (
+        <div className={cx()}>
+            <section className={cx("__container")}>
+                <figure className={cx("__profile")}>
+                    <img src="https://github.com/marshallku.png" alt="Marshall Ku" width="150" height="150" />
+                </figure>
+                <Typography variant="h1" component="h1" className={cx("__title")} fontWeight={700}>
+                    Marshall Ku / 구영표
+                </Typography>
+                <ul className={cx("__contact")}>
+                    <li>
+                        <a href="https://github.com/marshallku" target="_blank" rel="noopener noreferrer nofollow">
+                            <Icon name="github" />
+                            <Typography>GitHub</Typography>
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="https://www.linkedin.com/in/marshallku/"
+                            target="_blank"
+                            rel="noopener noreferrer nofollow"
+                        >
+                            <Icon name="linkedin" />
+                            <Typography>LinkedIn</Typography>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="mailto:marshall@kakao.com">
+                            <Icon name="mail" />
+                            <Typography>marshall@kakao.com</Typography>
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="https://marshallku.notion.site/a8461811a3044446a2048fc054001b9d?pvs=4"
+                            target="_blank"
+                            rel="noopener noreferrer nofollow"
+                        >
+                            <Icon name="notion" />
+                            <Typography>Resume</Typography>
+                        </a>
+                    </li>
+                </ul>
+            </section>
+        </div>
+    );
+}
diff --git a/apps/blog/src/components/DrawerContent/index.tsx b/apps/blog/src/components/DrawerContent/index.tsx
index f2d26291..5bc9a5da 100644
--- a/apps/blog/src/components/DrawerContent/index.tsx
+++ b/apps/blog/src/components/DrawerContent/index.tsx
@@ -73,6 +73,7 @@ function DrawerContent({ opened, closeDrawer, willClose, setWillClose }: DrawerC
                 <ul className={cx("__item")}>
                     <List icon="home" text="Home" href="/" />
                     <List icon="notifications" text="Notice" href="/notice" />
+                    <List icon="edit" text="About" href="/about" />
                     <List icon="tag" text="Tags" href="/tags" />
                     <List icon="mail" text="Guestbook" href="/guestbook" />
                 </ul>