src/
├── app/
│   ├── page.tsx                        # Home page
│   ├── layout.tsx                      # Root layout + metadata
│   ├── globals.css
│   ├── icon.svg                        # Favicon (AW monogram)
│   ├── Layouts/MainLayout/             # Navbar wrapper
│   ├── components/
│   │   ├── navbar/                     # Top navigation
│   │   ├── homePage/                   # header, about, postList
│   │   └── languageLab/               # Language lab UI
│   ├── pages/
│   │   ├── about/                      # Public about page
│   │   ├── blog/                       # Public blog page
│   │   ├── language/                   # Public language lab
│   │   ├── login/                      # Login page
│   │   └── projects/
│   │       ├── [id]/
│   │       │   ├── page.tsx            # Project detail
│   │       │   └── ZoomableImage.tsx   # Click-to-zoom image viewer
│   │       ├── components/             # Project list + card
│   │       ├── services/
│   │       └── types/
│   ├── admin/
│   │   ├── dashboard/                  # Admin home + stats
│   │   ├── language/                   # Language lab admin
│   │   └── profile/                    # Full content management
│   └── api/
│       ├── auth/                       # login, set-password
│       ├── profile/                    # get, update
│       ├── public/                     # about, projects, language
│       └── admin/                      # protected CRUD + reorder
│           ├── skills/                 # CRUD + reorder
│           ├── interests/              # CRUD + reorder
│           ├── projects/               # CRUD + reorder
│           ├── project-flows/          # CRUD + reorder
│           ├── experience/
│           ├── certificates/
│           ├── roles/
│           ├── language/
│           └── upload/                 # Cloudinary upload
├── lib/
│   ├── db.ts                           # MySQL connection pool
│   ├── projects.ts                     # Project + flow queries
│   ├── language.ts
│   ├── admin-auth.ts
│   └── tgl.ts                          # Date formatter
└── middleware.ts                       # JWT route protection

User visits /
      |
      ▼
  Render ProfileHeader  (static — name hardcoded)
      |
      ▼
  AboutSection — GET /api/public/about
      |
      ├─→ Error / no data       → fields stay empty
      |
      └─→ 200 { job_title, bio, ... }
              |
              ▼
          Render job_title + bio
              |
              ▼
          Button "More about me →" → /pages/about
      |
      ▼
  PostList — GET https://api.github.com/users/AnggaWikaNugraha/events/public?per_page=10
      |
      ├─→ Error / empty         → "No recent activity"
      |
      └─→ 200 events[]  (max 6)
              |
              ▼
          GitHub Contribution Calendar  (react-github-calendar)
              |
              ▼
          Recent Activity list  (event type, repo name, time ago)

User visits /pages/projects
      |
      ▼
GET /api/public/projects
      |
      ├─→ Error                 → 500 { error: message }
      |
      └─→ 200
              |
              ▼
          SELECT projects WHERE user_id=1 AND is_private=0
          ORDER BY sort_order ASC, created_at DESC
              |
              └─→ per project: SELECT project_flows WHERE project_id=?
                               ORDER BY sort_order ASC
              |
              ▼
          Response Project[] (each with flows[])
              |
              ▼
          Render Project List (card per project)
              ├─ Cover image, title, role · company · year
              ├─ Description (collapsible if long)
              ├─ Tech stack pills
              └─ Links: Demo · Source · Detail

User visits /pages/projects/[id]
      |
      ▼
getPublicProjectById(id)  ← server-side (lib/projects.ts)
      |
      ├─→ SELECT projects WHERE id=? AND is_private=0
      |         |
      |         └─→ Not found  → notFound()  (404 page)
      |
      └─→ Found
              |
              ▼
          SELECT project_flows WHERE project_id=?
          ORDER BY sort_order ASC
              |
              ▼
          Render Project Detail
              ├─ Cover image  (ZoomableImage)
              │     └─→ Click → lightbox overlay
              │             ├─ Scroll   → zoom in / out
              │             ├─ Drag     → pan
              │             └─ Esc / click outside → close
              ├─ Tech stack pills
              └─ Flows[]  (ordered by sort_order)
                    ├─ Flow image  (ZoomableImage)
                    └─ Flow description  (markdown)

User visits /pages/about
      |
      ▼
