gts-b

GTS Alpha - AI-Powered Portfolio

Portfolio website ที่รวม AI Chat (Cloud + Local) พร้อมระบบ Authentication และ Knowledge Base

🛠️ Tech Stack

Category Technology Version Purpose
Framework Next.js 14.2.10 React Framework with SSR/SSG
UI Library React 18.2.0 Component-based UI
Styling Tailwind CSS 3.4.18 Utility-first CSS
Animation Framer Motion 10.6.0 Smooth transitions & effects
Backend Supabase 2.84.0 Authentication, Database, Storage
Cloud AI Google Gemini / OpenAI - Cloud-based LLM API
Local AI @mlc-ai/web-llm 0.2.79 Browser-based AI (WebGPU)
Icons Lucide React 0.554.0 Icon library
Carousel Embla Carousel 8.6.0 Touch-friendly carousel

📦 การติดตั้ง (Installation)

ข้อกำหนดระบบ (Prerequisites)

# ต้องติดตั้ง Node.js เวอร์ชัน 18 หรือสูงกว่า
node --version  # v18.x.x หรือสูงกว่า
npm --version   # v9.x.x หรือสูงกว่า

ขั้นตอนการติดตั้ง

# 1. Clone repository
git clone https://github.com/gittisak-go/gts-b.git
cd gts-b

# 2. ติดตั้ง dependencies
npm install

# 3. สร้างไฟล์ .env.local (สำหรับ Supabase & AI API Keys)
cp .env.example .env.local

# 4. แก้ไข .env.local ใส่ API Keys ของคุณ
# NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
# NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
# NEXT_PUBLIC_GEMINI_API_KEY=your-gemini-api-key (Optional)
# NEXT_PUBLIC_OPENAI_API_KEY=your-openai-api-key (Optional)

# 5. รัน Development Server
npm run dev

เปิดเบราว์เซอร์ที่ http://localhost:3000

🤖 Local AI Models

การทำงานของ Local AI

ขนาดโมเดล

Model ขนาด ความเร็ว ความแม่นยำ
TinyLlama 1.1B ~600MB เร็วมาก ปานกลาง
Gemma 2B ~1.4GB เร็ว ดี
Phi-3 Mini ~2.3GB ปานกลาง ดีมาก

ข้อกำหนดสำหรับ Local AI

การตรวจสอบว่า Browser รองรับ WebGPU

เปิด Console (F12) แล้วพิมพ์:

navigator.gpu ? "✅ รองรับ WebGPU" : "❌ ไม่รองรับ";

🚀 Deployment

Option 1: Vercel (แนะนำ)

# ติดตั้ง Vercel CLI
npm i -g vercel

# Login
vercel login

# Deploy
vercel

# Deploy Production
vercel --prod

Environment Variables ที่ต้องตั้งค่าใน Vercel:

Option 2: GitHub Pages (Static Export)

# 1. เพิ่ม config ใน next.config.js
output: 'export',
basePath: '/gts-b',
images: { unoptimized: true }

# 2. Build
npm run build

# 3. Push โฟลเดอร์ out/ ไปยัง gh-pages branch
# (หรือใช้ GitHub Actions - ดูตัวอย่างด้านล่าง)

GitHub Actions (Auto Deploy)

สร้างไฟล์ .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "18"
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: $
          publish_dir: ./out

📁 โครงสร้างโปรเจกต์

