LABORATORIUM 3: Bootstrap
ZADANIA:
- Porównaj ten plik z lab2/ — gdzie jest nasz CSS? Zastąpiony klasami Bootstrap (container, row, col-md-4, card…)
- Dodaj komponent “Accordion” z FAQ (dokumentacja Bootstrap)
- Zamień grid projektów na Bootstrap Cards z klasą .card-group
- Dodaj Navbar z hamburger menu (collapse na mobile)
- Użyj Bootstrap Icons: https://icons.getbootstrap.com/
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio — Jan Kowalski (Bootstrap)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Tylko minimalne nadpisania — resztę robi Bootstrap */
.hero-section {
background: linear-gradient(135deg, #eff6ff, #f8fafc);
min-height: 60vh;
}
.skill-icon { font-size: 2rem; }
.project-img {
height: 160px;
background: linear-gradient(135deg, #1e40af, #0ea5e9);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
</style>
</head>
<body>
<!-- ===== NAWIGACJA (Bootstrap Navbar z hamburger menu) ===== -->
<nav class="navbar navbar-expand-md navbar-light bg-white border-bottom sticky-top">
<div class="container">
<a class="navbar-brand fw-bold text-primary" href="#">JK<span class="text-info">.dev</span></a>
<!-- Hamburger button — widoczny tylko na mobile -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menu — zwija się na mobile -->
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#o-mnie">O mnie</a></li>
<li class="nav-item"><a class="nav-link" href="#umiejetnosci">Umiejętności</a></li>
<li class="nav-item"><a class="nav-link" href="#projekty">Projekty</a></li>
<li class="nav-item"><a class="btn btn-primary btn-sm ms-2" href="#kontakt">Kontakt</a></li>
</ul>
</div>
</div>
</nav>
<!-- ===== HERO ===== -->
<!-- Bootstrap: d-flex, justify-content-center, align-items-center = nasz Flexbox z lab2 -->
<header class="hero-section d-flex justify-content-center align-items-center text-center py-5">
<div class="container" style="max-width: 650px;">
<span class="badge bg-primary bg-opacity-10 text-primary mb-3 px-3 py-2 rounded-pill">Student WAT — Informatyka</span>
<h1 class="display-4 fw-bold">Cześć, jestem <span class="text-primary">Jan Kowalski</span></h1>
<p class="lead text-muted mb-4">Tworzę aplikacje webowe, interesuję się cyberbezpieczeństwem
i konteneryzacją. Szukam stażu na lato 2026.</p>
<div class="d-flex gap-2 justify-content-center flex-wrap">
<a href="#projekty" class="btn btn-primary px-4">Moje projekty</a>
<a href="#kontakt" class="btn btn-outline-primary px-4">Napisz do mnie</a>
</div>
</div>
</header>
<main>
<!-- ===== O MNIE ===== -->
<!-- Bootstrap: row + col-md = nasz CSS Grid z lab2 -->
<section id="o-mnie" class="py-5">
<div class="container">
<h2 class="text-center fw-bold mb-5">O mnie</h2>
<div class="row align-items-center g-4">
<div class="col-md-8">
<p class="text-muted fs-5">Jestem studentem trzeciego roku Informatyki na Wojskowej Akademii Technicznej.
Od dwóch lat rozwijam się w kierunku full-stack web developmentu.</p>
<p class="text-muted">Aktualnie uczę się architektury mikroserwisowej i orkiestracji kontenerów.</p>
</div>
<div class="col-md-4">
<div class="row g-3 text-center">
<div class="col-4 col-md-12">
<div class="card border-0 shadow-sm p-3">
<span class="fs-2 fw-bold text-primary">3+</span>
<small class="text-muted">Lata programowania</small>
</div>
</div>
<div class="col-4 col-md-12">
<div class="card border-0 shadow-sm p-3">
<span class="fs-2 fw-bold text-primary">12</span>
<small class="text-muted">Projektów</small>
</div>
</div>
<div class="col-4 col-md-12">
<div class="card border-0 shadow-sm p-3">
<span class="fs-2 fw-bold text-primary">4.5</span>
<small class="text-muted">Średnia</small>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== UMIEJĘTNOŚCI ===== -->
<!-- Bootstrap: col-sm-6 col-lg-3 = nasz repeat(auto-fill, minmax(220px, 1fr)) z lab2 -->
<section id="umiejetnosci" class="py-5 bg-light">
<div class="container">
<h2 class="text-center fw-bold mb-5">Umiejętności</h2>
<div class="row g-4">
<div class="col-sm-6 col-lg-3">
<div class="card border-0 shadow-sm text-center p-4 h-100">
<div class="skill-icon mb-3">🌐</div>
<h5 class="card-title">Frontend</h5>
<p class="card-text text-muted small">HTML5, CSS3, JavaScript, React</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border-0 shadow-sm text-center p-4 h-100">
<div class="skill-icon mb-3">⚙️</div>
<h5 class="card-title">Backend</h5>
<p class="card-text text-muted small">PHP, Python, Node.js, REST API</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border-0 shadow-sm text-center p-4 h-100">
<div class="skill-icon mb-3">🗄️</div>
<h5 class="card-title">Bazy danych</h5>
<p class="card-text text-muted small">MySQL, PostgreSQL, MongoDB</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border-0 shadow-sm text-center p-4 h-100">
<div class="skill-icon mb-3">🐳</div>
<h5 class="card-title">DevOps</h5>
<p class="card-text text-muted small">Docker, Git, Linux, CI/CD</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== PROJEKTY ===== -->
<section id="projekty" class="py-5">
<div class="container">
<h2 class="text-center fw-bold mb-5">Projekty</h2>
<div class="row g-4">
<div class="col-md-4">
<article class="card border-0 shadow-sm h-100">
<div class="project-img">📢</div>
<div class="card-body d-flex flex-column">
<span class="badge bg-primary bg-opacity-10 text-primary align-self-start mb-2">PHP + MySQL</span>
<h5 class="card-title">CorpoApp</h5>
<p class="card-text text-muted small flex-grow-1">Tablica ogłoszeń z bazą danych i Dockerem.</p>
<div class="d-flex gap-2 mt-auto">
<a href="/" class="btn btn-primary btn-sm">Demo</a>
<a href="#" class="btn btn-outline-secondary btn-sm">GitHub</a>
</div>
</div>
</article>
</div>
<div class="col-md-4">
<article class="card border-0 shadow-sm h-100">
<div class="project-img" style="background: linear-gradient(135deg, #10b981, #0ea5e9);">🧮</div>
<div class="card-body d-flex flex-column">
<span class="badge bg-success bg-opacity-10 text-success align-self-start mb-2">JavaScript</span>
<h5 class="card-title">Kalkulator BMI</h5>
<p class="card-text text-muted small flex-grow-1">Kalkulator z walidacją i dynamicznym wynikiem.</p>
<div class="d-flex gap-2 mt-auto">
<a href="#" class="btn btn-primary btn-sm">Demo</a>
<a href="#" class="btn btn-outline-secondary btn-sm">GitHub</a>
</div>
</div>
</article>
</div>
<div class="col-md-4">
<article class="card border-0 shadow-sm h-100">
<div class="project-img" style="background: linear-gradient(135deg, #ef4444, #f59e0b);">🔍</div>
<div class="card-body d-flex flex-column">
<span class="badge bg-danger bg-opacity-10 text-danger align-self-start mb-2">Python</span>
<h5 class="card-title">Skaner portów</h5>
<p class="card-text text-muted small flex-grow-1">Narzędzie CLI do skanowania portów sieciowych.</p>
<div class="d-flex gap-2 mt-auto">
<a href="#" class="btn btn-outline-secondary btn-sm">GitHub</a>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- ===== KONTAKT ===== -->
<section id="kontakt" class="py-5 bg-light">
<div class="container">
<h2 class="text-center fw-bold mb-5">Kontakt</h2>
<div class="row g-4">
<div class="col-md-4">
<h5>Napisz do mnie</h5>
<p class="text-muted">Chętnie porozmawiam o projektach lub stażach.</p>
<ul class="list-unstyled text-muted">
<li class="mb-2">📧 jan@wat.edu.pl</li>
<li class="mb-2">🐙 github.com/jankowalski</li>
<li class="mb-2">💼 linkedin.com/in/jankowalski</li>
</ul>
</div>
<div class="col-md-8">
<form action="#" method="POST">
<div class="row g-3 mb-3">
<div class="col-sm-6">
<label for="imie" class="form-label small fw-bold text-muted">Imię</label>
<input type="text" class="form-control" id="imie" name="imie" required placeholder="Anna">
</div>
<div class="col-sm-6">
<label for="email" class="form-label small fw-bold text-muted">E-mail</label>
<input type="email" class="form-control" id="email" name="email" required placeholder="anna@example.com">
</div>
</div>
<div class="mb-3">
<label for="wiadomosc" class="form-label small fw-bold text-muted">Wiadomość</label>
<textarea class="form-control" id="wiadomosc" name="wiadomosc" rows="5" required placeholder="Treść wiadomości..."></textarea>
</div>
<button type="submit" class="btn btn-primary w-100 fw-bold py-2">Wyślij wiadomość</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="text-center py-3 text-muted small border-top">
© 2026 Jan Kowalski — Laboratorium 3: Bootstrap
</footer>
<!-- Bootstrap JS (potrzebny dla hamburger menu) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>