From a29db2563c1e42fc7083f2392f6bb55d951a9525 Mon Sep 17 00:00:00 2001 From: marvinkrausser Date: Wed, 18 Mar 2026 14:07:14 +0100 Subject: [PATCH] zweite version --- index.html | 677 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 585 insertions(+), 92 deletions(-) diff --git a/index.html b/index.html index 2da7a34..bcc481e 100644 --- a/index.html +++ b/index.html @@ -1,109 +1,602 @@ - - Mein Portfolio - + .block-image { + aspect-ratio: 4/3; + background: var(--surface); + border-right: 1px solid var(--border); + display: flex; align-items: center; justify-content: center; + overflow: hidden; position: relative; + } + .content-block.flip .block-image { + border-right: none; + border-left: 1px solid var(--border); + } + + /* Placeholder visuals (replace with real tags) */ + .block-image img { + width: 100%; height: 100%; object-fit: cover; display: block; + } + .placeholder { + width: 100%; height: 100%; + display: flex; flex-direction: column; + align-items: center; justify-content: center; + gap: 10px; color: var(--muted); + } + .placeholder-icon { font-size: 2.4rem; line-height: 1; } + .placeholder-label { font-size: 0.72rem; letter-spacing: 0.06em; } + + .block-text { + padding: 44px 48px; + display: flex; flex-direction: column; justify-content: center; + } + .block-label { + font-size: 0.68rem; font-weight: 500; + letter-spacing: 0.1em; text-transform: uppercase; + color: var(--muted); margin-bottom: 16px; + } + .block-text h3 { + font-family: var(--serif); font-size: 1.25rem; + font-weight: 400; letter-spacing: -0.01em; + line-height: 1.3; margin-bottom: 14px; + } + .block-text p { + font-size: 0.88rem; color: var(--muted); + line-height: 1.8; + } + + /* Links row */ + .links-row { + display: flex; gap: 20px; margin-top: 40px; + } + .text-link { + font-size: 0.84rem; font-weight: 500; color: var(--text); + text-decoration: none; border-bottom: 1px solid var(--border); + padding-bottom: 2px; transition: border-color 0.15s; + } + .text-link:hover { border-color: var(--text); } + .text-link.ghost { color: var(--muted); } + + /* ── HERO ────────────────────────────────────────── */ + .hero-section { + padding: 100px 80px 80px; + border-bottom: 1px solid var(--border); + } + .hero-eyebrow { + font-size: 0.7rem; font-weight: 500; + letter-spacing: 0.12em; text-transform: uppercase; + color: var(--muted); margin-bottom: 24px; + } + .hero-section h1 { + font-family: var(--serif); + font-size: clamp(2.8rem, 5vw, 4.2rem); + font-weight: 400; letter-spacing: -0.025em; + line-height: 1.1; margin-bottom: 28px; max-width: 640px; + } + .hero-section h1 em { font-style: italic; color: var(--muted); } + .hero-desc { + max-width: 460px; color: var(--muted); + font-size: 0.94rem; line-height: 1.8; margin-bottom: 40px; + } + .hero-links { display: flex; gap: 24px; flex-wrap: wrap; } + + /* ── MOBILE ──────────────────────────────────────── */ + .mobile-bar { + display: none; position: sticky; top: 0; z-index: 100; + background: var(--bg); border-bottom: 1px solid var(--border); + padding: 14px 20px; align-items: center; justify-content: space-between; + } + .mobile-logo { font-family: var(--serif); font-size: 1rem; color: var(--text); text-decoration: none; } + .mobile-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-family: var(--sans); font-size: 0.85rem; padding: 4px; } + .mobile-drawer { + display: none; position: fixed; inset: 0; z-index: 200; + background: var(--bg); overflow-y: auto; + padding: 24px 0; flex-direction: column; + } + .mobile-drawer.open { display: flex; } + .mobile-drawer-head { + display: flex; justify-content: space-between; align-items: center; + padding: 0 24px 24px; border-bottom: 1px solid var(--border); margin-bottom: 16px; + } + .mobile-drawer-head span { font-family: var(--serif); font-size: 1rem; } + .mobile-drawer a { + display: block; padding: 10px 24px; + font-size: 0.9rem; color: var(--muted); text-decoration: none; + } + .mobile-drawer a:hover { color: var(--text); } + + @media (max-width: 900px) { + .sidebar { display: none; } + .main { margin-left: 0; } + .mobile-bar { display: flex; } + .hero-section, .project-section { padding: 56px 24px; } + .content-block { grid-template-columns: 1fr; } + .content-block.flip { direction: ltr; } + .block-image { aspect-ratio: 16/9; border-right: none; border-bottom: 1px solid var(--border); } + .content-block.flip .block-image { border-left: none; border-bottom: 1px solid var(--border); } + .block-text { padding: 28px 24px; } + } + -
-

Mein Portfolio

-

Medieninformatik Student | Softwareentwicklung

-
- -
- - -
-

PixelCNN Bildgenerierung

-

- Deep-Learning-Modell zur Bildgenerierung basierend auf der PixelCNN-Architektur, - implementiert in PyTorch. -

- GitHub ansehen -
- - - - -
-

Turnbased Boardgame

-

- Entwicklung eines rundenbasierten Brettspiels mit C# WebSocket-Server, - regelbasierter KI sowie Client und Level-Editor in Unity. -

- GitHub ansehen -
- - - - - -
-

Projektname

-

- Beschreibung deines Projekts. -

- GitHub ansehen -
- - - + +
+ + +
+
+
+ Navigation + +
+
+ + + + +
+ + +
+

Open-Source Developer

+

Dinge bauen,
die bleiben.

+

Ich entwickle Open-Source-Tools, Web-Apps und CLI-Utilities. Jedes Projekt hat eine klare Aufgabe und einen sauberen Code.

+
+ GitHub ↗ + Projekte ansehen +
+
+ + +
+ +
+ + + - + \ No newline at end of file