🖼️ added support for links to blogposts and support image sizing from .md files

- Should investigate how to resize the image from .md specs

.claude/skills/nextjs-coding-standards/SKILL.md

@@ -0,0 +1,774 @@
+---
+name: nextjs-coding-standards
+description: Next.js 16 coding standards including file naming conventions, API patterns, theming, styling guidelines, and directory structure. Use when writing or reviewing code.
+allowed-tools: Read, Grep, Glob
+---
+
+# Next.js 16 Coding Standards
+
+Reference this skill when writing or reviewing code to ensure consistency with project conventions.
+
+---
+
+## File Naming Conventions
+
+### Files and Directories
+
+**Use kebab-case for all file names:**
+
+```
+✅ user-profile.tsx
+✅ blog-post-card.tsx
+✅ theme-toggle.tsx
+
+❌ UserProfile.tsx
+❌ blogPostCard.tsx
+❌ ThemeToggle.tsx
+```
+
+**Why kebab-case?**
+
+- Cross-platform compatibility (Windows vs Unix)
+- URL-friendly (file names often map to routes)
+- Easier to parse and read
+- Industry standard for Next.js projects
+
+**Special Next.js Files:**
+
+```
+page.tsx          # Route pages
+layout.tsx        # Layout components
+not-found.tsx     # 404 pages
+loading.tsx       # Loading states
+error.tsx         # Error boundaries
+route.ts          # API route handlers
+```
+
+### Component Names (Inside Files)
+
+**Use PascalCase for component names:**
+
+```typescript
+// File: user-profile.tsx
+export function UserProfile() {
+  return <div>...</div>
+}
+
+// File: blog-post-card.tsx
+export default function BlogPostCard() {
+  return <article>...</article>
+}
+```
+
+### Variables, Functions, Props
+
+**Use camelCase:**
+
+```typescript
+// Variables
+const userSettings = {}
+const isLoading = false
+
+// Functions
+function handleSubmit() {}
+function formatDate(date: string) {}
+
+// Props
+interface ButtonProps {
+  onClick: () => void
+  isDisabled: boolean
+  className?: string
+}
+
+// Custom Hooks
+function useTheme() {}
+function useMarkdown() {}
+```
+
+### Constants
+
+**Use SCREAMING_SNAKE_CASE:**
+
+```typescript
+const API_BASE_URL = 'https://api.example.com'
+const MAX_RETRIES = 3
+const DEFAULT_LOCALE = 'ro-RO'
+```
+
+---
+
+## Next.js 16 API Patterns
+
+### Route Handlers
+
+**Use Route Handlers (not legacy API Routes):**
+
+```typescript
+// app/api/posts/route.ts
+import { NextRequest, NextResponse } from 'next/server'
+
+// Export named functions for HTTP methods
+export async function GET(request: NextRequest) {
+  const posts = await getAllPosts()
+  return NextResponse.json({ posts })
+}
+
+export async function POST(request: NextRequest) {
+  const body = await request.json()
+  // Process request
+  return NextResponse.json({ success: true }, { status: 201 })
+}
+```
+
+### Type-Safe Validation with Zod
+
+**Always validate input with Zod:**
+
+```typescript
+import { z } from 'zod'
+import { NextRequest, NextResponse } from 'next/server'
+
+const bodySchema = z.object({
+  title: z.string().min(1).max(200),
+  content: z.string(),
+  tags: z.array(z.string()).max(3),
+})
+
+export async function POST(request: NextRequest) {
+  const json = await request.json()
+  const parsed = bodySchema.safeParse(json)
+
+  if (!parsed.success) {
+    return NextResponse.json({ error: 'Validation failed', details: parsed.error }, { status: 400 })
+  }
+
+  // parsed.data is fully typed
+  const { title, content, tags } = parsed.data
+  // ... business logic
+}
+```
+
+**Key Points:**
+
+- Use `safeParse()` instead of `parse()` to avoid try/catch
+- Return structured error responses
+- Use appropriate HTTP status codes
+- Infer TypeScript types from Zod schemas
+
+### Error Handling
+
+**Return meaningful status codes:**
+
+```typescript
+200 // Success
+201 // Created
+400 // Bad Request (validation errors)
+401 // Unauthorized
+403 // Forbidden
+404 // Not Found
+500 // Internal Server Error
+```
+
+**Structured error responses:**
+
+```typescript
+return NextResponse.json(
+  {
+    error: 'Resource not found',
+    code: 'NOT_FOUND',
+    timestamp: new Date().toISOString(),
+  },
+  { status: 404 }
+)
+```
+
+---
+
+## Theming Patterns
+
+### next-themes Setup
+
+**Root Layout (Server Component):**
+
+```typescript
+// app/layout.tsx
+import { ThemeProvider } from 'next-themes'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="ro" suppressHydrationWarning>
+      <body>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          storageKey="blog-theme"
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+**Critical:** Always add `suppressHydrationWarning` to `<html>` tag.
+
+### Theme Toggle Component
+
+**Avoid hydration mismatches with mounted state:**
+
+```typescript
+// components/theme-toggle.tsx
+'use client'
+
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // Prevent hydration mismatch
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) {
+    return <div className="w-9 h-9 animate-pulse" />
+  }
+
+  return (
+    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+      {theme === 'dark' ? '🌙' : '☀️'}
+    </button>
+  )
+}
+```
+
+**Pattern:** Always check `mounted` state before rendering theme-dependent UI.
+
+### CSS Variables for Theme Tokens
+
+**Define in globals.css:**
+
+```css
+@layer base {
+  :root {
+    --bg-primary: 255 255 255;
+    --bg-secondary: 248 250 252;
+    --text-primary: 15 23 42;
+    --text-secondary: 51 65 85;
+  }
+
+  .dark {
+    --bg-primary: 24 24 27;
+    --bg-secondary: 15 23 42;
+    --text-primary: 241 245 249;
+    --text-secondary: 203 213 225;
+  }
+}
+```
+
+**Use in components:**
+
+```tsx
+<div className="bg-[rgb(var(--bg-primary))] text-[rgb(var(--text-primary))]">
+  Theme-aware component
+</div>
+```
+
+### Tailwind Configuration
+
+**Enable class-based dark mode:**
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  darkMode: 'class', // Required for next-themes
+  theme: {
+    extend: {
+      colors: {
+        'dark-primary': '#18181b',
+        accent: {
+          DEFAULT: '#164e63',
+          hover: '#155e75',
+        },
+      },
+    },
+  },
+}
+```
+
+**Use dark: variant:**
+
+```tsx
+<div className="bg-slate-100 dark:bg-zinc-900 text-slate-900 dark:text-slate-100">
+  Automatically switches based on theme
+</div>
+```
+
+---
+
+## Styling Guidelines (Tailwind CSS)
+
+### Utility-First Philosophy
+
+**Prefer inline utilities over custom CSS:**
+
+```tsx
+// ✅ Good: Inline utilities
+<article className="border-4 border-slate-800 p-6 bg-zinc-900 hover:border-cyan-900">
+  <h2 className="text-2xl font-bold uppercase tracking-wider">Title</h2>
+</article>
+
+// ❌ Avoid: @apply (increases bundle size)
+/* styles.css */
+.card {
+  @apply border-4 border-slate-800 p-6 bg-zinc-900;
+}
+```
+
+**Exception:** Only use `@apply` for truly global base styles in `globals.css`.
+
+### Component Extraction
+
+**Extract to React components when reused:**
+
+```typescript
+// ✅ Extract repeated patterns to components
+export function Card({ children, className = "" }) {
+  return (
+    <div className={`border-4 border-slate-800 p-6 bg-zinc-900 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+// Usage
+<Card className="hover:border-cyan-900">
+  <h2>Title</h2>
+</Card>
+```
+
+**Don't extract:** One-off components or single-use patterns.
+
+### Class Organization
+
+**Group utilities logically:**
+
+```tsx
+// Layout → Spacing → Colors → Typography → Effects
+<div className="
+  flex flex-col           // Layout
+  gap-4 p-6              // Spacing
+  bg-zinc-900            // Colors
+  border-4 border-slate-800
+  text-slate-100
+  font-mono text-sm      // Typography
+  uppercase tracking-wider
+  hover:border-cyan-900  // Effects
+  transition-colors
+">
+```
+
+**Tip:** Use Prettier plugin for automatic Tailwind class sorting.
+
+### Responsive Design
+
+**Mobile-first approach:**
+
+```tsx
+// Base classes = mobile, add breakpoints for larger screens
+<div className="
+  flex-col              // Mobile: vertical stack
+  md:flex-row           // Tablet+: horizontal layout
+  lg:gap-8              // Desktop: more spacing
+">
+```
+
+**Standard breakpoints:**
+
+```
+sm: 640px   // Small tablets
+md: 768px   // Tablets
+lg: 1024px  // Laptops
+xl: 1280px  // Desktops
+2xl: 1536px // Large screens
+```
+
+### Conditional Styling
+
+**For complex conditions, use variants:**
+
+```typescript
+const cardVariants = {
+  default: "border-slate-800 bg-zinc-900",
+  highlighted: "border-cyan-600 bg-cyan-950",
+  error: "border-red-600 bg-red-950",
+}
+
+<Card className={cardVariants[variant]} />
+```
+
+---
+
+## Directory Structure Standards
+
+### Project Organization
+
+```
+app/
+├── (auth)/              # Route groups (no URL segment)
+│   ├── login/
+│   └── register/
+├── api/                 # API routes
+│   └── posts/
+│       └── route.ts
+├── blog/
+│   ├── page.tsx
+│   └── [slug]/
+│       └── page.tsx
+├── @breadcrumbs/        # Parallel routes
+│   └── default.tsx
+├── layout.tsx           # Root layout
+├── globals.css
+└── page.tsx
+
+components/
+├── blog/                # Domain-specific components
+│   ├── post-card.tsx
+│   └── markdown-renderer.tsx
+├── layout/              # Layout components
+│   ├── header.tsx
+│   └── footer.tsx
+└── ui/                  # Reusable UI primitives
+    ├── button.tsx
+    └── card.tsx
+
+lib/
+├── api/                 # API clients, fetch wrappers
+│   └── client.ts
+├── types/               # TypeScript type definitions
+│   └── post.ts
+├── markdown.ts          # Business logic modules
+├── seo.ts
+└── utils.ts             # Pure utility functions
+
+public/
+├── blog/                # Blog-specific assets
+│   └── images/
+└── icons/
+
+content/                 # Content files (outside app/)
+└── blog/
+    └── posts.md
+```
+
+### lib/ Organization
+
+**Modules in lib/:**
+
+- Substantial business logic (markdown.ts, seo.ts)
+- API clients and data fetching
+- Database connections
+- Authentication logic
+
+**Utils in lib/utils.ts:**
+
+- Pure helper functions
+- Formatters (formatDate, formatCurrency)
+- Validators (isEmail, isValidUrl)
+- String manipulations
+
+**Types in lib/types/:**
+
+- Shared TypeScript interfaces
+- API response types
+- Domain models
+- Colocated with their modules when possible
+
+### Component Organization
+
+**By domain/feature:**
+
+```
+components/
+├── blog/               # Blog-specific
+│   ├── post-card.tsx
+│   ├── post-list.tsx
+│   └── markdown-renderer.tsx
+├── auth/               # Auth-specific
+│   ├── login-form.tsx
+│   └── signup-form.tsx
+└── ui/                 # Reusable primitives
+    ├── button.tsx
+    ├── card.tsx
+    └── input.tsx
+```
+
+**Not by type:**
+
+```
+❌ Don't organize like this:
+components/
+├── forms/
+├── buttons/
+├── cards/
+└── modals/
+```
+
+### Public Assets
+
+**Organize by feature:**
+
+```
+public/
+├── blog/
+│   ├── images/
+│   └── thumbnails/
+├── icons/
+│   ├── social/
+│   └── ui/
+└── fonts/
+```
+
+**Naming conventions:**
+
+- Use descriptive names: `hero-background.jpg` not `img1.jpg`
+- Use kebab-case: `user-avatar.png`
+- Include dimensions for images: `logo-512x512.png`
+
+---
+
+## TypeScript Best Practices
+
+### Type Safety
+
+**Avoid `any`:**
+
+```typescript
+// ❌ Bad
+function processData(data: any) {}
+
+// ✅ Good
+function processData(data: unknown) {
+  if (typeof data === 'string') {
+    // TypeScript knows data is string here
+  }
+}
+
+// ✅ Better: Use specific types
+interface PostData {
+  title: string
+  content: string
+}
+function processData(data: PostData) {}
+```
+
+### Infer Types from Zod
+
+**Don't duplicate types:**
+
+```typescript
+import { z } from 'zod'
+
+// Define schema once
+const postSchema = z.object({
+  title: z.string(),
+  content: z.string(),
+  tags: z.array(z.string()),
+})
+
+// Infer TypeScript type
+type Post = z.infer<typeof postSchema>
+
+// Now you have both runtime validation and compile-time types
+```
+
+### Type Imports
+
+**Use type imports for types only:**
+
+```typescript
+// ✅ Good: Explicit type import
+import type { Metadata } from 'next'
+import type { Post } from '@/lib/types/post'
+
+// ✅ Mixed: Regular and type imports
+import { getAllPosts } from '@/lib/markdown'
+import type { Post } from '@/lib/types/post'
+```
+
+---
+
+## Next.js 16 Specific Patterns
+
+### Async Server Components
+
+**Fetch data directly in components:**
+
+```typescript
+// app/blog/page.tsx
+export default async function BlogPage() {
+  // Server-side data fetching (no useEffect needed)
+  const posts = await getAllPosts()
+
+  return (
+    <div>
+      {posts.map(post => (
+        <PostCard key={post.slug} post={post} />
+      ))}
+    </div>
+  )
+}
+```
+
+### Static Generation
+
+**Use generateStaticParams for dynamic routes:**
+
+```typescript
+// app/blog/[slug]/page.tsx
+export async function generateStaticParams() {
+  const posts = await getAllPosts()
+  return posts.map(post => ({
+    slug: post.slug.split('/'), // For catch-all routes
+  }))
+}
+
+export async function generateMetadata({ params }) {
+  const post = getPostBySlug(params.slug.join('/'))
+  return {
+    title: post.frontmatter.title,
+    description: post.frontmatter.description,
+  }
+}
+
+export default async function PostPage({ params }) {
+  const post = getPostBySlug(params.slug.join('/'))
+  return <article>{/* render post */}</article>
+}
+```
+
+### Client Components
+
+**Minimize 'use client' usage:**
+
+```typescript
+// ❌ Unnecessary client component
+'use client'
+export function StaticCard({ title }) {
+  return <div>{title}</div>
+}
+
+// ✅ Keep as server component (default)
+export function StaticCard({ title }) {
+  return <div>{title}</div>
+}
+
+// ✅ Only use 'use client' when necessary
+'use client'
+import { useState } from 'react'
+
+export function InteractiveCard({ title }) {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <div onClick={() => setIsOpen(!isOpen)}>
+      {title}
+    </div>
+  )
+}
+```
+
+**When to use 'use client':**
+
+- Using React hooks (useState, useEffect, etc.)
+- Using event handlers (onClick, onChange, etc.)
+- Using browser APIs (window, localStorage, etc.)
+- Using context consumers
+
+### Parallel Routes
+
+**Use for layout composition:**
+
+```typescript
+// app/layout.tsx
+export default function RootLayout({
+  children,
+  breadcrumbs,  // From @breadcrumbs parallel route
+}: {
+  children: React.ReactNode
+  breadcrumbs: React.ReactNode
+}) {
+  return (
+    <>
+      {breadcrumbs}
+      <main>{children}</main>
+    </>
+  )
+}
+```
+
+---
+
+## Common Pitfalls
+
+### 1. Hydration Mismatches
+
+**Problem:** Theme-dependent content renders differently on server vs client.
+
+**Solution:** Use mounted state pattern (see Theming section).
+
+### 2. Image Paths
+
+**Problem:** Incorrect public asset paths.
+
+```typescript
+// ❌ Wrong
+<Image src="blog/image.jpg" />
+
+// ✅ Correct
+<Image src="/blog/image.jpg" />  // Leading slash
+```
+
+### 3. Dynamic Route Params
+
+**Problem:** Forgetting slug should be an array for catch-all routes.
+
+```typescript
+// app/blog/[...slug]/page.tsx
+export async function generateStaticParams() {
+  // ❌ Wrong
+  return posts.map(post => ({ slug: post.slug }))
+
+  // ✅ Correct
+  return posts.map(post => ({ slug: post.slug.split('/') }))
+}
+```
+
+### 4. Over-using Client Components
+
+**Problem:** Adding 'use client' unnecessarily.
+
+**Solution:** Keep components as Server Components by default. Only add 'use client' when you need hooks, events, or browser APIs.
+
+### 5. Date Formats
+
+**Problem:** Inconsistent date formatting.
+
+**Solution:** Use consistent ISO format (YYYY-MM-DD) in data, format for display:
+
+```typescript
+// In frontmatter
+date: '2025-01-15'
+
+// For display
+formatDate(post.frontmatter.date) // "15 ianuarie 2025" (Romanian)
+```
+
+---
+
+## Reference
+
+For project-specific architecture and design philosophy, see `CLAUDE.md` at the root of this repository.
+
+This skill focuses on coding conventions and standards. For architecture patterns, markdown processing, and industrial design aesthetic guidelines, refer to the main documentation.

.gitea/workflows/main.yml

@@ -0,0 +1,361 @@
+# Gitea Actions Workflow for Next.js Blog Application
+# This workflow builds a Docker image and deploys it to production
+#
+# Workflow triggers:
+#   - Push to master branch (automatic deployment)
+#   - Manual trigger via workflow_dispatch
+#
+# Required Secrets (configure in Gitea repository settings):
+#   - PRODUCTION_HOST: IP address or hostname of production server
+#   - PRODUCTION_USER: SSH username (e.g., 'deployer')
+#   - SSH_PRIVATE_KEY: Private SSH key for authentication
+#
+# Environment Variables (configured below):
+#   - REGISTRY: Docker registry URL
+#   - IMAGE_NAME: Docker image name
+#
+# Docker Registry Configuration:
+#   - Current registry (repository.workspace:5000) is INSECURE - no authentication required
+#   - Registry login steps are SKIPPED to avoid 7+ minute timeout delays
+#   - Docker push/pull operations work without credentials
+#   - If switching to authenticated registry: uncomment login steps and configure secrets
+
+name: Build and Deploy Next.js Blog to Production
+
+on:
+  push:
+    branches:
+      - master # Trigger on push to master branch
+  workflow_dispatch: # Allow manual trigger from Gitea UI
+
+env:
+  # Docker registry configuration
+  # Update this to match your private registry URL
+  REGISTRY: repository.workspace:5000
+  IMAGE_NAME: mypage
+
+jobs:
+  # ============================================
+  # Job 1: Code Quality Checks (Linting)
+  # ============================================
+  lint:
+    name: 🔍 Code Quality Checks
+    runs-on: node-22
+    # env:
+    #   ACTIONS_RUNTIME_URL: http://192.168.1.53:3000 # Setează la nivel de job
+
+    steps:
+      - name: 🔎 Checkout code
+        uses: actions/checkout@v4
+        # with:
+        #   github-server-url: ${{ env.ACTIONS_RUNTIME_URL }}
+
+      # - name: 📦 Setup Node.js
+      #   uses: actions/setup-node@v4
+      #   with:
+      #     node-version: "22"
+      #     cache: "npm"
+
+      - name: 📥 Install dependencies
+        run: npm ci
+
+      - name: 🔍 Run ESLint
+        run: npm run lint
+
+      - name: 💅 Check code formatting (Prettier)
+        run: npm run format:check
+        continue-on-error: true
+
+      - name: 🔤 TypeScript type checking
+        run: npx tsc --noEmit
+
+      - name: ✅ All quality checks passed
+        run: |
+          echo "✅ All code quality checks passed successfully!"
+          echo "  - ESLint: No linting errors"
+          echo "  - Prettier: Code is properly formatted"
+          echo "  - TypeScript: No type errors"
+
+  # ============================================
+  # Job 2: Build and Push Docker Image
+  # ============================================
+  build-and-push:
+    name: 🏗️ Build and Push Docker Image
+    runs-on: ubuntu-latest
+    needs: [lint] # Wait for lint job to complete successfully
+
+    steps:
+      - name: 🔎 Checkout code
+        uses: actions/checkout@v4
+
+      # Insecure registry configuration - no authentication required
+      # The registry at repository.workspace:5000 does not require login
+      # Docker push/pull operations work without credentials
+      - name: ℹ️ Registry configuration (insecure - no login required)
+        run: |
+          echo "=== Docker Registry Configuration ==="
+          echo "Registry: ${{ env.REGISTRY }}"
+          echo "Type: Insecure (no authentication required)"
+          echo ""
+          echo "ℹ️ Skipping registry login - insecure registry allows push/pull without credentials"
+          echo ""
+          echo "If your registry requires authentication in the future:"
+          echo "  1. Set REGISTRY_USERNAME and REGISTRY_PASSWORD secrets in Gitea"
+          echo "  2. Uncomment the login step below this message"
+          echo "  3. Change registry URL to authenticated registry"
+
+      # Uncomment this step if registry requires authentication in the future
+      # - name: 🔐 Log in to Docker Registry
+      #   timeout-minutes: 1
+      #   run: |
+      #     if [ -n "${{ secrets.REGISTRY_USERNAME }}" ] && [ -n "${{ secrets.REGISTRY_PASSWORD }}" ]; then
+      #       echo "Attempting login to ${{ env.REGISTRY }}..."
+      #       timeout 30s bash -c 'echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ env.REGISTRY }} -u "${{ secrets.REGISTRY_USERNAME }}" --password-stdin' || {
+      #         echo "⚠️ Login failed - continuing anyway"
+      #       }
+      #     fi
+
+      - name: 🏗️ Build Docker image
+        timeout-minutes: 30
+        env:
+          DOCKER_BUILDKIT: 1 # Enable BuildKit for faster builds and better caching
+        run: |
+          echo "Building Next.js Docker image with BuildKit..."
+          echo "Build context size:"
+          du -sh . 2>/dev/null || echo "Cannot measure context size"
+
+          # Build the Docker image
+          # - Uses Dockerfile.nextjs from project root
+          # - Tags image with both 'latest' and commit SHA
+          # - Enables inline cache for faster subsequent builds
+          # -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }} ❗ do this if deploying on PR creation
+          docker build \
+            --progress=plain \
+            --build-arg BUILDKIT_INLINE_CACHE=1 \
+            -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest \
+            -f Dockerfile.nextjs \
+            .
+
+          echo "✅ Build successful"
+          echo "Image size:"
+          docker images ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+
+      - name: 🚀 Push Docker image to registry
+        run: |
+          echo "Pushing image to registry..."
+
+          # Push both tags (latest and commit SHA)
+          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+          # docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
+
+          echo "✅ Image pushed successfully"
+          echo "  - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest"
+          # echo "  - ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}"
+
+  # ============================================
+  # Job 2: Deploy to Production Server
+  # ============================================
+  deploy-production:
+    name: 🚀 Deploy to Production
+    runs-on: ubuntu-latest
+    needs: [build-and-push] # Wait for build job to complete
+    environment:
+      name: production
+      url: http://192.168.1.54:3030 # Update with your actual production URL
+
+    steps:
+      - name: 🔎 Checkout code (for docker-compose file)
+        uses: actions/checkout@v4
+
+      # Verify Docker is accessible on production server
+      # Registry authentication is not required for insecure registry
+      - name: ℹ️ Verify production server Docker access
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ vars.PRODUCTION_HOST }}
+          username: ${{ vars.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          script: |
+            echo "=== Verifying Docker is accessible ==="
+            docker info > /dev/null 2>&1 || {
+              echo "❌ Docker is not running or user has no access"
+              echo "Please ensure Docker is installed and user is in docker group"
+              exit 1
+            }
+            echo "✅ Docker is accessible"
+
+            echo ""
+            echo "=== Registry Configuration ==="
+            echo "Registry: ${{ env.REGISTRY }}"
+            echo "Type: Insecure (no authentication)"
+            echo "ℹ️ Skipping registry login - push/pull will work without credentials"
+
+      - name: 📁 Ensure application directory structure
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ vars.PRODUCTION_HOST }}
+          username: ${{ vars.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          script: |
+            echo "=== Ensuring application directory structure ==="
+
+            # Verify base directory exists and is writable
+            # Update /opt/mypage to match your deployment directory
+            if [ ! -d /opt/mypage ]; then
+              echo "❌ /opt/mypage does not exist!"
+              echo "Please run manually on production server:"
+              echo "  sudo mkdir -p /opt/mypage"
+              echo "  sudo chown -R deployer:docker /opt/mypage"
+              echo "  sudo chmod -R 775 /opt/mypage"
+              exit 1
+            fi
+
+            if [ ! -w /opt/mypage ]; then
+              echo "❌ /opt/mypage is not writable by $USER user"
+              echo "Please run manually on production server:"
+              echo "  sudo chown -R deployer:docker /opt/mypage"
+              echo "  sudo chmod -R 775 /opt/mypage"
+              exit 1
+            fi
+
+            # Create data directories for logs
+            mkdir -p /opt/mypage/data/logs || { echo "❌ Failed to create logs directory"; exit 1; }
+
+            echo "✅ Directory structure ready"
+            ls -la /opt/mypage
+
+      - name: 📦 Copy docker-compose.prod.yml to server
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ vars.PRODUCTION_HOST }}
+          username: ${{ vars.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          source: "docker-compose.prod.yml"
+          target: "/opt/mypage/"
+          overwrite: true
+
+      - name: 🐳 Deploy application via Docker Compose
+        uses: appleboy/ssh-action@v1.0.3
+        env:
+          # Optional: only needed if registry requires authentication
+          REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD || '' }}
+          REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME || '' }}
+          REGISTRY_URL: ${{ env.REGISTRY }}
+          IMAGE_FULL: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
+        with:
+          host: ${{ vars.PRODUCTION_HOST }}
+          username: ${{ vars.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          envs: REGISTRY_PASSWORD,REGISTRY_USERNAME,REGISTRY_URL,IMAGE_FULL
+          script_stop: true # Stop execution on any error
+          script: |
+            echo "=== Starting deployment to production server ==="
+            cd /opt/mypage
+
+            # Registry configuration - insecure registry does not require authentication
+            echo "=== Registry Configuration ==="
+            echo "Registry: $REGISTRY_URL"
+            echo "Type: Insecure (no authentication required)"
+            echo "ℹ️ Skipping registry login"
+            echo ""
+
+            # Pull latest image from registry
+            echo "=== Pulling latest Docker image ==="
+            docker pull "$IMAGE_FULL"
+
+            if [ $? -ne 0 ]; then
+              echo "❌ Failed to pull image, aborting deployment"
+              exit 1
+            fi
+
+            # Deploy new container
+            # - Stops old container
+            # - Removes old container
+            # - Creates and starts new container with fresh image
+            echo "=== Deploying new container ==="
+            docker compose -f docker-compose.prod.yml up -d --force-recreate
+
+            if [ $? -ne 0 ]; then
+              echo "❌ Failed to deploy new container"
+              echo "Check logs above for errors"
+              exit 1
+            fi
+
+            # Check container status
+            echo "=== Container Status ==="
+            docker compose -f docker-compose.prod.yml ps
+
+            # Show recent logs for debugging
+            echo "=== Recent application logs ==="
+            docker compose -f docker-compose.prod.yml logs --tail=50
+
+            # Clean up old/unused images to save disk space
+            echo "=== Cleaning up old Docker images ==="
+            docker image prune -f
+
+            echo "✅ Deployment completed successfully ==="
+
+      - name: ❤️ Health check
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ vars.PRODUCTION_HOST }}
+          username: ${{ vars.PRODUCTION_USER }}
+          key: ${{ secrets.SSH_PRIVATE_KEY }}
+          port: 22
+          script: |
+            echo "=== Performing health check ==="
+            cd /opt/mypage
+            max_attempts=15
+            attempt=1
+
+            # Wait for container to be healthy (respect start_period from health check)
+            echo "Waiting for application to start (40s start period)..."
+            sleep 40
+
+            # Retry health check up to 15 times
+            while [ $attempt -le $max_attempts ]; do
+              # Check if application responds at port 3030
+              if curl -f http://localhost:3030/ > /dev/null 2>&1; then
+                echo "✅ Health check passed!"
+                echo "Application is healthy and responding to requests"
+                exit 0
+              fi
+              echo "Attempt $attempt/$max_attempts: Health check failed, retrying in 5s..."
+              sleep 5
+              attempt=$((attempt + 1))
+            done
+
+            # Health check failed - gather diagnostic information
+            echo "❌ Health check failed after $max_attempts attempts"
+            echo ""
+            echo "=== Container Status ==="
+            docker compose -f docker-compose.prod.yml ps
+            echo ""
+            echo "=== Container Health ==="
+            docker inspect mypage-prod --format='{{.State.Health.Status}}' 2>/dev/null || echo "No health status"
+            echo ""
+            echo "=== Recent Application Logs ==="
+            docker compose -f docker-compose.prod.yml logs --tail=100
+
+            exit 1
+
+      - name: 📊 Deployment summary
+        if: always() # Run even if previous steps fail
+        run: |
+          echo "### 🚀 Deployment Summary" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "- **Environment**: Production" >> $GITHUB_STEP_SUMMARY
+          echo "- **Image**: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest" >> $GITHUB_STEP_SUMMARY
+          echo "- **Commit**: \`${{ github.sha }}\`" >> $GITHUB_STEP_SUMMARY
+          echo "- **Workflow Run**: #${{ github.run_number }}" >> $GITHUB_STEP_SUMMARY
+          echo "- **Triggered By**: ${{ github.actor }}" >> $GITHUB_STEP_SUMMARY
+          echo "- **Status**: ${{ job.status }}" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "**Next Steps:**" >> $GITHUB_STEP_SUMMARY
+          echo "1. Verify application is accessible at production URL" >> $GITHUB_STEP_SUMMARY
+          echo "2. Check application logs for any errors" >> $GITHUB_STEP_SUMMARY
+          echo "3. Monitor resource usage and performance" >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -16,3 +16,9 @@ yarn-error.log*
 .vercel
 *.tsbuildinfo
 next-env.d.ts
+
+# Build artifacts (copied images)
+public/blog/**/*.jpg
+public/blog/**/*.png
+public/blog/**/*.webp
+public/blog/**/*.gif

.prettierignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+out
+build
+dist
+.cache
+package-lock.json
+public
+coverage

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "arrowParens": "avoid",
+  "trailingComma": "es5"
+}

CLAUDE.md

@@ -0,0 +1,347 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a **Next.js 16** blog/portfolio application built with **TypeScript**, **Tailwind CSS**, and **React 19**. The project uses **App Router** with Static Site Generation (SSG) for blog posts stored as Markdown files.
+
+**Design Philosophy:** Industrial/SCP-inspired aesthetic with terminal/cyberpunk elements. Sharp edges, thick borders, monospace fonts, darker color palettes (slate/zinc/cyan/emerald tones). No modern Material UI feel - think government documents, classified files, brutal utilitarian design.
+
+## Development Commands
+
+```bash
+# Development server (runs on port 3030)
+npm run dev
+
+# Production build
+npm run build
+
+# Start production server
+npm run start
+
+# Lint code
+npm run lint
+
+# Validate all markdown posts (frontmatter, format, tags)
+npm run validate-posts
+```
+
+## Architecture Overview
+
+### Next.js 16 App Router Structure
+
+```
+app/
+├── @breadcrumbs/          # Parallel route for breadcrumb navigation
+│   ├── default.tsx        # Auto-generated breadcrumbs
+│   ├── blog/[...slug]/    # Post-specific breadcrumbs with titles
+│   ├── tags/[tag]/        # Tag-specific breadcrumbs
+│   └── about/             # Static breadcrumbs
+├── blog/
+│   ├── page.tsx           # Blog listing with all posts
+│   └── [...slug]/         # Dynamic post routes (supports nested paths)
+│       ├── page.tsx       # Post rendering with SSG
+│       └── not-found.tsx  # Custom 404 for missing posts
+├── about/page.tsx
+├── layout.tsx             # Root layout with metadata, fonts, breadcrumbs slot
+└── page.tsx               # Landing page (hero + featured posts)
+```
+
+**Key Architectural Patterns:**
+
+1. **Parallel Routes:** `@breadcrumbs` slot renders dynamic navigation based on current route without prop drilling
+2. **Catch-all Routes:** `[...slug]` supports nested blog posts (e.g., `/blog/tech/article-name`)
+3. **Static Generation:** `generateStaticParams()` pre-renders all blog posts at build time
+4. **Server Components by Default:** All components are RSC unless marked with `'use client'`
+
+### Markdown System
+
+```
+content/blog/               # Markdown files (supports nested directories)
+├── example.md
+└── tech/
+    └── article.md
+
+lib/
+├── markdown.ts            # Core markdown utilities
+│   ├── getPostBySlug()    # Read single post with path sanitization
+│   ├── getAllPosts()      # Get all posts, sorted by date, recursive
+│   ├── getRelatedPosts()  # Find similar posts by tags
+│   └── validateFrontmatter()
+├── types/frontmatter.ts   # TypeScript interfaces for Post, FrontMatter
+└── utils.ts               # formatDate(), formatRelativeDate(), generateExcerpt()
+```
+
+**Frontmatter Schema:**
+
+```yaml
+---
+title: string # Required
+description: string # Required
+date: 'YYYY-MM-DD' # Required, ISO format
+author: string # Required
+tags: [string, string?, string?] # Max 3 tags
+image?: string # Optional hero image
+draft?: boolean # Exclude from listings if true
+---
+```
+
+**Security:** Path sanitization prevents directory traversal attacks. All file reads use `path.resolve()` and validate paths stay within `content/blog/`.
+
+### Components Organization
+
+```
+components/
+├── blog/
+│   └── MarkdownRenderer.tsx    # Client component for rendering markdown
+│                               # Custom components: images (Next Image),
+│                               # links (external vs internal), code blocks
+├── layout/
+│   ├── Breadcrumbs.tsx         # Client component, uses usePathname()
+│   └── BreadcrumbsSchema.tsx   # Schema.org structured data for SEO
+└── [future components]
+```
+
+## Coding Standards for Next.js 16
+
+### File Naming Conventions
+
+**Files and Directories:**
+
+- Use **kebab-case** for all file names: `user-profile.tsx`, `blog-post.tsx`
+- Special Next.js files: `page.tsx`, `layout.tsx`, `not-found.tsx`, `loading.tsx`
+
+**Component Names (inside files):**
+
+- Use **PascalCase**: `export function UserProfile()`, `export default BlogPost`
+
+**Variables, Functions, Props:**
+
+- Use **camelCase**: `const userSettings = {}`, `function handleSubmit() {}`
+- Hooks: `useTheme`, `useMarkdown`
+
+**Constants:**
+
+- Use **SCREAMING_SNAKE_CASE**: `const API_BASE_URL = "..."`
+
+**Why kebab-case for files?**
+
+- Cross-platform compatibility (Windows vs Unix)
+- URL-friendly (file names often map to routes)
+- Easier to parse and read
+
+### Theme Management & Reusability
+
+**Recommended Pattern:** Use `next-themes` library for dark/light mode
+
+```typescript
+// Root layout.tsx
+import { ThemeProvider } from 'next-themes'
+
+export default function RootLayout({ children }) {
+  return (
+    <html suppressHydrationWarning>
+      <body>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          storageKey="blog-theme"
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+```
+
+**Client Component for Toggle:**
+
+```typescript
+// components/theme-toggle.tsx
+'use client'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // Prevent hydration mismatch
+  useEffect(() => setMounted(true), [])
+  if (!mounted) return <div>...</div>
+
+  return <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+    Toggle
+  </button>
+}
+```
+
+**Tailwind Configuration:**
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  darkMode: 'class', // Use 'class' strategy for next-themes
+  theme: {
+    extend: {
+      colors: {
+        // Define custom colors for consistency
+        'dark-primary': '#18181b',
+        accent: { DEFAULT: '#164e63', hover: '#155e75' },
+      },
+    },
+  },
+}
+```
+
+**CSS Variables Pattern:**
+
+```css
+/* globals.css */
+:root {
+  --bg-primary: 255 255 255;
+  --text-primary: 15 23 42;
+}
+
+.dark {
+  --bg-primary: 24 24 27;
+  --text-primary: 241 245 249;
+}
+
+/* Use in components */
+.card {
+  @apply bg-[rgb(var(--bg-primary))] text-[rgb(var(--text-primary))];
+}
+```
+
+### Provider Pattern Best Practices
+
+1. **Server Component Boundary:** Keep `layout.tsx` as Server Component, wrap only `children` with Client Provider
+2. **Avoid Hydration Mismatches:** Always use `suppressHydrationWarning` on `<html>` tag
+3. **Client-Only Rendering:** Use `useEffect` + `mounted` state for theme-dependent UI
+4. **Context Consumption:** Only components using `useTheme()` need `'use client'` directive
+5. **No Prop Drilling:** Context makes theme accessible anywhere without passing props
+
+### Next.js 16 Specific Patterns
+
+**Async Server Components:**
+
+```typescript
+// app/blog/page.tsx
+export default async function BlogPage() {
+  const posts = await getAllPosts()  // Server-side data fetching
+  return <div>{posts.map(...)}</div>
+}
+```
+
+**Static Generation with Dynamic Routes:**
+
+```typescript
+// app/blog/[...slug]/page.tsx
+export async function generateStaticParams() {
+  const posts = await getAllPosts()
+  return posts.map(post => ({ slug: post.slug.split('/') }))
+}
+
+export async function generateMetadata({ params }) {
+  const post = getPostBySlug(params.slug.join('/'))
+  return { title: post.frontmatter.title, ... }
+}
+```
+
+**Parallel Routes for Layout Composition:**
+
+```typescript
+// app/layout.tsx
+export default function RootLayout({
+  children,
+  breadcrumbs,  // From @breadcrumbs parallel route
+}: {
+  children: React.ReactNode
+  breadcrumbs: React.ReactNode
+}) {
+  return <>
+    {breadcrumbs}
+    {children}
+  </>
+}
+```
+
+## Project-Specific Patterns
+
+### Markdown Processing
+
+- **Always validate paths:** Use `sanitizePath()` to prevent directory traversal
+- **Draft support:** Posts with `draft: true` are excluded from `getAllPosts()`
+- **Recursive directories:** Blog posts can be organized in subdirectories (`content/blog/tech/post.md`)
+- **Reading time:** Auto-calculated at 200 words/minute
+- **Date handling:** Use Romanian locale (`ro-RO`) for date formatting
+
+### SEO & Metadata
+
+- **Every page exports `metadata`:** Use Next.js 16's `Metadata` type
+- **Dynamic metadata:** Use `generateMetadata()` for blog posts
+- **Structured data:** Include Schema.org `BreadcrumbList` and `BlogPosting`
+- **OpenGraph images:** Reference `post.frontmatter.image` for social sharing
+
+### Styling Guidelines
+
+**Color Palette:**
+
+- Backgrounds: `zinc-900`, `slate-900`, `slate-800`
+- Accents: `cyan-900`, `emerald-900`, `teal-900`
+- Text: `slate-100`, `slate-300`, `slate-500`
+- Borders: `border-2`, `border-4` (thick, sharp)
+
+**Design Tokens:**
+
+- **NO rounded corners:** Use `rounded-none` or omit (default is sharp)
+- **Monospace fonts:** Apply `font-mono` for terminal aesthetic
+- **Uppercase labels:** Use `uppercase tracking-wider` for headers
+- **Border-heavy design:** Thick borders (`border-4`) over shadows
+- **Classification labels:** Add metadata like "FILE#001", "DOCUMENT LEVEL-1"
+
+**Typography:**
+
+- Primary font: `JetBrains Mono` (monospace)
+- Headings: `font-mono font-bold uppercase`
+- Body: `font-mono text-sm`
+- Code blocks: Sharp borders, dark background, no syntax highlighting (for terminal feel)
+
+## Available Subagents
+
+Use these specialized agents via `/spec-implementation-and-review` command:
+
+- `nextjs-specialist` - Next.js 15/16, App Router, SSG, API routes
+- `ui-implementer` - UI implementation with shadcn/ui, Tailwind
+- `ui-css-specialist` - CSS layouts, styling, responsive design
+- `react-frontend-expert` - React components, hooks, state management
+- `nodejs-typescript-engineer` - TypeScript, Node.js backend
+
+## Common Pitfalls
+
+1. **Hydration Mismatches with Themes:** Always use `suppressHydrationWarning` on `<html>` and check `mounted` state before rendering theme-dependent UI
+2. **Image Paths:** Use `/` prefix for public assets (`/blog/image.jpg` not `blog/image.jpg`)
+3. **Dynamic Routes:** Remember to return `slug` as array in `generateStaticParams()` for catch-all routes
+4. **Client Components:** Minimize `'use client'` usage - only add when using hooks, event handlers, or browser APIs
+5. **Path Security:** Always use `sanitizePath()` when reading markdown files
+6. **Date Formats:** Use `YYYY-MM-DD` in frontmatter, convert to Romanian locale for display
+7. **Port Configuration:** Dev server runs on port **3030** (not default 3000)
+
+## Type Safety
+
+- All utilities in `lib/` are fully typed
+- Frontmatter structure enforced via `FrontMatter` interface
+- Use `Post` type for blog post objects
+- Avoid `any` - use `unknown` if type is truly unknown, then narrow
+
+## Performance Notes
+
+- **SSG by default:** All blog posts pre-rendered at build time
+- **Image optimization:** Use Next.js `<Image>` component
+- **Font optimization:** Google Fonts loaded via `next/font`
+- **No client-side data fetching:** Markdown loaded server-side only
+- **Static exports:** Pages are fully static HTML (no server required for hosting)

Dockerfile.nextjs

@@ -0,0 +1,108 @@
+# Multi-stage Dockerfile for Next.js Blog Application
+# Optimized for Static Site Generation with standalone output
+# Final image size: ~150MB
+
+# ============================================
+# Stage 1: Dependencies Installation
+# ============================================
+FROM node:22-alpine AS deps
+
+# Install libc6-compat for better compatibility
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+# Copy package files for dependency installation
+# These files are copied first to leverage Docker layer caching
+# If package.json hasn't changed, this layer will be reused
+COPY package.json package-lock.json* ./
+
+# Install dependencies using npm ci for reproducible builds
+# --only=production flag is not used here because we need dev dependencies for build
+RUN npm ci
+
+# ============================================
+# Stage 2: Build Next.js Application
+# ============================================
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+
+# Copy all application source code
+# This includes:
+# - app/ directory (Next.js 16 App Router)
+# - components/ directory
+# - lib/ directory (markdown utilities)
+# - content/blog/ directory (markdown blog posts)
+# - public/ directory (static assets)
+# - next.config.js, tsconfig.json, tailwind.config.js, etc.
+COPY . .
+
+# Set environment variables for build
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+
+# Build the Next.js application
+# This will:
+# 1. Process all markdown files from content/blog/
+# 2. Generate static pages for all blog posts (SSG)
+# 3. Create standalone output in .next/standalone/
+# 4. Optimize images and assets
+# 5. Bundle and minify JavaScript
+RUN npm run build
+
+# ============================================
+# Stage 3: Production Runtime
+# ============================================
+FROM node:22-alpine AS runner
+
+# Install curl for health checks
+RUN apk add --no-cache curl
+
+WORKDIR /app
+
+# Set production environment
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Create a non-root user for security
+# The application will run as this user instead of root
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+# Copy only the necessary files from builder stage
+# Next.js standalone output includes all dependencies needed to run
+COPY --from=builder /app/public ./public
+
+# Copy standalone output (includes minimal node_modules and server files)
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+
+# Copy static files (CSS, JS bundles, optimized images)
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Create directories for logs (optional, if your app writes logs)
+RUN mkdir -p /app/logs && chown nextjs:nodejs /app/logs
+
+# Switch to non-root user
+USER nextjs
+
+# Expose the application port
+# Note: This matches the port in package.json "dev" script (-p 3030)
+EXPOSE 3030
+
+# Set the port environment variable
+ENV PORT=3030
+ENV HOSTNAME="0.0.0.0"
+
+# Health check to verify the application is running
+# Docker will periodically check this endpoint
+# If it fails, the container is marked as unhealthy
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+  CMD curl -f http://localhost:3030/ || exit 1
+
+# Start the Next.js server
+# The standalone output includes a minimal server.js file
+CMD ["node", "server.js"]

app/@breadcrumbs/about/page.tsx

@@ -1,4 +1,4 @@
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
 
 export default function AboutBreadcrumb() {
   return (
@@ -11,5 +11,5 @@ export default function AboutBreadcrumb() {
         },
       ]}
     />
-  );
+  )
 }

