6f5de542ab
Scaffold complete repo structure: - 28 static sites extracted from running containers on mlake - 2 dynamic sites (dasbes.de, dumusst.com) marked for separate handling - Template system with 6 templates (person-dark/light, product-dark, editorial, fun, minimal) - Shared CSS (variables, responsive, animations, noise overlay) - nginx config generator with multi-domain alias support - Build script with Docker-based nginx validation - add-site.sh helper for scaffolding new domains - Dockerfile for single nginx:alpine container Sites: clemensplassmann.de, danosi.de, deinesei.de, derkaiseristnackt.de, elefantenhor.de, fragina.de, frenchkis.de, ichbinaufbali.de, ichbinaufbarley.de, insain.de, julietensity.de, kainco.de (+keinco.de), kainstress.de, keinefreun.de, knzlmgmt.de, kopffrai.de, legalais.de, machesdocheinfach.de, mai-otto.de (+otto.flexsiebels.de, ottomatisch.de, ichbinotto.de), martinsiebels.de, matthiasbreier.de, osterai.de, paragraphenraiter.de, schulfrai.de, smartin3.de, sorgenfrai.de, vonschraitter.de, wartebitte.de Refs: otto#341
953 lines
34 KiB
HTML
953 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Matthias Breier — IT Projektmanager</title>
|
|
<meta name="description" content="Matthias Breier — IT Projektmanager. Digitale Transformation, Agile Methoden, Strategische IT-Beratung.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*, *::before, *::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--navy: #0a1628;
|
|
--navy-light: #121f36;
|
|
--navy-mid: #1a2d4a;
|
|
--blue-dark: #1e3a5f;
|
|
--teal: #00b4d8;
|
|
--teal-light: #48cae4;
|
|
--teal-glow: rgba(0, 180, 216, 0.15);
|
|
--white: #ffffff;
|
|
--off-white: #f0f4f8;
|
|
--gray-light: #e2e8f0;
|
|
--gray: #94a3b8;
|
|
--gray-dark: #64748b;
|
|
--text: #1e293b;
|
|
--text-light: #cbd5e1;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
color: var(--text);
|
|
line-height: 1.7;
|
|
background: var(--white);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ===== NAV ===== */
|
|
nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: rgba(10, 22, 40, 0.95);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(0, 180, 216, 0.1);
|
|
}
|
|
|
|
.nav-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 1.25rem;
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.nav-logo .ai-mark {
|
|
color: var(--teal);
|
|
font-weight: inherit;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--gray);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--teal-light);
|
|
}
|
|
|
|
/* ===== HERO ===== */
|
|
.hero {
|
|
min-height: 100vh;
|
|
background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 40%, var(--navy-mid) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-top: 64px;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -20%;
|
|
width: 80%;
|
|
height: 200%;
|
|
background: radial-gradient(ellipse, rgba(0, 180, 216, 0.06) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.3), transparent);
|
|
}
|
|
|
|
.hero-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 4rem 2rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-text {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-label {
|
|
display: inline-block;
|
|
color: var(--teal);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.5rem;
|
|
padding: 0.4rem 1rem;
|
|
border: 1px solid rgba(0, 180, 216, 0.3);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.hero-name {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: clamp(2.5rem, 5vw, 4rem);
|
|
color: var(--white);
|
|
line-height: 1.15;
|
|
margin-bottom: 1rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.ai-swap {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.ai-swap .letter {
|
|
display: inline-block;
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
.ai-swap .letter:first-child {
|
|
position: relative;
|
|
}
|
|
|
|
.ai-swap .letter.hidden {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
.ai-swap .letter.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
#letterA.visible, #letterAI.visible {
|
|
color: var(--teal);
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: clamp(1.125rem, 2vw, 1.5rem);
|
|
color: var(--gray);
|
|
font-weight: 300;
|
|
margin-bottom: 2rem;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.hero-desc {
|
|
color: var(--text-light);
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
max-width: 480px;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.9rem 2rem;
|
|
background: var(--teal);
|
|
color: var(--navy);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.03em;
|
|
border-radius: 3px;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.hero-cta:hover {
|
|
background: var(--teal-light);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 24px rgba(0, 180, 216, 0.25);
|
|
}
|
|
|
|
.hero-cta svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
transition: transform 0.25s;
|
|
}
|
|
|
|
.hero-cta:hover svg {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.hero-image-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-image-frame {
|
|
position: relative;
|
|
width: 380px;
|
|
height: 460px;
|
|
}
|
|
|
|
.hero-image-frame::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
bottom: -8px;
|
|
left: -8px;
|
|
border: 1px solid rgba(0, 180, 216, 0.2);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.hero-image-frame::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 12px;
|
|
right: -12px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, var(--teal), rgba(0, 180, 216, 0.3));
|
|
border-radius: 4px;
|
|
z-index: -1;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.hero-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
filter: grayscale(15%) contrast(1.05);
|
|
}
|
|
|
|
/* ===== SECTIONS COMMON ===== */
|
|
section {
|
|
padding: 6rem 2rem;
|
|
}
|
|
|
|
.section-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
display: inline-block;
|
|
color: var(--teal);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: clamp(1.75rem, 3vw, 2.5rem);
|
|
color: var(--navy);
|
|
margin-bottom: 1.5rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.section-subtitle {
|
|
color: var(--gray-dark);
|
|
font-size: 1.05rem;
|
|
max-width: 600px;
|
|
line-height: 1.8;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
/* ===== ABOUT ===== */
|
|
.about {
|
|
background: var(--white);
|
|
}
|
|
|
|
.about-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-text p {
|
|
color: var(--gray-dark);
|
|
font-size: 1.05rem;
|
|
line-height: 1.85;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.about-stats {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--off-white);
|
|
padding: 1.5rem;
|
|
border-radius: 4px;
|
|
border-left: 3px solid var(--teal);
|
|
}
|
|
|
|
.stat-number {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 2rem;
|
|
color: var(--navy);
|
|
line-height: 1;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.85rem;
|
|
color: var(--gray-dark);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.about-visual {
|
|
position: relative;
|
|
}
|
|
|
|
.about-image {
|
|
width: 100%;
|
|
height: 400px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
filter: grayscale(20%);
|
|
}
|
|
|
|
.about-image-overlay {
|
|
position: absolute;
|
|
bottom: -1.5rem;
|
|
left: -1.5rem;
|
|
background: var(--navy);
|
|
color: var(--white);
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 4px;
|
|
max-width: 260px;
|
|
}
|
|
|
|
.about-image-overlay p {
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
font-style: italic;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.about-image-overlay .quote-mark {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 2.5rem;
|
|
color: var(--teal);
|
|
line-height: 1;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* ===== KOMPETENZEN ===== */
|
|
.kompetenzen {
|
|
background: var(--off-white);
|
|
}
|
|
|
|
.kompetenz-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.kompetenz-card {
|
|
background: var(--white);
|
|
padding: 2rem;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--gray-light);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.kompetenz-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--teal), var(--teal-light));
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.kompetenz-card:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.kompetenz-card:hover {
|
|
border-color: rgba(0, 180, 216, 0.3);
|
|
box-shadow: 0 8px 32px rgba(10, 22, 40, 0.08);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.kompetenz-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--teal-glow);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.kompetenz-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--teal);
|
|
}
|
|
|
|
.kompetenz-card h3 {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 1.15rem;
|
|
color: var(--navy);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.kompetenz-card p {
|
|
color: var(--gray-dark);
|
|
font-size: 0.9rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ===== METHODIK ===== */
|
|
.methodik {
|
|
background: var(--navy);
|
|
color: var(--white);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.methodik::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.3), transparent);
|
|
}
|
|
|
|
.methodik .section-label {
|
|
color: var(--teal);
|
|
}
|
|
|
|
.methodik .section-title {
|
|
color: var(--white);
|
|
}
|
|
|
|
.methodik .section-subtitle {
|
|
color: var(--gray);
|
|
}
|
|
|
|
.methodik-steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 2rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.methodik-step {
|
|
position: relative;
|
|
padding: 2rem;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.methodik-step:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-color: rgba(0, 180, 216, 0.2);
|
|
}
|
|
|
|
.step-number {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 3rem;
|
|
color: rgba(0, 180, 216, 0.15);
|
|
line-height: 1;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.methodik-step h3 {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--white);
|
|
}
|
|
|
|
.methodik-step p {
|
|
color: var(--gray);
|
|
font-size: 0.9rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
/* ===== CONTACT ===== */
|
|
.kontakt {
|
|
background: var(--white);
|
|
text-align: center;
|
|
}
|
|
|
|
.kontakt .section-inner {
|
|
max-width: 700px;
|
|
}
|
|
|
|
.kontakt .section-title {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.kontakt-text {
|
|
color: var(--gray-dark);
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.kontakt-email {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 1.15rem;
|
|
color: var(--navy);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: 1rem 2.5rem;
|
|
border: 2px solid var(--navy);
|
|
border-radius: 3px;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.kontakt-email:hover {
|
|
background: var(--navy);
|
|
color: var(--white);
|
|
}
|
|
|
|
.kontakt-email svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.kontakt-meta {
|
|
margin-top: 3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.kontakt-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--gray-dark);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.kontakt-meta-item svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--teal);
|
|
}
|
|
|
|
/* ===== FOOTER ===== */
|
|
footer {
|
|
background: var(--navy);
|
|
color: var(--gray);
|
|
padding: 2.5rem 2rem;
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
footer .footer-brand {
|
|
font-family: 'DM Serif Display', serif;
|
|
color: var(--white);
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
footer .footer-brand .ai-mark {
|
|
color: var(--teal);
|
|
}
|
|
|
|
footer p {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ===== RESPONSIVE ===== */
|
|
@media (max-width: 1024px) {
|
|
.hero-inner {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.hero-desc {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hero-image-frame {
|
|
width: 300px;
|
|
height: 370px;
|
|
}
|
|
|
|
.about-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 3rem;
|
|
}
|
|
|
|
.kompetenz-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.methodik-steps {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
section {
|
|
padding: 4rem 1.25rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero-inner {
|
|
padding: 3rem 1.25rem;
|
|
}
|
|
|
|
.hero-image-frame {
|
|
width: 260px;
|
|
height: 320px;
|
|
}
|
|
|
|
.kompetenz-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.methodik-steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.about-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.about-image-overlay {
|
|
position: relative;
|
|
bottom: auto;
|
|
left: auto;
|
|
margin-top: 1rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.kontakt-meta {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAV -->
|
|
<nav>
|
|
<div class="nav-inner">
|
|
<a href="#" class="nav-logo">Matthi<span class="ai-mark">A</span>s Bre<span class="ai-mark">I</span>er</a>
|
|
<ul class="nav-links">
|
|
<li><a href="#about">Profil</a></li>
|
|
<li><a href="#kompetenzen">Kompetenzen</a></li>
|
|
<li><a href="#methodik">Methodik</a></li>
|
|
<li><a href="#kontakt">Kontakt</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="hero-inner">
|
|
<div class="hero-text">
|
|
<span class="hero-label">IT Projektmanagement</span>
|
|
<h1 class="hero-name">Matthias<br>Br<span class="ai-swap"><span class="letter visible" id="letterE">e</span><span class="letter hidden" id="letterA">A</span></span><span class="ai-swap"><span class="letter visible" id="letterI">i</span><span class="letter hidden" id="letterAI">I</span></span>er</h1>
|
|
<p class="hero-title">IT Projektmanager</p>
|
|
<p class="hero-desc">
|
|
Ich bringe Technologie und Strategie zusammen. Von der Konzeption bis zum Go-Live begleite ich digitale Projekte mit klarer Struktur, agilen Methoden und einem festen Blick auf messbare Ergebnisse.
|
|
</p>
|
|
<a href="#kontakt" class="hero-cta">
|
|
Kontakt aufnehmen
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /></svg>
|
|
</a>
|
|
</div>
|
|
<div class="hero-image-wrap">
|
|
<div class="hero-image-frame">
|
|
<img src="portrait.jpg" alt="Matthias Breier — IT Projektmanager" class="hero-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ABOUT -->
|
|
<section class="about" id="about">
|
|
<div class="section-inner">
|
|
<div class="about-grid">
|
|
<div class="about-text">
|
|
<span class="section-label">Profil</span>
|
|
<h2 class="section-title">Erfahrung trifft Innovation</h2>
|
|
<p>
|
|
Als IT Projektmanager verbinde ich technisches Verständnis mit strategischem Weitblick. Mein Fokus liegt auf der erfolgreichen Umsetzung komplexer IT-Projekte — von der Anforderungsanalyse über die agile Steuerung bis zur termingerechten Lieferung.
|
|
</p>
|
|
<p>
|
|
Ich arbeite an der Schnittstelle zwischen Fachbereichen und IT-Teams und sorge dafür, dass Projekte nicht nur technisch funktionieren, sondern echten Mehrwert für das Unternehmen schaffen. Dabei setze ich auf bewährte Frameworks, klare Kommunikation und datengetriebene Entscheidungen.
|
|
</p>
|
|
<div class="about-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-number">PM</div>
|
|
<div class="stat-label">Klassisch & Agil</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">E2E</div>
|
|
<div class="stat-label">End-to-End Delivery</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">KPI</div>
|
|
<div class="stat-label">Ergebnisorientiert</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">360°</div>
|
|
<div class="stat-label">Stakeholder Management</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="about-visual">
|
|
<img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=600&h=500&fit=crop" alt="Digitale Zusammenarbeit" class="about-image">
|
|
<div class="about-image-overlay">
|
|
<div class="quote-mark">"</div>
|
|
<p>Gute Projekte brauchen klare Strukturen und den Mut, sie anzupassen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- KOMPETENZEN -->
|
|
<section class="kompetenzen" id="kompetenzen">
|
|
<div class="section-inner">
|
|
<span class="section-label">Kompetenzen</span>
|
|
<h2 class="section-title">Was ich mitbringe</h2>
|
|
<p class="section-subtitle">
|
|
Ein breites Kompetenzprofil an der Schnittstelle von Technologie, Organisation und Mensch.
|
|
</p>
|
|
<div class="kompetenz-grid">
|
|
<div class="kompetenz-card">
|
|
<div class="kompetenz-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
|
|
</div>
|
|
<h3>Projektmanagement</h3>
|
|
<p>Planung, Steuerung und Kontrolle komplexer IT-Projekte. Von der Initialisierung bis zum erfolgreichen Abschluss.</p>
|
|
</div>
|
|
<div class="kompetenz-card">
|
|
<div class="kompetenz-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" /></svg>
|
|
</div>
|
|
<h3>Agile / Scrum</h3>
|
|
<p>Scrum, Kanban, SAFe — agile Methoden praxisnah eingesetzt. Iterativ, transparent und mit Fokus auf Wertschöpfung.</p>
|
|
</div>
|
|
<div class="kompetenz-card">
|
|
<div class="kompetenz-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /></svg>
|
|
</div>
|
|
<h3>IT-Strategie</h3>
|
|
<p>Technologieentscheidungen mit Business-Zielen in Einklang bringen. IT-Roadmaps entwickeln und umsetzen.</p>
|
|
</div>
|
|
<div class="kompetenz-card">
|
|
<div class="kompetenz-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" /></svg>
|
|
</div>
|
|
<h3>Digitale Transformation</h3>
|
|
<p>Unternehmen auf dem Weg in die digitale Zukunft begleiten. Prozesse modernisieren, Teams befähigen.</p>
|
|
</div>
|
|
<div class="kompetenz-card">
|
|
<div class="kompetenz-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
|
|
</div>
|
|
<h3>Stakeholder Management</h3>
|
|
<p>Erwartungen managen, Interessen ausbalancieren, alle Beteiligten auf ein gemeinsames Ziel ausrichten.</p>
|
|
</div>
|
|
<div class="kompetenz-card">
|
|
<div class="kompetenz-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" /></svg>
|
|
</div>
|
|
<h3>Change Management</h3>
|
|
<p>Veränderung ist kein Nebeneffekt, sondern Kernkompetenz. Menschen mitnehmen, Widerstände adressieren.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- METHODIK -->
|
|
<section class="methodik" id="methodik">
|
|
<div class="section-inner">
|
|
<span class="section-label">Methodik</span>
|
|
<h2 class="section-title">Wie ich arbeite</h2>
|
|
<p class="section-subtitle">
|
|
Strukturiert, ergebnisorientiert und immer mit dem Menschen im Mittelpunkt.
|
|
</p>
|
|
<div class="methodik-steps">
|
|
<div class="methodik-step">
|
|
<div class="step-number">01</div>
|
|
<h3>Verstehen</h3>
|
|
<p>Jedes Projekt beginnt mit Zuhören. Ich erfasse den Kontext, identifiziere Stakeholder und definiere gemeinsam klare Ziele und Erfolgskriterien — bevor die erste Zeile Code geschrieben wird.</p>
|
|
</div>
|
|
<div class="methodik-step">
|
|
<div class="step-number">02</div>
|
|
<h3>Strukturieren</h3>
|
|
<p>Komplexität wird handhabbar durch die richtige Struktur. Ich schaffe klare Verantwortlichkeiten, transparente Prozesse und passende Frameworks — ob Wasserfall, agil oder hybrid.</p>
|
|
</div>
|
|
<div class="methodik-step">
|
|
<div class="step-number">03</div>
|
|
<h3>Liefern</h3>
|
|
<p>Ergebnisse zählen. Durch iteratives Vorgehen, konsequentes Risikomanagement und enge Abstimmung stelle ich sicher, dass Projekte termingerecht und in Qualität abgeschlossen werden.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TESTIMONIAL -->
|
|
<section style="background: var(--navy); padding: 5rem 2rem; text-align: center;">
|
|
<div style="max-width: 700px; margin: 0 auto;">
|
|
<p style="font-family: 'DM Serif Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--light); font-style: italic; line-height: 1.5;">„Manchmal braucht man Breier.“</p>
|
|
<div style="width: 40px; height: 2px; background: var(--teal); margin: 1.5rem auto;"></div>
|
|
<p style="font-size: 0.85rem; color: var(--grey); letter-spacing: 0.1em;">— Zufriedener Kunde</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- KONTAKT -->
|
|
<section class="kontakt" id="kontakt">
|
|
<div class="section-inner">
|
|
<span class="section-label">Kontakt</span>
|
|
<h2 class="section-title">Lassen Sie uns sprechen</h2>
|
|
<p class="kontakt-text">
|
|
Sie planen ein IT-Projekt oder suchen Unterstützung bei der digitalen Transformation?<br>
|
|
Ich freue mich auf den Austausch.
|
|
</p>
|
|
<a href="mailto:kontakt@matthiasbreier.de" class="kontakt-email">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
|
|
kontakt@matthiasbreier.de
|
|
</a>
|
|
<div class="kontakt-meta">
|
|
<div class="kontakt-meta-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /></svg>
|
|
Deutschland
|
|
</div>
|
|
<div class="kontakt-meta-item">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
|
|
IT Projektmanagement
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="footer-brand">Matthias Breier</div>
|
|
<p>IT Projektmanagement</p>
|
|
</footer>
|
|
|
|
<script>
|
|
const pairs = [
|
|
[document.getElementById('letterE'), document.getElementById('letterA')],
|
|
[document.getElementById('letterI'), document.getElementById('letterAI')]
|
|
];
|
|
setInterval(() => {
|
|
pairs.forEach(([real, ai]) => {
|
|
real.classList.toggle('visible');
|
|
real.classList.toggle('hidden');
|
|
ai.classList.toggle('visible');
|
|
ai.classList.toggle('hidden');
|
|
});
|
|
}, 3000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|