feat(ui): add cv application frontend and configuration

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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;
+}

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;
+}

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');
+  });
+});

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
+  };
+}

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;
+  }
+};

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}