gts-b/
├── public/
│   ├── images/              # รูปภาพทั้งหมด
│   └── documents/           # เอกสาร Knowledge Base (PDF, TXT)
├── src/
│   ├── components/
│   │   ├── chat/
│   │   │   └── ChatWidget.js       # AI Chat Widget
│   │   ├── admin/
│   │   │   └── Dashboard.js        # Admin Settings
│   │   └── auth/
│   │       └── LoginModal.js       # Login/Register Modal
│   ├── pages/
│   │   ├── index.js                # หน้าแรก
│   │   ├── admin/
│   │   │   └── dashboard.js        # Admin Dashboard
│   │   ├── legal/
│   │   │   ├── privacy-policy.js   # นโยบายความเป็นส่วนตัว
│   │   │   └── terms-of-service.js # ข้อตกลงการใช้งาน
│   │   └── _app.js
│   ├── utils/
│   │   ├── supabase.js             # Supabase Client
│   │   ├── chatService.js          # Cloud AI Service
│   │   └── localLLMService.js      # Local AI Service (WebLLM)
│   └── styles/
│       └── globals.css
├── .env.local                       # Environment Variables (ไม่ commit)
├── .env.example                     # ตัวอย่าง Environment Variables
├── next.config.js
├── package.json
└── README.md

🔧 Scripts

npm run dev      # รัน Development Server (localhost:3000)
npm run build    # Build สำหรับ Production
npm run start    # รัน Production Server (หลัง build)
npm run lint     # ตรวจสอบ Code Style

⚙️ การตั้งค่า Environment Variables

สร้างไฟล์ .env.local ที่ root ของโปรเจกต์:

# Supabase (จำเป็น)
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# Cloud AI (เลือก 1 หรือทั้ง 2)
NEXT_PUBLIC_GEMINI_API_KEY=your-gemini-api-key
NEXT_PUBLIC_OPENAI_API_KEY=your-openai-api-key

วิธีการหา API Keys:

  1. Supabase: https://supabase.com → สร้างโปรเจกต์ → Settings → API
  2. Google Gemini: https://makersuite.google.com/app/apikey
  3. OpenAI: https://platform.openai.com/api-keys

🌐 สถานะการ Deploy

🔒 Security & Privacy

📞 Contact

📄 License

Private © 2025 Gittisak Wannakeeree

Portfolio website สำหรับ พ.ต.ต. กิจติศักดิ์ วรรณคีรี หัวหน้านายปราบปรามเมืองเอก กองกำกับการ 1 บก.ปส.3
กองบัญชาการตำรวจปราบปรามยาเสพติด (บก.ปส.)

📸 ภาพหน้าจอเว็บไซต์ (Screenshots)

🏠 หน้าแรก (Home Page)

หน้าแรกประกอบด้วย:

Home Page

หน้าแรกใช้ Framer Motion สำหรับ smooth page transitions และ text animations

📰 หน้าข่าวอัพเดท (News Page)

ระบบ Carousel 2 แถว แสดงข่าวเด่นและเรื่องเล่าจากพื้นที่

📖 หน้าเรื่องราว (Stories & Timeline)

Timeline แสดงผลงานสำคัญรอบ 10-20 ปี พร้อม Core Values และไฮไลท์ปฏิบัติการพิเศษ

👤 หน้าเกี่ยวกับ (About Page)

💬 ระบบแจ้งเบาะแส (Chat Widget)

ปุ่มลอยขวาล่างสำหรับแจ้งเบาะแสหรือร้องเรียน พร้อมโหมดไม่ระบุตัวตน

🗺️ แผนที่ที่ตั้งหน่วยงาน

Google Maps แสดงตำแหน่ง กองบัญชาการตำรวจปราบปรามยาเสพติด

🌟 ฟีเจอร์หลัก (Key Features)

📰 ข่าวสารและเรื่องเล่า (News Section)

📖 เรื่องราวและผลงาน (Stories & Timeline)

💬 ระบบแจ้งเบาะแส (Chat Widget)

👤 เกี่ยวกับ (About)

# 🚔 Portfolio Website - พ.ต.ท. กิจติศักดิ์ วรรณคีรี

Portfolio website สำหรับ **พ.ต.ท. กิจติศักดิ์ วรรณคีรี** หัวหน้านายปราบปรามเมืองเอก กองกำกับการ 1 บก.ปส.3
กองบัญชาการตำรวจปราบปรามยาเสพติด (บก.ปส.)

---