app/@breadcrumbs/blog/[...slug]/page.tsx

@@ -1,10 +1,10 @@
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
-import { getPostBySlug } from '@/lib/markdown';
+import { getPostBySlug } from '@/lib/markdown'
 
 interface BreadcrumbItem {
-  label: string;
+  label: string
-  href: string;
+  href: string
-  current?: boolean;
+  current?: boolean
 }
 
 function formatDirectoryName(name: string): string {
@@ -12,34 +12,34 @@ function formatDirectoryName(name: string): string {
     tech: 'Tehnologie',
     design: 'Design',
     tutorial: 'Tutoriale',
-  };
+  }
 
-  return directoryNames[name] || name.charAt(0).toUpperCase() + name.slice(1);
+  return directoryNames[name] || name.charAt(0).toUpperCase() + name.slice(1)
 }
 
 export default async function BlogPostBreadcrumb({
   params,
 }: {
-  params: Promise<{ slug: string[] }>;
+  params: Promise<{ slug: string[] }>
 }) {
-  const { slug } = await params;
+  const { slug } = await params
-  const slugPath = slug.join('/');
+  const slugPath = slug.join('/')
-  const post = getPostBySlug(slugPath);
+  const post = await getPostBySlug(slugPath)
 
   const items: BreadcrumbItem[] = [
     {
       label: 'Blog',
       href: '/blog',
     },
-  ];
+  ]
 
   if (slug.length > 1) {
     for (let i = 0; i < slug.length - 1; i++) {
-      const segmentPath = slug.slice(0, i + 1).join('/');
+      const segmentPath = slug.slice(0, i + 1).join('/')
       items.push({
         label: formatDirectoryName(slug[i]),
         href: `/blog/${segmentPath}`,
-      });
+      })
     }
   }
 
@@ -47,7 +47,7 @@ export default async function BlogPostBreadcrumb({
     label: post ? post.frontmatter.title : slug[slug.length - 1],
     href: `/blog/${slugPath}`,
     current: true,
-  });
+  })
 
-  return <Breadcrumbs items={items} />;
+  return <Breadcrumbs items={items} />
 }

app/@breadcrumbs/blog/page.tsx

@@ -1,4 +1,4 @@
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
 
 export default function BlogBreadcrumb() {
   return (
@@ -11,5 +11,5 @@ export default function BlogBreadcrumb() {
         },
       ]}
     />
-  );
+  )
 }

app/@breadcrumbs/default.tsx

@@ -1,7 +1,7 @@
-'use client';
+'use client'
 
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
 
 export default function DefaultBreadcrumb() {
-  return <Breadcrumbs />;
+  return <Breadcrumbs />
 }

app/@breadcrumbs/tags/[tag]/page.tsx

@@ -1,15 +1,11 @@
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
 
-export default async function TagBreadcrumb({
+export default async function TagBreadcrumb({ params }: { params: Promise<{ tag: string }> }) {
-  params,
+  const { tag } = await params
-}: {
-  params: Promise<{ tag: string }>;
-}) {
-  const { tag } = await params;
   const tagName = tag
     .split('-')
     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
+    .join(' ')
 
   return (
     <Breadcrumbs
@@ -25,5 +21,5 @@ export default async function TagBreadcrumb({
         },
       ]}
     />
-  );
+  )
 }

app/@breadcrumbs/tags/page.tsx

@@ -1,4 +1,4 @@
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
 
 export default function TagsBreadcrumb() {
   return (
@@ -11,5 +11,5 @@ export default function TagsBreadcrumb() {
         },
       ]}
     />
-  );
+  )
 }

app/about/page.tsx

