feat: add about in index page (#14)

apps/portfolio/src/components/icons/EnvelopeSimpleIcon.astro

@@ -0,0 +1,14 @@
+---
+// From: https://github.com/phosphor-icons/core/blob/c67d7a849f450be1bfe64fd5820471e4019e5ff0/assets/regular/envelope-simple.svg
+
+import type { IconProps } from './type.js';
+
+type Props = IconProps;
+---
+
+<svg viewBox="0 0 48 48" {...Astro.props}>
+  <path
+    fill="currentColor"
+    d="M42 9H6a1.5 1.5 0 0 0-1.5 1.5V36a3 3 0 0 0 3 3h33a3 3 0 0 0 3-3V10.5A1.5 1.5 0 0 0 42 9Zm-3.857 3L24 24.966 9.857 12h28.286ZM40.5 36h-33V13.91l15.486 14.196a1.5 1.5 0 0 0 2.028 0L40.5 13.911V36Z"
+  ></path>
+</svg>

apps/portfolio/src/components/icons/GitHubIcon.astro

@@ -0,0 +1,19 @@
+---
+// From: https://github.com/devicons/devicon/blob/5615b6091fea770fdf7d6160d8d7056cf1130c03/icons/github/github-original.svg
+
+import type { IconProps } from './type.js';
+
+type Props = IconProps;
+---
+
+<svg viewBox="0 0 48 48" {...Astro.props}>
+  <g fill="currentColor">
+    <path
+      fill-rule="evenodd"
+      d="M24 1.914c-12.505 0-22.646 10.138-22.646 22.645 0 10.006 6.49 18.494 15.487 21.489 1.131.21 1.547-.492 1.547-1.09 0-.54-.021-2.323-.031-4.216-6.3 1.37-7.63-2.672-7.63-2.672-1.03-2.617-2.514-3.313-2.514-3.313-2.055-1.406.155-1.376.155-1.376 2.274.159 3.471 2.333 3.471 2.333 2.02 3.462 5.298 2.461 6.59 1.883.204-1.464.79-2.463 1.438-3.029-5.03-.572-10.318-2.514-10.318-11.19 0-2.473.885-4.493 2.334-6.08-.235-.57-1.01-2.873.219-5.992 0 0 1.901-.609 6.229 2.321A21.7 21.7 0 0 1 24 12.864c1.924.009 3.863.26 5.673.762 4.322-2.93 6.22-2.32 6.22-2.32 1.233 3.118.458 5.422.223 5.992 1.452 1.586 2.33 3.606 2.33 6.078 0 8.698-5.297 10.613-10.34 11.174.813.703 1.537 2.081 1.537 4.194 0 3.03-.026 5.468-.026 6.214 0 .603.408 1.309 1.555 1.086 8.993-2.997 15.474-11.483 15.474-21.485 0-12.507-10.14-22.645-22.646-22.645Z"
+      clip-rule="evenodd"></path>
+    <path
+      d="M9.932 34.427c-.05.113-.227.147-.389.07-.165-.074-.256-.227-.203-.34.049-.116.226-.148.39-.07.165.073.259.228.201.34Zm.917 1.024c-.108.1-.319.053-.462-.105-.149-.158-.176-.369-.067-.47.112-.1.317-.053.466.104.147.16.177.37.063.471Zm.893 1.303c-.139.097-.366.007-.506-.194-.139-.202-.139-.444.004-.54.14-.097.363-.01.506.19.138.204.138.446-.004.544Zm1.223 1.26c-.124.138-.389.101-.582-.085-.198-.183-.253-.443-.129-.58.126-.137.392-.098.587.087.198.182.257.442.125.578h-.001Zm1.688.732c-.056.178-.31.258-.567.183-.256-.078-.424-.285-.371-.465.053-.178.309-.262.567-.181.256.077.424.283.37.463Zm1.853.136c.006.187-.211.341-.48.345-.271.006-.49-.145-.493-.329 0-.189.213-.341.484-.347.269-.004.49.146.49.33Zm1.724-.293c.033.181-.154.369-.422.419-.262.048-.506-.065-.54-.245-.032-.187.158-.374.42-.423.269-.046.509.064.542.249Z"
+    ></path>
+  </g>
+</svg>

apps/portfolio/src/components/icons/PencilSimpleLineIcon.astro

@@ -0,0 +1,14 @@
+---
+// From: https://github.com/phosphor-icons/core/blob/c67d7a849f450be1bfe64fd5820471e4019e5ff0/assets/regular/pencil-simple-line.svg
+
+import type { IconProps } from './type.js';
+
+type Props = IconProps;
+---
+
+<svg viewBox="0 0 48 48" {...Astro.props}>
+  <path
+    fill="currentColor"
+    d="m42.623 13.757-8.38-8.378a3 3 0 0 0-4.243 0L6.88 28.5A2.975 2.975 0 0 0 6 30.62V39a3 3 0 0 0 3 3h31.5a1.5 1.5 0 1 0 0-3H21.622l21-21a2.999 2.999 0 0 0 0-4.243ZM17.379 39H9v-8.38l16.5-16.5 8.38 8.38L17.38 39ZM36 20.38 27.622 12l4.5-4.5 8.378 8.38-4.5 4.5Z"
+  ></path>
+</svg>

apps/portfolio/src/components/icons/type.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'astro/types';
+
+export interface IconProps extends Omit<HTMLAttributes<'svg'>, 'viewBox'> {
+  width: string | number;
+  height: string | number;
+}

apps/portfolio/src/components/pages/index/About.astro

@@ -0,0 +1,77 @@
+---
+import EnvelopeSimpleIcon from '../../icons/EnvelopeSimpleIcon.astro';
+import GitHubIcon from '../../icons/GitHubIcon.astro';
+import PencilSimpleLineIcon from '../../icons/PencilSimpleLineIcon.astro';
+
+import type { IconProps } from '../../icons/type';
+
+interface Props {
+  class?: string | null;
+}
+
+const { class: className } = Astro.props;
+
+interface Contact {
+  icon: (_props: IconProps) => any;
+  name: string;
+  href: string;
+}
+
+const contacts: Contact[] = [
+  {
+    icon: GitHubIcon,
+    name: 'GitHub',
+    href: 'https://github.com/nix6839',
+  },
+  {
+    icon: EnvelopeSimpleIcon,
+    name: 'Email',
+    href: 'mailto:[email protected]',
+  },
+  {
+    icon: PencilSimpleLineIcon,
+    name: 'Blog',
+    href: 'https://blog.yeongwoo.dev',
+  },
+];
+---
+
+<section class={className}>
+  <svg
+    width="6rem"
+    height="6rem"
+    viewBox="0 0 48 48"
+    aria-hidden="true"
+    class="mb-5"
+  >
+    <path
+      fill="#f4f4f4"
+      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
+    ></path>
+    <path
+      fill="#b4ec94"
+      d="M21 9H6v15h15V9Zm-7.5 19.5v15h21v-15H27V36h-6v-7.5h-7.5ZM42 9H27v15h15V9Z"
+    ></path>
+  </svg>
+
+  <h1 class="mb-3 text-[2rem]">Han Yeong-woo</h1>
+  <p class="mb-4 text-[1.25rem] text-secondary">
+    <span class="font-bold text-brand">프론트엔드 개발자</span>로, 항상 최신
+    트렌드를 따라가기 위해 노력하고 있습니다.
+  </p>
+  <address class="flex gap-4">
+    {
+      contacts.map(({ icon: Icon, name, href }) => (
+        <a {href} class="flex items-center gap-2">
+          <Icon
+            width="1.625rem"
+            height="1.625rem"
+            aria-hidden="true"
+            class="text-icon-primary"
+          />
+          {name}
+        </a>
+      ))
+    }
+  </address>
+</section>

apps/portfolio/src/pages/index.astro

@@ -1,9 +1,12 @@
 ---
+import About from '../components/pages/index/About.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 
 const title = '포트폴리오';
 ---
 
 <BaseLayout {title} pageName={'home'}>
-  <h1>{title}</h1>
+  <main class="mt-20 px-6">
+    <About class="mb-23" />
+  </main>
 </BaseLayout>