## 📸 ภาพหน้าจอเว็บไซต์ (Screenshots)

### 🏠 หน้าแรก (Home Page)

หน้าแรกประกอบด้วย:

- **Hero Section** พร้อม animated text และรูปภาพ profile
- **ข้อความต้นรับ**: "สวัสดีครับ ผม พ.ต.ท. กิจติศักดิ์ วรรณคีรี"
- **ตำแหน่ง**: หัวหน้านายปราบปรามเมืองเอก กองกำกับการ 1 บก.ปส.3
- **หน่วยงาน**: กองบัญชาการตำรวจปราบปรามยาเสพติด (บก.ปส.)
- **Animated Background** ด้วย Framer Motion
- **Navigation Menu** พร้อม Dark Mode Toggle
- **Responsive Design** ปรับตามขนาดหน้าจอทุกอุปกรณ์

![Home Page](/gts-b/public/images/profile/developer-pic-1.png)

> หน้าแรกใช้ Framer Motion สำหรับ smooth page transitions และ text animations

### 📰 หน้าข่าวอัพเดท (News Page)

ระบบ Carousel 2 แถว แสดงข่าวเด่นและเรื่องเล่าจากพื้นที่

- 🔥 **ข่าวเด่น**: ปฏิบัติการสำคัญ, การบูรณาการข้อมูล
- 📰 **เรื่องเล่าจากพื้นที่**: เบื้องหลังภารกิจ, ความร่วมมือ
- ปุ่ม Carousel สีแดงตามสีประจำหน่วย บก.ปส.
- Badge หมวดหมู่สีกรมท่าม่วง (Navy-Purple Gradient)

### 📖 หน้าเรื่องราว (Stories & Timeline)

Timeline แสดงผลงานสำคัญรอบ 10-20 ปี พร้อม Core Values และไฮไลท์ปฏิบัติการพิเศษ

### 👤 หน้าเกี่ยวกับ (About Page)

- Card แสดงปฏิบัติการ "กุนซือเมืองสิงห์" พร้อมสถิติผลงาน
- ข้อมูลส่วนตัว พ.ต.ท. กิจติศักดิ์ วรรณคีรี
- รูปภาพ Profile และ Background

### 💬 ระบบแจ้งเบาะแส (Chat Widget)

ปุ่มลอยขวาล่างสำหรับแจ้งเบาะแสหรือร้องเรียน พร้อมโหมดไม่ระบุตัวตน

### 🗺️ แผนที่ที่ตั้งหน่วยงาน

Google Maps แสดงตำแหน่ง กองบัญชาการตำรวจปราบปรามยาเสพติด

---

## 🌟 ฟีเจอร์หลัก (Key Features)

### 📰 ข่าวสารและเรื่องเล่า (News Section)

- **2 แถว Carousel** สำหรับแสดงข่าวและเรื่องเล่าจากพื้นที่ปฏิบัติการ
- ข่าวเด่น: ปฏิบัติการสำคัญ, การบูรณาการข้อมูล
- เรื่องเล่าจากพื้นที่: เบื้องหลังภารกิจ, ความร่วมมือกับประชาชน
- Badge หมวดหมู่สีกรมท่าม่วงตามอัตลักษณ์หน่วยงาน
- ปุ่ม Carousel สีแดงตามสีประจำหน่วย บก.ปส.

### 📖 เรื่องราวและผลงาน (Stories & Timeline)

- **Timeline** แสดงผลงานสำคัญรอบ 10-20 ปี (2555-2565)
- 4 Core Values: Citizen-Centric, Data-Driven, Collaboration, Innovation
- ไฮไลท์ปฏิบัติการพิเศษ: Operation Kunzio (2565)
- บันทึกส่วนตัวจาก พ.ต.ท. กิจติศักดิ์

### 💬 ระบบแจ้งเบาะแส (Chat Widget)

