Add links

HyunnoH · Jan 2, 2025 · 8cdde93 · 8cdde93
1 parent b779ac9
commit 8cdde93
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -1,15 +1,17 @@
 import { HeadFC, PageProps } from "gatsby";
 import { Layout } from "../components/layout";
 import React from "react";
+import { FaGithub, FaLinkedin } from "react-icons/fa6";
 import { css } from "@emotion/react";
 import myPic from "../images/1735821869641-21.jpg";
 
 const pageStyles = css`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 96px;
   font-family: -apple-system, Roboto, sans-serif, serif;
+  width: 1600px;
+  margin: 0 auto;
 
   h2 {
     text-decoration: underline;
@@ -26,6 +28,40 @@ const profilePicture = css`
   height: 300px;
 `;
 
+const linkBox = css`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .link-item {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+`;
+
+const iconBox = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid #232129;
+  font-size: 16px;
+  width: 24px;
+  height: 24px;
+`;
+
+const links = [
+  {
+    icon: <FaLinkedin />,
+    to: "https://www.linkedin.com/in/hyunnoh01",
+  },
+  {
+    icon: <FaGithub />,
+    to: "https://github.com/HyunnoH",
+  },
+];
+
 const AboutPage: React.FC<PageProps> = () => {
   return (
     <Layout>
@@ -35,7 +71,14 @@ const AboutPage: React.FC<PageProps> = () => {
           <img src={myPic} alt="profile" css={profilePicture} />
           <div>
             <p>재밌게 살고 싶은 개발자 오현입니다.</p>
-            <div>Links</div>
+            <div css={linkBox}>
+              {links.map(({ icon, to }) => (
+                <div className="link-item">
+                  <span css={iconBox}>{icon}</span>
+                  <a href={to}>{to}</a>
+                </div>
+              ))}
+            </div>
           </div>
         </section>
         <section>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,7 +1,5 @@
 import * as React from "react";
 import type { HeadFC, PageProps } from "gatsby";
-import { StaticImage } from "gatsby-plugin-image";
-import { FaGithub, FaLinkedin } from "react-icons/fa6";
 import { Layout } from "../components/layout";
 import { css } from "@emotion/react";
 
@@ -31,30 +29,11 @@ const iconBox = css`
   height: 48px;
 `;
 
-const links = [
-  {
-    icon: <FaLinkedin />,
-    to: "https://www.linkedin.com/in/hyunnoh01",
-    tooltip: "LinkedIn",
-  },
-  {
-    icon: <FaGithub />,
-    to: "https://github.com/HyunnoH",
-    tooltip: "GitHub",
-  },
-];
-
 const IndexPage: React.FC<PageProps> = () => {
   return (
     <Layout>
       <main css={pageStyles}>
-        <div css={linkBox}>
-          {links.map(({ icon, to, tooltip }) => (
-            <a href={to}>
-              <div css={iconBox}>{icon}</div>
-            </a>
-          ))}
-        </div>
+        <div css={linkBox}></div>
       </main>
     </Layout>
   );