@@ -12,8 +12,8 @@ export default function AboutPage() {
 
       <div className="prose dark:prose-invert max-w-none">
         <p className="text-lg leading-relaxed mb-6">
-          Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie,
+          Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie, specializat în
-          specializat în dezvoltarea web modernă cu Next.js, React și TypeScript.
+          dezvoltarea web modernă cu Next.js, React și TypeScript.
         </p>
 
         <h2 className="text-2xl font-semibold mt-8 mb-4">Ce vei găsi aici</h2>
@@ -27,10 +27,18 @@ export default function AboutPage() {
         <h2 className="text-2xl font-semibold mt-8 mb-4">Tehnologii folosite</h2>
         <p>Acest blog este construit cu:</p>
         <ul className="space-y-2">
-          <li><strong>Next.js 15</strong> - Framework React pentru producție</li>
+          <li>
-          <li><strong>TypeScript</strong> - Pentru type safety</li>
+            <strong>Next.js 15</strong> - Framework React pentru producție
-          <li><strong>Tailwind CSS</strong> - Pentru stilizare rapidă</li>
+          </li>
-          <li><strong>Markdown</strong> - Pentru conținut</li>
+          <li>
+            <strong>TypeScript</strong> - Pentru type safety
+          </li>
+          <li>
+            <strong>Tailwind CSS</strong> - Pentru stilizare rapidă
+          </li>
+          <li>
+            <strong>Markdown</strong> - Pentru conținut
+          </li>
         </ul>
 
         <h2 className="text-2xl font-semibold mt-8 mb-4">Contact</h2>

app/blog/[...slug]/not-found.tsx

@@ -10,10 +10,16 @@ export default function NotFound() {
           Ne pare rău, dar articolul pe care îl cauți nu există sau a fost mutat.
         </p>
         <div className="space-x-4">
-          <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+          <Link
+            href="/blog"
+            className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition"
+          >
             Vezi toate articolele
           </Link>
-          <Link href="/" className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
+          <Link
+            href="/"
+            className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+          >
             Pagina principală
           </Link>
         </div>

app/blog/[...slug]/page.tsx

@@ -3,16 +3,24 @@ import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import { getAllPosts, getPostBySlug, getRelatedPosts } from '@/lib/markdown'
 import { formatDate, formatRelativeDate } from '@/lib/utils'
+import { TableOfContents } from '@/components/blog/table-of-contents'
+import { ReadingProgress } from '@/components/blog/reading-progress'
+import { StickyFooter } from '@/components/blog/sticky-footer'
+import MarkdownRenderer from '@/components/blog/markdown-renderer'
 
 export async function generateStaticParams() {
   const posts = await getAllPosts()
-  return posts.map((post) => ({ slug: post.slug.split('/') }))
+  return posts.map(post => ({ slug: post.slug.split('/') }))
 }
 
-export async function generateMetadata({ params }: { params: Promise<{ slug: string[] }> }): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string[] }>
+}): Promise<Metadata> {
   const { slug } = await params
   const slugPath = slug.join('/')
-  const post = getPostBySlug(slugPath)
+  const post = await getPostBySlug(slugPath)
 
   if (!post) {
     return { title: 'Articol negăsit' }
@@ -39,91 +47,165 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
   }
 }
 
-function AuthorInfo({ author, date }: { author: string; date: string }) {
+function extractHeadings(content: string) {
-  return (
+  const headingRegex = /^(#{2,3})\s+(.+)$/gm
-    <div className="flex items-center space-x-4 py-6 border-y border-gray-200 dark:border-gray-700">
+  const headings: { id: string; text: string; level: number }[] = []
-      <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
+  let match
-        <span className="text-xl font-bold text-primary-600 dark:text-primary-400">
+
-          {author.charAt(0).toUpperCase()}
+  while ((match = headingRegex.exec(content)) !== null) {
-        </span>
+    const level = match[1].length
-      </div>
+    const text = match[2]
-      <div>
+    const id = text
-        <p className="font-semibold">{author}</p>
+      .toLowerCase()
-        <p className="text-sm text-gray-500">
+      .replace(/[^a-z0-9]+/g, '-')
-          Publicat {formatRelativeDate(date)} • {formatDate(date)}
+      .replace(/(^-|-$)/g, '')
-        </p>
+    headings.push({ id, text, level })
-      </div>
-    </div>
-  )
   }
 
-function RelatedPosts({ posts }: { posts: any[] }) {
+  return headings
-  if (posts.length === 0) return null
-
-  return (
-    <section className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-      <h2 className="text-2xl font-bold mb-6">Articole similare</h2>
-      <div className="grid gap-6 md:grid-cols-3">
-        {posts.map((post) => (
-          <Link key={post.slug} href={`/blog/${post.slug}`} className="block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-lg transition">
-            <h3 className="font-semibold mb-2 line-clamp-2">{post.frontmatter.title}</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{post.frontmatter.description}</p>
-            <p className="text-xs text-gray-500 mt-2">{formatDate(post.frontmatter.date)}</p>
-          </Link>
-        ))}
-      </div>
-    </section>
-  )
 }
 
 export default async function BlogPostPage({ params }: { params: Promise<{ slug: string[] }> }) {
   const { slug } = await params
   const slugPath = slug.join('/')
-  const post = getPostBySlug(slugPath)
+  const post = await getPostBySlug(slugPath)
 
   if (!post) {
     notFound()
   }
 
   const relatedPosts = await getRelatedPosts(slugPath)
+  const headings = extractHeadings(post.content)
+  const fullUrl = `https://yourdomain.com/blog/${slugPath}`
 
   return (
-    <article className="max-w-4xl mx-auto">
+    <>
-      <header className="mb-8">
+      <ReadingProgress />
-        {post.frontmatter.image && (
+
-          <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-64 md:h-96 object-cover rounded-lg mb-8" />
+      <div className="max-w-7xl mx-auto px-6 py-16">
-        )}
+        <div className="flex gap-12">
-        <h1 className="text-4xl md:text-5xl font-bold mb-4">{post.frontmatter.title}</h1>
+          <TableOfContents headings={headings} />
-        <p className="text-xl text-gray-600 dark:text-gray-400 mb-6">{post.frontmatter.description}</p>
+
-        {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
+          <article className="flex-1 min-w-0">
-          <div className="flex flex-wrap gap-2 mb-6">
+            <header className="mb-16 border border-[var(--neon-cyan)] bg-[rgb(var(--bg-primary))] p-8 relative">
+              <div className="border-b border-[var(--neon-pink)] pb-4 mb-6 relative">
+                <div className="flex items-center gap-3 mb-3 justify-end">
+                  <p className="font-mono text-xs text-[var(--neon-cyan)] uppercase tracking-widest">
+                    &gt;&gt; CLASSIFIED_DOC://PUBLIC_ACCESS
+                  </p>
+                  <div className="flex gap-1.5">
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-red-500/10 cursor-pointer" />
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-yellow-500/10 cursor-pointer" />
+                    <div className="w-4 h-4 border border-[rgb(var(--border-primary))] hover:bg-green-500/10 cursor-pointer" />
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-2 mb-2">
                   {post.frontmatter.tags.map((tag: string) => (
-              <Link key={tag} href={`/tags/${tag.toLowerCase().replace(/\s+/g, '-')}`} className="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full text-sm hover:bg-primary-200 dark:hover:bg-primary-800 transition">
+                    <Link
+                      key={tag}
+                      href={`/tags/${tag}`}
+                      className="px-3 py-1 bg-cyan-500/5 border border-[var(--neon-cyan)] text-cyan-400 text-xs font-mono uppercase shadow-[0_0_8px_rgba(90,139,149,0.3)] hover:shadow-[0_0_12px_rgba(90,139,149,0.5)] transition-all"
+                    >
                       #{tag}
                     </Link>
                   ))}
                 </div>
-        )}
+              </div>
-        <AuthorInfo author={post.frontmatter.author} date={post.frontmatter.date} />
+
+              <div className="border-l border-[var(--neon-magenta)] pl-6 relative">
+                <h1 className="text-4xl md:text-5xl font-mono font-bold text-[var(--neon-cyan)] uppercase tracking-tight leading-tight mb-6">
+                  {post.frontmatter.title}
+                </h1>
+
+                <p className="text-lg text-[rgb(var(--text-secondary))] leading-relaxed mb-6 font-mono">
+                  <span className="text-[var(--neon-pink)]">&gt;&gt;</span>{' '}
+                  {post.frontmatter.description}
+                </p>
+              </div>
+
+              <div className="flex items-center gap-4 pt-6 border-t border-[var(--neon-purple)] relative">
+                <div className="w-12 h-12 border border-[var(--neon-cyan)] bg-[rgb(var(--bg-secondary))] flex items-center justify-center">
+                  <span className="font-mono text-[var(--neon-cyan)] text-xs">
+                    {post.frontmatter.author.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+                <div>
+                  <p className="font-mono font-bold text-[var(--neon-cyan)] uppercase text-sm">
+                    {post.frontmatter.author}
+                  </p>
+                  <div className="flex items-center gap-2 text-xs text-[rgb(var(--text-muted))] font-mono">
+                    <time className="text-[var(--neon-magenta)]">
+                      {formatDate(post.frontmatter.date)}
+                    </time>
+                    <span className="text-[var(--neon-pink)]">//</span>
+                    <span className="text-[var(--neon-cyan)]">{post.readingTime}min READ</span>
+                  </div>
+                </div>
+              </div>
             </header>
 
-      <div className="prose dark:prose-invert max-w-none">
+            {post.frontmatter.image && (
-        <div className="flex items-center justify-between text-sm text-gray-500 mb-6">
+              <div className="relative aspect-video mb-16 border border-[var(--neon-pink)] overflow-hidden">
-          <span>Timp estimat de citire: {post.readingTime} minute</span>
+                <img
+                  src={post.frontmatter.image}
+                  alt={post.frontmatter.title}
+                  className="w-full h-full object-cover"
+                />
               </div>
-        <div dangerouslySetInnerHTML={{ __html: post.content }} />
+            )}
+
+            <div className="prose prose-invert prose-lg max-w-none cyberpunk-prose">
+              <MarkdownRenderer content={post.content} />
             </div>
 
-      <nav className="flex justify-between items-center mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
+            {relatedPosts.length > 0 && (
-        <Link href="/blog" className="flex items-center text-primary-600 hover:text-primary-700 transition">
+              <section className="mt-12 pt-8 border-t border-zinc-800">
+                <h2 className="text-2xl font-mono font-bold uppercase text-[var(--neon-cyan)] mb-6">
+                  // Articole similare
+                </h2>
+                <div className="grid gap-6 md:grid-cols-3">
+                  {relatedPosts.map(relatedPost => (
+                    <Link
+                      key={relatedPost.slug}
+                      href={`/blog/${relatedPost.slug}`}
+                      className="block p-4 border border-zinc-800 bg-zinc-950 hover:border-[var(--neon-cyan)] transition-all hover:shadow-[0_0_8px_rgba(90,139,149,0.2)]"
+                    >
+                      <h3 className="font-mono font-semibold text-cyan-400 mb-2 line-clamp-2">
+                        {relatedPost.frontmatter.title}
+                      </h3>
+                      <p className="text-sm text-zinc-400 line-clamp-2">
+                        {relatedPost.frontmatter.description}
+                      </p>
+                      <p className="text-xs text-zinc-600 mt-2 font-mono">
+                        {formatDate(relatedPost.frontmatter.date)}
+                      </p>
+                    </Link>
+                  ))}
+                </div>
+              </section>
+            )}
+
+            <nav className="flex justify-between items-center mt-12 pt-8 border-t border-zinc-800">
+              <Link
+                href="/blog"
+                className="flex items-center text-[var(--neon-pink)] hover:text-[var(--neon-magenta)] transition-all font-mono text-sm uppercase border border-[var(--neon-pink)] px-4 py-2 hover:shadow-[0_0_6px_rgba(155,90,110,0.3)]"
+              >
                 <svg className="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
                 </svg>
-          Înapoi la blog
+                [BACK TO BLOG]
               </Link>
             </nav>
-
-      <RelatedPosts posts={relatedPosts} />
           </article>
+        </div>
+      </div>
+
+      <StickyFooter url={fullUrl} title={post.frontmatter.title} />
+    </>
   )
 }

app/blog/blog-client.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Post } from '@/lib/types/frontmatter'
+import { BlogCard } from '@/components/blog/blog-card'
+import { SearchBar } from '@/components/blog/search-bar'
+import { SortDropdown } from '@/components/blog/sort-dropdown'
+import { TagFilter } from '@/components/blog/tag-filter'
+import { Navbar } from '@/components/blog/navbar'
+
+interface BlogPageClientProps {
+  posts: Post[]
+  allTags: string[]
+}
+
+type SortOption = 'newest' | 'oldest' | 'title'
+
+export default function BlogPageClient({ posts, allTags }: BlogPageClientProps) {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [sortBy, setSortBy] = useState<SortOption>('newest')
+  const [currentPage, setCurrentPage] = useState(1)
+  const postsPerPage = 9
+
+  const filteredAndSortedPosts = useMemo(() => {
+    const result = posts.filter(post => {
+      const matchesSearch =
+        searchQuery === '' ||
+        post.frontmatter.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        post.frontmatter.description.toLowerCase().includes(searchQuery.toLowerCase())
+
+      const matchesTags =
+        selectedTags.length === 0 || selectedTags.every(tag => post.frontmatter.tags.includes(tag))
+
+      return matchesSearch && matchesTags
+    })
+
+    result.sort((a, b) => {
+      switch (sortBy) {
+        case 'oldest':
+          return new Date(a.frontmatter.date).getTime() - new Date(b.frontmatter.date).getTime()
+        case 'title':
+          return a.frontmatter.title.localeCompare(b.frontmatter.title)
+        case 'newest':
+        default:
+          return new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
+      }
+    })
+
+    return result
+  }, [posts, searchQuery, selectedTags, sortBy])
+
+  const totalPages = Math.ceil(filteredAndSortedPosts.length / postsPerPage)
+  const paginatedPosts = filteredAndSortedPosts.slice(
+    (currentPage - 1) * postsPerPage,
+    currentPage * postsPerPage
+  )
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags(prev => (prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]))
+    setCurrentPage(1)
+  }
+
+  return (
+    <div className="min-h-screen bg-[rgb(var(--bg-primary))]">
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        {/* Header */}
+        <div className="border-l border-[var(--neon-cyan)] pl-6 mb-12">
+          <p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-widest mb-2">
+            DATABASE QUERY // SEARCH RESULTS
+          </p>
+          <h1 className="text-4xl md:text-6xl font-mono font-bold text-[rgb(var(--text-primary))] uppercase tracking-tight">
+            &gt; BLOG ARCHIVE_
+          </h1>
+        </div>
+
+        {/* Search Bar */}
+        <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6 mb-8">
+          <div className="flex flex-col lg:flex-row gap-4">
+            <SearchBar
+              searchQuery={searchQuery}
+              onSearchChange={value => {
+                setSearchQuery(value)
+                setCurrentPage(1)
+              }}
+            />
+            <SortDropdown sortBy={sortBy} onSortChange={setSortBy} />
+          </div>
+        </div>
+
+        {/* Tag Filters */}
+        <TagFilter
+          allTags={allTags}
+          selectedTags={selectedTags}
+          onToggleTag={toggleTag}
+          onClearTags={() => {
+            setSelectedTags([])
+            setCurrentPage(1)
+          }}
+        />
+
+        {/* Results Count */}
+        <div className="mb-6">
+          <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase">
+            FOUND {filteredAndSortedPosts.length}{' '}
+            {filteredAndSortedPosts.length === 1 ? 'POST' : 'POSTS'}
+          </p>
+        </div>
+
+        {/* Blog Grid */}
+        {paginatedPosts.length > 0 ? (
+          <div className="grid gap-8 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 mb-12">
+            {paginatedPosts.map((post, index) => {
+              const hasImage = !!post.frontmatter.image
+              let variant: 'image-top' | 'image-side' | 'text-only'
+
+              if (!hasImage) {
+                variant = 'text-only'
+              } else {
+                variant = index % 3 === 1 ? 'image-side' : 'image-top'
+              }
+
+              return <BlogCard key={post.slug} post={post} variant={variant} />
+            })}
+          </div>
+        ) : (
+          <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-12 text-center">
+            <p className="font-mono text-lg text-[rgb(var(--text-muted))] uppercase">
+              NO POSTS FOUND // TRY DIFFERENT SEARCH TERMS
+            </p>
+          </div>
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="border border-[rgb(var(--border-primary))] bg-[rgb(var(--bg-secondary))] p-6">
+            <div className="flex items-center justify-between">
+              <button
+                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
+              >
+                &lt; PREV
+              </button>
+              <div className="flex items-center gap-2">
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
+                  <button
+                    key={page}
+                    onClick={() => setCurrentPage(page)}
+                    className={`w-12 h-12 font-mono text-sm border transition-colors cursor-pointer ${
+                      currentPage === page
+                        ? 'bg-[var(--neon-cyan)] border-[var(--neon-cyan)] text-white'
+                        : 'border-[rgb(var(--border-primary))] text-[rgb(var(--text-muted))] hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)]'
+                    }`}
+                  >
+                    {String(page).padStart(2, '0')}
+                  </button>
+                ))}
+              </div>
+              <button
+                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                className="px-6 py-3 font-mono text-sm uppercase border border-[rgb(var(--border-primary))] text-[rgb(var(--text-primary))] disabled:opacity-30 disabled:cursor-not-allowed hover:border-[var(--neon-cyan)] hover:text-[var(--neon-cyan)] transition-colors cursor-pointer"
+              >
+                NEXT &gt;
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/blog/layout.tsx

@@ -0,0 +1,16 @@
+import { Metadata } from 'next'
+import { Navbar } from '@/components/blog/navbar'
+
+export const metadata: Metadata = {
+  title: 'Blog',
+  description: 'Toate articolele din blog',
+}
+
+export default function BlogLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  )
+}

app/blog/page.tsx

@@ -1,95 +1,9 @@
-import { Metadata } from 'next'
-import Link from 'next/link'
 import { getAllPosts } from '@/lib/markdown'
-import { formatDate } from '@/lib/utils'
+import BlogPageClient from './blog-client'
-
-export const metadata: Metadata = {
-  title: 'Blog',
-  description: 'Toate articolele din blog',
-}
-
-function PostCard({ post }: { post: any }) {
-  return (
-    <article className="border-b border-gray-200 dark:border-gray-700 pb-8 mb-8 last:border-0">
-      <div className="flex flex-col lg:flex-row gap-6">
-        {post.frontmatter.image && (
-          <div className="lg:w-1/3">
-            <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 lg:h-full object-cover rounded-lg" />
-          </div>
-        )}
-        <div className={post.frontmatter.image ? 'lg:w-2/3' : 'w-full'}>
-          <div className="flex items-center gap-4 text-sm text-gray-500 mb-2">
-            <time dateTime={post.frontmatter.date}>{formatDate(post.frontmatter.date)}</time>
-            <span>•</span>
-            <span>{post.readingTime} min citire</span>
-            <span>•</span>
-            <span>{post.frontmatter.author}</span>
-          </div>
-          <h2 className="text-2xl font-bold mb-3">
-            <Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
-              {post.frontmatter.title}
-            </Link>
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
-          {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
-            <div className="flex flex-wrap gap-2 mb-4">
-              {post.frontmatter.tags.map((tag: string) => (
-                <span key={tag} className="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-sm rounded-full">
-                  #{tag}
-                </span>
-              ))}
-            </div>
-          )}
-          <Link href={`/blog/${post.slug}`} className="inline-flex items-center text-primary-600 hover:text-primary-700 transition">
-            Citește articolul complet
-            <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </Link>
-        </div>
-      </div>
-    </article>
-  )
-}
-
-function BlogFilters({ totalPosts }: { totalPosts: number }) {
-  return (
-    <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-8">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold mb-2">Articole Blog</h1>
-          <p className="text-gray-600 dark:text-gray-400">
-            {totalPosts} {totalPosts === 1 ? 'articol' : 'articole'} publicate
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
 
 export default async function BlogPage() {
   const posts = await getAllPosts()
+  const allTags = Array.from(new Set(posts.flatMap(post => post.frontmatter.tags))).sort()
 
-  if (posts.length === 0) {
+  return <BlogPageClient posts={posts} allTags={allTags} />
-    return (
-      <div className="text-center py-12">
-        <h1 className="text-3xl font-bold mb-4">Blog</h1>
-        <p className="text-gray-600 dark:text-gray-400 mb-8">Nu există articole publicate încă.</p>
-        <Link href="/" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
-          Înapoi la pagina principală
-        </Link>
-      </div>
-    )
-  }
-
-  return (
-    <div className="max-w-4xl mx-auto">
-      <BlogFilters totalPosts={posts.length} />
-      <div>
-        {posts.map((post) => (
-          <PostCard key={post.slug} post={post} />
-        ))}
-      </div>
-    </div>
-  )
 }

app/globals.css

@@ -1,4 +1,48 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
+@theme {
+  --color-*: initial;
+}
+
+@variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  :root {
+    /* Light mode colors */
+    --bg-primary: 250 250 250;
+    --bg-secondary: 240 240 243;
+    --bg-tertiary: 228 228 231;
+    --text-primary: 24 24 27;
+    --text-secondary: 63 63 70;
+    --text-muted: 113 113 122;
+    --border-primary: 212 212 216;
+    --border-subtle: 228 228 231;
+
+    /* Desaturated cyberpunk for light mode - darker for readability */
+    --neon-pink: #7a3d52;
+    --neon-cyan: #2d5a63;
+    --neon-purple: #5a4670;
+    --neon-magenta: #7a3d6b;
+  }
+
+  .dark {
+    /* Dark mode colors - INDUSTRIAL */
+    --bg-primary: 24 24 27;
+    --bg-secondary: 15 23 42;
+    --bg-tertiary: 30 41 59;
+    --text-primary: 241 245 249;
+    --text-secondary: 203 213 225;
+    --text-muted: 100 116 139;
+    --border-primary: 71 85 105;
+    --border-subtle: 30 41 59;
+
+    /* Desaturated cyberpunk for dark mode */
+    --neon-pink: #8a5568;
+    --neon-cyan: #4d7580;
+    --neon-purple: #6a5685;
+    --neon-magenta: #8a5579;
+  }
+}
 
 @layer utilities {
   .scrollbar-hide {
@@ -11,21 +55,118 @@
 
   /* Industrial/Terminal aesthetic utilities */
   .grid-bg {
-    background-image: url('/grid.svg');
+    background-image:
+      linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
+    background-size: 20px 20px;
   }
 
+  /* Noise texture */
   .noise-bg {
     background-image: url('/noise.svg');
+    opacity: 0.03;
+    pointer-events: none;
   }
 
+  /* Scanline effect */
   .scanline {
-    background: repeating-linear-gradient(
+    background: linear-gradient(0deg, transparent 0%, rgba(6, 182, 212, 0.1) 50%, transparent 100%);
-      0deg,
+    background-size: 100% 3px;
-      transparent,
+    pointer-events: none;
-      transparent 2px,
+  }
-      rgba(0, 0, 0, 0.3) 2px,
+
-      rgba(0, 0, 0, 0.3) 4px
+  .scanline::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(6, 182, 212, 0.05) 50%,
+      transparent 100%
     );
+    animation: scanline 8s linear infinite;
+    pointer-events: none;
+  }
+
+  /* CRT screen curvature effect */
+  .crt-effect {
+    animation: flicker 0.15s infinite;
+  }
+
+  /* Glitch text effect */
+  .glitch-text {
+    position: relative;
+  }
+
+  .glitch-text::before,
+  .glitch-text::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .glitch-text.active::before {
+    color: #06b6d4;
+    animation: glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+    transform: translate(-2px, -2px);
+    opacity: 0.8;
+  }
+
+  .glitch-text.active::after {
+    color: #10b981;
+    animation: glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+    transform: translate(2px, 2px);
+    opacity: 0.8;
+  }
+
+  @keyframes glitch-1 {
+    0%,
+    100% {
+      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+      transform: translate(0);
+    }
+    20% {
+      clip-path: polygon(0 15%, 100% 15%, 100% 65%, 0 65%);
+    }
+    40% {
+      clip-path: polygon(0 30%, 100% 30%, 100% 70%, 0 70%);
+    }
+    60% {
+      clip-path: polygon(0 5%, 100% 5%, 100% 60%, 0 60%);
+    }
+    80% {
+      clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%);
+    }
+  }
+
+  @keyframes glitch-2 {
+    0%,
+    100% {
+      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+      transform: translate(0);
+    }
+    20% {
+      clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%);
+    }
+    40% {
+      clip-path: polygon(0 40%, 100% 40%, 100% 85%, 0 85%);
+    }
+    60% {
+      clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
+    }
+    80% {
+      clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%);
+    }
   }
 
   /* Grayscale filter with instant toggle */
@@ -36,4 +177,314 @@
   .grayscale-0 {
     filter: grayscale(0%);
   }
