🤖 AI-Powered Interactive Portfolio

Next-Generation Portfolio Experience

Powered by Google Gemini Multimodal Live API

---

🌟 Overview

ยินดีต้อนรับสู่ Interactive AI Portfolio! โปรเจกต์นี้ไม่ใช่แค่ Resume ทั่วไป แต่เป็นระบบที่ "มีชีวิต" ซึ่งคุณสามารถสนทนาผ่านเสียงและข้อความกับ AI Agent ได้แบบ Real-time เพื่อสอบถามข้อมูลเกี่ยวกับทักษะ ประสบการณ์ และแนวคิดเบื้องหลังการพัฒนาโปรเจกต์นี้

🚀 Key Highlights

• 🎙️ Real-time Multi-modal: รองรับการโต้ตอบผ่านเสียงและข้อความด้วย Gemini Live API
• 🧠 System Brain visualization: แสดงโครงสร้างทางตรรกะและการเชื่อมต่อของระบบ AI
• 🎨 Elite Aesthetics: ดีไซน์ทันสมัยสไตล์ Glassmorphism พร้อม Micro-animations ที่ลื่นไหล
• 🕹️ AI Playground: พื้นที่สำหรับทดลองเล่นกับ Prompt และพฤติกรรมของ AI ในโหมดต่างๆ

---

🛠️ Tech Stack

Category	Technology
Foundation	React 19, Vite, TypeScript
AI Integration	Google Generative AI (Gemini Live API)
State Management	Zustand (Persistent & Reactive Store)
Styling	Vanilla CSS (Modern Custom Properties / Glassmorphism)
Icons	React Icons
Deployment	Vercel (Continuous Deployment)

---

🏗️ Project Architecture

portfolio/
├── components/          # UI Components (Landing, LiveAIDemo, etc.)
├── contexts/            # Global context handling
├── lib/                 # Gemini API helpers & logic
├── hooks/               # Custom React hooks (useAudio, useGemini)
├── imge/                # Static image assets
└── index.css            # Core design system & animations

---

🚦 Getting Started

Prerequisites

• Node.js: แนะนำเวอร์ชันล่าสุด (LTS)
• Gemini API Key: รับได้ที่ Google AI Studio

Installation

1. Clone the repository:

   git clone https://github.com/watcharaponthod-code/Portfolio.git
   cd Portfolio

2. Install dependencies:

   npm install

3. Set up Environment Variables: สร้างไฟล์ .env.local และเพิ่ม API Key ของคุณ:

   GEMINI_API_KEY=your_api_key_here

4. Run in development mode:

   npm run dev

---

📦 Deployment

โปรเจกต์นี้รองรับการ Deploy บน Vercel อย่างสมบูรณ์:

1. เชื่อมต่อ Repository กับ Vercel
2. ตั้งค่า Environment Variable GEMINI_API_KEY ใน Vercel Dashboard
3. Vercel จะจัดการ Build และ Deploy ให้โดยอัตโนมัติ

---

🤝 Contact

Created by Watcharapon - สอบถามข้อมูลเพิ่มเติมหรือติดตามผลงานได้ที่:

---

_{© 2025 Watcharapon. Licensed under Apache-2.0.}