feat(privat/CV): sync to latest upstream (cv-upstream/main, 30f9608b)

2026-07-07 15:20:55 +02:00
parent 8ac664d33d
commit a4efabbc60
417 changed files with 48564 additions and 712 deletions
@@ -0,0 +1,95 @@
+import React from 'react'
+import { useMeta } from '../hooks/useContent'
+import { ExternalLink, Globe } from 'lucide-react'
+import SpeakerCvRequest from '../components/SpeakerCvRequest'
+
+export default function About() {
+  const { profile, about } = useMeta()
+  const links = about?.links || {}
+  const stations = about?.stations || []
+  const certifications = about?.certifications || []
+  const personal = about?.personal || []
+
+  return (
+    <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
+      <div className="app-container" style={{ maxWidth: '800px' }}>
+        <div className="section-header">
+          <h1 className="section-title">Über <span className="text-gradient">mich</span></h1>
+        </div>
+
+        {/* Profile Card */}
+        <div className="glass-panel" style={{ padding: '48px', marginBottom: '40px', display: 'flex', gap: '32px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
+          <img src="/images/andre-knie.png" alt="Dr. André Knie" style={{ width: '140px', height: '140px', borderRadius: '50%', objectFit: 'cover', border: '3px solid rgba(var(--accent-color-rgb), 0.3)' }} />
+          <div style={{ flex: 1, minWidth: '250px' }}>
+            <h2 style={{ marginBottom: '8px' }}>{profile?.name || 'Dr. André Knie'}</h2>
+            <p style={{ color: 'var(--accent-color)', marginBottom: '16px', fontSize: '0.95rem' }}>
+              {profile?.roles?.join(' · ')}
+            </p>
+            <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7 }}>
+              {profile?.summary}
+            </p>
+          </div>
+        </div>
+
+        {/* Links */}
+        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '40px', alignItems: 'flex-start' }}>
+          {links.linkedin && (
+            <a href={links.linkedin} target="_blank" rel="noopener noreferrer" className="secondary-button" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+              <ExternalLink size={18} /> LinkedIn
+            </a>
+          )}
+          {links.dhive && (
+            <a href={links.dhive} target="_blank" rel="noopener noreferrer" className="secondary-button" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+              <Globe size={18} /> Data Hive Cassel
+            </a>
+          )}
+          <SpeakerCvRequest />
+        </div>
+
+        {/* Career Timeline */}
+        {stations.length > 0 && (
+          <>
+            <h2 style={{ marginBottom: '24px' }}>Stationen</h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '60px' }}>
+              {stations.map((entry, i) => (
+                <div key={i} className="glass-panel" style={{ padding: '20px 28px', display: 'flex', gap: '20px', alignItems: 'baseline' }}>
+                  <span style={{ color: 'var(--accent-color)', fontSize: '0.85rem', fontWeight: 'var(--font-weight-semibold)', minWidth: '90px', whiteSpace: 'nowrap' }}>{entry.period}</span>
+                  <div>
+                    <strong>{entry.title}</strong>
+                    <span style={{ color: 'var(--text-secondary)', marginLeft: '8px' }}>— {entry.org}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        )}
+
+        {/* Certifications */}
+        {certifications.length > 0 && (
+          <>
+            <h2 style={{ marginBottom: '24px' }}>Zertifizierungen & Weiterbildungen</h2>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', marginBottom: '60px' }}>
+              {certifications.map((cert, i) => (
+                <span key={i} style={{ background: 'rgba(var(--accent-color-rgb), 0.1)', color: 'var(--accent-color)', padding: '8px 16px', borderRadius: 'var(--radius-pill)', fontSize: '0.85rem' }}>
+                  {cert}
+                </span>
+              ))}
+            </div>
+          </>
+        )}
+
+        {/* Personal */}
+        {personal.length > 0 && (
+          <>
+            <h2 style={{ marginBottom: '24px' }}>Engagement & Persönliches</h2>
+            <div className="glass-panel" style={{ padding: '28px', color: 'var(--text-secondary)', lineHeight: 1.8 }}>
+              {personal.map((para, i) => (
+                <p key={i} style={{ margin: i === personal.length - 1 ? 0 : '0 0 12px' }}>{para}</p>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </main>
+  )
+}