From 9e016287864095402baf57e08f193d5cde8cd6c3 Mon Sep 17 00:00:00 2001
From: ohyo <khr157929@gmail.com>
Date: Mon, 4 Sep 2023 03:27:48 +0900
Subject: [PATCH] [ADD] portfolio

---
 src/ko/slides2.md | 433 ---------------------------------------------
 src/portfolio.md  | 438 ++++++++++++++++++++++++++++++++++++++++++++++
 src/slides2.md    | 433 ---------------------------------------------
 3 files changed, 438 insertions(+), 866 deletions(-)
 delete mode 100644 src/ko/slides2.md
 create mode 100644 src/portfolio.md
 delete mode 100644 src/slides2.md

diff --git a/src/ko/slides2.md b/src/ko/slides2.md
deleted file mode 100644
index bdc65bf6..00000000
--- a/src/ko/slides2.md
+++ /dev/null
@@ -1,433 +0,0 @@
----
-title: Slide page
-icon: person-chalkboard
-layout: Slide
----
-
-<!-- markdownlint-disable MD024 MD033 MD051 -->
-
-@slidestart
-
-<!-- .slide: data-transition="slide" -->
-
-## Slide Demo
-
-<!-- .element: class="r-fit-text" -->
-
-A simple slide demo and useful hints.
-
-<!-- .element: class="r-fit-text" -->
-
-> By Mr.Hope. Please scroll mouse wheel down to the next slide
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Marking Slides
-
-<!-- .element: class="r-fit-text" -->
-
-[👇](#/1/1)
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Marking Slides
-
-<!-- .element: class="r-fit-text" -->
-
-Use `---` to mark horizontal slides
-
-<!-- .element: class="fragment fade-in" -->
-
-Use `--` to separate vertical slides in a horizontal slide.
-
-<!-- .element: class="fragment fade-in" -->
-
-Use `<!-- .slide: ... -->` to add attributes to slide
-
-<!-- .element: class="fragment fade-in" -->
-
-Use `<!-- .element: ... -->` to add attributes to the previous html element
-
-<!-- .element: class="fragment fade-in" -->
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Markdown
-
-<!-- .element: class="r-fit-text" -->
-
-You can use all kinds of markup in slides.
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-### This is a H3
-
-Headings will transform to UPPERCASE by default.
-
-Here is paragraph with some **bold**, _italic_, ~~strike-through~~ text and a [link](https://mrhope.site), and it can auto break itself so you don't need to worry the length.
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-List is `inline-block` by default.
-
-- Item
-- Item
-- Item
-
-1. Item 1
-1. Item 2
-1. Item 3
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-Code block will get auto highlight if you enable `highlight` plugin.
-
-```js
-const a = 1;
-```
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-You can also write math equation using tex syntax if you enable `math` plugin.
-
-$$
-J(\theta_0,\theta_1) = \sum_{i=0}
-$$
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-⚠**Note**: Table, hr and other nonstandard Markdown syntax is not supported.
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Layout
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-auto-animate  -->
-
-## Layout
-
-<!-- .element: class="r-fit-text" -->
-
-👆 The `r-fit-text` class makes text as large as possible without overflowing the slide.
-
---
-
-<!-- .slide: data-auto-animate  -->
-
-## Layout
-
-![Logo](/logo.png)
-
-<!-- .element: class="r-stretch" -->
-
-👆 The `r-stretch` class helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide.
-
---
-
-<!-- .slide: data-auto-animate data-background-color="rgb(70, 70, 255)" -->
-
-## Layout
-
-### Background
-
-Custom background by adding `data-background` attribute to slide.
-
----
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-<!-- .element: class="r-fit-text" -->
-
-Fragments are used to highlight or incrementally reveal individual elements on a slide.
-
-Add `fragment` and animation class to element.
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-### Animation class
-
-- `fade-in`
-<!-- .element: class="fragment fade-in" -->
-
-- `fade-out`
-<!-- .element: class="fragment fade-out" -->
-
-- `fade-up`
-<!-- .element: class="fragment fade-up" -->
-
-<!-- list break -->
-
-- `fade-down`
-<!-- .element: class="fragment fade-down" -->
-
-- `fade-left`
-<!-- .element: class="fragment fade-left" -->
-
-- `fade-right`
-<!-- .element: class="fragment fade-right" -->
-
-<!-- list break -->
-
-- `fade-in-then-out`
-<!-- .element: class="fragment fade-in-then-out" -->
-
-- `fade-in-then-semi-out`
-<!-- .element: class="fragment fade-in-then-semi-out" -->
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-### Animation class
-
-- `grow`
-<!-- .element: class="fragment grow" -->
-
-- `shrink`
-<!-- .element: class="fragment shrink" -->
-
-- `strike`
-<!-- .element: class="fragment strike" -->
-
-<!-- list break -->
-
-- `highlight-red`
-<!-- .element: class="fragment highlight-red" -->
-
-- `highlight-green`
-<!-- .element: class="fragment highlight-green" -->
-
-- `highlight-blue`
-<!-- .element: class="fragment highlight-blue" -->
-
-<!-- list break -->
-
-- `highlight-current-red`
-<!-- .element: class="fragment highlight-current-red" -->
-
-- `highlight-current-green`
-<!-- .element: class="fragment highlight-current-green" -->
-
-- `highlight-current-blue`
-<!-- .element: class="fragment highlight-current-blue" -->
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-### Multiple fragments
-
-Multiple fragments can be applied to the same element sequentially by wrapping it
-
-<span class="fragment fade-in">
-  <span class="fragment highlight-red">
-    <span class="fragment fade-out">
-      Fade in > Turn red > Fade out
-    </span>
-  </span>
-</span>
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-### Order
-
-Order can be changed using the `data-fragment-index` attribute.
-
-Multiple elements can appear at the same index.
-
-- Appears last
-<!-- .element: class="fragment" data-fragment-index="3"-->
-
-- Appears second
-<!-- .element: class="fragment" data-fragment-index="2"-->
-
-<!-- list break -->
-
-- Appears first
-<!-- .element: class="fragment" data-fragment-index="1"-->
-
-- Appears second
-<!-- .element: class="fragment" data-fragment-index="2"-->
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Transition
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Transition
-
-<!-- .element: class="r-fit-text" -->
-
-Transition can be changed by setting the `transition` config option globally or `data-transition` attribute on slide.
-
-Possible values:
-
-- none
-- fade
-- slide
-
-<!-- list break -->
-
-- convex
-- concave
-- zoom
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Transition
-
-<!-- .element: class="r-fit-text" -->
-
-### Auto animate
-
-`data-auto-animate` can be added on nearby slides to make an animation on unchanged elements.
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
-### Code
-
-By enabling `highlight` plugin, you can highlight code blocks.
-
-You can use `[a-b|c-d]` syntax to highlight lines by steps.
-
-```js [1-2|3|4]
-let a = 1;
-let b = 2;
-let c = (x) => 1 + 2 + x;
-c(3);
-```
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
-### Overview
-
-Press `Esc` or `O` to enter overview mode when the presentation is active
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
-### Full Screen
-
-Press `F` or `F11` to enter fullscreen when the presentation is active
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
-### Zoom
-
-Hold down the `alt` key (`ctrl` in Linux) and click on any element to zoom towards it.
-
-Click again to zoom back out.
-
----
-
-<!-- .element: class="r-fit-text" -->
-
-## The End
-
-@slideend
diff --git a/src/portfolio.md b/src/portfolio.md
new file mode 100644
index 00000000..0760c1b4
--- /dev/null
+++ b/src/portfolio.md
@@ -0,0 +1,438 @@
+---
+title: Portfolio
+icon: person-chalkboard
+layout: Slide
+---
+
+<!-- markdownlint-disable MD024 MD033 MD051 -->
+
+@slidestart
+
+<!-- .slide: data-transition="slide" -->
+
+## 즐거움을 주고 싶은
+
+<!-- .element: class="r-fit-text" -->
+
+2년차 프론트엔드 개발자, 김형래입니다.
+
+<!-- .element: class="r-stretch r-fit-text" -->
+
+> 마우스 휠을 내려보세요!
+
+---
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+목차
+
+[1. About Me](#/2/0)
+
+[2. Skills](#/3/0)
+
+[3. Work Experience](#/4/0)
+
+[4. Personal Project](#/5/0)
+
+[5. Contact Me](#/6/0)
+
+---
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## About Me
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## About Me
+
+안녕하세요. 즐거움을 주고싶은 2년차 프론트엔드 개발자 김형래입니다.
+
+<!-- .element: class="r-fit-text" -->
+
+항상 클라이언트의 입장에서 생각하고자 합니다. 작은 버튼 하나라도 클라이언트에게 즐거움을 선사하고 싶습니다.
+
+<!-- .element: class="fragment r-fit-text" -->
+
+누구나 이해하기 쉬운 코드를 작성하고 중복없는 코드를 사용하는 것을 선호합니다.
+
+<!-- .element: class="fragment r-fit-text" -->
+
+문제가 있다면 그 문제를 해결하기 위해 신중한 분석과 많은 테스트를 통하여 문제를 해결합니다.
+
+<!-- .element: class="fragment fade-in r-fit-text" -->
+
+협업을 하는 모든 팀 구성원들과 즐겁게 일하려고 노력합니다. 사소한 갈등이 일어나지 않도록 항상 조심하고 배려합니다. 의견 차이가 있다면 최대한 조율하여 모두가 수용할 수 있도록 노력합니다.
+
+<!-- .element: class="fragment fade-in r-fit-text" -->
+
+---
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## Skills
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Skills
+
+- HTML5, CSS3 & SCSS, Javascript
+- Vue.js, Quasar, jQuery
+- Typescript
+- Vuex, Pinia
+- Vite
+- ESLint, Prettier
+- CI/CD: AWS(S3, Route53, Cloudfront)
+
+--
+
+<!-- .slide: data-auto-animate -->
+
+## Cooperation
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Cooperation
+
+- Git, Svn
+- VS, VSCode
+- Slack, Asana
+- Figma, Zenkins
+
+---
+
+<!-- .slide: data-auto-animate -->
+
+## Work Experience
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Work Experience
+
+### **Quagga inc**
+
+블록체인 기술을 기반으로한 글로벌 금융, 페이먼츠 서비스를 제공하는 회사에서 다양한 프론트엔드 글로벌 웹사이트 개발을 하였습니다.
+
+<!-- .element: class="r-fit-text" -->
+
+각 프로젝트별로 얻은 경험을 간략히 설명하겠습니다.
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-auto-animate -->
+
+## DIGILAB
+
+통합 디지털 금융 서비스를 제공하는 서비스입니다.
+
+<!-- .element: class="r-fit-text" -->
+
+개인, 거래소, 채굴 풀, 토큰 발행자, 헤지펀드 및 기관이 디지털 화폐에 접근하고 거래하고 관리할 수 있도록 돕습니다.
+
+<!-- .element: class="r-fit-text" -->
+
+DigiLab 서비스에 대한 주요 설명과 상품 설명, 코인 지갑, 입출금, 스왑 등의 기능을 제공합니다.
+
+<!-- .element: class="r-fit-text" -->
+
+vue2로 진행되었던 예전 프로젝트를 맡아 vue3로 버전 업그레이드를 하였고 추가 기능 개발과 유지보수를 담당하였습니다.
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## DIGILAB
+
+#### 기능 개발 및 유지보수
+
+- 기존의 vue2 에서 vue3로 마이그레이션 진행
+- 입출금 및 스왑 기능 개발
+- Vuex를 이용한 Props drilling 문제 해결
+- 앱에서 사용할 다양한 웹뷰 페이지 제작
+
+--
+
+<!-- .slide: data-auto-animate -->
+
+## DIGILAB
+
+#### 기능 개발 및 유지보수
+
+- PWA 도입
+- 구글 스프레드시트를 통한 번역본 관리와 i18n을 이용한 다국어 경험
+- 반응형 디자인 경험
+- 주요 기술: Vue2 → Vue3, Vuex, Webpack, SCSS, i18n
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## DIGILAB
+
+#### 쇼핑몰 DEMO
+
+CPASS 결제모듈을 이용한 DIGILAB 내부 쇼핑몰 시연 페이지 퍼블리싱 및 기능 개발을 하였습니다.
+
+--
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## CPASS BACKOFFICE
+
+사내에서 운영하는 모든 서비스들을 통합 관리하는 백오피스입니다.
+
+기존에 진행되고있던 프로젝트를 맡아 추가 기능 개발 및 유지보수를 담당하였습니다.
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## CPASS BACKOFFICE
+
+#### 기능 개발 및 유지보수
+
+- 디자인팀의 디자인 없이 Ant Design을 이용한 모던 UI/UX 사용
+- 다른 프로젝트에서도 사용될 공통 라이브러리 개발 및 배포 (vue3-intl-input, vue3-image-view)
+- 제대로된 문서가 없어 vuepress를 이용한 코드 리뷰, 페이지 문서화, API 문서 제작 및 공유
+- Webpack과 .NET 기반 Vue.js 사용으로 개발 서버 실행만으로 1~2분이 걸리는 것이 너무 오래 걸린다는 생각에 .NET과 Vue.js 를 분리, Webpack → Vite 변경하고싶다는 의견 적극적으로 제시함. 변경 이후, 20초 이내로 개발 서버가 켜지는 더 나은 개발자 경험을 가질수 있었음
+- 주요 기술: Vue3, Vuex, Webpack → Vite, Ant Design, SCSS, i18n, Echarts
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## CPASS 결제모듈
+
+코인을 통해 가맹점 및 회원의 간편한 결제 서비스를 돕는 결제모듈입니다.
+
+모든 기능 개발과 퍼블리싱을 담당하였습니다.
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## CPASS 결제모듈
+
+#### 코인 결제모듈 개발 및 유지보수
+
+- window.popup 을 이용한 결제, 구매 시스템 개발
+- 각종 테스트 중 프록시 조작으로 인한 치명적인 보안 취약점을 발견하여 Signature Code 를 추가하여 이를 해결
+- 주요 기술: HTML, CSS, Javascript, JQuery, i18n
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## MAVEL GAMES
+
+해외 카지노 서비스입니다.
+
+시연이후 프로젝트 리뉴얼시기에 모든 기능 개발과 퍼블리싱을 담당하였습니다.
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## MAVEL GAMES
+
+#### 카지노 사이트 개발 및 유지보수
+
+- 프로젝트 시작 전 회의에서 Quasar Framework와 Typescript, Pinia 도입 의견 제시
+- 첫 Quasar Framework 도입, Quasar UI를 기반으로한 디자인 팀과의 협업
+- 첫 Typescript, Pinia 도입
+- CPASS 결제모듈을 이용한 결제 서비스 개발
+- 카지노 게임을 위해 window.popup을 쓰던것에서 페이지 내부적으로 다수의 dialog를 띄우고 확대, 축소 기능을 이용해 사용자가 페이지를 벗어나지 않고 다양한 게임을 진행할 수 있게함. 이에 좋은 사용자 경험을 얻을 수 있었음
+- 주요 기술: Quasar Framework, Vue3, Vite, Pinia, Typescript, SCSS, i18n
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## Tradicaster
+
+코인 차트 예측(1분봉) 게임을 제공하는 서비스입니다.
+
+<!-- .element: class="r-fit-text" -->
+
+초기 기획부터 참여하여 퍼블리싱과 대부분의 기능 구현을 담당하였습니다.
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Tradicaster
+
+#### 차트 1분봉 게임 개발
+
+- 차트, 게임과 채팅 채널, 1분마다 예측을 하고 이에 실시간으로 결과를 보여주어야하는 것을 통해 Socket에 대한 개발 경험
+- Canvas를 이용한 1분 타이머 기능 개발로 Canvas 개발 경험
+- 사용자 시간대 설정을 통한 타임존 개발 경험
+- 다양한 lottie.json을 이용한 lottiefiles 경험
+- 주요 기술: Quasar Framework, Vue3, Vite, Pinia, Typescript, SCSS, Canvas, SignalR(WebSocket), i18n, Echarts
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## TRADICASTER BACKOFFICE
+
+가맹점 및 에이전트에게 제공되는 Tradicaster 백오피스입니다.
+
+<!-- .element: class="r-fit-text" -->
+
+초기 기획부터 참여하여 모든 기능 개발과 퍼블리싱을 담당하였습니다.
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## TRADICASTER BACKOFFICE
+
+#### Tradicaster 백오피스 개발
+
+- 디자인 팀의 디자인 없이 Quasar UI, Ant Design을 이용한 모던 UI/UX 사용
+- 주요 기술: Quasar Framework, Ant Design, Vue3, Vite, Pinia, Typescript, SCSS, i18n, Echarts
+
+<!-- .element: class="r-fit-text" -->
+
+---
+
+## Personal Project
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Nextbit
+
+<a href="https://nextbit.site" target="_blank">Nextbit 바로가기</a>
+
+코인 모의투자 서비스를 제공합니다.
+
+단순히 몇가지 만들어보고 끝이아닌 앞으로도 다국어 지원, 다양한 기능을 추가하는 지속적인 업데이트, Quasar를 이용한 앱 빌드로 구글스토어, 앱스토어와 마이크로소프트 스토어에 배포까지 해보는 것이 목표입니다.
+
+<!-- .element: class="fragment fade-up r-fit-text" -->
+
+많은 시간이 걸리겠지만 아비트라지 기법을 응용한 자동투자 서비스를 만들어보는 것이 마지막 목표입니다. 궁극적으로는 디자인과 백엔드 경험과 실력을 향상시키기 위함입니다.
+
+<!-- .element: class="fragment fade-up r-fit-text" -->
+
+--
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## Nextbit
+
+- 다양한 코인을 모의투자 해볼 수 있는 서비스를 제공합니다.
+- 기획부터 디자인, 백엔드까지 진행해본 개인 프로젝트입니다.
+- 다크모드, 다국어(영어, 한국어)를 지원합니다.
+- PWA, 안드로이드 앱, 데스크탑 앱을 지원합니다.
+- 프론트, 백 모두 배포 환경을 테스트할 수 있는 dev-live 서버와 실 사용서버 live 서버를 나누어 운영합니다.
+
+<!-- .element: class="r-fit-text" -->
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Nextbit
+
+#### 사용 기술 및 배포 환경
+
+--
+
+<!-- .slide: data-transition="slide" data-auto-animate -->
+
+## Nextbit
+
+#### Frontend
+
+Quasar Framework, Vue3, Vite, Pinia, Typescript, SCSS, AmCharts, i18n, WebSocket
+
+#### Frontend Deploy
+
+S3, Route53, Cloudfront, Github actions
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Nextbit
+
+#### Backend
+
+Nodejs, Typescript, JWT, Swagger, i18n, mongoDB Atlas, WebSocket
+
+#### Backend Deploy
+
+Koyeb, Github
+
+---
+
+<!-- .slide: data-auto-animate  -->
+
+## Extra
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Extra
+
+- 2016.03 ~ 2017.06 정보과학교육원 정보보안학 (군입대 이후 중퇴)
+- 2017.10 ~ 2019.07 육군 복무
+- 2019.07 ~ 2021.01 전문하사(부사관) 복무
+- 2021.11 ~ 2022.02 부트캠프 항해99 4기 프론트엔드 과정 수료
+- 2022.02 ~ 2023.06 (주)콰가 재직
+
+<!-- .element: class="r-fit-text" -->
+
+---
+
+<!-- .slide: data-auto-animate -->
+
+## Thank you for watching!
+
+--
+
+<!-- .slide: data-auto-animate data-background-color="rgb(18, 18, 18)" -->
+
+## Thank you
+
+#### Contact me
+
+📧 khr157929@gmail.com
+
+📞 010-2557-4892
+
+🔗 <a href="https://O-h-y-o.github.io" target="_blank">https://o-h-y-o.github.io</a>
+
+🔗 <a href="https://github.com/O-h-y-o" target="_blank">https://github.com/o-h-y-o</a>
diff --git a/src/slides2.md b/src/slides2.md
deleted file mode 100644
index bdc65bf6..00000000
--- a/src/slides2.md
+++ /dev/null
@@ -1,433 +0,0 @@
----
-title: Slide page
-icon: person-chalkboard
-layout: Slide
----
-
-<!-- markdownlint-disable MD024 MD033 MD051 -->
-
-@slidestart
-
-<!-- .slide: data-transition="slide" -->
-
-## Slide Demo
-
-<!-- .element: class="r-fit-text" -->
-
-A simple slide demo and useful hints.
-
-<!-- .element: class="r-fit-text" -->
-
-> By Mr.Hope. Please scroll mouse wheel down to the next slide
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Marking Slides
-
-<!-- .element: class="r-fit-text" -->
-
-[👇](#/1/1)
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Marking Slides
-
-<!-- .element: class="r-fit-text" -->
-
-Use `---` to mark horizontal slides
-
-<!-- .element: class="fragment fade-in" -->
-
-Use `--` to separate vertical slides in a horizontal slide.
-
-<!-- .element: class="fragment fade-in" -->
-
-Use `<!-- .slide: ... -->` to add attributes to slide
-
-<!-- .element: class="fragment fade-in" -->
-
-Use `<!-- .element: ... -->` to add attributes to the previous html element
-
-<!-- .element: class="fragment fade-in" -->
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Markdown
-
-<!-- .element: class="r-fit-text" -->
-
-You can use all kinds of markup in slides.
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-### This is a H3
-
-Headings will transform to UPPERCASE by default.
-
-Here is paragraph with some **bold**, _italic_, ~~strike-through~~ text and a [link](https://mrhope.site), and it can auto break itself so you don't need to worry the length.
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-List is `inline-block` by default.
-
-- Item
-- Item
-- Item
-
-1. Item 1
-1. Item 2
-1. Item 3
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-Code block will get auto highlight if you enable `highlight` plugin.
-
-```js
-const a = 1;
-```
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-You can also write math equation using tex syntax if you enable `math` plugin.
-
-$$
-J(\theta_0,\theta_1) = \sum_{i=0}
-$$
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Markdown
-
-You can use all kinds of markup in slides.
-
-⚠**Note**: Table, hr and other nonstandard Markdown syntax is not supported.
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Layout
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-auto-animate  -->
-
-## Layout
-
-<!-- .element: class="r-fit-text" -->
-
-👆 The `r-fit-text` class makes text as large as possible without overflowing the slide.
-
---
-
-<!-- .slide: data-auto-animate  -->
-
-## Layout
-
-![Logo](/logo.png)
-
-<!-- .element: class="r-stretch" -->
-
-👆 The `r-stretch` class helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide.
-
---
-
-<!-- .slide: data-auto-animate data-background-color="rgb(70, 70, 255)" -->
-
-## Layout
-
-### Background
-
-Custom background by adding `data-background` attribute to slide.
-
----
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-<!-- .element: class="r-fit-text" -->
-
-Fragments are used to highlight or incrementally reveal individual elements on a slide.
-
-Add `fragment` and animation class to element.
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-### Animation class
-
-- `fade-in`
-<!-- .element: class="fragment fade-in" -->
-
-- `fade-out`
-<!-- .element: class="fragment fade-out" -->
-
-- `fade-up`
-<!-- .element: class="fragment fade-up" -->
-
-<!-- list break -->
-
-- `fade-down`
-<!-- .element: class="fragment fade-down" -->
-
-- `fade-left`
-<!-- .element: class="fragment fade-left" -->
-
-- `fade-right`
-<!-- .element: class="fragment fade-right" -->
-
-<!-- list break -->
-
-- `fade-in-then-out`
-<!-- .element: class="fragment fade-in-then-out" -->
-
-- `fade-in-then-semi-out`
-<!-- .element: class="fragment fade-in-then-semi-out" -->
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-### Animation class
-
-- `grow`
-<!-- .element: class="fragment grow" -->
-
-- `shrink`
-<!-- .element: class="fragment shrink" -->
-
-- `strike`
-<!-- .element: class="fragment strike" -->
-
-<!-- list break -->
-
-- `highlight-red`
-<!-- .element: class="fragment highlight-red" -->
-
-- `highlight-green`
-<!-- .element: class="fragment highlight-green" -->
-
-- `highlight-blue`
-<!-- .element: class="fragment highlight-blue" -->
-
-<!-- list break -->
-
-- `highlight-current-red`
-<!-- .element: class="fragment highlight-current-red" -->
-
-- `highlight-current-green`
-<!-- .element: class="fragment highlight-current-green" -->
-
-- `highlight-current-blue`
-<!-- .element: class="fragment highlight-current-blue" -->
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-### Multiple fragments
-
-Multiple fragments can be applied to the same element sequentially by wrapping it
-
-<span class="fragment fade-in">
-  <span class="fragment highlight-red">
-    <span class="fragment fade-out">
-      Fade in > Turn red > Fade out
-    </span>
-  </span>
-</span>
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Fragment
-
-### Order
-
-Order can be changed using the `data-fragment-index` attribute.
-
-Multiple elements can appear at the same index.
-
-- Appears last
-<!-- .element: class="fragment" data-fragment-index="3"-->
-
-- Appears second
-<!-- .element: class="fragment" data-fragment-index="2"-->
-
-<!-- list break -->
-
-- Appears first
-<!-- .element: class="fragment" data-fragment-index="1"-->
-
-- Appears second
-<!-- .element: class="fragment" data-fragment-index="2"-->
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Transition
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Transition
-
-<!-- .element: class="r-fit-text" -->
-
-Transition can be changed by setting the `transition` config option globally or `data-transition` attribute on slide.
-
-Possible values:
-
-- none
-- fade
-- slide
-
-<!-- list break -->
-
-- convex
-- concave
-- zoom
-
---
-
-<!-- .slide: data-auto-animate -->
-
-## Transition
-
-<!-- .element: class="r-fit-text" -->
-
-### Auto animate
-
-`data-auto-animate` can be added on nearby slides to make an animation on unchanged elements.
-
----
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
-### Code
-
-By enabling `highlight` plugin, you can highlight code blocks.
-
-You can use `[a-b|c-d]` syntax to highlight lines by steps.
-
-```js [1-2|3|4]
-let a = 1;
-let b = 2;
-let c = (x) => 1 + 2 + x;
-c(3);
-```
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
-### Overview
-
-Press `Esc` or `O` to enter overview mode when the presentation is active
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
-### Full Screen
-
-Press `F` or `F11` to enter fullscreen when the presentation is active
-
---
-
-<!-- .slide: data-transition="slide" data-auto-animate -->
-
-## Functions
-
-<!-- .element: class="r-fit-text" -->
-
-### Zoom
-
-Hold down the `alt` key (`ctrl` in Linux) and click on any element to zoom towards it.
-
-Click again to zoom back out.
-
----
-
-<!-- .element: class="r-fit-text" -->
-
-## The End
-
-@slideend