Blue Archive The Anime 보다가 스파게티 코드에 보던 것도 놓침

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"
   },

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';
 

src/pages/Root.css

@@ -1,11 +1,11 @@
 .App {
-  width: 100%;
+  width: 100vw;
-  height: 100%;
+  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%;
+  }
 }

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() {
       <div className='container'>
         <div className='left'>
           <img src={imageSrc} width={256} className='profile' />
-          <h1 style={{color: '#241f22', fontSize: 60, margin: 0}}>
+          <h1 style={{color: '#241f22', fontSize: 60, margin: 0, fontWeight: '700'}}>
-            imnyang
+            <Link style={{color: '#241f22', fontSize: 60, margin: 0, fontWeight: '700'}} to={gotoHref}>imnyang</Link>
           </h1>
 
-          <div>
+          <div style={{color: 'black'}}>
             <p style={{textAlign: 'left'}}>
               🖥️ Software Engineer
               <br/>
               🎨 UI / UX Designer in <a href='https://sqlare.com'>Sqlare</a>
               <br/><br/>
               📚 Middle School Student in South Korea
+              <br/>
+              <br/>
+              <p style={{color: 'transparent'}}>Enter Furry.</p>
             </p>
           </div>
         </div>
@@ -38,13 +43,22 @@ function Root() {
 
         <div className='right'>
           <div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
-            <a href="mailto:me@imnyang.xyz">📬 Mail</a>
+            <a href='https://github.com/imnyang/imnyang'>🤔 About</a>
-            <a href='https://github.com/imnyang'>🐈‍⬛ Github</a>
             <a href='https://blog.imnyang.xyz'>📝 Blog</a>
+            <Link to="/timeline">🌈 Timeline</Link>
+          </div>
+          <div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
+            <a href='https://github.com/imnyang'>🐈‍⬛ Github</a>
+            <a href="mailto:me@imnyang.xyz">📬 Mail</a>
+            <a href='https://instagram.com/not.furry_'>📸 Instagram</a>
+            <a href='https://x.com/mahiro_me'>🐦 X</a>
+          </div>        
+          <div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
+            <p style={{color: 'white'}}>Project</p>
           </div>
           <div style={{display: 'flex', flexDirection: 'row', gap: 25}}>
-            <a href="/timeline">🌈 Timeline</a>
             <a href='https://instagram.com/isangjeong.today'>🥕 isangjeong.today</a>
+            <a hidden href='https://qloat.com'>🗨️ Qloat</a>
           </div>
         </div>
       </div>

src/pages/Timeline.css

@@ -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;
-}

src/pages/Timeline.md

@@ -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위) 수여

src/pages/Timeline.tsx

@@ -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 (
-        <div className="App">
-            <div className='inner'>
-                <a href='/'>⬅️ Back</a>
-                <div className='scroll'>
-                    <Markdown children={markdown} rehypePlugins={[rehypeHighlight]} />
-                </div>
-            </div>
-            <Help />
-        </div>
-    );
-}

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 (
+        <div style={{ display: 'flex', overflow: 'auto', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'white', width: '100vw', height: '100vh', background: '#101020' }}>
+            <div style={{height: '70%', overflow: 'auto'}}>
+                <Link to='/'>🏠 Back</Link>
+                <h1>Timeline</h1>
+                <Timeline>
+                    {events.map((event, index) => (
+                        <TimelineItem key={index}>
+                            <TimelineOppositeContent sx={{ flex: 0.2, color: 'lightgray' }}>
+                                {event.date}
+                            </TimelineOppositeContent>
+                            <TimelineSeparator>
+                                <TimelineDot variant="outlined" color={event.dotColor} />
+                                {index < events.length - 1 && <TimelineConnector />}
+                            </TimelineSeparator>
+                            <TimelineContent>
+                                {event.link ? <a href={event.link}>{event.description}</a> : event.description}
+                            </TimelineContent>
+                        </TimelineItem>
+                    ))}
+                </Timeline>
+            </div>
+        </div>
+    );
+}