내용 추가

riroan · Mar 30, 2024 · eee27e9 · eee27e9
1 parent d3dc30e
commit eee27e9
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 66 deletions.
diff --git a/riroan/src/App.js b/riroan/src/App.js
@@ -1,35 +1,44 @@
-import React from 'react'
+import React, { useState } from 'react'
 import A from './components/A'
 import Assist from './components/Assist'
 import Div from './components/Div'
 import H1 from './components/H1'
 import H2 from './components/H2'
-import H3 from './components/H3'
 import Item from './components/Item'
 import DateTime from './components/DateTime'
 import P from './components/P'
 import TechStack from './components/TechStack'
+import Ul from './components/Ul'
 import './App.css'
 
 export default function App() {
+	const [visible, setVisible] = useState(true)
 	return (
 		<div className="DefaultContainer">
-			<span>김명기</span>
-			<span> (riroan)</span>
-			<br />
-			1998. 09. 09.
-			<br />
-			Backend Developer
+			<Div>
+				<div style={{ display: 'flex' }}>
+					<div>
+						<span>김명기</span>
+						<span> (riroan)</span>
+						<br />
+						1998. 09. 09.
+						<br />
+						riroan@naver.com
+						<br />
+						Backend Developer
+					</div>
+				</div>
+			</Div>
 			<hr />
 			<br />
 			<Div>
-				안녕하세요
-				<br />
-				<ul>
+				<H2>안녕하세요! 저는</H2>
+				<Ul display={true}>
 					<Item depth={1}>언제나 현재 코드를 개선할 수 있는지 고민합니다.</Item>
 					<Item depth={1}>What보다는 How와 Why를 중요하게 생각합니다.</Item>
 					<Item depth={1}>알고 있는 지식을 알려주고 배우며 함께 성장하는 것을 지향합니다.</Item>
-				</ul>
+					<Item depth={1}>프로그래밍을 활용하여 문제를 해결하는 것을 좋아합니다.</Item>
+				</Ul>
 			</Div>
 			<H1>WORK EXPERIENCES</H1>
 			<Div>
@@ -53,11 +62,11 @@ export default function App() {
 					<A href="https://www.swmaestro.org/sw/bbs/B0000006/view.do?nttId=25024&menuNo=200015&pageIndex=5">소프트웨어 마에스트로 12기에서 수행한 프로젝트</A>입니다. CCTV에서 이상행동을
 					감지하는 프로젝트로 Pytorch를 사용한 AI모델 개발/학습/배포를 진행했습니다. 추가로 관리자를 위한 Backoffice 페이지도 개발했습니다.
 				</P>
-				<ul>
+				<Ul display={visible}>
 					<Item depth={1}>CI/CD/CT 파이프라인 구성</Item>
 					<Item depth={1}>Backbone Network 개선, Data augmentation, Fine tuning 학습 기법을 통해 탐지율 85% → 93% 개선</Item>
 					<Item depth={1}>모델 개발을 위한 SOTA 논문 정독 및 적용</Item>
-					<ul>
+					<Ul display={visible}>
 						<Item depth={2}>
 							<A href="https://github.com/MVIG-SJTU/AlphAction">AlphAction</A>
 						</Item>
@@ -67,58 +76,62 @@ export default function App() {
 						<Item depth={2}>
 							<A href="https://github.com/zengwb-lx/Yolov5-Deepsort-Fastreid">Deepsort + FastReid</A>
 						</Item>
-					</ul>
+					</Ul>
 					<Item depth={1}>
 						<A href="https://atomicdesign.bradfrost.com/chapter-2/">Atomic Design Pattern</A>을 사용하여 Backoffice 페이지 구현
 					</Item>
 					<Item depth={1}>Agile 개발 방법론 사용</Item>
-					<ul>
+					<Ul display={visible}>
 						<Item depth={2}>데일리 스크럼 수행</Item>
 						<Item depth={2}>2주단위 스프린트 4회 진행</Item>
-					</ul>
-				</ul>
+					</Ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>
 					MKCloud <DateTime>2023. 01. - 2023. 05.</DateTime>
 				</H2>
 				<TechStack>#Typescript #React #Java #Spring #MySQL #Nginx #Oracle Cloud #Docker #Github Action</TechStack>
 				<P>개인용 스토리지를 편리하게 사용할 수 있도록 개발한 1인 프로젝트입니다. 프론트엔드, 백엔드 개발을 모두 담당했습니다.</P>
-				<ul>
-					<Item depth={1}>Nginx를 사용하여 리버스 프록시 적용, 최대 전송 파일 크기 제한</Item>
+				<Ul display={visible}>
+					<Item depth={1}>
+						<A href="https://riroan.tistory.com/123">Nginx를 사용하여 리버스 프록시 적용</A>, 최대 전송 파일 크기 제한
+					</Item>
 					<Item depth={1}>Docker Compose, Github Action을 사용하여 CICD 구성</Item>
 					<Item depth={1}>Spring Data JPA를 사용하여 ORM 적용</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>
 					Kunsolved <DateTime>2022. 04. - 2022. 10.</DateTime>
 				</H2>
 				<TechStack>#Typescript #React #Python #FastAPI #MySQL #AWS #Docker #Github Action</TechStack>
 				<P>건국대학교 학생이 해결하지 않은 백준 문제를 분석하고 리스트를 제공하는 1인 프로젝트입니다. 프론트엔드, 백엔드 개발을 모두 담당했습니다.</P>
-				<ul>
+				<Ul display={visible}>
 					<Item depth={1}>Docker Compose, Github Action을 사용하여 CICD 구성</Item>
 					<Item depth={1}>Crontab을 사용하여 주기적인 작업 수행</Item>
 					<Item depth={1}>ACM에서 SSL을 발급하여 Loadbalancer에 적용하여 HTTPS 통신 및 로드밸런싱</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>
 					Lollang <DateTime>2022. 04.</DateTime>
 				</H2>
 				<TechStack>#Python</TechStack>
 				<P>만우절을 기념하여 롤에서 사용하는 채팅을 모방하여 프로그래밍하는 난해한 프로그래밍 언어를 개발했습니다.</P>
-				<ul>
+				<Ul display={visible}>
 					<Item depth={1}>문법 정의 및 로직 구현</Item>
-					<Item depth={1}>롤랭 위키 작성</Item>
-				</ul>
+					<Item depth={1}>
+						<A href="https://github.com/riroan/lollang/wiki/lollang-Grammar">롤랭 위키</A> 작성
+					</Item>
+				</Ul>
 			</Div>
 			<H1>EDUCATION</H1>
-			<P>
+			<Div>
 				<A href="https://cse.konkuk.ac.kr/cse/index.do">건국대학교 컴퓨터공학부</A> 17학번 학사 졸업
 				<br />
 				GPA 3.75/4.50 (CSE 3.75/4.50)
-			</P>
+			</Div>
 			<H1>SKILLS</H1>
 			<Div>
 				<H2>FLUENT</H2>
@@ -137,65 +150,65 @@ export default function App() {
 				<H2>
 					<A href="https://icpc.global/">ICPC</A> <Assist>International Collegiate Programming Contest</Assist>
 				</H2>
-				<ul>
+				<Ul display={visible}>
 					<Item depth={1}>
 						<A href="https://riroan.tistory.com/88">2022, Asia Seoul Regional Contest</A>
 					</Item>
 					<Item depth={1}>2018, Asia Seoul Regional Contest</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>
 					<A href="https://www.facebook.com/codingcompetitions/hacker-cup">Meta Hacker Cup</A>
 				</H2>
-				<ul>
+				<Ul display={visible}>
 					<Item>2023, Competed in Round 2</Item>
 					<Item>
 						<A href="https://riroan.tistory.com/85">2022, Competed in Round 2</A>
 					</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>
 					<A href="https://ucpc.me/">UCPC</A> <Assist>전국 대학생 프로그래밍 대회</Assist>
 				</H2>
-				<ul>
+				<Ul display={visible}>
 					<Item>
 						<A href="https://riroan.tistory.com/71">
 							2022, 41<sup>th</sup> place
 						</A>
 					</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>엘리스 코드 챌린지</H2>
-				<ul>
+				<Ul display={visible}>
 					<Item>
 						<A href="https://riroan.tistory.com/166">2023, 최우수상</A>
 					</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>현대모비스 알고리즘 경진대회</H2>
-				<ul>
+				<Ul display={visible}>
 					<Item>
 						<A href="https://riroan.tistory.com/151">2023, 장려상</A>
 					</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>탑 프로그래머스</H2>
-				<ul>
+				<Ul display={visible}>
 					<Item>
 						<A href="https://riroan.tistory.com/86">2022, 탑 프로그래머스 취득</A>
 					</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<Div>
 				<H2>쇼미더 코드</H2>
-				<ul>
+				<Ul display={visible}>
 					<Item>2022, 1회차 금손 취득</Item>
-				</ul>
+				</Ul>
 			</Div>
 			<H1>ALGORITHM EXPERIENCES</H1>
 			<Div>
@@ -223,48 +236,56 @@ export default function App() {
 				<H2>
 					<A href="https://codeforces.com/profile/riroan">Codeforces</A> <Assist style={{ color: '#AA00AA' }}>최고 레이팅 1,932 (Candidate Master)</Assist>
 				</H2>
-				<P>전세계적으로 인기가 많은 경쟁적 알고리즘 문제 해결 플랫폼입니다. 레이팅 1,932는 상위 3.91%에 해당합니다.</P>
+				<P>전 세계적으로 인기가 많은 경쟁 알고리즘 문제 해결 플랫폼입니다. 레이팅 1,932는 상위 3.91%에 해당합니다.</P>
+			</Div>
+			<Div>
+				<H2>
+					<A href="https://atcoder.jp/users/riroan">Atcoder</A> <Assist style={{ color: '#00C0C0' }}>최고 레이팅 1,369 (4 Kyu)</Assist>
+				</H2>
+				<P>일본에서 만들어진 경쟁 알고리즘 문제 해결 플랫폼입니다. 레이팅 1,369는 상위 7.58%에 해당합니다.</P>
 			</Div>
 			<Div>
 				<H2>
-					<A href="https://atcoder.jp/users/riroan">Atcoder</A> <Assist style={{ color: '#00C0C0' }}>최고 레이팅 1,369 (4Kyu)</Assist>
+					<A href="https://profiles.topcoder.com/riroan">Topcoder</A> <Assist style={{ color: '#6666FF' }}>최고 레이팅 1,415</Assist>
 				</H2>
-				<P>일본에서 만들어진 경쟁적 알고리즘 문제 해결 플랫폼입니다. 레이팅 1,369는 상위 7.58%에 해당합니다.</P>
+				<P>전 세계 사람들과 겨루는 경쟁 알고리즘 문제 해결 플랫폼입니다. 레이팅 1,415는 상위 11.57%에 해당합니다.</P>
 			</Div>
 			<Div>
 				<H2>
 					KUPC <Assist>Konkuk University Programming Contest</Assist>
 				</H2>
 				<P>건국대학교에서 개최한 알고리즘 문제 해결 대회입니다.</P>
-				<ul>
+				<Ul display={visible}>
 					<Item depth={1}>
 						<A href="http://scoreboard.riroan.com/problemset.pdf">KUPC 2022</A> 운영, 출제 및 검수
 					</Item>
-					<ul>
+					<Ul display={visible}>
 						<Item depth={2}>만쥬의 식사</Item>
 						<Item depth={2}>비숍 여행</Item>
 						<Item depth={2}>시험자리 배정하기</Item>
 						<Item depth={2}>즐거운 XOR</Item>
-					</ul>
+					</Ul>
 					<Item depth={1}>
 						<A href="https://www.acmicpc.net/category/989">KUPC 2023</A> 출제 및 검수
 					</Item>
-					<ul>
+					<Ul display={visible}>
 						<Item depth={2}>
 							<A href="https://www.acmicpc.net/problem/30463">K-문자열</A>
 						</Item>
 						<Item depth={2}>
 							<A href="https://www.acmicpc.net/problem/30462">MEXchange</A>
 						</Item>
-					</ul>
-				</ul>
+					</Ul>
+				</Ul>
 			</Div>
 			<H1>ACTIVITIES</H1>
 			<Div>
 				<H2>
 					<A href="https://fastapi.tiangolo.com/">FastAPI</A> 오픈소스 기여 <DateTime>2024. 01 - </DateTime>
 				</H2>
-				<P>FastAPI 공식문서 번역에 기여했습니다.</P>
+				<P>
+					<A href="https://github.com/tiangolo/fastapi/pulls?q=is%3Apr+is%3Aclosed+author%3Ariroan">FastAPI 공식문서 번역에 기여</A>했습니다.
+				</P>
 			</Div>
 			<Div>
 				<H2>
@@ -278,31 +299,34 @@ export default function App() {
 				</H2>
 				<P>SW 개발병으로 군 복무를 수행했습니다.</P>
 			</Div>
+			<H1>GAMES</H1>
+			<Div>
+				리그오브레전드: <A href="https://www.op.gg/summoners/kr/%EB%AA%85%EA%B8%B0%EB%AA%85%EA%B8%B0%EA%B9%80%EB%AA%85%EA%B8%B0-KMG">명기명기김명기#KMG</A>,{' '}
+				<A href="https://www.op.gg/summoners/kr/%EB%9D%B5%EA%B8%B0%EB%AA%85%EA%B8%B0%EA%B9%80%EB%AA%85%EA%B8%B0-KR1">띵기명기김명기#KR1</A>
+				<br />
+				메이플스토리: <A href="https://maple.gg/u/%ED%95%99%EB%8B%A4%EB%A6%AC%EC%A0%91%EA%B8%B0">학다리접기</A>
+			</Div>
 			<H1>CONTACT WITH ME</H1>
 			<Div>
-				이메일: mail://riroan@naver.com
+				<A href="mail://riroan@naver.com">이메일</A>
 				<br />
-				블로그: https://riroan.tistory.com
+				<A href="https://riroan.tistory.com">블로그</A>
 				<br />
-				인스타그램: https://www.instagram.com/dding_gi_98
+				<A href="https://www.instagram.com/dding_gi_98">인스타그램</A>
 				<br />
-				깃허브: https://github.com/riroan
+				<A href="https://github.com/riroan">깃허브</A>
 				<br />
-				링크드인: https://www.linkedin.com/in/riroan/
+				<A href="https://www.linkedin.com/in/riroan/">링크드인</A>
 				<br />
-				백준: https://www.acmicpc.net/user/riroan
+				<A href="https://www.acmicpc.net/user/riroan">백준</A>
 				<br />
-				솔브드: https://solved.ac/profile/riroan
+				<A href="https://solved.ac/profile/riroan">솔브드</A>
 				<br />
-				코드포스: https://codeforces.com/profile/
+				<A href="https://codeforces.com/profile/">코드포스</A>
 				<br />
-				앳코더: https://atcoder.jp/users/riroan
-			</Div>
-			<H1>GAMES</H1>
-			<Div>
-				리그오브레전드: 명기명기김명기#KMG, 띵기명기김명기#KR1
+				<A href="https://atcoder.jp/users/riroan">앳코더</A>
 				<br />
-				메이플스토리: 학다리접기
+				<A href="https://profiles.topcoder.com/riroan">탑코더</A>
 			</Div>
 		</div>
 	)

diff --git a/riroan/src/components/A/A.module.css b/riroan/src/components/A/A.module.css
@@ -4,6 +4,7 @@
 	text-underline-offset: 2px;
 	text-decoration-thickness: 1px;
 	font-weight: 700;
+	color: black;
 }
 
 .container:visited {

diff --git a/riroan/src/components/TechStack/TechStack.module.css b/riroan/src/components/TechStack/TechStack.module.css
@@ -2,4 +2,7 @@
 	font-size: 16px;
 	color: #444;
 	letter-spacing: -0.04ch;
+	margin-left: 10px;
+	margin-bottom: 5px;
+	margin-top: -7px;
 }
diff --git a/riroan/src/components/Ul/Ul.js b/riroan/src/components/Ul/Ul.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './Ul.module.css'
+
+export default function Ul(props) {
+	return (
+		<ul style={{ display: props.display ? 'block' : 'none', transition: '1s' }} className={styles.container}>
+			{props.children}
+		</ul>
+	)
+}
diff --git a/riroan/src/components/Ul/Ul.module.css b/riroan/src/components/Ul/Ul.module.css
@@ -0,0 +1,4 @@
+.container {
+	padding-left: 5px;
+	letter-spacing: -0.04ch;
+}
diff --git a/riroan/src/components/Ul/index.js b/riroan/src/components/Ul/index.js
@@ -0,0 +1,3 @@
+import Ul from './Ul'
+
+export default Ul
diff --git a/riroan/src/default.css b/riroan/src/default.css
@@ -7,3 +7,11 @@ li {
 a:visited {
 	text-decoration: none;
 }
+
+ul {
+	margin-top: 5px;
+}
+
+ul > ul {
+	margin-top: 0;
+}