diff --git a/src/components/HomepageFeatures/index.module.css b/src/components/HomepageFeatures/index.module.css new file mode 100644 index 0000000..7aeb33a --- /dev/null +++ b/src/components/HomepageFeatures/index.module.css @@ -0,0 +1,43 @@ +.container { + width: 100%; + height: 100%; +} + +.top { + display: flex; + justify-content: space-around; + font-size: 32px; + margin: 0 64px; + border-bottom: 1px solid #eee; +} + +.top > div { + display: flex; + flex-direction: column; + justify-content: center; +} + +.img { + width: 340px; +} + +.button-section { + margin-top: 124px; + display: flex; + gap: 256px; + align-items: center; + justify-content: center; +} + +.button-section > button { + border: 1px solid #ddd; + border-radius: 8px; + padding: 16px 32px; + background: none; + font-size: 24px; + cursor: pointer; +} + +.button-section > button:hover { + background: #ddd; +} diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index e1e85b0..66389e4 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -1,5 +1,26 @@ import React from 'react'; +import styles from './index.module.css'; export default function HomepageFeatures(): JSX.Element { - return
; + const gotoBlog = () => window.open('/blog'); + const gotoGithub = () => window.open('https://github.com/d0dam'); + + return ( +
+
+
+
안녕하세요!
+
Javascript 를 사랑하는
+
+ Frontend 개발자 도담입니다 :{')'} +
+
+ 메인 사진 +
+
+ + +
+
+ ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8f95cb4..f912f4f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,8 +4,10 @@ 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 new file mode 100644 index 0000000..3f8dfd2 --- /dev/null +++ b/static/img/d0dam.svg @@ -0,0 +1,9 @@ + + + + + + + + +