- **ปุ่มลอยขวาล่าง** สำหรับแจ้งเบาะแสหรือร้องเรียน
- รองรับ 2 ประเภท: 🔍 แจ้งเบาะแส / 📢 ร้องเรียน
- **โหมดไม่ระบุตัวตน** (Anonymous Mode)
- ฟิลด์: ชื่อ, โทรศัพท์, สถานที่เกิดเหตุ, รายละเอียด
- การันตีความลับอย่างเคร่งครัด

### 👤 เกี่ยวกับ (About)

- Card แสดงปฏิบัติการสำคัญพร้อม Badge สีกรมท่าม่วง
- ข้อมูลปฏิบัติการ "กุนซือเมืองสิงห์" (1-7 มิ.ย. 2565)
- ผลสำเร็จ: 8 ผู้ต้องหา, 50 กก. ไอซ์, 50 ล้านบาท
- สถิติผลงาน: 10+ จังหวัด, 50 ล้านบาท, 8 จับกุม

### 🗺️ แผนที่ (Location)

- Google Maps แสดงที่ตั้ง กองบัญชาการตำรวจปราบปรามยาเสพติด
- ขนาดกะทัดรัด responsive design

---

## 🎯 ผลงานที่พัฒนา (What We Built)

### ✅ หน้าแรก (Home Page)

- **Hero Section** พร้อม animated text ใช้ Framer Motion
- แสดงข้อมูลส่วนตัว: ชื่อ, ตำแหน่ง, หน่วยงาน
- รูปภาพ Profile responsive พร้อม hover effects
- Navigation Menu พร้อม Dropdown สำหรับหน้าต่างๆ
- Dark Mode Toggle (รองรับโหมดกลางคืน)
- Smooth page transitions ทุกหน้า

### ✅ ระบบข่าวสารแบบ Carousel 2 แถว

- ออกแบบและพัฒนาระบบแสดงข่าวแบบ 2-row carousel
- ใช้ Embla Carousel React สำหรับการเลื่อนที่ smooth
- ปรับแต่งปุ่มเป็นสีแดง (สีประจำหน่วย บก.ปส.)
- Badge หมวดหมู่ใช้ gradient สีกรมท่าม่วงสำหรับความเป็นทางการ

### ✅ Timeline แสดงผลงาน

- Vertical timeline แสดงผลงานสำคัญตามช่วงเวลา (2555-2565)
- Highlight ปฏิบัติการพิเศษ "กุนซือเมืองสิงห์"
- แสดง Core Values: Citizen-Centric, Data-Driven, Collaboration, Innovation

### ✅ Chat Widget แจ้งเบาะแส

- ปุ่มลอยขวาล่างพร้อม animation
- รองรับ 2 โหมด: แจ้งเบาะแส และ ร้องเรียน
- โหมดไม่ระบุตัวตน (Anonymous Mode)
- Form validation พร้อมฟิลด์ครบถ้วน

### ✅ หน้า About ข้อมูลส่วนตัว

- Card แสดงปฏิบัติการสำคัญ
- รูปภาพ Profile centered และ responsive
- สถิติผลงาน: 10+ จังหวัด, 50 ล้านบาท, 8 จับกุม

### ✅ แผนที่ที่ตั้งหน่วยงาน

- Google Maps embed responsive
- แสดงตำแหน่ง กองบัญชาการตำรวจปราบปรามยาเสพติด

### ✅ Responsive Design

- รองรับทุกขนาดหน้าจอ (Mobile, Tablet, Desktop)
- Dark Mode สำหรับทุกหน้า
- Navigation Menu พร้อม Dropdown

---

## 🎨 Design System ที่ใช้

### สีหลัก (Primary Colors)

- **สีแดง** (Red 600-700): ปุ่ม Carousel - สีประจำหน่วย บก.ปส.
- **สีกรมท่าม่วง** (Indigo 900 - Purple 900): Badge หมวดหมู่, Header Card
- **สีชมพู/ฟ้า** (Primary/PrimaryDark): Accent colors
- **Dark Mode Support**: รองรับโหมดมืดทั้งเว็บไซต์