GET /api/public/about
      |
      ├─→ No user found         → 404 { error: "No user found" }
      ├─→ Error                 → 500 { error: message }
      |
      └─→ 200
              |
              ▼  (parallel DB queries)
              ├─ SELECT users LIMIT 1
              ├─ SELECT user_skills       ORDER BY sort_order ASC
              ├─ SELECT user_interests    ORDER BY sort_order ASC
              ├─ SELECT experience        ORDER BY created_at ASC
              │     └─ SELECT roles WHERE experience_id  ORDER BY start_date DESC
              └─ SELECT certificates      ORDER BY issue_date DESC
              |
              ▼
          Response { name, bio, avatar_url, job_title, email, phone,
                     location, website, skills[], interests[],
                     experience[{ company, roles[] }], certificates[] }
              |
              ▼
          Render About Page
              ├─ AvatarSection    (avatar, name, job_title)
              ├─ InfoSection      (email, phone, location, website)
              ├─ ExperienceSection (company, logo, roles)
              ├─ EducationSection  (currently empty)
              ├─ SkillsSection    (skills[], interests[])
              └─ CertificatesSection (certificates[])

User visits /pages/language
      |
      ▼
GET /api/public/language  (read-only, no auth)
      |
      ├─→ Error                 → 500 { error: message }
      |
      └─→ 200
              |
              ▼
          ensureLanguageEntriesTable()  ← CREATE TABLE IF NOT EXISTS
              |
              ▼
          SELECT language_entries WHERE user_id=1
          ORDER BY updated_at DESC, created_at DESC
              |
              ▼
          Response {
            entries[],          ← meanings & tags parsed from JSON
            availableTags[],    ← unique tags, sorted A-Z
            stats: { entries, meanings, tags }
          }
              |
              ▼
          Render LanguageLab (mode="public")
              ├─ Stats cards  (total entries, meanings, tags)
              ├─ Search bar   (filter by sourceText, meanings, tags)
              ├─ Tag filter   (filter by availableTags)
              └─ Entry list   (sourceText, meanings[], example, notes)
                    ⚠ mode="public" → form tambah/edit/hapus tidak ditampilkan

User visits /pages/blog
      |
      ▼
  getBlogFeed()  ← hardcoded static data (no API call)
      |
      ▼
  setTimeout 1000ms  (simulated loading)
      |
      ├─→ posts set to []   → "No posts available."
      |
      └─→ (future) posts[]  → Render BlogCard list

Admin visits dashboard
      |
      ▼
middleware.ts — verify JWT cookie (token)
      |
      ├─→ No cookie / invalid   → redirect login page
      |
      └─→ Valid JWT
              |
              ▼
          GET /api/admin/skills
          GET /api/admin/interests
          GET /api/admin/experience
          GET /api/admin/certificates
              |   (parallel fetch, client-side useEffect)
              ▼
          Response
              ├─ skills[]        → count
              ├─ interests[]     → count
              ├─ experience[]    → count
              └─ certificates[]  → count
              |
              ▼
          Render Stats Cards
              ├─ Skills count
              ├─ Interests count
              ├─ Experience count
              └─ Certificates count

Admin visits profile page
      |
      ▼
middleware.ts — verify JWT cookie
      |
      ├─→ Invalid / no token    → redirect login page
      |
      └─→ Valid
              |
              ▼  (parallel fetch on mount)
              ├─ GET /api/profile
              ├─ GET /api/admin/skills
              ├─ GET /api/admin/interests
              ├─ GET /api/admin/experience
              ├─ GET /api/admin/certificates
              └─ GET /api/admin/projects
              |
              ▼
          Render tabs: Profile · Skills · Interests · Experience · Certificates · Projects

── Tab: Profile ──────────────────────────────────────────
  Edit fields (name, bio, avatar_url, job_title, …)
      |
      ▼  [Save]
  POST /api/profile/update  { name, bio, avatar_url, … }
      └─→ { success: true }

── Tab: Skills ───────────────────────────────────────────
  [Add]   POST /api/admin/skills/create   { skill }
              └─→ refresh GET /api/admin/skills
  [Delete] POST /api/admin/skills/delete  { id }
              └─→ refresh GET /api/admin/skills
  [Drag]  POST /api/admin/skills/reorder  { ids[] }
              └─→ { success: true }

