diff --git a/bun.lockb b/bun.lockb index f861723..d65219a 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index bd5bd6b..cd9a25b 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,13 @@ "preview": "vite preview" }, "dependencies": { + "@emotion/react": "^11.13.0", + "@emotion/styled": "^11.13.0", + "@fontsource/roboto": "^5.0.14", + "@mui/icons-material": "^5.16.7", + "@mui/lab": "^5.0.0-alpha.173", + "@mui/material": "^5.16.7", + "@mui/styled-engine-sc": "^6.0.0-alpha.18", "@nextui-org/kbd": "^2.0.33", "@nextui-org/react": "^2.4.6", "autoprefixer": "^10.4.20", @@ -22,6 +29,7 @@ "react-markdown": "^9.0.1", "react-router-dom": "^6.26.0", "rehype-highlight": "^7.0.0", + "styled-components": "^6.1.12", "tailwind": "^4.0.0", "tailwindcss": "^3.4.7" }, diff --git a/src/App.tsx b/src/App.tsx index 45ad710..27bd5b9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import Root from './pages/Root'; -import Timeline from './pages/Timeline'; +import Timeline from './pages/Timeline_Page'; import { Route, Routes } from 'react-router-dom'; import { useEffect } from 'react'; diff --git a/src/pages/Root.css b/src/pages/Root.css index 9c44c30..c1c9ec8 100644 --- a/src/pages/Root.css +++ b/src/pages/Root.css @@ -1,11 +1,11 @@ .App { - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; display: flex; flex-direction: row; align-items: center; justify-content: center; - background-color: #41444B; + background-color: #101020; color: black; } @@ -19,21 +19,50 @@ } .left { - width: 45%; + width: 40%; height: 100%; background-color: #DFC7D4; display: flex; flex-direction: column; align-items: center; justify-content: center; + + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; } .right { - width: 55%; + width: 60%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; - background-color: #41444B; + background-color: #101020; +} + +@media screen and (max-width: 768px) { + .App { + display: flex; + flex-direction: column; + } + + .container { + flex-direction: column; + } + + .left { + width: 100%; + height: 70%; + + border-top-left-radius: 0px; + border-top-right-radius: 0px; + border-bottom-left-radius: 25px; + border-bottom-right-radius: 25px; + } + + .right { + width: 100%; + height: 30%; + } } \ No newline at end of file diff --git a/src/pages/Root.tsx b/src/pages/Root.tsx index 450cdbb..8bcc6b4 100644 --- a/src/pages/Root.tsx +++ b/src/pages/Root.tsx @@ -1,17 +1,19 @@ import { useEffect, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation, Link } from 'react-router-dom'; import './Root.css'; function Root() { const location = useLocation(); const [imageSrc, setImageSrc] = useState('https://f.imnyang.xyz/profile/imnyang.webp'); - + const [gotoHref, setGotoHref] = useState('/'); useEffect(() => { const queryParams = new URLSearchParams(location.search); if (queryParams.has('kawaii')) { setImageSrc('https://f.imnyang.xyz/profile/magic_imnyang.webp'); + setGotoHref('/'); } else { setImageSrc('https://f.imnyang.xyz/profile/imnyang.webp'); + setGotoHref('/?kawaii'); } }, [location.search]); @@ -20,17 +22,20 @@ function Root() {
-

- imnyang +

+ imnyang

-
+

πŸ–₯️ Software Engineer
🎨 UI / UX Designer in Sqlare

πŸ“š Middle School Student in South Korea +
+
+

Enter Furry.

@@ -38,13 +43,22 @@ function Root() {
- πŸ“¬ Mail - πŸˆβ€β¬› Github + πŸ€” About πŸ“ Blog + 🌈 Timeline +
+
+ πŸˆβ€β¬› Github + πŸ“¬ Mail + πŸ“Έ Instagram + 🐦 X +
+
+

Project

- 🌈 Timeline πŸ₯• isangjeong.today +
diff --git a/src/pages/Timeline.css b/src/pages/Timeline.css deleted file mode 100644 index 36db20b..0000000 --- a/src/pages/Timeline.css +++ /dev/null @@ -1,33 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap'); - -.App { - width: 100vw; - height: 100vh; - - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - background-color: #101010; - z-index: 9; -} - -.inner { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - text-align: left; -} -.scroll { - height: 60vh; - overflow-y: auto; - padding: 0 20px; -} - -code { - color: #fff; - font-family: "Nanum Gothic Coding", monospace; -} \ No newline at end of file diff --git a/src/pages/Timeline.md b/src/pages/Timeline.md deleted file mode 100644 index 5c2958c..0000000 --- a/src/pages/Timeline.md +++ /dev/null @@ -1,31 +0,0 @@ -# 🌈 Timeline - -- `2024-05-16` [κΈ€λ‘œλ²Œ μŠ€νƒ€νŠΈμ—… 학ꡐ λ² νŠΈλ‚¨ ν•΄μ™Έ μ—°μˆ˜ 데λͺ¨λ°μ΄ λŒ€μƒ (1μœ„)](http://ncf.or.kr) -- `2024-05-11` [κΈ€λ‘œλ²Œ μŠ€νƒ€νŠΈμ—… 학ꡐ 2κΈ° 합격](http://ncf.or.kr) -- `2024-05-11` [LG AI μ²­μ†Œλ…„ μΊ ν”„ 1κΈ° LG 탐색상 μˆ˜μƒ](https://lgaiyouthcamp.or.kr/) -- `2024-05-11` [LG AI μ²­μ†Œλ…„ μΊ ν”„ 1κΈ° 수료](https://lgaiyouthcamp.or.kr/) -- `2024-04-22` [@isangjeong.today (μΈμ²œμƒμ •μ€‘ν•™κ΅μ˜ 였늘 급식)](https://www.instagram.com/isangjeong.today/) -- `2024-04-06` [TimeTable (Sekai 개쑰판 배포) [API μœ μ‹€]](https://timeline.imnyang.xyz) -- `2024-03-24` [Dreamhack #133](https://dreamhack.io/users/40116/wargame) -- `2024-03-24` [Ubuntu Mirror](https://launchpad.net/ubuntu/+mirror/mirror.imnyang.xyz-release) -- `2024-03-24` [λ‚΄ λͺ©μ†Œλ¦¬λ‘œ AI Cover λ§Œλ“€κΈ°](https://colab.research.google.com/drive/1a4G4hD9huBeGRZhEL2HNDMpqSuf4y61k?usp=sharing) -- `2024-01-26` [Fastapiλ₯Ό 톡해 API μ œμž‘](https://github.com/imnyang/api) -- `2023-12-20` LG AI μ²­μ†Œλ…„ μΊ ν”„ 1κΈ° 합격 -- `2023-11-14` μΈμ²œμƒμ •μ€‘ν•™κ΅ 2023학년도 SW 문제 ν•΄κ²° ν™œλ™ μš°μˆ˜μƒ(2μœ„) μˆ˜μ—¬ -- `2023-11-01` [λΈ”λ‘œκ·Έ μ‹œμž‘](https://blog.imnyang.xyz) -- `2023-10-12` [λ‚˜λŠ” 둜컬 μ‹œκ°„μ„ μ•Œκ³  μ‹Άλ‹€](https://time.imnyang.xyz/) -- `2023-09-24` [sqlr.kr 기획 및 초기 개발](https://github.com/sqlare/sqlr.kr/tree/main) -- `2023-09-02` 선린인터넷고등학ꡐ 제6회 μ†Œν”„νŠΈμ›¨μ–΄λ‚˜λŠ μΆ•μ œ Layer7 λΆ€μ„œ κ³Όμ • 이수 -- `2023-08-26` [μ»΄μ‹œκ°„ μ‹œκ°„ν‘œλ₯Ό 더 λ‚˜μ•„λ³΄μ΄κ²Œ Sekai](https://github.com/imnyang/Sekai) -- `2023-08-23` [λ””μŠ€μ½”λ“œ 톡화방 λ…ΉμŒ](https://github.com/imnyang/discord-voice-rec) -- `2023-07-24` ν•œκ΅­μ •λ³΄κΈ°μˆ μ—°κ΅¬μ›μ΄ μ£Όλ„ν•˜λŠ” 사이버 κ°€λ””μ–Έμ¦ˆ λ³΄μ•ˆμΊ ν”„ 수료 -- `2023-03-20` [λ””μŠ€μ½”λ“œμ—μ„œ λŒ€ν™”ν˜• 인곡지λŠ₯ Siru μ œμž‘](https://github.com/imnyang/siru) -- `2023-05-15` ν•œκ΅­ μ½”λ“œνŽ˜μ–΄ μ˜ˆμ„  μ§„μΆœ -- `2023-03-14` [타이머](https://github.com/imnyang/imnyang-timer) -- `2022-12-20` 2022 SW영재 μ°½μž‘λŒ€νšŒ 은상 μˆ˜μƒ -- `2022-09-27` 2022 μ‚Όμ„± μ£Όλ‹ˆμ–΄ SW μ°½μž‘λŒ€νšŒ λ³Έμ„  μ§„μΆœ -- `2022-05-23` 2022학년도 μ„μ •μ΄ˆSWμ˜μž¬ν•™κΈ‰ 첫 μˆ˜μ—… -- `2022-07-26` 제 14회 λ§‘μ€ν•˜λŠ˜ λ§‘μ€μ›ƒμŒ 곡λͺ¨μ „μ—μ„œ λ§‘μ€μ›ƒμŒμƒ μˆ˜μ—¬ -- `2021-11-14` Become a ZEPETO Creator 이수 -- `2021-05-19` μ†Œν”„νŠΈμ›¨μ–΄μ™€ μ „μžμ‹ λ¬Έμ΄ μ£Όκ΄€ν•œ μ†Œν”„νŠΈμ›¨μ–΄μž¬λ‹¨ 꿈찾기 μΊ ν”„ 이수 -- `2018-01-27` 제4회 λ§‘μ€ν•˜λŠ˜ λ§‘μ€μ›ƒμŒ 어린이 문예곡λͺ¨μ „μ—μ„œ μœ„λ‹‰μŠ€μƒ(2μœ„) μˆ˜μ—¬ \ No newline at end of file diff --git a/src/pages/Timeline.tsx b/src/pages/Timeline.tsx deleted file mode 100644 index 73d6c07..0000000 --- a/src/pages/Timeline.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Markdown from "react-markdown"; -import './Timeline.css'; -import markdown from './Timeline.md'; - -import "highlight.js/styles/a11y-dark.css"; -import rehypeHighlight from "rehype-highlight"; - -export default function Timeline() { - return ( -
-
- ⬅️ Back -
- -
-
- -
- ); -} \ No newline at end of file diff --git a/src/pages/Timeline_Page.tsx b/src/pages/Timeline_Page.tsx new file mode 100644 index 0000000..29972b8 --- /dev/null +++ b/src/pages/Timeline_Page.tsx @@ -0,0 +1,68 @@ +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import Timeline from '@mui/lab/Timeline'; +import TimelineItem from '@mui/lab/TimelineItem'; +import TimelineSeparator from '@mui/lab/TimelineSeparator'; +import TimelineConnector from '@mui/lab/TimelineConnector'; +import TimelineContent from '@mui/lab/TimelineContent'; +import TimelineDot from '@mui/lab/TimelineDot'; +import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; + +const events = [ + { date: '2024-08-01', description: 'κΈ€λ‘œλ²Œ μŠ€νƒ€νŠΈμ—… 학ꡐ λ² νŠΈλ‚¨ ν•΄μ™Έ μ—°μˆ˜ 데λͺ¨λ°μ΄ λŒ€μƒ (1μœ„)', link: 'http://ncf.or.kr', dotColor: 'success' }, + { date: '2024-05-16', description: 'κΈ€λ‘œλ²Œ μŠ€νƒ€νŠΈμ—… 학ꡐ 2κΈ° 합격', link: 'http://ncf.or.kr', dotColor: 'success' }, + { date: '2024-05-11', description: 'LG AI μ²­μ†Œλ…„ μΊ ν”„ 1κΈ° LG 탐색상 μˆ˜μƒ', link: 'https://lgaiyouthcamp.or.kr/', dotColor: 'success' }, + { date: '2024-05-11', description: 'LG AI μ²­μ†Œλ…„ μΊ ν”„ 1κΈ° 수료', link: 'https://lgaiyouthcamp.or.kr/', dotColor: 'success' }, + { date: '2024-04-22', description: '@isangjeong.today (μΈμ²œμƒμ •μ€‘ν•™κ΅μ˜ 였늘 급식)', link: 'https://www.instagram.com/isangjeong.today/', dotColor: 'success' }, + { date: '2024-04-06', description: 'TimeTable (Sekai 개쑰판 배포) [API μœ μ‹€]', link: 'https://timeline.imnyang.xyz', dotColor: 'grey' }, + { date: '2024-03-24', description: 'Dreamhack #133', link: 'https://dreamhack.io/users/40116/wargame', dotColor: 'success' }, + { date: '2024-03-24', description: 'Ubuntu Mirror', link: 'https://launchpad.net/ubuntu/+mirror/mirror.imnyang.xyz-release', dotColor: 'success' }, + { date: '2024-03-24', description: 'λ‚΄ λͺ©μ†Œλ¦¬λ‘œ AI Cover λ§Œλ“€κΈ°', link: 'https://colab.research.google.com/drive/1a4G4hD9huBeGRZhEL2HNDMpqSuf4y61k?usp=sharing', dotColor: 'success' }, + { date: '2024-01-26', description: 'Fastapiλ₯Ό 톡해 API μ œμž‘', link: 'https://github.com/imnyang/api', dotColor: 'grey' }, + { date: '2023-12-20', description: 'LG AI μ²­μ†Œλ…„ μΊ ν”„ 1κΈ° 합격', dotColor: 'success' }, + { date: '2023-11-14', description: 'μΈμ²œμƒμ •μ€‘ν•™κ΅ 2023학년도 SW 문제 ν•΄κ²° ν™œλ™ μš°μˆ˜μƒ(2μœ„) μˆ˜μ—¬', dotColor: 'success' }, + { date: '2023-11-01', description: 'λΈ”λ‘œκ·Έ μ‹œμž‘', link: 'https://blog.imnyang.xyz', dotColor: 'secondary' }, + { date: '2023-10-12', description: 'λ‚˜λŠ” 둜컬 μ‹œκ°„μ„ μ•Œκ³  μ‹Άλ‹€', link: 'https://time.imnyang.xyz/', dotColor: 'success' }, + { date: '2023-09-24', description: 'sqlr.kr 기획 및 초기 개발', link: 'https://github.com/sqlare/sqlr.kr/tree/main', dotColor: 'success' }, + { date: '2023-09-02', description: '선린인터넷고등학ꡐ 제6회 μ†Œν”„νŠΈμ›¨μ–΄λ‚˜λŠ μΆ•μ œ Layer7 λΆ€μ„œ κ³Όμ • 이수', dotColor: 'success' }, + { date: '2023-08-26', description: 'μ»΄μ‹œκ°„ μ‹œκ°„ν‘œλ₯Ό 더 λ‚˜μ•„λ³΄μ΄κ²Œ Sekai', link: 'https://github.com/imnyang/Sekai', dotColor: 'grey' }, + { date: '2023-08-23', description: 'λ””μŠ€μ½”λ“œ 톡화방 λ…ΉμŒ', link: 'https://github.com/imnyang/discord-voice-rec', dotColor: 'grey' }, + { date: '2023-07-24', description: 'ν•œκ΅­μ •λ³΄κΈ°μˆ μ—°κ΅¬μ›μ΄ μ£Όλ„ν•˜λŠ” 사이버 κ°€λ””μ–Έμ¦ˆ λ³΄μ•ˆμΊ ν”„ 수료', dotColor: 'success' }, + { date: '2023-03-20', description: 'λ””μŠ€μ½”λ“œμ—μ„œ λŒ€ν™”ν˜• 인곡지λŠ₯ Siru μ œμž‘', link: 'https://github.com/imnyang/siru', dotColor: 'success' }, + { date: '2023-05-15', description: 'ν•œκ΅­ μ½”λ“œνŽ˜μ–΄ μ˜ˆμ„  μ§„μΆœ', dotColor: 'success' }, + { date: '2023-03-14', description: '타이머', link: 'https://github.com/imnyang/imnyang-timer', dotColor: 'success' }, + { date: '2022-12-20', description: '2022 SW영재 μ°½μž‘λŒ€νšŒ 은상 μˆ˜μƒ', dotColor: 'success' }, + { date: '2022-09-27', description: '2022 μ‚Όμ„± μ£Όλ‹ˆμ–΄ SW μ°½μž‘λŒ€νšŒ λ³Έμ„  μ§„μΆœ', dotColor: 'success' }, + { date: '2022-05-23', description: '2022학년도 μ„μ •μ΄ˆSWμ˜μž¬ν•™κΈ‰ 첫 μˆ˜μ—…', dotColor: 'success' }, + { date: '2022-07-26', description: '제 14회 λ§‘μ€ν•˜λŠ˜ λ§‘μ€μ›ƒμŒ 곡λͺ¨μ „μ—μ„œ λ§‘μ€μ›ƒμŒμƒ μˆ˜μ—¬', dotColor: 'success' }, + { date: '2021-11-14', description: 'Become a ZEPETO Creator 이수', dotColor: 'success' }, + { date: '2021-05-19', description: 'μ†Œν”„νŠΈμ›¨μ–΄μ™€ μ „μžμ‹ λ¬Έμ΄ μ£Όκ΄€ν•œ μ†Œν”„νŠΈμ›¨μ–΄μž¬λ‹¨ 꿈찾기 μΊ ν”„ 이수', dotColor: 'success' }, + { date: '2018-01-27', description: '제4회 λ§‘μ€ν•˜λŠ˜ λ§‘μ€μ›ƒμŒ 어린이 문예곡λͺ¨μ „μ—μ„œ μœ„λ‹‰μŠ€μƒ(2μœ„) μˆ˜μ—¬', dotColor: 'success' }, +]; + +export default function Timeline_Page() { + return ( +
+
+ 🏠 Back +

Timeline

+ + {events.map((event, index) => ( + + + {event.date} + + + + {index < events.length - 1 && } + + + {event.link ? {event.description} : event.description} + + + ))} + +
+
+ ); +} \ No newline at end of file