From 40e09a2e8b46bfd785b5b76eabe731691bfe6adc Mon Sep 17 00:00:00 2001 From: dionyschus Date: Thu, 12 Mar 2026 11:13:13 +0100 Subject: [PATCH] Anpassungen an der Website und Bereinigung --- joel-jonischus.css | 149 ++++++++++++++++++++++++++++++++++++++++++-- joel-jonischus.html | 48 ++++++++++++-- 2 files changed, 188 insertions(+), 9 deletions(-) diff --git a/joel-jonischus.css b/joel-jonischus.css index 8822a60..dbbc44f 100644 --- a/joel-jonischus.css +++ b/joel-jonischus.css @@ -1,9 +1,148 @@ -body { - background-color: #824ce5; - font-family: sans-serif; +/* Grundeinstellungen */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } -h1 { - color: #2c3e50; +html { + scroll-behavior: smooth; +} + +body { + background-color: #ffffff; + color: #1d1d1f; + line-height: 1.5; +} + +.container { + max-width: 1000px; + margin: 0 auto; + padding: 80px 20px; +} + +/* Navigation - Apple Glass Look */ +.navbar { + position: fixed; + top: 0; + width: 100%; + height: 44px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + z-index: 1000; + border-bottom: 0.5px solid rgba(0,0,0,0.1); +} + +.nav-content { + max-width: 1000px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + padding: 0 20px; +} + +.nav-links { + list-style: none; + display: flex; + gap: 25px; +} + +.nav-links a, .logo { + text-decoration: none; + color: #1d1d1f; + font-size: 14px; + font-weight: 400; + opacity: 0.8; + transition: opacity 0.3s; +} + +.nav-links a:hover { + opacity: 1; +} + +/* Hero Section */ +.hero { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; text-align: center; + background-color: #fbfbfd; +} + +.hero-text h1 { + font-size: 56px; + font-weight: 600; + letter-spacing: -0.015em; + margin-bottom: 10px; +} + +.hero-text p { + font-size: 24px; + color: #86868b; +} + +/* About Section */ +.about-section { + text-align: center; + background: white; +} + +.about-section h2 { + font-size: 40px; + margin-bottom: 20px; +} + +.about-section p { + font-size: 21px; + color: #515154; + max-width: 700px; + margin: 0 auto; +} + +/* Gallery - Bento Grid Style */ +.gallery-section { + background-color: #fbfbfd; +} + +.bento-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-auto-rows: 200px; + gap: 20px; + margin-top: 40px; +} + +.grid-item { + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 500; + transition: transform 0.3s ease; +} + +.grid-item:hover { + transform: scale(1.02); +} + +.wide { grid-column: span 2; } +.tall { grid-row: span 2; } + +/* Footer */ +footer { + padding: 40px; + text-align: center; + font-size: 12px; + color: #86868b; +} + +/* Mobile Optimierung */ +@media (max-width: 768px) { + .hero-text h1 { font-size: 40px; } + .wide { grid-column: span 1; } } \ No newline at end of file diff --git a/joel-jonischus.html b/joel-jonischus.html index 9888569..4dcae75 100644 --- a/joel-jonischus.html +++ b/joel-jonischus.html @@ -1,13 +1,53 @@ - + - Document + Joel Jonischus | Portfolio - Was geht denn so? -

Das ist ein einfacher Absatz, über den ich nicht weiter sprechen will.

+ + + +
+
+

Design. Innovation. Joel.

+

Einfachheit ist die höchste Stufe der Vollendung.

+
+
+ +
+
+

Über mich

+

Ich bin ein kreativer Kopf mit einer Leidenschaft für digitale Ästhetik. Mein Ziel ist es, Technologie nicht nur funktional, sondern emotional erlebbar zu machen. Wenn ich nicht gerade an neuen Interfaces feile, finde ich Inspiration in der Architektur und der Stille der Natur.

+
+
+ + + + + \ No newline at end of file