에히메현 양조장 지도
2026-08-12 ~ 2026-08-15
Claude Design 시안을 Astro 7 정적 사이트로 이식하고 shadcn 다크 팔레트로 리디자인한 사케 페스티벌 지도.
Tech Stack
TypeScript
Astro
Tailwind CSS
Leaflet
shadcn/ui
Netlify
Playground
Diary Gallery ver3
2026-06-29 ~ current
여행 향수 무드의 Diary Gallery ver3 — 항공우편 엽서 · 필름 슬라이드 · 여행 다이어리 3종 비교.
Tech Stack
TypeScript
React
Framer Motion
Diary Section 개발 기록
2026-02-14 ~ 2026-02-20
일기 포스트용 이미지 갤러리의 개발 시항 착오. Three.js WebGL → CSS 3D → R3F 링 캐러셀 → 단순 캐러셀
Tech Stack
TypeScript
React
Three.js
Framer Motion
AI Tetris
2025-10-22 ~ 2025-10-22
Perplexity AI의 코드 생성 기능을 활용하여 딸각 한 번에 만든 Nuxt 3 기반 테트리스 게임입니다.
Nuxt UI 4와 Tailwind CSS로 스타일링하였으며, SSG로 배포된 클라이언트 사이드 게임입니다.
Tech Stack
TypeScript
Vue
Nuxt.js
Tailwind CSS
Netlify
Uplot Test
2025-04-09 ~ 2025-04-10
Uplot과 Webworker를 활용한 대용량 데이터 처리하여 차트를 만드는 테스트입니다.
Tech Stack
TypeScript
Vue
Zorn - Video Player Test
2025-03-30 ~ 2025-04-01
Astro 전용 Video Player zorn을 테스트합니다.
Tech Stack
Astro
Live 2d Widget
2025-03-07 ~ 2026-02-19
Web Page Live2D Widget 구현 테스트 페이지입니다.
Tech Stack
TypeScript
Astro
컴포넌트 테스트 - Counter
2025-03-06 ~ 2025-03-06
Astro에서는 Clinet Island로 다른 프레임워크를 사용할 수 있습니다.
이에 Vue, Svelte, React 으로 Counter를 구현하여 잘 동작하는지 테스트 해봅니다.
Tech Stack
TypeScript
Astro
Vue
Svelte
React
D3 Test
2025-03-06 ~ current
D3.js Cookbook을 보고 실습합니다.
Tech Stack
TypeScript
React
D3
일본주 소개 ver2
2024-04-21 ~ 2024-04-23
Slidev로 만든 일본주 소개 프리젠테이션입니다.
ver1에서 사용했던 Slidev가 시간이 지나 많은 업데이트가 있었습니다.
이를 반영하여 새로 추가된 다양한 프레젠테이션용 API를 활용하여 만들었습니다.
각 슬라이드는 기본적으로 마크다운으로 작성했지만 일부 Vue 컴포넌트를 사용한 곳이 있습니다.
Tech Stack
TypeScript
Vue
Slidev
Netlify
일본주 소개 ver1
2023-05-02 ~ 2023-05-12
Slidev로 만든 일본주 소개 프리젠테이션입니다.
각 슬라이드는 기본적으로 마크다운으로 작성했지만 일부 Vue 컴포넌트를 사용한 곳이 있습니다.
Tech Stack
TypeScript
Vue
Slidev
Netlify