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 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Joel Jonischus | Portfolio</title>
     <link rel="stylesheet" href="joel-jonischus.css">
 </head>
 <body>
-    </h1>Was geht denn so?</h1>
-    <p>Das ist ein einfacher Absatz, über den ich nicht weiter sprechen will.</p>
+
+    <nav class="navbar">
+        <div class="nav-content">
+            <a href="#home" class="logo">Joel</a>
+            <ul class="nav-links">
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About me</a></li>
+                <li><a href="#gallery">Gallery</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <section id="home" class="hero">
+        <div class="hero-text">
+            <h1>Design. Innovation. Joel.</h1>
+            <p>Einfachheit ist die höchste Stufe der Vollendung.</p>
+        </div>
+    </section>
+
+    <section id="about" class="about-section">
+        <div class="container">
+            <h2>Über mich</h2>
+            <p>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.</p>
+        </div>
+    </section>
+
+    <section id="gallery" class="gallery-section">
+        <div class="container">
+            <h2>Gallery</h2>
+            <div class="bento-grid">
+                <div class="grid-item tall" style="background-color: #f2f2f2;"><span>Konzept 01</span></div>
+                <div class="grid-item" style="background-color: #e5e5e5;"><span>Minimalismus</span></div>
+                <div class="grid-item" style="background-color: #d1d1d1;"><span>Struktur</span></div>
+                <div class="grid-item wide" style="background-color: #000; color: #fff;"><span>Night Mode</span></div>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <p>&copy; 2024 Joel Jonischus. Designed with precision.</p>
+    </footer>
+
 </body>
 </html>
\ No newline at end of file
