feat(ui): add cv application frontend and configuration

2026-02-23 13:47:08 +01:00
parent cbf40908a6
commit 7f06ee7f53
43 changed files with 2849 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Database
+backend/data/
+*.db
+*.db-journal
+*.db-wal
+
+# Test files
+backend/__tests__/*.db
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,26 @@
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "5173:80"
+    depends_on:
+      - backend
+    environment:
+      - VITE_API_URL=http://localhost:3001
+
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    ports:
+      - "3001:3001"
+    volumes:
+      - cv-data:/app/data
+    environment:
+      - PORT=3001
+      - DB_PATH=/app/data/cv.db
+
+volumes:
+  cv-data:
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,89 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]|^motion$', argsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' }],
+    },
+  },
+  {
+    files: ['**/*.test.js', '**/__tests__/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        describe: 'readonly',
+        it: 'readonly',
+        expect: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+        beforeAll: 'readonly',
+        afterAll: 'readonly',
+        vi: 'readonly',
+        process: 'readonly',
+      },
+    },
+  },
+  {
+    files: ['backend/**/*.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        process: 'readonly',
+        console: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+      },
+    },
+  },
+  {
+    files: ['playwright.config.js', 'tests/e2e/**/*.js', 'tests/regression/visual.test.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        process: 'readonly',
+      },
+    },
+  },
+  {
+    files: ['tests/performance/k6/**/*.js'],
+    languageOptions: {
+      globals: {
+        __ENV: 'readonly',
+      },
+    },
+    rules: {
+      'no-undef': 'off',
+    },
+  },
+  {
+    files: ['tests/performance/lighthouserc.js'],
+    languageOptions: {
+      globals: {
+        module: 'readonly',
+      },
+    },
+    rules: {
+      'no-undef': 'off',
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tuan-Dat Tran | Junior DevOps Engineer</title>
+    <meta name="description" content="CV von Tuan-Dat Tran - Junior DevOps Engineer mit Erfahrung in Docker, Kubernetes, Azure und CI/CD" />
+  </head>
+  <body class="bg-slate-50 text-slate-800">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,28 @@
+server {
+    resolver 127.0.0.11 valid=30s ipv6=off;
+    
+    listen 80;
+    server_name localhost;
+    
+    set $backend_upstream http://backend:3001;
+
+    root /usr/share/nginx/html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /cv {
+        alias /usr/share/nginx/html;
+        try_files $uri $uri/ /cv/index.html;
+    }
+
+    location /api {
+        proxy_pass $backend_upstream;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -0,0 +1,26 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: process.env.BASE_URL || 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+});
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,51 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Hero from './components/Hero';
+import Experience from './components/Experience';
+import Skills from './components/Skills';
+import Education from './components/Education';
+import Projects from './components/Projects';
+import Contact from './components/Contact';
+import AdminLayout from './admin/AdminLayout';
+import AdminPersonal from './admin/AdminPersonal';
+import AdminExperience from './admin/AdminExperience';
+import AdminSkills from './admin/AdminSkills';
+import AdminEducation from './admin/AdminEducation';
+import AdminProjects from './admin/AdminProjects';
+import { CVProvider } from './admin/hooks/CVContext';
+import { AuthProvider } from './admin/hooks/AuthContext';
+
+function CV() {
+  return (
+    <div className="min-h-screen">
+      <Hero />
+      <Experience />
+      <Skills />
+      <Education />
+      <Projects />
+      <Contact />
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <AuthProvider>
+      <CVProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<CV />} />
+            <Route path="/admin" element={<AdminLayout />}>
+              <Route index element={<AdminPersonal />} />
+              <Route path="experience" element={<AdminExperience />} />
+              <Route path="skills" element={<AdminSkills />} />
+              <Route path="education" element={<AdminEducation />} />
+              <Route path="projects" element={<AdminProjects />} />
+            </Route>
+          </Routes>
+        </BrowserRouter>
+      </CVProvider>
+    </AuthProvider>
+  );
+}
+
+export default App;
--- a/src/admin/AdminEducation.jsx
+++ b/src/admin/AdminEducation.jsx
@@ -0,0 +1,14 @@
+import EducationForm from './sections/EducationForm';
+import ExportButton from './components/ExportButton';
+import { useCVData } from './hooks/CVContext';
+
+export default function AdminEducation() {
+  const { data, updateEducation, exportJSON, importJSON, resetToDefault } = useCVData();
+  
+  return (
+    <div className="space-y-6">
+      <ExportButton onExport={exportJSON} onImport={importJSON} onReset={resetToDefault} />
+      <EducationForm data={data.education} onUpdate={updateEducation} />
+    </div>
+  );
+}
--- a/src/admin/AdminExperience.jsx
+++ b/src/admin/AdminExperience.jsx
@@ -0,0 +1,14 @@
+import ExperienceForm from './sections/ExperienceForm';
+import ExportButton from './components/ExportButton';
+import { useCVData } from './hooks/CVContext';
+
+export default function AdminExperience() {
+  const { data, updateExperience, exportJSON, importJSON, resetToDefault } = useCVData();
+  
+  return (
+    <div className="space-y-6">
+      <ExportButton onExport={exportJSON} onImport={importJSON} onReset={resetToDefault} />
+      <ExperienceForm data={data.experience} onUpdate={updateExperience} />
+    </div>
+  );
+}
--- a/src/admin/AdminLayout.jsx
+++ b/src/admin/AdminLayout.jsx
@@ -0,0 +1,89 @@
+import { NavLink, Outlet } from 'react-router-dom';
+import { User, Briefcase, Code, GraduationCap, FolderOpen, Settings, LogOut } from 'lucide-react';
+import { useAuth } from './hooks/AuthContext';
+import LoginPage from './pages/LoginPage';
+
+const navItems = [
+  { to: '/admin', label: 'Persönlich', icon: User, end: true },
+  { to: '/admin/experience', label: 'Erfahrung', icon: Briefcase },
+  { to: '/admin/skills', label: 'Skills', icon: Code },
+  { to: '/admin/education', label: 'Ausbildung', icon: GraduationCap },
+  { to: '/admin/projects', label: 'Projekte', icon: FolderOpen },
+];
+
+export default function AdminLayout() {
+  const { isAuthenticated, loading, logout } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-slate-50 flex items-center justify-center">
+        <div className="text-slate-600">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <LoginPage />;
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
+        <div className="max-w-6xl mx-auto px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Settings className="text-primary-600" size={24} />
+              <h1 className="text-xl font-bold text-slate-900">CV Admin</h1>
+            </div>
+            <div className="flex items-center gap-4">
+              <a
+                href="/cv/"
+                className="text-sm text-primary-600 hover:text-primary-700"
+              >
+                Zur CV Ansicht →
+              </a>
+              <button
+                onClick={logout}
+                className="flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900"
+              >
+                <LogOut size={16} />
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      
+      <div className="max-w-6xl mx-auto px-6 py-8">
+        <div className="flex gap-8">
+          <nav className="w-48 flex-shrink-0">
+            <ul className="space-y-1 sticky top-24">
+              {navItems.map((item) => (
+                <li key={item.to}>
+                  <NavLink
+                    to={item.to}
+                    end={item.end}
+                    className={({ isActive }) =>
+                      `flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ${
+                        isActive
+                          ? 'bg-primary-100 text-primary-700'
+                          : 'text-slate-600 hover:bg-slate-100'
+                      }`
+                    }
+                  >
+                    <item.icon size={18} />
+                    {item.label}
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </nav>
+          
+          <main className="flex-1">
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/admin/AdminPersonal.jsx
+++ b/src/admin/AdminPersonal.jsx
@@ -0,0 +1,14 @@
+import PersonalForm from './sections/PersonalForm';
+import ExportButton from './components/ExportButton';
+import { useCVData } from './hooks/CVContext';
+
+export default function AdminPersonal() {
+  const { data, updatePersonal, exportJSON, importJSON, resetToDefault } = useCVData();
+  
+  return (
+    <div className="space-y-6">
+      <ExportButton onExport={exportJSON} onImport={importJSON} onReset={resetToDefault} />
+      <PersonalForm data={data.personal} onUpdate={updatePersonal} />
+    </div>
+  );
+}
--- a/src/admin/AdminProjects.jsx
+++ b/src/admin/AdminProjects.jsx
@@ -0,0 +1,14 @@
+import ProjectsForm from './sections/ProjectsForm';
+import ExportButton from './components/ExportButton';
+import { useCVData } from './hooks/CVContext';
+
+export default function AdminProjects() {
+  const { data, updateProjects, exportJSON, importJSON, resetToDefault } = useCVData();
+  
+  return (
+    <div className="space-y-6">
+      <ExportButton onExport={exportJSON} onImport={importJSON} onReset={resetToDefault} />
+      <ProjectsForm data={data.projects} onUpdate={updateProjects} />
+    </div>
+  );
+}
--- a/src/admin/AdminSkills.jsx
+++ b/src/admin/AdminSkills.jsx
@@ -0,0 +1,14 @@
+import SkillsForm from './sections/SkillsForm';
+import ExportButton from './components/ExportButton';
+import { useCVData } from './hooks/CVContext';
+
+export default function AdminSkills() {
+  const { data, updateSkills, exportJSON, importJSON, resetToDefault } = useCVData();
+  
+  return (
+    <div className="space-y-6">
+      <ExportButton onExport={exportJSON} onImport={importJSON} onReset={resetToDefault} />
+      <SkillsForm data={data.skills} onUpdate={updateSkills} />
+    </div>
+  );
+}
--- a/src/admin/components/ExportButton.jsx
+++ b/src/admin/components/ExportButton.jsx
@@ -0,0 +1,104 @@
+import { Download, Upload, Eye, RotateCcw, FileJson } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+export default function ExportButton({ onExport, onImport, onReset }) {
+  const fileInputRef = useRef(null);
+  const [showInstructions, setShowInstructions] = useState(false);
+  
+  const handleImport = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const result = onImport(event.target.result);
+      if (result.success) {
+        alert('Import erfolgreich!');
+      } else {
+        alert(`Import fehlgeschlagen: ${result.error}`);
+      }
+    };
+    reader.readAsText(file);
+  };
+  
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-3">
+        <button
+          onClick={() => {
+            onExport();
+            setShowInstructions(true);
+          }}
+          className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        >
+          <Download size={18} />
+          JSON Export
+        </button>
+        
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          className="flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
+        >
+          <Upload size={18} />
+          JSON Import
+        </button>
+        
+        <a
+          href="/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
+        >
+          <Eye size={18} />
+          Vorschau
+        </a>
+        
+        {onReset && (
+          <button
+            onClick={() => {
+              if (confirm('Alle Änderungen zurücksetzen?')) {
+                onReset();
+              }
+            }}
+            className="flex items-center gap-2 px-4 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            <RotateCcw size={18} />
+            Zurücksetzen
+          </button>
+        )}
+        
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".json"
+          onChange={handleImport}
+          className="hidden"
+        />
+      </div>
+      
+      {showInstructions && (
+        <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg">
+          <div className="flex items-start gap-3">
+            <FileJson className="text-amber-600 flex-shrink-0" size={20} />
+            <div>
+              <h3 className="font-medium text-amber-800 mb-2">Deployment Instructions</h3>
+              <ol className="text-sm text-amber-700 space-y-1 list-decimal list-inside">
+                <li>JSON Datei wurde heruntergeladen</li>
+                <li>Inhalt der <code className="bg-amber-100 px-1 rounded">cv.json</code> kopieren</li>
+                <li>In <code className="bg-amber-100 px-1 rounded">src/data/cv.js</code> einfügen</li>
+                <li>Committen und pushen: <code className="bg-amber-100 px-1 rounded">git add . && git commit -m "update cv" && git push</code></li>
+                <li>GitHub Actions deployt automatisch</li>
+              </ol>
+              <button
+                onClick={() => setShowInstructions(false)}
+                className="mt-3 text-sm text-amber-600 hover:text-amber-800"
+              >
+                Schließen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/admin/hooks/AuthContext.jsx
+++ b/src/admin/hooks/AuthContext.jsx
@@ -0,0 +1,61 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { getAuthConfig, login } from '../../lib/api';
+import { getToken, setToken, clearToken } from '../../lib/auth';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [authMode, setAuthMode] = useState(null);
+  const [keycloakConfig, setKeycloakConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getAuthConfig()
+      .then((config) => {
+        setAuthMode(config.mode);
+        setKeycloakConfig(config.keycloak);
+        
+        if (config.mode === 'simple') {
+          const token = getToken();
+          setIsAuthenticated(!!token);
+        }
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  const simpleLogin = useCallback(async (password) => {
+    const result = await login(password);
+    setToken(result.token);
+    setIsAuthenticated(true);
+    return result;
+  }, []);
+
+  const logout = useCallback(() => {
+    clearToken();
+    setIsAuthenticated(false);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{
+      isAuthenticated,
+      authMode,
+      keycloakConfig,
+      loading,
+      login: simpleLogin,
+      logout,
+    }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider');
+  }
+  return context;
+}
--- a/src/admin/hooks/CVContext.jsx
+++ b/src/admin/hooks/CVContext.jsx
@@ -0,0 +1,132 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import { fetchCV as apiFetchCV, updateCV as apiUpdateCV, exportCV as apiExportCV, importCV as apiImportCV } from '../../lib/api';
+import { DEFAULT_DATA, validateCV } from '../../lib/cv-data';
+
+const CVContext = createContext(null);
+
+export function CVProvider({ children }) {
+  const [data, setData] = useState(DEFAULT_DATA);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  
+  useEffect(() => {
+    apiFetchCV()
+      .then(data => {
+        setData(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error('Failed to fetch CV:', err);
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+  
+  const updatePersonal = useCallback(async (personal) => {
+    const newData = { ...data, personal };
+    setData(newData);
+    await apiUpdateCV(newData);
+  }, [data]);
+  
+  const updateExperience = useCallback(async (experience) => {
+    const newData = { ...data, experience };
+    setData(newData);
+    await apiUpdateCV(newData);
+  }, [data]);
+  
+  const updateSkills = useCallback(async (skills) => {
+    const newData = { ...data, skills };
+    setData(newData);
+    await apiUpdateCV(newData);
+  }, [data]);
+  
+  const updateEducation = useCallback(async (education) => {
+    const newData = { ...data, education };
+    setData(newData);
+    await apiUpdateCV(newData);
+  }, [data]);
+  
+  const updateProjects = useCallback(async (projects) => {
+    const newData = { ...data, projects };
+    setData(newData);
+    await apiUpdateCV(newData);
+  }, [data]);
+  
+  const exportJSON = useCallback(async () => {
+    const validation = validateCV(data);
+    if (!validation.valid) {
+      console.warn('Exporting CV with validation warnings:', validation.errors);
+    }
+    
+    const blob = await apiExportCV();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'cv.json';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [data]);
+  
+  const importJSON = useCallback(async (jsonString) => {
+    try {
+      const parsed = JSON.parse(jsonString);
+      const validation = validateCV(parsed);
+      if (!validation.valid) {
+        return { success: false, errors: validation.errors };
+      }
+      await apiImportCV(parsed);
+      setData(parsed);
+      return { success: true };
+    } catch (e) {
+      return { success: false, errors: [`JSON parse error: ${e.message}`] };
+    }
+  }, []);
+  
+  const resetToDefault = useCallback(async () => {
+    await apiUpdateCV(DEFAULT_DATA);
+    setData(DEFAULT_DATA);
+  }, []);
+  
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await apiFetchCV();
+      setData(data);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  
+  return (
+    <CVContext.Provider value={{
+      data,
+      loading,
+      error,
+      updatePersonal,
+      updateExperience,
+      updateSkills,
+      updateEducation,
+      updateProjects,
+      exportJSON,
+      importJSON,
+      resetToDefault,
+      refresh
+    }}>
+      {children}
+    </CVContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useCVData() {
+  const context = useContext(CVContext);
+  if (!context) {
+    throw new Error('useCVData must be used within a CVProvider');
+  }
+  return context;
+}
--- a/src/admin/hooks/tests/CVContext.test.jsx
+++ b/src/admin/hooks/tests/CVContext.test.jsx
@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { CVProvider, useCVData } from '../CVContext';
+
+const mockFetch = vi.fn();
+const mockUpdateCV = vi.fn();
+const mockExportCV = vi.fn();
+const mockImportCV = vi.fn();
+
+vi.mock('../../../lib/api', () => ({
+  fetchCV: () => mockFetch(),
+  updateCV: (data) => mockUpdateCV(data),
+  exportCV: () => mockExportCV(),
+  importCV: (data) => mockImportCV(data),
+}));
+
+const defaultMockData = {
+  personal: { name: 'Test User', title: 'Developer', email: 'test@test.com' },
+  experience: [],
+  skills: {},
+  education: [],
+  projects: []
+};
+
+describe('CVContext', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockFetch.mockResolvedValue(defaultMockData);
+    mockUpdateCV.mockResolvedValue({ success: true });
+    mockExportCV.mockResolvedValue(new Blob([JSON.stringify(defaultMockData)], { type: 'application/json' }));
+    mockImportCV.mockResolvedValue({ success: true });
+  });
+  
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+  
+  const wrapper = ({ children }) => <CVProvider>{children}</CVProvider>;
+  
+  it('provides default data after loading', async () => {
+    const { result } = renderHook(() => useCVData(), { wrapper });
+    
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+    
+    expect(result.current.data).toBeDefined();
+    expect(result.current.data.personal.name).toBe('Test User');
+  });
+  
+  it('updates personal data', async () => {
+    const { result } = renderHook(() => useCVData(), { wrapper });
+    
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    
+    act(() => {
+      result.current.updatePersonal({ 
+        ...result.current.data.personal,
+        name: 'New Name' 
+      });
+    });
+    
+    await waitFor(() => {
+      expect(result.current.data.personal.name).toBe('New Name');
+    });
+    expect(mockUpdateCV).toHaveBeenCalled();
+  });
+  
+  it('updates experience data', async () => {
+    const { result } = renderHook(() => useCVData(), { wrapper });
+    
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    
+    const newExperience = [{ id: 1, role: 'New Role' }];
+    act(() => {
+      result.current.updateExperience(newExperience);
+    });
+    
+    await waitFor(() => {
+      expect(result.current.data.experience).toEqual(newExperience);
+    });
+  });
+  
+  it('throws error when used outside CVProvider', () => {
+    expect(() => {
+      renderHook(() => useCVData());
+    }).toThrow('useCVData must be used within a CVProvider');
+  });
+});
--- a/src/admin/hooks/useCVData.js
+++ b/src/admin/hooks/useCVData.js
@@ -0,0 +1,60 @@
+import { useState, useCallback } from 'react';
+import { cvData as initialData } from '../../data/cv';
+
+export function useCVData() {
+  const [data, setData] = useState(initialData);
+  
+  const updatePersonal = useCallback((personal) => {
+    setData(prev => ({ ...prev, personal }));
+  }, []);
+  
+  const updateExperience = useCallback((experience) => {
+    setData(prev => ({ ...prev, experience }));
+  }, []);
+  
+  const updateSkills = useCallback((skills) => {
+    setData(prev => ({ ...prev, skills }));
+  }, []);
+  
+  const updateEducation = useCallback((education) => {
+    setData(prev => ({ ...prev, education }));
+  }, []);
+  
+  const updateProjects = useCallback((projects) => {
+    setData(prev => ({ ...prev, projects }));
+  }, []);
+  
+  const exportJSON = useCallback(() => {
+    const json = JSON.stringify(data, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'cv.json';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [data]);
+  
+  const importJSON = useCallback((jsonString) => {
+    try {
+      const parsed = JSON.parse(jsonString);
+      setData(parsed);
+      return { success: true };
+    } catch (e) {
+      return { success: false, error: e.message };
+    }
+  }, []);
+  
+  return {
+    data,
+    updatePersonal,
+    updateExperience,
+    updateSkills,
+    updateEducation,
+    updateProjects,
+    exportJSON,
+    importJSON
+  };
+}
--- a/src/admin/hooks/useFormValidation.js
+++ b/src/admin/hooks/useFormValidation.js
@@ -0,0 +1,69 @@
+import { useState } from 'react';
+
+export function useFormValidation(rules) {
+  const [errors, setErrors] = useState({});
+  
+  const validate = (data) => {
+    const newErrors = {};
+    
+    Object.entries(rules).forEach(([field, fieldRules]) => {
+      for (const rule of fieldRules) {
+        const error = rule(data[field], data);
+        if (error) {
+          newErrors[field] = error;
+          break;
+        }
+      }
+    });
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  
+  const clearError = (field) => {
+    setErrors(prev => {
+      const next = { ...prev };
+      delete next[field];
+      return next;
+    });
+  };
+  
+  const clearAllErrors = () => setErrors({});
+  
+  return { errors, validate, clearError, clearAllErrors };
+}
+
+export const validators = {
+  required: (message = 'Pflichtfeld') => (value) => {
+    if (!value || (typeof value === 'string' && !value.trim())) {
+      return message;
+    }
+    return null;
+  },
+  
+  email: (message = 'Ungültige E-Mail-Adresse') => (value) => {
+    if (!value) return null;
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value)) {
+      return message;
+    }
+    return null;
+  },
+  
+  url: (message = 'Ungültige URL') => (value) => {
+    if (!value) return null;
+    try {
+      new URL(value);
+      return null;
+    } catch {
+      return message;
+    }
+  },
+  
+  minLength: (min, message) => (value) => {
+    if (!value || value.length < min) {
+      return message || `Mindestens ${min} Zeichen`;
+    }
+    return null;
+  }
+};
--- a/src/admin/pages/LoginPage.jsx
+++ b/src/admin/pages/LoginPage.jsx
@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { Lock, AlertCircle } from 'lucide-react';
+import { useAuth } from '../hooks/AuthContext';
+
+export default function LoginPage() {
+  const { authMode, keycloakConfig, login } = useAuth();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    
+    try {
+      await login(password);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeycloakLogin = () => {
+    if (!keycloakConfig?.url || !keycloakConfig?.realm || !keycloakConfig?.clientId) {
+      setError('Keycloak not configured');
+      return;
+    }
+    const redirectUri = encodeURIComponent(window.location.origin + '/admin/callback');
+    const loginUrl = `${keycloakConfig.url}/realms/${keycloakConfig.realm}/protocol/openid-connect/auth?client_id=${keycloakConfig.clientId}&redirect_uri=${redirectUri}&response_type=code`;
+    window.location.href = loginUrl;
+  };
+
+  if (authMode === 'keycloak') {
+    return (
+      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
+        <div className="bg-white rounded-xl p-8 shadow-sm border border-slate-100 max-w-md w-full">
+          <div className="text-center">
+            <Lock className="mx-auto text-primary-600 mb-4" size={48} />
+            <h1 className="text-2xl font-bold text-slate-900 mb-2">Admin Login</h1>
+            <p className="text-slate-600 mb-6">Authenticating with Keycloak</p>
+            <button
+              onClick={handleKeycloakLogin}
+              className="w-full py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
+            >
+              Login with Keycloak
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-xl p-8 shadow-sm border border-slate-100 max-w-md w-full">
+        <div className="text-center mb-8">
+          <Lock className="mx-auto text-primary-600 mb-4" size={48} />
+          <h1 className="text-2xl font-bold text-slate-900 mb-2">Admin Login</h1>
+          <p className="text-slate-600">Enter the admin password to continue</p>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2 text-red-700">
+            <AlertCircle size={18} />
+            <span className="text-sm">{error}</span>
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
+            className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500 mb-4"
+            autoFocus
+          />
+          <button
+            type="submit"
+            disabled={loading || !password}
+            className="w-full py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Logging in...' : 'Login'}
+          </button>
+        </form>
+
+        <p className="mt-4 text-center text-sm text-slate-500">
+          Password shown in server console on startup
+        </p>
+      </div>
+    </div>
+  );
+}
--- a/src/admin/sections/EducationForm.jsx
+++ b/src/admin/sections/EducationForm.jsx
@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import { Plus, Edit2, Trash2, X, Check } from 'lucide-react';
+
+export default function EducationForm({ data, onUpdate }) {
+  const [editingId, setEditingId] = useState(null);
+  const [editForm, setEditForm] = useState(null);
+  
+  const defaultForm = {
+    degree: '',
+    institution: '',
+    period: '',
+    status: ''
+  };
+  
+  const startAdd = () => {
+    setEditingId('new');
+    setEditForm({ ...defaultForm, id: Date.now() });
+  };
+  
+  const startEdit = (edu) => {
+    setEditingId(edu.id);
+    setEditForm({ ...edu });
+  };
+  
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditForm(null);
+  };
+  
+  const saveEdit = () => {
+    if (!editForm.degree || !editForm.institution) return;
+    
+    if (editingId === 'new') {
+      onUpdate([...data, editForm]);
+    } else {
+      onUpdate(data.map(e => e.id === editingId ? editForm : e));
+    }
+    cancelEdit();
+  };
+  
+  const deleteItem = (id) => {
+    onUpdate(data.filter(e => e.id !== id));
+  };
+  
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setEditForm(prev => ({ ...prev, [name]: value }));
+  };
+  
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-semibold text-slate-900">Ausbildung</h2>
+        {editingId !== 'new' && (
+          <button
+            onClick={startAdd}
+            className="flex items-center gap-2 px-3 py-1.5 bg-primary-100 text-primary-700 rounded-lg hover:bg-primary-200 transition-colors text-sm"
+          >
+            <Plus size={16} />
+            Hinzufügen
+          </button>
+        )}
+      </div>
+      
+      {editingId === 'new' && editForm && (
+        <div className="mb-4 p-4 bg-primary-50 rounded-lg border border-primary-200">
+          <FormFields form={editForm} onChange={handleChange} onSave={saveEdit} onCancel={cancelEdit} />
+        </div>
+      )}
+      
+      <div className="space-y-3">
+        {data.map((edu) => (
+          <div key={edu.id}>
+            {editingId === edu.id ? (
+              <div className="p-4 bg-primary-50 rounded-lg border border-primary-200">
+                <FormFields form={editForm} onChange={handleChange} onSave={saveEdit} onCancel={cancelEdit} />
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 bg-slate-50 rounded-lg group">
+                <div className="flex-1">
+                  <h3 className="font-medium text-slate-900">{edu.degree}</h3>
+                  <p className="text-sm text-slate-600">{edu.institution} • {edu.period}</p>
+                  {edu.status && (
+                    <span className="inline-block mt-1 px-2 py-0.5 text-xs bg-amber-100 text-amber-700 rounded">
+                      {edu.status}
+                    </span>
+                  )}
+                </div>
+                <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <button
+                    onClick={() => startEdit(edu)}
+                    className="p-1.5 text-slate-500 hover:text-primary-600 hover:bg-primary-50 rounded"
+                  >
+                    <Edit2 size={16} />
+                  </button>
+                  <button
+                    onClick={() => deleteItem(edu.id)}
+                    className="p-1.5 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FormFields({ form, onChange, onSave, onCancel }) {
+  return (
+    <div className="space-y-3">
+      <input
+        type="text"
+        name="degree"
+        value={form.degree || ''}
+        onChange={onChange}
+        placeholder="Abschluss (z.B. Bachelor Informatik)"
+        className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+      />
+      <div className="grid md:grid-cols-2 gap-3">
+        <input
+          type="text"
+          name="institution"
+          value={form.institution || ''}
+          onChange={onChange}
+          placeholder="Institution / Universität"
+          className="px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        />
+        <input
+          type="text"
+          name="period"
+          value={form.period || ''}
+          onChange={onChange}
+          placeholder="Zeitraum"
+          className="px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <input
+        type="text"
+        name="status"
+        value={form.status || ''}
+        onChange={onChange}
+        placeholder="Status (z.B. Laufend, Abgeschlossen)"
+        className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+      />
+      <div className="flex gap-2 pt-2">
+        <button
+          onClick={onSave}
+          className="flex items-center gap-1 px-3 py-1.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 text-sm"
+        >
+          <Check size={16} />
+          Speichern
+        </button>
+        <button
+          onClick={onCancel}
+          className="flex items-center gap-1 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 text-sm"
+        >
+          <X size={16} />
+          Abbrechen
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/src/admin/sections/ExperienceForm.jsx
+++ b/src/admin/sections/ExperienceForm.jsx
@@ -0,0 +1,248 @@
+import { useState } from 'react';
+import { Plus, Edit2, Trash2, X, Check } from 'lucide-react';
+
+export default function ExperienceForm({ data, onUpdate }) {
+  const [editingId, setEditingId] = useState(null);
+  const [editForm, setEditForm] = useState(null);
+  
+  const defaultForm = {
+    role: '',
+    company: '',
+    period: '',
+    type: 'Vollzeit',
+    description: '',
+    highlights: []
+  };
+  
+  const startAdd = () => {
+    setEditingId('new');
+    setEditForm({ ...defaultForm, id: Date.now() });
+  };
+  
+  const startEdit = (exp) => {
+    setEditingId(exp.id);
+    setEditForm({ ...exp });
+  };
+  
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditForm(null);
+  };
+  
+  const saveEdit = () => {
+    if (!editForm.role || !editForm.company) return;
+    
+    if (editingId === 'new') {
+      onUpdate([...data, editForm]);
+    } else {
+      onUpdate(data.map(e => e.id === editingId ? editForm : e));
+    }
+    cancelEdit();
+  };
+  
+  const deleteItem = (id) => {
+    onUpdate(data.filter(e => e.id !== id));
+  };
+  
+  const addHighlight = () => {
+    setEditForm(prev => ({
+      ...prev,
+      highlights: [...(prev.highlights || []), '']
+    }));
+  };
+  
+  const updateHighlight = (index, value) => {
+    setEditForm(prev => ({
+      ...prev,
+      highlights: prev.highlights.map((h, i) => i === index ? value : h)
+    }));
+  };
+  
+  const removeHighlight = (index) => {
+    setEditForm(prev => ({
+      ...prev,
+      highlights: prev.highlights.filter((_, i) => i !== index)
+    }));
+  };
+  
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-semibold text-slate-900">Berufserfahrung</h2>
+        {editingId !== 'new' && (
+          <button
+            onClick={startAdd}
+            className="flex items-center gap-2 px-3 py-1.5 bg-primary-100 text-primary-700 rounded-lg hover:bg-primary-200 transition-colors text-sm"
+          >
+            <Plus size={16} />
+            Hinzufügen
+          </button>
+        )}
+      </div>
+      
+      {editingId === 'new' && editForm && (
+        <div className="mb-4 p-4 bg-primary-50 rounded-lg border border-primary-200">
+          <EditForm
+            form={editForm}
+            setForm={setEditForm}
+            onSave={saveEdit}
+            onCancel={cancelEdit}
+            onAddHighlight={addHighlight}
+            onUpdateHighlight={updateHighlight}
+            onRemoveHighlight={removeHighlight}
+          />
+        </div>
+      )}
+      
+      <div className="space-y-3">
+        {data.map((exp) => (
+          <div key={exp.id}>
+            {editingId === exp.id ? (
+              <div className="p-4 bg-primary-50 rounded-lg border border-primary-200">
+                <EditForm
+                  form={editForm}
+                  setForm={setEditForm}
+                  onSave={saveEdit}
+                  onCancel={cancelEdit}
+                  onAddHighlight={addHighlight}
+                  onUpdateHighlight={updateHighlight}
+                  onRemoveHighlight={removeHighlight}
+                />
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 bg-slate-50 rounded-lg group">
+                <div className="flex-1">
+                  <h3 className="font-medium text-slate-900">{exp.role}</h3>
+                  <p className="text-sm text-slate-600">{exp.company} • {exp.period}</p>
+                  <span className="inline-block mt-1 px-2 py-0.5 text-xs bg-slate-200 text-slate-600 rounded">
+                    {exp.type}
+                  </span>
+                </div>
+                <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <button
+                    onClick={() => startEdit(exp)}
+                    className="p-1.5 text-slate-500 hover:text-primary-600 hover:bg-primary-50 rounded"
+                  >
+                    <Edit2 size={16} />
+                  </button>
+                  <button
+                    onClick={() => deleteItem(exp.id)}
+                    className="p-1.5 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function EditForm({ form, setForm, onSave, onCancel, onAddHighlight, onUpdateHighlight, onRemoveHighlight }) {
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setForm(prev => ({ ...prev, [name]: value }));
+  };
+  
+  return (
+    <div className="space-y-3">
+      <div className="grid md:grid-cols-2 gap-3">
+        <input
+          type="text"
+          name="role"
+          value={form.role || ''}
+          onChange={handleChange}
+          placeholder="Rolle / Position"
+          className="px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        />
+        <input
+          type="text"
+          name="company"
+          value={form.company || ''}
+          onChange={handleChange}
+          placeholder="Unternehmen"
+          className="px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        />
+      </div>
+      <div className="grid md:grid-cols-2 gap-3">
+        <input
+          type="text"
+          name="period"
+          value={form.period || ''}
+          onChange={handleChange}
+          placeholder="Zeitraum (z.B. 2021 - 2025)"
+          className="px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        />
+        <select
+          name="type"
+          value={form.type || 'Vollzeit'}
+          onChange={handleChange}
+          className="px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        >
+          <option>Vollzeit</option>
+          <option>Teilzeit</option>
+          <option>Werkstudent</option>
+          <option>SHK</option>
+          <option>Freelance</option>
+        </select>
+      </div>
+      <textarea
+        name="description"
+        value={form.description || ''}
+        onChange={handleChange}
+        placeholder="Kurze Beschreibung"
+        rows={2}
+        className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+      />
+      
+      <div>
+        <label className="text-sm font-medium text-slate-700 mb-1 block">Highlights</label>
+        {(form.highlights || []).map((h, i) => (
+          <div key={i} className="flex gap-2 mb-2">
+            <input
+              type="text"
+              value={h}
+              onChange={(e) => onUpdateHighlight(i, e.target.value)}
+              placeholder="Highlight..."
+              className="flex-1 px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500 text-sm"
+            />
+            <button
+              type="button"
+              onClick={() => onRemoveHighlight(i)}
+              className="p-2 text-slate-400 hover:text-red-500"
+            >
+              <X size={16} />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={onAddHighlight}
+          className="text-sm text-primary-600 hover:text-primary-700"
+        >
+          + Highlight hinzufügen
+        </button>
+      </div>
+      
+      <div className="flex gap-2 pt-2">
+        <button
+          onClick={onSave}
+          className="flex items-center gap-1 px-3 py-1.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 text-sm"
+        >
+          <Check size={16} />
+          Speichern
+        </button>
+        <button
+          onClick={onCancel}
+          className="flex items-center gap-1 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 text-sm"
+        >
+          <X size={16} />
+          Abbrechen
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/src/admin/sections/PersonalForm.jsx
+++ b/src/admin/sections/PersonalForm.jsx
@@ -0,0 +1,169 @@
+import { useState, useEffect } from 'react';
+import { useFormValidation, validators } from '../hooks/useFormValidation';
+import { Save, RotateCcw, Check } from 'lucide-react';
+
+export default function PersonalForm({ data, onUpdate }) {
+  const [formData, setFormData] = useState(data);
+  const [saved, setSaved] = useState(false);
+  const { errors, validate, clearError } = useFormValidation({
+    name: [validators.required('Name ist erforderlich')],
+    title: [validators.required('Titel ist erforderlich')],
+    email: [validators.required('E-Mail ist erforderlich'), validators.email()],
+    github: [validators.url()],
+    linkedin: [validators.url()]
+  });
+  
+  useEffect(() => {
+    setFormData(data);
+  }, [data]);
+  
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+    clearError(name);
+  };
+  
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (validate(formData)) {
+      onUpdate(formData);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    }
+  };
+  
+  const handleReset = () => {
+    setFormData(data);
+  };
+  
+  return (
+    <form onSubmit={handleSubmit} className="bg-white rounded-xl p-6 shadow-sm border border-slate-100">
+      <h2 className="text-xl font-semibold text-slate-900 mb-6">Persönliche Daten</h2>
+      
+      {saved && (
+        <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2 text-green-700">
+          <Check size={18} />
+          Gespeichert!
+        </div>
+      )}
+      
+      <div className="grid gap-4">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Name *
+          </label>
+          <input
+            type="text"
+            name="name"
+            value={formData.name || ''}
+            onChange={handleChange}
+            className={`w-full px-3 py-2 rounded-lg border ${errors.name ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
+          />
+          {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Titel *
+          </label>
+          <input
+            type="text"
+            name="title"
+            value={formData.title || ''}
+            onChange={handleChange}
+            className={`w-full px-3 py-2 rounded-lg border ${errors.title ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
+          />
+          {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            E-Mail *
+          </label>
+          <input
+            type="email"
+            name="email"
+            value={formData.email || ''}
+            onChange={handleChange}
+            className={`w-full px-3 py-2 rounded-lg border ${errors.email ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
+          />
+          {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
+        </div>
+        
+        <div className="grid md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              GitHub URL
+            </label>
+            <input
+              type="url"
+              name="github"
+              value={formData.github || ''}
+              onChange={handleChange}
+              className={`w-full px-3 py-2 rounded-lg border ${errors.github ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
+            />
+            {errors.github && <p className="text-red-500 text-sm mt-1">{errors.github}</p>}
+          </div>
+          
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              LinkedIn URL
+            </label>
+            <input
+              type="url"
+              name="linkedin"
+              value={formData.linkedin || ''}
+              onChange={handleChange}
+              className={`w-full px-3 py-2 rounded-lg border ${errors.linkedin ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
+            />
+            {errors.linkedin && <p className="text-red-500 text-sm mt-1">{errors.linkedin}</p>}
+          </div>
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Standort
+          </label>
+          <input
+            type="text"
+            name="location"
+            value={formData.location || ''}
+            onChange={handleChange}
+            className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+          />
+        </div>
+        
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Intro
+          </label>
+          <textarea
+            name="intro"
+            value={formData.intro || ''}
+            onChange={handleChange}
+            rows={3}
+            className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+          />
+        </div>
+      </div>
+      
+      <div className="flex gap-3 mt-6">
+        <button
+          type="submit"
+          className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+        >
+          <Save size={18} />
+          Speichern
+        </button>
+        <button
+          type="button"
+          onClick={handleReset}
+          className="flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
+        >
+          <RotateCcw size={18} />
+          Zurücksetzen
+        </button>
+      </div>
+    </form>
+  );
+}
--- a/src/admin/sections/ProjectsForm.jsx
+++ b/src/admin/sections/ProjectsForm.jsx
@@ -0,0 +1,227 @@
+import { useState } from 'react';
+import { Plus, Edit2, Trash2, X, Check } from 'lucide-react';
+
+export default function ProjectsForm({ data, onUpdate }) {
+  const [editingId, setEditingId] = useState(null);
+  const [editForm, setEditForm] = useState(null);
+  
+  const defaultForm = {
+    name: '',
+    description: '',
+    url: '',
+    tech: []
+  };
+  
+  const startAdd = () => {
+    setEditingId('new');
+    setEditForm({ ...defaultForm, id: Date.now() });
+  };
+  
+  const startEdit = (project) => {
+    setEditingId(project.id);
+    setEditForm({ ...project });
+  };
+  
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditForm(null);
+  };
+  
+  const saveEdit = () => {
+    if (!editForm.name) return;
+    
+    if (editingId === 'new') {
+      onUpdate([...data, editForm]);
+    } else {
+      onUpdate(data.map(p => p.id === editingId ? editForm : p));
+    }
+    cancelEdit();
+  };
+  
+  const deleteItem = (id) => {
+    onUpdate(data.filter(p => p.id !== id));
+  };
+  
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setEditForm(prev => ({ ...prev, [name]: value }));
+  };
+  
+  const addTech = () => {
+    setEditForm(prev => ({
+      ...prev,
+      tech: [...(prev.tech || []), '']
+    }));
+  };
+  
+  const updateTech = (index, value) => {
+    setEditForm(prev => ({
+      ...prev,
+      tech: prev.tech.map((t, i) => i === index ? value : t)
+    }));
+  };
+  
+  const removeTech = (index) => {
+    setEditForm(prev => ({
+      ...prev,
+      tech: prev.tech.filter((_, i) => i !== index)
+    }));
+  };
+  
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-semibold text-slate-900">Projekte</h2>
+        {editingId !== 'new' && (
+          <button
+            onClick={startAdd}
+            className="flex items-center gap-2 px-3 py-1.5 bg-primary-100 text-primary-700 rounded-lg hover:bg-primary-200 transition-colors text-sm"
+          >
+            <Plus size={16} />
+            Hinzufügen
+          </button>
+        )}
+      </div>
+      
+      {editingId === 'new' && editForm && (
+        <div className="mb-4 p-4 bg-primary-50 rounded-lg border border-primary-200">
+          <FormFields
+            form={editForm}
+            onChange={handleChange}
+            onSave={saveEdit}
+            onCancel={cancelEdit}
+            onAddTech={addTech}
+            onUpdateTech={updateTech}
+            onRemoveTech={removeTech}
+          />
+        </div>
+      )}
+      
+      <div className="space-y-3">
+        {data.map((project) => (
+          <div key={project.id}>
+            {editingId === project.id ? (
+              <div className="p-4 bg-primary-50 rounded-lg border border-primary-200">
+                <FormFields
+                  form={editForm}
+                  onChange={handleChange}
+                  onSave={saveEdit}
+                  onCancel={cancelEdit}
+                  onAddTech={addTech}
+                  onUpdateTech={updateTech}
+                  onRemoveTech={removeTech}
+                />
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 bg-slate-50 rounded-lg group">
+                <div className="flex-1">
+                  <h3 className="font-medium text-slate-900">{project.name}</h3>
+                  <p className="text-sm text-slate-600">{project.description}</p>
+                  <div className="flex flex-wrap gap-1 mt-2">
+                    {(project.tech || []).map((t, i) => (
+                      <span key={i} className="px-2 py-0.5 text-xs bg-primary-50 text-primary-600 rounded">
+                        {t}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+                <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <button
+                    onClick={() => startEdit(project)}
+                    className="p-1.5 text-slate-500 hover:text-primary-600 hover:bg-primary-50 rounded"
+                  >
+                    <Edit2 size={16} />
+                  </button>
+                  <button
+                    onClick={() => deleteItem(project.id)}
+                    className="p-1.5 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FormFields({ form, onChange, onSave, onCancel, onAddTech, onUpdateTech, onRemoveTech }) {
+  return (
+    <div className="space-y-3">
+      <input
+        type="text"
+        name="name"
+        value={form.name || ''}
+        onChange={onChange}
+        placeholder="Projektname"
+        className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+      />
+      <textarea
+        name="description"
+        value={form.description || ''}
+        onChange={onChange}
+        placeholder="Kurze Beschreibung"
+        rows={2}
+        className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+      />
+      <input
+        type="url"
+        name="url"
+        value={form.url || ''}
+        onChange={onChange}
+        placeholder="Projekt-URL"
+        className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+      />
+      
+      <div>
+        <label className="text-sm font-medium text-slate-700 mb-1 block">Technologien</label>
+        <div className="flex flex-wrap gap-2 mb-2">
+          {(form.tech || []).map((t, i) => (
+            <div key={i} className="flex items-center gap-1">
+              <input
+                type="text"
+                value={t}
+                onChange={(e) => onUpdateTech(i, e.target.value)}
+                className="w-24 px-2 py-1 text-sm rounded border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+              />
+              <button
+                type="button"
+                onClick={() => onRemoveTech(i)}
+                className="p-1 text-slate-400 hover:text-red-500"
+              >
+                <X size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={onAddTech}
+          className="text-sm text-primary-600 hover:text-primary-700"
+        >
+          + Technologie hinzufügen
+        </button>
+      </div>
+      
+      <div className="flex gap-2 pt-2">
+        <button
+          onClick={onSave}
+          className="flex items-center gap-1 px-3 py-1.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 text-sm"
+        >
+          <Check size={16} />
+          Speichern
+        </button>
+        <button
+          onClick={onCancel}
+          className="flex items-center gap-1 px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 text-sm"
+        >
+          <X size={16} />
+          Abbrechen
+        </button>
+      </div>
+    </div>
+  );
+}
--- a/src/admin/sections/SkillsForm.jsx
+++ b/src/admin/sections/SkillsForm.jsx
@@ -0,0 +1,160 @@
+import { useState, useEffect } from 'react';
+import { Plus, X } from 'lucide-react';
+
+function CategoryHeader({ category, onRename, onDelete }) {
+  const [localValue, setLocalValue] = useState(category);
+  
+  useEffect(() => {
+    setLocalValue(category);
+  }, [category]);
+  
+  const handleBlur = () => {
+    onRename(category, localValue);
+  };
+  
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.target.blur();
+    }
+  };
+  
+  return (
+    <div className="flex items-center justify-between mb-3">
+      <input
+        type="text"
+        value={localValue}
+        onChange={(e) => setLocalValue(e.target.value)}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        className="flex-1 font-medium text-slate-900 bg-transparent border-none focus:outline-none focus:ring-0 mr-2"
+      />
+      <button
+        onClick={onDelete}
+        className="p-1 text-slate-400 hover:text-red-500"
+      >
+        <X size={16} />
+      </button>
+    </div>
+  );
+}
+
+export default function SkillsForm({ data, onUpdate }) {
+  const [newCategory, setNewCategory] = useState('');
+  const [newSkill, setNewSkill] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  
+  const addCategory = () => {
+    if (!newCategory.trim()) return;
+    onUpdate({ ...data, [newCategory.trim()]: [] });
+    setNewCategory('');
+  };
+  
+  const deleteCategory = (category) => {
+    const updated = { ...data };
+    delete updated[category];
+    onUpdate(updated);
+  };
+  
+  const addSkill = (category) => {
+    if (!newSkill.trim()) return;
+    onUpdate({
+      ...data,
+      [category]: [...(data[category] || []), newSkill.trim()]
+    });
+    setNewSkill('');
+  };
+  
+  const deleteSkill = (category, skillIndex) => {
+    onUpdate({
+      ...data,
+      [category]: data[category].filter((_, i) => i !== skillIndex)
+    });
+  };
+  
+  const renameCategory = (oldName, newName) => {
+    if (!newName.trim() || oldName === newName) return;
+    const updated = { ...data };
+    updated[newName] = updated[oldName];
+    delete updated[oldName];
+    onUpdate(updated);
+  };
+  
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100">
+      <h2 className="text-xl font-semibold text-slate-900 mb-6">Skills</h2>
+      
+      <div className="mb-4 p-4 bg-slate-50 rounded-lg">
+        <label className="text-sm font-medium text-slate-700 mb-2 block">Neue Kategorie</label>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={newCategory}
+            onChange={(e) => setNewCategory(e.target.value)}
+            placeholder="z.B. DevOps, Frontend, Backend..."
+            className="flex-1 px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
+            onKeyPress={(e) => e.key === 'Enter' && addCategory()}
+          />
+          <button
+            onClick={addCategory}
+            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
+          >
+            <Plus size={18} />
+          </button>
+        </div>
+      </div>
+      
+      <div className="space-y-4">
+        {Object.entries(data).map(([category, skills], index) => (
+          <div key={`category-${index}`} className="border border-slate-200 rounded-lg p-4">
+            <CategoryHeader
+              category={category}
+              onRename={renameCategory}
+              onDelete={() => deleteCategory(category)}
+            />
+            
+            <div className="flex flex-wrap gap-2 mb-3">
+              {(skills || []).map((skill, i) => (
+                <span
+                  key={i}
+                  className="flex items-center gap-1 px-3 py-1 bg-slate-100 text-slate-700 rounded-lg text-sm group"
+                >
+                  {skill}
+                  <button
+                    onClick={() => deleteSkill(category, i)}
+                    className="text-slate-400 hover:text-red-500 opacity-0 group-hover:opacity-100"
+                  >
+                    <X size={14} />
+                  </button>
+                </span>
+              ))}
+            </div>
+            
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={selectedCategory === category ? newSkill : ''}
+                onChange={(e) => {
+                  setSelectedCategory(category);
+                  setNewSkill(e.target.value);
+                }}
+                placeholder="Skill hinzufügen..."
+                className="flex-1 px-3 py-1.5 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500 text-sm"
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    addSkill(category);
+                  }
+                }}
+              />
+              <button
+                onClick={() => addSkill(category)}
+                className="px-3 py-1.5 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 text-sm"
+              >
+                <Plus size={16} />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/Contact.jsx
+++ b/src/components/Contact.jsx
@@ -0,0 +1,61 @@
+import { motion } from 'framer-motion';
+import { Mail, Github, Linkedin, Heart } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Contact() {
+  const { data } = useCVData();
+  const { personal } = data;
+  
+  return (
+    <footer className="py-12 px-6 bg-slate-900 text-white">
+      <div className="max-w-4xl mx-auto">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center"
+        >
+          <h2 className="text-2xl font-bold mb-4">Kontakt</h2>
+          <p className="text-slate-400 mb-6">
+            Interessiert an einer Zusammenarbeit? Kontaktiere mich gerne!
+          </p>
+          
+          <div className="flex justify-center gap-4 mb-8">
+            <a
+              href={`mailto:${personal.email}`}
+              className="p-3 rounded-lg bg-slate-800 hover:bg-primary-600 transition-colors"
+              aria-label="Email"
+            >
+              <Mail size={24} />
+            </a>
+            <a
+              href={personal.github}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-3 rounded-lg bg-slate-800 hover:bg-primary-600 transition-colors"
+              aria-label="GitHub"
+            >
+              <Github size={24} />
+            </a>
+            <a
+              href={personal.linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-3 rounded-lg bg-slate-800 hover:bg-primary-600 transition-colors"
+              aria-label="LinkedIn"
+            >
+              <Linkedin size={24} />
+            </a>
+          </div>
+          
+          <div className="pt-8 border-t border-slate-800 text-sm text-slate-500">
+            <p className="flex items-center justify-center gap-1">
+              Built with <Heart size={14} className="text-red-500" /> using React & Tailwind CSS
+            </p>
+            <p className="mt-2">© {new Date().getFullYear()} {personal.name}</p>
+          </div>
+        </motion.div>
+      </div>
+    </footer>
+  );
+}
--- a/src/components/Education.jsx
+++ b/src/components/Education.jsx
@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+import { GraduationCap, Calendar } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Education() {
+  const { data } = useCVData();
+  const { education } = data;
+  
+  return (
+    <section id="education" className="py-20 px-6">
+      <div className="max-w-4xl mx-auto">
+        <motion.h2 
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          className="text-3xl font-bold text-slate-900 mb-12 text-center"
+        >
+          Ausbildung
+        </motion.h2>
+        
+        <div className="grid md:grid-cols-2 gap-6">
+          {education.map((edu, index) => (
+            <motion.div
+              key={edu.id}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.2 }}
+              className="bg-white rounded-xl p-6 shadow-sm border border-slate-100"
+            >
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600">
+                  <GraduationCap size={24} />
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-lg font-semibold text-slate-900">{edu.degree}</h3>
+                  <p className="text-slate-600">{edu.institution}</p>
+                  <div className="flex items-center gap-2 mt-2 text-slate-500 text-sm">
+                    <Calendar size={14} />
+                    <span>{edu.period}</span>
+                  </div>
+                  <span className="inline-block mt-2 px-2 py-1 text-xs bg-amber-100 text-amber-700 rounded">
+                    {edu.status}
+                  </span>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/Experience.jsx
+++ b/src/components/Experience.jsx
@@ -0,0 +1,72 @@
+import { motion } from 'framer-motion';
+import { Briefcase, Calendar } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Experience() {
+  const { data } = useCVData();
+  const { experience } = data;
+  
+  return (
+    <section id="experience" className="py-20 px-6">
+      <div className="max-w-4xl mx-auto">
+        <motion.h2 
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          className="text-3xl font-bold text-slate-900 mb-12 text-center"
+        >
+          Berufserfahrung
+        </motion.h2>
+        
+        <div className="relative">
+          {experience.map((exp, index) => (
+            <motion.div
+              key={exp.id}
+              initial={{ opacity: 0, x: -20 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.2 }}
+              className="relative pl-8 pb-12 last:pb-0"
+            >
+              <div className="absolute left-0 top-2 w-4 h-4 rounded-full bg-primary-500 border-4 border-primary-100" />
+              {index !== experience.length - 1 && (
+                <div className="absolute left-[7px] top-6 w-0.5 h-full bg-slate-200" />
+              )}
+              
+              <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
+                <div className="flex flex-wrap items-start justify-between gap-2 mb-2">
+                  <h3 className="text-xl font-semibold text-slate-900">{exp.role}</h3>
+                  <span className="px-3 py-1 text-sm bg-primary-100 text-primary-700 rounded-full">
+                    {exp.type}
+                  </span>
+                </div>
+                
+                <div className="flex items-center gap-4 text-slate-500 mb-4">
+                  <span className="flex items-center gap-1">
+                    <Briefcase size={16} />
+                    {exp.company}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Calendar size={16} />
+                    {exp.period}
+                  </span>
+                </div>
+                
+                <p className="text-slate-600 mb-4">{exp.description}</p>
+                
+                <ul className="space-y-2">
+                  {exp.highlights.map((highlight, i) => (
+                    <li key={i} className="flex items-start gap-2 text-slate-600">
+                      <span className="text-primary-500 mt-1">•</span>
+                      {highlight}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -0,0 +1,73 @@
+import { motion } from 'framer-motion';
+import { Github, Linkedin, Mail, MapPin } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Hero() {
+  const { data } = useCVData();
+  const { personal } = data;
+  
+  return (
+    <section className="min-h-screen flex items-center justify-center px-6 py-20">
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="max-w-3xl text-center"
+      >
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
+          className="w-32 h-32 mx-auto mb-8 rounded-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center text-white text-4xl font-bold"
+        >
+          {personal.name.split(' ').map(n => n[0]).join('')}
+        </motion.div>
+        
+        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
+          {personal.name}
+        </h1>
+        
+        <h2 className="text-xl md:text-2xl text-primary-600 font-medium mb-4">
+          {personal.title}
+        </h2>
+        
+        <div className="flex items-center justify-center gap-2 text-slate-500 mb-6">
+          <MapPin size={18} />
+          <span>{personal.location}</span>
+        </div>
+        
+        <p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto">
+          {personal.intro}
+        </p>
+        
+        <div className="flex justify-center gap-4">
+          <a
+            href={`mailto:${personal.email}`}
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Mail size={20} />
+            <span>Email</span>
+          </a>
+          <a
+            href={personal.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Github size={20} />
+            <span>GitHub</span>
+          </a>
+          <a
+            href={personal.linkedin}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Linkedin size={20} />
+            <span>LinkedIn</span>
+          </a>
+        </div>
+      </motion.div>
+    </section>
+  );
+}
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -0,0 +1,57 @@
+import { motion } from 'framer-motion';
+import { ExternalLink } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Projects() {
+  const { data } = useCVData();
+  const { projects } = data;
+  
+  return (
+    <section id="projects" className="py-20 px-6 bg-white">
+      <div className="max-w-4xl mx-auto">
+        <motion.h2 
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          className="text-3xl font-bold text-slate-900 mb-12 text-center"
+        >
+          Projekte
+        </motion.h2>
+        
+        <div className="grid md:grid-cols-2 gap-6">
+          {projects.map((project, index) => (
+            <motion.a
+              key={project.id}
+              href={project.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.2 }}
+              whileHover={{ y: -4 }}
+              className="group bg-slate-50 rounded-xl p-6 border border-slate-100 hover:border-primary-200 hover:shadow-md transition-all"
+            >
+              <div className="flex items-start justify-between mb-3">
+                <h3 className="text-lg font-semibold text-slate-900 group-hover:text-primary-600 transition-colors">
+                  {project.name}
+                </h3>
+                <ExternalLink size={18} className="text-slate-400 group-hover:text-primary-500" />
+              </div>
+              
+              <p className="text-slate-600 mb-4 text-sm">{project.description}</p>
+              
+              <div className="flex flex-wrap gap-2">
+                {project.tech.map((t, i) => (
+                  <span key={i} className="px-2 py-1 text-xs bg-primary-50 text-primary-600 rounded">
+                    {t}
+                  </span>
+                ))}
+              </div>
+            </motion.a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/Skills.jsx
+++ b/src/components/Skills.jsx
@@ -0,0 +1,72 @@
+import { motion } from 'framer-motion';
+import { useCVData } from '../admin/hooks/CVContext';
+
+const skillIcons = {
+  "Docker": "🐳",
+  "Kubernetes": "☸️",
+  "Helm": "⛵",
+  "Jenkins": "🔧",
+  "Bitbucket": "📘",
+  "ArgoCD": "🔄",
+  "Git": "📝",
+  "Azure": "☁️",
+  "Azure Resource Manager": "🏗️",
+  "Release Engineering": "🚀",
+  "Linux Administration": "🐧",
+  "Python": "🐍",
+  "Bash": "💻",
+  "Rust": "🦀"
+};
+
+export default function Skills() {
+  const { data } = useCVData();
+  const { skills } = data;
+  
+  return (
+    <section id="skills" className="py-20 px-6 bg-white">
+      <div className="max-w-4xl mx-auto">
+        <motion.h2 
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          viewport={{ once: true }}
+          className="text-3xl font-bold text-slate-900 mb-12 text-center"
+        >
+          Skills
+        </motion.h2>
+        
+        <div className="grid md:grid-cols-2 gap-8">
+          {Object.entries(skills).map(([category, items], catIndex) => (
+            <motion.div
+              key={category}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: catIndex * 0.1 }}
+              className="bg-slate-50 rounded-xl p-6"
+            >
+              <h3 className="text-lg font-semibold text-primary-600 mb-4">
+                {category}
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {items.map((skill, i) => (
+                  <motion.span
+                    key={skill}
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    whileInView={{ opacity: 1, scale: 1 }}
+                    viewport={{ once: true }}
+                    transition={{ delay: i * 0.05 }}
+                    whileHover={{ scale: 1.05 }}
+                    className="px-3 py-1.5 bg-white rounded-lg text-sm text-slate-700 shadow-sm border border-slate-100 flex items-center gap-1.5 cursor-default"
+                  >
+                    {skillIcons[skill] && <span>{skillIcons[skill]}</span>}
+                    {skill}
+                  </motion.span>
+                ))}
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/data/cv.js
+++ b/src/data/cv.js
@@ -0,0 +1,3 @@
+import { DEFAULT_DATA } from './lib/cv-data.js';
+
+export const cvData = DEFAULT_DATA;
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,26 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import "tailwindcss";
+
+@theme {
+  --color-primary-50: #eef2ff;
+  --color-primary-100: #e0e7ff;
+  --color-primary-200: #c7d2fe;
+  --color-primary-300: #a5b4fc;
+  --color-primary-400: #818cf8;
+  --color-primary-500: #6366f1;
+  --color-primary-600: #4f46e5;
+  --color-primary-700: #4338ca;
+  --color-primary-800: #3730a3;
+  --color-primary-900: #312e81;
+  
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  margin: 0;
+}
--- a/src/lib/tests/cv-data.test.js
+++ b/src/lib/tests/cv-data.test.js
@@ -0,0 +1,168 @@
+import { describe, it, expect } from 'vitest';
+import { 
+  validateCV, 
+  mergeCVData, 
+  exportToJSON, 
+  importFromJSON,
+  DEFAULT_DATA 
+} from '../cv-data';
+
+describe('validateCV', () => {
+  it('validates correct CV data', () => {
+    const result = validateCV(DEFAULT_DATA);
+    expect(result.valid).toBe(true);
+    expect(result.errors).toHaveLength(0);
+  });
+  
+  it('requires personal section', () => {
+    const result = validateCV({});
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain('personal is required');
+  });
+  
+  it('requires personal.name', () => {
+    const result = validateCV({
+      personal: { title: 'Developer', email: 'test@example.com' }
+    });
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain('personal.name is required');
+  });
+  
+  it('requires personal.title', () => {
+    const result = validateCV({
+      personal: { name: 'Test', email: 'test@example.com' }
+    });
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain('personal.title is required');
+  });
+  
+  it('requires personal.email', () => {
+    const result = validateCV({
+      personal: { name: 'Test', title: 'Developer' }
+    });
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain('personal.email is required');
+  });
+  
+  it('requires experience to be array', () => {
+    const result = validateCV({
+      personal: { name: 'Test', title: 'Dev', email: 'test@test.com' },
+      experience: 'not an array'
+    });
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain('experience must be an array');
+  });
+  
+  it('requires skills to be object', () => {
+    const result = validateCV({
+      personal: { name: 'Test', title: 'Dev', email: 'test@test.com' },
+      experience: [],
+      skills: 'not an object'
+    });
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain('skills must be an object');
+  });
+  
+  it('requires education to be array', () => {
+    const result = validateCV({
+      personal: { name: 'Test', title: 'Dev', email: 'test@test.com' },
+      experience: [],
+      skills: {},
+      education: 'not an array'
+    });
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain('education must be an array');
+  });
+  
+  it('requires projects to be array', () => {
+    const result = validateCV({
+      personal: { name: 'Test', title: 'Dev', email: 'test@test.com' },
+      experience: [],
+      skills: {},
+      education: [],
+      projects: 'not an array'
+    });
+    expect(result.valid).toBe(false);
+    expect(result.errors).toContain('projects must be an array');
+  });
+});
+
+describe('mergeCVData', () => {
+  it('merges personal data', () => {
+    const base = { personal: { name: 'Old', title: 'Dev' } };
+    const updates = { personal: { name: 'New' } };
+    const result = mergeCVData(base, updates);
+    expect(result.personal.name).toBe('New');
+    expect(result.personal.title).toBe('Dev');
+  });
+  
+  it('merges top-level fields', () => {
+    const base = { experience: [], skills: {} };
+    const updates = { experience: [{ id: 1 }] };
+    const result = mergeCVData(base, updates);
+    expect(result.experience).toHaveLength(1);
+    expect(result.skills).toEqual({});
+  });
+});
+
+describe('exportToJSON', () => {
+  it('exports valid JSON string', () => {
+    const data = { personal: { name: 'Test' } };
+    const json = exportToJSON(data);
+    expect(typeof json).toBe('string');
+    expect(JSON.parse(json)).toEqual(data);
+  });
+  
+  it('formats JSON with indentation', () => {
+    const data = { personal: { name: 'Test' } };
+    const json = exportToJSON(data);
+    expect(json).toContain('\n');
+    expect(json).toContain('  ');
+  });
+});
+
+describe('importFromJSON', () => {
+  it('imports valid JSON', () => {
+    const json = JSON.stringify({
+      personal: { name: 'Test', title: 'Dev', email: 'test@test.com' },
+      experience: [],
+      skills: {},
+      education: [],
+      projects: []
+    });
+    const result = importFromJSON(json);
+    expect(result.success).toBe(true);
+    expect(result.data.personal.name).toBe('Test');
+  });
+  
+  it('fails on invalid JSON', () => {
+    const result = importFromJSON('not valid json');
+    expect(result.success).toBe(false);
+    expect(result.errors).toBeDefined();
+    expect(result.errors[0]).toContain('JSON parse error');
+  });
+  
+  it('fails on invalid CV structure', () => {
+    const json = JSON.stringify({ personal: {} });
+    const result = importFromJSON(json);
+    expect(result.success).toBe(false);
+    expect(result.errors).toContain('personal.name is required');
+  });
+});
+
+describe('DEFAULT_DATA', () => {
+  it('is valid', () => {
+    const result = validateCV(DEFAULT_DATA);
+    expect(result.valid).toBe(true);
+  });
+  
+  it('has all required fields', () => {
+    expect(DEFAULT_DATA.personal.name).toBeDefined();
+    expect(DEFAULT_DATA.personal.title).toBeDefined();
+    expect(DEFAULT_DATA.personal.email).toBeDefined();
+    expect(Array.isArray(DEFAULT_DATA.experience)).toBe(true);
+    expect(typeof DEFAULT_DATA.skills).toBe('object');
+    expect(Array.isArray(DEFAULT_DATA.education)).toBe(true);
+    expect(Array.isArray(DEFAULT_DATA.projects)).toBe(true);
+  });
+});
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -0,0 +1,71 @@
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
+import { authHeaders } from './auth';
+
+export async function fetchCV() {
+  const response = await fetch(`${API_URL}/api/cv`);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch CV: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function updateCV(data) {
+  const response = await fetch(`${API_URL}/api/cv`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      ...authHeaders(),
+    },
+    body: JSON.stringify(data),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to update CV: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function exportCV() {
+  const response = await fetch(`${API_URL}/api/cv/export`);
+  if (!response.ok) {
+    throw new Error(`Failed to export CV: ${response.statusText}`);
+  }
+  return response.blob();
+}
+
+export async function importCV(data) {
+  const response = await fetch(`${API_URL}/api/cv/import`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      ...authHeaders(),
+    },
+    body: JSON.stringify(data),
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to import CV: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function getAuthConfig() {
+  const response = await fetch(`${API_URL}/api/auth/config`);
+  if (!response.ok) {
+    throw new Error(`Failed to get auth config: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+export async function login(password) {
+  const response = await fetch(`${API_URL}/api/auth/login`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ password }),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || 'Login failed');
+  }
+  return response.json();
+}
--- a/src/lib/auth.js
+++ b/src/lib/auth.js
@@ -0,0 +1,18 @@
+const AUTH_TOKEN_KEY = 'cv_admin_token';
+
+export function getToken() {
+  return localStorage.getItem(AUTH_TOKEN_KEY);
+}
+
+export function setToken(token) {
+  localStorage.setItem(AUTH_TOKEN_KEY, token);
+}
+
+export function clearToken() {
+  localStorage.removeItem(AUTH_TOKEN_KEY);
+}
+
+export function authHeaders() {
+  const token = getToken();
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
--- a/src/lib/cv-data.js
+++ b/src/lib/cv-data.js
@@ -0,0 +1,74 @@
+import defaultData from './cv.json';
+
+export const DEFAULT_DATA = defaultData;
+
+export function validateCV(data) {
+  const errors = [];
+  
+  if (!data.personal) {
+    errors.push('personal is required');
+  } else {
+    if (!data.personal.name?.trim()) errors.push('personal.name is required');
+    if (!data.personal.title?.trim()) errors.push('personal.title is required');
+    if (!data.personal.email?.trim()) errors.push('personal.email is required');
+  }
+  
+  if (!Array.isArray(data.experience)) {
+    errors.push('experience must be an array');
+  }
+  
+  if (!data.skills || typeof data.skills !== 'object') {
+    errors.push('skills must be an object');
+  }
+  
+  if (!Array.isArray(data.education)) {
+    errors.push('education must be an array');
+  }
+  
+  if (!Array.isArray(data.projects)) {
+    errors.push('projects must be an array');
+  }
+  
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+
+export function mergeCVData(base, updates) {
+  return {
+    ...base,
+    ...updates,
+    personal: { ...base.personal, ...updates.personal }
+  };
+}
+
+export function exportToJSON(data) {
+  return JSON.stringify(data, null, 2);
+}
+
+export function importFromJSON(jsonString) {
+  try {
+    const parsed = JSON.parse(jsonString);
+    const validation = validateCV(parsed);
+    if (!validation.valid) {
+      return { success: false, errors: validation.errors };
+    }
+    return { success: true, data: parsed };
+  } catch (e) {
+    return { success: false, errors: [`JSON parse error: ${e.message}`] };
+  }
+}
+
+export function downloadJSON(data, filename = 'cv.json') {
+  const json = exportToJSON(data);
+  const blob = new Blob([json], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
--- a/src/lib/cv.json
+++ b/src/lib/cv.json
@@ -0,0 +1,73 @@
+{
+  "personal": {
+    "name": "Tuan-Dat Tran",
+    "title": "Junior DevOps Engineer",
+    "intro": "Passionierter DevOps Engineer mit Fokus auf Cloud-Infrastruktur, Container-Orchestrierung und automatisierte Deployment-Pipelines.",
+    "email": "tuan-dat.tran@example.com",
+    "github": "https://github.com/tuan-dat-tran",
+    "linkedin": "https://linkedin.com/in/tuan-dat-tran",
+    "location": "Deutschland"
+  },
+  "experience": [
+    {
+      "id": 1,
+      "role": "Junior DevOps Engineer",
+      "company": "Unternehmen",
+      "period": "Seit 2025",
+      "type": "Vollzeit",
+      "description": "Verantwortlich für CI/CD Pipelines, Container-Orchestrierung und Cloud-Infrastruktur auf Azure.",
+      "highlights": [
+        "Automatisierte Deployments mit Jenkins und Bitbucket Pipelines",
+        "Kubernetes Cluster Management mit Helm und ArgoCD",
+        "Infrastructure as Code mit Azure Resource Manager"
+      ]
+    },
+    {
+      "id": 2,
+      "role": "Software Entwickler",
+      "company": "Verschiedene Unternehmen",
+      "period": "2021 - 2025",
+      "type": "Teilzeit / Werkstudent / SHK",
+      "description": "Entwicklung und Maintenance von Softwarelösungen in verschiedenen Rollen.",
+      "highlights": [
+        "Backend-Entwicklung mit Python",
+        "Linux System Administration",
+        "Git Version Control und Release Engineering"
+      ]
+    }
+  ],
+  "skills": {
+    "Container & Orchestration": ["Docker", "Kubernetes", "Helm"],
+    "CI/CD & GitOps": ["Jenkins", "Bitbucket", "ArgoCD", "Git"],
+    "Cloud": ["Azure"],
+    "Infrastructure as Code": ["Azure Resource Manager"],
+    "Release Engineering": ["Release Engineering"],
+    "Operating Systems": ["Linux Administration"],
+    "Programming": ["Python", "Bash", "Rust"]
+  },
+  "education": [
+    {
+      "id": 1,
+      "degree": "Bachelor Informatik",
+      "institution": "Universität",
+      "period": "Laufend",
+      "status": "Bachelorarbeit offen"
+    }
+  ],
+  "projects": [
+    {
+      "id": 1,
+      "name": "Projekt 1",
+      "description": "Beschreibung folgt",
+      "url": "#",
+      "tech": ["Docker", "Kubernetes", "ArgoCD"]
+    },
+    {
+      "id": 2,
+      "name": "Projekt 2",
+      "description": "Beschreibung folgt",
+      "url": "#",
+      "tech": ["Azure", "ARM", "Jenkins"]
+    }
+  ]
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/test/setup.js
+++ b/src/test/setup.js
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig(({ mode }) => ({
+  plugins: [react(), tailwindcss()],
+  base: mode === 'production' ? '/cv/' : '/',
+}))
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>