── Tab: Interests ────────────────────────────────────────
  [Add]   POST /api/admin/interests/create   { interest }
              └─→ refresh GET /api/admin/interests
  [Delete] POST /api/admin/interests/delete  { id }
              └─→ refresh GET /api/admin/interests
  [Drag]  POST /api/admin/interests/reorder  { ids[] }
              └─→ { success: true }

── Tab: Experience ───────────────────────────────────────
  [Add]   POST /api/admin/experience/create  { company, companyLogoUrl, location }
              └─→ refresh GET /api/admin/experience
  [Save]  POST /api/admin/experience/update  { id, company, … }
              └─→ { success: true }
  [Delete] POST /api/admin/experience/delete { id }
              └─→ refresh GET /api/admin/experience
  [Add Role]    POST /api/admin/roles/create  { experienceId, title, … }
  [Save Role]   POST /api/admin/roles/update  { id, title, … }
  [Delete Role] POST /api/admin/roles/delete  { id }

── Tab: Certificates ─────────────────────────────────────
  [Add]   POST /api/admin/certificates/create  { title, issuer, issue_date, … }
              └─→ refresh GET /api/admin/certificates
  [Save]  POST /api/admin/certificates/update  { id, title, … }
              └─→ { success: true }
  [Delete] POST /api/admin/certificates/delete { id }
              └─→ refresh GET /api/admin/certificates

── Tab: Projects ─────────────────────────────────────────
  [Add]   POST /api/admin/projects/create  { title, techStack[], … }
              └─→ { success: true, id }  → refresh GET /api/admin/projects
  [Save]  POST /api/admin/projects/update  { id, title, … }
              └─→ { success: true }
  [Delete] POST /api/admin/projects/delete { id }
              └─→ refresh GET /api/admin/projects
  [Drag project] POST /api/admin/projects/reorder  { ids[] }
              └─→ { success: true }  → sort_order updated in DB

  Per project — Flow actions:
  [Add Flow]    POST /api/admin/project-flows/create  { projectId, title, imageUrl, description }
  [Save Flow]   POST /api/admin/project-flows/update  { id, title, imageUrl, description }
  [Delete Flow] POST /api/admin/project-flows/delete  { id }
  [Drag flow]   POST /api/admin/project-flows/reorder { ids[] }
              └─→ sort_order persisted; public detail page reflects new order

  Image upload (cover / flow):
  POST /api/admin/upload  multipart/form-data { file }
      └─→ { url }  (Cloudinary CDN URL)

Admin visits language admin page
      |
      ▼
middleware.ts — verify JWT cookie
      |
      ├─→ Invalid / no token    → redirect login page
      |
      └─→ Valid
              |
              ▼
GET /api/admin/language
      |
      ▼
ensureLanguageEntriesTable()  ← CREATE TABLE IF NOT EXISTS
      |
      ▼
SELECT language_entries WHERE user_id=1
ORDER BY updated_at DESC, created_at DESC
      |
      ▼
Response {
  entries[],       ← meanings & tags parsed from JSON
  availableTags[], ← unique tags, sorted A-Z
  stats: { entries, meanings, tags }
}
      |
      ▼
Render LanguageLab (mode="admin")
    ├─ Stats cards  (entries, meanings, tags)
    ├─ Search bar   (filter by sourceText, meanings, tags, example, notes)
    ├─ Direction filter  (All / EN→ID / ID→EN)
    ├─ Tag filter   (filter by availableTags)
    ├─ [+ Tambah] button → open create form
    └─ Entry list grouped A-Z  (click card → edit modal)

── Create Entry ──────────────────────────────────────────
  [Simpan]
  POST /api/admin/language/create
  { sourceText, sourceLang, targetLang, meanings[],
    exampleSource?, exampleTarget?, notes?, tags[] }
      └─→ { success: true, id }
              └─→ refresh GET /api/admin/language

── Edit Entry  (modal) ───────────────────────────────────
  [Save]
  POST /api/admin/language/update
  { id, sourceText, sourceLang, targetLang, meanings[],
    exampleSource?, exampleTarget?, notes?, tags[] }
      └─→ { success: true }
              └─→ refresh GET /api/admin/language

── Delete Entry (modal) ──────────────────────────────────
  [Delete]
  POST /api/admin/language/delete  { id }
      └─→ { success: true }
              └─→ refresh GET /api/admin/language

// Request: multipart/form-data
file: File (image)
// Response
{ "url": "string" }  // Cloudinary CDN URL
// Error: { "error": "No file provided" } 400