192 lines
7.2 KiB
HTML
192 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<meta property="og:title" content="Obai Albeek | Portfolio">
|
|
<meta property="og:description" content="Schau dir meine Projekte in Java, Webentwicklung und Informatik an.">
|
|
<meta property="og:image" content="preview.png">
|
|
<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="../css/style.css">
|
|
</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 Albeek</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 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 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>
|
|
|
|
</html> |