+
+  /* Cyberpunk Glitch Effect for Button */
+  .glitch-btn {
+    position: relative;
+    animation: glitch 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .glitch-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+  }
+
+  .glitch-layer:first-of-type {
+    animation: glitch-1 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    color: rgb(6 182 212); /* cyan-500 */
+    transform: translate(-2px, 0);
+    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
+  }
+
+  .glitch-layer:last-of-type {
+    animation: glitch-2 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    color: rgb(16 185 129); /* emerald-500 */
+    transform: translate(2px, 0);
+    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
+  }
+
+  @keyframes glitch-1 {
+    0%,
+    100% {
+      transform: translate(0, 0);
+      clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
+    }
+    25% {
+      transform: translate(-3px, 2px);
+      clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%);
+    }
+    50% {
+      transform: translate(3px, -2px);
+      clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
+    }
+    75% {
+      transform: translate(-2px, -1px);
+      clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%);
+    }
+  }
+
+  @keyframes glitch-2 {
+    0%,
+    100% {
+      transform: translate(0, 0);
+      clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
+    }
+    25% {
+      transform: translate(3px, -2px);
+      clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%);
+    }
+    50% {
+      transform: translate(-3px, 2px);
+      clip-path: polygon(0 45%, 100% 45%, 100% 80%, 0 80%);
+    }
+    75% {
+      transform: translate(2px, 1px);
+      clip-path: polygon(0 60%, 100% 60%, 100% 95%, 0 95%);
+    }
+  }
+
+  /* Border Pulse Animation */
+  .border-pulse {
+    animation: pulse-border 2s ease-in-out infinite;
+  }
+
+  /* Screen Flicker Effect */
+  body.screen-flicker {
+    animation: flicker 150ms ease-in-out;
+  }
+
+  body.screen-flicker::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(6, 182, 212, 0.1);
+    pointer-events: none;
+    z-index: 9999;
+    animation: flicker 150ms ease-in-out;
+  }
+
+  /* CRT Noise Texture */
+  @supports (filter: url('#noise')) {
+    .noise-bg {
+      filter: url('#noise');
+    }
+  }
+
+  /* SCP-style subtle flicker hover */
+  @keyframes scp-flicker {
+    0%,
+    100% {
+      border-color: rgb(71 85 105);
+      box-shadow: 0 0 0 rgba(90, 139, 149, 0);
+      transform: translate(0, 0);
+    }
+    20% {
+      border-color: var(--neon-cyan);
+      box-shadow: 0 0 3px rgba(90, 139, 149, 0.3);
+      transform: translate(-0.5px, 0);
+    }
+    40% {
+      border-color: rgb(71 85 105);
+      box-shadow: 0 0 0 rgba(90, 139, 149, 0);
+      transform: translate(0, 0);
+    }
+    60% {
+      border-color: var(--neon-cyan);
+      box-shadow: 0 0 2px rgba(90, 139, 149, 0.2);
+      transform: translate(0.5px, 0);
+    }
+  }
+
+  .cyber-glitch-hover {
+    transition: all 0.15s ease;
+    position: relative;
+  }
+
+  .cyber-glitch-hover:hover {
+    animation: scp-flicker 150ms ease-in-out 3;
+    border-color: var(--neon-cyan) !important;
+    box-shadow:
+      0 1px 4px rgba(90, 139, 149, 0.15),
+      inset 0 0 8px rgba(90, 139, 149, 0.05);
+  }
+
+  /* Navbar hide on scroll */
+  .navbar-hidden {
+    transform: translateY(-100%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .navbar-visible {
+    transform: translateY(0);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  /* Cyberpunk neon glow on focus - 80s style */
+  .cyber-focus:focus {
+    outline: none;
+    box-shadow:
+      0 0 10px var(--neon-cyan),
+      0 0 20px rgba(0, 255, 255, 0.5),
+      inset 0 0 10px rgba(0, 255, 255, 0.1);
+    border-color: var(--neon-cyan);
+  }
+
+  .cyber-focus-pink:focus {
+    outline: none;
+    box-shadow:
+      0 0 10px var(--neon-pink),
+      0 0 20px rgba(255, 0, 128, 0.5),
+      inset 0 0 10px rgba(255, 0, 128, 0.1);
+    border-color: var(--neon-pink);
+  }
+
+  /* Cyberpunk Prose Styling */
+  .cyberpunk-prose {
+    color: rgb(212 212 216);
+  }
+
+  .cyberpunk-prose h1,
+  .cyberpunk-prose h2,
+  .cyberpunk-prose h3 {
+    color: var(--neon-cyan);
+    font-family: var(--font-jetbrains-mono);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: -0.025em;
+  }
+
+  .cyberpunk-prose h1 {
+    font-size: 2.25rem;
+    margin-bottom: 2rem;
+    margin-top: 3rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid var(--neon-cyan);
+  }
+
+  .cyberpunk-prose h2 {
+    font-size: 1.875rem;
+    margin-bottom: 1.5rem;
+    margin-top: 2.5rem;
+  }
+
+  .cyberpunk-prose h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+  }
+
+  .cyberpunk-prose p {
+    color: rgb(212 212 216);
+    line-height: 1.625;
+    margin-bottom: 1.5rem;
+    font-size: 1.125rem;
+  }
+
+  .cyberpunk-prose a {
+    color: var(--neon-magenta);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.2s;
+  }
+
+  .cyberpunk-prose a:hover {
+    color: var(--neon-pink);
+  }
+
+  .cyberpunk-prose ul,
+  .cyberpunk-prose ol {
+    color: rgb(212 212 216);
+    padding-left: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .cyberpunk-prose ul > * + *,
+  .cyberpunk-prose ol > * + * {
+    margin-top: 0.5rem;
+  }
+
+  .cyberpunk-prose li {
+    font-size: 1.125rem;
+  }
+
+  .cyberpunk-prose blockquote {
+    border-left: 4px solid var(--neon-magenta);
+    padding-left: 1.5rem;
+    font-style: italic;
+    color: rgb(161 161 170);
+    background-color: #000;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    position: relative;
+    box-shadow:
+      -4px 0 15px rgba(155, 90, 142, 0.3),
+      inset 0 0 20px rgba(155, 90, 142, 0.05);
+  }
+
+  .cyberpunk-prose blockquote::before {
+    content: '"';
+    position: absolute;
+    top: -0.5rem;
+    left: 0.5rem;
+    font-size: 3.75rem;
+    color: var(--neon-magenta);
+    opacity: 0.3;
+    font-family: monospace;
+  }
+
+  .cyberpunk-prose code {
+    color: var(--neon-cyan);
+    background-color: #000;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.875rem;
+    font-family: monospace;
+    border: 2px solid var(--neon-cyan);
+    box-shadow: 0 0 8px rgba(90, 139, 149, 0.3);
+    text-shadow: 0 0 6px rgba(90, 139, 149, 0.6);
+  }
+
+  .cyberpunk-prose pre {
+    background-color: #000;
+    border: 4px solid var(--neon-purple);
+    padding: 1.5rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    overflow-x: auto;
+    box-shadow:
+      0 0 25px rgba(123, 101, 147, 0.6),
+      inset 0 0 25px rgba(123, 101, 147, 0.1);
+  }
+
+  .cyberpunk-prose pre code {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+  }
+
+  .cyberpunk-prose img {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    border: 4px solid var(--neon-pink);
+    box-shadow: 0 0 20px rgba(155, 90, 110, 0.5);
+  }
+
+  .cyberpunk-prose hr {
+    border-color: rgb(39 39 42);
+    border-top-width: 2px;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
 }

app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { JetBrains_Mono } from 'next/font/google'
 import './globals.css'
+import { ThemeProvider } from '@/providers/providers'
 
 const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' })
 
@@ -27,26 +28,34 @@ export const metadata: Metadata = {
   },
 }
 
-export default function RootLayout({
+export default function RootLayout({ children }: { children: React.ReactNode }) {
-  children,
-}: {
-  children: React.ReactNode
-}) {
   return (
-    <html lang="ro" className={jetbrainsMono.variable}>
+    <html lang="ro" suppressHydrationWarning className={jetbrainsMono.variable}>
-      <body className="font-mono bg-zinc-900 text-slate-100">
+      <body className="font-mono bg-zinc-50 text-slate-900 dark:bg-zinc-900 dark:text-slate-100 transition-colors duration-300">
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          storageKey="blog-theme"
+          disableTransitionOnChange={false}
+        >
+          <div className="flex flex-col min-h-screen">
+            <div className="flex-1">{children}</div>
 
             {/* Footer - from worktree-agent-1 */}
-        <footer className="border-t-4 border-slate-800 bg-slate-900">
+            <footer className="mt-auto border-t-4 border-slate-300 dark:border-slate-800 bg-zinc-100 dark:bg-slate-900 transition-colors duration-300">
               <div className="container mx-auto px-4 py-8">
-            <div className="border-2 border-slate-800 p-6">
+                <div className="border-2 border-slate-300 dark:border-slate-800 p-6">
-              <p className="text-center text-slate-500 font-mono text-xs uppercase tracking-wider">
+                  <p className="text-center text-slate-500 dark:text-slate-500 font-mono text-xs uppercase tracking-wider">
-                © 2025 // BLOG & PORTOFOLIU // ALL RIGHTS RESERVED
+                    © 2025 <span style={{ color: 'var(--neon-cyan)' }}>//</span> BLOG &{' '}
+                    <span style={{ color: 'var(--neon-pink)' }}>PORTOFOLIU</span>{' '}
+                    <span style={{ color: 'var(--neon-cyan)' }}>//</span> ALL RIGHTS RESERVED
                   </p>
                 </div>
               </div>
             </footer>
+          </div>
+        </ThemeProvider>
       </body>
     </html>
   )

app/page.tsx

@@ -2,48 +2,72 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { getAllPosts } from '@/lib/markdown'
 import { formatDate } from '@/lib/utils'
+import { ThemeToggle } from '@/components/theme-toggle'
 
 export default async function HomePage() {
   const allPosts = await getAllPosts()
   const featuredPosts = allPosts.slice(0, 6)
 
   return (
-    <main className="min-h-screen bg-zinc-900">
+    <main className="min-h-screen bg-zinc-50 dark:bg-zinc-900 transition-colors duration-300">
       {/* Hero Section - from worktree-agent-2 */}
-      <section className="relative min-h-screen flex items-center justify-center bg-zinc-900 overflow-hidden">
+      <section className="relative min-h-screen flex items-center justify-center bg-zinc-100 dark:bg-zinc-900 overflow-hidden transition-colors duration-300">
         <div className="absolute inset-0 grid-bg opacity-10"></div>
         <div className="absolute inset-0 scanline"></div>
         <div className="absolute inset-0 noise-bg"></div>
 
         <div className="relative z-10 max-w-5xl mx-auto px-6 w-full">
-          <div className="border-4 border-slate-700 bg-slate-900/80 p-8 md:p-12">
+          <div className="border-4 border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-900/80 p-8 md:p-12 transition-colors duration-300">
             {/* Logo */}
-            <div className="mb-8 flex items-center justify-between border-b-2 border-slate-800 pb-4">
+            <div className="mb-8 flex items-center justify-between border-b-2 border-slate-300 dark:border-slate-800 pb-4">
               <div className="flex items-center gap-3">
                 <Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" />
-                <span className="font-mono text-xs text-slate-500 uppercase tracking-widest">TERMINAL:// V2.0</span>
+                <span className="font-mono text-xs text-slate-500 uppercase tracking-widest">
+                  TERMINAL:// V2.0
+                </span>
               </div>
-              <div className="flex gap-4">
+              <div className="flex gap-4 items-center">
-                <Link href="/blog" className="font-mono text-xs text-slate-400 uppercase tracking-wider hover:text-cyan-400">[BLOG]</Link>
+                <Link
-                <Link href="/about" className="font-mono text-xs text-slate-400 uppercase tracking-wider hover:text-cyan-400">[ABOUT]</Link>
+                  href="/blog"
+                  className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400"
+                >
+                  [BLOG]
+                </Link>
+                <Link
+                  href="/about"
+                  className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400"
+                >
+                  [ABOUT]
+                </Link>
+                <ThemeToggle />
               </div>
             </div>
 
-            <div className="border-l-4 border-cyan-900 pl-6 mb-8">
+            <div className="border-l-4 border-cyan-700 dark:border-cyan-900 pl-6 mb-8">
-              <p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">DOCUMENT LEVEL-1 // CLASSIFIED</p>
+              <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
-              <h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-100 uppercase tracking-tight mb-6">
+                DOCUMENT LEVEL-1 // CLASSIFIED
-                BUILD. WRITE.<br/>SHARE.
+              </p>
+              <h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight mb-6">
+                BUILD. WRITE.
+                <br />
+                SHARE.
               </h1>
-              <p className="text-base md:text-lg lg:text-xl text-slate-400 font-mono leading-relaxed max-w-2xl">
+              <p className="text-base md:text-lg lg:text-xl text-slate-700 dark:text-slate-400 font-mono leading-relaxed max-w-2xl">
                 &gt; Explorează idei despre dezvoltare, design și tehnologie_
               </p>
             </div>
 
             <div className="flex gap-4 flex-wrap mt-12">
-              <Link href="/blog" className="px-6 md:px-8 py-3 md:py-4 bg-cyan-900 text-slate-100 border-2 border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-800 hover:border-cyan-600 rounded-none">
+              <Link
+                href="/blog"
+                className="px-6 md:px-8 py-3 md:py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 border-2 border-cyan-600 dark:border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 hover:border-cyan-500 dark:hover:border-cyan-600 rounded-none transition-colors duration-200"
+              >
                 [EXPLOREAZĂ BLOG]
               </Link>
-              <Link href="/about" className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-300 border-2 border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-800 hover:border-slate-600 rounded-none">
+              <Link
+                href="/about"
+                className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 rounded-none transition-colors duration-200"
+              >
                 [DESPRE MINE]
               </Link>
             </div>
@@ -52,13 +76,13 @@ export default async function HomePage() {
       </section>
 
       {/* Featured Posts Grid - from worktree-agent-1 */}
-      <section className="py-24 bg-slate-900 border-t-4 border-slate-800">
+      <section className="py-24 bg-zinc-100 dark:bg-slate-900 border-t-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
         <div className="max-w-7xl mx-auto px-6">
-          <div className="border-l-4 border-emerald-900 pl-6 mb-12">
+          <div className="border-l-4 border-emerald-700 dark:border-emerald-900 pl-6 mb-12">
-            <p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
               ARCHIVE ACCESS // RECENT ENTRIES
             </p>
-            <h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-100 uppercase tracking-tight">
+            <h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight">
               &gt; POSTĂRI RECENTE_
             </h2>
           </div>
@@ -67,37 +91,39 @@ export default async function HomePage() {
             {featuredPosts.map((post, index) => (
               <article
                 key={post.slug}
-                className="group relative bg-slate-900 border-4 border-slate-700 overflow-hidden hover:border-cyan-900"
+                className="group relative bg-white dark:bg-slate-900 border-4 border-slate-300 dark:border-slate-700 overflow-hidden hover:border-cyan-700 dark:hover:border-cyan-900 transition-colors duration-300"
               >
-                <div className="aspect-video relative overflow-hidden bg-zinc-900">
+                <div className="aspect-video relative overflow-hidden bg-zinc-200 dark:bg-zinc-900">
                   {post.frontmatter.image ? (
                     <Image
                       src={post.frontmatter.image}
                       alt={post.frontmatter.title}
                       fill
-                      className="object-cover grayscale group-hover:grayscale-0"
+                      className="object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
                     />
                   ) : (
-                    <div className="w-full h-full bg-zinc-800 flex items-center justify-center">
+                    <div className="w-full h-full bg-zinc-300 dark:bg-zinc-800 flex items-center justify-center">
-                      <span className="font-mono text-6xl text-slate-700">#{String(index + 1).padStart(2, '0')}</span>
+                      <span className="font-mono text-6xl text-slate-400 dark:text-slate-700">
+                        #{String(index + 1).padStart(2, '0')}
+                      </span>
                     </div>
                   )}
-                  <div className="absolute inset-0 bg-zinc-900/60"></div>
+                  <div className="absolute inset-0 bg-zinc-100/60 dark:bg-zinc-900/60"></div>
-                  <div className="absolute top-0 left-0 right-0 bg-slate-900 border-b-2 border-slate-700 px-4 py-2">
+                  <div className="absolute top-0 left-0 right-0 bg-white/90 dark:bg-slate-900 border-b-2 border-slate-300 dark:border-slate-700 px-4 py-2">
-                    <span className="font-mono text-xs text-cyan-400 uppercase tracking-wider">
+                    <span className="font-mono text-xs text-cyan-600 dark:text-cyan-400 uppercase tracking-wider">
                       FILE#{String(index + 1).padStart(3, '0')} // {post.frontmatter.category}
                     </span>
                   </div>
                 </div>
-                <div className="p-6 border-t-4 border-slate-800">
+                <div className="p-6 border-t-4 border-slate-300 dark:border-slate-800">
-                  <div className="border-l-4 border-emerald-900 pl-4">
+                  <div className="border-l-4 border-emerald-700 dark:border-emerald-900 pl-4">
-                    <h3 className="text-xl font-mono font-bold text-slate-100 mb-3 uppercase tracking-tight">
+                    <h3 className="text-xl font-mono font-bold text-slate-900 dark:text-slate-100 mb-3 uppercase tracking-tight">
                       {post.frontmatter.title}
                     </h3>
-                    <p className="text-slate-400 text-sm leading-relaxed mb-4 font-mono">
+                    <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4 font-mono">
                       {post.frontmatter.description}
                     </p>
-                    <div className="flex items-center gap-4 text-xs text-slate-500 font-mono mb-4">
+                    <div className="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-500 font-mono mb-4">
                       <span>{formatDate(post.frontmatter.date)}</span>
                       <span>//</span>
                       <span>{post.readingTime} MIN</span>
@@ -105,7 +131,7 @@ export default async function HomePage() {
                   </div>
                   <Link
                     href={`/blog/${post.slug}`}
-                    className="inline-flex items-center text-cyan-400 font-mono text-xs font-bold uppercase tracking-wider hover:text-cyan-300 border-2 border-slate-700 px-4 py-2 hover:border-cyan-900"
+                    className="inline-flex items-center text-cyan-600 dark:text-cyan-400 font-mono text-xs font-bold uppercase tracking-wider hover:text-cyan-500 dark:hover:text-cyan-300 border-2 border-slate-400 dark:border-slate-700 px-4 py-2 hover:border-cyan-700 dark:hover:border-cyan-900 transition-colors duration-200"
                   >
                     [ACCESEAZĂ] &gt;&gt;
                   </Link>
@@ -114,55 +140,61 @@ export default async function HomePage() {
             ))}
           </div>
 
+          <div className="mt-12 flex gap-4 justify-center flex-wrap">
             {allPosts.length > 6 && (
-            <div className="mt-12 text-center">
               <Link
                 href="/blog"
-                className="inline-flex items-center px-8 py-4 bg-transparent text-slate-300 border-2 border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-800 hover:border-slate-600"
+                className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200"
               >
                 [VEZI TOATE ARTICOLELE] &gt;&gt;
               </Link>
-            </div>
             )}
+            <Link
+              href="/tags"
+              className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200"
+            >
+              [VEZI TOATE TAG-URILE] &gt;&gt;
+            </Link>
+          </div>
         </div>
       </section>
 
       {/* Stats Section - from worktree-agent-1 */}
-      <section className="py-24 bg-zinc-900 border-y-4 border-slate-800">
+      <section className="py-24 bg-zinc-50 dark:bg-zinc-900 border-y-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
         <div className="max-w-7xl mx-auto px-6">
-          <div className="border-l-4 border-teal-900 pl-6 mb-12">
+          <div className="border-l-4 border-teal-700 dark:border-teal-900 pl-6 mb-12">
-            <p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
               SYSTEM STATISTICS // DATABASE METRICS
             </p>
-            <h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-100 uppercase tracking-tight">
+            <h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight">
               &gt; METRICI_
             </h2>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
-              <div className="text-6xl font-mono font-bold text-cyan-400 mb-4">
+              <div className="text-6xl font-mono font-bold text-cyan-600 dark:text-cyan-400 mb-4">
                 {allPosts.length}+
               </div>
-              <p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
                 ARTICOLE PUBLICATE
               </p>
             </div>
 
-            <div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
-              <div className="text-6xl font-mono font-bold text-emerald-400 mb-4">
+              <div className="text-6xl font-mono font-bold text-emerald-600 dark:text-emerald-400 mb-4">
                 50K+
               </div>
-              <p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
                 CITITORI LUNARI
               </p>
             </div>
 
-            <div className="border-4 border-slate-700 bg-slate-900 p-8 text-center">
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
-              <div className="text-6xl font-mono font-bold text-teal-400 mb-4">
+              <div className="text-6xl font-mono font-bold text-teal-600 dark:text-teal-400 mb-4">
                 99%
               </div>
-              <p className="text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-800 pt-4">
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
                 SATISFACȚIE
               </p>
             </div>
@@ -171,32 +203,32 @@ export default async function HomePage() {
       </section>
 
       {/* Newsletter CTA - from worktree-agent-1 */}
-      <section className="py-24 bg-slate-900 border-t-4 border-slate-800">
+      <section className="py-24 bg-zinc-100 dark:bg-slate-900 border-t-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
         <div className="max-w-3xl mx-auto px-6">
-          <div className="border-4 border-slate-700 bg-zinc-900 p-12">
+          <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-zinc-900 p-12 transition-colors duration-300">
-            <p className="font-mono text-xs text-slate-500 uppercase tracking-widest mb-2">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
               NEWSLETTER SUBSCRIPTION
             </p>
-            <h2 className="text-3xl font-mono font-bold text-slate-100 uppercase mb-4">
+            <h2 className="text-3xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase mb-4">
               &gt; RĂMÂI LA CURENT_
             </h2>
-            <p className="text-slate-400 font-mono text-sm mb-8 border-l-2 border-cyan-900 pl-4">
+            <p className="text-slate-700 dark:text-slate-400 font-mono text-sm mb-8 border-l-2 border-cyan-700 dark:border-cyan-900 pl-4">
               Primește cele mai noi articole direct în inbox
             </p>
-            <form className="flex gap-0 flex-col sm:flex-row border-2 border-slate-700">
+            <form className="flex gap-0 flex-col sm:flex-row border-2 border-slate-400 dark:border-slate-700">
               <input
                 type="email"
                 placeholder="email@exemplu.com"
-                className="flex-1 px-6 py-4 bg-slate-800 text-white font-mono border-b-2 sm:border-b-0 sm:border-r-2 border-slate-700 focus:bg-slate-750 focus:outline-none placeholder:text-slate-600"
+                className="flex-1 px-6 py-4 bg-zinc-100 dark:bg-slate-800 text-slate-900 dark:text-white font-mono border-b-2 sm:border-b-0 sm:border-r-2 border-slate-400 dark:border-slate-700 focus:bg-zinc-200 dark:focus:bg-slate-750 focus:outline-none placeholder:text-slate-400 dark:placeholder:text-slate-600 transition-colors duration-200"
               />
               <button
                 type="submit"
-                className="px-8 py-4 bg-cyan-900 text-slate-100 font-mono font-bold uppercase text-sm tracking-wider hover:bg-cyan-800 whitespace-nowrap border-t-2 sm:border-t-0 sm:border-l-2 border-cyan-700"
+                className="px-8 py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 font-mono font-bold uppercase text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 whitespace-nowrap border-t-2 sm:border-t-0 sm:border-l-2 border-cyan-600 dark:border-cyan-700 transition-colors duration-200"
               >
                 [ABONEAZĂ-TE]
               </button>
             </form>
-            <p className="text-slate-600 font-mono text-xs mt-4 uppercase">
+            <p className="text-slate-500 dark:text-slate-600 font-mono text-xs mt-4 uppercase">
               // Fără spam. Dezabonare oricând.
             </p>
           </div>

app/tags/[tag]/not-found.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+
+export default function TagNotFound() {
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center">
+      <div className="max-w-2xl mx-auto px-6">
+        <div className="border-4 border-red-900 bg-red-950 p-12 text-center">
+          <div className="border-2 border-red-800 bg-red-900 p-4 mb-6 inline-block">
+            <p className="font-mono text-6xl font-bold text-red-400">404</p>
+          </div>
+          <p className="font-mono text-xs text-red-600 uppercase tracking-widest mb-2">
+            ERROR: TAG NOT FOUND
+          </p>
+          <h1 className="font-mono text-3xl font-bold uppercase mb-4 text-red-400">
+            TAG DOES NOT EXIST
+          </h1>
+          <p className="font-mono text-sm text-red-300 mb-8 max-w-md mx-auto">
+            &gt; THE REQUESTED TAG COULD NOT BE LOCATED IN THE DATABASE
+            <br />
+            &gt; IT MAY HAVE BEEN REMOVED OR NEVER EXISTED
+          </p>
+          <div className="flex gap-4 justify-center flex-wrap">
+            <Link
+              href="/tags"
+              className="inline-block px-6 py-3 font-mono text-xs uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
+            >
+              &gt; VIEW ALL TAGS
+            </Link>
+            <Link
+              href="/blog"
+              className="inline-block px-6 py-3 font-mono text-xs uppercase border-2 border-slate-600 bg-slate-900 text-slate-300 hover:bg-slate-800 transition"
+            >
+              &gt; VIEW ALL POSTS
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/tags/[tag]/page.tsx

@@ -0,0 +1,177 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { getAllTags, getPostsByTag, getTagInfo, getRelatedTags } from '@/lib/tags'
+import { TagList } from '@/components/blog/tag-list'
+import { formatDate } from '@/lib/utils'
+
+export async function generateStaticParams() {
+  const tags = await getAllTags()
+  return tags.map(tag => ({ tag: tag.slug }))
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ tag: string }>
+}): Promise<Metadata> {
+  const { tag } = await params
+  const tagInfo = await getTagInfo(tag)
+
+  if (!tagInfo) {
+    return { title: 'Tag negăsit' }
+  }
+
+  return {
+    title: `Tag: ${tagInfo.name}`,
+    description: `Articole marcate cu #${tagInfo.name}. ${tagInfo.count} articole disponibile.`,
+    openGraph: {
+      title: `Tag: ${tagInfo.name}`,
+      description: `Explorează ${tagInfo.count} articole despre ${tagInfo.name}`,
+    },
+  }
+}
+
+function PostCard({ post }: { post: any }) {
+  return (
+    <article className="border-2 border-slate-700 bg-slate-900 p-6 hover:border-cyan-400 transition">
+      {post.frontmatter.image && (
+        <img
+          src={post.frontmatter.image}
+          alt={post.frontmatter.title}
+          className="w-full h-48 object-cover mb-4 border-2 border-slate-800"
+        />
+      )}
+
+      <div className="flex items-center gap-2 font-mono text-xs text-zinc-500 mb-3 uppercase">
+        <time dateTime={post.frontmatter.date}>{formatDate(post.frontmatter.date)}</time>
+        <span>&gt;</span>
+        <span>{post.readingTime} min</span>
+      </div>
+
+      <h2 className="font-mono text-lg font-bold mb-3 uppercase">
+        <Link href={`/blog/${post.slug}`} className="text-cyan-400 hover:text-cyan-300 transition">
+          {post.frontmatter.title}
+        </Link>
+      </h2>
+
+      <p className="text-zinc-400 mb-4 line-clamp-3">{post.frontmatter.description}</p>
+
+      {post.frontmatter.tags && <TagList tags={post.frontmatter.tags} variant="minimal" />}
+    </article>
+  )
+}
+
+export default async function TagPage({ params }: { params: Promise<{ tag: string }> }) {
+  const { tag } = await params
+  const tagInfo = await getTagInfo(tag)
+
+  if (!tagInfo) {
+    notFound()
+  }
+
+  const posts = await getPostsByTag(tag)
+  const relatedTags = await getRelatedTags(tag)
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100">
+      <div className="max-w-6xl mx-auto px-6 py-12">
+        <div className="border-4 border-cyan-800 bg-cyan-950 p-8 mb-8">
+          <div className="flex items-center justify-between flex-wrap gap-4">
+            <div>
+              <p className="font-mono text-xs text-cyan-600 uppercase tracking-widest mb-2">
+                TAG ARCHIVE
+              </p>
+              <h1 className="font-mono text-3xl font-bold uppercase mb-2">
+                <span className="text-cyan-400">#{tagInfo.name}</span>
+              </h1>
+              <p className="font-mono text-sm text-cyan-300">
+                &gt; {tagInfo.count} {tagInfo.count === 1 ? 'DOCUMENT' : 'DOCUMENTS'}
+              </p>
+            </div>
+            <div>
+              <Link
+                href="/tags"
+                className="inline-flex items-center px-4 py-2 font-mono text-xs uppercase border-2 border-cyan-400 bg-slate-900 text-cyan-400 hover:bg-cyan-900 transition"
+              >
+                &gt; ALL TAGS
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid gap-8 lg:grid-cols-4">
+          <div className="lg:col-span-3">
+            {posts.length === 0 ? (
+              <div className="border-4 border-slate-800 bg-slate-900 p-12 text-center">
+                <p className="font-mono text-zinc-400 mb-6 uppercase">&gt; NO DOCUMENTS FOUND</p>
+                <Link
+                  href="/blog"
+                  className="inline-block px-6 py-3 font-mono text-sm uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
+                >
+                  &gt; VIEW ALL POSTS
+                </Link>
+              </div>
+            ) : (
+              <div className="grid gap-6">
+                {posts.map(post => (
+                  <PostCard key={post.slug} post={post} />
+                ))}
+              </div>
+            )}
+          </div>
+
+          <aside className="lg:col-span-1 space-y-6">
+            {relatedTags.length > 0 && (
+              <div className="border-2 border-slate-700 bg-slate-900 p-6">
+                <div className="border-b-2 border-slate-700 pb-3 mb-4">
+                  <h2 className="font-mono text-sm font-bold uppercase text-cyan-400">
+                    RELATED TAGS
+                  </h2>
+                </div>
+                <div className="space-y-2">
+                  {relatedTags.map(tag => (
+                    <Link
+                      key={tag.slug}
+                      href={`/tags/${tag.slug}`}
+                      className="flex items-center justify-between p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition"
+                    >
+                      <span className="font-mono text-xs uppercase text-zinc-300">#{tag.name}</span>
+                      <span className="font-mono text-xs text-zinc-500">[{tag.count}]</span>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="border-2 border-slate-700 bg-slate-900 p-6">
+              <div className="border-b-2 border-slate-700 pb-3 mb-4">
+                <h2 className="font-mono text-sm font-bold uppercase text-cyan-400">QUICK NAV</h2>
+              </div>
+              <div className="space-y-2">
+                <Link
+                  href="/blog"
+                  className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
+                >
+                  &gt; ALL POSTS
+                </Link>
+                <Link
+                  href="/tags"
+                  className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
+                >
+                  &gt; ALL TAGS
+                </Link>
+                <Link
+                  href="/"
+                  className="block p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition font-mono text-xs uppercase"
+                >
+                  &gt; HOME
+                </Link>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  )
+}

app/tags/layout.tsx

@@ -0,0 +1,16 @@
+import { Metadata } from 'next'
+import { Navbar } from '@/components/blog/navbar'
+
+export const metadata: Metadata = {
+  title: 'Tag-uri',
+  description: 'Explorează articolele după tag-uri',
+}
+
+export default function TagsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  )
+}

app/tags/page.tsx

@@ -0,0 +1,135 @@
+import { Metadata } from 'next'
+import Link from 'next/link'
+import { getAllTags, getTagCloud } from '@/lib/tags'
+import { TagCloud } from '@/components/blog/tag-cloud'
+import { TagBadge } from '@/components/blog/tag-badge'
+
+export const metadata: Metadata = {
+  title: 'Tag-uri',
+  description: 'Explorează articolele după tag-uri',
+}
+
+export default async function TagsPage() {
+  const allTags = await getAllTags()
+  const tagCloud = await getTagCloud()
+
+  if (allTags.length === 0) {
+    return (
+      <div className="min-h-screen bg-slate-950 text-slate-100">
+        <div className="max-w-6xl mx-auto px-6 py-12">
+          <div className="border-4 border-slate-800 bg-slate-900 p-12 text-center">
+            <h1 className="font-mono text-3xl font-bold uppercase mb-4 text-cyan-400">
+              TAG DATABASE
+            </h1>
+            <p className="font-mono text-zinc-400 mb-8">&gt; NO TAGS AVAILABLE</p>
+            <Link
+              href="/blog"
+              className="inline-block px-6 py-3 font-mono text-sm uppercase border-2 border-cyan-400 bg-cyan-900 text-cyan-100 hover:bg-cyan-800 transition"
+            >
+              &gt; VIEW ALL POSTS
+            </Link>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const groupedTags = allTags.reduce(
+    (acc, tag) => {
+      const firstLetter = tag.name[0].toUpperCase()
+      if (!acc[firstLetter]) {
+        acc[firstLetter] = []
+      }
+      acc[firstLetter].push(tag)
+      return acc
+    },
+    {} as Record<string, typeof allTags>
+  )
+
+  const sortedLetters = Object.keys(groupedTags).sort()
+
+  return (
+    <div className="min-h-screen bg-slate-950 text-slate-100">
+      <div className="max-w-6xl mx-auto px-6 py-12">
+        <div className="border-4 border-slate-800 bg-slate-900 p-8 mb-8">
+          <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
+            DOCUMENT TYPE: TAG DATABASE
+          </p>
+          <h1 className="font-mono text-4xl font-bold uppercase text-cyan-400 mb-4">
+            TAG REGISTRY
+          </h1>
+          <p className="font-mono text-lg text-zinc-400">&gt; TOTAL TAGS: {allTags.length}</p>
+        </div>
+
+        <section className="mb-12">
+          <div className="border-2 border-slate-700 bg-slate-900 p-6 mb-2">
+            <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
+              SECTION: TAG CLOUD VISUALIZATION
+            </p>
+          </div>
+          <div className="border-2 border-slate-700 bg-zinc-950 p-8">
+            <TagCloud tags={tagCloud} />
+          </div>
+        </section>
+
+        <section className="mb-12">
+          <div className="border-2 border-slate-700 bg-slate-900 p-6 mb-2">
+            <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest">
+              SECTION: ALPHABETICAL INDEX
+            </p>
+          </div>
+          <div className="space-y-8">
+            {sortedLetters.map(letter => (
+              <div key={letter}>
+                <div className="border-2 border-cyan-700 bg-cyan-950 p-4 mb-4">
+                  <h3 className="font-mono text-xl font-bold text-cyan-400 uppercase">
+                    &gt; [{letter}]
+                  </h3>
+                </div>
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                  {groupedTags[letter].map(tag => (
+                    <Link
+                      key={tag.slug}
+                      href={`/tags/${tag.slug}`}
+                      className="flex items-center justify-between p-4 border-2 border-slate-700 bg-slate-900 hover:border-cyan-400 hover:bg-slate-800 transition"
+                    >
+                      <span className="font-mono text-sm uppercase">#{tag.name}</span>
+                      <TagBadge count={tag.count} />
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="border-4 border-cyan-800 bg-cyan-950 p-8">
+          <div className="mb-6">
+            <p className="font-mono text-xs text-cyan-600 uppercase tracking-widest mb-2">
+              DOCUMENT STATISTICS
+            </p>
+            <h2 className="font-mono text-2xl font-bold uppercase text-cyan-400">TAG METRICS</h2>
+          </div>
+          <div className="grid gap-6 sm:grid-cols-3">
+            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
+              <div className="font-mono text-3xl font-bold text-cyan-400">{allTags.length}</div>
+              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">TOTAL TAGS</div>
+            </div>
+            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
+              <div className="font-mono text-3xl font-bold text-cyan-400">
+                {Math.max(...allTags.map(t => t.count))}
+              </div>
+              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">MAX POSTS/TAG</div>
+            </div>
+            <div className="border-2 border-cyan-700 bg-slate-900 p-6 text-center">
+              <div className="font-mono text-3xl font-bold text-cyan-400">
+                {Math.round(allTags.reduce((sum, t) => sum + t.count, 0) / allTags.length)}
+              </div>
+              <div className="font-mono text-xs text-zinc-400 uppercase mt-2">AVG POSTS/TAG</div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}

components/blog/ImageGallery.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useState } from 'react'
+import { OptimizedImage } from './OptimizedImage'
+
+interface ImageItem {
+  src: string
+  alt: string
+  caption?: string
+}
+
+interface ImageGalleryProps {
+  images: ImageItem[]
+  columns?: 2 | 3 | 4
+  className?: string
+}
+
+export function ImageGallery({ images, columns = 3, className = '' }: ImageGalleryProps) {
+  const [selectedImage, setSelectedImage] = useState<ImageItem | null>(null)
+
+  const gridCols = {
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+  }
+
+  return (
+    <>
+      <div className={`grid ${gridCols[columns]} gap-4 ${className}`}>
+        {images.map((image, index) => (
+          <button
+            key={index}
+            onClick={() => setSelectedImage(image)}
+            className="group relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50 transition-all hover:border-emerald-500 hover:shadow-lg hover:shadow-emerald-500/20"
+          >
+            <div className="aspect-video relative">
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="w-full h-full object-cover transition-transform group-hover:scale-105"
+              />
+            </div>
+            {image.caption && <div className="p-2 text-sm text-zinc-400">{image.caption}</div>}
+          </button>
+        ))}
+      </div>
+
+      {selectedImage && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
+          onClick={() => setSelectedImage(null)}
+        >
+          <button
+            className="absolute top-4 right-4 text-zinc-400 hover:text-zinc-100 transition-colors"
+            onClick={() => setSelectedImage(null)}
+          >
+            <svg className="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+          <div className="max-w-5xl w-full" onClick={e => e.stopPropagation()}>
+            <OptimizedImage
+              src={selectedImage.src}
+              alt={selectedImage.alt}
+              caption={selectedImage.caption}
+              width={1200}
+              height={800}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

components/blog/MarkdownRenderer.tsx

@@ -1,151 +0,0 @@
-'use client';
-
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import Image from 'next/image';
-import Link from 'next/link';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-
-interface MarkdownRendererProps {
-  content: string;
-}
-
-export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
-  return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      components={{
-        h1: ({ children }) => (
-          <h1 className="text-4xl font-bold mt-8 mb-4">{children}</h1>
-        ),
-        h2: ({ children }) => (
-          <h2 className="text-3xl font-bold mt-6 mb-3">{children}</h2>
-        ),
-        h3: ({ children }) => (
-          <h3 className="text-2xl font-bold mt-4 mb-2">{children}</h3>
-        ),
-        h4: ({ children }) => (
-          <h4 className="text-xl font-bold mt-3 mb-2">{children}</h4>
-        ),
-        h5: ({ children }) => (
-          <h5 className="text-lg font-bold mt-2 mb-1">{children}</h5>
-        ),
-        h6: ({ children }) => (
-          <h6 className="text-base font-bold mt-2 mb-1">{children}</h6>
-        ),
-        p: ({ children }) => (
-          <p className="my-4 leading-7">{children}</p>
-        ),
-        ul: ({ children }) => (
-          <ul className="list-disc list-inside my-4 space-y-2">{children}</ul>
-        ),
-        ol: ({ children }) => (
-          <ol className="list-decimal list-inside my-4 space-y-2">{children}</ol>
-        ),
-        li: ({ children }) => (
-          <li className="ml-4">{children}</li>
-        ),
-        blockquote: ({ children }) => (
-          <blockquote className="border-l-4 border-gray-300 pl-4 my-4 italic text-gray-700">
-            {children}
-          </blockquote>
-        ),
-        code: ({ inline, className, children, ...props }: any) => {
-          const match = /language-(\w+)/.exec(className || '');
-          return !inline && match ? (
-            <SyntaxHighlighter
-              style={vscDarkPlus}
-              language={match[1]}
-              PreTag="div"
-              className="my-4 rounded-lg"
-              {...props}
-            >
-              {String(children).replace(/\n$/, '')}
-            </SyntaxHighlighter>
-          ) : (
-            <code className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
-              {children}
-            </code>
-          );
-        },
-        img: ({ src, alt }) => {
-          if (!src || typeof src !== 'string') return null;
-          const isExternal = src.startsWith('http://') || src.startsWith('https://');
-
-          if (isExternal) {
-            return (
-              <img
-                src={src}
-                alt={alt || ''}
-                className="my-4 rounded-lg max-w-full h-auto"
-              />
-            );
-          }
-
-          return (
-            <div className="my-4 relative w-full h-auto">
-              <Image
-                src={src}
-                alt={alt || ''}
-                width={800}
-                height={600}
-                className="rounded-lg"
-                style={{ width: '100%', height: 'auto' }}
-              />
-            </div>
-          );
-        },
-        a: ({ href, children }) => {
-          if (!href) return <>{children}</>;
-          const isExternal = href.startsWith('http://') || href.startsWith('https://');
-
-          if (isExternal) {
-            return (
-              <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 hover:underline"
-              >
-                {children}
-              </a>
-            );
-          }
-
-          return (
-            <Link href={href} className="text-blue-600 hover:underline">
-              {children}
-            </Link>
-          );
-        },
-        table: ({ children }) => (
-          <div className="overflow-x-auto my-4">
-            <table className="min-w-full border-collapse border border-gray-300">
-              {children}
-            </table>
-          </div>
-        ),
-        thead: ({ children }) => (
-          <thead className="bg-gray-100">{children}</thead>
-        ),
-        tbody: ({ children }) => (
-          <tbody>{children}</tbody>
-        ),
-        tr: ({ children }) => (
-          <tr className="border-b border-gray-300">{children}</tr>
-        ),
-        th: ({ children }) => (
-          <th className="border border-gray-300 px-4 py-2 text-left font-bold">
-            {children}
-          </th>
-        ),
-        td: ({ children }) => (
-          <td className="border border-gray-300 px-4 py-2">{children}</td>
-        ),
-      }}
-    >
-      {content}
-    </ReactMarkdown>
-  );
-}

components/blog/OptimizedImage.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import Image from 'next/image'
+import { useState } from 'react'
+
+interface OptimizedImageProps {
+  src: string
+  alt: string
+  caption?: string
+  width?: number
+  height?: number
+  priority?: boolean
+  className?: string
+}
+
+export function OptimizedImage({
+  src,
+  alt,
+  caption,
+  width = 800,
+  height = 600,
+  priority = false,
+  className = '',
+}: OptimizedImageProps) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [hasError, setHasError] = useState(false)
+
+  if (hasError) {
+    return (
+      <div className="my-8 rounded-lg border border-zinc-800 bg-zinc-900/50 p-8 text-center">
+        <p className="text-zinc-400">Failed to load image</p>
+        {caption && <p className="mt-2 text-sm text-zinc-500">{caption}</p>}
+      </div>
+    )
+  }
+
+  return (
+    <figure className={`my-8 ${className}`}>
+      <div className="relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50">
+        <Image
+          src={src}
+          alt={alt}
+          width={width}
+          height={height}
+          priority={priority}
+          style={{ maxWidth: '100%', height: 'auto' }}
+          className={`transition-opacity duration-300 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
+          onLoad={() => setIsLoading(false)}
+          onError={() => setHasError(true)}
+          placeholder="blur"
+          blurDataURL="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect width='400' height='300' fill='%2318181b'/%3E%3C/svg%3E"
+        />
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent" />
+          </div>
+        )}
+      </div>
+      {caption && (
+        <figcaption className="mt-3 text-center text-sm text-zinc-400">{caption}</figcaption>
+      )}
+    </figure>
+  )
+}

components/blog/blog-card.tsx

@@ -0,0 +1,136 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { Post } from '@/lib/types/frontmatter'
+import { formatDate } from '@/lib/utils'
+
+interface BlogCardProps {
+  post: Post
+  variant: 'image-top' | 'image-side' | 'text-only'
+}
+
+export function BlogCard({ post, variant }: BlogCardProps) {
+  const hasImage = !!post.frontmatter.image
+
+  if (!hasImage || variant === 'text-only') {
+    return (
+      <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
+        <article className="border border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
+          <div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
+            <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
+              {post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span>{' '}
+              {formatDate(post.frontmatter.date)}
+            </span>
+          </div>
+          <h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3">
+            {post.frontmatter.title}
+          </h3>
+          <p className="font-mono text-sm text-zinc-400 mb-4 leading-relaxed">
+            {post.frontmatter.description}
+          </p>
+          <div className="flex flex-wrap gap-2 mb-4">
+            {post.frontmatter.tags.map(tag => (
+              <span
+                key={tag}
+                className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase"
+              >
+                #{tag}
+              </span>
+            ))}
+          </div>
+          <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
+            &gt; READ [{post.readingTime}MIN]
+          </span>
+        </article>
+      </Link>
+    )
+  }
+
+  if (variant === 'image-side') {
+    return (
+      <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
+        <article className="border border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
+          <div className="flex flex-col md:flex-row h-full">
+            <div className="md:w-1/3 relative h-64 md:h-auto bg-zinc-900">
+              <Image
+                src={post.frontmatter.image!}
+                alt={post.frontmatter.title}
+                fill
+                className="object-cover grayscale"
+              />
+              <div className="absolute inset-0 bg-zinc-900/60" />
+            </div>
+            <div className="md:w-2/3 p-6">
+              <div className="border-l-2 border-cyan-400 pl-4 mb-4">
+                <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
+                  {post.frontmatter.category} // {formatDate(post.frontmatter.date)}
+                </span>
+              </div>
+              <h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3">
+                {post.frontmatter.title}
+              </h3>
+              <p className="font-mono text-sm text-zinc-400 mb-4 leading-relaxed">
+                {post.frontmatter.description}
+              </p>
+              <div className="flex flex-wrap gap-2 mb-4">
+                {post.frontmatter.tags.map(tag => (
+                  <span
+                    key={tag}
+                    className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase"
+                  >
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+              <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
+                &gt; READ [{post.readingTime}MIN]
+              </span>
+            </div>
+          </div>
+        </article>
+      </Link>
+    )
+  }
+
+  return (
+    <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
+      <article className="border border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
+        <div className="relative h-64 bg-zinc-900">
+          <Image
+            src={post.frontmatter.image!}
+            alt={post.frontmatter.title}
+            fill
+            className="object-cover grayscale"
+          />
+          <div className="absolute inset-0 bg-zinc-900/60" />
+        </div>
+        <div className="p-6">
+          <div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
+            <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
+              {post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span>{' '}
+              {formatDate(post.frontmatter.date)}
+            </span>
+          </div>
+          <h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3">
+            {post.frontmatter.title}
+          </h3>
+          <p className="font-mono text-sm text-zinc-400 mb-4 leading-relaxed">
+            {post.frontmatter.description}
+          </p>
+          <div className="flex flex-wrap gap-2 mb-4">
+            {post.frontmatter.tags.map(tag => (
+              <span
+                key={tag}
+                className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase"
+              >
+                #{tag}
+              </span>
+            ))}
+          </div>
+          <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
+            &gt; READ [{post.readingTime}MIN]
+          </span>
+        </div>
+      </article>
+    </Link>
+  )
+}

components/blog/code-block.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState } from 'react'
+
+interface CodeBlockProps {
+  code: string
+  language: string
+  filename?: string
+  showLineNumbers?: boolean
+}
+
+export function CodeBlock({ code, language, filename, showLineNumbers = true }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="not-prose my-8 border-2 border-[var(--neon-purple)] bg-[rgb(var(--bg-primary))] dark:bg-black relative overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 bg-[rgb(var(--bg-secondary))] dark:bg-zinc-950 border-b-2 border-[var(--neon-purple)] relative">
+        <div className="flex items-center gap-3">
+          {filename && (
+            <span className="text-[var(--neon-cyan)] font-mono text-sm uppercase">
+              &gt;&gt; {filename}
+            </span>
+          )}
+          <span className="px-2 py-1 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase">
+            [{language}]
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleCopy}
+            className="px-3 py-1 bg-[rgb(var(--bg-primary))] dark:bg-black hover:bg-purple-900/30 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase transition-all"
+          >
+            {copied ? '[COPIED✓]' : '[COPY]'}
+          </button>
+          <div className="flex gap-1">
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+          </div>
+        </div>
+      </div>
+
+      <div className="relative overflow-x-auto">
+        <pre className="p-6 text-sm leading-relaxed bg-[rgb(var(--bg-primary))] dark:bg-black text-[var(--neon-cyan)] font-mono">
+          <code>{code}</code>
+        </pre>
+      </div>
+    </div>
+  )
+}

components/blog/markdown-renderer.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import { OptimizedImage } from './OptimizedImage'
+import { CodeBlock } from './code-block'
+import Link from 'next/link'
+
+interface MarkdownRendererProps {
+  content: string
+  className?: string
+}
+
+export default function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+  return (
+    <div className={`prose prose-invert prose-zinc max-w-none ${className}`}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        components={{
+          img: ({ node, src, alt, title, ...props }) => {
+            if (!src || typeof src !== 'string') return null
+
+            const isExternal = src.startsWith('http://') || src.startsWith('https://')
+
+            if (isExternal) {
+              return (
+                <img
+                  src={src}
+                  alt={alt || ''}
+                  title={title}
+                  className="rounded-lg border border-zinc-800"
+                  {...props}
+                />
+              )
+            }
+            // Ensure absolute path for Next Image
+            const absoluteSrc = src.startsWith('/') ? src : `/${src}`
+
+            const titleStr = typeof title === 'string' ? title : ''
+            const [altText, caption] = titleStr?.includes('|')
+              ? titleStr.split('|').map(s => s.trim())
+              : [alt, undefined]
+
+            const url = new URL(absoluteSrc, 'http://localhost')
+            const width = url.searchParams.get('w') ? parseInt(url.searchParams.get('w')!) : 800
+            const height = url.searchParams.get('h') ? parseInt(url.searchParams.get('h')!) : 600
+            const cleanSrc = absoluteSrc.split('?')[0]
+
+            return (
+              <OptimizedImage
+                src={cleanSrc}
+                alt={altText || alt || ''}
+                caption={caption}
+                width={width}
+                height={height}
+              />
+            )
+          },
+          code: ({ node, className, children, ...props }) => {
+            const inline = !className && typeof children === 'string' && !children.includes('\n')
+            const match = /language-(\w+)/.exec(className || '')
+            const language = match ? match[1] : ''
+
+            if (inline) {
+              return (
+                <code
+                  className="rounded bg-zinc-900 px-1.5 py-0.5 text-sm text-emerald-400"
+                  {...props}
+                >
+                  {children}
+                </code>
+              )
+            }
+
+            return <CodeBlock code={String(children).replace(/\n$/, '')} language={language} />
+          },
+          a: ({ node, href, children, ...props }) => {
+            if (!href) return <a {...props}>{children}</a>
+
+            const isExternal = href.startsWith('http://') || href.startsWith('https://')
+            const isAnchor = href.startsWith('#')
+
+            if (isExternal) {
+              return (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-emerald-400 hover:text-emerald-300 inline-flex items-center gap-1"
+                  {...props}
+                >
+                  {children}
+                  <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                    />
+                  </svg>
+                </a>
+              )
+            }
+
+            if (isAnchor) {
+              return (
+                <a href={href} className="text-emerald-400 hover:text-emerald-300" {...props}>
+                  {children}
+                </a>
+              )
+            }
+
+            return (
+              <Link href={href} className="text-emerald-400 hover:text-emerald-300" {...props}>
+                {children}
+              </Link>
+            )
+          },
+          h1: ({ node, children, ...props }) => {
+            const text = String(children)
+            const id = text
+              .toLowerCase()
+              .replace(/[^a-z0-9]+/g, '-')
+              .replace(/(^-|-$)/g, '')
+            return (
+              <h1 id={id} className="text-3xl font-bold text-zinc-100 mt-8 mb-4" {...props}>
+                {children}
+              </h1>
+            )
+          },
+          h2: ({ node, children, ...props }) => {
+            const text = String(children)
+            const id = text
+              .toLowerCase()
+              .replace(/[^a-z0-9]+/g, '-')
+              .replace(/(^-|-$)/g, '')
+            return (
+              <h2 id={id} className="text-2xl font-bold text-zinc-100 mt-6 mb-3" {...props}>
+                {children}
+              </h2>
+            )
+          },
+          h3: ({ node, children, ...props }) => {
+            const text = String(children)
+            const id = text
+              .toLowerCase()
+              .replace(/[^a-z0-9]+/g, '-')
+              .replace(/(^-|-$)/g, '')
+            return (
+              <h3 id={id} className="text-xl font-bold text-zinc-100 mt-4 mb-2" {...props}>
+                {children}
+              </h3>
+            )
+          },
+          ul: ({ node, children, ...props }) => (
+            <ul className="list-disc list-inside space-y-2 text-zinc-300" {...props}>
+              {children}
+            </ul>
+          ),
+          ol: ({ node, children, ...props }) => (
+            <ol className="list-decimal list-inside space-y-2 text-zinc-300" {...props}>
+              {children}
+            </ol>
+          ),
+          blockquote: ({ node, children, ...props }) => (
+            <blockquote
+              className="border-l-4 border-emerald-500 pl-4 italic text-zinc-400"
+              {...props}
+            >
+              {children}
+            </blockquote>
+          ),
+          table: ({ node, children, ...props }) => (
+            <div className="overflow-x-auto my-6">
+              <table className="min-w-full border border-zinc-800" {...props}>
+                {children}
+              </table>
+            </div>
+          ),
+          th: ({ node, children, ...props }) => (
+            <th
+              className="bg-zinc-900 px-4 py-2 text-left font-bold text-zinc-100 border border-zinc-800"
+              {...props}
+            >
+              {children}
+            </th>
+          ),
+          td: ({ node, children, ...props }) => (
+            <td className="px-4 py-2 text-zinc-300 border border-zinc-800" {...props}>
+              {children}
+            </td>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

components/blog/navbar.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { ThemeToggle } from '@/components/theme-toggle'
+
+export function Navbar() {
+  const [isVisible, setIsVisible] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+
+      if (currentScrollY < 10) {
+        setIsVisible(true)
+      } else if (currentScrollY > lastScrollY) {
+        setIsVisible(false)
+      } else {
+        setIsVisible(true)
+      }
+
+      setLastScrollY(currentScrollY)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [lastScrollY])
+
+  return (
+    <nav
+      className={`border-b-4 border-slate-700 bg-slate-900 dark:bg-zinc-950 sticky top-0 z-50 ${isVisible ? 'navbar-visible' : 'navbar-hidden'}`}
+    >
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            <Link
+              href="/"
+              className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer"
+              style={{ color: 'var(--neon-cyan)' }}
+            >
+              &lt; HOME
+            </Link>
+            <span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
+              // <span style={{ color: 'var(--neon-pink)' }}>BLOG</span> ARCHIVE
+            </span>
+          </div>
+          <div className="flex items-center gap-6">
+            <Link
+              href="/about"
+              className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
+            >
+              [ABOUT]
+            </Link>
+            <ThemeToggle />
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}

components/blog/popular-tags.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import { getPopularTags } from '@/lib/tags'
+import { TagBadge } from './tag-badge'
+
+export async function PopularTags({ limit = 5 }: { limit?: number }) {
+  const tags = await getPopularTags(limit)
+
+  if (tags.length === 0) return null
+
+  return (
+    <div className="border-2 border-slate-700 bg-slate-900 p-6">
+      <div className="border-b-2 border-slate-700 pb-3 mb-4">
+        <h3 className="font-mono text-sm font-bold uppercase text-cyan-400">POPULAR TAGS</h3>
+      </div>
+      <div className="space-y-3">
+        {tags.map((tag, index) => (
+          <Link
+            key={tag.slug}
+            href={`/tags/${tag.slug}`}
+            className="flex items-center justify-between group p-2 border border-slate-700 hover:border-cyan-400 hover:bg-slate-800 transition"
+          >
+            <div className="flex items-center space-x-3">
+              <span className="font-mono text-xs text-zinc-500">[{index + 1}]</span>
+              <span className="font-mono text-xs uppercase group-hover:text-cyan-400 transition">
+                #{tag.name}
+              </span>
+            </div>
+            <TagBadge count={tag.count} />
+          </Link>
+        ))}
+      </div>
+      <Link
+        href="/tags"
+        className="block mt-4 text-center font-mono text-xs text-cyan-400 hover:text-cyan-300 transition uppercase"
+      >
+        &gt; VIEW ALL TAGS
+      </Link>
+    </div>
+  )
+}

components/blog/reading-progress.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function ReadingProgress() {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const scrollTop = window.scrollY
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercent = (scrollTop / docHeight) * 100
+      setProgress(Math.min(scrollPercent, 100))
+    }
+
+    window.addEventListener('scroll', updateProgress, { passive: true })
+    updateProgress()
+    return () => window.removeEventListener('scroll', updateProgress)
+  }, [])
+
+  return (
+    <>
+      <div className="fixed top-0 left-0 right-0 h-1.5 bg-[rgb(var(--bg-secondary))] dark:bg-black z-50 border-b-2 border-[rgb(var(--border-primary))]">
+        <div
+          className="h-full bg-gradient-to-r from-[var(--neon-cyan)] via-[var(--neon-magenta)] to-[var(--neon-pink)] transition-all duration-150"
+          style={{
+            width: `${progress}%`,
+            boxShadow: progress > 0 ? '0 0 8px var(--neon-cyan)' : 'none',
+          }}
+        />
+      </div>
+
+      <div className="fixed top-4 right-4 z-50 px-3 py-1.5 bg-[rgb(var(--bg-primary))] border-2 border-[var(--neon-cyan)] text-xs font-mono font-bold text-[var(--neon-cyan)] relative">
+        <span className="relative z-10">[{Math.round(progress)}%]</span>
+      </div>
+    </>
+  )
+}

components/blog/search-bar.tsx

@@ -0,0 +1,21 @@
+interface SearchBarProps {
+  searchQuery: string
+  onSearchChange: (value: string) => void
+}
+
+export function SearchBar({ searchQuery, onSearchChange }: SearchBarProps) {
+  return (
+    <div className="flex-1 flex items-center border border-slate-700 bg-zinc-900 transition-all focus-within:border-[var(--neon-cyan)] focus-within:shadow-[0_0_6px_rgba(0,255,255,0.4),inset_0_0_6px_rgba(0,255,255,0.05)]">
+      <span className="pl-4 pr-2 font-mono text-lg" style={{ color: 'var(--neon-cyan)' }}>
+        &gt;
+      </span>
+      <input
+        type="text"
+        placeholder="SEARCH POSTS..."
+        value={searchQuery}
+        onChange={e => onSearchChange(e.target.value)}
+        className="flex-1 bg-transparent font-mono text-zinc-100 dark:text-zinc-100 px-2 py-3 focus:outline-none placeholder:text-zinc-600 uppercase text-sm"
+      />
+    </div>
+  )
+}

components/blog/sort-dropdown.tsx

@@ -0,0 +1,38 @@
+type SortOption = 'newest' | 'oldest' | 'title'
+
+interface SortDropdownProps {
+  sortBy: SortOption
+  onSortChange: (value: SortOption) => void
+}
+
+export function SortDropdown({ sortBy, onSortChange }: SortDropdownProps) {
+  return (
+    <select
+      value={sortBy}
+      onChange={e => onSortChange(e.target.value as SortOption)}
+      className="border-2 border-slate-700 bg-zinc-900 dark:bg-zinc-900 text-zinc-100 dark:text-zinc-100 font-mono px-6 py-3 uppercase text-sm cyber-focus-pink transition-all hover:border-cyan-400 cursor-pointer"
+    >
+      <option
+        value="newest"
+        className="bg-zinc-900 text-zinc-100"
+        style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
+      >
+        NEWEST FIRST
+      </option>
+      <option
+        value="oldest"
+        className="bg-zinc-900 text-zinc-100"
+        style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
+      >
+        OLDEST FIRST
+      </option>
+      <option
+        value="title"
+        className="bg-zinc-900 text-zinc-100"
+        style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
+      >
+        BY TITLE
+      </option>
+    </select>
+  )
+}

components/blog/sticky-footer.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface StickyFooterProps {
+  url: string
+  title: string
+}
+
+export function StickyFooter({ url, title }: StickyFooterProps) {
+  const [isVisible, setIsVisible] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      setIsVisible(currentScrollY < lastScrollY || currentScrollY < 100)
+      setLastScrollY(currentScrollY)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [lastScrollY])
+
+  const shareLinks = {
+    twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${url}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  }
+
+  const handleCopyLink = async () => {
+    await navigator.clipboard.writeText(url)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return (
+    <footer
+      className={`
+        fixed bottom-0 left-0 right-0 z-40
+        bg-black/98 backdrop-blur-sm
+        border-t-4 border-[var(--neon-magenta)]
+        transition-transform duration-200 ease-in-out
+        ${isVisible ? 'translate-y-0' : 'translate-y-full'}
+      `}
+      style={{
+        boxShadow: isVisible
+          ? '0 -8px 30px rgba(155,90,142,0.5), inset 0 4px 20px rgba(155,90,142,0.1)'
+          : 'none',
+      }}
+    >
+      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--neon-magenta)] to-transparent opacity-70" />
+
+      <div className="max-w-7xl mx-auto px-6 py-4 relative">
+        <div className="flex items-center justify-between">
+          <div className="hidden md:flex items-center gap-3">
+            <div className="flex gap-1.5">
+              <div className="w-2 h-2 bg-[var(--neon-cyan)] shadow-[0_0_6px_rgba(90,139,149,1)]" />
+              <div className="w-2 h-2 bg-[var(--neon-pink)] shadow-[0_0_6px_rgba(155,90,110,1)]" />
+            </div>
+            <span
+              className="text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider"
+              style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}
+            >
+              &gt;&gt; SHARE:
+            </span>
+          </div>
+
+          <div className="flex items-center gap-3 mx-auto md:mx-0">
+            <a
+              href={shareLinks.twitter}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-cyan-400 text-cyan-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(29,161,242,0.8)] hover:bg-cyan-900/20"
+              style={{ textShadow: '0 0 8px rgba(56,189,248,0.6)' }}
+            >
+              [X]
+            </a>
+
+            <a
+              href={shareLinks.linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-blue-400 text-blue-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(10,102,194,0.8)] hover:bg-blue-900/20"
+              style={{ textShadow: '0 0 8px rgba(96,165,250,0.6)' }}
+            >
+              [IN]
+            </a>
+
+            <button
+              onClick={handleCopyLink}
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-pink)] text-[var(--neon-pink)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(155,90,110,0.8)] hover:bg-pink-900/20"
+              style={{
+                textShadow: copied ? '0 0 10px rgba(155,90,110,1)' : '0 0 8px rgba(155,90,110,0.6)',
+              }}
+            >
+              {copied ? '[✓ COPIED]' : '[COPY]'}
+            </button>
+          </div>
+
+          <button
+            onClick={scrollToTop}
+            className="hidden md:flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-cyan)] text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(90,139,149,0.8)] hover:bg-cyan-900/20"
+            style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}
+          >
+            [↑ TOP]
+          </button>
+        </div>
+      </div>
+    </footer>
+  )
+}

components/blog/table-of-contents.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface Heading {
+  id: string
+  text: string
+  level: number
+}
+
+interface TOCProps {
+  headings: Heading[]
+}
+
+export function TableOfContents({ headings }: TOCProps) {
+  const [activeId, setActiveId] = useState('')
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: '-100px 0px -66%' }
+    )
+
+    headings.forEach(({ id }) => {
+      const element = document.getElementById(id)
+      if (element) observer.observe(element)
+    })
+
+    return () => observer.disconnect()
+  }, [headings])
+
+  return (
+    <aside className="hidden lg:block sticky top-24 w-64 h-fit">
+      <div className="bg-black border border-[var(--neon-cyan)] p-6 relative overflow-hidden shadow-[0_0_15px_rgba(90,139,149,0.3),inset_0_0_15px_rgba(90,139,149,0.05)]">
+        <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-magenta-500/3 to-transparent pointer-events-none" />
+        <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[var(--neon-cyan)] to-transparent opacity-50" />
+
+        <div className="border-b border-[var(--neon-magenta)] pb-3 mb-4 relative">
+          <div className="flex gap-1.5 mb-2 justify-end">
+            <div
+              className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer"
+              title="Minimize"
+            />
+            <div
+              className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer"
+              title="Maximize"
+            />
+            <div
+              className="w-3 h-3 border border-[var(--neon-pink)]/40 hover:bg-[var(--neon-pink)]/10 transition-colors cursor-pointer"
+              title="Close"
+            />
+          </div>
+          <h3
+            className="text-xs font-mono font-bold text-[var(--neon-cyan)] uppercase tracking-wider"
+            style={{ textShadow: '0 0 6px rgba(90,139,149,0.5)' }}
+          >
+            &gt;&gt; NAVIGATION
+          </h3>
+        </div>
+
+        <nav className="space-y-1 relative">
+          {headings.map(heading => (
+            <a
+              key={heading.id}
+              href={`#${heading.id}`}
+              className={`
+                block text-sm font-mono py-2 border-l-2 transition-all duration-150
+                ${heading.level === 2 ? 'pl-3' : 'pl-6'}
+                ${
+                  activeId === heading.id
+                    ? 'text-[var(--neon-cyan)] border-[var(--neon-cyan)] bg-cyan-500/5 shadow-[0_0_8px_rgba(90,139,149,0.3)]'
+                    : 'text-zinc-500 border-zinc-900 hover:border-[var(--neon-magenta)] hover:text-[var(--neon-magenta)] hover:bg-magenta-500/3 hover:shadow-[0_0_4px_rgba(155,90,142,0.2)]'
+                }
+              `}
+              style={activeId === heading.id ? { textShadow: '0 0 4px rgba(90,139,149,0.5)' } : {}}
+            >
+              <span className="inline-block">{activeId === heading.id ? '▶ ' : '◆ '}</span>
+              {heading.text}
+            </a>
+          ))}
+        </nav>
+
+        <div className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[var(--neon-purple)] to-transparent opacity-40" />
+      </div>
+    </aside>
+  )
+}

components/blog/tag-badge.tsx

@@ -0,0 +1,20 @@
+interface TagBadgeProps {
+  count: number
+  className?: string
+}
+
+export function TagBadge({ count, className = '' }: TagBadgeProps) {
+  return (
+    <span
+      className={`
+        inline-flex items-center justify-center
+        px-2 py-1 font-mono text-xs font-bold
+        bg-cyan-900 border border-cyan-700
+        text-cyan-300
+        ${className}
+      `}
+    >
+      {count}
+    </span>
+  )
+}

components/blog/tag-cloud.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import { TagInfo } from '@/lib/tags'
+
+interface TagCloudProps {
+  tags: Array<TagInfo & { size: 'sm' | 'md' | 'lg' | 'xl' }>
+}
+
+export function TagCloud({ tags }: TagCloudProps) {
+  const sizeClasses = {
+    sm: 'text-xs opacity-70',
+    md: 'text-sm',
+    lg: 'text-base font-bold',
+    xl: 'text-lg font-bold',
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4 items-baseline">
+      {tags.map(tag => (
+        <Link
+          key={tag.slug}
+          href={`/tags/${tag.slug}`}
+          className={`
+            ${sizeClasses[tag.size]}
+            font-mono uppercase
+            text-zinc-400
+            hover:text-cyan-400
+            transition-colors
+          `}
+          title={`${tag.count} ${tag.count === 1 ? 'articol' : 'articole'}`}
+        >
+          #{tag.name}
+        </Link>
+      ))}
+    </div>
+  )
+}

components/blog/tag-filter.tsx

@@ -0,0 +1,41 @@
+interface TagFilterProps {
+  allTags: string[]
+  selectedTags: string[]
+  onToggleTag: (tag: string) => void
+  onClearTags: () => void
+}
+
+export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: TagFilterProps) {
+  if (allTags.length === 0) return null
+
+  return (
+    <div className="border border-slate-700 bg-slate-900 p-6 mb-12">
+      <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
+        FILTER BY TAG
+      </p>
+      <div className="flex flex-wrap gap-3">
+        {allTags.map(tag => (
+          <button
+            key={tag}
+            onClick={() => onToggleTag(tag)}
+            className={`px-4 py-2 font-mono text-xs uppercase border transition-colors cursor-pointer ${
+              selectedTags.includes(tag)
+                ? 'bg-cyan-400 border-cyan-400 text-slate-900'
+                : 'bg-zinc-900 border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
+            }`}
+          >
+            #{tag}
+          </button>
+        ))}
+      </div>
+      {selectedTags.length > 0 && (
+        <button
+          onClick={onClearTags}
+          className="mt-4 font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors cursor-pointer"
+        >
+          &gt; CLEAR FILTERS
+        </button>
+      )}
+    </div>
+  )
+}

components/blog/tag-list.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import { slugifyTag } from '@/lib/tags'
+
+interface TagListProps {
+  tags: (string | undefined)[]
+  variant?: 'default' | 'minimal' | 'colored'
+  className?: string
+}
+
+export function TagList({ tags, variant = 'default', className = '' }: TagListProps) {
+  const validTags = tags.filter(Boolean) as string[]
+
+  if (validTags.length === 0) return null
+
+  const baseClasses =
+    'inline-flex items-center font-mono text-xs uppercase border transition-colors'
+
+  const variants = {
+    default:
+      'px-3 py-1 bg-zinc-900 border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400',
+    minimal: 'px-2 py-0.5 border-transparent text-zinc-500 hover:text-cyan-400',
+    colored:
+      'px-3 py-1 bg-cyan-900 border-cyan-700 text-cyan-300 hover:bg-cyan-800 hover:border-cyan-600',
+  }
+
+  return (
+    <div className={`flex flex-wrap gap-2 ${className}`}>
+      {validTags.map(tag => (
+        <Link
+          key={tag}
+          href={`/tags/${slugifyTag(tag)}`}
+          className={`${baseClasses} ${variants[variant]}`}
+        >
+          <span className="mr-1">#</span>
+          {tag}
+        </Link>
+      ))}
+    </div>
+  )
+}

components/icons/IconWrapper.tsx

@@ -0,0 +1,38 @@
+import Image from 'next/image'
+
+interface IconWrapperProps {
+  name: string
+  alt?: string
+  size?: number
+  className?: string
+}
+
+export function IconWrapper({ name, alt, size = 32, className = '' }: IconWrapperProps) {
+  const iconPath = `/icons/${name}.png`
+
+  return <Image src={iconPath} alt={alt || name} width={size} height={size} className={className} />
+}
+
+export function EmailIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Email" size={size} className={className} />
+}
+
+export function TerminalIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Terminal" size={size} className={className} />
+}
+
+export function FolderIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Folder" size={size} className={className} />
+}
+
+export function DocumentIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Document" size={size} className={className} />
+}
+
+export function SettingsIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Settings" size={size} className={className} />
+}
+
+export function NetworkIcon({ size = 32, className = '' }: { size?: number; className?: string }) {
+  return <IconWrapper name="Network" size={size} className={className} />
+}

components/icons/index.tsx

@@ -0,0 +1,74 @@
+export {
+  IconWrapper,
+  EmailIcon,
+  TerminalIcon,
+  FolderIcon,
+  DocumentIcon,
+  SettingsIcon,
+  NetworkIcon,
+} from './IconWrapper'
+
+export function HomeIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+      />
+    </svg>
+  )
+}
+
+export function SearchIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      />
+    </svg>
+  )
+}
+
+export function TagIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+      />
+    </svg>
+  )
+}
+
+export function CalendarIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+      />
+    </svg>
+  )
+}
+
+export function ClockIcon({ className = 'h-5 w-5' }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  )
+}

components/layout/Breadcrumbs.tsx

@@ -1,14 +1,14 @@
-'use client';
+'use client'
 
-import Link from 'next/link';
+import Link from 'next/link'
-import { usePathname } from 'next/navigation';
+import { usePathname } from 'next/navigation'
-import { Fragment } from 'react';
+import { Fragment } from 'react'
-import { BreadcrumbsSchema } from './BreadcrumbsSchema';
+import { BreadcrumbsSchema } from './breadcrumbs-schema'
 
 interface BreadcrumbItem {
-  label: string;
+  label: string
-  href: string;
+  href: string
-  current?: boolean;
+  current?: boolean
 }
 
 function HomeIcon({ className }: { className?: string }) {
@@ -27,25 +27,15 @@ function HomeIcon({ className }: { className?: string }) {
         d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
       />
     </svg>
-  );
+  )
 }
 
 function ChevronIcon({ className }: { className?: string }) {
   return (
-    <svg
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      className={className}
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M9 5l7 7-7 7"
-      />
     </svg>
-  );
+  )
 }
 
 function formatSegmentLabel(segment: string): string {
@@ -53,36 +43,36 @@ function formatSegmentLabel(segment: string): string {
     blog: 'Blog',
     tags: 'Tag-uri',
     about: 'Despre',
-  };
+  }
 
   if (specialCases[segment]) {
-    return specialCases[segment];
+    return specialCases[segment]
   }
 
   return segment
     .split('-')
     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
+    .join(' ')
 }
 
 export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
