init

.cta.json

@@ -0,0 +1,12 @@
+{
+  "projectName": "altricade",
+  "mode": "file-router",
+  "typescript": true,
+  "tailwind": true,
+  "packageManager": "npm",
+  "addOnOptions": {},
+  "git": true,
+  "version": 1,
+  "framework": "react-cra",
+  "chosenAddOns": ["eslint", "shadcn"]
+}

.dockerignore

@@ -0,0 +1,13 @@
+node_modules
+dist
+dist-ssr
+.git
+.github
+.forgejo
+*.local
+.env
+.DS_Store
+.vscode
+.tanstack
+.nitro
+.wrangler

.forgejo/workflows/deploy.yml

@@ -0,0 +1,40 @@
+name: Deploy
+
+# Deploy on every push to master (and allow manual runs from the Actions tab).
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    # `docker` runner => node:22-bookworm image WITH the Docker socket available,
+    # so `docker build` / `docker run` control the host's Docker daemon.
+    runs-on: docker
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # Build the site into an nginx image (see Dockerfile). Tagged with the
+      # commit SHA for traceability, plus :latest for convenience.
+      - name: Build image
+        run: |
+          docker build -t altricade-portfolio:${{ github.sha }} -t altricade-portfolio:latest .
+
+      # Replace the running container with the freshly built image.
+      #   -p 8080:80  publishes the container on host port 8080.
+      #   Point Nginx Proxy Manager's proxy host at:  <server-ip>:8080
+      #   (Or, if NPM runs in Docker, put this container on NPM's network and
+      #    forward to  altricade-portfolio:80  instead — see note below.)
+      - name: Deploy container
+        run: |
+          docker rm -f altricade-portfolio 2>/dev/null || true
+          docker run -d \
+            --name altricade-portfolio \
+            --restart unless-stopped \
+            -p 8080:80 \
+            altricade-portfolio:latest
+
+      # Free disk on the shared runner by dropping old, untagged images.
+      - name: Prune old images
+        run: docker image prune -f

.gitignore

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+count.txt
+.env
+.nitro
+.tanstack
+.wrangler

.prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

Dockerfile

@@ -0,0 +1,17 @@
+# ---- Build stage: compile the Vite/React app into static files ----
+FROM node:22-bookworm AS build
+WORKDIR /app
+
+# Install dependencies from the lockfile (reproducible)
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Copy the rest of the source and build (outputs to /app/dist)
+COPY . .
+RUN npm run build
+
+# ---- Serve stage: tiny nginx image that serves the built files ----
+FROM nginx:1.27-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 80

README.md

