<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Roman Velička – Test Technician & Network Technician | Testování Microsoft serverů, Arista/Mellanox switche, Linux, automatizace">
<meta name="keywords" content="Roman Velička, Test Technician, Network Technician, IT Support, Arista, Mellanox, Cisco, Linux, Brno">
<meta name="author" content="Roman Velička">
<meta property="og:title" content="Roman Velička – Portfolio">
<meta property="og:description" content="Test technik v produkci Microsoft serverů · Arista & Mellanox · Linux · automatizace">
<meta property="og:type" content="website">
<meta property="og:url" content="https://velickar.cz">
<title>Roman Velička – Test Technician & Network Technician</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">

<style>
:root{
  --bg:#F2F5F6;
  --surface:#FFFFFF;
  --ink:#15232C;
  --muted:#5C6B73;
  --line:#DCE4E8;
  --green:#0D8A55;
  --green-soft:#E2F3EA;
  --amber:#B5750F;
  --amber-soft:#F9EFDC;
  --term-bg:#101B22;
  --term-line:#1E2E38;
  --term-ink:#C9D8E0;
  --term-dim:#5F7785;
  --display:'Space Grotesk',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --maxw:1080px;
  --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.eyebrow{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--green);margin-bottom:10px;display:block;
}
.section-title{
  font-family:var(--display);font-size:clamp(26px,4vw,34px);
  font-weight:700;letter-spacing:-.01em;margin-bottom:36px;
}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* ---------- Nav ---------- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(242,245,246,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;height:60px;
}
.brand{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink)}
.brand .tilde{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink)}
.nav-links a:hover{color:var(--green);text-decoration:none}
.lang-toggle{
  font-family:var(--mono);font-size:12px;font-weight:600;
  border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--ink);
}
.lang-toggle:hover{border-color:var(--green);color:var(--green)}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;transition:.2s}

/* ---------- Hero ---------- */
.hero{padding:140px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,6vw,56px);line-height:1.05;letter-spacing:-.02em;
  margin-bottom:14px;
}
.hero-role{
  font-size:18px;font-weight:600;color:var(--ink);margin-bottom:14px;
}
.hero-role .at{color:var(--muted);font-weight:400}
.hero-lead{color:var(--muted);max-width:46ch;margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.btn{
  display:inline-block;padding:11px 22px;border-radius:8px;
  font-weight:600;font-size:15px;transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{box-shadow:0 6px 18px rgba(21,35,44,.25)}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  border:1px solid var(--line);background:var(--surface);
  padding:5px 11px;border-radius:999px;
}

/* ---------- Terminal (signature) ---------- */
.terminal{
  background:var(--term-bg);border-radius:var(--radius);
  border:1px solid var(--term-line);
  box-shadow:0 24px 60px -20px rgba(16,27,34,.45);
  overflow:hidden;font-family:var(--mono);font-size:13px;
}
.term-bar{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-bottom:1px solid var(--term-line);
}
.term-dot{width:10px;height:10px;border-radius:50%;background:#2C3E4A}
.term-title{margin-left:auto;color:var(--term-dim);font-size:12px}
.term-body{padding:16px 18px;color:var(--term-ink);line-height:1.75;overflow-x:auto}
.term-body .p{color:var(--green)}
.term-body .dim{color:var(--term-dim)}
.term-table{white-space:pre}
.t-up{color:#4CC38A}
.t-prog{color:#E2B25A}
.cursor{
  display:inline-block;width:8px;height:15px;background:var(--term-ink);
  vertical-align:-2px;animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
.lead{font-size:17px;color:var(--ink);margin-bottom:18px}
.about-text p{color:var(--muted);margin-bottom:14px}
.info-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
}
.info-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.info-row:last-child{border-bottom:none}
.info-row .k{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.info-row .v{font-weight:500;text-align:right}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:28px}
.timeline::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line);
}
.t-item{position:relative;padding-bottom:36px}
.t-item:last-child{padding-bottom:0}
.t-item::before{
  content:"";position:absolute;left:-28px;top:6px;width:16px;height:16px;
  border-radius:50%;background:var(--bg);border:3px solid var(--muted);
}
.t-item.current::before{border-color:var(--green);background:var(--green-soft)}
.t-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:2px}
.t-head h3{font-family:var(--display);font-size:18px;font-weight:600}
.t-period{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.t-company{font-size:14.5px;color:var(--muted);margin-bottom:8px}
.t-badge{
  font-family:var(--mono);font-size:11px;font-weight:600;
  background:var(--green-soft);color:var(--green);
  padding:2px 9px;border-radius:999px;
}
.t-list{list-style:none;color:var(--muted);font-size:14.5px}
.t-list li{padding-left:16px;position:relative;margin-bottom:4px}
.t-list li::before{content:"–";position:absolute;left:0;color:var(--green)}

/* ---------- Projects ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.proj-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:10px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.proj-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px -14px rgba(21,35,44,.25)}
.proj-top{display:flex;justify-content:space-between;align-items:center}
.proj-name{font-family:var(--display);font-size:17px;font-weight:600}
.status{
  font-family:var(--mono);font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:999px;white-space:nowrap;
}
.status.up{background:var(--green-soft);color:var(--green)}
.status.wip{background:var(--amber-soft);color:var(--amber)}
.proj-card p{color:var(--muted);font-size:14.5px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
  background:var(--bg);border:1px solid var(--line);
  padding:3px 9px;border-radius:6px;
}

/* ---------- Skills ---------- */
.skill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.skill-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
}
.skill-card h3{
  font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--green);margin-bottom:12px;letter-spacing:.03em;
}
.skill-card ul{list-style:none;font-size:14.5px;color:var(--muted)}
.skill-card li{padding:5px 0;border-bottom:1px dashed var(--line)}
.skill-card li:last-child{border-bottom:none}