-  const pathname = usePathname();
+  const pathname = usePathname()
 
-  let breadcrumbs: BreadcrumbItem[] = items || [];
+  let breadcrumbs: BreadcrumbItem[] = items || []
 
   if (!items) {
-    const segments = pathname.split('/').filter(Boolean);
+    const segments = pathname.split('/').filter(Boolean)
     breadcrumbs = segments.map((segment, index) => {
-      const href = '/' + segments.slice(0, index + 1).join('/');
+      const href = '/' + segments.slice(0, index + 1).join('/')
-      const label = formatSegmentLabel(segment);
+      const label = formatSegmentLabel(segment)
-      const current = index === segments.length - 1;
+      const current = index === segments.length - 1
 
-      return { label, href, current };
+      return { label, href, current }
-    });
+    })
   }
 
   if (pathname === '/') {
-    return null;
+    return null
   }
 
   const schemaItems = [
@@ -92,7 +82,7 @@ export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
       name: item.label,
       item: item.href,
     })),
-  ];
+  ]
 
   return (
     <>
@@ -112,7 +102,7 @@ export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
               </Link>
             </li>
 
-            {breadcrumbs.map((item) => (
+            {breadcrumbs.map(item => (
               <Fragment key={item.href}>
                 <li className="text-gray-400 flex-shrink-0">
                   <ChevronIcon className="w-4 h-4" />
@@ -141,5 +131,5 @@ export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
       </nav>
       <BreadcrumbsSchema items={schemaItems} />
     </>
-  );
+  )
 }

components/layout/breadcrumbs-schema.tsx

@@ -1,25 +1,25 @@
 interface BreadcrumbSchemaItem {
-  position: number;
+  position: number
-  name: string;
+  name: string
-  item: string;
+  item: string
 }
 
 export function BreadcrumbsSchema({ items }: { items: BreadcrumbSchemaItem[] }) {
   const structuredData = {
     '@context': 'https://schema.org',
     '@type': 'BreadcrumbList',
-    itemListElement: items.map((item) => ({
+    itemListElement: items.map(item => ({
       '@type': 'ListItem',
       position: item.position,
       name: item.name,
       item: `http://localhost:3000${item.item}`,
     })),
-  };
+  }
 
   return (
     <script
       type="application/ld+json"
       dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
     />
-  );
+  )
 }

components/theme-toggle.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+  const [isGlitching, setIsGlitching] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const toggleTheme = () => {
+    // Trigger glitch animation
+    setIsGlitching(true)
+
+    // Trigger screen flicker
+    document.body.classList.add('screen-flicker')
+
+    // Toggle theme
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+
+    // Remove effects after animation
+    setTimeout(() => {
+      setIsGlitching(false)
+      document.body.classList.remove('screen-flicker')
+    }, 300)
+  }
+
+  if (!mounted) {
+    return (
+      <button className="font-mono text-xs text-slate-400 uppercase tracking-wider px-3 py-1 border-2 border-slate-700">
+        [...]
+      </button>
+    )
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className={`
+        relative font-mono text-xs uppercase tracking-wider
+        px-3 py-1 border-2 transition-all duration-300
+        ${
+          theme === 'dark'
+            ? 'text-cyan-400 border-cyan-900 hover:border-cyan-700 bg-cyan-950/20'
+            : 'text-emerald-600 border-emerald-700 hover:border-emerald-500 bg-emerald-50/50'
+        }
+        ${isGlitching ? 'glitch-btn' : ''}
+        border-pulse overflow-hidden
+      `}
+      aria-label="Toggle theme"
+    >
+      <span className="relative z-10">{theme === 'dark' ? '[DARK MODE]' : '[LIGHT MODE]'}</span>
+      {isGlitching && (
+        <>
+          <span className="glitch-layer" aria-hidden="true">
+            {theme === 'dark' ? '[DARK MODE]' : '[LIGHT MODE]'}
+          </span>
+          <span className="glitch-layer" aria-hidden="true">
+            {theme === 'dark' ? '[DARK MODE]' : '[LIGHT MODE]'}
+          </span>
+        </>
+      )}
+    </button>
+  )
+}

content/blog/example.md

@@ -1,10 +1,10 @@
 ---
-title: "Getting Started with Next.js 15"
+title: 'Getting Started with Next.js 15'
-description: "Learn how to build modern web applications with Next.js 15 and TypeScript."
+description: 'Learn how to build modern web applications with Next.js 15 and TypeScript.'
-date: "2025-01-07"
+date: '2025-01-07'
-author: "John Doe"
+author: 'John Doe'
-category: "Tutorial"
+category: 'Tutorial'
-tags: ["nextjs", "typescript", "tutorial"]
+tags: ['nextjs', 'typescript', 'tutorial']
 ---
 
 # Getting Started with Next.js 15
@@ -25,6 +25,10 @@ export default function Page() {
 }
 ```
 
+### Check out this article:
+
+[Check this out](tech/articol-tehnic.md)
+
 ## Conclusion
 
 Next.js 15 brings many improvements for building modern web applications.

content/blog/tech/articol-tehnic.md

@@ -1,41 +1,16 @@
 ---
-title: "Articol Tehnic din Subdirector"
+title: 'Technical Article'
-description: "Test pentru subdirectoare și organizare ierarhică"
+description: 'A technical article to test internal links'
-date: "2025-01-10"
+date: '2025-01-10'
-author: "Tech Writer"
+author: 'John Doe'
-category: "Tehnologie"
+category: 'Tech'
-tags: ["nextjs", "react", "typescript"]
+tags: ['tech', 'test']
-draft: false
 ---
 
-# Articol Tehnic
+# Technical Article
 
-Acesta este un articol stocat într-un subdirector pentru a testa funcționalitatea de organizare ierarhică.
+This is a test article for internal blog post linking.
 
-## Next.js și React
+## Content
 
-Next.js este un framework React puternic care oferă:
+You are reading the technical article that was linked from the example post.
-
-- Server-side rendering (SSR)
-- Static site generation (SSG)
-- API routes
-- File-based routing
-
-## Exemplu de cod TypeScript
-
-```typescript
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-async function fetchUser(id: number): Promise<User> {
-  const response = await fetch(`/api/users/${id}`);
-  return response.json();
-}
-```
-
-## Concluzie
-
-Subdirectoarele funcționează perfect pentru organizarea conținutului!

content/blog/test-complet.md

@@ -1,17 +1,17 @@
 ---
-title: "Test Complet Markdown"
+title: 'Test Complet Markdown'
-description: "Un articol de test care demonstrează toate elementele markdown suportate"
+description: 'Un articol de test care demonstrează toate elementele markdown suportate'
-date: "2025-01-15"
+date: '2025-01-15'
-author: "Test Author"
+author: 'Test Author'
-category: "Tutorial"
+category: 'Tutorial'
-tags: ["markdown", "test", "demo"]
+tags: ['markdown', 'test', 'demo']
-image: "/images/test.jpg"
+image: '/38636.jpg'
 draft: false
 ---
 
 # Heading 1
 
-Acesta este un paragraf normal cu **text bold** și *text italic*. Putem combina ***bold și italic***.
+Acesta este un paragraf normal cu **text bold** și _text italic_. Putem combina **_bold și italic_**.
 
 ## Heading 2
 
@@ -47,11 +47,11 @@ Bloc de cod JavaScript:
 
 ```javascript
 function greet(name) {
-  console.log(`Hello, ${name}!`);
+  console.log(`Hello, ${name}!`)
-  return true;
+  return true
 }
 
-greet("World");
+greet('World')
 ```
 
 Bloc de cod Python:
@@ -85,7 +85,7 @@ print(f"Result: {result}")
 ## Tabele
 
 | Coloana 1 | Coloana 2 | Coloana 3 |
-|-----------|-----------|-----------|
+| --------- | --------- | --------- |
 | Celula 1  | Celula 2  | Celula 3  |
 | Date 1    | Date 2    | Date 3    |
 | Info 1    | Info 2    | Info 3    |

docker-compose.prod.yml

@@ -0,0 +1,134 @@
+# Docker Compose Configuration for Production Deployment
+# This file is used by CI/CD to deploy the application on production servers
+#
+# Key differences from local docker-compose.yml:
+#   - Uses pre-built image from registry (not local build)
+#   - Includes resource limits and logging configuration
+#   - More stringent health checks
+#   - Production-grade restart policies
+#
+# Usage:
+#   1. This file is automatically copied to server by CI/CD workflow
+#   2. Server pulls image from registry: docker compose -f docker-compose.prod.yml pull
+#   3. Server starts container: docker compose -f docker-compose.prod.yml up -d
+#
+# Manual deployment (if CI/CD is not available):
+#   ssh user@production-server
+#   cd /opt/mypage
+#   docker compose -f docker-compose.prod.yml pull
+#   docker compose -f docker-compose.prod.yml up -d --force-recreate
+
+version: '3.8'
+
+services:
+  mypage:
+    # Use pre-built image from private registry
+    # This image is built and pushed by the CI/CD workflow
+    # Format: REGISTRY_URL/IMAGE_NAME:TAG
+    image: repository.workspace:5000/mypage:latest
+
+    container_name: mypage-prod
+
+    # Restart policy: always restart on failure or server reboot
+    # This ensures high availability in production
+    restart: always
+
+    # Port mapping: host:container
+    # The application will be accessible at http://SERVER_IP:3030
+    # Usually, a reverse proxy (Caddy/Nginx) will forward traffic to this port
+    ports:
+      - "3030:3030"
+
+    # Production environment variables
+    environment:
+      - NODE_ENV=production
+      - NEXT_TELEMETRY_DISABLED=1
+      - PORT=3030
+      - HOSTNAME=0.0.0.0
+      # Add any other production-specific environment variables here
+      # Example:
+      # - DATABASE_URL=postgresql://user:pass@db:5432/mypage
+      # - REDIS_URL=redis://redis:6379
+
+    # Persistent volumes for logs (optional)
+    # Uncomment if your application writes logs
+    volumes:
+      - ./data/logs:/app/logs
+
+    # Health check configuration
+    # Docker monitors the application and marks it unhealthy if checks fail
+    # If container is unhealthy, restart policy will trigger a restart
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3030/", "||", "exit", "1"]
+      interval: 30s        # Check every 30 seconds
+      timeout: 10s         # Wait up to 10 seconds for response
+      retries: 3           # Mark unhealthy after 3 consecutive failures
+      start_period: 40s    # Grace period during container startup
+
+    # Resource limits for production
+    # Prevents container from consuming all server resources
+    # deploy:
+    #   resources:
+    #     limits:
+    #       cpus: '1.0'         # Maximum 1 CPU core
+    #       memory: 512M        # Maximum 512MB RAM
+    #     reservations:
+    #       cpus: '0.25'        # Reserve at least 0.25 CPU cores
+    #       memory: 256M        # Reserve at least 256MB RAM
+
+    # Network configuration
+    networks:
+      - mypage-network
+
+    # Logging configuration
+    # Prevents logs from consuming all disk space
+    logging:
+      driver: "json-file"
+      options:
+        max-size: "10m"      # Maximum 10MB per log file
+        max-file: "3"        # Keep only 3 log files (30MB total)
+
+# Network definition
+networks:
+  mypage-network:
+    driver: bridge
+
+# ============================================
+# Production Deployment Commands
+# ============================================
+#
+# Pull latest image from registry:
+#   docker compose -f docker-compose.prod.yml pull
+#
+# Start/update containers:
+#   docker compose -f docker-compose.prod.yml up -d --force-recreate
+#
+# View logs:
+#   docker compose -f docker-compose.prod.yml logs -f mypage
+#
+# Check health status:
+#   docker inspect mypage-prod | grep -A 10 Health
+#
+# Stop containers:
+#   docker compose -f docker-compose.prod.yml down
+#
+# Restart containers:
+#   docker compose -f docker-compose.prod.yml restart
+#
+# Remove old/unused images (cleanup):
+#   docker image prune -f
+#
+# ============================================
+# Troubleshooting
+# ============================================
+#
+# If container keeps restarting:
+#   1. Check logs: docker compose -f docker-compose.prod.yml logs --tail=100
+#   2. Check health: docker inspect mypage-prod | grep -A 10 Health
+#   3. Verify port is not already in use: netstat -tulpn | grep 3030
+#   4. Check resource usage: docker stats mypage-prod
+#
+# If health check fails:
+#   1. Test manually: docker exec mypage-prod curl -f http://localhost:3030/
+#   2. Check if Next.js server is running: docker exec mypage-prod ps aux
+#   3. Verify environment variables: docker exec mypage-prod env

docker-compose.yml

@@ -0,0 +1,90 @@
+# Docker Compose Configuration for Local Development/Testing
+# This file is used to run the Next.js blog application locally using Docker
+#
+# Usage:
+#   1. Copy this file to project root: cp docker-compose.yml.example docker-compose.yml
+#   2. Build and start: docker compose up -d
+#   3. View logs: docker compose logs -f
+#   4. Stop: docker compose down
+#
+# Note: This builds from local Dockerfile, not registry image
+
+version: '3.8'
+
+services:
+  mypage:
+    # Build configuration
+    build:
+      context: .
+      dockerfile: Dockerfile.nextjs  # Use the Next.js-specific Dockerfile
+
+    container_name: mypage-dev
+
+    # Port mapping: host:container
+    # Access the app at http://localhost:3030
+    ports:
+      - "3030:3030"
+
+    # Environment variables for development
+    environment:
+      - NODE_ENV=production  # Use production mode even locally to test production build
+      - NEXT_TELEMETRY_DISABLED=1
+      - PORT=3030
+      - HOSTNAME=0.0.0.0
+
+    # Optional: Mount logs directory for debugging
+    # Uncomment if your application writes logs to /app/logs
+    # volumes:
+    #   - ./logs:/app/logs
+
+    # Restart policy: restart unless explicitly stopped
+    restart: unless-stopped
+
+    # Network configuration
+    networks:
+      - mypage-network
+
+    # Health check configuration
+    # Docker will check if the app is healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3030/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+networks:
+  mypage-network:
+    driver: bridge
+
+# ============================================
+# Common Commands
+# ============================================
+#
+# Build and start containers:
+#   docker compose up -d
+#
+# Build with no cache (clean build):
+#   docker compose build --no-cache
+#   docker compose up -d
+#
+# View logs (follow mode):
+#   docker compose logs -f mypage
+#
+# Stop containers:
+#   docker compose down
+#
+# Stop and remove volumes:
+#   docker compose down -v
+#
+# Restart service:
+#   docker compose restart mypage
+#
+# Access container shell:
+#   docker compose exec mypage /bin/sh
+#
+# Check container status:
+#   docker compose ps
+#
+# View resource usage:
+#   docker stats mypage-dev

eslint.config.mjs

@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import prettier from 'eslint-config-prettier'
+
+export default [
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettier,
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+    },
+  },
+  {
+    ignores: [
+      'node_modules/',
+      '.next/',
+      'out/',
+      'build/',
+      'dist/',
+      '.cache/',
+      '*.config.js',
+      'public/',
+      'coverage/',
+    ],
+  },
+]

fix.js

@@ -0,0 +1,11 @@
+const fs = require('fs')
+let content = fs.readFileSync('lib/remark-copy-images.ts', 'utf8')
+const lines = content.split('\n')
+for (let i = 0; i < lines.length; i++) {
+  if (lines[i].includes('replace')) {
+    console.log(`Line ${i + 1}:`, JSON.stringify(lines[i]))
+    lines[i] = lines[i].replace(/replace\(\/\\/g / g, 'replace(/\\/g')
+    console.log(`Fixed:`, JSON.stringify(lines[i]))
+  }
+}
+fs.writeFileSync('lib/remark-copy-images.ts', lines.join('\n'))

lib/image-utils.ts

@@ -0,0 +1,85 @@
+import { promises as fs } from 'fs'
+import path from 'path'
+
+export async function imageExists(imagePath: string): Promise<boolean> {
+  try {
+    const fullPath = path.join(process.cwd(), 'public', imagePath)
+    await fs.access(fullPath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export async function getImageDimensions(
+  imagePath: string
+): Promise<{ width: number; height: number } | null> {
+  try {
+    const fullPath = path.join(process.cwd(), 'public', imagePath)
+    const buffer = await fs.readFile(fullPath)
+
+    if (imagePath.endsWith('.png')) {
+      const width = buffer.readUInt32BE(16)
+      const height = buffer.readUInt32BE(20)
+      return { width, height }
+    }
+
+    if (imagePath.endsWith('.jpg') || imagePath.endsWith('.jpeg')) {
+      let offset = 2
+      while (offset < buffer.length) {
+        if (buffer[offset] !== 0xff) break
+
+        const marker = buffer[offset + 1]
+        if (marker === 0xc0 || marker === 0xc2) {
+          const height = buffer.readUInt16BE(offset + 5)
+          const width = buffer.readUInt16BE(offset + 7)
+          return { width, height }
+        }
+
+        offset += 2 + buffer.readUInt16BE(offset + 2)
+      }
+    }
+
+    return null
+  } catch {
+    return null
+  }
+}
+
+export function getOptimizedImageUrl(
+  src: string,
+  width?: number,
+  height?: number,
+  quality: number = 75
+): string {
+  const params = new URLSearchParams()
+
+  if (width) params.set('w', width.toString())
+  if (height) params.set('h', height.toString())
+  params.set('q', quality.toString())
+
+  const queryString = params.toString()
+  return queryString ? `${src}?${queryString}` : src
+}
+
+export async function getImageWithPlaceholder(
+  imagePath: string
+): Promise<{ src: string; width: number; height: number; placeholder?: string }> {
+  const dimensions = await getImageDimensions(imagePath)
+
+  if (!dimensions) {
+    return {
+      src: imagePath,
+      width: 800,
+      height: 600,
+    }
+  }
+
+  const placeholder = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${dimensions.width}' height='${dimensions.height}'%3E%3Crect width='${dimensions.width}' height='${dimensions.height}' fill='%2318181b'/%3E%3C/svg%3E`
+
+  return {
+    src: imagePath,
+    ...dimensions,
+    placeholder,
+  }
+}

lib/markdown.ts

@@ -1,43 +1,47 @@
-import fs from 'fs';
+import fs from 'fs'
-import path from 'path';
+import path from 'path'
-import matter from 'gray-matter';
+import matter from 'gray-matter'
-import { FrontMatter, Post } from './types/frontmatter';
+import { remark } from 'remark'
-import { generateExcerpt } from './utils';
+import remarkGfm from 'remark-gfm'
+import { FrontMatter, Post } from './types/frontmatter'
+import { generateExcerpt } from './utils'
+import { remarkCopyImages } from './remark-copy-images'
+import { remarkInternalLinks } from './remark-internal-links'
 
-const POSTS_PATH = path.join(process.cwd(), 'content', 'blog');
+const POSTS_PATH = path.join(process.cwd(), 'content', 'blog')
 
 export function sanitizePath(inputPath: string): string {
-  const normalized = path.normalize(inputPath).replace(/^(\.\.[\/\\])+/, '');
+  const normalized = path.normalize(inputPath).replace(/^(\.\.[/\\])+/, '')
   if (normalized.includes('..') || path.isAbsolute(normalized)) {
-    throw new Error('Invalid path');
+    throw new Error('Invalid path')
   }
-  return normalized;
+  return normalized
 }
 
 export function calculateReadingTime(content: string): number {
-  const wordsPerMinute = 200;
+  const wordsPerMinute = 200
-  const words = content.trim().split(/\s+/).length;
+  const words = content.trim().split(/\s+/).length
-  return Math.ceil(words / wordsPerMinute);
+  return Math.ceil(words / wordsPerMinute)
 }
 
 export function validateFrontmatter(data: any): FrontMatter {
   if (!data.title || typeof data.title !== 'string') {
-    throw new Error('Invalid title');
+    throw new Error('Invalid title')
   }
   if (!data.description || typeof data.description !== 'string') {
-    throw new Error('Invalid description');
+    throw new Error('Invalid description')
   }
   if (!data.date || typeof data.date !== 'string') {
-    throw new Error('Invalid date');
+    throw new Error('Invalid date')
   }
   if (!data.author || typeof data.author !== 'string') {
-    throw new Error('Invalid author');
+    throw new Error('Invalid author')
   }
   if (!data.category || typeof data.category !== 'string') {
-    throw new Error('Invalid category');
+    throw new Error('Invalid category')
   }
   if (!Array.isArray(data.tags) || data.tags.length === 0 || data.tags.length > 3) {
-    throw new Error('Tags must be array with 1-3 items');
+    throw new Error('Tags must be array with 1-3 items')
   }
 
   return {
@@ -49,106 +53,120 @@ export function validateFrontmatter(data: any): FrontMatter {
     tags: data.tags,
     image: data.image,
     draft: data.draft || false,
-  };
+  }
 }
 
-export function getPostBySlug(slug: string | string[]): Post | null {
+export async function getPostBySlug(slug: string | string[]): Promise<Post | null> {
-  const slugArray = Array.isArray(slug) ? slug : [slug];
+  const slugArray = Array.isArray(slug) ? slug : slug.split('/')
-  const sanitized = slugArray.map(s => sanitizePath(s));
+  const sanitized = slugArray.map(s => sanitizePath(s))
-  const fullPath = path.join(POSTS_PATH, ...sanitized) + '.md';
+  const fullPath = path.join(POSTS_PATH, ...sanitized) + '.md'
 
   if (!fs.existsSync(fullPath)) {
-    return null;
+    return null
   }
 
-  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  const fileContents = fs.readFileSync(fullPath, 'utf8')
-  const { data, content } = matter(fileContents);
+  const { data, content } = matter(fileContents)
-  const frontmatter = validateFrontmatter(data);
+  const frontmatter = validateFrontmatter(data)
+
+  const processed = await remark()
+    .use(remarkGfm)
+    .use(remarkCopyImages, {
+      contentDir: 'content/blog',
+      publicDir: 'public/blog',
+      currentSlug: sanitized.join('/'),
+    })
+    .use(remarkInternalLinks)
+    .process(content)
+
+  const processedContent = processed.toString()
 
   return {
     slug: sanitized.join('/'),
     frontmatter,
-    content,
+    content: processedContent,
-    readingTime: calculateReadingTime(content),
+    readingTime: calculateReadingTime(processedContent),
-    excerpt: generateExcerpt(content),
+    excerpt: generateExcerpt(processedContent),
-  };
+  }
 }
 
-export function getAllPosts(includeContent = false): Post[] {
+export async function getAllPosts(includeContent = false): Promise<Post[]> {
-  const posts: Post[] = [];
+  const posts: Post[] = []
 
-  function walkDir(dir: string, prefix = ''): void {
+  async function walkDir(dir: string, prefix = ''): Promise<void> {
-    const files = fs.readdirSync(dir);
+    const files = fs.readdirSync(dir)
 
     for (const file of files) {
-      const filePath = path.join(dir, file);
+      const filePath = path.join(dir, file)
-      const stat = fs.statSync(filePath);
+      const stat = fs.statSync(filePath)
 
       if (stat.isDirectory()) {
-        walkDir(filePath, prefix ? `${prefix}/${file}` : file);
+        await walkDir(filePath, prefix ? `${prefix}/${file}` : file)
       } else if (file.endsWith('.md')) {
-        const slug = prefix ? `${prefix}/${file.replace(/\.md$/, '')}` : file.replace(/\.md$/, '');
+        const slug = prefix ? `${prefix}/${file.replace(/\.md$/, '')}` : file.replace(/\.md$/, '')
         try {
-          const post = getPostBySlug(slug.split('/'));
+          const post = await getPostBySlug(slug.split('/'))
           if (post && !post.frontmatter.draft) {
-            posts.push(includeContent ? post : { ...post, content: '' });
+            posts.push(includeContent ? post : { ...post, content: '' })
           }
         } catch (error) {
-          console.error(`Error loading post ${slug}:`, error);
+          console.error(`Error loading post ${slug}:`, error)
         }
       }
     }
   }
 
   if (fs.existsSync(POSTS_PATH)) {
-    walkDir(POSTS_PATH);
+    await walkDir(POSTS_PATH)
   }
 
-  return posts.sort((a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
+  return posts.sort(
+    (a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
+  )
 }
 
 export async function getRelatedPosts(currentSlug: string, limit = 3): Promise<Post[]> {
-  const currentPost = getPostBySlug(currentSlug);
+  const currentPost = await getPostBySlug(currentSlug)
-  if (!currentPost) return [];
+  if (!currentPost) return []
 
-  const allPosts = getAllPosts(false);
+  const allPosts = await getAllPosts(false)
-  const { category, tags } = currentPost.frontmatter;
+  const { category, tags } = currentPost.frontmatter
 
   const scored = allPosts
     .filter(post => post.slug !== currentSlug)
     .map(post => {
-      let score = 0;
+      let score = 0
-      if (post.frontmatter.category === category) score += 3;
+      if (post.frontmatter.category === category) score += 3
-      score += post.frontmatter.tags.filter(tag => tags.includes(tag)).length * 2;
+      score += post.frontmatter.tags.filter(tag => tags.includes(tag)).length * 2
-      return { post, score };
+      return { post, score }
     })
     .filter(({ score }) => score > 0)
-    .sort((a, b) => b.score - a.score);
+    .sort((a, b) => b.score - a.score)
 
-  return scored.slice(0, limit).map(({ post }) => post);
+  return scored.slice(0, limit).map(({ post }) => post)
 }
 
 export function getAllPostSlugs(): string[][] {
-  const slugs: string[][] = [];
+  const slugs: string[][] = []
 
   function walkDir(dir: string, prefix: string[] = []): void {
-    const files = fs.readdirSync(dir);
+    const files = fs.readdirSync(dir)
 
     for (const file of files) {
-      const filePath = path.join(dir, file);
+      const filePath = path.join(dir, file)
-      const stat = fs.statSync(filePath);
+      const stat = fs.statSync(filePath)
 
       if (stat.isDirectory()) {
-        walkDir(filePath, [...prefix, file]);
+        walkDir(filePath, [...prefix, file])
       } else if (file.endsWith('.md')) {
-        slugs.push([...prefix, file.replace(/\.md$/, '')]);
+        slugs.push([...prefix, file.replace(/\.md$/, '')])
       }
     }
   }
 
   if (fs.existsSync(POSTS_PATH)) {
-    walkDir(POSTS_PATH);
+    walkDir(POSTS_PATH)
   }
 
-  return slugs;
+  return slugs
 }

lib/remark-copy-images.ts

@@ -0,0 +1,146 @@
+import { visit } from 'unist-util-visit'
+import fs from 'fs/promises'
+import path from 'path'
+import { Node } from 'unist'
+
+interface ImageNode extends Node {
+  type: 'image'
+  url: string
+  alt?: string
+  title?: string
+}
+
+interface Options {
+  contentDir: string
+  publicDir: string
+  currentSlug: string
+}
+
+function isRelativePath(url: string): boolean {
+  // Matches: ./, ../, or bare filenames without protocol/absolute path
+  return (
+    url.startsWith('./') || url.startsWith('../') || (!url.startsWith('/') && !url.includes('://'))
+  )
+}
+
+function stripQueryParams(url: string): string {
+  return url.split('?')[0]
+}
+
+// In-memory cache to prevent duplicate copies across parallel compilations
+const copiedFiles = new Set<string>()
+
+async function copyAndRewritePath(node: ImageNode, options: Options): Promise<void> {
+  const { contentDir, publicDir, currentSlug } = options
+
+  const urlWithoutParams = stripQueryParams(node.url)
+  const slugParts = currentSlug.split('/')
+  const contentPostDir = path.join(process.cwd(), contentDir, ...slugParts.slice(0, -1))
+
+  const sourcePath = path.resolve(contentPostDir, urlWithoutParams)
+
+  if (sourcePath.includes('..') && !sourcePath.startsWith(path.join(process.cwd(), contentDir))) {
+    throw new Error(`Invalid image path: ${node.url} (path traversal detected)`)
+  }
+
+  const relativeToContent = path.relative(path.join(process.cwd(), contentDir), sourcePath)
+  const destPath = path.join(process.cwd(), publicDir, relativeToContent)
+
+  try {
+    await fs.access(sourcePath)
+  } catch {
+    throw new Error(
+      `Image not found: ${sourcePath}\nReferenced in: ${currentSlug}\nURL: ${node.url}`
+    )
+  }
+
+  const destDir = path.dirname(destPath)
+  await fs.mkdir(destDir, { recursive: true })
+
+  // Deduplication: check cache first
+  const cacheKey = `${sourcePath}:${destPath}`
+  if (copiedFiles.has(cacheKey)) {
+    // Already copied, just rewrite URL
+    const publicUrl =
+      '/' + path.relative(path.join(process.cwd(), 'public'), destPath).replace(/\\/g, '/')
+    const queryParams = node.url.includes('?') ? '?' + node.url.split('?')[1] : ''
+    node.url = publicUrl + queryParams
+    return
+  }
+
+  // Check if destination exists with matching size
+  try {
+    const [sourceStat, destStat] = await Promise.all([
+      fs.stat(sourcePath),
+      fs.stat(destPath).catch(() => null),
+    ])
+
+    if (destStat && sourceStat.size === destStat.size) {
+      // File already exists and matches, skip copy
+      copiedFiles.add(cacheKey)
+      const publicUrl =
+        '/' + path.relative(path.join(process.cwd(), 'public'), destPath).replace(/\\/g, '/')
+      const queryParams = node.url.includes('?') ? '?' + node.url.split('?')[1] : ''
+      node.url = publicUrl + queryParams
+      return
+    }
+  } catch (error) {
+    // Stat failed, proceed with copy
+  }
+
+  // Attempt copy with EBUSY retry logic
+  try {
+    await fs.copyFile(sourcePath, destPath)
+    copiedFiles.add(cacheKey)
+  } catch (error: unknown) {
+    const err = error as NodeJS.ErrnoException
+    if (err.code === 'EBUSY') {
+      // Race condition: another process is copying this file
+      // Wait briefly and check if file now exists
+      await new Promise(resolve => setTimeout(resolve, 100))
+
+      try {
+        await fs.access(destPath)
+        // File exists now, verify integrity
+        const [sourceStat, destStat] = await Promise.all([fs.stat(sourcePath), fs.stat(destPath)])
+
+        if (sourceStat.size === destStat.size) {
+          // Successfully copied by another process
+          copiedFiles.add(cacheKey)
+        } else {
+          // File corrupted, retry once
+          await fs.copyFile(sourcePath, destPath)
+          copiedFiles.add(cacheKey)
+        }
+      } catch {
+        // File still doesn't exist, retry copy
+        await fs.copyFile(sourcePath, destPath)
+        copiedFiles.add(cacheKey)
+      }
+    } else {
+      // Unknown error, rethrow
+      throw error
+    }
+  }
+
+  const publicUrl =
+    '/' + path.relative(path.join(process.cwd(), 'public'), destPath).replace(/\\/g, '/')
+
+  const queryParams = node.url.includes('?') ? '?' + node.url.split('?')[1] : ''
+  node.url = publicUrl + queryParams
+}
+
+export function remarkCopyImages(options: Options) {
+  return async (tree: Node) => {
+    const promises: Promise<void>[] = []
+
+    visit(tree, 'image', (node: Node) => {
+      const imageNode = node as ImageNode
+      if (isRelativePath(imageNode.url)) {
+        promises.push(copyAndRewritePath(imageNode, options))
+      }
+    })
+
+    await Promise.all(promises)
+  }
+}

lib/remark-internal-links.ts

@@ -0,0 +1,67 @@
+import { visit } from 'unist-util-visit'
+import { Node } from 'unist'
+
+interface LinkNode extends Node {
+  type: 'link'
+  url: string
+  children: Node[]
+}
+
+/**
+ * Detects internal blog post links:
+ * - Relative paths (no http/https)
+ * - Not absolute paths (doesn't start with /)
+ * - Ends with .md
+ */
+function isInternalBlogLink(url: string): boolean {
+  return (
+    !url.startsWith('http://') &&
+    !url.startsWith('https://') &&
+    !url.startsWith('/') &&
+    url.includes('.md')
+  )
+}
+
+/**
+ * Transforms internal .md links to blog routes:
+ * - tech/article.md → /blog/tech/article
+ * - article.md#section → /blog/article#section
+ * - nested/path/post.md?ref=foo → /blog/nested/path/post?ref=foo
+ */
+function transformToBlogPath(url: string): string {
+  // Split into path, hash, and query
+  const hashIndex = url.indexOf('#')
+  const queryIndex = url.indexOf('?')
+
+  let path = url
+  let hash = ''
+  let query = ''
+
+  if (hashIndex !== -1) {
+    path = url.substring(0, hashIndex)
+    hash = url.substring(hashIndex)
+  }
+
+  if (queryIndex !== -1 && queryIndex < (hashIndex === -1 ? url.length : hashIndex)) {
+    path = url.substring(0, queryIndex)
+    query = url.substring(queryIndex, hashIndex === -1 ? url.length : hashIndex)
+  }
+
+  // Remove .md extension
+  const cleanPath = path.replace(/\.md$/, '')
+
+  // Build final URL
+  return `/blog/${cleanPath}${query}${hash}`
+}
+
+export function remarkInternalLinks() {
+  return (tree: Node) => {
+    visit(tree, 'link', (node: Node) => {
+      const linkNode = node as LinkNode
+
+      if (isInternalBlogLink(linkNode.url)) {
+        linkNode.url = transformToBlogPath(linkNode.url)
+      }
+    })
+  }
+}

lib/tags.ts

@@ -0,0 +1,129 @@
+import { getAllPosts } from './markdown'
+import type { Post } from './types/frontmatter'
+
+export interface TagInfo {
+  name: string
+  slug: string
+  count: number
+}
+
+export interface TagWithPosts {
+  tag: TagInfo
+  posts: Post[]
+}
+
+export function slugifyTag(tag: string): string {
+  return tag
+    .toLowerCase()
+    .replace(/[ăâ]/g, 'a')
+    .replace(/[îï]/g, 'i')
+    .replace(/[șş]/g, 's')
+    .replace(/[țţ]/g, 't')
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+export async function getAllTags(): Promise<TagInfo[]> {
+  const posts = await getAllPosts()
+  const tagMap = new Map<string, number>()
+
+  posts.forEach(post => {
+    const tags = post.frontmatter.tags?.filter(Boolean) || []
+    tags.forEach(tag => {
+      const count = tagMap.get(tag) || 0
+      tagMap.set(tag, count + 1)
+    })
+  })
+
+  return Array.from(tagMap.entries())
+    .map(([name, count]) => ({
+      name,
+      slug: slugifyTag(name),
+      count,
+    }))
+    .sort((a, b) => b.count - a.count)
+}
+
+export async function getPostsByTag(tagSlug: string): Promise<Post[]> {
+  const posts = await getAllPosts()
+
+  return posts.filter(post => {
+    const tags = post.frontmatter.tags?.filter(Boolean) || []
+    return tags.some(tag => slugifyTag(tag) === tagSlug)
+  })
+}
+
+export async function getTagInfo(tagSlug: string): Promise<TagInfo | null> {
+  const allTags = await getAllTags()
+  return allTags.find(tag => tag.slug === tagSlug) || null
+}
+
+export async function getPopularTags(limit = 10): Promise<TagInfo[]> {
+  const allTags = await getAllTags()
+  return allTags.slice(0, limit)
+}
+
+export async function getRelatedTags(tagSlug: string, limit = 5): Promise<TagInfo[]> {
+  const posts = await getPostsByTag(tagSlug)
+  const relatedTagMap = new Map<string, number>()
+
+  posts.forEach(post => {
+    const tags = post.frontmatter.tags?.filter(Boolean) || []
+    tags.forEach(tag => {
+      const slug = slugifyTag(tag)
+      if (slug !== tagSlug) {
+        const count = relatedTagMap.get(tag) || 0
+        relatedTagMap.set(tag, count + 1)
+      }
+    })
+  })
+
+  return Array.from(relatedTagMap.entries())
+    .map(([name, count]) => ({
+      name,
+      slug: slugifyTag(name),
+      count,
+    }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, limit)
+}
+
+export function validateTags(tags: any): string[] {
+  if (!tags) return []
+
+  if (!Array.isArray(tags)) {
+    console.warn('Tags should be an array')
+    return []
+  }
+
+  const validTags = tags.filter(tag => tag && typeof tag === 'string').slice(0, 3)
+
+  if (tags.length > 3) {
+    console.warn(`Too many tags provided (${tags.length}). Limited to first 3.`)
+  }
+
+  return validTags
+}
+
+export async function getTagCloud(): Promise<Array<TagInfo & { size: 'sm' | 'md' | 'lg' | 'xl' }>> {
+  const tags = await getAllTags()
+  if (tags.length === 0) return []
+
+  const maxCount = Math.max(...tags.map(t => t.count))
+  const minCount = Math.min(...tags.map(t => t.count))
+  const range = maxCount - minCount || 1
+
+  return tags.map(tag => {
+    const normalized = (tag.count - minCount) / range
+    let size: 'sm' | 'md' | 'lg' | 'xl'
+
+    if (normalized < 0.25) size = 'sm'
+    else if (normalized < 0.5) size = 'md'
+    else if (normalized < 0.75) size = 'lg'
+    else size = 'xl'
+
+    return { ...tag, size }
+  })
+}

lib/types/frontmatter.ts

@@ -1,22 +1,22 @@
 export interface FrontMatter {
-  title: string;
+  title: string
-  description: string;
+  description: string
-  date: string;
+  date: string
-  author: string;
+  author: string
-  category: string;
+  category: string
-  tags: string[];
+  tags: string[]
-  image?: string;
+  image?: string
-  draft?: boolean;
+  draft?: boolean
 }
 
 export interface Post {
-  slug: string;
+  slug: string
-  frontmatter: FrontMatter;
+  frontmatter: FrontMatter
-  content: string;
+  content: string
-  readingTime: number;
+  readingTime: number
-  excerpt: string;
+  excerpt: string
 }
 
 export interface BlogParams {
-  slug: string[];
+  slug: string[]
 }

lib/utils.ts

@@ -1,47 +1,65 @@
 export function formatDate(dateString: string): string {
-  const date = new Date(dateString);
+  const date = new Date(dateString)
   const months = [
-    'ianuarie', 'februarie', 'martie', 'aprilie', 'mai', 'iunie',
+    'ianuarie',
-    'iulie', 'august', 'septembrie', 'octombrie', 'noiembrie', 'decembrie'
+    'februarie',
-  ];
+    'martie',
+    'aprilie',
+    'mai',
+    'iunie',
+    'iulie',
+    'august',
+    'septembrie',
+    'octombrie',
+    'noiembrie',
+    'decembrie',
+  ]
 
-  return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
+  return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`
 }
 
 export function formatRelativeDate(dateString: string): string {
-  const date = new Date(dateString);
+  const date = new Date(dateString)
-  const now = new Date();
+  const now = new Date()
-  const diffTime = Math.abs(now.getTime() - date.getTime());
+  const diffTime = Math.abs(now.getTime() - date.getTime())
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
 
-  if (diffDays === 0) return 'astăzi';
+  if (diffDays === 0) return 'astăzi'
-  if (diffDays === 1) return 'ieri';
+  if (diffDays === 1) return 'ieri'
-  if (diffDays < 7) return `acum ${diffDays} zile`;
+  if (diffDays < 7) return `acum ${diffDays} zile`
-  if (diffDays < 30) return `acum ${Math.floor(diffDays / 7)} săptămâni`;
+  if (diffDays < 30) return `acum ${Math.floor(diffDays / 7)} săptămâni`
-  if (diffDays < 365) return `acum ${Math.floor(diffDays / 30)} luni`;
+  if (diffDays < 365) return `acum ${Math.floor(diffDays / 30)} luni`
-  return `acum ${Math.floor(diffDays / 365)} ani`;
+  return `acum ${Math.floor(diffDays / 365)} ani`
 }
 
 export function generateExcerpt(content: string, maxLength = 160): string {
   const text = content
     .replace(/^---[\s\S]*?---/, '')
     .replace(/!\[.*?\]\(.*?\)/g, '')
-    .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
     .replace(/[#*`]/g, '')
-    .trim();
+    .trim()
 
-  if (text.length <= maxLength) return text;
+  if (text.length <= maxLength) return text
 
-  const truncated = text.slice(0, maxLength);
+  const truncated = text.slice(0, maxLength)
-  const lastSpace = truncated.lastIndexOf(' ');
+  const lastSpace = truncated.lastIndexOf(' ')
-  return truncated.slice(0, lastSpace) + '...';
+  return truncated.slice(0, lastSpace) + '...'
 }
 
 export function generateSlug(title: string): string {
   const romanianMap: Record<string, string> = {
-    'ă': 'a', 'â': 'a', 'î': 'i', 'ș': 's', 'ț': 't',
+    ă: 'a',
-    'Ă': 'a', 'Â': 'a', 'Î': 'i', 'Ș': 's', 'Ț': 't'
+    â: 'a',
-  };
+    î: 'i',
+    ș: 's',
+    ț: 't',
+    Ă: 'a',
+    Â: 'a',
+    Î: 'i',
+    Ș: 's',
+    Ț: 't',
+  }
 
   return title
     .split('')
@@ -49,5 +67,5 @@ export function generateSlug(title: string): string {
     .join('')
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '');
+    .replace(/^-+|-+$/g, '')
 }

next.config.js

@@ -1,10 +1,180 @@
 /** @type {import('next').NextConfig} */
+
+// Production-ready Next.js configuration with standalone output
+// This configuration is optimized for Docker deployment with minimal image size
+//
+// Key features:
+//   - Standalone output mode (includes only necessary dependencies)
+//   - Image optimization with modern formats
+//   - Static Site Generation (SSG) for all blog posts
+//   - Production-grade caching and performance settings
+//
+// Usage:
+//   1. Copy this file to project root: cp next.config.js.production next.config.js
+//   2. Build application: npm run build
+//   3. The .next/standalone directory will contain everything needed to run the app
+
 const nextConfig = {
+  // ============================================
+  // Standalone Output Mode
+  // ============================================
+  // This is REQUIRED for Docker deployment
+  // Outputs a minimal server with only necessary dependencies
+  // Reduces Docker image size from ~1GB to ~150MB
+  output: 'standalone',
+
+  // ============================================
+  // Image Optimization
+  // ============================================
   images: {
+    // Modern image formats (smaller file sizes)
     formats: ['image/avif', 'image/webp'],
+
+    // Device sizes for responsive images
+    // Next.js will generate optimized images for these widths
     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+
+    // Image sizes for <Image> component size prop
     imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+
+    // Disable image optimization during build (optional)
+    // Uncomment if build times are too long
+    // unoptimized: false,
+
+    // External image domains (if loading images from CDN)
+    // Uncomment and add domains if needed
+    // remotePatterns: [
+    //   {
+    //     protocol: 'https',
+    //     hostname: 'cdn.example.com',
+    //   },
+    // ],
   },
+
+  // ============================================
+  // Performance Optimization
+  // ============================================
+
+  // Enable SWC minification (faster than Terser)
+  swcMinify: true,
+
+  // Compress static pages (reduces bandwidth)
+  compress: true,
+
+  // ============================================
+  // Production Settings
+  // ============================================
+
+  // Disable X-Powered-By header for security
+  poweredByHeader: false,
+
+  // Generate ETags for caching
+  generateEtags: true,
+
+  // ============================================
+  // Static Generation Settings
+  // ============================================
+
+  // Automatically generate static pages at build time
+  // This is the default behavior for Next.js App Router
+  // All markdown blog posts will be pre-rendered
+
+  // ============================================
+  // TypeScript Settings
+  // ============================================
+
+  // Type checking during build
+  // Set to false to skip type checking (not recommended)
+  typescript: {
+    // ignoreBuildErrors: false,
+  },
+
+  // ============================================
+  // ESLint Settings
+  // ============================================
+
+  // ESLint during build
+  // Set to false to skip linting (not recommended)
+  eslint: {
+    // ignoreDuringBuilds: false,
+  },
+
+  // ============================================
+  // Experimental Features (Next.js 16)
+  // ============================================
+
+  experimental: {
+    // Enable optimistic client cache
+    // Improves navigation performance
+    staleTimes: {
+      dynamic: 30,
+      static: 180,
+    },
+
+    // Enable PPR (Partial Prerendering) - Next.js 16 feature
+    // Uncomment to enable (currently in beta)
+    // ppr: false,
+  },
+
+  // ============================================
+  // Headers (Optional)
+  // ============================================
+  // Custom headers for all routes
+  // Note: Caddy/Nginx reverse proxy can also set these headers
+  // Uncomment if you want Next.js to handle headers instead
+  //
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          {
+            key: 'X-Frame-Options',
+            value: 'DENY',
+          },
+          {
+            key: 'X-XSS-Protection',
+            value: '1; mode=block',
+          },
+        ],
+      },
+    ]
+  },
+
+  // ============================================
+  // Redirects (Optional)
+  // ============================================
+  // Add permanent redirects for old URLs
+  // Uncomment and add your redirects
+  //
+  // async redirects() {
+  //   return [
+  //     {
+  //       source: '/old-blog/:slug',
+  //       destination: '/blog/:slug',
+  //       permanent: true,
+  //     },
+  //   ]
+  // },
+
+  // ============================================
+  // Rewrites (Optional)
+  // ============================================
+  // Add URL rewrites for API proxying or URL masking
+  // Uncomment and add your rewrites
+  //
+  // async rewrites() {
+  //   return [
+  //     {
+  //       source: '/api/:path*',
+  //       destination: 'https://api.example.com/:path*',
+  //     },
+  //   ]
+  // },
 }
 
 module.exports = nextConfig

package.json

@@ -6,8 +6,11 @@
   "scripts": {
     "dev": "next dev -p 3030",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 3030",
-    "lint": "next lint",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
     "validate-posts": "node scripts/validate-posts.js"
   },
   "repository": {
@@ -26,6 +29,7 @@
     "autoprefixer": "^10.4.21",
     "gray-matter": "^4.0.3",
     "next": "^16.0.1",
+    "next-themes": "^0.4.6",
     "postcss": "^8.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -36,6 +40,19 @@
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.1.17",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.39.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
+    "eslint": "^9.39.1",
+    "eslint-config-next": "^16.0.3",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^3.6.2",
+    "typescript-eslint": "^8.46.4"
   }
 }

providers/providers.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ThemeProviderProps } from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

