add about page

Author: pyjun01

src/components/layout.tsx

@@ -12,17 +12,47 @@ const Container = styled.div<{ $isMain: boolean }>`
   header {
     padding: 16px 0 24px;
     color: gray;
-    font-weight: 700;
 
-    h1,
-    a {
-      margin: 0;
-    }
+    ${Inner} > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      h1,
+      a {
+        margin: 0;
+      }
+
+      a {
+        color: #333333;
+        text-decoration: none;
+      }
+
+      h1 > a {
+        font-weight: 700;
+        font-size: ${({ $isMain }) => ($isMain ? '32px' : '18px')};
+      }
 
-    a {
-      font-size: ${({ $isMain }) => ($isMain ? '32px' : '18px')};
-      color: #333333;
-      text-decoration: none;
+      nav {
+        ul {
+          all: unset;
+          display: flex;
+          gap: 12px;
+
+          li {
+            all: unset;
+            font-size: 1.125rem;
+
+            @media (max-width: 680px) {
+              font-size: 1.5rem;
+            }
+
+            &.selected {
+              font-weight: 700;
+            }
+          }
+        }
+      }
     }
 
     @media (max-width: 680px) {
@@ -35,16 +65,30 @@ const Container = styled.div<{ $isMain: boolean }>`
   }
 `;
 
+const isBrowser = typeof window !== 'undefined';
+
 function Layout({ pageTitle, children }: { pageTitle?: string; children: ReactNode }) {
   return (
     <Container $isMain={!pageTitle}>
       <GlobalStyle />
       <title>{pageTitle}</title>
       <header>
         <Inner>
-          <h1>
-            <Link to='/'>pyjun01</Link>
-          </h1>
+          <div>
+            <h1>
+              <Link to='/'>pyjun01</Link>
+            </h1>
+            <nav>
+              <ul>
+                <li className={isBrowser && window.location.pathname === '/' ? 'selected' : undefined}>
+                  <Link to='/'>Home</Link>
+                </li>
+                <li className={isBrowser && window.location.pathname === '/about/' ? 'selected' : undefined}>
+                  <Link to='/about'>About</Link>
+                </li>
+              </ul>
+            </nav>
+          </div>
         </Inner>
       </header>
       <main>

src/pages/about.tsx

@@ -0,0 +1,40 @@
+import { Helmet } from 'react-helmet';
+
+import { usePostList } from '../hooks/post';
+import Layout from '../components/layout';
+import List from '../components/List';
+
+function IndexPage() {
+  const data = usePostList();
+
+  return (
+    <Layout>
+      <Helmet
+        htmlAttributes={{
+          dir: 'ltr',
+          lang: 'ko',
+        }}
+        title='개발자 박용준'
+      >
+        <meta property='og:title' content='개발자 박용준' />
+        <meta property='og:url' content='https://pyjun01.github.io/about' />
+        <meta name='description' content='About' />
+      </Helmet>
+      <div>
+        <a href='https://www.facebook.com/profile.php?id=100007085719197' target='_blank'>
+          <img src='https://img.shields.io/badge/facebook-1877f2?style=flat-square&logo=facebook&logoColor=white' />
+        </a>
+        <a href='https://github.com/pyjun01' target='_blank'>
+          <img src='https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=GitHub&logoColor=white' />
+        </a>
+        <a href='https://www.linkedin.com/in/pyjun01/' target='_blank'>
+          <img src='https://img.shields.io/badge/LinkedIn-0077B5?style=flat-square&logo=linkedin&logoColor=white' />
+        </a>
+        <img src='https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fpyjun01.github.io/about&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false' />
+      </div>
+      준비중...
+    </Layout>
+  );
+}
+
+export default IndexPage;