@@ -0,0 +1,98 @@
+# Omar Zaid — Frontend Developer Portfolio
+
+A modern, responsive portfolio website showcasing my skills, experience, and projects as a Frontend Developer.
+
+---
+
+## About Me
+
+I'm a passionate Frontend Developer with expertise in building high-performance, scalable web applications. I specialize in React ecosystem and modern JavaScript/TypeScript development, with a strong focus on clean code, user experience, and best practices.
+
+### Key Highlights
+
+- **80% reduction** in hiring time through a custom recruitment portal I built from scratch
+- **25% faster development** by implementing Tailwind CSS across enterprise projects
+- Experience with high-traffic e-commerce (kari.com) and enterprise HR systems
+- Full-stack capabilities with Nuxt 3, Node.js, and PostgreSQL
+
+---
+
+## Tech Stack
+
+### Frontend
+
+- **Frameworks:** React, Vue, Next.js, Nuxt
+- **Languages:** TypeScript, JavaScript
+- **Styling:** Tailwind CSS, SCSS, CSS
+
+### Backend
+
+- **Runtime:** Node.js
+- **Frameworks:** Express, NestJS
+- **Database:** PostgreSQL
+- **ORM:** Prisma
+
+### Tools & DevOps
+
+- Git, GitLab CI/CD, Docker
+- Figma, Jira
+- Linux, Windsurf, Cursor
+
+---
+
+## Features
+
+- **Blazing Fast** — Built with Vite for optimal performance
+- **Modern UI** — Clean, minimalist design with smooth animations
+- **Dark/Light Mode** — System-aware theme switching
+- **Internationalization** — English and Russian language support
+- **Fully Responsive** — Optimized for all devices
+- **Accessible** — Built with a11y best practices
+
+---
+
+## Project Structure
+
+```
+src/
+├── components/          # Reusable UI components
+│   ├── sections/        # Page sections (Hero, About, Skills, etc.)
+│   └── ui/              # Base UI components (Button, etc.)
+├── lib/                 # Utilities, config, constants
+├── locales/             # i18n translation files
+├── routes/              # TanStack Router file-based routes
+└── stores/              # Zustand state management
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+---
+
+## Contact
+
+- **Email:** omar.m.zaid@hotmail.com
+- **GitHub:** [github.com/altricade](https://github.com/altricade)
+- **LinkedIn:** [linkedin.com/in/altricade](https://www.linkedin.com/in/altricade/)
+- **Telegram:** [@altricade](https://t.me/altricade)
+
+---
+
+## License
+
+MIT © Omar Zaid

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

eslint.config.js

@@ -0,0 +1,3 @@
+import { tanstackConfig } from '@tanstack/eslint-config'
+
+export default [...tanstackConfig]

google4dcd7c07341e5d75.html

@@ -0,0 +1 @@
+google-site-verification: google4dcd7c07341e5d75.html

index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="google-site-verification"
+      content="Ib1nqTjZWu530Re209pNm_1cTKu_jwoQI7dWPdpvF3o"
+    />
+    <meta
+      name="description"
+      content="Omar Zaid - Frontend Developer specializing in React, TypeScript, and modern web technologies"
+    />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Omar Zaid | Frontend Developer</title>
+    <script type="text/javascript">
+      ;(function (l) {
+        if (l.search[1] === '/') {
+          var decoded = l.search
+            .slice(1)
+            .split('&')
+            .map(function (s) {
+              return s.replace(/~and~/g, '&')
+            })
+            .join('?')
+          window.history.replaceState(
+            null,
+            null,
+            l.pathname.slice(0, -1) + decoded + l.hash,
+          )
+        }
+      })(window.location)
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nginx.conf

@@ -0,0 +1,19 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # SPA fallback: TanStack Router handles routing client-side, so any
+    # unknown path must serve index.html instead of returning 404.
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Long cache for hashed build assets (safe: filenames change on rebuild)
+    location /assets/ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+}

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "altricade",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "vite build && tsc",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "lint": "eslint",
+    "format": "prettier",
+    "check": "prettier --write . && eslint --fix"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-router": "^1.132.0",
+    "@tanstack/react-router-devtools": "^1.132.0",
+    "@tanstack/router-plugin": "^1.132.0",
+    "@tinymce/tinymce-react": "^6.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dompurify": "^3.3.1",
+    "i18next": "^25.8.0",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "lucide-react": "^0.544.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.1",
+    "react-i18next": "^16.5.3",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.6",
+    "tinymce": "^8.3.2",
+    "tw-animate-css": "^1.3.6",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "^0.3.11",
+    "@tanstack/eslint-config": "^0.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^27.0.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7"
+  }
+}

prettier.config.js

@@ -0,0 +1,8 @@
+/** @type {import('prettier').Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+}
+
+export default config

public/404.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Redirecting...</title>
+    <script>
+      var pathSegmentsToKeep = 0
+      var l = window.location
+      l.replace(
+        l.protocol +
+          '//' +
+          l.hostname +
+          (l.port ? ':' + l.port : '') +
+          l.pathname
+            .split('/')
+            .slice(0, 1 + pathSegmentsToKeep)
+            .join('/') +
+          '/?/' +
+          l.pathname
+            .slice(1)
+            .split('/')
+            .slice(pathSegmentsToKeep)
+            .join('/')
+            .replace(/&/g, '~and~') +
+          (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+          l.hash,
+      )
+    </script>
+  </head>
+  <body></body>
+</html>

public/google4dcd7c07341e5d75.html

@@ -0,0 +1 @@
+google-site-verification: google4dcd7c07341e5d75.html

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "TanStack App",
+  "name": "Create TanStack App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,6 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Allow: /
+Disallow: /admin/
+
+Sitemap: https://altricade.github.io/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://altricade.github.io/</loc>
+    <lastmod>2026-01-27</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://altricade.github.io/blog</loc>
+    <lastmod>2026-01-27</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+</urlset>

src/api/articles.ts

@@ -0,0 +1,84 @@
+import { api } from './client'
+
+export interface Article extends ArticlePreview {
+  content: string
+  updatedAt: string
+}
+
+export interface ArticlePreview {
+  id: string
+  title: string
+  slug: string
+  preview: string
+  coverImage?: string
+  tags: Array<string>
+  published: boolean
+  createdAt: string
+}
+
+export interface ArticlesResponse {
+  articles: Array<ArticlePreview>
+  total: number
+  page: number
+  limit: number
+}
+
+export interface ArticleFilters {
+  page?: number
+  limit?: number
+  tag?: string
+  search?: string
+  published?: boolean
+}
+
+export interface CreateArticleData {
+  title: string
+  preview: string
+  content: string
+  coverImage?: string
+  tags: Array<string>
+  published: boolean
+}
+
+export type UpdateArticleData = Partial<CreateArticleData>
+
+const buildQueryString = (filters?: ArticleFilters): string => {
+  if (!filters) return ''
+  const params = new URLSearchParams()
+  if (filters.page) params.set('page', String(filters.page))
+  if (filters.limit) params.set('limit', String(filters.limit))
+  if (filters.tag) params.set('tag', filters.tag)
+  if (filters.search) params.set('search', filters.search)
+  if (filters.published !== undefined)
+    params.set('published', String(filters.published))
+  const query = params.toString()
+  return query ? `?${query}` : ''
+}
+
+export const articlesApi = {
+  getAll: (filters?: ArticleFilters) =>
+    api.get<ArticlesResponse>(`/articles${buildQueryString(filters)}`),
+
+  getBySlug: (slug: string) => api.get<Article>(`/articles/slug/${slug}`),
+
+  getById: (id: string) => api.get<Article>(`/articles/${id}`),
+
+  getTags: () => api.get<Array<string>>('/articles/tags'),
+
+  getAllAdmin: (filters?: ArticleFilters) =>
+    api.get<ArticlesResponse>(
+      `/articles/admin/all${buildQueryString(filters)}`,
+    ),
+
+  getByIdAdmin: (id: string) => api.get<Article>(`/articles/admin/${id}`),
+
+  getBySlugAdmin: (slug: string) =>
+    api.get<Article>(`/articles/admin/slug/${slug}`),
+
+  create: (data: CreateArticleData) => api.post<Article>('/articles', data),
+
+  update: (id: string, data: UpdateArticleData) =>
+    api.patch<Article>(`/articles/${id}`, data),
+
+  delete: (id: string) => api.delete<void>(`/articles/${id}`),
+}

src/api/auth.ts

@@ -0,0 +1,48 @@
+import { api } from './client'
+
+export interface User {
+  id: string
+  username: string
+}
+
+export interface AuthStatus {
+  needsSetup: boolean
+  message: string
+}
+
+export interface AuthResponse {
+  message: string
+  user: User
+}
+
+export interface AuthCheckResponse {
+  authenticated: boolean
+  user: User
+}
+
+export interface LoginCredentials {
+  username: string
+  password: string
+}
+
+export interface ChangePasswordData {
+  currentPassword: string
+  newPassword: string
+}
+
+export const authApi = {
+  getStatus: () => api.get<AuthStatus>('/auth/status'),
+
+  setup: (data: LoginCredentials) =>
+    api.post<AuthResponse>('/auth/setup', data),
+
+  login: (data: LoginCredentials) =>
+    api.post<AuthResponse>('/auth/login', data),
+
+  logout: () => api.post<{ message: string }>('/auth/logout'),
+
+  check: () => api.get<AuthCheckResponse>('/auth/check'),
+
+  changePassword: (data: ChangePasswordData) =>
+    api.post<{ message: string }>('/auth/change-password', data),
+}

src/api/client.ts

@@ -0,0 +1,99 @@
+const API_URL = 'https://portfolio-api.altricade.com'
+
+export class ApiError extends Error {
+  status: number
+
+  constructor(message: string, status: number) {
+    super(message)
+    this.status = status
+    this.name = 'ApiError'
+  }
+}
+
+class ApiClient {
+  private isRefreshing = false
+  private refreshPromise: Promise<boolean> | null = null
+
+  private async request<T>(
+    endpoint: string,
+    options: RequestInit = {},
+  ): Promise<T> {
+    const response = await fetch(`${API_URL}${endpoint}`, {
+      ...options,
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+    })
+
+    if (response.status === 401 && !endpoint.includes('/auth/refresh')) {
+      const refreshed = await this.refreshToken()
+      if (refreshed) {
+        return this.request(endpoint, options)
+      }
+      throw new ApiError('Session expired', 401)
+    }
+
+    if (!response.ok) {
+      const error = await response
+        .json()
+        .catch(() => ({ message: 'Request failed' }))
+      throw new ApiError(error.message || 'Request failed', response.status)
+    }
+
+    if (response.status === 204) {
+      return {} as T
+    }
+
+    return response.json()
+  }
+
+  private async refreshToken(): Promise<boolean> {
+    if (this.isRefreshing && this.refreshPromise) {
+      return this.refreshPromise
+    }
+
+    this.isRefreshing = true
+    this.refreshPromise = (async () => {
+      try {
+        const response = await fetch(`${API_URL}/auth/refresh`, {
+          method: 'POST',
+          credentials: 'include',
+        })
+        return response.ok
+      } catch {
+        return false
+      } finally {
+        this.isRefreshing = false
+        this.refreshPromise = null
+      }
+    })()
+
+    return this.refreshPromise
+  }
+
+  get<T>(endpoint: string) {
+    return this.request<T>(endpoint)
+  }
+
+  post<T>(endpoint: string, data?: unknown) {
+    return this.request<T>(endpoint, {
+      method: 'POST',
+      body: data ? JSON.stringify(data) : undefined,
+    })
+  }
+
+  patch<T>(endpoint: string, data: unknown) {
+    return this.request<T>(endpoint, {
+      method: 'PATCH',
+      body: JSON.stringify(data),
+    })
+  }
+
+  delete<T>(endpoint: string) {
+    return this.request<T>(endpoint, { method: 'DELETE' })
+  }
+}
+
+export const api = new ApiClient()

src/api/index.ts

@@ -0,0 +1,4 @@
+export * from './client'
+export * from './auth'
+export * from './articles'
+export * from './messages'

src/api/messages.ts

@@ -0,0 +1,62 @@
+import { api } from './client'
+
+export interface Message {
+  id: string
+  name: string
+  email: string
+  subject?: string
+  message: string
+  isRead: boolean
+  createdAt: string
+}
+
+export interface MessagesResponse {
+  messages: Array<Message>
+  total: number
+  page: number
+  limit: number
+  unreadCount: number
+}
+
+export interface MessagesFilters {
+  page?: number
+  limit?: number
+  isRead?: boolean
+}
+
+export interface CreateMessageData {
+  name: string
+  email: string
+  subject?: string
+  message: string
+}
+
+const buildQueryString = (filters?: MessagesFilters): string => {
+  if (!filters) return ''
+  const params = new URLSearchParams()
+  if (filters.page) params.set('page', String(filters.page))
+  if (filters.limit) params.set('limit', String(filters.limit))
+  if (filters.isRead !== undefined) params.set('isRead', String(filters.isRead))
+  const query = params.toString()
+  return query ? `?${query}` : ''
+}
+
+export const messagesApi = {
+  submit: (data: CreateMessageData) =>
+    api.post<{ message: string; id: string }>('/messages', data),
+
+  getAll: (filters?: MessagesFilters) =>
+    api.get<MessagesResponse>(`/messages${buildQueryString(filters)}`),
+
+  getById: (id: string) => api.get<Message>(`/messages/${id}`),
+
+  getUnreadCount: () =>
+    api.get<{ unreadCount: number }>('/messages/unread-count'),
+
+  markAsRead: (id: string) => api.patch<Message>(`/messages/${id}/read`, {}),
+
+  markAsUnread: (id: string) =>
+    api.patch<Message>(`/messages/${id}/unread`, {}),
+
+  delete: (id: string) => api.delete<void>(`/messages/${id}`),
+}

src/components/BundledEditor.tsx

@@ -0,0 +1,32 @@
+import { Editor } from '@tinymce/tinymce-react'
+import type { IAllProps } from '@tinymce/tinymce-react'
+import 'tinymce/tinymce'
+import 'tinymce/models/dom/model'
+import 'tinymce/themes/silver'
+import 'tinymce/icons/default'
+import 'tinymce/skins/ui/oxide/skin'
+import 'tinymce/skins/content/default/content'
+import 'tinymce/skins/ui/oxide/content'
+
+import 'tinymce/plugins/anchor'
+import 'tinymce/plugins/advlist'
+import 'tinymce/plugins/autolink'
+import 'tinymce/plugins/charmap'
+import 'tinymce/plugins/code'
+import 'tinymce/plugins/media'
+import 'tinymce/plugins/visualblocks'
+import 'tinymce/plugins/fullscreen'
+import 'tinymce/plugins/insertdatetime'
+import 'tinymce/plugins/preview'
+import 'tinymce/plugins/help'
+import 'tinymce/plugins/help/js/i18n/keynav/en'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/searchreplace'
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/wordcount'
+
+export default function BundledEditor(props: IAllProps) {
+  return <Editor licenseKey="gpl" {...props} />
+}

src/components/admin/admin-layout.tsx

@@ -0,0 +1,158 @@
+import { Link, useLocation } from '@tanstack/react-router'
+import {
+  FileText,
+  LayoutDashboard,
+  LogOut,
+  Mail,
+  Menu,
+  Settings,
+  X,
+} from 'lucide-react'
+import { useState } from 'react'
+import { cn } from '@lib/utils'
+import { useAuthStore } from '@stores/auth-store'
+import { Button } from '@components/ui/button'
+import { Separator } from '@components/ui/separator'
+import { useLogout } from '@/hooks/use-auth'
+import { useUnreadCount } from '@/hooks/use-messages'
+
+interface AdminLayoutProps {
+  children: React.ReactNode
+}
+
+const navItems = [
+  { to: '/admin', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/admin/articles', icon: FileText, label: 'Articles' },
+  { to: '/admin/messages', icon: Mail, label: 'Messages', showBadge: true },
+  { to: '/admin/settings', icon: Settings, label: 'Settings' },
+]
+
+export function AdminLayout({ children }: AdminLayoutProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const location = useLocation()
+  const { user } = useAuthStore()
+  const logout = useLogout()
+  const { data: unreadData } = useUnreadCount()
+
+  return (
+    <div className="flex min-h-screen bg-background">
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 w-64 transform bg-card border-r transition-transform duration-200 ease-in-out lg:relative lg:translate-x-0',
+          sidebarOpen ? 'translate-x-0' : '-translate-x-full',
+        )}
+      >
+        <div className="flex h-full flex-col">
+          <div className="flex h-16 items-center justify-between px-4">
+            <Link to="/admin" className="flex items-center gap-2">
+              <div className="size-8 rounded-lg bg-primary flex items-center justify-center">
+                <span className="text-primary-foreground font-bold">A</span>
+              </div>
+              <span className="font-semibold">Admin Panel</span>
+            </Link>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="lg:hidden"
+              onClick={() => setSidebarOpen(false)}
+            >
+              <X className="size-5" />
+            </Button>
+          </div>
+
+          <Separator />
+
+          <nav className="flex-1 space-y-1 p-4">
+            {navItems.map((item) => {
+              const isActive =
+                item.to === '/admin'
+                  ? location.pathname === '/admin'
+                  : location.pathname.startsWith(item.to)
+
+              const showBadge =
+                item.showBadge &&
+                unreadData?.unreadCount &&
+                unreadData.unreadCount > 0
+
+              return (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  onClick={() => setSidebarOpen(false)}
+                  className={cn(
+                    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-primary text-primary-foreground'
+                      : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                  )}
+                >
+                  <item.icon className="size-5" />
+                  <span className="flex-1">{item.label}</span>
+                  {showBadge && (
+                    <span
+                      className={cn(
+                        'ml-auto flex size-5 items-center justify-center rounded-full text-xs font-semibold',
+                        isActive
+                          ? 'bg-primary-foreground text-primary'
+                          : 'bg-destructive text-destructive-foreground',
+                      )}
+                    >
+                      {unreadData.unreadCount > 9
+                        ? '9+'
+                        : unreadData.unreadCount}
+                    </span>
+                  )}
+                </Link>
+              )
+            })}
+          </nav>
+
+          <div className="border-t p-4">
+            <div className="flex items-center gap-3 mb-3">
+              <div className="size-10 rounded-full bg-muted flex items-center justify-center">
+                <span className="text-sm font-medium">
+                  {user?.username.charAt(0).toUpperCase() || 'A'}
+                </span>
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate">{user?.username}</p>
+                <p className="text-xs text-muted-foreground">Administrator</p>
+              </div>
+            </div>
+            <Button
+              variant="ghost"
+              className="w-full justify-start text-muted-foreground hover:text-foreground"
+              onClick={() => logout.mutate()}
+              disabled={logout.isPending}
+            >
+              <LogOut className="mr-2 size-4" />
+              Sign Out
+            </Button>
+          </div>
+        </div>
+      </aside>
+
+      <div className="flex flex-1 flex-col">
+        <header className="flex h-16 items-center gap-4 border-b bg-card px-4 lg:hidden">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setSidebarOpen(true)}
+          >
+            <Menu className="size-5" />
+          </Button>
+          <span className="font-semibold">Admin Panel</span>
+        </header>
+
+        <main className="flex-1 overflow-auto p-4 lg:p-6">{children}</main>
+      </div>
+    </div>
+  )
+}

src/components/admin/article-editor.tsx

@@ -0,0 +1,457 @@
+import { useEffect, useRef, useState } from 'react'
+import DOMPurify from 'dompurify'
+import { useNavigate } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { ArrowLeft, Loader2, Save, Trash2, X } from 'lucide-react'
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+import { Textarea } from '@components/ui/textarea'
+import { Switch } from '@components/ui/switch'
+import { Badge } from '@components/ui/badge'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@components/ui/form'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@components/ui/alert-dialog'
+import { Skeleton } from '@components/ui/skeleton'
+import BundledEditor from '../BundledEditor'
+import type { Editor } from 'tinymce'
+import {
+  useAdminArticle,
+  useCreateArticle,
+  useDeleteArticle,
+  useUpdateArticle,
+} from '@/hooks/use-articles'
+
+const articleSchema = z.object({
+  title: z.string().min(1, 'Title is required').max(200, 'Title is too long'),
+  preview: z
+    .string()
+    .min(1, 'Preview is required')
+    .max(500, 'Preview must be 500 characters or less'),
+  content: z.string().min(1, 'Content is required'),
+  coverImage: z
+    .string()
+    .url('Must be a valid URL')
+    .optional()
+    .or(z.literal('')),
+  tags: z.array(z.string()),
+  published: z.boolean(),
+})
+
+type ArticleFormValues = z.infer<typeof articleSchema>
+
+interface ArticleEditorProps {
+  articleId?: string
+}
+
+export function ArticleEditor({ articleId }: ArticleEditorProps) {
+  const navigate = useNavigate()
+  const isEdit = !!articleId
+
+  const { data: article, isLoading } = useAdminArticle(articleId || '')
+  const createArticle = useCreateArticle()
+  const updateArticle = useUpdateArticle(articleId || '')
+  const deleteArticle = useDeleteArticle()
+
+  const [tagInput, setTagInput] = useState('')
+
+  const form = useForm<ArticleFormValues>({
+    resolver: zodResolver(articleSchema),
+    defaultValues: {
+      title: '',
+      preview: '',
+      content: '',
+      coverImage: '',
+      tags: [],
+      published: false,
+    },
+  })
+
+  useEffect(() => {
+    if (article) {
+      const sanitizedContent = DOMPurify.sanitize(article.content)
+      form.reset({
+        title: article.title,
+        preview: article.preview,
+        content: sanitizedContent,
+        coverImage: article.coverImage || '',
+        tags: article.tags,
+        published: article.published,
+      })
+    }
+  }, [article, form])
+
+  const onSubmit = (data: ArticleFormValues) => {
+    const payload = {
+      ...data,
+      coverImage: data.coverImage || undefined,
+    }
+
+    if (isEdit) {
+      updateArticle.mutate(payload, {
+        onSuccess: () => navigate({ to: '/admin/articles' }),
+      })
+    } else {
+      createArticle.mutate(payload, {
+        onSuccess: () => navigate({ to: '/admin/articles' }),
+      })
+    }
+  }
+
+  const handleDelete = () => {
+    if (articleId) {
+      deleteArticle.mutate(articleId, {
+        onSuccess: () => navigate({ to: '/admin/articles' }),
+      })
+    }
+  }
+
+  const handleAddTag = () => {
+    const tag = tagInput.trim().toLowerCase()
+    if (tag && !form.getValues('tags').includes(tag)) {
+      form.setValue('tags', [...form.getValues('tags'), tag])
+      setTagInput('')
+    }
+  }
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    form.setValue(
+      'tags',
+      form.getValues('tags').filter((tag) => tag !== tagToRemove),
+    )
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleAddTag()
+    }
+  }
+
+  const editorRef = useRef<Editor | null>(null)
+  const isPending = createArticle.isPending || updateArticle.isPending
+
+  if (isEdit && isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-10 w-10" />
+          <Skeleton className="h-8 w-48" />
+        </div>
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-48 w-full" />
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate({ to: '/admin/articles' })}
+        >
+          <ArrowLeft className="size-5" />
+        </Button>
+        <div className="flex-1">
+          <h1 className="text-3xl font-bold tracking-tight">
+            {isEdit ? 'Edit Article' : 'New Article'}
+          </h1>
+          <p className="text-muted-foreground">
+            {isEdit ? 'Update your article' : 'Create a new blog post'}
+          </p>
+        </div>
+        {isEdit && (
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive" size="sm">
+                <Trash2 className="mr-2 size-4" />
+                Delete
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Delete Article</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Are you sure you want to delete this article? This action
+                  cannot be undone.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleDelete}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                >
+                  Delete
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        )}
+      </div>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <div className="grid gap-6 lg:grid-cols-3">
+            <div className="lg:col-span-2 space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Content</CardTitle>
+                  <CardDescription>Write your article content</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="title"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Title</FormLabel>
+                        <FormControl>
+                          <Input placeholder="Article title" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="preview"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Preview</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder="Short preview text (max 500 characters)"
+                            className="resize-none"
+                            rows={3}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormDescription>
+                          {field.value.length}/500 characters
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="content"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Content</FormLabel>
+                        <FormControl>
+                          <BundledEditor
+                            value={field.value}
+                            onEditorChange={(value) =>
+                              field.onChange(DOMPurify.sanitize(value))
+                            }
+                            onBlur={field.onBlur}
+                            onInit={(_evt, editor) =>
+                              (editorRef.current = editor)
+                            }
+                            init={{
+                              height: 500,
+                              menubar: true,
+                              plugins: [
+                                'advlist',
+                                'autolink',
+                                'lists',
+                                'link',
+                                'image',
+                                'charmap',
+                                'anchor',
+                                'searchreplace',
+                                'visualblocks',
+                                'code',
+                                'fullscreen',
+                                'insertdatetime',
+                                'media',
+                                'table',
+                                'preview',
+                                'help',
+                                'wordcount',
+                              ],
+                              toolbar:
+                                'undo redo | blocks | ' +
+                                'bold italic forecolor | alignleft aligncenter ' +
+                                'alignright alignjustify | bullist numlist outdent indent | ' +
+                                'removeformat | help',
+                              content_style:
+                                'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Publishing</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="published"
+                    render={({ field }) => (
+                      <FormItem className="flex items-center justify-between rounded-lg border p-3">
+                        <div className="space-y-0.5">
+                          <FormLabel className="text-base">Published</FormLabel>
+                          <FormDescription>
+                            Make this article visible to the public
+                          </FormDescription>
+                        </div>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <Button type="submit" className="w-full" disabled={isPending}>
+                    {isPending && (
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                    )}
+                    <Save className="mr-2 size-4" />
+                    {isEdit ? 'Save Changes' : 'Create Article'}
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>Cover Image</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <FormField
+                    control={form.control}
+                    name="coverImage"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormControl>
+                          <Input placeholder="https://..." {...field} />
+                        </FormControl>
+                        <FormDescription>
+                          URL to the cover image (optional)
+                        </FormDescription>
+                        <FormMessage />
+                        {field.value && (
+                          <img
+                            src={field.value}
+                            alt="Cover preview"
+                            className="mt-2 rounded-lg object-cover w-full aspect-video"
+                            onError={(e) => {
+                              e.currentTarget.style.display = 'none'
+                            }}
+                          />
+                        )}
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>Tags</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="flex gap-2">
+                    <Input
+                      placeholder="Add a tag"
+                      value={tagInput}
+                      onChange={(e) => setTagInput(e.target.value)}
+                      onKeyDown={handleKeyDown}
+                    />
+                    <Button
+                      type="button"
+                      onClick={handleAddTag}
+                      variant="secondary"
+                    >
+                      Add
+                    </Button>
+                  </div>
+                  <FormField
+                    control={form.control}
+                    name="tags"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="flex flex-wrap gap-2">
+                          {field.value.map((tag) => (
+                            <Badge
+                              key={tag}
+                              variant="secondary"
+                              className="gap-1"
+                            >
+                              {tag}
+                              <button
+                                type="button"
+                                onClick={() => handleRemoveTag(tag)}
+                                className="ml-1 hover:text-destructive"
+                              >
+                                <X className="size-3" />
+                              </button>
+                            </Badge>
+                          ))}
+                        </div>
+                        {field.value.length === 0 && (
+                          <p className="text-sm text-muted-foreground">
+                            No tags added yet
+                          </p>
+                        )}
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </form>
+      </Form>
+    </div>
+  )
+}

src/components/language-switcher.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { Languages } from 'lucide-react'
+import { Button } from '@components/ui/button'
+import { config } from '@lib/config'
+import type { SupportedLanguage } from '@lib/config'
+import type { FC } from 'react'
+
+const languageNames: Record<SupportedLanguage, string> = {
+  en: 'EN',
+  ru: 'RU',
+}
+
+export const LanguageSwitcher: FC = () => {
+  const { i18n, t } = useTranslation()
+
+  const cycleLanguage = () => {
+    const currentIndex = config.supportedLanguages.indexOf(
+      i18n.language as SupportedLanguage,
+    )
+    const nextIndex = (currentIndex + 1) % config.supportedLanguages.length
+    i18n.changeLanguage(config.supportedLanguages[nextIndex])
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={cycleLanguage}
+      title={t('common.language')}
+      className="h-9 gap-1.5 px-2"
+    >
+      <Languages className="h-4 w-4" />
+      <span className="text-xs font-medium">
+        {languageNames[i18n.language as SupportedLanguage]}
+      </span>
+    </Button>
+  )
+}

src/components/navigation.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { Menu, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { LanguageSwitcher } from '@components/language-switcher'
+import { ThemeToggle } from '@components/theme-toggle'
+import { Button } from '@components/ui/button'
+import type { FC } from 'react'
+
+const navItems = [
+  { key: 'about', href: 'about' },
+  { key: 'experience', href: 'experience' },
+  { key: 'skills', href: 'skills' },
+  { key: 'contact', href: 'contact' },
+] as const
+
+export const Navigation: FC = () => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const closeMenu = () => setIsOpen(false)
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 bg-background/80 backdrop-blur-md">
+      <nav className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <Link
+          to="/"
+          className="text-lg font-semibold tracking-tight transition-colors hover:text-primary"
+        >
+          Alricade
+        </Link>
+
+        <div className="hidden items-center gap-1 md:flex">
+          {navItems.map((item) => (
+            <Link
+              key={item.key}
+              to="/"
+              hash={item.href}
+              className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              {t(`common.${item.key}`)}
+            </Link>
+          ))}
+          {/* <Link
+            to="/blog"
+            className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          >
+            {t('common.blog')}
+          </Link> */}
+        </div>
+
+        <div className="flex items-center gap-1">
+          <LanguageSwitcher />
+          <ThemeToggle />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="md:hidden"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle menu"
+          >
+            {isOpen ? <X className="size-5" /> : <Menu className="size-5" />}
+          </Button>
+        </div>
+      </nav>
+
+      {isOpen && (
+        <div className="border-t border-border/40 bg-background/95 backdrop-blur-md md:hidden">
+          <div className="flex flex-col px-6 py-4">
+            {navItems.map((item) => (
+              <Link
+                key={item.key}
+                to="/"
+                hash={item.href}
+                onClick={closeMenu}
+                className="rounded-md px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                {t(`common.${item.key}`)}
+              </Link>
+            ))}
+            {/* <Link
+              to="/blog"
+              onClick={closeMenu}
+              className="rounded-md px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              {t('common.blog')}
+            </Link> */}
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}

src/components/protected-route.tsx

@@ -0,0 +1,35 @@
+import { Navigate, useLocation } from '@tanstack/react-router'
+import { Loader2 } from 'lucide-react'
+import { useAuthStore } from '@stores/auth-store'
+import { useAuthCheck, useAuthStatus } from '@/hooks/use-auth'
+
+interface ProtectedRouteProps {
+  children: React.ReactNode
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const location = useLocation()
+  const { isAuthenticated, needsSetup, isLoading } = useAuthStore()
+  const { isLoading: isStatusLoading } = useAuthStatus()
+  const { isLoading: isCheckLoading, isError } = useAuthCheck()
+
+  const loading = isLoading || isStatusLoading || isCheckLoading
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Loader2 className="size-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (needsSetup) {
+    return <Navigate to="/setup" />
+  }
+
+  if (!isAuthenticated || isError) {
+    return <Navigate to="/login" search={{ redirect: location.pathname }} />
+  }
+
+  return <>{children}</>
+}

src/components/sections/about-section.tsx

@@ -0,0 +1,58 @@
+import { useTranslation } from 'react-i18next'
+import { Code2, Palette, Zap } from 'lucide-react'
+import type { FC } from 'react'
+
+const highlights = [
+  { icon: Code2, key: 'clean' },
+  { icon: Palette, key: 'design' },
+  { icon: Zap, key: 'performance' },
+] as const
+
+export const AboutSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section id="about" className="scroll-mt-20 px-6 py-24">
+      <div className="mx-auto max-w-4xl">
+        <header className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {t('about.title')}
+          </h2>
+          <p className="mt-2 text-muted-foreground">{t('about.subtitle')}</p>
+        </header>
+
+        <div className="mt-12 grid gap-8 md:grid-cols-2">
+          <article className="space-y-4">
+            <p className="leading-relaxed text-muted-foreground">
+              {t('about.description')}
+            </p>
+            <p className="leading-relaxed text-muted-foreground">
+              {t('about.paragraph2')}
+            </p>
+          </article>
+
+          <aside className="space-y-4">
+            {highlights.map(({ icon: Icon, key }) => (
+              <div
+                key={key}
+                className="flex items-start gap-4 rounded-lg border border-border/50 bg-card p-4 transition-colors hover:border-primary/30"
+              >
+                <div className="rounded-md bg-primary/10 p-2 text-primary">
+                  <Icon className="h-5 w-5" />
+                </div>
+                <div>
+                  <h3 className="font-medium">
+                    {t(`about.highlights.${key}.title`)}
+                  </h3>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {t(`about.highlights.${key}.description`)}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </aside>
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/sections/contact-section.tsx

@@ -0,0 +1,256 @@
+import { CheckCircle, Loader2, Mail } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { useMemo } from 'react'
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+import { Textarea } from '@components/ui/textarea'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@components/ui/form'
+import { SOCIAL_LINKS } from '@lib/constants'
+import type { FC } from 'react'
+import type { TFunction } from 'i18next'
+import { useSubmitMessage } from '@/hooks/use-messages'
+
+const createContactSchema = (t: TFunction) =>
+  z.object({
+    name: z
+      .string()
+      .min(1, t('contact.validation.nameRequired'))
+      .max(100, t('contact.validation.nameTooLong')),
+    email: z
+      .string()
+      .min(1, t('contact.validation.emailRequired'))
+      .email(t('contact.validation.emailInvalid')),
+    subject: z
+      .string()
+      .max(200, t('contact.validation.subjectTooLong'))
+      .optional(),
+    message: z
+      .string()
+      .min(1, t('contact.validation.messageRequired'))
+      .max(5000, t('contact.validation.messageTooLong')),
+  })
+
+type ContactFormValues = z.infer<ReturnType<typeof createContactSchema>>
+
+export const ContactSection: FC = () => {
+  const { t } = useTranslation()
+  const submitMessage = useSubmitMessage()
+
+  const contactSchema = useMemo(() => createContactSchema(t), [t])
+
+  const form = useForm<ContactFormValues>({
+    resolver: zodResolver(contactSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      subject: '',
+      message: '',
+    },
+  })
+
+  const onSubmit = (data: ContactFormValues) => {
+    submitMessage.mutate(data, {
+      onSuccess: () => {
+        form.reset()
+      },
+    })
+  }
+
+  return (
+    <section id="contact" className="scroll-mt-20 bg-muted/30 px-6 py-24">
+      <div className="mx-auto max-w-4xl">
+        <header className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {t('contact.title')}
+          </h2>
+          <p className="mt-2 text-muted-foreground">{t('contact.subtitle')}</p>
+        </header>
+
+        <div className="mt-12 grid gap-12 lg:grid-cols-2">
+          <div className="rounded-xl border bg-card p-6">
+            {submitMessage.isSuccess ? (
+              <div className="flex flex-col items-center justify-center py-8 text-center">
+                <CheckCircle className="size-12 text-green-500 mb-4" />
+                <h3 className="text-xl font-semibold mb-2">
+                  {t('contact.success.title', 'Message Sent!')}
+                </h3>
+                <p className="text-muted-foreground mb-4">
+                  {t(
+                    'contact.success.message',
+                    "Thank you for reaching out. I'll get back to you soon!",
+                  )}
+                </p>
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    submitMessage.reset()
+                    form.reset()
+                  }}
+                >
+                  {t('contact.success.sendAnother', 'Send Another Message')}
+                </Button>
+              </div>
+            ) : (
+              <Form {...form}>
+                <form
+                  onSubmit={form.handleSubmit(onSubmit)}
+                  className="space-y-4"
+                >
+                  <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          {t('contact.form.name', 'Name')} *
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={t(
+                              'contact.form.namePlaceholder',
+                              'Your name',
+                            )}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          {t('contact.form.email', 'Email')} *
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            type="email"
+                            placeholder={t(
+                              'contact.form.emailPlaceholder',
+                              'your@email.com',
+                            )}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="subject"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          {t('contact.form.subject', 'Subject')}
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={t(
+                              'contact.form.subjectPlaceholder',
+                              'What is this about?',
+                            )}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="message"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          {t('contact.form.message', 'Message')} *
+                        </FormLabel>
+                        <FormControl>
+                          <Textarea
+                            placeholder={t(
+                              'contact.form.messagePlaceholder',
+                              'Your message...',
+                            )}
+                            rows={5}
+                            className="resize-none"
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <Button
+                    type="submit"
+                    className="w-full"
+                    disabled={submitMessage.isPending}
+                  >
+                    {submitMessage.isPending ? (
+                      <>
+                        <Loader2 className="mr-2 size-4 animate-spin" />
+                        {t('contact.form.sending', 'Sending...')}
+                      </>
+                    ) : (
+                      <>
+                        <Mail className="mr-2 size-4" />
+                        {t('contact.form.submit', 'Send Message')}
+                      </>
+                    )}
+                  </Button>
+                </form>
+              </Form>
+            )}
+          </div>
+
+          <div className="flex flex-col justify-center">
+            <h3 className="text-xl font-semibold mb-4">
+              {t('contact.info.title', "Let's Connect")}
+            </h3>
+            <p className="text-muted-foreground mb-6">
+              {t(
+                'contact.info.description',
+                "Feel free to reach out through the form or connect with me on social media. I'm always open to discussing new projects, creative ideas, or opportunities.",
+              )}
+            </p>
+
+            <div className="space-y-4">
+              <p className="text-sm text-muted-foreground">
+                {t('contact.or', 'Or find me on social media')}
+              </p>
+              <nav
+                className="flex items-center gap-4"
+                aria-label="Social links"
+              >
+                {SOCIAL_LINKS.map((link) => (
+                  <a
+                    key={link.label}
+                    href={link.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rounded-full border border-border/50 p-3 text-muted-foreground transition-all hover:border-primary/30 hover:bg-accent hover:text-foreground"
+                    aria-label={link.label}
+                  >
+                    <link.icon className="h-5 w-5" />
+                  </a>
+                ))}
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/sections/experience-section.tsx

@@ -0,0 +1,108 @@
+import { useTranslation } from 'react-i18next'
+import { Briefcase, GraduationCap } from 'lucide-react'
+import type { FC } from 'react'
+
+interface ExperienceItem {
+  id: string
+  titleKey: string
+  companyKey: string
+  periodKey: string
+  descriptionKey: string
+}
+
+const workExperience: Array<ExperienceItem> = [
+  {
+    id: 'work-1',
+    titleKey: 'experience.items.work1.title',
+    companyKey: 'experience.items.work1.company',
+    periodKey: 'experience.items.work1.period',
+    descriptionKey: 'experience.items.work1.description',
+  },
+  {
+    id: 'work-2',
+    titleKey: 'experience.items.work2.title',
+    companyKey: 'experience.items.work2.company',
+    periodKey: 'experience.items.work2.period',
+    descriptionKey: 'experience.items.work2.description',
+  },
+]
+
+const education: Array<ExperienceItem> = [
+  {
+    id: 'edu-1',
+    titleKey: 'experience.items.edu1.title',
+    companyKey: 'experience.items.edu1.company',
+    periodKey: 'experience.items.edu1.period',
+    descriptionKey: 'experience.items.edu1.description',
+  },
+]
+
+interface TimelineItemProps {
+  item: ExperienceItem
+  t: (key: string) => string
+}
+
+const TimelineItem: FC<TimelineItemProps> = ({ item, t }) => {
+  return (
+    <article className="relative pl-8 pb-8 last:pb-0">
+      <div className="absolute left-0 top-0 h-full w-px bg-border">
+        <div className="absolute -left-1 top-1 h-2.5 w-2.5 rounded-full border-2 border-primary bg-background" />
+      </div>
+      <div className="space-y-1">
+        <h4 className="font-semibold">{t(item.titleKey)}</h4>
+        <p className="text-sm text-primary">{t(item.companyKey)}</p>
+        <p className="text-xs text-muted-foreground">{t(item.periodKey)}</p>
+        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+          {t(item.descriptionKey)}
+        </p>
+      </div>
+    </article>
+  )
+}
+
+export const ExperienceSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section id="experience" className="scroll-mt-20 bg-muted/30 px-6 py-24">
+      <div className="mx-auto max-w-4xl">
+        <header className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {t('experience.title')}
+          </h2>
+          <p className="mt-2 text-muted-foreground">
+            {t('experience.subtitle')}
+          </p>
+        </header>
+
+        <div className="mt-12 grid gap-12 md:grid-cols-2">
+          <div>
+            <div className="mb-6 flex items-center gap-2">
+              <Briefcase className="h-5 w-5 text-primary" />
+              <h3 className="text-lg font-semibold">{t('experience.work')}</h3>
+            </div>
+            <div>
+              {workExperience.map((item) => (
+                <TimelineItem key={item.id} item={item} t={t} />
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <div className="mb-6 flex items-center gap-2">
+              <GraduationCap className="h-5 w-5 text-primary" />
+              <h3 className="text-lg font-semibold">
+                {t('experience.education')}
+              </h3>
+            </div>
+            <div>
+              {education.map((item) => (
+                <TimelineItem key={item.id} item={item} t={t} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/sections/footer.tsx

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next'
+import { Heart } from 'lucide-react'
+import type { FC } from 'react'
+
+export const Footer: FC = () => {
+  const { t } = useTranslation()
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer className="border-t border-border/40 px-6 py-8">
+      <div className="mx-auto flex max-w-4xl flex-col items-center justify-between gap-4 text-center text-sm text-muted-foreground sm:flex-row sm:text-left">
+        <p>
+          © {currentYear} Alricade. {t('footer.rights')}
+        </p>
+        <p className="flex items-center gap-1">
+          {t('footer.madeWith')} <Heart className="h-4 w-4 text-primary" />{' '}
+          React & TypeScript
+        </p>
+      </div>
+    </footer>
+  )
+}

src/components/sections/hero-section.tsx

@@ -0,0 +1,74 @@
+import { ArrowDown } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@components/ui/button'
+import { SOCIAL_LINKS } from '@lib/constants'
+import type { FC } from 'react'
+
+export const HeroSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section className="relative flex min-h-svh items-center justify-center px-6 pb-16 pt-20">
+      <div className="mx-auto max-w-4xl text-center">
+        <div className="animate-fade-in">
+          <span className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-sm text-primary">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
+            {t('hero.available')}
+          </span>
+        </div>
+
+        <h1 className="animate-fade-in-up mt-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
+          <span className="text-muted-foreground">{t('hero.greeting')}</span>
+          <br />
+          <span className="bg-linear-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent">
+            {t('hero.name')}
+          </span>
+        </h1>
+
+        <p className="animate-fade-in-up animation-delay-100 mt-4 text-xl font-medium text-muted-foreground sm:text-2xl">
+          {t('hero.title')}
+        </p>
+
+        <p className="animate-fade-in-up animation-delay-200 mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground/80 sm:text-lg">
+          {t('hero.description')}
+        </p>
+
+        <div className="animate-fade-in-up animation-delay-300 mt-10 flex flex-wrap items-center justify-center gap-4">
+          <Button size="lg" asChild>
+            <a href="#contact">{t('common.getInTouch')}</a>
+          </Button>
+          <Button variant="outline" size="lg" asChild>
+            <a href="#about">{t('hero.cta')}</a>
+          </Button>
+        </div>
+
+        <div className="animate-fade-in-up animation-delay-400 mt-8 flex items-center justify-center gap-4 sm:mt-12">
+          {SOCIAL_LINKS.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              target={link.href.startsWith('mailto:') ? undefined : '_blank'}
+              rel={
+                link.href.startsWith('mailto:')
+                  ? undefined
+                  : 'noopener noreferrer'
+              }
+              className="rounded-full p-3 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              aria-label={link.label}
+            >
+              <link.icon className="h-5 w-5" />
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <a
+        href="#about"
+        className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-muted-foreground transition-colors hover:text-foreground"
+        aria-label="Scroll to about section"
+      >
+        <ArrowDown className="h-6 w-6" />
+      </a>
+    </section>
+  )
+}

src/components/sections/skills-section.tsx

@@ -0,0 +1,115 @@
+import {
+  Atom,
+  ClipboardList,
+  Code2,
+  Container,
+  Database,
+  Figma,
+  FileCode2,
+  FileType,
+  GitBranch,
+  GitMerge,
+  Globe,
+  Hexagon,
+  Layers,
+  Link,
+  MousePointer2,
+  Palette,
+  Terminal,
+  Triangle,
+  Wind,
+  Zap,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import type { LucideIcon } from 'lucide-react'
+import type { FC } from 'react'
+
+interface Skill {
+  name: string
+  icon: LucideIcon
+}
+
+interface SkillCategory {
+  key: string
+  skills: Array<Skill>
+}
+
+const skillCategories: Array<SkillCategory> = [
+  {
+    key: 'frontend',
+    skills: [
+      { name: 'React', icon: Atom },
+      { name: 'Vue', icon: Triangle },
+      { name: 'Next.js', icon: Triangle },
+      { name: 'Nuxt', icon: Hexagon },
+      { name: 'TypeScript', icon: FileCode2 },
+      { name: 'JavaScript', icon: Code2 },
+      { name: 'Tailwind CSS', icon: Palette },
+      { name: 'SCSS', icon: FileType },
+      { name: 'CSS', icon: Palette },
+      { name: 'HTML', icon: Globe },
+    ],
+  },
+  {
+    key: 'backend',
+    skills: [
+      { name: 'Node.js', icon: Hexagon },
+      { name: 'Express', icon: Zap },
+      { name: 'NestJS', icon: Layers },
+      { name: 'PostgreSQL', icon: Database },
+      { name: 'REST API', icon: Link },
+      { name: 'Prisma', icon: Layers },
+    ],
+  },
+  {
+    key: 'tools',
+    skills: [
+      { name: 'Git', icon: GitBranch },
+      { name: 'GitLab CI/CD', icon: GitMerge },
+      { name: 'Docker', icon: Container },
+      { name: 'Figma', icon: Figma },
+      { name: 'Jira', icon: ClipboardList },
+      { name: 'Linux', icon: Terminal },
+      { name: 'Windsurf', icon: Wind },
+      { name: 'Cursor', icon: MousePointer2 },
+    ],
+  },
+]
+
+export const SkillsSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section id="skills" className="scroll-mt-20 px-6 py-24">
+      <div className="mx-auto max-w-4xl">
+        <header className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {t('skills.title')}
+          </h2>
+          <p className="mt-2 text-muted-foreground">{t('skills.subtitle')}</p>
+        </header>
+
+        <div className="mt-12 grid gap-8 md:grid-cols-3">
+          {skillCategories.map((category) => (
+            <article key={category.key} className="space-y-4">
+              <h3 className="text-center text-lg font-semibold">
+                {t(`skills.${category.key}`)}
+              </h3>
+              <ul className="grid grid-cols-2 gap-3">
+                {category.skills.map((skill) => (
+                  <li
+                    key={skill.name}
+                    className="flex items-center gap-2 rounded-lg border border-border/50 bg-card px-3 py-2 text-sm transition-all hover:border-primary/30 hover:shadow-sm"
+                  >
+                    <skill.icon className="size-4" />
+                    <span>{skill.name}</span>
+                  </li>
+                ))}
+              </ul>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/theme-toggle.tsx

@@ -0,0 +1,37 @@
+import { Moon, Sun } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@components/ui/button'
+import { useThemeStore } from '@stores/theme-store'
+import type { Theme } from '@lib/config'
+import type { FC } from 'react'
+
+const themes: Array<{ value: Theme; icon: typeof Sun }> = [
+  { value: 'light', icon: Sun },
+  { value: 'dark', icon: Moon },
+]
+
+export const ThemeToggle: FC = () => {
+  const { t } = useTranslation()
+  const { theme, setTheme } = useThemeStore()
+
+  const cycleTheme = () => {
+    const currentIndex = themes.findIndex((item) => item.value === theme)
+    const nextIndex = (currentIndex + 1) % themes.length
+    setTheme(themes[nextIndex].value)
+  }
+
+  const CurrentIcon = themes.find((item) => item.value === theme)?.icon ?? Sun
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={cycleTheme}
+      title={t('common.theme')}
+      className="h-9 w-9"
+    >
+      <CurrentIcon className="h-4 w-4" />
+      <span className="sr-only">{t('common.theme')}</span>
+    </Button>
+  )
+}

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,194 @@
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: 'default' | 'sm'
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { cn } from '@/lib/utils'
+
+function Avatar({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: 'default' | 'sm' | 'lg'
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        'group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        '*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

src/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 [a&]:hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

src/components/ui/form.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { Controller, FormProvider, useFormContext } from 'react-hook-form'
+import { cn } from '@lib/utils'
+import { Label } from '@components/ui/label'
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form'
+import type * as LabelPrimitive from '@radix-ui/react-label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      id={formMessageId}
+      className={cn('text-destructive text-sm font-medium', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import { cn } from '@/lib/utils'
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/components/ui/switch.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+function Switch({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './use-auth'
+export * from './use-articles'
+export * from './use-debounce'
+export * from './use-messages'

src/hooks/use-articles.ts

@@ -0,0 +1,120 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { articlesApi } from '@api/articles'
+import type {
+  ArticleFilters,
+  CreateArticleData,
+  UpdateArticleData,
+} from '@api/articles'
+
+export const articleKeys = {
+  all: ['articles'] as const,
+  lists: () => [...articleKeys.all, 'list'] as const,
+  list: (filters?: ArticleFilters) =>
+    [...articleKeys.lists(), filters] as const,
+  adminLists: () => [...articleKeys.all, 'admin', 'list'] as const,
+  adminList: (filters?: ArticleFilters) =>
+    [...articleKeys.adminLists(), filters] as const,
+  details: () => [...articleKeys.all, 'detail'] as const,
+  detail: (id: string) => [...articleKeys.details(), id] as const,
+  adminDetail: (id: string) =>
+    [...articleKeys.all, 'admin', 'detail', id] as const,
+  tags: () => [...articleKeys.all, 'tags'] as const,
+}
+
+export function useArticles(filters?: ArticleFilters) {
+  return useQuery({
+    queryKey: articleKeys.list(filters),
+    queryFn: () => articlesApi.getAll(filters),
+  })
+}
+
+export function useAdminArticles(filters?: ArticleFilters) {
+  return useQuery({
+    queryKey: articleKeys.adminList(filters),
+    queryFn: () => articlesApi.getAllAdmin(filters),
+  })
+}
+
+export function useArticle(id: string) {
+  return useQuery({
+    queryKey: articleKeys.detail(id),
+    queryFn: () => articlesApi.getById(id),
+    enabled: !!id,
+  })
+}
+
+export function useAdminArticle(id: string) {
+  return useQuery({
+    queryKey: articleKeys.adminDetail(id),
+    queryFn: () => articlesApi.getByIdAdmin(id),
+    enabled: !!id,
+  })
+}
+
+export function useArticleTags() {
+  return useQuery({
+    queryKey: articleKeys.tags(),
+    queryFn: () => articlesApi.getTags(),
+  })
+}
+
+export function useCreateArticle() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (data: CreateArticleData) => articlesApi.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: articleKeys.all })
+      toast.success('Article created successfully')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to create article')
+    },
+  })
+}
+
+export function useUpdateArticle(id: string) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (data: UpdateArticleData) => articlesApi.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: articleKeys.all })
+      toast.success('Article updated successfully')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to update article')
+    },
+  })
+}
+
+export function useDeleteArticle() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (id: string) => articlesApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: articleKeys.all })
+      toast.success('Article deleted successfully')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to delete article')
+    },
+  })
+}
+
+export function useTogglePublish(id: string) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (published: boolean) => articlesApi.update(id, { published }),
+    onSuccess: (_, published) => {
+      queryClient.invalidateQueries({ queryKey: articleKeys.all })
+      toast.success(published ? 'Article published' : 'Article unpublished')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to update article')
+    },
+  })
+}

src/hooks/use-auth.ts

@@ -0,0 +1,112 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { authApi } from '@api/auth'
+import { useAuthStore } from '@stores/auth-store'
+import type { ChangePasswordData, LoginCredentials } from '@api/auth'
+
+export const authKeys = {
+  all: ['auth'] as const,
+  status: () => [...authKeys.all, 'status'] as const,
+  check: () => [...authKeys.all, 'check'] as const,
+}
+
+export function useAuthStatus() {
+  const { setNeedsSetup, setIsLoading } = useAuthStore()
+
+  return useQuery({
+    queryKey: authKeys.status(),
+    queryFn: async () => {
+      const status = await authApi.getStatus()
+      setNeedsSetup(status.needsSetup)
+      setIsLoading(false)
+      return status
+    },
+    staleTime: 1000 * 60 * 5,
+  })
+}
+
+export function useAuthCheck() {
+  const { setUser } = useAuthStore()
+
+  return useQuery({
+    queryKey: authKeys.check(),
+    queryFn: async () => {
+      const response = await authApi.check()
+      setUser(response.user)
+      return response
+    },
+    retry: false,
+    staleTime: 1000 * 60 * 5,
+  })
+}
+
+export function useLogin() {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  const { setUser } = useAuthStore()
+
+  return useMutation({
+    mutationFn: (data: LoginCredentials) => authApi.login(data),
+    onSuccess: (response) => {
+      setUser(response.user)
+      queryClient.invalidateQueries({ queryKey: authKeys.all })
+      toast.success('Login successful')
+      navigate({ to: '/admin' })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Login failed')
+    },
+  })
+}
+
+export function useSetup() {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  const { setUser, setNeedsSetup } = useAuthStore()
+
+  return useMutation({
+    mutationFn: (data: LoginCredentials) => authApi.setup(data),
+    onSuccess: (response) => {
+      setUser(response.user)
+      setNeedsSetup(false)
+      queryClient.invalidateQueries({ queryKey: authKeys.all })
+      toast.success('Setup complete')
+      navigate({ to: '/admin' })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Setup failed')
+    },
+  })
+}
+
+export function useLogout() {
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+  const { reset } = useAuthStore()
+
+  return useMutation({
+    mutationFn: () => authApi.logout(),
+    onSuccess: () => {
+      reset()
+      queryClient.clear()
+      toast.success('Logged out')
+      navigate({ to: '/login' })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Logout failed')
+    },
+  })
+}
+
+export function useChangePassword() {
+  return useMutation({
+    mutationFn: (data: ChangePasswordData) => authApi.changePassword(data),
+    onSuccess: () => {
+      toast.success('Password changed successfully')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to change password')
+    },
+  })
+}

src/hooks/use-debounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

src/hooks/use-messages.ts

@@ -0,0 +1,101 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { messagesApi } from '@api/messages'
+import type { CreateMessageData, MessagesFilters } from '@api/messages'
+
+export const messageKeys = {
+  all: ['messages'] as const,
+  lists: () => [...messageKeys.all, 'list'] as const,
+  list: (filters?: MessagesFilters) =>
+    [...messageKeys.lists(), filters] as const,
+  details: () => [...messageKeys.all, 'detail'] as const,
+  detail: (id: string) => [...messageKeys.details(), id] as const,
+  unreadCount: () => [...messageKeys.all, 'unreadCount'] as const,
+}
+
+export function useMessages(filters?: MessagesFilters) {
+  return useQuery({
+    queryKey: messageKeys.list(filters),
+    queryFn: () => messagesApi.getAll(filters),
+  })
+}
+
+export function useMessage(id: string) {
+  const queryClient = useQueryClient()
+
+  return useQuery({
+    queryKey: messageKeys.detail(id),
+    queryFn: async () => {
+      const message = await messagesApi.getById(id)
+      queryClient.invalidateQueries({ queryKey: messageKeys.lists() })
+      queryClient.invalidateQueries({ queryKey: messageKeys.unreadCount() })
+      return message
+    },
+    enabled: !!id,
+  })
+}
+
+export function useUnreadCount() {
+  return useQuery({
+    queryKey: messageKeys.unreadCount(),
+    queryFn: () => messagesApi.getUnreadCount(),
+    refetchInterval: 30000,
+  })
+}
+
+export function useSubmitMessage() {
+  return useMutation({
+    mutationFn: (data: CreateMessageData) => messagesApi.submit(data),
+    onSuccess: () => {
+      toast.success('Message sent successfully!')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to send message')
+    },
+  })
+}
+
+export function useMarkAsRead() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (id: string) => messagesApi.markAsRead(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: messageKeys.all })
+      toast.success('Marked as read')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to mark as read')
+    },
+  })
+}
+
+export function useMarkAsUnread() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (id: string) => messagesApi.markAsUnread(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: messageKeys.all })
+      toast.success('Marked as unread')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to mark as unread')
+    },
+  })
+}
+
+export function useDeleteMessage() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (id: string) => messagesApi.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: messageKeys.all })
+      toast.success('Message deleted')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to delete message')
+    },
+  })
+}

src/lib/config.ts

@@ -0,0 +1,8 @@
+export const config = {
+  defaultLanguage: 'en',
+  defaultTheme: 'dark' as 'light' | 'dark' | 'system',
+  supportedLanguages: ['en', 'ru'] as const,
+}
+
+export type SupportedLanguage = (typeof config.supportedLanguages)[number]
+export type Theme = 'light' | 'dark' | 'system'

src/lib/constants.ts

@@ -0,0 +1,29 @@
+import { Briefcase, Github, Linkedin, Send } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+export interface SocialLink {
+  icon: LucideIcon
+  href: string
+  label: string
+}
+
+export const SOCIAL_LINKS: Array<SocialLink> = [
+  {
+    icon: Github,
+    href: 'https://github.com/altricade',
+    label: 'GitHub',
+  },
+  {
+    icon: Linkedin,
+    href: 'https://www.linkedin.com/in/altricade/',
+    label: 'LinkedIn',
+  },
+  {
+    icon: Briefcase,
+    href: 'https://nizhny-tagil.hh.ru/resume/df78aefbff0be340910039ed1f46394f7a3157',
+    label: 'HeadHunter',
+  },
+  { icon: Send, href: 'https://t.me/altricade', label: 'Telegram' },
+]
+
+export const CONTACT_EMAIL = 'omar.m.zaid@hotmail.com'

src/lib/i18n.ts

@@ -0,0 +1,31 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { config } from '@lib/config'
+
+import en from '@/locales/en.json'
+import ru from '@/locales/ru.json'
+
+const resources = {
+  en: { translation: en },
+  ru: { translation: ru },
+}
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: config.defaultLanguage,
+    supportedLngs: config.supportedLanguages,
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+      lookupLocalStorage: 'language',
+    },
+  })
+
+export default i18n

src/lib/query-client.ts

@@ -0,0 +1,18 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5,
+      retry: (failureCount, error) => {
+        if (error instanceof Error && error.message === 'Session expired') {
+          return false
+        }
+        return failureCount < 3
+      },
+    },
+    mutations: {
+      retry: false,
+    },
+  },
+})

src/lib/use-app-search-params.ts

@@ -0,0 +1,102 @@
+import { useCallback, useMemo } from 'react'
+import { useLocation, useRouter } from '@tanstack/react-router'
+
+export const useAppSearchParams = () => {
+  const location = useLocation()
+  const router = useRouter()
+
+  const searchParams = useMemo(() => {
+    return new URLSearchParams(location.searchStr)
+  }, [location.searchStr])
+
+  const getParam = useCallback(
+    (key: string): string | null => {
+      return searchParams.get(key)
+    },
+    [searchParams],
+  )
+
+  const getAllParams = useCallback((): Record<string, string> => {
+    const params: Record<string, string> = {}
+    searchParams.forEach((value, key) => {
+      params[key] = value
+    })
+    return params
+  }, [searchParams])
+
+  const setParam = useCallback(
+    (key: string, value: string) => {
+      const newParams = new URLSearchParams(searchParams)
+      if (value === '') {
+        newParams.delete(key)
+      } else {
+        newParams.set(key, value)
+      }
+      router.navigate({
+        to: location.pathname,
+        search: Object.fromEntries(newParams),
+      })
+    },
+    [searchParams, router, location.pathname],
+  )
+
+  const setParams = useCallback(
+    (params: Record<string, string>) => {
+      const newParams = new URLSearchParams(searchParams)
+      Object.entries(params).forEach(([key, value]) => {
+        if (value === '') {
+          newParams.delete(key)
+        } else {
+          newParams.set(key, value)
+        }
+      })
+      router.navigate({
+        to: location.pathname,
+        search: Object.fromEntries(newParams),
+      })
+    },
+    [searchParams, router, location.pathname],
+  )
+
+  const deleteParam = useCallback(
+    (key: string) => {
+      const newParams = new URLSearchParams(searchParams)
+      newParams.delete(key)
+      router.navigate({
+        to: location.pathname,
+        search: Object.fromEntries(newParams),
+      })
+    },
+    [searchParams, router, location.pathname],
+  )
+
+  const deleteParams = useCallback(
+    (keys: Array<string>) => {
+      const newParams = new URLSearchParams(searchParams)
+      keys.forEach((key) => newParams.delete(key))
+      router.navigate({
+        to: location.pathname,
+        search: Object.fromEntries(newParams),
+      })
+    },
+    [searchParams, router, location.pathname],
+  )
+
+  const deleteAllParams = useCallback(() => {
+    router.navigate({
+      to: location.pathname,
+      search: {},
+    })
+  }, [router, location.pathname])
+
+  return {
+    searchParams,
+    getParam,
+    getAllParams,
+    setParam,
+    setParams,
+    deleteParam,
+    deleteParams,
+    deleteAllParams,
+  }
+}

src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from 'clsx'
+
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs))
+}

src/locales/en.json

@@ -0,0 +1,130 @@
+{
+  "common": {
+    "home": "Home",
+    "about": "About",
+    "experience": "Experience",
+    "skills": "Skills",
+    "projects": "Projects",
+    "blog": "Blog",
+    "contact": "Contact",
+    "language": "Language",
+    "theme": "Theme",
+    "lightMode": "Light",
+    "darkMode": "Dark",
+    "systemMode": "System",
+    "viewResume": "View Resume",
+    "getInTouch": "Get in Touch"
+  },
+  "hero": {
+    "greeting": "Hi, I'm",
+    "name": "Omar",
+    "title": "Frontend Developer",
+    "subtitle": "Crafting Digital Experiences",
+    "description": "I build modern, performant, and accessible web applications with clean code and thoughtful design.",
+    "cta": "See My Work",
+    "available": "Available for opportunities"
+  },
+  "about": {
+    "title": "About Me",
+    "subtitle": "Get to know me better",
+    "description": "I'm a passionate frontend developer with a keen eye for design and a love for creating seamless user experiences. With expertise in modern JavaScript frameworks and a commitment to clean, maintainable code, I transform ideas into elegant digital solutions.",
+    "paragraph2": "When I'm not coding, you'll find me exploring new technologies, contributing to open source, or sharing knowledge through technical writing.",
+    "highlights": {
+      "clean": {
+        "title": "Clean Code",
+        "description": "Writing maintainable, scalable, and well-documented code."
+      },
+      "design": {
+        "title": "Design Focused",
+        "description": "Creating beautiful interfaces with attention to detail."
+      },
+      "performance": {
+        "title": "Performance",
+        "description": "Building fast, optimized applications for the best UX."
+      }
+    }
+  },
+  "experience": {
+    "title": "Experience",
+    "subtitle": "My professional journey",
+    "work": "Work",
+    "education": "Education",
+    "present": "Present",
+    "items": {
+      "work1": {
+        "title": "Frontend Developer",
+        "company": "Ecosoft",
+        "period": "2024 - Present",
+        "description": "UI development for e-commerce (kari.com) and HR systems. Built recruitment portal reducing hiring time by 80%. Implemented Tailwind CSS, speeding up development by 25%."
+      },
+      "work2": {
+        "title": "Frontend Developer",
+        "company": "Vverh digital",
+        "period": "2023 - 2024",
+        "description": "Full-stack development with Nuxt 3. Launched avtovybor-ekb.rf from scratch: frontend, backend, PostgreSQL. Built custom CMS enabling client's SEO efforts."
+      },
+      "edu1": {
+        "title": "Computer Engineering",
+        "company": "Ural Federal University",
+        "period": "2019 - 2023",
+        "description": "Bachelor's degree in Informatics and Computer Engineering with focus on software engineering and web technologies."
+      }
+    }
+  },
+  "skills": {
+    "title": "Tech Stack",
+    "subtitle": "Technologies I work with",
+    "frontend": "Frontend",
+    "backend": "Backend",
+    "tools": "Tools & Others"
+  },
+  "projects": {
+    "title": "Featured Projects",
+    "subtitle": "Some things I've built",
+    "viewProject": "View Project",
+    "viewCode": "View Code"
+  },
+  "contact": {
+    "title": "Let's Connect",
+    "subtitle": "Have a project in mind? Let's talk.",
+    "or": "or find me on",
+    "form": {
+      "name": "Name",
+      "namePlaceholder": "Your name",
+      "email": "Email",
+      "emailPlaceholder": "your@email.com",
+      "subject": "Subject",
+      "subjectPlaceholder": "What is this about?",
+      "message": "Message",
+      "messagePlaceholder": "Your message...",
+      "submit": "Send Message",
+      "sending": "Sending..."
+    },
+    "info": {
+      "title": "Let's Connect",
+      "description": "Feel free to reach out through the form or connect with me on social media. I'm always open to discussing new projects, creative ideas, or opportunities."
+    },
+    "success": {
+      "title": "Message Sent!",
+      "message": "Thank you for reaching out. I'll get back to you soon!",
+      "sendAnother": "Send Another Message"
+    },
+    "validation": {
+      "nameRequired": "Name is required",
+      "nameTooLong": "Name is too long",
+      "emailRequired": "Email is required",
+      "emailInvalid": "Invalid email address",
+      "subjectTooLong": "Subject is too long",
+      "messageRequired": "Message is required",
+      "messageTooLong": "Message is too long"
+    }
+  },
+
+  "blog": {
+    "comingSoon": "Blog posts coming soon. Stay tuned for articles about web development, design, and technology."
+  },
+  "footer": {
+    "rights": "All rights reserved.",
+    "madeWith": "Made with"
+  }
+}

src/locales/ru.json

@@ -0,0 +1,129 @@
+{
+  "common": {
+    "home": "Главная",
+    "about": "Обо мне",
+    "experience": "Опыт",
+    "skills": "Навыки",
+    "projects": "Проекты",
+    "blog": "Блог",
+    "contact": "Контакты",
+    "language": "Язык",
+    "theme": "Тема",
+    "lightMode": "Светлая",
+    "darkMode": "Тёмная",
+    "systemMode": "Системная",
+    "viewResume": "Резюме",
+    "getInTouch": "Связаться"
+  },
+  "hero": {
+    "greeting": "Привет, я",
+    "name": "Омар",
+    "title": "Фронтенд-разработчик",
+    "subtitle": "Создаю цифровой опыт",
+    "description": "Разрабатываю современные, производительные и доступные веб-приложения с чистым кодом и продуманным дизайном.",
+    "cta": "Мои работы",
+    "available": "Открыт для предложений"
+  },
+  "about": {
+    "title": "Обо мне",
+    "subtitle": "Узнайте меня лучше",
+    "description": "Я увлечённый фронтенд-разработчик с острым взглядом на дизайн и любовью к созданию безупречного пользовательского опыта. Обладая экспертизой в современных JavaScript-фреймворках и приверженностью к чистому, поддерживаемому коду, я превращаю идеи в элегантные цифровые решения.",
+    "paragraph2": "Когда я не пишу код, вы найдёте меня изучающим новые технологии, участвующим в open source или делящимся знаниями через технические статьи.",
+    "highlights": {
+      "clean": {
+        "title": "Чистый код",
+        "description": "Пишу поддерживаемый, масштабируемый и документированный код."
+      },
+      "design": {
+        "title": "Фокус на дизайн",
+        "description": "Создаю красивые интерфейсы с вниманием к деталям."
+      },
+      "performance": {
+        "title": "Производительность",
+        "description": "Разрабатываю быстрые, оптимизированные приложения."
+      }
+    }
+  },
+  "experience": {
+    "title": "Опыт",
+    "subtitle": "Мой профессиональный путь",
+    "work": "Работа",
+    "education": "Образование",
+    "present": "Настоящее время",
+    "items": {
+      "work1": {
+        "title": "Фронтенд-разработчик",
+        "company": "Экософт",
+        "period": "2024 - Настоящее время",
+        "description": "Разработка UI для e-commerce (kari.com) и HR-систем. Создал портал рекрутинга, сокративший время найма на 80%. Внедрил Tailwind CSS, ускорив разработку на 25%."
+      },
+      "work2": {
+        "title": "Фронтенд-разработчик",
+        "company": "Vverh digital",
+        "period": "2023 - 2024",
+        "description": "Full-stack разработка на Nuxt 3. Запустил автовыбор-екб.рф с нуля: фронтенд, бэкенд, PostgreSQL. Создал кастомную CMS для SEO-продвижения клиентом."
+      },
+      "edu1": {
+        "title": "Информатика и вычислительная техника",
+        "company": "Уральский федеральный университет",
+        "period": "2019 - 2023",
+        "description": "Степень бакалавра по информатике и вычислительной технике с фокусом на разработку ПО и веб-технологии."
+      }
+    }
+  },
+  "skills": {
+    "title": "Технологии",
+    "subtitle": "С чем я работаю",
+    "frontend": "Фронтенд",
+    "backend": "Бэкенд",
+    "tools": "Инструменты"
+  },
+  "projects": {
+    "title": "Избранные проекты",
+    "subtitle": "Некоторые мои работы",
+    "viewProject": "Смотреть проект",
+    "viewCode": "Смотреть код"
+  },
+  "contact": {
+    "title": "Давайте свяжемся",
+    "subtitle": "Есть проект? Давайте обсудим.",
+    "or": "или найдите меня в",
+    "form": {
+      "name": "Имя",
+      "namePlaceholder": "Ваше имя",
+      "email": "Email",
+      "emailPlaceholder": "ваш@email.com",
+      "subject": "Тема",
+      "subjectPlaceholder": "О чём это?",
+      "message": "Сообщение",
+      "messagePlaceholder": "Ваше сообщение...",
+      "submit": "Отправить сообщение",
+      "sending": "Отправка..."
+    },
+    "info": {
+      "title": "Давайте свяжемся",
+      "description": "Свяжитесь со мной через форму или в социальных сетях. Я всегда открыт для обсуждения новых проектов, креативных идей или возможностей сотрудничества."
+    },
+    "success": {
+      "title": "Сообщение отправлено!",
+      "message": "Спасибо за обращение. Я свяжусь с вами в ближайшее время!",
+      "sendAnother": "Отправить ещё сообщение"
+    },
+    "validation": {
+      "nameRequired": "Имя обязательно",
+      "nameTooLong": "Имя слишком длинное",
+      "emailRequired": "Email обязателен",
+      "emailInvalid": "Неверный email адрес",
+      "subjectTooLong": "Тема слишком длинная",
+      "messageRequired": "Сообщение обязательно",
+      "messageTooLong": "Сообщение слишком длинное"
+    }
+  },
+  "blog": {
+    "comingSoon": "Статьи скоро появятся. Следите за обновлениями о веб-разработке, дизайне и технологиях."
+  },
+  "footer": {
+    "rights": "Все права защищены.",
+    "madeWith": "Сделано с"
+  }
+}

src/main.tsx

@@ -0,0 +1,52 @@
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { Toaster } from 'sonner'
+import { queryClient } from '@lib/query-client'
+import { routeTree } from './routeTree.gen'
+import '@/lib/i18n'
+import './styles.css'
+
+const initializeTheme = () => {
+  const stored = localStorage.getItem('theme-storage')
+  if (stored) {
+    const { state } = JSON.parse(stored)
+    const theme = state?.theme ?? 'dark'
+    const resolved =
+      theme === 'system'
+        ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+        : theme
+    document.documentElement.classList.add(resolved)
+  } else {
+    document.documentElement.classList.add('dark')
+  }
+}
+initializeTheme()
+
+const router = createRouter({
+  routeTree,
+  context: {},
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <Toaster position="top-right" richColors />
+    </QueryClientProvider>,
+  )
+}

src/routeTree.gen.ts

@@ -0,0 +1,329 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as SetupRouteImport } from './routes/setup'
+import { Route as LoginRouteImport } from './routes/login'
+import { Route as BlogRouteImport } from './routes/blog'
+import { Route as AdminRouteImport } from './routes/admin'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as AdminIndexRouteImport } from './routes/admin/index'
+import { Route as BlogSlugRouteImport } from './routes/blog.$slug'
+import { Route as AdminSettingsRouteImport } from './routes/admin/settings'
+import { Route as AdminMessagesIndexRouteImport } from './routes/admin/messages/index'
+import { Route as AdminArticlesIndexRouteImport } from './routes/admin/articles/index'
+import { Route as AdminMessagesIdRouteImport } from './routes/admin/messages/$id'
+import { Route as AdminArticlesNewRouteImport } from './routes/admin/articles/new'
+import { Route as AdminArticlesIdRouteImport } from './routes/admin/articles/$id'
+
+const SetupRoute = SetupRouteImport.update({
+  id: '/setup',
+  path: '/setup',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const BlogRoute = BlogRouteImport.update({
+  id: '/blog',
+  path: '/blog',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AdminRoute = AdminRouteImport.update({
+  id: '/admin',
+  path: '/admin',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AdminIndexRoute = AdminIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => AdminRoute,
+} as any)
+const BlogSlugRoute = BlogSlugRouteImport.update({
+  id: '/$slug',
+  path: '/$slug',
+  getParentRoute: () => BlogRoute,
+} as any)
+const AdminSettingsRoute = AdminSettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminMessagesIndexRoute = AdminMessagesIndexRouteImport.update({
+  id: '/messages/',
+  path: '/messages/',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminArticlesIndexRoute = AdminArticlesIndexRouteImport.update({
+  id: '/articles/',
+  path: '/articles/',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminMessagesIdRoute = AdminMessagesIdRouteImport.update({
+  id: '/messages/$id',
+  path: '/messages/$id',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminArticlesNewRoute = AdminArticlesNewRouteImport.update({
+  id: '/articles/new',
+  path: '/articles/new',
+  getParentRoute: () => AdminRoute,
+} as any)
+const AdminArticlesIdRoute = AdminArticlesIdRouteImport.update({
+  id: '/articles/$id',
+  path: '/articles/$id',
+  getParentRoute: () => AdminRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/admin': typeof AdminRouteWithChildren
+  '/blog': typeof BlogRouteWithChildren
+  '/login': typeof LoginRoute
+  '/setup': typeof SetupRoute
+  '/admin/settings': typeof AdminSettingsRoute
+  '/blog/$slug': typeof BlogSlugRoute
+  '/admin/': typeof AdminIndexRoute
+  '/admin/articles/$id': typeof AdminArticlesIdRoute
+  '/admin/articles/new': typeof AdminArticlesNewRoute
+  '/admin/messages/$id': typeof AdminMessagesIdRoute
+  '/admin/articles/': typeof AdminArticlesIndexRoute
+  '/admin/messages/': typeof AdminMessagesIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/blog': typeof BlogRouteWithChildren
+  '/login': typeof LoginRoute
+  '/setup': typeof SetupRoute
+  '/admin/settings': typeof AdminSettingsRoute
+  '/blog/$slug': typeof BlogSlugRoute
+  '/admin': typeof AdminIndexRoute
+  '/admin/articles/$id': typeof AdminArticlesIdRoute
+  '/admin/articles/new': typeof AdminArticlesNewRoute
+  '/admin/messages/$id': typeof AdminMessagesIdRoute
+  '/admin/articles': typeof AdminArticlesIndexRoute
+  '/admin/messages': typeof AdminMessagesIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/admin': typeof AdminRouteWithChildren
+  '/blog': typeof BlogRouteWithChildren
+  '/login': typeof LoginRoute
+  '/setup': typeof SetupRoute
+  '/admin/settings': typeof AdminSettingsRoute
+  '/blog/$slug': typeof BlogSlugRoute
+  '/admin/': typeof AdminIndexRoute
+  '/admin/articles/$id': typeof AdminArticlesIdRoute
+  '/admin/articles/new': typeof AdminArticlesNewRoute
+  '/admin/messages/$id': typeof AdminMessagesIdRoute
+  '/admin/articles/': typeof AdminArticlesIndexRoute
+  '/admin/messages/': typeof AdminMessagesIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/admin'
+    | '/blog'
+    | '/login'
+    | '/setup'
+    | '/admin/settings'
+    | '/blog/$slug'
+    | '/admin/'
+    | '/admin/articles/$id'
+    | '/admin/articles/new'
+    | '/admin/messages/$id'
+    | '/admin/articles/'
+    | '/admin/messages/'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/blog'
+    | '/login'
+    | '/setup'
+    | '/admin/settings'
+    | '/blog/$slug'
+    | '/admin'
+    | '/admin/articles/$id'
+    | '/admin/articles/new'
+    | '/admin/messages/$id'
+    | '/admin/articles'
+    | '/admin/messages'
+  id:
+    | '__root__'
+    | '/'
+    | '/admin'
+    | '/blog'
+    | '/login'
+    | '/setup'
+    | '/admin/settings'
+    | '/blog/$slug'
+    | '/admin/'
+    | '/admin/articles/$id'
+    | '/admin/articles/new'
+    | '/admin/messages/$id'
+    | '/admin/articles/'
+    | '/admin/messages/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AdminRoute: typeof AdminRouteWithChildren
+  BlogRoute: typeof BlogRouteWithChildren
+  LoginRoute: typeof LoginRoute
+  SetupRoute: typeof SetupRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/setup': {
+      id: '/setup'
+      path: '/setup'
+      fullPath: '/setup'
+      preLoaderRoute: typeof SetupRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/blog': {
+      id: '/blog'
+      path: '/blog'
+      fullPath: '/blog'
+      preLoaderRoute: typeof BlogRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/admin': {
+      id: '/admin'
+      path: '/admin'
+      fullPath: '/admin'
+      preLoaderRoute: typeof AdminRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/admin/': {
+      id: '/admin/'
+      path: '/'
+      fullPath: '/admin/'
+      preLoaderRoute: typeof AdminIndexRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/blog/$slug': {
+      id: '/blog/$slug'
+      path: '/$slug'
+      fullPath: '/blog/$slug'
+      preLoaderRoute: typeof BlogSlugRouteImport
+      parentRoute: typeof BlogRoute
+    }
+    '/admin/settings': {
+      id: '/admin/settings'
+      path: '/settings'
+      fullPath: '/admin/settings'
+      preLoaderRoute: typeof AdminSettingsRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/messages/': {
+      id: '/admin/messages/'
+      path: '/messages'
+      fullPath: '/admin/messages/'
+      preLoaderRoute: typeof AdminMessagesIndexRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/articles/': {
+      id: '/admin/articles/'
+      path: '/articles'
+      fullPath: '/admin/articles/'
+      preLoaderRoute: typeof AdminArticlesIndexRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/messages/$id': {
+      id: '/admin/messages/$id'
+      path: '/messages/$id'
+      fullPath: '/admin/messages/$id'
+      preLoaderRoute: typeof AdminMessagesIdRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/articles/new': {
+      id: '/admin/articles/new'
+      path: '/articles/new'
+      fullPath: '/admin/articles/new'
+      preLoaderRoute: typeof AdminArticlesNewRouteImport
+      parentRoute: typeof AdminRoute
+    }
+    '/admin/articles/$id': {
+      id: '/admin/articles/$id'
+      path: '/articles/$id'
+      fullPath: '/admin/articles/$id'
+      preLoaderRoute: typeof AdminArticlesIdRouteImport
+      parentRoute: typeof AdminRoute
+    }
+  }
+}
+
+interface AdminRouteChildren {
+  AdminSettingsRoute: typeof AdminSettingsRoute
+  AdminIndexRoute: typeof AdminIndexRoute
+  AdminArticlesIdRoute: typeof AdminArticlesIdRoute
+  AdminArticlesNewRoute: typeof AdminArticlesNewRoute
+  AdminMessagesIdRoute: typeof AdminMessagesIdRoute
+  AdminArticlesIndexRoute: typeof AdminArticlesIndexRoute
+  AdminMessagesIndexRoute: typeof AdminMessagesIndexRoute
+}
+
+const AdminRouteChildren: AdminRouteChildren = {
+  AdminSettingsRoute: AdminSettingsRoute,
+  AdminIndexRoute: AdminIndexRoute,
+  AdminArticlesIdRoute: AdminArticlesIdRoute,
+  AdminArticlesNewRoute: AdminArticlesNewRoute,
+  AdminMessagesIdRoute: AdminMessagesIdRoute,
+  AdminArticlesIndexRoute: AdminArticlesIndexRoute,
+  AdminMessagesIndexRoute: AdminMessagesIndexRoute,
+}
+
+const AdminRouteWithChildren = AdminRoute._addFileChildren(AdminRouteChildren)
+
+interface BlogRouteChildren {
+  BlogSlugRoute: typeof BlogSlugRoute
+}
+
+const BlogRouteChildren: BlogRouteChildren = {
+  BlogSlugRoute: BlogSlugRoute,
+}
+
+const BlogRouteWithChildren = BlogRoute._addFileChildren(BlogRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AdminRoute: AdminRouteWithChildren,
+  BlogRoute: BlogRouteWithChildren,
+  LoginRoute: LoginRoute,
+  SetupRoute: SetupRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

src/routes/__root.tsx

@@ -0,0 +1,37 @@
+import { Outlet, createRootRoute, useLocation } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { Navigation } from '@components/navigation'
+
+function RootComponent() {
+  const location = useLocation()
+  const isAdminRoute = location.pathname.startsWith('/admin')
+  const isAuthRoute =
+    location.pathname === '/login' || location.pathname === '/setup'
+
+  const hideNavigation = isAdminRoute || isAuthRoute
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {!hideNavigation && <Navigation />}
+      <main>
+        <Outlet />
+      </main>
+      <TanStackDevtools
+        config={{
+          position: 'bottom-right',
+        }}
+        plugins={[
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel />,
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})

src/routes/admin.tsx

@@ -0,0 +1,17 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+import { ProtectedRoute } from '@components/protected-route'
+import { AdminLayout } from '@components/admin/admin-layout'
+
+export const Route = createFileRoute('/admin')({
+  component: AdminRoot,
+})
+
+function AdminRoot() {
+  return (
+    <ProtectedRoute>
+      <AdminLayout>
+        <Outlet />
+      </AdminLayout>
+    </ProtectedRoute>
+  )
+}

src/routes/admin/articles/$id.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ArticleEditor } from '@components/admin/article-editor'
+
+export const Route = createFileRoute('/admin/articles/$id')({
+  component: EditArticlePage,
+})
+
+function EditArticlePage() {
+  const { id } = Route.useParams()
+  return <ArticleEditor articleId={id} />
+}

src/routes/admin/articles/index.tsx

@@ -0,0 +1,320 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import {
+  Eye,
+  EyeOff,
+  MoreHorizontal,
+  Pencil,
+  PlusCircle,
+  Search,
+  Trash2,
+} from 'lucide-react'
+import { articlesApi } from '@api/articles'
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+import { Badge } from '@components/ui/badge'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@components/ui/table'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@components/ui/alert-dialog'
+import { Skeleton } from '@components/ui/skeleton'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { useAdminArticles, useDeleteArticle } from '@/hooks/use-articles'
+
+export const Route = createFileRoute('/admin/articles/')({
+  component: ArticlesPage,
+})
+
+function ArticlesPage() {
+  const [search, setSearch] = useState('')
+  const [page, setPage] = useState(1)
+  const [deleteId, setDeleteId] = useState<string | null>(null)
+
+  const { data, isLoading } = useAdminArticles({
+    page,
+    limit: 10,
+    search: search || undefined,
+  })
+
+  const deleteArticle = useDeleteArticle()
+  const queryClient = useQueryClient()
+
+  const togglePublish = useMutation({
+    mutationFn: ({ id, published }: { id: string; published: boolean }) =>
+      articlesApi.update(id, { published }),
+    onSuccess: (_, { published }) => {
+      queryClient.invalidateQueries({ queryKey: ['articles'] })
+      toast.success(published ? 'Article published' : 'Article unpublished')
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to update article')
+    },
+  })
+
+  const handleDelete = () => {
+    if (deleteId) {
+      deleteArticle.mutate(deleteId)
+      setDeleteId(null)
+    }
+  }
+
+  const totalPages = data ? Math.ceil(data.total / 10) : 0
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Articles</h1>
+          <p className="text-muted-foreground">
+            Manage your blog posts and articles
+          </p>
+        </div>
+        <Button asChild>
+          <Link to="/admin/articles/new">
+            <PlusCircle className="mr-2 size-4" />
+            New Article
+          </Link>
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Articles</CardTitle>
+          <CardDescription>{data?.total ?? 0} total articles</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="mb-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+              <Input
+                placeholder="Search articles..."
+                value={search}
+                onChange={(e) => {
+                  setSearch(e.target.value)
+                  setPage(1)
+                }}
+                className="pl-9"
+              />
+            </div>
+          </div>
+
+          {isLoading ? (
+            <div className="space-y-3">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="flex items-center gap-4">
+                  <Skeleton className="h-12 w-full" />
+                </div>
+              ))}
+            </div>
+          ) : data?.articles.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground mb-4">No articles found</p>
+              <Button asChild variant="outline">
+                <Link to="/admin/articles/new">Create your first article</Link>
+              </Button>
+            </div>
+          ) : (
+            <>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Title</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead>Tags</TableHead>
+                      <TableHead>Created</TableHead>
+                      <TableHead className="w-[70px]"></TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {data?.articles.map((article) => (
+                      <TableRow key={article.id}>
+                        <TableCell>
+                          <div className="flex items-center gap-3">
+                            {article.coverImage ? (
+                              <img
+                                src={article.coverImage}
+                                alt=""
+                                className="size-10 rounded object-cover"
+                              />
+                            ) : (
+                              <div className="size-10 rounded bg-muted" />
+                            )}
+                            <div className="min-w-0">
+                              <p className="font-medium truncate max-w-[200px]">
+                                {article.title}
+                              </p>
+                              <p className="text-sm text-muted-foreground truncate max-w-[200px]">
+                                {article.preview}
+                              </p>
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Badge
+                            variant={
+                              article.published ? 'default' : 'secondary'
+                            }
+                          >
+                            {article.published ? 'Published' : 'Draft'}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex flex-wrap gap-1">
+                            {article.tags.slice(0, 2).map((tag) => (
+                              <Badge
+                                key={tag}
+                                variant="outline"
+                                className="text-xs"
+                              >
+                                {tag}
+                              </Badge>
+                            ))}
+                            {article.tags.length > 2 && (
+                              <Badge variant="outline" className="text-xs">
+                                +{article.tags.length - 2}
+                              </Badge>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-muted-foreground">
+                          {new Date(article.createdAt).toLocaleDateString()}
+                        </TableCell>
+                        <TableCell>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" size="icon">
+                                <MoreHorizontal className="size-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem asChild>
+                                <Link
+                                  to="/admin/articles/$id"
+                                  params={{ id: article.id }}
+                                >
+                                  <Pencil className="mr-2 size-4" />
+                                  Edit
+                                </Link>
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() =>
+                                  togglePublish.mutate({
+                                    id: article.id,
+                                    published: !article.published,
+                                  })
+                                }
+                              >
+                                {article.published ? (
+                                  <>
+                                    <EyeOff className="mr-2 size-4" />
+                                    Unpublish
+                                  </>
+                                ) : (
+                                  <>
+                                    <Eye className="mr-2 size-4" />
+                                    Publish
+                                  </>
+                                )}
+                              </DropdownMenuItem>
+                              <DropdownMenuSeparator />
+                              <DropdownMenuItem
+                                className="text-destructive focus:text-destructive"
+                                onClick={() => setDeleteId(article.id)}
+                              >
+                                <Trash2 className="mr-2 size-4" />
+                                Delete
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+
+              {totalPages > 1 && (
+                <div className="flex items-center justify-between mt-4">
+                  <p className="text-sm text-muted-foreground">
+                    Page {page} of {totalPages}
+                  </p>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPage((p) => Math.max(1, p - 1))}
+                      disabled={page === 1}
+                    >
+                      Previous
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() =>
+                        setPage((p) => Math.min(totalPages, p + 1))
+                      }
+                      disabled={page === totalPages}
+                    >
+                      Next
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Article</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this article? This action cannot
+              be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

src/routes/admin/articles/new.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ArticleEditor } from '@components/admin/article-editor'
+
+export const Route = createFileRoute('/admin/articles/new')({
+  component: NewArticlePage,
+})
+
+function NewArticlePage() {
+  return <ArticleEditor />
+}

src/routes/admin/index.tsx

@@ -0,0 +1,177 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { Edit, Eye, FileText, PlusCircle } from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+import { articlesApi } from '@api/articles'
+import { Button } from '@components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card'
+import { Skeleton } from '@components/ui/skeleton'
+import { useAuthStore } from '@stores/auth-store'
+
+export const Route = createFileRoute('/admin/')({
+  component: DashboardPage,
+})
+
+function DashboardPage() {
+  const { user } = useAuthStore()
+
+  const { data: articlesData, isLoading } = useQuery({
+    queryKey: ['articles', 'admin', 'all', { limit: 5 }],
+    queryFn: () => articlesApi.getAllAdmin({ limit: 5 }),
+  })
+
+  const { data: publishedData } = useQuery({
+    queryKey: ['articles', 'admin', 'all', { published: true }],
+    queryFn: () => articlesApi.getAllAdmin({ published: true, limit: 1 }),
+  })
+
+  const { data: draftsData } = useQuery({
+    queryKey: ['articles', 'admin', 'all', { published: false }],
+    queryFn: () => articlesApi.getAllAdmin({ published: false, limit: 1 }),
+  })
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">
+          Welcome back, {user?.username}
+        </h1>
+        <p className="text-muted-foreground">
+          Here's what's happening with your content
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">
+              Total Articles
+            </CardTitle>
+            <FileText className="size-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? (
+                <Skeleton className="h-8 w-16" />
+              ) : (
+                (articlesData?.total ?? 0)
+              )}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">Published</CardTitle>
+            <Eye className="size-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? (
+                <Skeleton className="h-8 w-16" />
+              ) : (
+                (publishedData?.total ?? 0)
+              )}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">Drafts</CardTitle>
+            <Edit className="size-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {isLoading ? (
+                <Skeleton className="h-8 w-16" />
+              ) : (
+                (draftsData?.total ?? 0)
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Quick Actions</CardTitle>
+          <CardDescription>Common tasks you might want to do</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-3">
+          <Button asChild>
+            <Link to="/admin/articles/new">
+              <PlusCircle className="mr-2 size-4" />
+              New Article
+            </Link>
+          </Button>
+          <Button variant="outline" asChild>
+            <Link to="/admin/articles">
+              <FileText className="mr-2 size-4" />
+              View All Articles
+            </Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Articles</CardTitle>
+          <CardDescription>Your latest content</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="space-y-3">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="flex items-center gap-4">
+                  <Skeleton className="h-12 w-12 rounded" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-3 w-1/2" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : articlesData?.articles.length === 0 ? (
+            <p className="text-center text-muted-foreground py-8">
+              No articles yet. Create your first article!
+            </p>
+          ) : (
+            <div className="space-y-3">
+              {articlesData?.articles.map((article) => (
+                <Link
+                  key={article.id}
+                  to="/admin/articles/$id"
+                  params={{ id: article.id }}
+                  className="flex items-center gap-4 rounded-lg border p-3 transition-colors hover:bg-accent"
+                >
+                  {article.coverImage ? (
+                    <img
+                      src={article.coverImage}
+                      alt=""
+                      className="size-12 rounded object-cover"
+                    />
+                  ) : (
+                    <div className="size-12 rounded bg-muted flex items-center justify-center">
+                      <FileText className="size-6 text-muted-foreground" />
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{article.title}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {article.published ? 'Published' : 'Draft'} &middot;{' '}
+                      {new Date(article.createdAt).toLocaleDateString()}
+                    </p>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/routes/admin/messages/$id.tsx

@@ -0,0 +1,230 @@
+import { Link, createFileRoute, useNavigate } from '@tanstack/react-router'
+import {
+  ArrowLeft,
+  Calendar,
+  Eye,
+  EyeOff,
+  Loader2,
+  Mail,
+  Trash2,
+  User,
+} from 'lucide-react'
+import { Button } from '@components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@components/ui/alert-dialog'
+import { Skeleton } from '@components/ui/skeleton'
+import { Badge } from '@components/ui/badge'
+import {
+  useDeleteMessage,
+  useMarkAsUnread,
+  useMessage,
+} from '@/hooks/use-messages'
+
+export const Route = createFileRoute('/admin/messages/$id')({
+  component: MessageDetailPage,
+})
+
+function MessageDetailPage() {
+  const { id } = Route.useParams()
+  const navigate = useNavigate()
+  const { data: message, isLoading } = useMessage(id)
+  const deleteMessage = useDeleteMessage()
+  const markAsUnread = useMarkAsUnread()
+
+  const handleDelete = () => {
+    deleteMessage.mutate(id, {
+      onSuccess: () => {
+        navigate({ to: '/admin/messages' })
+      },
+    })
+  }
+
+  const handleMarkAsUnread = () => {
+    markAsUnread.mutate(id, {
+      onSuccess: () => {
+        navigate({ to: '/admin/messages' })
+      },
+    })
+  }
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-10 w-10" />
+          <Skeleton className="h-8 w-48" />
+        </div>
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-4 w-64" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  if (!message) {
+    return (
+      <div className="space-y-6">
+        <Link
+          to="/admin/messages"
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <ArrowLeft className="size-4" />
+          Back to Messages
+        </Link>
+        <Card>
+          <CardContent className="py-12 text-center">
+            <Mail className="size-12 text-muted-foreground mx-auto mb-4" />
+            <p className="text-muted-foreground">Message not found</p>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <Link
+          to="/admin/messages"
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground w-fit"
+        >
+          <ArrowLeft className="size-4" />
+          Back to Messages
+        </Link>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleMarkAsUnread}
+            disabled={markAsUnread.isPending}
+          >
+            {markAsUnread.isPending ? (
+              <Loader2 className="mr-2 size-4 animate-spin" />
+            ) : (
+              <EyeOff className="mr-2 size-4" />
+            )}
+            Mark as Unread
+          </Button>
+          <Button variant="outline" size="sm" asChild>
+            <a
+              href={`mailto:${message.email}?subject=Re: ${message.subject || 'Your message'}`}
+            >
+              <Mail className="mr-2 size-4" />
+              Reply via Email
+            </a>
+          </Button>
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="destructive" size="sm">
+                <Trash2 className="mr-2 size-4" />
+                Delete
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Delete Message</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Are you sure you want to delete this message? This action
+                  cannot be undone.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleDelete}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                >
+                  {deleteMessage.isPending ? (
+                    <Loader2 className="mr-2 size-4 animate-spin" />
+                  ) : null}
+                  Delete
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <CardTitle className="text-xl">
+                {message.subject || 'No Subject'}
+              </CardTitle>
+              <CardDescription className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2">
+                <span className="flex items-center gap-1">
+                  <User className="size-4" />
+                  {message.name}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Mail className="size-4" />
+                  <a
+                    href={`mailto:${message.email}`}
+                    className="hover:underline"
+                  >
+                    {message.email}
+                  </a>
+                </span>
+                <span className="flex items-center gap-1">
+                  <Calendar className="size-4" />
+                  {formatDate(message.createdAt)}
+                </span>
+              </CardDescription>
+            </div>
+            <Badge variant={message.isRead ? 'secondary' : 'default'}>
+              {message.isRead ? (
+                <>
+                  <Eye className="mr-1 size-3" />
+                  Read
+                </>
+              ) : (
+                <>
+                  <EyeOff className="mr-1 size-3" />
+                  Unread
+                </>
+              )}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent>{message.message}</CardContent>
+      </Card>
+    </div>
+  )
+}

src/routes/admin/messages/index.tsx

@@ -0,0 +1,374 @@
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import {
+  Eye,
+  EyeOff,
+  Inbox,
+  Mail,
+  MailOpen,
+  MoreHorizontal,
+  Trash2,
+} from 'lucide-react'
+import { Button } from '@components/ui/button'
+import { Badge } from '@components/ui/badge'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@components/ui/alert-dialog'
+import { Skeleton } from '@components/ui/skeleton'
+import { cn } from '@lib/utils'
+import {
+  useDeleteMessage,
+  useMarkAsRead,
+  useMarkAsUnread,
+  useMessages,
+} from '@/hooks/use-messages'
+
+export const Route = createFileRoute('/admin/messages/')({
+  component: MessagesPage,
+})
+
+type FilterType = 'all' | 'unread' | 'read'
+
+function MessagesPage() {
+  const [filter, setFilter] = useState<FilterType>('all')
+  const [page, setPage] = useState(1)
+  const [deleteId, setDeleteId] = useState<string | null>(null)
+
+  const isReadFilter = filter === 'all' ? undefined : filter === 'read'
+  const { data, isLoading } = useMessages({
+    page,
+    limit: 10,
+    isRead: isReadFilter,
+  })
+
+  const deleteMessage = useDeleteMessage()
+  const markAsRead = useMarkAsRead()
+  const markAsUnread = useMarkAsUnread()
+
+  const handleDelete = () => {
+    if (deleteId) {
+      deleteMessage.mutate(deleteId)
+      setDeleteId(null)
+    }
+  }
+
+  const handleToggleRead = (id: string, isRead: boolean) => {
+    if (isRead) {
+      markAsUnread.mutate(id)
+    } else {
+      markAsRead.mutate(id)
+    }
+  }
+
+  const totalPages = data ? Math.ceil(data.total / 10) : 0
+  const readCount = data ? data.total - data.unreadCount : 0
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffDays = Math.floor(
+      (now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24),
+    )
+
+    if (diffDays === 0) {
+      return date.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    } else if (diffDays === 1) {
+      return 'Yesterday'
+    } else if (diffDays < 7) {
+      return date.toLocaleDateString('en-US', { weekday: 'short' })
+    } else {
+      return date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      })
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Messages</h1>
+          <p className="text-muted-foreground">
+            Manage contact form submissions
+          </p>
+        </div>
+        {data && data.unreadCount > 0 && (
+          <Badge variant="secondary" className="w-fit">
+            {data.unreadCount} unread
+          </Badge>
+        )}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <CardTitle>Inbox</CardTitle>
+              <CardDescription>
+                {data?.total ?? 0} total messages
+              </CardDescription>
+            </div>
+            <div className="flex rounded-lg border p-1">
+              <button
+                onClick={() => {
+                  setFilter('all')
+                  setPage(1)
+                }}
+                className={cn(
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-colors',
+                  filter === 'all'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                All ({data?.total ?? 0})
+              </button>
+              <button
+                onClick={() => {
+                  setFilter('unread')
+                  setPage(1)
+                }}
+                className={cn(
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-colors',
+                  filter === 'unread'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                Unread ({data?.unreadCount ?? 0})
+              </button>
+              <button
+                onClick={() => {
+                  setFilter('read')
+                  setPage(1)
+                }}
+                className={cn(
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-colors',
+                  filter === 'read'
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                Read ({readCount})
+              </button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="space-y-3">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center gap-4 p-4 border rounded-lg"
+                >
+                  <Skeleton className="size-10 rounded-full" />
+                  <div className="flex-1 space-y-2">
+                    <Skeleton className="h-4 w-1/3" />
+                    <Skeleton className="h-3 w-2/3" />
+                  </div>
+                  <Skeleton className="h-4 w-16" />
+                </div>
+              ))}
+            </div>
+          ) : data?.messages.length === 0 ? (
+            <div className="text-center py-12">
+              <Inbox className="size-12 text-muted-foreground mx-auto mb-4" />
+              <p className="text-muted-foreground">
+                {filter === 'unread'
+                  ? 'No unread messages'
+                  : filter === 'read'
+                    ? 'No read messages'
+                    : 'No messages yet'}
+              </p>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-2">
+                {data?.messages.map((message) => (
+                  <div
+                    key={message.id}
+                    className={cn(
+                      'flex items-start gap-4 p-4 rounded-lg border transition-colors hover:bg-accent/50',
+                      !message.isRead && 'bg-primary/5 border-primary/20',
+                    )}
+                  >
+                    <div className="pt-1">
+                      {message.isRead ? (
+                        <MailOpen className="size-5 text-muted-foreground" />
+                      ) : (
+                        <Mail className="size-5 text-primary" />
+                      )}
+                    </div>
+
+                    <Link
+                      to="/admin/messages/$id"
+                      params={{ id: message.id }}
+                      className="flex-1 min-w-0"
+                    >
+                      <div className="flex items-center gap-2 mb-1">
+                        <span
+                          className={cn(
+                            'font-medium truncate',
+                            !message.isRead && 'font-semibold',
+                          )}
+                        >
+                          {message.name}
+                        </span>
+                        <span className="text-sm text-muted-foreground truncate">
+                          &lt;{message.email}&gt;
+                        </span>
+                      </div>
+                      {message.subject && (
+                        <p
+                          className={cn(
+                            'text-sm truncate mb-1',
+                            !message.isRead
+                              ? 'text-foreground'
+                              : 'text-muted-foreground',
+                          )}
+                        >
+                          {message.subject}
+                        </p>
+                      )}
+                      <p className="text-sm text-muted-foreground line-clamp-1">
+                        {message.message}
+                      </p>
+                    </Link>
+
+                    <div className="flex items-center gap-2 shrink-0">
+                      <span className="text-xs text-muted-foreground">
+                        {formatDate(message.createdAt)}
+                      </span>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="size-8"
+                          >
+                            <MoreHorizontal className="size-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem asChild>
+                            <Link
+                              to="/admin/messages/$id"
+                              params={{ id: message.id }}
+                            >
+                              <Eye className="mr-2 size-4" />
+                              View
+                            </Link>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() =>
+                              handleToggleRead(message.id, message.isRead)
+                            }
+                          >
+                            {message.isRead ? (
+                              <>
+                                <EyeOff className="mr-2 size-4" />
+                                Mark as Unread
+                              </>
+                            ) : (
+                              <>
+                                <Eye className="mr-2 size-4" />
+                                Mark as Read
+                              </>
+                            )}
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem
+                            className="text-destructive focus:text-destructive"
+                            onClick={() => setDeleteId(message.id)}
+                          >
+                            <Trash2 className="mr-2 size-4" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {totalPages > 1 && (
+                <div className="flex items-center justify-between mt-4 pt-4 border-t">
+                  <p className="text-sm text-muted-foreground">
+                    Page {page} of {totalPages}
+                  </p>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPage((p) => Math.max(1, p - 1))}
+                      disabled={page === 1}
+                    >
+                      Previous
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() =>
+                        setPage((p) => Math.min(totalPages, p + 1))
+                      }
+                      disabled={page === totalPages}
+                    >
+                      Next
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Message</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this message? This action cannot
+              be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

src/routes/admin/settings.tsx

@@ -0,0 +1,210 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Loader2 } from 'lucide-react'
+import { useAuthStore } from '@stores/auth-store'
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@components/ui/form'
+import { useChangePassword } from '@/hooks/use-auth'
+
+const changePasswordSchema = z
+  .object({
+    currentPassword: z.string().min(1, 'Current password is required'),
+    newPassword: z
+      .string()
+      .min(8, 'Password must be at least 8 characters')
+      .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
+      .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
+      .regex(/[0-9]/, 'Password must contain at least one number'),
+    confirmPassword: z.string().min(1, 'Please confirm your password'),
+  })
+  .refine((data) => data.newPassword === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  })
+  .refine((data) => data.currentPassword !== data.newPassword, {
+    message: 'New password must be different from current password',
+    path: ['newPassword'],
+  })
+
+type ChangePasswordFormValues = z.infer<typeof changePasswordSchema>
+
+export const Route = createFileRoute('/admin/settings')({
+  component: SettingsPage,
+})
+
+function SettingsPage() {
+  const { user } = useAuthStore()
+  const changePassword = useChangePassword()
+
+  const form = useForm<ChangePasswordFormValues>({
+    resolver: zodResolver(changePasswordSchema),
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
+  })
+
+  const onSubmit = (data: ChangePasswordFormValues) => {
+    changePassword.mutate(
+      {
+        currentPassword: data.currentPassword,
+        newPassword: data.newPassword,
+      },
+      {
+        onSuccess: () => {
+          form.reset()
+        },
+      },
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
+        <p className="text-muted-foreground">Manage your account settings</p>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Profile</CardTitle>
+            <CardDescription>Your account information</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center gap-4">
+              <div className="size-16 rounded-full bg-muted flex items-center justify-center">
+                <span className="text-2xl font-bold">
+                  {user?.username.charAt(0).toUpperCase() || 'A'}
+                </span>
+              </div>
+              <div>
+                <p className="text-lg font-medium">{user?.username}</p>
+                <p className="text-sm text-muted-foreground">Administrator</p>
+              </div>
+            </div>
+            <div className="pt-4 border-t">
+              <dl className="space-y-3">
+                <div>
+                  <dt className="text-sm text-muted-foreground">Username</dt>
+                  <dd className="text-sm font-medium">{user?.username}</dd>
+                </div>
+                <div>
+                  <dt className="text-sm text-muted-foreground">User ID</dt>
+                  <dd className="text-sm font-mono text-muted-foreground">
+                    {user?.id}
+                  </dd>
+                </div>
+              </dl>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Change Password</CardTitle>
+            <CardDescription>
+              Update your password to keep your account secure
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-4"
+              >
+                <FormField
+                  control={form.control}
+                  name="currentPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Current Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter current password"
+                          autoComplete="current-password"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="newPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>New Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter new password"
+                          autoComplete="new-password"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        At least 8 characters with uppercase, lowercase, and
+                        number
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="confirmPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Confirm New Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Confirm new password"
+                          autoComplete="new-password"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={changePassword.isPending}
+                >
+                  {changePassword.isPending && (
+                    <Loader2 className="mr-2 size-4 animate-spin" />
+                  )}
+                  Update Password
+                </Button>
+              </form>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

src/routes/blog.$slug.tsx

@@ -0,0 +1,170 @@
+import { useMemo } from 'react'
+import { Link, createFileRoute } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { ArrowLeft, Calendar, Clock, Tag } from 'lucide-react'
+import { articlesApi } from '@api/articles'
+import { Badge } from '@components/ui/badge'
+import { Skeleton } from '@components/ui/skeleton'
+import { Button } from '@components/ui/button'
+import DOMPurify from 'dompurify'
+
+export const Route = createFileRoute('/blog/$slug')({
+  component: ArticlePage,
+})
+
+function ArticlePage() {
+  const { slug } = Route.useParams()
+
+  const {
+    data: article,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['articles', 'slug', slug],
+    queryFn: () => articlesApi.getBySlug(slug),
+  })
+
+  const articleContent = article?.content ?? ''
+  const readingTime = articleContent
+    ? Math.ceil(articleContent.split(/\s+/).length / 200)
+    : 0
+  const sanitizedContent = useMemo(
+    () => DOMPurify.sanitize(articleContent),
+    [articleContent],
+  )
+
+  if (isLoading) {
+    return <ArticlePageSkeleton />
+  }
+
+  if (isError || !article) {
+    return (
+      <main className="min-h-screen px-6 pt-24 pb-16">
+        <div className="mx-auto max-w-3xl text-center">
+          <h1 className="text-4xl font-bold mb-4">Article Not Found</h1>
+          <p className="text-muted-foreground mb-8">
+            The article you're looking for doesn't exist or has been removed.
+          </p>
+          <Button asChild>
+            <Link to="/blog">
+              <ArrowLeft className="mr-2 size-4" />
+              Back to Blog
+            </Link>
+          </Button>
+        </div>
+      </main>
+    )
+  }
+
+  return (
+    <main className="min-h-screen px-6 pt-24 pb-16">
+      <article className="mx-auto max-w-3xl">
+        <Link
+          to="/blog"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-8 transition-colors"
+        >
+          <ArrowLeft className="mr-2 size-4" />
+          Back to Blog
+        </Link>
+
+        <header className="mb-8">
+          {article.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2 mb-4">
+              {article.tags.map((tag) => (
+                <Link key={tag} to="/blog" search={{ tag }}>
+                  <Badge
+                    variant="secondary"
+                    className="cursor-pointer hover:bg-secondary/80"
+                  >
+                    <Tag className="mr-1 size-3" />
+                    {tag}
+                  </Badge>
+                </Link>
+              ))}
+            </div>
+          )}
+
+          <h1 className="text-4xl font-bold tracking-tight md:text-5xl mb-4">
+            {article.title}
+          </h1>
+
+          <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+            <span className="flex items-center">
+              <Calendar className="mr-1 size-4" />
+              {new Date(article.createdAt).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </span>
+            <span className="flex items-center">
+              <Clock className="mr-1 size-4" />
+              {readingTime} min read
+            </span>
+          </div>
+        </header>
+
+        {article.coverImage && (
+          <div className="mb-8 rounded-xl overflow-hidden">
+            <img
+              src={article.coverImage}
+              alt={article.title}
+              className="w-full aspect-video object-cover"
+            />
+          </div>
+        )}
+
+        <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+
+        <footer className="mt-12 pt-8 border-t">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <p className="text-muted-foreground">
+              Last updated:{' '}
+              {new Date(article.updatedAt).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </p>
+            <Button asChild variant="outline">
+              <Link to="/blog">
+                <ArrowLeft className="mr-2 size-4" />
+                More Articles
+              </Link>
+            </Button>
+          </div>
+        </footer>
+      </article>
+    </main>
+  )
+}
+
+function ArticlePageSkeleton() {
+  return (
+    <main className="min-h-screen px-6 pt-24 pb-16">
+      <div className="mx-auto max-w-3xl">
+        <Skeleton className="h-4 w-24 mb-8" />
+        <div className="space-y-4 mb-8">
+          <div className="flex gap-2">
+            <Skeleton className="h-6 w-16" />
+            <Skeleton className="h-6 w-20" />
+          </div>
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-3/4" />
+          <div className="flex gap-4">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        </div>
+        <Skeleton className="aspect-video w-full rounded-xl mb-8" />
+        <div className="space-y-4">
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-5/6" />
+        </div>
+      </div>
+    </main>
+  )
+}

src/routes/blog.tsx

@@ -0,0 +1,294 @@
+import { Link, Outlet, createFileRoute, useMatch } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useEffect, useState } from 'react'
+import { ArrowRight, Calendar, Search, Tag } from 'lucide-react'
+import { Input } from '@components/ui/input'
+import { Badge } from '@components/ui/badge'
+import { Skeleton } from '@components/ui/skeleton'
+import { cn } from '@lib/utils'
+import { useDebounce } from '@/hooks/use-debounce'
+import { useArticleTags, useArticles } from '@/hooks/use-articles'
+import { useAppSearchParams } from '@/lib/use-app-search-params'
+
+export const Route = createFileRoute('/blog')({
+  component: BlogLayout,
+})
+
+function BlogLayout() {
+  const match = useMatch({ from: '/blog/$slug', shouldThrow: false })
+
+  if (match) {
+    return <Outlet />
+  }
+
+  return <BlogPage />
+}
+
+function BlogPage() {
+  const { getParam, setParam } = useAppSearchParams()
+  const { t } = useTranslation()
+  const [page, setPage] = useState(1)
+
+  const searchParam = getParam('search')
+  const tagParam = getParam('tag')
+  const [searchInput, setSearchInput] = useState(searchParam ?? '')
+  const [selectedTag, setSelectedTag] = useState<string | null>(tagParam)
+  const debouncedSearch = useDebounce(searchInput, 400)
+  const debouncedTag = useDebounce(selectedTag ?? '', 200)
+
+  useEffect(() => {
+    const normalizedParam = searchParam ?? ''
+    setSearchInput((current) =>
+      current === normalizedParam ? current : normalizedParam,
+    )
+  }, [searchParam])
+
+  useEffect(() => {
+    const normalizedParam = searchParam ?? ''
+    if (debouncedSearch === normalizedParam) {
+      return
+    }
+    setParam('search', debouncedSearch)
+    setPage(1)
+  }, [debouncedSearch, searchParam, setParam])
+
+  useEffect(() => {
+    setSelectedTag(tagParam)
+  }, [tagParam])
+
+  useEffect(() => {
+    const normalizedTag = tagParam ?? ''
+    if (debouncedTag === normalizedTag) {
+      return
+    }
+    if (debouncedTag) {
+      setParam('tag', debouncedTag)
+    } else {
+      setParam('tag', '')
+    }
+    setPage(1)
+  }, [debouncedTag, tagParam, setParam])
+
+  const { data, isLoading } = useArticles({
+    page,
+    limit: 9,
+    search: searchParam || undefined,
+    tag: tagParam || undefined,
+  })
+
+  const { data: tags } = useArticleTags()
+
+  const handleTagClick = (tag: string) => {
+    setSelectedTag((current) => (current === tag ? null : tag))
+  }
+
+  const totalPages = data ? Math.ceil(data.total / 9) : 0
+
+  return (
+    <main className="min-h-screen px-6 pt-24 pb-16">
+      <div className="mx-auto max-w-6xl">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold tracking-tight md:text-5xl">
+            {t('common.blog')}
+          </h1>
+          <p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
+            {t(
+              'blog.description',
+              'Thoughts, tutorials, and insights about web development and technology.',
+            )}
+          </p>
+        </div>
+
+        <div className="mb-8 space-y-4">
+          <div className="relative max-w-md mx-auto">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+            <Input
+              placeholder={t('blog.searchPlaceholder', 'Search articles...')}
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          {tags && tags.length > 0 && (
+            <div className="flex flex-wrap justify-center gap-2">
+              {tags.map((tag) => (
+                <Badge
+                  key={tag}
+                  variant={selectedTag === tag ? 'default' : 'outline'}
+                  className="cursor-pointer transition-colors"
+                  onClick={() => handleTagClick(tag)}
+                >
+                  <Tag className="mr-1 size-3" />
+                  {tag}
+                </Badge>
+              ))}
+              {selectedTag && (
+                <Badge
+                  variant="secondary"
+                  className="cursor-pointer"
+                  onClick={() => setSelectedTag(null)}
+                >
+                  {t('blog.clearFilter', 'Clear filter')}
+                </Badge>
+              )}
+            </div>
+          )}
+        </div>
+
+        {isLoading ? (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {[1, 2, 3, 4, 5, 6].map((i) => (
+              <ArticleCardSkeleton key={i} />
+            ))}
+          </div>
+        ) : data?.articles.length === 0 ? (
+          <div className="text-center py-16">
+            <p className="text-muted-foreground text-lg">
+              {searchParam || selectedTag
+                ? t(
+                    'blog.noResults',
+                    'No articles found matching your criteria.',
+                  )
+                : t(
+                    'blog.noArticles',
+                    'No articles published yet. Check back soon!',
+                  )}
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {data?.articles.map((article) => (
+                <ArticleCard key={article.id} article={article} />
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <div className="flex justify-center items-center gap-2 mt-12">
+                <button
+                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                  disabled={page === 1}
+                  className={cn(
+                    'px-4 py-2 rounded-lg border transition-colors',
+                    page === 1
+                      ? 'opacity-50 cursor-not-allowed'
+                      : 'hover:bg-accent',
+                  )}
+                >
+                  {t('common.previous', 'Previous')}
+                </button>
+                <span className="text-sm text-muted-foreground px-4">
+                  {page} / {totalPages}
+                </span>
+                <button
+                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                  disabled={page === totalPages}
+                  className={cn(
+                    'px-4 py-2 rounded-lg border transition-colors',
+                    page === totalPages
+                      ? 'opacity-50 cursor-not-allowed'
+                      : 'hover:bg-accent',
+                  )}
+                >
+                  {t('common.next', 'Next')}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </main>
+  )
+}
+
+interface ArticleCardProps {
+  article: {
+    id: string
+    title: string
+    slug: string
+    preview: string
+    coverImage?: string
+    tags: Array<string>
+    createdAt: string
+  }
+}
+
+function ArticleCard({ article }: ArticleCardProps) {
+  return (
+    <Link
+      to="/blog/$slug"
+      params={{ slug: article.slug }}
+      className="group flex flex-col rounded-xl border bg-card overflow-hidden transition-all hover:shadow-lg hover:border-primary/50"
+    >
+      {article.coverImage ? (
+        <div className="aspect-video overflow-hidden">
+          <img
+            src={article.coverImage}
+            alt={article.title}
+            loading="lazy"
+            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        </div>
+      ) : (
+        <div className="aspect-video bg-muted flex items-center justify-center">
+          <span className="text-4xl font-bold text-muted-foreground/30">
+            {article.title.charAt(0)}
+          </span>
+        </div>
+      )}
+
+      <div className="flex flex-col flex-1 p-5">
+        {article.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mb-3">
+            {article.tags.slice(0, 3).map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        <h2 className="text-xl font-semibold mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+          {article.title}
+        </h2>
+
+        <p className="text-muted-foreground text-sm line-clamp-3 flex-1">
+          {article.preview}
+        </p>
+
+        <div className="flex items-center justify-between mt-4 pt-4 border-t">
+          <div className="flex items-center text-xs text-muted-foreground">
+            <Calendar className="mr-1 size-3" />
+            {new Date(article.createdAt).toLocaleDateString()}
+          </div>
+          <span className="text-sm font-medium text-primary flex items-center gap-1 group-hover:gap-2 transition-all">
+            Read more
+            <ArrowRight className="size-4" />
+          </span>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+function ArticleCardSkeleton() {
+  return (
+    <div className="flex flex-col rounded-xl border bg-card overflow-hidden">
+      <Skeleton className="aspect-video" />
+      <div className="p-5 space-y-3">
+        <div className="flex gap-1">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-12" />
+        </div>
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+        <div className="flex justify-between pt-4 border-t">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+      </div>
+    </div>
+  )
+}

src/routes/index.tsx

@@ -0,0 +1,24 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AboutSection } from '@components/sections/about-section'
+import { ContactSection } from '@components/sections/contact-section'
+import { ExperienceSection } from '@components/sections/experience-section'
+import { Footer } from '@components/sections/footer'
+import { HeroSection } from '@components/sections/hero-section'
+import { SkillsSection } from '@components/sections/skills-section'
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+})
+
+function HomePage() {
+  return (
+    <>
+      <HeroSection />
+      <AboutSection />
+      <ExperienceSection />
+      <SkillsSection />
+      <ContactSection />
+      <Footer />
+    </>
+  )
+}

src/routes/login.tsx

@@ -0,0 +1,133 @@
+import { Navigate, createFileRoute } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Loader2 } from 'lucide-react'
+import { useAuthStore } from '@stores/auth-store'
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@components/ui/form'
+import { useAuthStatus, useLogin } from '@/hooks/use-auth'
+
+const loginSchema = z.object({
+  username: z.string().min(1, 'Username is required'),
+  password: z.string().min(1, 'Password is required'),
+})
+
+type LoginFormValues = z.infer<typeof loginSchema>
+
+export const Route = createFileRoute('/login')({
+  component: LoginPage,
+})
+
+function LoginPage() {
+  const { isAuthenticated, needsSetup, isLoading } = useAuthStore()
+  const { isLoading: isStatusLoading } = useAuthStatus()
+  const login = useLogin()
+
+  const form = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      username: '',
+      password: '',
+    },
+  })
+
+  const onSubmit = (data: LoginFormValues) => {
+    login.mutate(data)
+  }
+
+  if (isLoading || isStatusLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Loader2 className="size-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (needsSetup) {
+    return <Navigate to="/setup" />
+  }
+
+  if (isAuthenticated) {
+    return <Navigate to="/admin" />
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
+          <CardDescription>
+            Enter your credentials to access the admin panel
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Username</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter your username"
+                        autoComplete="username"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Enter your password"
+                        autoComplete="current-password"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={login.isPending}
+              >
+                {login.isPending && (
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                )}
+                Sign In
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/routes/setup.tsx

@@ -0,0 +1,171 @@
+import { Navigate, createFileRoute } from '@tanstack/react-router'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Loader2 } from 'lucide-react'
+import { useAuthStore } from '@stores/auth-store'
+import { Button } from '@components/ui/button'
+import { Input } from '@components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@components/ui/form'
+import { useAuthStatus, useSetup } from '@/hooks/use-auth'
+
+const setupSchema = z
+  .object({
+    username: z.string().min(1, 'Username is required'),
+    password: z
+      .string()
+      .min(8, 'Password must be at least 8 characters')
+      .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
+      .regex(/[a-z]/, 'Password must contain at least one lowercase letter')
+      .regex(/[0-9]/, 'Password must contain at least one number'),
+    confirmPassword: z.string().min(1, 'Please confirm your password'),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  })
+
+type SetupFormValues = z.infer<typeof setupSchema>
+
+export const Route = createFileRoute('/setup')({
+  component: SetupPage,
+})
+
+function SetupPage() {
+  const { isAuthenticated, needsSetup, isLoading } = useAuthStore()
+  const { isLoading: isStatusLoading } = useAuthStatus()
+  const setup = useSetup()
+
+  const form = useForm<SetupFormValues>({
+    resolver: zodResolver(setupSchema),
+    defaultValues: {
+      username: 'admin',
+      password: '',
+      confirmPassword: '',
+    },
+  })
+
+  const onSubmit = (data: SetupFormValues) => {
+    setup.mutate({
+      username: data.username,
+      password: data.password,
+    })
+  }
+
+  if (isLoading || isStatusLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Loader2 className="size-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (!needsSetup) {
+    return <Navigate to="/login" />
+  }
+
+  if (isAuthenticated) {
+    return <Navigate to="/admin" />
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-2xl font-bold">Initial Setup</CardTitle>
+          <CardDescription>
+            Create your admin account to get started
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Username</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="admin"
+                        autoComplete="username"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Create a strong password"
+                        autoComplete="new-password"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      At least 8 characters with uppercase, lowercase, and
+                      number
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Confirm Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        placeholder="Confirm your password"
+                        autoComplete="new-password"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={setup.isPending}
+              >
+                {setup.isPending && (
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                )}
+                Create Account
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/stores/auth-store.ts

@@ -0,0 +1,38 @@
+import { create } from 'zustand'
+import type { User } from '@api/auth'
+
+interface AuthState {
+  user: User | null
+  isAuthenticated: boolean
+  needsSetup: boolean
+  isLoading: boolean
+  setUser: (user: User | null) => void
+  setNeedsSetup: (needsSetup: boolean) => void
+  setIsLoading: (isLoading: boolean) => void
+  reset: () => void
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  isAuthenticated: false,
+  needsSetup: false,
+  isLoading: true,
+
+  setUser: (user) =>
+    set({
+      user,
+      isAuthenticated: !!user,
+    }),
+
+  setNeedsSetup: (needsSetup) => set({ needsSetup }),
+
+  setIsLoading: (isLoading) => set({ isLoading }),
+
+  reset: () =>
+    set({
+      user: null,
+      isAuthenticated: false,
+      needsSetup: false,
+      isLoading: false,
+    }),
+}))

src/stores/theme-store.ts

@@ -0,0 +1,55 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { config } from '@lib/config'
+import type { Theme } from '@lib/config'
+
+interface ThemeState {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const getSystemTheme = (): 'light' | 'dark' => {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light'
+}
+
+const applyTheme = (theme: Theme) => {
+  const root = document.documentElement
+  const resolvedTheme = theme === 'system' ? getSystemTheme() : theme
+
+  root.classList.remove('light', 'dark')
+  root.classList.add(resolvedTheme)
+}
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      theme: config.defaultTheme,
+      setTheme: (theme) => {
+        applyTheme(theme)
+        set({ theme })
+      },
+    }),
+    {
+      name: 'theme-storage',
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          applyTheme(state.theme)
+        }
+      },
+    },
+  ),
+)
+
+if (typeof window !== 'undefined') {
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', () => {
+      const { theme } = useThemeStore.getState()
+      if (theme === 'system') {
+        applyTheme('system')
+      }
+    })
+}

src/styles.css

@@ -0,0 +1,185 @@
+@import 'tailwindcss';
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --background: oklch(0.985 0.002 270);
+  --foreground: oklch(0.145 0.015 270);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.015 270);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.015 270);
+  --primary: oklch(0.5 0.19 285);
+  --primary-foreground: oklch(0.98 0.002 270);
+  --secondary: oklch(0.96 0.008 270);
+  --secondary-foreground: oklch(0.2 0.02 270);
+  --muted: oklch(0.96 0.005 270);
+  --muted-foreground: oklch(0.45 0.015 270);
+  --accent: oklch(0.94 0.012 270);
+  --accent-foreground: oklch(0.2 0.02 270);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.98 0.002 270);
+  --border: oklch(0.91 0.008 270);
+  --input: oklch(0.91 0.008 270);
+  --ring: oklch(0.5 0.19 285);
+  --chart-1: oklch(0.5 0.19 285);
+  --chart-2: oklch(0.6 0.16 200);
+  --chart-3: oklch(0.55 0.18 330);
+  --chart-4: oklch(0.65 0.14 160);
+  --chart-5: oklch(0.6 0.16 45);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.98 0.004 270);
+  --sidebar-foreground: oklch(0.145 0.015 270);
+  --sidebar-primary: oklch(0.5 0.19 285);
+  --sidebar-primary-foreground: oklch(0.98 0.002 270);
+  --sidebar-accent: oklch(0.94 0.012 270);
+  --sidebar-accent-foreground: oklch(0.2 0.02 270);
+  --sidebar-border: oklch(0.91 0.008 270);
+  --sidebar-ring: oklch(0.5 0.19 285);
+}
+
+.dark {
+  --background: oklch(0.1 0.015 270);
+  --foreground: oklch(0.93 0.005 270);
+  --card: oklch(0.13 0.018 270);
+  --card-foreground: oklch(0.93 0.005 270);
+  --popover: oklch(0.13 0.018 270);
+  --popover-foreground: oklch(0.93 0.005 270);
+  --primary: oklch(0.7 0.18 285);
+  --primary-foreground: oklch(0.1 0.015 270);
+  --secondary: oklch(0.18 0.02 270);
+  --secondary-foreground: oklch(0.9 0.005 270);
+  --muted: oklch(0.18 0.015 270);
+  --muted-foreground: oklch(0.6 0.01 270);
+  --accent: oklch(0.2 0.025 270);
+  --accent-foreground: oklch(0.9 0.005 270);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.93 0.005 270);
+  --border: oklch(0.22 0.02 270);
+  --input: oklch(0.18 0.02 270);
+  --ring: oklch(0.7 0.18 285);
+  --chart-1: oklch(0.7 0.18 285);
+  --chart-2: oklch(0.6 0.16 200);
+  --chart-3: oklch(0.65 0.16 330);
+  --chart-4: oklch(0.6 0.14 160);
+  --chart-5: oklch(0.65 0.16 45);
+  --sidebar: oklch(0.08 0.012 270);
+  --sidebar-foreground: oklch(0.93 0.005 270);
+  --sidebar-primary: oklch(0.7 0.18 285);
+  --sidebar-primary-foreground: oklch(0.1 0.015 270);
+  --sidebar-accent: oklch(0.2 0.025 270);
+  --sidebar-accent-foreground: oklch(0.9 0.005 270);
+  --sidebar-border: oklch(0.22 0.02 270);
+  --sidebar-ring: oklch(0.7 0.18 285);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.6s ease-out forwards;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+}
+
+.animation-delay-100 {
+  animation-delay: 100ms;
+}
+
+.animation-delay-200 {
+  animation-delay: 200ms;
+}
+
+.animation-delay-300 {
+  animation-delay: 300ms;
+}
+
+.animation-delay-400 {
+  animation-delay: 400ms;
+}

tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "eslint.config.js",
+    "prettier.config.js",
+    "vite.config.js"
+  ],
+
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@routes/*": ["./src/routes/*"],
+      "@lib/*": ["./src/lib/*"],
+      "@stores/*": ["./src/stores/*"],
+      "@api/*": ["./src/api/*"],
+      "@containers/*": ["./src/containers/*"],
+      "@interfaces/*": ["./src/interfaces/*"]
+    }
+  }
+}

vite.config.ts

@@ -0,0 +1,38 @@
+import { URL, fileURLToPath } from 'node:url'
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  base: '/',
+  plugins: [
+    devtools(),
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+    viteReact(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@components': fileURLToPath(
+        new URL('./src/components', import.meta.url),
+      ),
+      '@routes': fileURLToPath(new URL('./src/routes', import.meta.url)),
+      '@lib': fileURLToPath(new URL('./src/lib', import.meta.url)),
+      '@stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
+      '@containers': fileURLToPath(
+        new URL('./src/containers', import.meta.url),
+      ),
+      '@interfaces': fileURLToPath(
+        new URL('./src/interfaces', import.meta.url),
+      ),
+      '@api': fileURLToPath(new URL('./src/api', import.meta.url)),
+    },
+  },
+})