Update about me page (#142)

.devcontainer/devcontainer.json

@@ -1,5 +1,4 @@
 {
-	"name": "lasuillard/lasuillard.github.io",
 	"dockerComposeFile": ["./docker-compose.devcontainer.yaml"],
 	"runServices": ["workspace", "novnc"],
 	"service": "workspace",

src/components/icon/Docker.svelte

@@ -0,0 +1,19 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 756.26 596.9"
+  data-testid="icon/docker"
+	{...$$restProps}
+>
+	<defs>
+		<style>
+			.cls-1 {
+				fill: #1d63ed;
+				stroke-width: 0px;
+			}
+		</style>
+	</defs>
+	<path
+		class="cls-1"
+		d="M743.96,245.25c-18.54-12.48-67.26-17.81-102.68-8.27-1.91-35.28-20.1-65.01-53.38-90.95l-12.32-8.27-8.21,12.4c-16.14,24.5-22.94,57.14-20.53,86.81,1.9,18.28,8.26,38.83,20.53,53.74-46.1,26.74-88.59,20.67-276.77,20.67H.06c-.85,42.49,5.98,124.23,57.96,190.77,5.74,7.35,12.04,14.46,18.87,21.31,42.26,42.32,106.11,73.35,201.59,73.44,145.66.13,270.46-78.6,346.37-268.97,24.98.41,90.92,4.48,123.19-57.88.79-1.05,8.21-16.54,8.21-16.54l-12.3-8.27ZM189.67,206.39h-81.7v81.7h81.7v-81.7ZM295.22,206.39h-81.7v81.7h81.7v-81.7ZM400.77,206.39h-81.7v81.7h81.7v-81.7ZM506.32,206.39h-81.7v81.7h81.7v-81.7ZM84.12,206.39H2.42v81.7h81.7v-81.7ZM189.67,103.2h-81.7v81.7h81.7v-81.7ZM295.22,103.2h-81.7v81.7h81.7v-81.7ZM400.77,103.2h-81.7v81.7h81.7v-81.7ZM400.77,0h-81.7v81.7h81.7V0Z"
+	/>
+</svg>

src/components/icon/npm.svelte

@@ -0,0 +1,20 @@
+<svg
+	id="n"
+	xmlns="http://www.w3.org/2000/svg"
+	width="16"
+	height="16"
+	viewBox="0 0 16 16"
+	{...$$restProps}
+>
+	<path class="cls-1" d="M0,16V0H16V16ZM3,3V13H8V5h3v8h2V3Z" />
+	<path class="cls-2" d="M3,3H13V13H11V5H8v8H3Z" />
+</svg>
+
+<style>
+	.cls-1 {
+		fill: #c12127;
+	}
+	.cls-2 {
+		fill: #fff;
+	}
+</style>

src/data/certificates.ts

@@ -0,0 +1,33 @@
+export type CertificateItem = {
+	name: string;
+	issuer: string;
+	issuanceDate: Date;
+	description: string;
+};
+
+export default [
+	{
+		name: '정보처리기능사',
+		issuer: '한국산업인력공단',
+		issuanceDate: new Date('2015-02-05'),
+		description: ``
+	},
+	{
+		name: '정보기기운용기능사',
+		issuer: '한국산업인력공단',
+		issuanceDate: new Date('2016-12-05'),
+		description: ``
+	},
+	{
+		name: 'TOEIC (935/990)',
+		issuer: 'ETS',
+		issuanceDate: new Date('2018-09-15'),
+		description: `935/990`
+	},
+	{
+		name: '정보처리기사',
+		issuer: '한국산업인력공단',
+		issuanceDate: new Date('2020-08-28'),
+		description: ``
+	}
+] as CertificateItem[];

src/data/educations.ts

@@ -0,0 +1,21 @@
+export type EducationItem = {
+	name: string;
+	description: string;
+	period: {
+		start: Date;
+		end: Date;
+	};
+};
+
+export default [
+	{
+		name: '서울과학기술대학교',
+		description: `
+컴퓨터공학과 학사, 학점 4.11/4.5
+`,
+		period: {
+			start: new Date('2014-03-02'),
+			end: new Date('2020-02-28')
+		}
+	}
+] as EducationItem[];

src/data/experiences.ts

@@ -0,0 +1,112 @@
+export type ExperienceItem = {
+	organization: string;
+	role: string;
+	summary: string;
+	description: string;
+	period: {
+		start: Date;
+		end: Date;
+	};
+	tags: string[];
+};
+
+export default [
+	{
+		organization: '얼리페이',
+		role: '백엔드 개발자',
+		summary: '오프라인 매출 선정산 서비스 개발 및 출시',
+		description: `
+**선정산 서비스 개발**
+
+- Django 프레임워크를 이용하여 웹 애플리케이션 개발
+- Django REST Framework를 이용한 RESTful API 서버 개발
+- Celery를 이용하여 비동기 작업 처리
+- GitHub Actions와 AWS Beanstalk을 이용한 배포 자동화
+
+**매출 데이터 수집을 위한 웹 크롤러 개발**
+
+- 기존 Flask 1 기반 크롤러 구현을 FastAPI로 마이그레이션
+- VAN / 배달 플랫폼 크롤러 구현
+`,
+		period: {
+			start: new Date('2021-06-01'),
+			end: new Date('2021-12-31')
+		},
+		tags: [
+			'AWS Elastic Beanstalk',
+			'Celery',
+			'Django REST Framework',
+			'Django',
+			'Docker',
+			'FastAPI',
+			'GitHub Actions',
+			'PostgreSQL',
+			'Python',
+			'Redis',
+			'Selenium'
+		]
+	},
+	{
+		organization: '에이젠글로벌',
+		role: '백엔드 개발자',
+		summary: '우리카드 FDS 고도화 프로젝트 참여 및 ABACUS AutoML 솔루션의 개발 및 유지보수',
+		description: `
+**우리카드 FDS 고도화**
+
+- 일일 약 700만건의 요청을 처리하는 Python Twisted 기반 FDS 스코어링 서버의 유지보수 및 기능 개발
+- ClickHouse를 이용한 대용량 데이터 처리 및 분석
+
+**ABACUS AutoML 솔루션의 개발 및 유지보수**
+`,
+		period: {
+			start: new Date('2022-12-08'),
+			end: new Date('2023-08-31')
+		},
+		tags: ['ClickHouse', 'Docker Compose', 'Python', 'Redis', 'Twisted']
+	},
+	{
+		organization: '얼리페이',
+		role: '백엔드 개발자',
+		summary: '얼리페이 시스템 개발 및 유지보수',
+		description: `
+**인프라 구축 및 관리**
+
+- Terraform을 이용한 AWS 인프라 구축 및 관리
+- 보안 취약점 점검 및 보완
+- 모니터링 시스템 구축 및 관리
+- 노후 인프라(DB 및 워크로드)의 업그레이드 및 마이그레이션
+- 모든 CI/CD 파이프라인 구축 및 관리
+
+**선정산 서비스 개발 및 유지보수**
+
+- Django 서버 유지보수 및 기능 개발
+- Celery를 이용하여 비동기 작업 처리
+
+**크롤러 개발 및 유지보수**
+
+- Docker + AWS Lambda 크롤러 배포 환경 구축
+- Windows Server 환경에서 동작하는 크롤러 구현
+`,
+		period: {
+			start: new Date('2023-12-04'),
+			end: new Date(Date.now())
+		},
+		tags: [
+			'Amazon Web Services',
+			'AWS Lambda',
+			'AWS Elastic Container Service',
+			'Celery',
+			'Django',
+			'Docker',
+			'FastAPI',
+			'GitHub Actions',
+			'PostgreSQL',
+			'Python',
+			'Redis',
+			'Selenium',
+			'MySQL',
+			'Terraform',
+			'Windows Server'
+		]
+	}
+] as ExperienceItem[];

src/data/personal-works.ts

@@ -0,0 +1,109 @@
+export type PersonalWorkItem = {
+	name: string;
+	description: string;
+	links: {
+		github?: string;
+		docker?: string;
+		npm?: string;
+		pypi?: string;
+	};
+	tags: string[];
+	status: PersonalWorkStatus;
+	order: number;
+};
+
+export enum PersonalWorkStatus {
+	WIP = '🛠️ WIP',
+	Published = '🚀 Published'
+}
+
+export default [
+	{
+		name: 'lasuillard.github.io',
+		description: `SvelteKit을 이용하여 만든 개인 블로그입니다.`,
+		links: {
+			github: 'https://github.com/lasuillard/lasuillard.github.io'
+		},
+		tags: ['GitHub Actions', 'SvelteKit', 'Tailwind CSS', 'TypeScript'],
+		status: PersonalWorkStatus.Published,
+		order: 0
+	},
+	{
+		name: 'raindrop-client',
+		description: `
+Raindrop.io API의 비공식 OpenAPI 스키마 정의 및 자동 생성된 클라이언트 라이브러리입니다.
+
+OpenAPI 스키마를 직접 정의하고 OpenAPI Generator를 이용하여 API 클라이언트 코드를 자동 생성합니다.
+      `,
+		links: {
+			github: 'https://github.com/lasuillard/raindrop-client',
+			npm: 'https://www.npmjs.com/package/@lasuillard/raindrop-client'
+		},
+		tags: ['TypeScript', 'GitHub Actions', 'OpenAPI', 'OpenAPI Generator'],
+		status: PersonalWorkStatus.Published,
+		order: 1
+	},
+	{
+		name: 'Raindrop Sync for Chrome',
+		description:
+			'Raindrop.io와 크롬 브라우저간 북마크 동기화 기능을 제공하기 위한 크롬 브라우저 확장 프로그램입니다.',
+		links: {
+			github: 'https://github.com/lasuillard/raindrop-sync-chrome'
+		},
+		tags: ['Chrome Extension', 'GitHub Actions', 'Svelte', 'Tailwind CSS', 'TypeScript'],
+		status: PersonalWorkStatus.WIP,
+		order: 2
+	},
+	{
+		name: 'django-slack-tools',
+		description: `Django 애플리케이션에 특화된 다양한 Slack 통합 기능을 제공하기 위한 Django 앱입니다.`,
+		links: {
+			github: 'https://github.com/lasuillard/django-slack-tools',
+			pypi: 'https://pypi.org/project/django-slack-tools/'
+		},
+		tags: ['Python', 'Django', 'Slack', 'GitHub Actions'],
+		status: PersonalWorkStatus.Published,
+		order: 4
+	},
+	{
+		name: 'mockoon-novnc',
+		description: `
+Mockoon의 GUI를 웹 브라우저에서 실행할 수 있도록 하는 NoVNC 연동 및 부가 기능을 제공하기 위한 Docker 이미지입니다.
+
+개발 중 모의 서버 구성 및 관리 편의를 위해 만들어졌습니다.
+`,
+		links: {
+			github: 'https://github.com/lasuillard/mockoon-novnc',
+			docker: 'https://hub.docker.com/r/lasuillard/mockoon-novnc'
+		},
+		tags: ['Docker', 'NGINX', 'GitHub Actions', 'Shell Scripting'],
+		status: PersonalWorkStatus.Published,
+		order: 5
+	},
+	{
+		name: 'freerdp-novnc',
+		description: `
+컨테이너에서 FreeRDP를 이용하여 RDP 세션을 맺고 NoVNC를 통해 웹 UI로 노출하는 Docker 이미지입니다.
+
+Windows OS 기반 스크래핑 중 특수한 요구사항을 충족하기 위해 개발되었습니다.
+    `,
+		links: {
+			github: 'https://github.com/lasuillard/freerdp-novnc',
+			docker: 'https://hub.docker.com/r/lasuillard/freerdp-novnc'
+		},
+		tags: ['Docker', 'GitHub Actions', 'Shell Scripting'],
+		status: PersonalWorkStatus.Published,
+		order: 6
+	},
+	{
+		name: '1Password Exporter',
+		description: `1Password CLI를 이용하여 1Password의 여러 지표를 수집하기 위한 Rust 프로젝트입니다.`,
+		links: {
+			github: 'https://github.com/lasuillard/1password-exporter',
+			docker: 'https://hub.docker.com/r/lasuillard/1password-exporter'
+		},
+		tags: ['Rust', 'Prometheus', 'Docker', '1Password'],
+		status: PersonalWorkStatus.Published,
+		order: 7
+	}
+] as PersonalWorkItem[];

src/hooks.client.ts

@@ -2,8 +2,11 @@
 import { initEngine } from '$lib/search';
 import { initTheme } from '$lib/theme';
 import * as Sentry from '@sentry/sveltekit';
+import { setDefaultOptions } from 'date-fns';
+import { ko } from 'date-fns/locale';
 import mermaid from 'mermaid';
 
+// Sentry
 Sentry.init({
 	dsn: import.meta.env.VITE_SENTRY_DSN,
 	tracesSampleRate: 0.05,
@@ -12,8 +15,14 @@ Sentry.init({
 	integrations: [Sentry.replayIntegration()],
 	environment: import.meta.env.MODE
 });
+export const handleError = Sentry.handleErrorWithSentry();
+
+// Locale
+setDefaultOptions({ locale: ko });
+
 console.debug('Sentry initialized');
 
+// Theme
 initTheme();
 
 // Initialize Mermaid for fancy diagrams
@@ -24,10 +33,9 @@ mermaid.initialize({
 });
 console.debug('Mermaid initialized');
 
+// Search Engine
 initEngine().then((engine) => {
 	console.debug(`Search engine initialized, there is ${engine.termCount} terms in the index`);
 });
 
-export const handleError = Sentry.handleErrorWithSentry();
-
 /* c8 ignore stop */