/* ---------- Certs & langs ---------- */
.cert-row{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:start}
.cert-list,.lang-list{list-style:none}
.cert-list li{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:13px 18px;margin-bottom:10px;font-size:14.5px;font-weight:500;
  display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.cert-org{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:400}
.cert-goal{
  font-size:13.5px;color:var(--muted);font-style:normal;
  border-left:3px solid var(--green);padding:4px 0 4px 14px;margin-top:14px;
}
.lang-list li{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.lang-list li:last-child{border-bottom:none}
.lang-lvl{font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.contact-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:block;color:var(--ink);
  transition:transform .15s ease,border-color .15s ease;
}
.contact-card:hover{transform:translateY(-2px);border-color:var(--green);text-decoration:none}
.contact-card .k{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
.contact-card .v{font-weight:600;font-size:15px;word-break:break-word}
.contact-note{margin-top:24px;color:var(--muted);font-size:14.5px}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line);padding:28px 0;margin-top:40px;
  font-size:13.5px;color:var(--muted);
}
.footer-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer .mono{font-family:var(--mono);font-size:12.5px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Scroll top ---------- */
.scroll-top{
  position:fixed;bottom:22px;right:22px;width:42px;height:42px;border-radius:50%;
  background:var(--ink);color:#fff;border:none;cursor:pointer;font-size:18px;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:90;
}
.scroll-top.show{opacity:1;pointer-events:auto}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .about-grid,.cert-row{grid-template-columns:1fr;gap:28px}
  .proj-grid,.skill-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .section{padding:64px 0}
  .hero{padding:110px 0 64px}
}
@media (max-width:760px){
  .nav-burger{display:block}
  .nav-links{
    position:fixed;top:60px;left:0;right:0;background:var(--surface);
    flex-direction:column;align-items:flex-start;gap:0;
    border-bottom:1px solid var(--line);display:none;padding:8px 0;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:13px 24px;width:100%}
  .nav-links .lang-li{padding:12px 24px}
}
</style>
</head>
<body>

<nav class="navbar">
  <div class="nav-inner">
    <a href="#" class="brand">roman@velickar<span class="tilde">:~$</span></a>
    <button class="nav-burger" id="navBurger" aria-label="Menu" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
    <ul class="nav-links" id="navLinks">
      <li><a href="#about" data-i18n="nav.about">O mně</a></li>
      <li><a href="#experience" data-i18n="nav.experience">Zkušenosti</a></li>
      <li><a href="#projects" data-i18n="nav.projects">Projekty</a></li>
      <li><a href="#skills" data-i18n="nav.skills">Dovednosti</a></li>
      <li><a href="#contact" data-i18n="nav.contact">Kontakt</a></li>
      <li class="lang-li"><button class="lang-toggle" id="langToggle" aria-label="Switch language">EN</button></li>
    </ul>
  </div>
</nav>

<main>

<!-- ======== HERO ======== -->
<header class="hero">
  <div class="container hero-grid">
    <div>
      <span class="eyebrow" data-i18n="hero.eyebrow">// test technik · brno</span>
      <h1>Roman Velička</h1>
      <p class="hero-role">
        <span data-i18n="hero.role">Test Technician</span> <span class="at">@ Wistron</span><br>
        <span data-i18n="hero.role2">směr Network Engineering</span>
      </p>
      <p class="hero-lead" data-i18n="hero.lead">Testuji a diagnostikuji Microsoft servery v produkčním prostředí – Arista a Mellanox switche, Linux, bash a PowerShell. Doma si stavím vlastní infrastrukturu, protože mě to prostě baví.</p>
      <div class="hero-cta">
        <a href="#contact" class="btn btn-primary" data-i18n="hero.cta">Kontaktovat</a>
        <a href="#projects" class="btn btn-ghost" data-i18n="hero.cta2">Projekty</a>
      </div>
      <div class="hero-chips">
        <span class="chip">Arista CLI</span>
        <span class="chip">Mellanox</span>
        <span class="chip">Linux</span>
        <span class="chip">bash / PowerShell</span>
        <span class="chip">Docker</span>
      </div>
    </div>

    <div class="terminal" aria-hidden="true">
      <div class="term-bar">
        <span class="term-dot"></span><span class="term-dot"></span><span class="term-dot"></span>
        <span class="term-title">lab-switch — ssh</span>
      </div>
      <div class="term-body" id="termBody">
<div><span class="p">roman@velickar:~$</span> ssh lab-switch</div>
<div><span class="p">lab-switch&gt;</span> show interfaces status</div>
<div class="term-table dim">Port   Name             Status        Vlan</div>
<div class="term-table">Et1    arista_cli       <span class="t-up">connected</span>     prod</div>
<div class="term-table">Et2    mellanox         <span class="t-up">connected</span>     prod</div>
<div class="term-table">Et3    server_diag      <span class="t-up">connected</span>     prod</div>
<div class="term-table">Et4    linux_bash       <span class="t-up">connected</span>     prod</div>
<div class="term-table">Et5    powershell       <span class="t-up">connected</span>     prod</div>
<div class="term-table">Et6    docker           <span class="t-up">connected</span>     lab</div>
<div class="term-table">Et7    python           <span class="t-up">connected</span>     lab</div>
<div class="term-table">Et8    ccna_full        <span class="t-prog">learning</span>      trunk</div>
<div><span class="p">lab-switch&gt;</span> <span class="cursor"></span></div>
      </div>
    </div>
  </div>
</header>

<!-- ======== ABOUT ======== -->
<section id="about" class="section">
  <div class="container">
    <span class="eyebrow">// whoami</span>
    <h2 class="section-title" data-i18n="about.title">O mně</h2>
    <div class="about-grid">
      <div class="about-text reveal">
        <p class="lead" data-i18n="about.lead">Jsem test technik ve výrobě Microsoft serverů v Brně. Denně diagnostikuji hardware i software, konfiguruji Arista a Mellanox switche přes CLI a automatizuji rutinu pomocí bash a PowerShell skriptů.</p>
        <p data-i18n="about.p1">K tomu mám certifikaci Cisco CCNAv7: Introduction to Networks a doma provozuji vlastní homelab – síť na MikroTiku, self-hosted služby na Raspberry Pi a Mac mini, vlastní AI asistent. Co se naučím v práci, zkouším doma, a naopak.</p>
        <p data-i18n="about.p2">Dlouhodobě směřuji k roli síťového technika / network engineera. Dalším krokem je dokončení plné CCNA certifikace.</p>
      </div>
      <div class="info-card reveal">
        <div class="info-row"><span class="k" data-i18n="about.k1">lokace</span><span class="v" data-i18n="about.v1">Brno, ČR</span></div>
        <div class="info-row"><span class="k" data-i18n="about.k2">pozice</span><span class="v" data-i18n="about.v2">Test Technician (medior)</span></div>
        <div class="info-row"><span class="k" data-i18n="about.k3">jazyky</span><span class="v" data-i18n="about.v3">CZ · EN · UA · RU · DE</span></div>
        <div class="info-row"><span class="k" data-i18n="about.k4">řidičský průkaz</span><span class="v" data-i18n="about.v4">sk. B</span></div>
        <div class="info-row"><span class="k" data-i18n="about.k5">směr</span><span class="v" data-i18n="about.v5">Network / Security</span></div>
      </div>
    </div>
  </div>
</section>

<!-- ======== EXPERIENCE ======== -->
<section id="experience" class="section">
  <div class="container">
    <span class="eyebrow">// history</span>
    <h2 class="section-title" data-i18n="exp.title">Zkušenosti &amp; vzdělání</h2>
    <div class="timeline">

      <div class="t-item current reveal">
        <div class="t-head">
          <h3>Test Technician (Medior)</h3>
          <span class="t-badge" data-i18n="exp.now">aktuálně</span>
          <span class="t-period">02/2026 –</span>
        </div>
        <p class="t-company" data-i18n="exp.w1.company">Wistron – výroba Microsoft serverů · Brno</p>
        <ul class="t-list" data-i18n-list="exp.w1.items"></ul>
      </div>

      <div class="t-item reveal">
        <div class="t-head">
          <h3 data-i18n="exp.w2.title">Majitel / Founder – marketingová agentura</h3>
          <span class="t-period">07/2025 –</span>
        </div>
        <p class="t-company" data-i18n="exp.w2.company">Nevymyslíš lepší marketing · Moravskoslezský kraj</p>
        <ul class="t-list" data-i18n-list="exp.w2.items"></ul>
      </div>

      <div class="t-item reveal">
        <div class="t-head">
          <h3 data-i18n="exp.w3.title">Klientská podpora – finance a bankovnictví</h3>
          <span class="t-period">03/2023 – 01/2026</span>
        </div>
        <p class="t-company">Partners Banka · Ostrava / Kopřivnice</p>
        <ul class="t-list" data-i18n-list="exp.w3.items"></ul>
      </div>

      <div class="t-item reveal">
        <div class="t-head">
          <h3 data-i18n="exp.w4.title">IT praxe / stáž</h3>
          <span class="t-period">09/2022 – 01/2023</span>
        </div>
        <p class="t-company">Tietoevry · Ostrava</p>
        <ul class="t-list" data-i18n-list="exp.w4.items"></ul>
      </div>

      <div class="t-item reveal">
        <div class="t-head">
          <h3 data-i18n="exp.w5.title">IT Support – zahraniční stáž</h3>
          <span class="t-period">02/2022 – 03/2022</span>
        </div>
        <p class="t-company">Horizon2000 Computers · Malta</p>
        <ul class="t-list" data-i18n-list="exp.w5.items"></ul>
      </div>

      <div class="t-item reveal">
        <div class="t-head">
          <h3 data-i18n="exp.edu.title">Maturita v oboru IT</h3>
          <span class="t-period">2019 – 2023</span>
        </div>
        <p class="t-company" data-i18n="exp.edu.school">Střední průmyslová škola · Frýdek-Místek</p>
        <ul class="t-list" data-i18n-list="exp.edu.items"></ul>
      </div>

    </div>
  </div>
</section>

<!-- ======== PROJECTS ======== -->
<section id="projects" class="section">
  <div class="container">
    <span class="eyebrow">// homelab &amp; projects</span>
    <h2 class="section-title" data-i18n="proj.title">Projekty &amp; homelab</h2>
    <div class="proj-grid">

      <div class="proj-card reveal">
        <div class="proj-top">
          <span class="proj-name" data-i18n="proj.p1.name">AI asistent na vlastní infrastruktuře</span>
          <span class="status up" data-i18n="proj.status.running">běží</span>
        </div>
        <p data-i18n="proj.p1.desc">Platforma pro správu úkolů a připomínek s lokálním LLM, běžící na Raspberry Pi a Mac mini – bez závislosti na cloudových AI službách.</p>
        <div class="tags">
          <span class="tag">Ollama</span><span class="tag">FastAPI</span><span class="tag">SQLite</span><span class="tag">React</span><span class="tag">Cloudflare Tunnel</span>
        </div>
      </div>

      <div class="proj-card reveal">
        <div class="proj-top">
          <span class="proj-name" data-i18n="proj.p2.name">Discord bot v Pythonu</span>
          <span class="status up" data-i18n="proj.status.deployed">nasazeno</span>
        </div>
        <p data-i18n="proj.p2.desc">Vlastní bot s modulární cog architekturou, kontejnerizovaný a nasazený na Fly.io. Nahradil několik placených a nespolehlivých third-party botů.</p>
        <div class="tags">
          <span class="tag">Python</span><span class="tag">discord.py</span><span class="tag">Docker</span><span class="tag">Fly.io</span>
        </div>
      </div>

      <div class="proj-card reveal">
        <div class="proj-top">
          <span class="proj-name" data-i18n="proj.p3.name">Domácí síť na MikroTiku</span>
          <span class="status up" data-i18n="proj.status.running">běží</span>
        </div>
        <p data-i18n="proj.p3.desc">Návrh a správa domácí sítě – MikroTik hEX router a cAP ac access point, vlastní subnet, firewall pravidla a DNS filtrování přes Pi-hole.</p>
        <div class="tags">
          <span class="tag">MikroTik</span><span class="tag">RouterOS</span><span class="tag">Pi-hole</span><span class="tag">Firewall</span>
        </div>
      </div>

      <div class="proj-card reveal">
        <div class="proj-top">
          <span class="proj-name" data-i18n="proj.p4.name">Tento web</span>
          <span class="status up" data-i18n="proj.status.live">live</span>
        </div>
        <p data-i18n="proj.p4.desc">Self-hosted portfolio – statický web bez frameworků, nasazený přes Cloudflare Pages a zároveň na vlastním Raspberry Pi s Nginx reverse proxy.</p>
        <div class="tags">
          <span class="tag">HTML/CSS/JS</span><span class="tag">Nginx</span><span class="tag">Raspberry Pi</span><span class="tag">Cloudflare</span>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ======== SKILLS ======== -->
<section id="skills" class="section">
  <div class="container">
    <span class="eyebrow">// stack</span>
    <h2 class="section-title" data-i18n="skills.title">Technické dovednosti</h2>
    <div class="skill-grid">

      <div class="skill-card reveal">
        <h3 data-i18n="skills.c1.title">sítě</h3>
        <ul>
          <li data-i18n="skills.c1.i1">Arista a Mellanox switche – konfigurace přes CLI</li>
          <li data-i18n="skills.c1.i2">MikroTik RouterOS</li>
          <li data-i18n="skills.c1.i3">Routing &amp; switching, VLAN, subnetting</li>
          <li data-i18n="skills.c1.i4">Troubleshooting sítí</li>
        </ul>
      </div>

      <div class="skill-card reveal">
        <h3 data-i18n="skills.c2.title">serverový hardware</h3>
        <ul>
          <li data-i18n="skills.c2.i1">Testování a diagnostika serverů v produkci</li>
          <li data-i18n="skills.c2.i2">Síťové karty, management kontroléry, PCIe</li>
          <li data-i18n="skills.c2.i3">Flashování a aktualizace firmware</li>
          <li data-i18n="skills.c2.i4">Práce dle testovacích plánů, reporting závad</li>
        </ul>
      </div>

      <div class="skill-card reveal">
        <h3 data-i18n="skills.c3.title">systémy &amp; nástroje</h3>
        <ul>
          <li data-i18n="skills.c3.i1">Linux CLI, Windows</li>
          <li data-i18n="skills.c3.i2">Skriptování – bash, PowerShell</li>
          <li data-i18n="skills.c3.i3">Docker, základy Pythonu</li>
          <li data-i18n="skills.c3.i4">Git, technická dokumentace</li>
        </ul>
      </div>

      <div class="skill-card reveal">
        <h3 data-i18n="skills.c4.title">bezpečnost &amp; podpora</h3>
        <ul>
          <li data-i18n="skills.c4.i1">Základy síťové bezpečnosti, firewall pravidla</li>
          <li data-i18n="skills.c4.i2">VPN – přehled</li>
          <li data-i18n="skills.c4.i3">Uživatelská podpora v češtině i angličtině</li>
          <li data-i18n="skills.c4.i4">Komunikace s netechnickými uživateli</li>
        </ul>
      </div>

    </div>
  </div>
</section>

<!-- ======== CERTS + LANGUAGES ======== -->
<section id="certs" class="section">
  <div class="container">
    <span class="eyebrow">// certs &amp; langs</span>
    <h2 class="section-title" data-i18n="certs.title">Certifikace &amp; jazyky</h2>
    <div class="cert-row">
      <div class="reveal">
        <ul class="cert-list">
          <li>Cisco CCNAv7: Introduction to Networks <span class="cert-org">Cisco · modul 1/3</span></li>
          <li>Cisco IT Essentials <span class="cert-org">Cisco</span></li>
          <li>ECDL <span class="cert-org">ICDL Foundation</span></li>
        </ul>
        <p class="cert-goal" data-i18n="certs.goal">Aktuální cíl: dokončení plné CCNA certifikace.</p>
      </div>
      <div class="reveal">
        <ul class="lang-list">
          <li><span data-i18n="langs.cs">Čeština</span><span class="lang-lvl" data-i18n="langs.cs.lvl">rodilý mluvčí</span></li>
          <li><span data-i18n="langs.en">Angličtina</span><span class="lang-lvl">C1</span></li>
          <li><span data-i18n="langs.ua">Ukrajinština</span><span class="lang-lvl">B1</span></li>
          <li><span data-i18n="langs.ru">Ruština</span><span class="lang-lvl">B1</span></li>
          <li><span data-i18n="langs.de">Němčina</span><span class="lang-lvl" data-i18n="langs.de.lvl">začátečník</span></li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- ======== CONTACT ======== -->
<section id="contact" class="section">
  <div class="container">
    <span class="eyebrow">// ping me</span>
    <h2 class="section-title" data-i18n="contact.title">Kontakt</h2>
    <p class="lead reveal" data-i18n="contact.lead">Zajímají mě pozice v oblasti sítí, testování a IT podpory v Brně a okolí. Ozvěte se – rád si poslechnu, co stavíte.</p>
    <div class="contact-grid">
      <a href="mailto:roman.velicka1@gmail.com" class="contact-card reveal">
        <span class="k">email</span>
        <span class="v">roman.velicka1@gmail.com</span>
      </a>
      <a href="tel:+420737657407" class="contact-card reveal">
        <span class="k" data-i18n="contact.phone">telefon</span>
        <span class="v">+420 737 657 407</span>
      </a>
      <a href="https://linkedin.com/in/romanvelicka/" target="_blank" rel="noopener noreferrer" class="contact-card reveal">
        <span class="k">linkedin</span>
        <span class="v">/in/romanvelicka</span>
      </a>
    </div>
    <p class="contact-note" data-i18n="contact.note">Brno, Česká republika · ochota učit se nové technologie · dlouhodobý směr: network / security</p>
  </div>
</section>

</main>

<footer class="footer">
  <div class="container footer-inner">
    <span>© <span id="year"></span> Roman Velička</span>
    <span class="mono" data-i18n="footer.host">self-hosted on raspberry pi · cloudflare pages</span>
  </div>
</footer>

<button id="scrollTop" class="scroll-top" aria-label="Zpět nahoru">↑</button>

<script>
/* ================= i18n ================= */
const translations = {
  cs: {
    "nav.about":"O mně","nav.experience":"Zkušenosti","nav.projects":"Projekty","nav.skills":"Dovednosti","nav.contact":"Kontakt",
    "hero.eyebrow":"// test technik · brno",
    "hero.role":"Test Technician","hero.role2":"směr Network Engineering",
    "hero.lead":"Testuji a diagnostikuji Microsoft servery v produkčním prostředí – Arista a Mellanox switche, Linux, bash a PowerShell. Doma si stavím vlastní infrastrukturu, protože mě to prostě baví.",
    "hero.cta":"Kontaktovat","hero.cta2":"Projekty",
    "about.title":"O mně",
    "about.lead":"Jsem test technik ve výrobě Microsoft serverů v Brně. Denně diagnostikuji hardware i software, konfiguruji Arista a Mellanox switche přes CLI a automatizuji rutinu pomocí bash a PowerShell skriptů.",
    "about.p1":"K tomu mám certifikaci Cisco CCNAv7: Introduction to Networks a doma provozuji vlastní homelab – síť na MikroTiku, self-hosted služby na Raspberry Pi a Mac mini, vlastní AI asistent. Co se naučím v práci, zkouším doma, a naopak.",
    "about.p2":"Dlouhodobě směřuji k roli síťového technika / network engineera. Dalším krokem je dokončení plné CCNA certifikace.",
    "about.k1":"lokace","about.v1":"Brno, ČR",
    "about.k2":"pozice","about.v2":"Test Technician (medior)",
    "about.k3":"jazyky","about.v3":"CZ · EN · UA · RU · DE",
    "about.k4":"řidičský průkaz","about.v4":"sk. B",
    "about.k5":"směr","about.v5":"Network / Security",
    "exp.title":"Zkušenosti & vzdělání","exp.now":"aktuálně",
    "exp.w1.company":"Wistron – výroba Microsoft serverů · Brno",
    "exp.w1.items":[
      "Testování a diagnostika nově vyrobených Microsoft serverů v produkčním prostředí",
      "Konfigurace Arista a Mellanox switchů přes CLI v testovací infrastruktuře",
      "Troubleshooting hardwarových a softwarových závad serverů a síťových komponent",
      "Automatizace rutinních úkonů v bash a PowerShell, práce s Dockerem",
      "Flashování firmware, reporting závad a eskalace na test engineering tým"
    ],
    "exp.w2.title":"Majitel / Founder – marketingová agentura",
    "exp.w2.company":"Nevymyslíš lepší marketing · Moravskoslezský kraj",
    "exp.w2.items":[
      "Tvorba webů a webových aplikací, správa domén a DNS",
      "Technická správa webového a serverového zázemí",
      "Komunikace s klienty a zodpovědnost za dodání řešení"
    ],
    "exp.w3.title":"Klientská podpora – finance a bankovnictví",
    "exp.w3.items":[
      "Každodenní komunikace s klienty a řešení jejich požadavků",
      "Samostatnost, odpovědnost a důraz na výsledek"
    ],
    "exp.w4.title":"IT praxe / stáž",
    "exp.w4.items":[
      "Konfigurace síťových prvků – routery a switche v enterprise prostředí",
      "Stínování zkušených administrátorů, práce s dokumentací"
    ],
    "exp.w5.title":"IT Support – zahraniční stáž",
    "exp.w5.items":[
      "Příprava koncových zařízení, instalace OS, připojování do firemní sítě",
      "Komunikace s uživateli v angličtině"
    ],
    "exp.edu.title":"Maturita v oboru IT",
    "exp.edu.school":"Střední průmyslová škola · Frýdek-Místek",
    "exp.edu.items":[
      "Počítačové sítě (Cisco – routing & switching), Windows Server, Linux",
      "Programování (C#), databáze MySQL, PLC a HMI systémy Siemens"
    ],
    "proj.title":"Projekty & homelab",
    "proj.status.running":"běží","proj.status.deployed":"nasazeno","proj.status.live":"live",
    "proj.p1.name":"AI asistent na vlastní infrastruktuře",
    "proj.p1.desc":"Platforma pro správu úkolů a připomínek s lokálním LLM, běžící na Raspberry Pi a Mac mini – bez závislosti na cloudových AI službách.",
    "proj.p2.name":"Discord bot v Pythonu",
    "proj.p2.desc":"Vlastní bot s modulární cog architekturou, kontejnerizovaný a nasazený na Fly.io. Nahradil několik placených a nespolehlivých third-party botů.",
    "proj.p3.name":"Domácí síť na MikroTiku",
    "proj.p3.desc":"Návrh a správa domácí sítě – MikroTik hEX router a cAP ac access point, vlastní subnet, firewall pravidla a DNS filtrování přes Pi-hole.",
    "proj.p4.name":"Tento web",
    "proj.p4.desc":"Self-hosted portfolio – statický web bez frameworků, nasazený přes Cloudflare Pages a zároveň na vlastním Raspberry Pi s Nginx reverse proxy.",
    "skills.title":"Technické dovednosti",
    "skills.c1.title":"sítě",
    "skills.c1.i1":"Arista a Mellanox switche – konfigurace přes CLI",
    "skills.c1.i2":"MikroTik RouterOS",
    "skills.c1.i3":"Routing & switching, VLAN, subnetting",
    "skills.c1.i4":"Troubleshooting sítí",
    "skills.c2.title":"serverový hardware",
    "skills.c2.i1":"Testování a diagnostika serverů v produkci",
    "skills.c2.i2":"Síťové karty, management kontroléry, PCIe",
    "skills.c2.i3":"Flashování a aktualizace firmware",
    "skills.c2.i4":"Práce dle testovacích plánů, reporting závad",
    "skills.c3.title":"systémy & nástroje",
    "skills.c3.i1":"Linux CLI, Windows",
    "skills.c3.i2":"Skriptování – bash, PowerShell",
    "skills.c3.i3":"Docker, základy Pythonu",
    "skills.c3.i4":"Git, technická dokumentace",
    "skills.c4.title":"bezpečnost & podpora",
    "skills.c4.i1":"Základy síťové bezpečnosti, firewall pravidla",
    "skills.c4.i2":"VPN – přehled",
    "skills.c4.i3":"Uživatelská podpora v češtině i angličtině",
    "skills.c4.i4":"Komunikace s netechnickými uživateli",
    "certs.title":"Certifikace & jazyky",
    "certs.goal":"Aktuální cíl: dokončení plné CCNA certifikace.",
    "langs.cs":"Čeština","langs.cs.lvl":"rodilý mluvčí",
    "langs.en":"Angličtina","langs.ua":"Ukrajinština","langs.ru":"Ruština",
    "langs.de":"Němčina","langs.de.lvl":"začátečník",
    "contact.title":"Kontakt",
    "contact.lead":"Zajímají mě pozice v oblasti sítí, testování a IT podpory v Brně a okolí. Ozvěte se – rád si poslechnu, co stavíte.",
    "contact.phone":"telefon",
    "contact.note":"Brno, Česká republika · ochota učit se nové technologie · dlouhodobý směr: network / security",
    "footer.host":"self-hosted on raspberry pi · cloudflare pages"
  },
  en: {
    "nav.about":"About","nav.experience":"Experience","nav.projects":"Projects","nav.skills":"Skills","nav.contact":"Contact",
    "hero.eyebrow":"// test technician · brno, czechia",
    "hero.role":"Test Technician","hero.role2":"heading towards Network Engineering",
    "hero.lead":"I test and diagnose Microsoft servers in a production environment – Arista and Mellanox switches, Linux, bash and PowerShell. At home I build my own infrastructure, simply because I enjoy it.",
    "hero.cta":"Get in touch","hero.cta2":"Projects",
    "about.title":"About me",
    "about.lead":"I work as a test technician in Microsoft server manufacturing in Brno. Every day I diagnose hardware and software, configure Arista and Mellanox switches via CLI and automate routine work with bash and PowerShell scripts.",
    "about.p1":"I hold the Cisco CCNAv7: Introduction to Networks certification and run my own homelab – a MikroTik-based network, self-hosted services on a Raspberry Pi and Mac mini, and a custom AI assistant. What I learn at work I try at home, and vice versa.",
    "about.p2":"Long term, I'm heading towards a network technician / network engineer role. My next step is completing the full CCNA certification.",
    "about.k1":"location","about.v1":"Brno, Czechia",
    "about.k2":"role","about.v2":"Test Technician (medior)",
    "about.k3":"languages","about.v3":"CZ · EN · UA · RU · DE",
    "about.k4":"driving licence","about.v4":"category B",
    "about.k5":"direction","about.v5":"Network / Security",
    "exp.title":"Experience & education","exp.now":"current",
    "exp.w1.company":"Wistron – Microsoft server manufacturing · Brno",
    "exp.w1.items":[
      "Testing and diagnostics of newly manufactured Microsoft servers in a production environment",
      "Configuration of Arista and Mellanox switches via CLI within the test infrastructure",
      "Troubleshooting hardware and software failures of servers and network components",
      "Automating routine tasks with bash and PowerShell, working with Docker",
      "Firmware flashing, defect reporting and escalation to the test engineering team"
    ],
    "exp.w2.title":"Owner / Founder – marketing agency",
    "exp.w2.company":"Nevymyslíš lepší marketing · Moravian-Silesian Region",
    "exp.w2.items":[
      "Building websites and web applications, domain and DNS administration",
      "Technical management of web and server infrastructure",
      "Client communication and end-to-end responsibility for delivery"
    ],
    "exp.w3.title":"Client Support – finance & banking",
    "exp.w3.items":[
      "Daily client communication and request handling",
      "Independent, responsible work with focus on results"
    ],
    "exp.w4.title":"IT internship",
    "exp.w4.items":[
      "Configuration of network devices – routers and switches in an enterprise environment",
      "Shadowing experienced administrators, working with documentation"
    ],
    "exp.w5.title":"IT Support – internship abroad",
    "exp.w5.items":[
      "Endpoint preparation, OS installation, connecting devices to the corporate network",
      "Communicating with users in English"
    ],
    "exp.edu.title":"High School Diploma in IT",
    "exp.edu.school":"Secondary Technical School · Frýdek-Místek",
    "exp.edu.items":[
      "Computer networks (Cisco – routing & switching), Windows Server, Linux",
      "Programming (C#), MySQL databases, Siemens PLC and HMI systems"
    ],
    "proj.title":"Projects & homelab",
    "proj.status.running":"running","proj.status.deployed":"deployed","proj.status.live":"live",
    "proj.p1.name":"Self-hosted AI assistant",
    "proj.p1.desc":"Task and reminder management platform with a local LLM, running on a Raspberry Pi and Mac mini – no dependency on cloud AI services.",
    "proj.p2.name":"Python Discord bot",
    "proj.p2.desc":"Custom bot with a modular cog architecture, containerized and deployed on Fly.io. Replaced several paid and unreliable third-party bots.",
    "proj.p3.name":"Home network on MikroTik",
    "proj.p3.desc":"Design and administration of a home network – MikroTik hEX router and cAP ac access point, dedicated subnet, firewall rules and DNS filtering via Pi-hole.",
    "proj.p4.name":"This website",
    "proj.p4.desc":"Self-hosted portfolio – a static site with no frameworks, deployed via Cloudflare Pages and also on my own Raspberry Pi behind an Nginx reverse proxy.",
    "skills.title":"Technical skills",
    "skills.c1.title":"networking",
    "skills.c1.i1":"Arista and Mellanox switches – CLI configuration",
    "skills.c1.i2":"MikroTik RouterOS",
    "skills.c1.i3":"Routing & switching, VLANs, subnetting",
    "skills.c1.i4":"Network troubleshooting",
    "skills.c2.title":"server hardware",
    "skills.c2.i1":"Testing and diagnostics of servers in production",
    "skills.c2.i2":"Network cards, management controllers, PCIe",
    "skills.c2.i3":"Firmware flashing and updates",
    "skills.c2.i4":"Working with test plans, defect reporting",
    "skills.c3.title":"systems & tools",
    "skills.c3.i1":"Linux CLI, Windows",
    "skills.c3.i2":"Scripting – bash, PowerShell",
    "skills.c3.i3":"Docker, Python basics",
    "skills.c3.i4":"Git, technical documentation",
    "skills.c4.title":"security & support",
    "skills.c4.i1":"Network security fundamentals, firewall rules",
    "skills.c4.i2":"VPN – overview",
    "skills.c4.i3":"User support in Czech and English",
    "skills.c4.i4":"Communicating with non-technical users",
    "certs.title":"Certifications & languages",
    "certs.goal":"Current goal: completing the full CCNA certification.",
    "langs.cs":"Czech","langs.cs.lvl":"native",
    "langs.en":"English","langs.ua":"Ukrainian","langs.ru":"Russian",
    "langs.de":"German","langs.de.lvl":"beginner",
    "contact.title":"Contact",
    "contact.lead":"I'm interested in networking, testing and IT support roles in Brno and the surrounding region, including Vienna. Get in touch – I'd love to hear what you're building.",
    "contact.phone":"phone",
    "contact.note":"Brno, Czech Republic · open to Vienna (English-speaking roles) · long-term direction: network / security",
    "footer.host":"self-hosted on raspberry pi · cloudflare pages"
  }
};

let currentLang = localStorage.getItem("lang")
  || ((navigator.language || "en").toLowerCase().startsWith("cs") ? "cs" : "en");

function applyLang(lang){
  const t = translations[lang];
  document.documentElement.lang = lang;
  document.querySelectorAll("[data-i18n]").forEach(el=>{
    const key = el.getAttribute("data-i18n");
    if (t[key] !== undefined) el.textContent = t[key];
  });
  document.querySelectorAll("[data-i18n-list]").forEach(el=>{
    const key = el.getAttribute("data-i18n-list");
    const items = t[key];
    if (Array.isArray(items)){
      el.innerHTML = "";
      items.forEach(text=>{
        const li = document.createElement("li");
        li.textContent = text;
        el.appendChild(li);
      });
    }
  });
  document.getElementById("langToggle").textContent = lang === "cs" ? "EN" : "CZ";
  localStorage.setItem("lang", lang);
}

document.getElementById("langToggle").addEventListener("click", ()=>{
  currentLang = currentLang === "cs" ? "en" : "cs";
  applyLang(currentLang);
});

applyLang(currentLang);

/* ================= Nav (mobile) ================= */
const burger = document.getElementById("navBurger");
const navLinks = document.getElementById("navLinks");
burger.addEventListener("click", ()=>{
  const open = navLinks.classList.toggle("open");
  burger.setAttribute("aria-expanded", open);
});
navLinks.querySelectorAll("a").forEach(a=>
  a.addEventListener("click", ()=> navLinks.classList.remove("open"))
);

/* ================= Scroll reveal ================= */
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!reduceMotion && "IntersectionObserver" in window){
  const io = new IntersectionObserver(entries=>{
    entries.forEach(e=>{
      if (e.isIntersecting){ e.target.classList.add("visible"); io.unobserve(e.target); }
    });
  },{threshold:.12});
  document.querySelectorAll(".reveal").forEach(el=>io.observe(el));
} else {
  document.querySelectorAll(".reveal").forEach(el=>el.classList.add("visible"));
}

/* ================= Scroll top ================= */
const topBtn = document.getElementById("scrollTop");
window.addEventListener("scroll", ()=>{
  topBtn.classList.toggle("show", window.scrollY > 600);
},{passive:true});
topBtn.addEventListener("click", ()=> window.scrollTo({top:0,behavior: reduceMotion ? "auto" : "smooth"}));

/* ================= Footer year ================= */
document.getElementById("year").textContent = new Date().getFullYear();
</script>
</body>
</html>
