322 lines
14 KiB
HTML
322 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Obai Albek | Portfolio</title>
|
||
|
||
<meta name="description" content="Portfolio von Obai Albek – Informatik-Student, Java-Entwickler und Webentwicklung (HTML, CSS, JavaScript, PHP)." />
|
||
<meta name="keywords" content="Obai Albek, Portfolio, Informatik, Java, Webentwicklung, HTML, CSS, JavaScript, PHP, Projekte" />
|
||
<meta name="author" content="Obai Albek" />
|
||
|
||
<meta property="og:title" content="Obai Albek | Portfolio" />
|
||
<meta property="og:description" content="Schau dir meine Projekte in Java, Webentwicklung und Informatik an." />
|
||
<meta property="og:image" content="assets/preview.png" />
|
||
<meta property="og:url" content="https://deine-portfolio-url.com" />
|
||
<meta property="og:type" content="website" />
|
||
|
||
<link rel="icon" type="image/png" href="assets/favicon.png" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="../css/style.css" />
|
||
|
||
<!-- Projekt-Filter (deine bestehende Datei) -->
|
||
<script src="../js/projektFilter.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<!-- 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 Albek</span>
|
||
</a>
|
||
|
||
<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>
|
||
|
||
<!-- Hero -->
|
||
<main id="home" class="hero" role="main">
|
||
<div class="hero-card" aria-labelledby="intro-title">
|
||
<div class="hero-media">
|
||
<!-- eigenes Bild -->
|
||
<img class="hero-photo" src="../assets/myPhoto.jpeg" alt="Porträt von Obai Albek" />
|
||
</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="../assets/Lebenslauf_Obai_Albek.pdf" target="_blank" rel="noopener" download>
|
||
Mein Lebenslauf
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Social -->
|
||
<ul class="social" aria-label="Social Links">
|
||
<li>
|
||
<a class="iconlink" href="https://github.com/ObaiAlbek" target="_blank" rel="noopener" aria-label="GitHub">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||
<path d="M12 .5a12 12 0 0 0-3.79 23.4c.6.11.82-.26.82-.58 0-.29-.01-1.06-.02-2.08-3.34.73-4.04-1.61-4.04-1.61-.55-1.38-1.34-1.75-1.34-1.75-1.09-.75.08-.74.08-.74 1.2.08 1.83 1.24 1.83 1.24 1.07 1.84 2.8 1.31 3.48 1 .11-.78.42-1.31.76-1.61-2.67-.3-5.48-1.34-5.48-5.98 0-1.32.47-2.39 1.24-3.24-.12-.3-.54-1.52.12-3.16 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.66 1.64.24 2.86.12 3.16.77.85 1.23 1.92 1.23 3.24 0 4.65-2.81 5.67-5.49 5.97.43.37.81 1.1.81 2.22 0 1.6-.02 2.88-.02 3.27 0 .32.21.7.83.58A12 12 0 0 0 12 .5Z"/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="iconlink" href="https://www.linkedin.com/in/obai-albek-85365a357" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||
<path d="M20.45 20.45h-3.55v-5.6c0-1.34-.02-3.06-1.87-3.06-1.87 0-2.16 1.46-2.16 2.96v5.7H9.32V9h3.41v1.56h.05c.47-.89 1.63-1.83 3.35-1.83 3.58 0 4.24 2.36 4.24 5.43v6.29ZM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12ZM3.57 20.45h3.55V9H3.57v11.45Z"/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- About -->
|
||
<section id="about" class="section about">
|
||
<div class="container">
|
||
<h2>Über mich</h2>
|
||
<p>
|
||
Ich studiere Informatik an der TH Mannheim und baue saubere, wartbare Software.
|
||
In Java fühle ich mich zu Hause (OOP, Collections, Streams). Im Web arbeite ich
|
||
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 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>Programmiersprachen</h3>
|
||
<p>Java, C/C++, Go, Haskell, Python</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>
|
||
|
||
<!-- Projekte -->
|
||
<section id="projects" class="section projects" aria-labelledby="projects-title">
|
||
<div class="container">
|
||
<h2 id="projects-title">Projekte <span id="projectCount" class="count"></span></h2>
|
||
|
||
<!-- Filter & Suche -->
|
||
<div class="project-controls" role="region" aria-label="Projektfilter">
|
||
<input id="projectSearch" class="project-search" type="search"
|
||
placeholder="Suche nach Titel/Technologie …" aria-label="Projekte durchsuchen" />
|
||
<div class="filter-chips" role="group" aria-label="Technologie-Filter">
|
||
<button class="chip is-active" data-filter="all">Alle</button>
|
||
<button class="chip" data-filter="Java">Java</button>
|
||
<button class="chip" data-filter="Web">Web</button>
|
||
<button class="chip" data-filter="Go">Go</button>
|
||
<button class="chip" data-filter="UI/UX">UI/UX</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-list">
|
||
<!-- Local Chat -->
|
||
<article class="project-card" data-tags="Java,OOP,Maven,JUnit,GUI,Facade,Networking,Sockets,Domain">
|
||
<div class="project-meta">
|
||
<h3>Local Chat (Java, Maven, JUnit)</h3>
|
||
<p class="meta">GUI · Domain/Fassade · ChatServer (Sockets)</p>
|
||
</div>
|
||
<p>Lokaler Chat ohne DB: Benutzer/IDs, ChatRoom, Server/Client-Sockets, Unit-Tests, saubere Schichten (Domain, GUI, Fassade).</p>
|
||
<ul class="tags"><li>Java</li><li>Maven</li><li>JUnit</li><li>GUI</li><li>Fassade</li><li>Sockets</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="https://github.com/ObaiAlbek/MyLocalchat" target="_blank" rel="noopener">Code</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Bibliotheksverwaltung -->
|
||
<article class="project-card" data-tags="Java,OOP,JDBC,JPA,MVC,CLI,GUI">
|
||
<div class="project-meta">
|
||
<h3>Bibliotheksverwaltung (Java)</h3>
|
||
<p class="meta">OOP · JDBC/JPA · MVC</p>
|
||
</div>
|
||
<p>Ausleihe/Retouren, Gebühren, Admin-Zahlungen, Katalog.</p>
|
||
<ul class="tags"><li>Java</li><li>MVC</li><li>JPA</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="https://github.com/ObaiAlbek/Bibliotheksverwaltungssystem" target="_blank" rel="noopener">Code</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Parkhaus -->
|
||
<article class="project-card" data-tags="Java,MVC,Simulation">
|
||
<div class="project-meta">
|
||
<h3>Parkhaussimulator (Java)</h3>
|
||
<p class="meta">MVC · Gebühren · Nummernschilder</p>
|
||
</div>
|
||
<p>Ein/Ausfahrt, Zeitstempel, E-Auto-Rabatt, Abrechnung.</p>
|
||
<ul class="tags"><li>Java</li><li>Simulation</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="https://github.com/ObaiAlbek/Parkhaus" target="_blank" rel="noopener">Code</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- E-Mail Client -->
|
||
<article class="project-card" data-tags="Java,GUI,MVC">
|
||
<div class="project-meta">
|
||
<h3>E-Mail Client (Java, GUI, MVC)</h3>
|
||
<p class="meta">GUI · MVC</p>
|
||
</div>
|
||
<p>GUI-basierte Mail-App mit sauberer Schichtentrennung.</p>
|
||
<ul class="tags"><li>Java</li><li>GUI</li><li>MVC</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="https://github.com/ObaiAlbek/SimpleMailSystem" target="_blank" rel="noopener">Code</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Flughafensimulation -->
|
||
<article class="project-card" data-tags="Go,Concurrency,Channels,Goroutines">
|
||
<div class="project-meta">
|
||
<h3>Flughafensimulation (Go)</h3>
|
||
<p class="meta">Goroutines · Channels</p>
|
||
</div>
|
||
<p>Modellierung von Abfertigung/Security/Gates mit Concurrency-Mustern.</p>
|
||
<ul class="tags"><li>Go</li><li>Concurrency</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="https://github.com/ObaiAlbek/Flughafensimulation" target="_blank" rel="noopener">Code</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Lernplattform -->
|
||
<article class="project-card" data-tags="Web,HTML,CSS,JavaScript,PHP,SQL,Auth">
|
||
<div class="project-meta">
|
||
<h3>Lernplattform (Full-Stack)</h3>
|
||
<p class="meta">HTML/CSS/JS · PHP · MySQL</p>
|
||
</div>
|
||
<p>Login, Kurse, Quiz, responsives Design.</p>
|
||
<ul class="tags"><li>Web</li><li>PHP</li><li>MySQL</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="#" target="_blank" rel="noopener">Code</a>
|
||
<a class="btn small ghost" href="https://github.com/ObaiAlbek/HTML-CSS_Lernwebseite" target="_blank" rel="noopener">Live</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- UI/UX -->
|
||
<article class="project-card" data-tags="UI/UX,Figma,Design">
|
||
<div class="project-meta">
|
||
<h3>Urlaub-Transport-App (UI/UX)</h3>
|
||
<p class="meta">Figma · User Flows</p>
|
||
</div>
|
||
<p>App-Design für Transportbuchungen, Fokus auf Usability.</p>
|
||
<ul class="tags"><li>UI/UX</li><li>Figma</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small ghost" href="https://github.com/ObaiAlbek/Urlaub-Transport-App" target="_blank" rel="noopener">Mockups</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Spiele -->
|
||
<article class="project-card" data-tags="Java,GUI,Games">
|
||
<div class="project-meta">
|
||
<h3>Spiele (Java GUI)</h3>
|
||
<p class="meta">Tic-Tac-Toe · Pong · Hitori</p>
|
||
</div>
|
||
<p>Kleine Spiele mit Java-GUI und sauberem OOP-Design.</p>
|
||
<ul class="tags"><li>Java</li><li>GUI</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="https://github.com/ObaiAlbek/MyHitori-Spiel" target="_blank" rel="noopener">Code</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- React Auth -->
|
||
<article class="project-card" data-tags="Web,React,JavaScript,Auth">
|
||
<div class="project-meta">
|
||
<h3>React Auth Form</h3>
|
||
<p class="meta">React · useState · Conditional Rendering</p>
|
||
</div>
|
||
<p>Login/Signup-Formular mit Validation und CSS.</p>
|
||
<ul class="tags"><li>Web</li><li>React</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="https://github.com/ObaiAlbek/reactAuthForm" target="_blank" rel="noopener">Code</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Parallel -->
|
||
<article class="project-card" data-tags="Java,Threads,Locks,Concurrency">
|
||
<div class="project-meta">
|
||
<h3>Parallelprogrammierung (Java)</h3>
|
||
<p class="meta">Dining Philosophers · ThreadsafeSimplifiedList<T></p>
|
||
</div>
|
||
<p>Concurrency mit Threads/Locks und Hand-over-Hand-Locking.</p>
|
||
<ul class="tags"><li>Java</li><li>Concurrency</li></ul>
|
||
<div class="project-actions">
|
||
<a class="btn small" href="https://github.com/ObaiAlbek/concurrency-dining-philosophers" target="_blank" rel="noopener">Code</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Kontakt -->
|
||
<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 id="contactForm" class="contact-form" action="php/send.php" method="post" novalidate>
|
||
<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>
|
||
|
||
<div id="formAlert" aria-live="polite" style="margin:.25rem 0 0;color:var(--muted)"></div>
|
||
|
||
<button class="btn primary" type="submit" id="sendBtn">Nachricht senden</button>
|
||
|
||
<!-- Honeypot (unsichtbar, am Ende → stört Layout nicht) -->
|
||
<input type="text" name="website" id="website" class="hp" tabindex="-1" autocomplete="off" aria-hidden="true"
|
||
style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden">
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="footer" role="contentinfo">
|
||
<div class="container">
|
||
<p>© <span id="year"></span> Obai Albek · Alle Rechte vorbehalten.</p>
|
||
</div>
|
||
<script>
|
||
document.getElementById('year').textContent = new Date().getFullYear();
|
||
</script>
|
||
|
||
<!-- Kontakt-Handler (Validation + Fetch) -->
|
||
<script src="../js/contact.js" defer></script>
|
||
</footer>
|
||
</body>
|
||
</html>
|