### Typography

- **Font**: Montserrat (100-900 weight)
- **Responsive**: ปรับขนาดตัวอักษรตาม breakpoint

### Components

- **Carousel**: Embla Carousel React พร้อมปุ่มเลื่อนสีแดง
- **Cards**: Border, Shadow, Gradient backgrounds
- **Timeline**: Vertical timeline พร้อม highlight special events
- **Forms**: Input fields, Checkbox, Textarea responsive

## 🛠️ เทคโนโลยีที่ใช้ (Tech Stack)

| Category       | Technology           | Version |
| -------------- | -------------------- | ------- |
| **Framework**  | Next.js              | 14.2.10 |
| **UI Library** | React                | 18      |
| **Styling**    | Tailwind CSS         | 3.4.0   |
| **Animation**  | Framer Motion        | 10.6.0  |
| **Carousel**   | Embla Carousel React | Latest  |
| **Icons**      | Lucide React         | Latest  |
| **Utilities**  | clsx, tailwind-merge | Latest  |

### เหตุผลในการเลือกใช้

- **Next.js**: SEO-friendly, Fast page load, Image optimization
- **Tailwind CSS**: Rapid development, Consistent design, Custom theme support
- **Framer Motion**: Smooth animations, Professional transitions
- **Embla Carousel**: Lightweight, Touch-friendly, Customizable

---

## 📦 Installation

```bash
# Clone repository
git clone https://github.com/gittisak-go/gts-b.git
cd gts-b

# Install dependencies
npm install

# Run development server
npm run dev

เปิดเบราว์เซอร์ที่ http://localhost:3000

📂 Project Structure

├── public/
│   ├── images/          # รูปภาพ profile, projects, articles
│   ├── All-Texts/       # ไฟล์ข้อความต้นฉบับ
│   └── sample-news-data.json
├── src/
│   ├── components/
│   │   ├── chat/
│   │   │   └── ChatWidget.js       # Widget แจ้งเบาะแส
│   │   ├── news/
│   │   │   └── NewsCard.js         # Card แสดงข่าว
│   │   ├── ui/
│   │   │   └── carousel.js         # Carousel component
│   │   ├── AnimatedText.js
│   │   ├── NavBar.js               # Menu พร้อม Dropdown
│   │   ├── Skills.js               # แผนที่สถานที่ตั้ง
│   │   ├── Experience.js
│   │   └── Education.js
│   ├── pages/
│   │   ├── index.js                # หน้าแรก
│   │   ├── about.js                # เกี่ยวกับ
│   │   ├── news.js                 # ข่าวอัพเดท (2 แถว carousel)
│   │   ├── stories.js              # เรื่องราวและ timeline
│   │   ├── projects.js
│   │   ├── articles.js
│   │   └── _app.js                 # Global wrapper + ChatWidget
│   └── styles/
│       └── globals.css
└── CHATBOT_GUIDE.md                # คู่มือสำหรับ Chatbot System

🚀 Deployment

Vercel (แนะนำ)

# ติดตั้ง Vercel CLI
npm i -g vercel

# Deploy
vercel

Netlify

# สร้าง build
npm run build

# Deploy โฟลเดอร์ .next

การตั้งค่า Environment Variables

ไม่จำเป็นสำหรับเวอร์ชันปัจจุบัน (ยังไม่มี Backend API)

📝 คำแนะนำสำหรับการพัฒนาต่อ

1. ระบบ Backend สำหรับแจ้งเบาะแส

2. ระบบ Chatbot (ดู CHATBOT_GUIDE.md)

3. ระบบจัดการข่าว (CMS)

🔐 Security Notes

📞 Contact

📄 License

สงวนลิขสิทธิ์ © 2025 พ.ต.ท. กิจติศักดิ์ วรรณคีรี

Built with ❤️ for public service สร้างด้วยความตั้งใจเพื่อรับใช้ประชาชน