diff --git a/config/theme.js b/config/theme.js index 4ee6501..a5a1ff2 100644 --- a/config/theme.js +++ b/config/theme.js @@ -7,7 +7,7 @@ const navbar = { alt: 'Logo', src: 'img/logos/main.png', srcDark: 'img/logos/darkModeMain.png', - href: '/blog', + href: '/', target: '_self', }, items: [ diff --git a/src/components/HomepageFeatures/index.module.css b/src/components/HomepageFeatures/index.module.css index 7aeb33a..5f607fc 100644 --- a/src/components/HomepageFeatures/index.module.css +++ b/src/components/HomepageFeatures/index.module.css @@ -1,43 +1,81 @@ +.sidebar > ul > li > a { + color: black; + text-decoration: none; +} + +.sidebar > ul > li > a:hover { + color: #2e8555; + text-decoration: none; +} + .container { width: 100%; + max-width: 1140px; height: 100%; -} -.top { + margin: 2rem auto; display: flex; - justify-content: space-around; - font-size: 32px; - margin: 0 64px; - border-bottom: 1px solid #eee; + flex-wrap: wrap; +} + +.sidebar-section { + position: relative; + width: 100%; + padding: 0 1rem; + max-width: calc(3 / 12 * 100%); +} + +.sidebar { + position: fixed; +} + +.sidebar-name { + font-size: 1.25rem; + font-weight: 700; + + margin-bottom: 1rem; +} + +.sidebar > ul { + list-style: none; + padding: 0; + margin-bottom: 1rem; + font-size: 0.9rem; +} + +.sidebar > ul > li { + display: list-item; + text-align: -webkit-match-parent; + margin-top: 0.7rem; } -.top > div { +.main-section { display: flex; flex-direction: column; - justify-content: center; + gap: 48px; + width: calc(7 / 12 * 100%); } -.img { - width: 340px; +.intro { + width: 100%; + display: flex; + justify-content: space-around; + border-bottom: 1px solid #eee; } -.button-section { - margin-top: 124px; +.intro > div { display: flex; - gap: 256px; - align-items: center; + flex-direction: column; justify-content: center; + line-height: 40px; + font-size: 32px; } -.button-section > button { - border: 1px solid #ddd; - border-radius: 8px; - padding: 16px 32px; - background: none; - font-size: 24px; - cursor: pointer; +.img { + width: 256px; } -.button-section > button:hover { - background: #ddd; +.message { + font-size: 32px; + text-align: center; } diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index 66389e4..96a67e6 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -1,26 +1,37 @@ import React from 'react'; import styles from './index.module.css'; -export default function HomepageFeatures(): JSX.Element { - const gotoBlog = () => window.open('/blog'); - const gotoGithub = () => window.open('https://github.com/d0dam'); +const recentPosts = require('../../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json'); +export default function HomepageFeatures(): JSX.Element { return ( -
-
-
-
안녕하세요!
-
Javascript 를 사랑하는
+
+
+
+
Recent posts
+
    + {recentPosts.items.slice(0, 5).map((item, index) => ( +
  • + {item.title} +
    • + ))} +
+
+
+
+
- Frontend 개발자 도담입니다 :{')'} +
안녕하세요!
+
Javascript 를 사랑하는
+
+ Frontend 개발자 도담입니다 :{')'} +
+ 메인 사진
- 메인 사진 -
-
- - +
자세한 소개를 준비하고 있어요.🏃🏃
+
조금만 기다려 주세요.😊
-
+ ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f912f4f..0aa9864 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,9 +5,7 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures'; export default function Home(): JSX.Element { return ( -
- -
+ ); } diff --git a/static/img/d0dam.svg b/static/img/d0dam.svg index 3f8dfd2..3f0fcf4 100644 --- a/static/img/d0dam.svg +++ b/static/img/d0dam.svg @@ -1,8 +1,8 @@ - - + + - +