imnyang/imnya.ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source
This commit is contained in:
HyunSuk Nam 2024-08-15 10:51:33 +09:00
commit 11ef63ed0b
9 changed files with 134 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

8
package.json
View file

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

2
src/App.tsx
View file

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

41
src/pages/Root.css
View file

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

30
src/pages/Root.tsx
View file

@ -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}}>
imnyang
<h1 style={{color: '#241f22', fontSize: 60, margin: 0, fontWeight: '700'}}>
<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'>🐈‍⬛ Github</a>
<a href='https://github.com/imnyang/imnyang'>🤔 About</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>

33
src/pages/Timeline.css
View file

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

31
src/pages/Timeline.md
View file

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

20
src/pages/Timeline.tsx
View file

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

68
src/pages/Timeline_Page.tsx Normal file
View file

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