🚀 Dewdew投资组合

软件工程师李延珠的个人产品组合网站\ 全栈开发者注重现代Web技术和用户体验的作品集

![License: MIT](https://opensource.org/licenses/MIT) ![Nuxt](https://nuxt.com/) ![Vue](https://vuejs.org/) ![TypeScript](https://www.typescriptlang.org/)

🌐 网站

______________________________________________________________________

项目概述

Dewdew投资组合是软件工程师李延珠的个人投资组合网站，利用最新的网络技术制作 全栈项目是。

🎯 项目目标

📱 响应式设计：在所有设备上优化用户体验
🌍 多语言支持：完全支持韩语/英语
⚡ 优化的性能：Core Web Vitals得分最高
🎨 现代UI/UX：基于Nuxt UI的时尚界面
🔒 类型安全性：完全支持TypeScript

______________________________________________________________________

🛠️ 技术堆栈

前端

![My Skills](https://skillicons.dev)

🎨 框架：Nuxt 4.2.1（Vue 3+SSR/SSG）
📝 语言：TypeScript 5.6.3
🎭 样式：Sass+顺风CSS+Nuxt UI 4.2.1
⚡ 生成工具：快7
📊 分析：Vercel分析+速度洞察
📱 磷钨酸：基于Service Worker的离线支持

后端和数据库

![Backend Skills](https://skillicons.dev)

🗄️ 数据库：Supabase（PostgreSQL）
🔐 认证：Supabase认证
📁 存储：数据库存储
🌐 API：Nuxt服务器API

DevOps和工具

![DevOps Skills](https://skillicons.dev)

🚀 部署：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: 开放聊天室

______________________________________________________________________

🎉 谢谢！

如果说这个项目有帮助的话，请点击明星！

](https://github.com/dewdew/dewdew_v4/stargazers) ](https://github.com/dewdew/dewdew_v4/network)

______________________________________________________________________

由...制作❤️ 通过露水

*使用最新网络技术制作的产品组合网站*

dewdew v5

快速接入

详细介绍

🚀 Dewdew投资组合

项目概述

🎯 项目目标

🛠️ 技术堆栈

前端

后端和数据库

DevOps和工具

🏗️ 项目体系结构

📁 项目结构

🧩 复合体系结构

📋 类型系统

🤖 AI聊天系统体系结构

🔍 矢量搜索和嵌入式管理

初始化嵌入

如何更新嵌入

注意事项

🌟 主要功能

🏠 主页 (/)

🤖 AI聊天 (/ai)

📱 PWA（渐进式Web应用程序）

🎨 UI组件

性能优化

🚀 核心网页指标

📦 捆绑包优化

🚀 开始

📋 要求

⚙️ 快速入门

🔧 Supabase Functions部署

📊 项目发展过程

🎯 第1阶段：优化复合体系结构

🏗️ 第2阶段：类型系统改进

⚡ 第3阶段：Nuxt4迁移

🤖 第4阶段：构建AI聊天系统

📱 第5阶段：PWA和性能监控

🛠️ 技术亮点

🎨 现代开发模式

🔧 性能优化技术

🌍 多语言支持

🗣️ 支持的语言

🔄 语言转换

📱 响应式设计

📐 断点

🎨 暗/光模式

🔒 安全和认证

🛡️ 安全功能

📈 SEO&性能

🔍 SEO优化

📊 分析工具

🔒 安全功能

📧 联系方式

🎉 谢谢！

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

🏠 主页 (`/`)

🤖 AI聊天 (`/ai`)