feat(ui): add cv application frontend and configuration
This commit is contained in:
Tuan-Dat Tran
33
.gitignore
vendored
Normal file
33
.gitignore
vendored
Normal file
@@ -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
|
||||||
26
docker-compose.yml
Normal file
26
docker-compose.yml
Normal file
@@ -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:
|
||||||
89
eslint.config.js
Normal file
89
eslint.config.js
Normal file
@@ -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',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@@ -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>
|
||||||
28
nginx.conf
Normal file
28
nginx.conf
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
26
playwright.config.js
Normal file
26
playwright.config.js
Normal file
@@ -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,
|
||||||
|
},
|
||||||
|
});
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
51
src/App.jsx
Normal file
51
src/App.jsx
Normal file
@@ -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;
|
||||||
14
src/admin/AdminEducation.jsx
Normal file
14
src/admin/AdminEducation.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
14
src/admin/AdminExperience.jsx
Normal file
14
src/admin/AdminExperience.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
89
src/admin/AdminLayout.jsx
Normal file
89
src/admin/AdminLayout.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
14
src/admin/AdminPersonal.jsx
Normal file
14
src/admin/AdminPersonal.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
14
src/admin/AdminProjects.jsx
Normal file
14
src/admin/AdminProjects.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
14
src/admin/AdminSkills.jsx
Normal file
14
src/admin/AdminSkills.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
104
src/admin/components/ExportButton.jsx
Normal file
104
src/admin/components/ExportButton.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
61
src/admin/hooks/AuthContext.jsx
Normal file
61
src/admin/hooks/AuthContext.jsx
Normal file
@@ -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;
|
||||||
|
}
|
||||||
132
src/admin/hooks/CVContext.jsx
Normal file
132
src/admin/hooks/CVContext.jsx
Normal file
@@ -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;
|
||||||
|
}
|
||||||
89
src/admin/hooks/__tests__/CVContext.test.jsx
Normal file
89
src/admin/hooks/__tests__/CVContext.test.jsx
Normal file
@@ -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');
|
||||||
|
});
|
||||||
|
});
|
||||||
60
src/admin/hooks/useCVData.js
Normal file
60
src/admin/hooks/useCVData.js
Normal file
@@ -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
|
||||||
|
};
|
||||||
|
}
|
||||||
69
src/admin/hooks/useFormValidation.js
Normal file
69
src/admin/hooks/useFormValidation.js
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
};
|
||||||
95
src/admin/pages/LoginPage.jsx
Normal file
95
src/admin/pages/LoginPage.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
167
src/admin/sections/EducationForm.jsx
Normal file
167
src/admin/sections/EducationForm.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
248
src/admin/sections/ExperienceForm.jsx
Normal file
248
src/admin/sections/ExperienceForm.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
169
src/admin/sections/PersonalForm.jsx
Normal file
169
src/admin/sections/PersonalForm.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
227
src/admin/sections/ProjectsForm.jsx
Normal file
227
src/admin/sections/ProjectsForm.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
160
src/admin/sections/SkillsForm.jsx
Normal file
160
src/admin/sections/SkillsForm.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
61
src/components/Contact.jsx
Normal file
61
src/components/Contact.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
53
src/components/Education.jsx
Normal file
53
src/components/Education.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
72
src/components/Experience.jsx
Normal file
72
src/components/Experience.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
73
src/components/Hero.jsx
Normal file
73
src/components/Hero.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
57
src/components/Projects.jsx
Normal file
57
src/components/Projects.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
72
src/components/Skills.jsx
Normal file
72
src/components/Skills.jsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
3
src/data/cv.js
Normal file
3
src/data/cv.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { DEFAULT_DATA } from './lib/cv-data.js';
|
||||||
|
|
||||||
|
export const cvData = DEFAULT_DATA;
|
||||||
26
src/index.css
Normal file
26
src/index.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
168
src/lib/__tests__/cv-data.test.js
Normal file
168
src/lib/__tests__/cv-data.test.js
Normal file
@@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
71
src/lib/api.js
Normal file
71
src/lib/api.js
Normal file
@@ -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();
|
||||||
|
}
|
||||||
18
src/lib/auth.js
Normal file
18
src/lib/auth.js
Normal file
@@ -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}` } : {};
|
||||||
|
}
|
||||||
74
src/lib/cv-data.js
Normal file
74
src/lib/cv-data.js
Normal file
@@ -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);
|
||||||
|
}
|
||||||
73
src/lib/cv.json
Normal file
73
src/lib/cv.json
Normal file
@@ -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"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
@@ -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>,
|
||||||
|
)
|
||||||
1
src/test/setup.js
Normal file
1
src/test/setup.js
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import '@testing-library/jest-dom/vitest';
|
||||||
8
vite.config.js
Normal file
8
vite.config.js
Normal file
@@ -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/' : '/',
|
||||||
|
}))
|
||||||
Reference in New Issue
Block a user