diff --git a/assets/myPhoto.jpeg b/assets/myPhoto.jpeg
new file mode 100644
index 0000000..36df7a4
Binary files /dev/null and b/assets/myPhoto.jpeg differ
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..04f94cc
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,331 @@
+/* =========================================
+   Obai Albeek – Portfolio Styles (Dark)
+   Palette: Onyx + Jade  |  v2
+   ========================================= */
+
+/* ---------- CSS Variables ---------- */
+:root{
+  --bg: #0E1116;           /* Onyx (Seitenhintergrund) */
+  --surface: #101721;      /* Dunkle Card/Fläche */
+  --surface-2: #0B111A;    /* noch dunklere Fläche */
+  --text: #E6E9EF;         /* Primärtext hell */
+  --muted: #A8B0BF;        /* Sekundärtext */
+  --line: rgba(255,255,255,.08);
+
+  --accent: #12B3A4;       /* Jade/Türkis */
+  --accent-ink: #061014;   /* Text auf Akzent (dunkel, angenehmer als weiß) */
+
+  --radius: 22px;
+  --shadow: 0 16px 40px rgba(0,0,0,.55);
+  --shadow-sm: 0 8px 24px rgba(0,0,0,.45);
+
+  --container: 1100px;
+  --space-1: .25rem;
+  --space-2: .5rem;
+  --space-3: .75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-7: 2rem;
+  --space-8: 2.5rem;
+  --space-9: 3rem;
+}
+
+/* ---------- Reset & Base ---------- */
+*,
+*::before,
+*::after{ box-sizing: border-box; }
+html, body{ height: 100%; scroll-behavior: smooth; }
+
+body{
+  margin: 0;
+  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(900px 600px at 20% -10%, #121925 0%, transparent 55%),
+    radial-gradient(1100px 700px at 110% -20%, #0F1721 0%, transparent 60%),
+    var(--bg);
+  line-height: 1.6;
+}
+
+:focus-visible{
+  outline: 3px solid color-mix(in oklab, var(--accent), white 15%);
+  outline-offset: 2px;
+}
+
+.container{
+  max-width: var(--container);
+  margin-inline: auto;
+  padding-inline: var(--space-7);
+}
+
+/* ---------- Sticky Topbar (Nav rechts, Name links) ---------- */
+.topbar{
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  display: flex;                 /* NEU: Flex-Layout */
+  align-items: center;
+  justify-content: space-between;/* sorgt dafür, dass Nav ganz rechts sitzt */
+  padding: var(--space-4) var(--space-7);
+  backdrop-filter: saturate(1.05) blur(8px);
+  background: color-mix(in oklab, var(--bg), black 20% / 65%);
+  border-bottom: 1px solid var(--line);
+}
+
+/* Brand / Name links */
+.topbar .brand{
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  text-decoration: none;
+}
+.brand-mark{
+  display: inline-grid;
+  place-items: center;
+  width: 36px; height: 36px;
+  border-radius: 12px;
+  background: var(--accent);
+  color: var(--accent-ink);
+  font-weight: 800;
+  letter-spacing: .5px;
+  box-shadow: 0 8px 20px color-mix(in oklab, var(--accent), black 65%);
+}
+.brand-text{
+  color: var(--text);
+  font-weight: 800;
+  font-size: 1.08rem;            /* Name deutlicher sichtbar */
+  letter-spacing: .2px;
+}
+
+/* Nav ganz rechts */
+.nav{
+  margin-left: auto;             /* bleibt als Absicherung */
+  display: flex;
+  gap: .6rem;
+  align-items: center;
+}
+.nav-link{
+  --pad-x: 1rem;
+  display: inline-block;
+  padding: .55rem var(--pad-x);
+  text-decoration: none;
+  color: var(--text);
+  background: rgba(255,255,255,.03);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
+  box-shadow: var(--shadow-sm);
+}
+.nav-link:hover{
+  transform: translateY(-1px);
+  background: rgba(255,255,255,.06);
+  border-color: rgba(255,255,255,.12);
+}
+.nav-link.cta{
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-color: transparent;
+  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent), black 58%);
+}
+
+/* ---------- Hero ---------- */
+.hero{ padding: clamp(3rem, 5vw, 5rem) var(--space-7); }
+
+.hero-card{
+  position: relative;
+  display: grid;
+  grid-template-columns: 1.1fr 1.4fr;
+  gap: var(--space-8);
+  align-items: center;
+  max-width: var(--container);
+  margin: 0 auto;
+  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in oklab, var(--surface), black 8%) 100%);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: clamp(1.25rem, 3vw, 2rem);
+  box-shadow: var(--shadow);
+}
+
+.hero-media{ position: relative; min-height: 240px; }
+
+.hero-photo{
+  position: absolute;
+  inset: auto 0 0 50%;
+  transform: translate(-50%, 18%) scale(1.02);
+  width: min(320px, 78%);
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 10px solid var(--surface);
+  /* dezentes Teal-Glow */
+  box-shadow:
+    0 0 0 10px color-mix(in oklab, var(--accent), transparent 85%),
+    0 26px 60px color-mix(in oklab, var(--accent), black 70%);
+  background: #111;
+}
+
+/* Textblock */
+.kicker{ margin: 0 0 .25rem 0; color: var(--muted); letter-spacing: .4px; }
+.title{
+  margin: 0 0 .35rem 0;
+  font-size: clamp(2rem, 5vw, 3rem);
+  line-height: 1.15;
+  color: var(--text);
+}
+.subtitle{ margin: 0 0 var(--space-7) 0; color: var(--muted); }
+
+/* ---------- Buttons ---------- */
+.btn{
+  --px: 1.1rem;
+  display: inline-block;
+  padding: .75rem var(--px);
+  border-radius: 999px;
+  text-decoration: none;
+  font-weight: 800;
+  line-height: 1;
+  border: 1px solid transparent;
+  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
+  cursor: pointer;
+}
+.btn:hover{ transform: translateY(-1px); }
+
+.btn.primary{
+  background: var(--accent);
+  color: var(--accent-ink);
+  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent), black 58%);
+}
+.btn.ghost{
+  background: rgba(255,255,255,.04);
+  color: var(--text);
+  border-color: var(--line);
+}
+.btn.small{
+  padding: .55rem .9rem;
+  font-weight: 700;
+}
+
+/* ---------- Social ---------- */
+.social{ display:flex; gap:.5rem; margin:0; padding:0; list-style:none; }
+.iconlink{
+  display: inline-grid;
+  place-items: center;
+  width: 40px; height: 40px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: rgba(255,255,255,.03);
+  color: var(--text);
+  text-decoration: none;
+  box-shadow: var(--shadow-sm);
+}
+.iconlink:hover{
+  transform: translateY(-1px);
+  background: rgba(255,255,255,.06);
+}
+
+/* ---------- Sections ---------- */
+.section{ padding: clamp(2.5rem, 5vw, 4rem) 0; scroll-margin-top: 90px; }
+.section h2{ font-size: clamp(1.6rem, 3.4vw, 2rem); margin: 0 0 var(--space-5) 0; }
+
+/* About */
+.about .highlights{
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: .5rem;
+  padding: 0; margin: var(--space-6) 0 0 0;
+  list-style: "✓  ";
+}
+.about .highlights li{ padding-left: .4rem; color: var(--text); }
+
+/* Skills */
+.skills .skill-grid{
+  display: grid;
+  gap: var(--space-6);
+  grid-template-columns: repeat(4, 1fr);
+}
+.skill{
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) - 6px);
+  padding: var(--space-7);
+  box-shadow: var(--shadow-sm);
+}
+.skill h3{ margin: 0 0 .35rem 0; }
+.skill p{ color: var(--muted); margin: 0; }
+
+/* Projects */
+.project-list{
+  display: grid;
+  gap: var(--space-6);
+  grid-template-columns: repeat(3, 1fr);
+}
+.project-card{
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: calc(var(--radius) - 6px);
+  padding: var(--space-7);
+  display: grid;
+  gap: .9rem;
+  box-shadow: var(--shadow-sm);
+}
+.project-card .meta{ color: var(--muted); margin: .25rem 0 0 0; }
+.project-actions{ display: flex; gap: .5rem; }
+
+/* Kontakt */
+.contact .contact-form{
+  margin-top: var(--space-6);
+  display: grid;
+  gap: var(--space-5);
+  grid-template-columns: 1fr 1fr;
+}
+.field{ display: grid; gap: .35rem; }
+.field:nth-child(3){ grid-column: 1 / -1; }
+label{ font-weight: 700; color: var(--text); }
+input, textarea{
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: .85rem 1rem;
+  font: inherit;
+  background: #0A0F16;
+  color: var(--text);
+  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
+}
+input::placeholder, textarea::placeholder{ color: #8A93A5; }
+input:focus, textarea:focus{
+  border-color: color-mix(in oklab, var(--accent), white 15%);
+  box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), black 75%);
+}
+
+/* Footer */
+.footer{
+  border-top: 1px solid var(--line);
+  background: #0A0F16;
+  padding: var(--space-6) 0;
+  text-align: center;
+  color: var(--muted);
+}
+
+/* ---------- Responsive ---------- */
+@media (max-width: 1000px){
+  .hero-card{
+    grid-template-columns: 1fr;
+    padding-top: clamp(2rem, 6vw, 3rem);
+  }
+  .hero-photo{
+    position: static;
+    display: block;
+    margin: -3.5rem auto 0 auto;
+    transform: none;
+    width: 180px;
+  }
+  .skills .skill-grid{ grid-template-columns: repeat(2, 1fr); }
+  .project-list{ grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 640px){
+  .nav{ display: none; } /* optional: auf sehr klein ausblenden */
+  .container{ padding-inline: var(--space-5); }
+  .project-list, .skills .skill-grid{ grid-template-columns: 1fr; }
+  .contact .contact-form{ grid-template-columns: 1fr; }
+}
diff --git a/html/myPortfolio.html b/html/myPortfolio.html
index d090b57..2913eba 100644
--- a/html/myPortfolio.html
+++ b/html/myPortfolio.html
@@ -3,7 +3,7 @@
     <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Obai Albeek | Portfolio</title>
+    <title>Obai Albek | Portfolio</title>
     <meta name="description" content="Portfolio von Obai Albeek - Informatik Student, Java Entwickler, Webentwicklung (HTML, CSS, JavaScript, PHP).">
     <meta name="keywords" content="Obai Albeek, Portfolio, Informatik, Java, Webentwicklung, HTML, CSS, JavaScript, PHP, Projekte">
     <meta name="author" content="Obai Albeek">
@@ -14,91 +14,179 @@
     <meta property="og:url" content="https://deine-portfolio-url.com">
     <meta property="og:type" content="website">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../css/style.css">
     </head>
 
     <body>
-        <nav>
-            <h1>Obai Albek</h1>
-            <ul>
-                <li>Home</li>
-                <li>About</li>
-                <li>Projects</li>
-                <li>Contacts</li>
-            </ul>
-        </nav>
-        <header>
-            <div class="home">
-                <p>Hello <span>.</span> </p>
-                <p>_________ <span>I'm  Obai Albek</span> </p>
-                <p>And I'm a <span>Software Developer</span></p>
-                <div class="social">
-                    <span class="facebook"></span>
-                    <span class="linkedin"></span>
-                    <span class="github"></span>
-                    <span class="instergramm"></span>
-                </div>
-                <div class="cv">
-                    <a href="#">Download my CV</a>
-                </div>
-            </div>
-        </header>
+  <!-- Sticky Topbar -->
+  <header class="topbar" role="banner">
+    <a class="brand" href="#home" aria-label="Start">
+      <span class="brand-mark">OA</span><span class="brand-text">Obai Albeek</span>
+    </a>
 
-        <main>
-            <div class="about">
-                <div class="skills">
-                    <p>Skills & journy</p>
-                </div>
-                <div class="aboutMe">
-                    <p>
-                        Hey there! I'm Obai Albeek, a computer science student based in Mannheim, Germany.  
-                        I specialize in software development with a strong focus on <span>Java </span> and<span>object-oriented programming</span> , but I also enjoy working with <span>C, C++, Go, and JavaScript</span>.  
-                        In addition, I have experience in <span>web development</span> using <span>HTML, CSS, JavaScript, PHP, and SQL</span>, and I like building both frontend and backend projects.  
+    <nav class="nav" aria-label="Hauptnavigation">
+      <a class="nav-link" href="#about">Über mich</a>
+      <a class="nav-link" href="#skills">Skills</a>
+      <a class="nav-link" href="#projects">Projekte</a>
+      <a class="nav-link cta" href="#contact">Kontakt</a>
+    </nav>
+  </header>
 
-                        I'm always curious to learn new technologies and apply them to real-world problems.  
-                        My goal is to combine clean code with creative solutions to design applications that are both useful and user-friendly.  
-                    </p>
-                </div>
-                <div class="programming">
-                    <p>Programminglangauge</p>
-                    <ul>
-                        <li>Java</li>
-                        <li>C++</li>
-                        <li>GO</li>
-                        <li>Haskel</li>
-                    </ul>
-                </div>
-                <div class="webDeveloping">
-                    <p>Web Developing</p>
-                    <ul>
-                        <li>HTML5</li>
-                        <li>CSS3</li>
-                        <li>JavaScript</li>
-                        <li>React</li>
-                        <li>PHP</li>
-                        <li>JSON/XML</li>
-                    </ul>
-                </div>
-                <div class="database">
-                    <p>Database</p>
-                    <ul>
-                        <li>SQL(MySQL/MariaDB)</li>
-                        <li>JPA/Hibernate</li>
-                    </ul>
-                </div>
-                <div class="tools">
-                    <p>Tools & DevOps</p>
-                    <ul>
-                        <li>Git</li>
-                        <li>Github</li>
-                        <li>Docker</li>
-                        <li>Linux</li>
-                        <li>Windows</li>
-                    </ul>
-                </div>
+  <!-- Hero Section (Card + Overlap Image) -->
+  <main id="home" class="hero" role="main">
+    <div class="hero-card" aria-labelledby="intro-title">
+      <div class="hero-media">
+        <!-- Bild-Link absichtlich leer lassen -->
+        <img class="hero-photo" src="../assets/myPhoto.jpeg" alt="Porträt von Obai Albeek">
+      </div>
+
+      <div class="hero-copy">
+        <p class="kicker">Hallo, ich bin</p>
+        <h1 id="intro-title" class="title">Obai Albek</h1>
+        <p class="subtitle">
+          Informatik-Student & Java-Entwickler · Web (HTML, CSS, JavaScript, PHP, JQuery, React)
+        </p>
+
+        <div class="actions">
+          <a class="btn primary" href="#projects">Mein Lebenslauf</a>
+          <a class="btn ghost" href="#contact">Mit mir zusammenarbeiten</a>
+        </div>
+
+        <ul class="social" aria-label="Social Links">
+          <li><a class="iconlink" href="#" aria-label="E-Mail">@
+          </a></li>
+          <li><a class="iconlink" href="#" aria-label="GitHub">
+            <span aria-hidden="true">GH</span>
+          </a></li>
+          <li><a class="iconlink" href="#" aria-label="LinkedIn">
+            <span aria-hidden="true">in</span>
+          </a></li>
+        </ul>
+      </div>
+    </div>
+  </main>
+
+  <!-- About Section -->
+  <section id="about" class="section about">
+    <div class="container">
+      <h2>Über mich</h2>
+      <p>
+        Ich studiere Informatik an der TH&nbsp;Mannheim und baue saubere,
+        wartbare Software. In Java fühle ich mich wie zu Hause
+        (OOP, Collections, Streams). Im Web arbeite ich gern full-stack
+        mit HTML/CSS/JS und PHP (+SQL).
+      </p>
+      <ul class="highlights">
+        <li>Fokus: Java-Backend & Web-Apps</li>
+        <li>Interesse: Datenstrukturen & Algorithmen mit Visualisierungen</li>
+        <li>Team-Prozesse: Scrum, saubere Git-Workflows, Tests</li>
+      </ul>
+    </div>
+  </section>
+
+  <!-- Skills Section -->
+  <section id="skills" class="section skills" aria-labelledby="skills-title">
+    <div class="container">
+      <h2 id="skills-title">Skills</h2>
+      <div class="skill-grid">
+        <article class="skill">
+          <h3>Java</h3>
+          <p>OOP, Streams, Collections, JDBC/JPA, Testing</p>
+        </article>
+        <article class="skill">
+          <h3>Web</h3>
+          <p>HTML5, CSS3, JavaScript (DOM, JSON), PHP, SQL</p>
+        </article>
+        <article class="skill">
+          <h3>Tools</h3>
+          <p>Git, Linux/Terminal, Docker-Grundlagen, Figma</p>
+        </article>
+        <article class="skill">
+          <h3>Konzepte</h3>
+          <p>REST, MVC, Architektur-Basics (Facade/Domain/Controller)</p>
+        </article>
+      </div>
+    </div>
+  </section>
+
+  <!-- Projects Section -->
+  <section id="projects" class="section projects" aria-labelledby="projects-title">
+    <div class="container">
+      <h2 id="projects-title">Ausgewählte Projekte</h2>
+
+      <div class="project-list">
+        <article class="project-card">
+          <div class="project-meta">
+            <h3>Bibliotheksverwaltung (Java)</h3>
+            <p class="meta">OOP · JDBC/JPA · MVC</p>
+          </div>
+          <p>Ausleihe/Retouren, Gebührenlogik, Admin-Zahlungen, Katalog.</p>
+          <div class="project-actions">
+            <a class="btn small" href="#" target="_blank" rel="noopener">Code</a>
+            <a class="btn small ghost" href="#" target="_blank" rel="noopener">Demo</a>
+          </div>
+        </article>
+
+        <article class="project-card">
+          <div class="project-meta">
+            <h3>Parking-Garage System (Java)</h3>
+            <p class="meta">CLI · Gebühren · Nummernschilder</p>
+          </div>
+          <p>Simulation von Ein/Ausfahrt, Zeitstempel, E-Auto-Rabatt.</p>
+          <div class="project-actions">
+            <a class="btn small" href="#" target="_blank" rel="noopener">Code</a>
+            <a class="btn small ghost" href="#" target="_blank" rel="noopener">Demo</a>
+          </div>
+        </article>
+
+        <article class="project-card">
+          <div class="project-meta">
+            <h3>Learning-Website (Full-Stack)</h3>
+            <p class="meta">HTML/CSS/JS · PHP · MySQL</p>
+          </div>
+          <p>Login, Kurse, Quiz, responsives Design, barrierearm.</p>
+          <div class="project-actions">
+            <a class="btn small" href="#" target="_blank" rel="noopener">Code</a>
+            <a class="btn small ghost" href="#" target="_blank" rel="noopener">Live</a>
+          </div>
+        </article>
+      </div>
+    </div>
+  </section>
+
+  <!-- Contact Section -->
+  <section id="contact" class="section contact" aria-labelledby="contact-title">
+    <div class="container">
+      <h2 id="contact-title">Kontakt</h2>
+      <p>Schreib mir deine Nachricht</p>
+
+      <form class="contact-form" action="#" method="post">
+        <div class="field">
+          <label for="name">Name</label>
+          <input id="name" name="name" type="text" autocomplete="name" required>
+        </div>
+        <div class="field">
+          <label for="email">E-Mail</label>
+          <input id="email" name="email" type="email" autocomplete="email" required>
+        </div>
+        <div class="field">
+          <label for="msg">Nachricht</label>
+          <textarea id="msg" name="message" rows="5" required></textarea>
+        </div>
+        <button class="btn primary" type="submit">Nachricht senden</button>
+      </form>
+    </div>
+  </section>
+
+  <footer class="footer" role="contentinfo">
+    <div class="container">
+      <p>© <span id="year"></span> Obai Albeek · Alle Rechte vorbehalten.</p>
+    </div>
+    <script>
+      // kleines JS: Jahr automatisch
+      document.getElementById('year').textContent = new Date().getFullYear();
+    </script>
+  </footer>
+</body>
 
-            </div>
-        </main>
-        
-    </body>
 </html>
\ No newline at end of file