From 77d847583c2a0610b8c0fbef3758737af21147ee Mon Sep 17 00:00:00 2001 From: JaysonCleve Date: Tue, 14 Apr 2026 14:11:35 +0200 Subject: [PATCH] changes to index.html --- index.html | 1575 +++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 1114 insertions(+), 461 deletions(-) diff --git a/index.html b/index.html index 603eaba..95a7ff7 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - noctura.dev + noctura.dev | Portfolio für Web, Systeme und Infrastruktur + @@ -11,19 +12,23 @@ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { - --bg: #07080f; - --bg2: #0d0f1c; - --bg3: #111428; - --bg4: #171a31; - --surface: rgba(255,255,255,0.04); - --border: rgba(255,255,255,0.07); - --border-hover: rgba(255,255,255,0.14); - --text: #e8eaf2; - --muted: #8d93ad; - --accent: #7c6dfa; - --accent2: #4fd1c5; - --accent3: #f7886a; - --glow: rgba(124,109,250,0.12); + --bg: #05070d; + --bg2: #0b1020; + --bg3: #12192f; + --bg4: #1a2443; + --surface: rgba(255,255,255,0.045); + --surface-strong: rgba(17,22,40,0.88); + --surface-soft: rgba(255,255,255,0.025); + --border: rgba(255,255,255,0.08); + --border-hover: rgba(255,255,255,0.18); + --text: #eef2ff; + --muted: #97a1c3; + --accent: #82a0ff; + --accent2: #67e8c8; + --accent3: #ff9e7a; + --accent4: #c8d3ff; + --glow: rgba(130,160,255,0.14); + --shadow: 0 24px 80px rgba(2,6,23,0.45); --font: 'Syne', sans-serif; --mono: 'DM Mono', monospace; } @@ -31,7 +36,10 @@ html { scroll-behavior: smooth; } body { - background: var(--bg); + background: + radial-gradient(circle at top left, rgba(130,160,255,0.12), transparent 30%), + radial-gradient(circle at 85% 20%, rgba(103,232,200,0.08), transparent 24%), + linear-gradient(180deg, #05070d 0%, #080c16 28%, #0a1020 100%); color: var(--text); font-family: var(--font); line-height: 1.6; @@ -39,7 +47,33 @@ overflow-x: hidden; } - /* --- STAR FIELD --- */ + body::before { + content: ''; + position: fixed; + inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); + background-size: 80px 80px; + mask-image: radial-gradient(circle at center, rgba(0,0,0,0.72), transparent 88%); + pointer-events: none; + opacity: 0.18; + z-index: 0; + } + + ::selection { + background: rgba(130,160,255,0.28); + color: #fff; + } + + a { color: inherit; } + + a:focus-visible, + button:focus-visible { + outline: 2px solid var(--accent2); + outline-offset: 4px; + } + #stars { position: fixed; inset: 0; @@ -47,70 +81,112 @@ z-index: 0; } - /* --- NEBULA GLOW --- */ .nebula { position: fixed; border-radius: 50%; - filter: blur(120px); + filter: blur(140px); pointer-events: none; z-index: 0; } - .nebula-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(124,109,250,0.08) 0%, transparent 70%); top: -100px; left: -100px; } - .nebula-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(79,209,197,0.06) 0%, transparent 70%); bottom: 200px; right: -50px; } - .nebula-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(247,136,106,0.05) 0%, transparent 70%); top: 50%; left: 40%; } - /* --- LAYOUT --- */ + .nebula-1 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(130,160,255,0.1) 0%, transparent 72%); top: -120px; left: -140px; } + .nebula-2 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(103,232,200,0.08) 0%, transparent 72%); bottom: 140px; right: -40px; } + .nebula-3 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,158,122,0.06) 0%, transparent 72%); top: 44%; left: 42%; } + .wrapper { position: relative; z-index: 1; - max-width: 900px; + max-width: 1180px; margin: 0 auto; padding: 0 2rem; } - /* --- NAV --- */ nav { position: fixed; - top: 0; left: 0; right: 0; + top: 0; + left: 0; + right: 0; z-index: 100; - padding: 1.25rem 0; - backdrop-filter: blur(20px); + padding: 1rem 0; + backdrop-filter: blur(22px); border-bottom: 1px solid var(--border); - background: rgba(7,8,15,0.6); + background: rgba(5,7,13,0.62); } + .nav-inner { - max-width: 900px; + max-width: 1180px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; + gap: 1rem; } + .nav-logo { - font-size: 1rem; + display: inline-flex; + align-items: center; + gap: 0.75rem; + font-size: 0.95rem; font-weight: 700; - letter-spacing: 0.05em; + letter-spacing: 0.08em; color: var(--text); text-decoration: none; } + + .nav-logo::before { + content: ''; + width: 10px; + height: 10px; + border-radius: 50%; + background: linear-gradient(135deg, var(--accent2), var(--accent)); + box-shadow: 0 0 18px rgba(103,232,200,0.4); + } + .nav-logo span { color: var(--accent); } - .nav-links { display: flex; gap: 2rem; list-style: none; } + + .nav-links { + display: flex; + gap: 1.5rem; + list-style: none; + padding: 0.5rem 0.85rem; + border: 1px solid var(--border); + border-radius: 999px; + background: rgba(255,255,255,0.025); + } + .nav-links a { - font-size: 0.8rem; + font-size: 0.74rem; font-weight: 500; - letter-spacing: 0.08em; + letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; - transition: color 0.2s; + transition: color 0.2s, transform 0.2s; + } + + .nav-links a:hover { + color: var(--text); + transform: translateY(-1px); } - .nav-links a:hover { color: var(--text); } - /* --- HERO --- */ .hero { - padding: 176px 0 110px; + padding: 164px 0 118px; position: relative; } + + .hero-grid { + display: grid; + grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); + gap: 1.5rem; + align-items: start; + } + + .hero-copy { + position: relative; + padding-right: 1rem; + } + .hero-tag { display: inline-flex; align-items: center; @@ -118,50 +194,62 @@ font-family: var(--mono); font-size: 0.75rem; color: var(--accent2); - letter-spacing: 0.06em; - margin-bottom: 1.1rem; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-bottom: 1.2rem; opacity: 0; animation: fadeUp 0.6s ease forwards 0.2s; } + .hero-tag::before { content: ''; display: inline-block; - width: 6px; height: 6px; + width: 6px; + height: 6px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 8px var(--accent2); animation: pulse 2s ease-in-out infinite; } - @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(0.8)} } + + @keyframes pulse { + 0%,100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.6; transform: scale(0.8); } + } .hero h1 { - max-width: 780px; - font-size: clamp(3.1rem, 8vw, 4.4rem); + max-width: 820px; + font-size: clamp(3.25rem, 8vw, 5.4rem); font-weight: 800; - line-height: 0.96; - letter-spacing: -0.045em; - margin-bottom: 1.25rem; + line-height: 0.92; + letter-spacing: -0.055em; + margin-bottom: 1.4rem; opacity: 0; animation: fadeUp 0.6s ease forwards 0.35s; + text-wrap: balance; } + .hero h1 .line2 { display: block; color: #ffffff; } + .hero h1 .line3 { display: block; - color: var(--accent); + color: var(--accent4); + text-shadow: 0 0 32px rgba(130,160,255,0.16); } .hero-desc { - max-width: 640px; - font-size: 1rem; + max-width: 690px; + font-size: 1.02rem; color: var(--muted); - line-height: 1.75; - margin-bottom: 2rem; + line-height: 1.85; + margin-bottom: 2.2rem; opacity: 0; animation: fadeUp 0.6s ease forwards 0.5s; } + .hero-desc strong { color: var(--text); font-weight: 600; @@ -171,51 +259,69 @@ display: flex; gap: 1rem; flex-wrap: wrap; - margin-bottom: 2.5rem; + margin-bottom: 2.6rem; opacity: 0; animation: fadeUp 0.6s ease forwards 0.65s; } + .btn { display: inline-flex; align-items: center; + justify-content: center; gap: 8px; - padding: 0.7rem 1.4rem; - border-radius: 8px; + padding: 0.9rem 1.35rem; + border-radius: 12px; font-family: var(--font); - font-size: 0.85rem; + font-size: 0.84rem; font-weight: 600; + letter-spacing: 0.01em; text-decoration: none; - transition: all 0.2s; + transition: transform 0.2s, border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s; cursor: pointer; border: none; } + .btn-primary { - background: var(--accent); + background: linear-gradient(135deg, #7094ff, #88a8ff); color: #fff; + box-shadow: 0 16px 40px rgba(112,148,255,0.24); } - .btn-primary:hover { background: #9284fc; transform: translateY(-1px); } + + .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 20px 44px rgba(112,148,255,0.32); + } + .btn-outline { - background: transparent; + background: rgba(255,255,255,0.025); color: var(--text); border: 1px solid var(--border-hover); } - .btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } + + .btn-outline:hover { + border-color: var(--accent); + color: var(--accent4); + transform: translateY(-2px); + } .hero-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 0.9rem; - max-width: 860px; + gap: 1rem; + max-width: 900px; opacity: 0; animation: fadeUp 0.6s ease forwards 0.8s; } + .hero-metric { - padding: 1rem 1.1rem; - background: rgba(255,255,255,0.03); + padding: 1.1rem 1.15rem; + background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)); border: 1px solid var(--border); - border-radius: 14px; - backdrop-filter: blur(12px); + border-radius: 18px; + backdrop-filter: blur(18px); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } + .hero-metric-label { font-family: var(--mono); font-size: 0.62rem; @@ -224,50 +330,237 @@ color: var(--accent2); margin-bottom: 0.45rem; } + .hero-metric-value { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.2rem; } + .hero-metric-copy { font-size: 0.78rem; color: var(--muted); line-height: 1.55; } + .hero-panel { + opacity: 0; + animation: fadeUp 0.6s ease forwards 0.9s; + } + + .presence-card { + position: relative; + overflow: hidden; + background: linear-gradient(180deg, rgba(14,19,36,0.95), rgba(10,13,25,0.92)); + border: 1px solid rgba(255,255,255,0.08); + border-radius: 26px; + padding: 1.35rem; + box-shadow: var(--shadow); + } + + .presence-card::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(130,160,255,0.12), transparent 40%, rgba(103,232,200,0.08)); + pointer-events: none; + } + + .presence-top, + .presence-row, + .availability-list li, + .project-meta, + .project-foot { + position: relative; + z-index: 1; + } + + .presence-top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1rem; + } + + .presence-title { + font-size: 1.1rem; + font-weight: 700; + letter-spacing: -0.02em; + } + + .presence-subtitle { + color: var(--muted); + font-size: 0.82rem; + } + + .presence-badge { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.45rem 0.75rem; + border-radius: 999px; + background: rgba(103,232,200,0.12); + color: var(--accent2); + font-family: var(--mono); + font-size: 0.68rem; + letter-spacing: 0.06em; + text-transform: uppercase; + border: 1px solid rgba(103,232,200,0.22); + } + + .presence-badge::before { + content: ''; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--accent2); + box-shadow: 0 0 10px rgba(103,232,200,0.55); + } + + .presence-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.9rem; + margin-bottom: 1rem; + } + + .presence-row { + padding: 0.95rem; + border-radius: 18px; + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.06); + } + + .presence-label { + display: block; + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--accent2); + margin-bottom: 0.45rem; + } + + .presence-value { + font-size: 0.96rem; + font-weight: 700; + letter-spacing: -0.02em; + margin-bottom: 0.2rem; + } + + .presence-copy { + font-size: 0.78rem; + color: var(--muted); + line-height: 1.55; + } + + .availability-list { + list-style: none; + display: grid; + gap: 0.75rem; + padding-top: 0.2rem; + } + + .availability-list li { + padding: 0.85rem 0.95rem; + border-radius: 16px; + background: rgba(255,255,255,0.025); + border: 1px solid rgba(255,255,255,0.055); + color: var(--muted); + font-size: 0.82rem; + } + + .availability-list strong { + display: block; + color: var(--text); + font-size: 0.82rem; + margin-bottom: 0.15rem; + } + + section { padding: 88px 0; } + + .section-label { + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--accent2); + margin-bottom: 0.75rem; + } + + .section-title { + font-size: clamp(1.8rem, 3vw, 2.65rem); + font-weight: 700; + letter-spacing: -0.03em; + margin-bottom: 0.65rem; + text-wrap: balance; + } + + .section-subtitle { + color: var(--muted); + font-size: 1rem; + margin-bottom: 3rem; + max-width: 720px; + } + + .section-divider { + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05) 18%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 82%, transparent); + margin-bottom: 0; + } + .intro-panel { display: grid; - grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); + grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 1rem; align-items: stretch; } + .intro-copy, .intro-notes { - background: var(--surface); + background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)); border: 1px solid var(--border); - border-radius: 18px; - padding: 1.6rem; + border-radius: 24px; + padding: 1.75rem; + box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } + .intro-copy p { color: var(--muted); + font-size: 0.98rem; margin-bottom: 1rem; } + .intro-copy p:last-child { margin-bottom: 0; } + .intro-notes { - background: linear-gradient(180deg, rgba(23,26,49,0.92), rgba(10,11,20,0.9)); + background: linear-gradient(180deg, rgba(26,36,67,0.82), rgba(10,13,25,0.92)); } + + .hero-card-label { + font-family: var(--mono); + font-size: 0.68rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--accent2); + margin-bottom: 1rem; + } + .note-list { display: grid; gap: 0.85rem; list-style: none; } + .note-list li { padding-left: 1rem; position: relative; color: var(--muted); font-size: 0.88rem; } + .note-list li::before { content: ''; position: absolute; @@ -280,84 +573,105 @@ box-shadow: 0 0 10px rgba(247,136,106,0.5); } - /* --- SECTION --- */ - section { padding: 80px 0; } - .section-label { - font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.15em; - text-transform: uppercase; - color: var(--accent2); - margin-bottom: 0.75rem; - } - .section-title { - font-size: clamp(1.6rem, 3vw, 2.2rem); - font-weight: 700; - letter-spacing: -0.02em; - margin-bottom: 0.5rem; - } - .section-subtitle { - color: var(--muted); - font-size: 0.95rem; - margin-bottom: 3rem; - } - .section-divider { - height: 1px; - background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent); - margin-bottom: 80px; + .principles-grid { + margin-top: 1rem; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + } + + .principle-card { + padding: 1.2rem; + border-radius: 18px; + background: var(--surface-soft); + border: 1px solid var(--border); + } + + .principle-index { + font-family: var(--mono); + font-size: 0.68rem; + color: var(--accent2); + letter-spacing: 0.12em; + text-transform: uppercase; + margin-bottom: 0.6rem; + } + + .principle-title { + font-size: 0.98rem; + font-weight: 700; + margin-bottom: 0.45rem; + } + + .principle-copy { + font-size: 0.83rem; + color: var(--muted); + line-height: 1.6; } - /* --- SKILLS --- */ .skills-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; - background: var(--border); + background: rgba(255,255,255,0.06); border: 1px solid var(--border); - border-radius: 16px; + border-radius: 24px; overflow: hidden; + box-shadow: var(--shadow); } + .skill-card { - background: var(--bg); - padding: 2rem; - transition: background 0.25s; + background: rgba(7,10,18,0.98); + padding: 2rem 1.85rem; + transition: background 0.25s, transform 0.25s; position: relative; } - .skill-card:hover { background: var(--bg3); } + + .skill-card:hover { + background: var(--bg3); + transform: translateY(-3px); + } + .skill-card::before { content: ''; position: absolute; - top: 0; left: 0; right: 0; - height: 2px; + top: 0; + left: 0; + right: 0; + height: 3px; opacity: 0; transition: opacity 0.3s; } + .skill-card:hover::before { opacity: 1; } - .skill-card.purple::before { background: linear-gradient(90deg, var(--accent), transparent); } - .skill-card.teal::before { background: linear-gradient(90deg, var(--accent2), transparent); } - .skill-card.orange::before { background: linear-gradient(90deg, var(--accent3), transparent); } + .skill-card.purple::before { background: linear-gradient(90deg, var(--accent), transparent); } + .skill-card.teal::before { background: linear-gradient(90deg, var(--accent2), transparent); } + .skill-card.orange::before { background: linear-gradient(90deg, var(--accent3), transparent); } .skill-icon { font-size: 1.6rem; margin-bottom: 1rem; display: block; } + .skill-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; } + .skill-desc { - font-size: 0.82rem; + font-size: 0.84rem; color: var(--muted); line-height: 1.6; - margin-bottom: 1.25rem; + margin-bottom: 1.35rem; } + .skill-tags { display: flex; flex-wrap: wrap; gap: 6px; } + .tag { font-family: var(--mono); font-size: 0.67rem; @@ -367,71 +681,158 @@ color: var(--muted); letter-spacing: 0.03em; } - .tag.purple { border-color: rgba(124,109,250,0.3); color: rgba(124,109,250,0.8); background: rgba(124,109,250,0.06); } - .tag.teal { border-color: rgba(79,209,197,0.3); color: rgba(79,209,197,0.8); background: rgba(79,209,197,0.06); } - .tag.orange { border-color: rgba(247,136,106,0.3); color: rgba(247,136,106,0.8); background: rgba(247,136,106,0.06); } - /* --- PROJECTS --- */ + .tag.purple { border-color: rgba(130,160,255,0.3); color: rgba(130,160,255,0.85); background: rgba(130,160,255,0.08); } + .tag.teal { border-color: rgba(103,232,200,0.3); color: rgba(103,232,200,0.85); background: rgba(103,232,200,0.08); } + .tag.orange { border-color: rgba(255,158,122,0.3); color: rgba(255,158,122,0.85); background: rgba(255,158,122,0.08); } + .projects-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 16px; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; } + .project-card { - background: var(--surface); + position: relative; + overflow: hidden; + background: linear-gradient(180deg, rgba(16,21,38,0.94), rgba(9,12,23,0.96)); border: 1px solid var(--border); - border-radius: 14px; - padding: 1.5rem; - transition: border-color 0.25s, transform 0.2s; + border-radius: 24px; + padding: 1.55rem; + transition: border-color 0.25s, transform 0.22s, box-shadow 0.22s; text-decoration: none; color: var(--text); display: flex; flex-direction: column; - gap: 0.75rem; - cursor: pointer; + gap: 0.95rem; + min-height: 100%; } + + .project-card::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(130,160,255,0.12), transparent 46%, rgba(103,232,200,0.06)); + opacity: 0; + transition: opacity 0.24s; + pointer-events: none; + } + .project-card:hover { border-color: var(--border-hover); - transform: translateY(-2px); + transform: translateY(-4px); + box-shadow: var(--shadow); } + + .project-card:hover::before { opacity: 1; } + .project-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } + .project-icon { - font-size: 1.4rem; + width: 48px; + height: 48px; + display: inline-grid; + place-items: center; + border-radius: 14px; + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.06); + font-size: 1.1rem; line-height: 1; - } - .project-arrow { - color: var(--muted); - font-size: 0.9rem; - transition: color 0.2s, transform 0.2s; flex-shrink: 0; } + + .project-arrow { + color: var(--muted); + font-size: 1rem; + transition: color 0.2s, transform 0.2s; + display: inline-block; + } + .project-card:hover .project-arrow { color: var(--accent); transform: translate(2px,-2px); } + .project-eyebrow { font-family: var(--mono); font-size: 0.66rem; color: var(--accent2); letter-spacing: 0.08em; text-transform: uppercase; + margin-bottom: 0.15rem; } + .project-name { - font-size: 0.95rem; + font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; } + .project-desc { - font-size: 0.8rem; + font-size: 0.85rem; color: var(--muted); - line-height: 1.55; + line-height: 1.7; flex: 1; } + + .project-meta { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } + + .project-pill { + font-family: var(--mono); + font-size: 0.67rem; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: 0.38rem 0.55rem; + border-radius: 999px; + background: rgba(255,255,255,0.045); + border: 1px solid rgba(255,255,255,0.08); + color: var(--accent4); + } + + .project-points { + list-style: none; + display: grid; + gap: 0.6rem; + } + + .project-points li { + position: relative; + padding-left: 1rem; + color: var(--muted); + font-size: 0.81rem; + line-height: 1.55; + } + + .project-points li::before { + content: ''; + position: absolute; + top: 0.58rem; + left: 0; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--accent2); + box-shadow: 0 0 12px rgba(103,232,200,0.5); + } + + .project-foot { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-top: auto; + padding-top: 0.25rem; + } + .project-status { display: inline-flex; align-items: center; @@ -440,34 +841,75 @@ font-size: 0.65rem; letter-spacing: 0.04em; } + .status-dot { - width: 5px; height: 5px; + width: 5px; + height: 5px; border-radius: 50%; flex-shrink: 0; } - .status-live { background: #4ade80; box-shadow: 0 0 6px #4ade80; } - .status-wip { background: #facc15; box-shadow: 0 0 6px #facc15; } - .status-planned{ background: var(--muted); } - /* --- SNAPSHOT --- */ + .status-live { background: #4ade80; box-shadow: 0 0 6px #4ade80; } + .status-wip { background: #facc15; box-shadow: 0 0 6px #facc15; } + .status-planned { background: var(--muted); } + + .project-linktext { + font-family: var(--mono); + font-size: 0.72rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--accent4); + } + + .proof-band { + margin-top: 1.2rem; + padding: 1.2rem 1.3rem; + border-radius: 20px; + background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025)); + border: 1px solid var(--border); + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + } + + .proof-item { padding-right: 0.5rem; } + + .proof-label { + font-family: var(--mono); + font-size: 0.66rem; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--accent2); + margin-bottom: 0.45rem; + } + + .proof-copy { + font-size: 0.84rem; + color: var(--muted); + line-height: 1.6; + } + .snapshot-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 12px; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1rem; } + .snapshot-card { - background: var(--surface); + background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025)); border: 1px solid var(--border); - border-radius: 10px; - padding: 1.1rem 1.25rem; - min-height: 148px; + border-radius: 18px; + padding: 1.2rem 1.25rem; + min-height: 172px; transition: border-color 0.2s, background 0.2s, transform 0.2s; } + .snapshot-card:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.06); - transform: translateY(-2px); + transform: translateY(-3px); } + .snapshot-kicker { font-family: var(--mono); font-size: 0.66rem; @@ -476,30 +918,57 @@ color: var(--accent2); margin-bottom: 0.65rem; } + .snapshot-value { - font-size: 1.4rem; + font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.4rem; } + .snapshot-desc { - font-size: 0.82rem; + font-size: 0.83rem; color: var(--muted); line-height: 1.6; } - /* --- CONTACT --- */ .contact-box { - background: linear-gradient(180deg, rgba(17,20,40,0.95), rgba(10,12,24,0.92)); + position: relative; + overflow: hidden; + background: linear-gradient(180deg, rgba(20,27,50,0.95), rgba(9,12,23,0.94)); border: 1px solid var(--border); - border-radius: 20px; - padding: 3rem; + border-radius: 28px; + padding: 3.25rem; text-align: center; + box-shadow: var(--shadow); + } + + .contact-box::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at top, rgba(130,160,255,0.2), transparent 42%); + pointer-events: none; + } + + .contact-box > * { + position: relative; + z-index: 1; + } + + .contact-box h2 { + font-size: clamp(2rem, 4vw, 2.8rem); + font-weight: 800; + margin-bottom: 0.6rem; + letter-spacing: -0.03em; + } + + .contact-box p { + color: var(--muted); + max-width: 620px; + margin: 0 auto 2rem; } - .contact-box h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; } - .contact-box p { color: var(--muted); margin-bottom: 2rem; } - /* --- FOOTER --- */ footer { border-top: 1px solid var(--border); padding: 2rem 0; @@ -507,8 +976,9 @@ font-size: 0.7rem; color: var(--muted); } + .footer-inner { - max-width: 900px; + max-width: 1180px; margin: 0 auto; padding: 0 2rem; display: flex; @@ -518,341 +988,524 @@ gap: 1rem; } - /* --- ANIMATIONS --- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } + to { opacity: 1; transform: translateY(0); } } + .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } + .reveal.visible { opacity: 1; transform: none; } - @media (max-width: 600px) { - .nav-links { display: none; } - .hero { padding: 120px 0 60px; } - .contact-box { padding: 2rem 1.5rem; } + @media (max-width: 1040px) { + .hero-grid, + .intro-panel, + .projects-grid, + .skills-grid, + .snapshot-grid, + .principles-grid, + .proof-band { + grid-template-columns: 1fr; + } + + .hero-copy { padding-right: 0; } + + .presence-grid, + .hero-strip { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } - @media (max-width: 860px) { + @media (max-width: 720px) { + .nav-links { display: none; } + + .wrapper, + .nav-inner, + .footer-inner { + padding: 0 1.25rem; + } + + .hero { padding: 124px 0 72px; } + section { padding: 72px 0; } + .hero-strip, - .intro-panel { + .presence-grid { grid-template-columns: 1fr; } + + .contact-box { padding: 2.25rem 1.35rem; } + .project-foot { align-items: flex-start; flex-direction: column; } + } + + @media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .reveal, + .hero-tag, + .hero h1, + .hero-desc, + .hero-actions, + .hero-strip, + .hero-panel { + opacity: 1; + transform: none; + animation: none; + } } + +
+
+
- - + - -
-
-
+
+
+
+
+
Persönliches Portfolio / Web, Systeme, Infrastruktur
+

+ Interfaces mit Haltung. + Systeme mit Substanz. + Umsetzungen, die man versteht. +

+

+ Ich baue digitale Arbeiten, die nicht bei schöner Oberfläche aufhören. Mich interessieren + klare Nutzerführung, saubere technische Entscheidungen und Betrieb ohne Blackbox. + Deshalb denke ich Frontend, Backend, Linux und Deployment als zusammenhängendes System. +

+
+ Arbeiten ansehen + Kontakt aufnehmen +
+
+
+
Fokus
+
Vom Interface bis zum Betrieb
+

Nicht nur Screens gestalten, sondern komplette technische Linien sauber zu Ende führen.

+
+
+
Arbeitsweise
+
Präzise, direkt, nachvollziehbar
+

Ich bevorzuge klare Entscheidungen, echte Umsetzungen und Dokumentation, die auch später noch Sinn ergibt.

+
+
+
Stack
+
HTML, CSS, JavaScript, Linux, Docker
+

Breit genug für komplette Projekte, fokussiert genug für gute Details und wartbare Ergebnisse.

+
+
+
+ +
+
- - - -
-
-
Persönliches Portfolio / Web & Infrastruktur
-

- Web entwickeln. - Systeme verstehen. - Sauber bauen. -

-

- Ich arbeite an Projekten, die nicht nur gut aussehen, sondern auch technisch nachvollziehbar aufgebaut sind. - Frontend, Backend, Linux und Hosting gehören für mich zusammen. -

-
- Projekte ansehen - Kontakt +
+
+ noctura.dev - persönliches Portfolio mit eigener Infrastruktur + HTML · CSS · JavaScript · Debian 12
-
-
-
Fokus
-
Frontend bis Deployment
-

Ich denke nicht nur in Screens, sondern in vollständigen Umsetzungen.

-
-
-
Arbeitsweise
-
Direkt und praktisch
-

Lieber echte Projekte und klare Entscheidungen als Buzzwords und leere Claims.

-
-
-
Stack
-
HTML, CSS, JS, Linux, Docker
-

Genug Breite, um Interfaces, Services und Betrieb zusammen zu denken.

-
-
-
+ -
+ + + function drawStars() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + stars.forEach((star) => { + star.t += 0.008 * star.s; + const opacity = star.o * (0.62 + 0.38 * Math.sin(star.t)); + ctx.beginPath(); + ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2); + ctx.fillStyle = `rgba(210,220,255,${opacity})`; + ctx.fill(); + }); + animationId = requestAnimationFrame(drawStars); + } + + window.addEventListener('resize', resize); + resize(); + + if (!reducedMotion) { + drawStars(); + } else { + ctx.clearRect(0, 0, canvas.width, canvas.height); + } + + const reveals = document.querySelectorAll('.reveal'); + if (!reducedMotion) { + const io = new IntersectionObserver((entries) => { + entries.forEach((entry, index) => { + if (entry.isIntersecting) { + setTimeout(() => entry.target.classList.add('visible'), index * 90); + io.unobserve(entry.target); + } + }); + }, { threshold: 0.14 }); + + reveals.forEach((el) => io.observe(el)); + } else { + reveals.forEach((el) => el.classList.add('visible')); + } + + window.addEventListener('beforeunload', () => { + if (animationId) cancelAnimationFrame(animationId); + }); +