tailwind.config.js

@@ -1,9 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
@@ -20,6 +21,65 @@ module.exports = {
           800: '#075985',
           900: '#0c4a6e',
         },
+        'dark-primary': '#18181b',
+        'dark-secondary': '#0f172a',
+        'dark-tertiary': '#1e293b',
+        accent: {
+          DEFAULT: '#164e63',
+          hover: '#155e75',
+          light: '#0e7490',
+        },
+        'accent-emerald': {
+          DEFAULT: '#064e3b',
+          hover: '#065f46',
+        },
+        'accent-teal': {
+          DEFAULT: '#134e4a',
+          hover: '#115e59',
+        },
+      },
+      animation: {
+        glitch: 'glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both',
+        flicker: 'flicker 0.15s infinite',
+        scanline: 'scanline 8s linear infinite',
+        noise: 'noise 0.2s infinite',
+      },
+      keyframes: {
+        glitch: {
+          '0%': { transform: 'translate(0)' },
+          '20%': { transform: 'translate(-2px, 2px)' },
+          '40%': { transform: 'translate(-2px, -2px)' },
+          '60%': { transform: 'translate(2px, 2px)' },
+          '80%': { transform: 'translate(2px, -2px)' },
+          '100%': { transform: 'translate(0)' },
+        },
+        flicker: {
+          '0%, 100%': { opacity: '1' },
+          '41.99%': { opacity: '1' },
+          '42%': { opacity: '0' },
+          '43%': { opacity: '0' },
+          '43.01%': { opacity: '1' },
+          '47.99%': { opacity: '1' },
+          '48%': { opacity: '0' },
+          '49%': { opacity: '0' },
+          '49.01%': { opacity: '1' },
+        },
+        scanline: {
+          '0%': { transform: 'translateY(-100%)' },
+          '100%': { transform: 'translateY(100%)' },
+        },
+        noise: {
+          '0%, 100%': { backgroundPosition: '0 0' },
+          '10%': { backgroundPosition: '-5% -10%' },
+          '20%': { backgroundPosition: '-15% 5%' },
+          '30%': { backgroundPosition: '7% -25%' },
+          '40%': { backgroundPosition: '-5% 25%' },
+          '50%': { backgroundPosition: '-15% 10%' },
+          '60%': { backgroundPosition: '15% 0%' },
+          '70%': { backgroundPosition: '0% 15%' },
+          '80%': { backgroundPosition: '3% 35%' },
+          '90%': { backgroundPosition: '-10% 10%' },
+        },
       },
     },
   },

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,9 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": [
+      "@/*": ["./*"]
-        "./*"
-      ]
     }
   },
   "include": [
@@ -35,7 +29,5 @@
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
+  "exclude": ["node_modules"]
-    "node_modules"
-  ]
 }