🚀 Dewdew投资组合
软件工程师李延珠的个人产品组合网站\ 全栈开发者注重现代Web技术和用户体验的作品集
______________________________________________________________________
项目概述
Dewdew投资组合是软件工程师李延珠的个人投资组合网站，利用最新的网络技术制作 全栈项目是。
🎯 项目目标
- 📱 响应式设计：在所有设备上优化用户体验
- 🌍 多语言支持：完全支持韩语/英语
- ⚡ 优化的性能：Core Web Vitals得分最高
- 🎨 现代UI/UX：基于Nuxt UI的时尚界面
- 🔒 类型安全性：完全支持TypeScript
______________________________________________________________________
🛠️ 技术堆栈
前端
- 🎨 框架：Nuxt 4.2.1（Vue 3+SSR/SSG）
- 📝 语言：TypeScript 5.6.3
- 🎭 样式：Sass+顺风CSS+Nuxt UI 4.2.1
- ⚡ 生成工具：快7
- 📊 分析：Vercel分析+速度洞察
- 📱 磷钨酸：基于Service Worker的离线支持
后端和数据库
- 🗄️ 数据库：Supabase（PostgreSQL）
- 🔐 认证：Supabase认证
- 📁 存储：数据库存储
- 🌐 API：Nuxt服务器API
DevOps和工具
- 🚀 部署：Vercel
- 📦 程序包管理器：Bun
- 🔄 版本控制：GitHub
- 🎯 编辑：VS代码+Vim
______________________________________________________________________
🏗️ 项目体系结构
📁 项目结构
dewdew_v5/
├── 📱 app/ # Nuxt 4 앱 디렉토리
│ ├── 🧩 components/ # Vue 컴포넌트 (Atomic Design)
│ │ ├── a/ # Atomic 컴포넌트
│ │ │ ├── footer/ # 푸터 컴포넌트 (Group, Information, Menu, Sns)
│ │ │ ├── Forecast.client.vue
│ │ │ ├── IconText.vue
│ │ │ ├── LanguageChange.vue
│ │ │ ├── ThemeChange.vue
│ │ │ └── TooltipButton.vue
│ │ ├── chat/ # AI 채팅 관련 컴포넌트
│ │ │ ├── Container.vue
│ │ │ ├── Content.vue
│ │ │ ├── DynamicComponent.vue
│ │ │ ├── Error.server.vue
│ │ │ └── Skeleton.server.vue
│ │ ├── dynamic/ # 동적 렌더링 카드 컴포넌트
│ │ │ └── card/
│ │ │ ├── ContactForm.client.vue
│ │ │ ├── EducationCard.server.vue
│ │ │ ├── ExperienceCarousel.server.vue
│ │ │ ├── ExperienceTimeline.server.vue
│ │ │ ├── Greeting.server.vue
│ │ │ ├── HobbyCarousel.server.vue
│ │ │ ├── ImageCarousel.server.vue
│ │ │ ├── Profile.server.vue
│ │ │ ├── ProjectCarousel.server.vue
│ │ │ ├── Skill.server.vue
│ │ │ ├── SkillRadar.server.vue
│ │ │ ├── SocialLinks.server.vue
│ │ │ └── WeaknessesCard.server.vue
│ │ ├── InstallPwa.client.vue # PWA 설치 프롬프트
│ │ ├── SpeedInsights.client.vue # 성능 모니터링
│ │ └── intro/ # 인트로 애니메이션 컴포넌트
│ │ ├── Controller.client.vue
│ │ ├── TransitionMessage.client.vue
│ │ ├── TransitionMessage.server.vue
│ │ ├── TypeTitle.client.vue
│ │ └── TypeTitle.server.vue
│ ├── 🔧 composables/ # Vue Composables (도메인별 분리)
│ │ ├── chat/ # AI 채팅 관련
│ │ │ └── useChat.ts # 채팅 상태 관리 및 스트리밍 처리
│ │ ├── data/ # 데이터 관련
│ │ │ ├── hello.ts
│ │ │ ├── korLocation.json
│ │ │ ├── locations.ts
│ │ │ └── weather.ts
│ │ ├── forecast/ # 날씨 예보 관련
│ │ │ └── translateCoords.ts
│ │ ├── formatting/ # 포맷팅 유틸
│ │ │ ├── useDateFormatter.ts
│ │ │ └── useFormatter.ts
│ │ ├── query/ # 쿼리 관련
│ │ │ └── index.ts
│ │ ├── ui/ # UI 유틸리티
│ │ │ ├── imageStorage.ts
│ │ │ ├── useColorUtils.ts
│ │ │ └── useUtils.ts
│ │ ├── validation/ # 유효성 검사
│ │ │ └── useValidation.ts
│ │ └── useSkillIcon.ts # 스킬 아이콘 유틸
│ ├── 🔌 plugins/ # Nuxt 플러그인
│ │ ├── analytics.client.ts # Vercel Analytics
│ │ └── senitize.ts # DOMPurify HTML 정제
│ ├── 📄 pages/ # 파일 기반 라우팅
│ │ ├── ai/ # AI 채팅 관련 페이지
│ │ │ ├── index.vue # AI 채팅 메인 페이지
│ │ │ └── components.vue # AI 컴포넌트 데모 페이지
│ │ └── index.vue # 메인 페이지
│ ├── 🎨 layouts/ # 레이아웃 컴포넌트
│ │ ├── center.vue
│ │ └── default.vue
│ ├── 🏪 stores/ # Pinia 상태 관리
│ │ ├── locationWeather.ts # 위치 및 날씨 상태
│ │ └── menu.ts # 메뉴 상태
│ ├── 📝 types/ # TypeScript 타입 정의 (도메인별)
│ │ ├── chat.ts # 채팅 관련 타입
│ │ ├── database.types.ts # Supabase 데이터베이스 타입
│ │ ├── supabase-menu.ts # 메뉴 스키마 타입
│ │ ├── supabase-resume.ts # 이력서 스키마 타입
│ │ ├── supabase.ts # Supabase 공통 타입
│ │ └── weather.ts # 날씨 관련 타입
│ ├── 🎨 assets/ # 정적 자산
│ │ ├── css/
│ │ │ └── main.css
│ │ └── scss/
│ │ ├── fonts.scss
│ │ └── style.scss
│ ├── app.config.ts # 앱 설정
│ ├── app.vue # 루트 컴포넌트
│ └── error.vue # 에러 페이지
├── 🌐 server/ # 서버 API 엔드포인트
│ └── api/
│ ├── chat/ # AI 채팅 API
│ │ ├── greeting.get.ts
│ │ └── index.post.ts
│ ├── menu/ # 메뉴 API
│ │ └── externalMenu.get.ts
│ └── resume/ # 이력서 데이터 API
│ ├── education.get.ts
│ ├── experience.get.ts
│ ├── hobbies.get.ts
│ ├── imageArchive.get.ts
│ ├── profile.get.ts
│ ├── projects.get.ts
│ ├── skills.get.ts
│ └── socialLinks.get.ts
├── 🗄️ supabase/ # Supabase Functions
│ └── functions/
│ ├── _shared/ # 공유 모듈 (배포 안됨)
│ │ ├── _openai.ts # OpenAI 클라이언트 (레거시)
│ │ ├── ai-provider.ts # AI 프로바이더 추상화
│ │ ├── component-mapper.ts # 컴포넌트 타입 매핑
│ │ ├── history-optimizer.ts # 대화 기록 최적화
│ │ ├── rag.ts # RAG 로직
│ │ ├── supabase.ts # Supabase 클라이언트
│ │ ├── types.ts # 타입 정의
│ │ └── url-fetcher.ts # URL 페처 유틸리티
│ └── dewdew-rag-portfolio/ # RAG 포트폴리오 함수
│ ├── index.ts
│ └── README.md
├── 🌍 i18n/ # 다국어 번역 파일
│ └── locales/
│ ├── en.ts # 영어 번역
│ └── ko.ts # 한국어 번역
├── 📁 public/ # 정적 파일
│ ├── fonts/ # 웹폰트
│ ├── image/ # 이미지 파일
│ ├── favicon.ico
│ ├── manifest.webmanifest
│ └── _robots.txt
├── 📜 scripts/ # 빌드 스크립트
│ └── version-manager.js
├── nuxt.config.ts # Nuxt 설정
├── tsconfig.json # TypeScript 설정
├── eslint.config.mjs # ESLint 설정
├── package.json # 패키지 의존성
└── README.md # 프로젝트 문서🧩 复合体系结构
// 도메인별로 분리된 Composable 구조 (단일 책임 원칙)
app/composables/
├── chat/
│ └── useChat.ts # AI 채팅 상태 관리, 스트리밍 처리
├── data/
│ ├── hello.ts # 인사말 데이터
│ ├── korLocation.json # 한국 지역 데이터
│ ├── locations.ts # 위치 관련 유틸
│ └── weather.ts # 날씨 데이터 처리
├── forecast/
│ └── translateCoords.ts # 좌표 변환 (위경도 ↔ 격자)
├── formatting/
│ ├── useDateFormatter.ts # 날짜/시간 포맷팅
│ └── useFormatter.ts # 일반 데이터 포맷팅
├── query/
│ └── index.ts # 쿼리 관련 유틸
├── ui/
│ ├── imageStorage.ts # 이미지 저장소 관리 (Supabase)
│ ├── useColorUtils.ts # 색상 매핑 유틸
│ └── useUtils.ts # UI 헬퍼 함수
├── validation/
│ └── useValidation.ts # 입력 유효성 검사
└── useSkillIcon.ts # 스킬 아이콘 유틸📋 类型系统
// 도메인 주도 설계(DDD) 적용 - 도메인별 타입 분리
app/types/
├── chat.ts # AI 채팅 관련 타입 (ChatMessage, ComponentType 등)
├── database.types.ts # Supabase 데이터베이스 자동 생성 타입 (public 스키마)
├── supabase-menu.ts # 메뉴 스키마 타입 (자동 생성)
├── supabase-resume.ts # 이력서 스키마 타입 (자동 생성)
├── supabase.ts # Supabase 공통 타입 (자동 생성)
└── weather.ts # 날씨 관련 타입🤖 AI聊天系统体系结构
// RAG 기반 AI 채팅 시스템
supabase/functions/
├── _shared/ # 공유 모듈 (배포 안됨)
│ ├── component-mapper.ts # 쿼리 → 컴포넌트 타입 매핑
│ ├── rag.ts # RAG (Retrieval-Augmented Generation) 로직
│ ├── ai-provider.ts # AI 프로바이더 추상화 (@ai-sdk/openai)
│ ├── _openai.ts # OpenAI 클라이언트 (레거시)
│ ├── history-optimizer.ts # 대화 기록 최적화
│ ├── url-fetcher.ts # URL 페처 유틸리티
│ ├── supabase.ts # Supabase 클라이언트
│ └── types.ts # 타입 정의
└── dewdew-rag-portfolio/ # 배포되는 Edge Function
└── index.ts # RAG 엔드포인트
// 클라이언트 측
app/composables/chat/
└── useChat.ts # 스트리밍 처리, 메시지 관리
app/components/chat/
├── Container.vue # 채팅 컨테이너
├── Content.vue # 메시지 표시 영역
├── DynamicComponent.vue # 동적 컴포넌트 렌더링
├── Error.server.vue # 에러 컴포넌트
└── Skeleton.server.vue # 로딩 스켈레톤
app/components/dynamic/card/ # 동적 렌더링 카드 컴포넌트
├── ContactForm.client.vue
├── EducationCard.server.vue
├── ExperienceCarousel.server.vue
├── ExperienceTimeline.server.vue
├── Greeting.server.vue
├── HobbyCarousel.server.vue
├── ImageCarousel.server.vue
├── Profile.server.vue
├── ProjectCarousel.server.vue
├── Skill.server.vue
├── SkillRadar.server.vue
├── SocialLinks.server.vue
└── WeaknessesCard.server.vue🔍 矢量搜索和嵌入式管理
初始化嵌入
- 初始创建:
initialize-embeddings调用Edge Function创建所有文档的嵌入 - 更新:
resume每当模式中的数据（profile、experience、skills、projects、education、hobbies、social_links、image_archive等）发生变化时 一定initialize-embeddings必须再次invoke（）Edge Function - 理由：要使矢量搜索反映最新数据，嵌入必须是最新的
如何更新嵌入
- Supabase仪表板:
- 功能>
initialize-embeddings>调用函数
注意事项
- 如果在数据更改后不更新嵌入，矢量搜索结果可能会返回旧数据
- 生成嵌入可能需要一段时间（根据文档数量），因此将以异步方式进行处理
- 矢量搜索以混合方式工作：在关键字匹配失败时运行基于语义的矢量搜索
______________________________________________________________________
🌟 主要功能
🏠 主页 (/)
- 实时天气：显示基于用户位置的天气信息（气象厅API）
- 打字动画：使用TypeIt动态文本效果
- 响应式布局：桌面/移动优化
- Intro动画：平滑的页面切换效果
🤖 AI聊天 (/ai)
- 基于RAG的AI：基于产品组合数据的知识搜索
- 流响应：实时文本流
- 动态元件：将项目、职业、技能等显示为组件
- 自动滚动：在长时间对话中保持自动滚动
- 元件映射：自然语言查询→自动映射适当的UI组件
- 元件演示:
/ai/components预览中的所有动态元件
📱 PWA（渐进式Web应用程序）
- 离线支持：基于Service Worker的缓存
- 安装提示：可安装移动/桌面
- 自动更新：自动检测和更新新版本
- 缓存策略：图像、字体、API响应优化缓存
🎨 UI组件
- 原子设计：可重复使用的元件结构
- Nuxt用户界面：自定义前缀（
Dd）应用 - 暗/光模式：自动检测系统主题
- 多语言支持：韩语/英语实时切换
______________________________________________________________________
性能优化
🚀 核心网页指标
- ✅ LCP：1.2秒以下（优化图像）
- ✅ FID：小于100 ms（代码拆分）
- ✅ CLS：0.1以下（布局稳定性）
📦 捆绑包优化
- 摇树优化：删除未使用的代码
- 动态导入：仅在需要时加载模块
- 图像优化：WebP/AVIF自动转换
- 磷钨酸：Service Worker缓存
______________________________________________________________________
🚀 开始
详细的设置指南包括： 设置.md请参阅。
📋 要求
- Node.js 24.5.0+
- Bun 1.2.0+
- Supabase帐户
⚙️ 快速入门
# 저장소 클론
git clone https://github.com/dewdew/dewdew_v5.git
cd dewdew_v5
# Node.js 버전 설정
nvm use
# 의존성 설치
bun install
# 환경 변수 설정
cp .env.example .env
# 필수 환경 변수:
# - SUPABASE_URL
# - SUPABASE_KEY
# - OPENAI_API_KEY (AI 채팅 기능용)
# 개발 서버 실행
bun dev🌐 在浏览器中http://localhost:4110连接
🔧 Supabase Functions部署
# Supabase 로그인
bun run supabase:login
# 타입 생성
bun run supabase:type # public 스키마 타입 생성
bun run supabase:type-menu # menu 스키마 타입 생성
bun run supabase:type-resume # resume 스키마 타입 생성
bun run supabase:type-data # data 스키마 타입 생성
# Functions 배포
bun run supabase:deploy-rag-portfolio # RAG 포트폴리오 함수 배포
bun run supabase:deploy-initialize-embeddings # 임베딩 초기화 함수 배포
# 초기 임베딩 생성 (배포 후 필수)
# Supabase Dashboard에서 initialize-embeddings 함수를 invoke() 하거나
# resume 스키마 데이터 변경 시에도 반드시 다시 invoke() 해야 함______________________________________________________________________
📊 项目发展过程
🎯 第1阶段：优化复合体系结构
- 问题：249行巨大
useUi可组合的 - 解决：分为5个专用模块（单一责任原则）
- 结果：提高维护性，增强IDE支持
🏗️ 第2阶段：类型系统改进
- 问题：单片
global.d.ts（204行） - 解决：按域分离类型+通用模式
- 结果：提高类型安全性，增加代码可重复性
⚡ 第3阶段：Nuxt4迁移
- 升级：Nuxt 3→ 附件4.2.1
- 改进：i18n v10，支持Node.js 24.5
- 优化：构建性能提高20%
🤖 第4阶段：构建AI聊天系统
- RAG实施：基于Supabase Edge Functions的RAG系统
- 流处理：实时文本流和自动滚动
- 动态元件：基于自然语言查询的组件自动映射
- 性能优化：通过最小化DOM操作提高滚动性能
📱 第5阶段：PWA和性能监控
- PWA实施：基于Service Worker的离线支持
- Vercel分析：集成实时用户分析
- 速度洞察：监控Core Web Vitals
- 缓存策略：映像、API和静态资产优化缓存
______________________________________________________________________
🛠️ 技术亮点
🎨 现代开发模式
// 제네릭 타입으로 타입 안전성 보장
interface ApiResponse {
data: T
success: boolean
message?: string
}
// 도메인별 Composable 분리
export const useValidation = () => {
const checkEmail = (email: string): boolean => {
return EMAIL_REGEX.test(email)
}
// ...
}
// 다국어 콘텐츠 타입
interface MultilingualContent {
ko: T
en: T
}🔧 性能优化技术
- 延迟加载：元件延迟加载
- 虚拟滚动：优化大容量列表
- 图像优化：自动WebP转换
- 捆绑拆分：按路由拆分代码
______________________________________________________________________
🌍 多语言支持
🗣️ 支持的语言
- 🇰🇷 韩语 （默认）
- 🇺🇸 英语
🔄 语言转换
- 基于浏览器语言设置的自动检测
no_prefix使用策略（URL中没有语言代码）- 通过LocalStorage记住用户选择
______________________________________________________________________
📱 响应式设计
📐 断点
// Tailwind CSS 기반 반응형 설계
sm: 640px // 모바일
md: 768px // 태블릿
lg: 1024px // 데스크톱
xl: 1280px // 대형 데스크톱🎨 暗/光模式
- 自动检测系统主题
- 保存用户选择
- 平滑的主题切换动画
______________________________________________________________________
🔒 安全和认证
🛡️ 安全功能
- CSP标头：防止XSS攻击
- HTTPS强制：SSL/TLS加密
- 验证输入：避免XSS/SQL Injection
- 速率限制：API请求限制
______________________________________________________________________
📈 SEO&性能
🔍 SEO优化
- 元标签：动态元数据
- 结构化数据：Schema.org标记
- 网站地图：自动创建
- RSS订阅源：订阅博客文章
📊 分析工具
- Vercel分析：实时访问者分析（生产环境）
- 速度洞察：性能监控和Core Web Vitals跟踪
- 自动性能测量：实时监控LCP、FID、CLS等
🔒 安全功能
- Dompurify：HTML精炼以防止XSS攻击
- 验证输入：基于Yup的表单验证
- 电子邮件：发送客户端电子邮件（不暴露服务器）
______________________________________________________________________
📧 联系方式
- 电子邮件: contact@dewdew.dev
- 领英: linkedin.com/in/dewdew
- KakaoTalk: 开放聊天室
______________________________________________________________________
🎉 谢谢！
如果说这个项目有帮助的话，请点击明星！
______________________________________________________________________
由...制作❤️ 通过 露水
*使用最新网络技术制作的产品组合网站*