<!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 - Network Administrator & IT Support Specialist | Správce sítí a IT technik">
    <meta name="keywords" content="Network Administrator, IT Support, Cisco CCNA, Web Development, Roman Velička">
    <meta name="author" content="Roman Velička">
    <meta property="og:title" content="Roman Velička - Portfolio">
    <meta property="og:description" content="Network Administrator & IT Support Specialist with Cisco CCNA certification">
    <meta property="og:type" content="website">
    
    <title>Roman Velička - Portfolio</title>
    
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/animations.css">
    
    <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="loading-screen" class="loading-screen">
        <div class="loader"></div>
    </div>

    <nav class="navbar" id="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <span class="brand-text" data-i18n="name">Roman Velička</span>
            </div>
            <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="nav-menu" id="navMenu">
                <li class="nav-item"><a href="#about" class="nav-link" data-i18n="nav.about">O mně</a></li>
                <li class="nav-item"><a href="#experience" class="nav-link" data-i18n="nav.experience">Zkušenosti</a></li>
                <li class="nav-item"><a href="#projects" class="nav-link" data-i18n="nav.projects">Projekty</a></li>
                <li class="nav-item"><a href="#contact" class="nav-link" data-i18n="nav.contact">Kontakt</a></li>
                <li class="nav-item">
                    <button class="lang-toggle" id="langToggle" aria-label="Change language">
                        <span class="lang-flag" id="currentLang">🇨🇿</span>
                    </button>
                </li>
            </ul>
        </div>
    </nav>

    <main>
        <section id="hero" class="hero-section">
            <div class="hero-container">
                <div class="hero-content fade-in">
                    <div class="hero-image-wrapper">
                        <img src="assets/images/profile.jpg" alt="Roman Velička" class="hero-image">
                    </div>
                    <h1 class="hero-title">Roman Velička</h1>
                    <p class="hero-subtitle" data-i18n="hero.title">Network Administrator & IT Support Specialist</p>
                    <div class="hero-cta">
                        <a href="#contact" class="btn btn-primary" data-i18n="hero.cta">Kontaktujte mě</a>
                        <a href="#projects" class="btn btn-secondary" data-i18n="hero.projects">Projekty</a>
                    </div>
                </div>
            </div>
            <div class="scroll-indicator">
                <span data-i18n="hero.scroll">Scrollujte dolů</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
            </div>
        </section>

        <section id="about" class="about-section section">
            <div class="container">
                <h2 class="section-title" data-i18n="about.title">O mně</h2>
                <div class="about-content">
                    <div class="about-text">
                        <p class="lead" data-i18n="about.summary"></p>
                        
                        <div class="info-grid">
                            <div class="info-item">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                    <circle cx="12" cy="10" r="3"></circle>
                                </svg>
                                <div>
                                    <strong data-i18n="about.location.title">Lokace</strong>
                                    <p data-i18n="about.location.value">Brno nebo Ostrava</p>
                                </div>
                            </div>
                            <div class="info-item">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
                                    <polyline points="12 6 12 12 16 14"></polyline>
                                </svg>
                                <div>
                                    <strong data-i18n="about.availability.title">Dostupnost</strong>
                                    <p data-i18n="about.availability.value">Připraven začít</p>
                                </div>
                            </div>
                            <div class="info-item">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                </svg>
                                <div>
                                    <strong data-i18n="about.license.title">Řidičský průkaz</strong>
                                    <p data-i18n="about.license.value">Kategorie B</p>
                                </div>
                            </div>
                            <div class="info-item">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                </svg>
                                <div>
                                    <strong data-i18n="about.languages.title">Jazyky</strong>
                                    <p data-i18n="about.languages.value">Čeština, Angličtina, Ruština</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="skills-section">
                        <h3 data-i18n="skills.title">Klíčové dovednosti</h3>
                        <div class="skills-categories">
                            <div class="skill-category">
                                <h4 data-i18n="skills.networks.title">Sítě & Infrastruktura</h4>
                                <ul class="skill-list">
                                    <li data-i18n="skills.networks.item1">Routing & Switching</li>
                                    <li data-i18n="skills.networks.item2">VLAN, IP adresace, subnetting</li>
                                    <li data-i18n="skills.networks.item3">Základní troubleshooting sítí</li>
                                    <li data-i18n="skills.networks.item4">Práce s aktivními síťovými prvky</li>
                                </ul>
                            </div>
                            <div class="skill-category">
                                <h4 data-i18n="skills.systems.title">Operační systémy</h4>
                                <ul class="skill-list">
                                    <li data-i18n="skills.systems.item1">Windows (klient & server)</li>
                                    <li data-i18n="skills.systems.item2">Linux (základní správa, CLI)</li>
                                    <li data-i18n="skills.systems.item3">Windows Server role</li>
                                </ul>
                            </div>
                            <div class="skill-category">
                                <h4 data-i18n="skills.security.title">Bezpečnost</h4>
                                <ul class="skill-list">
                                    <li data-i18n="skills.security.item1">Základy síťové bezpečnosti</li>
                                    <li data-i18n="skills.security.item2">Firewallová pravidla, VPN</li>
                                    <li data-i18n="skills.security.item3">Základy kybernetické bezpečnosti</li>
                                </ul>
                            </div>
                            <div class="skill-category">
                                <h4 data-i18n="skills.support.title">Support & Dokumentace</h4>
                                <ul class="skill-list">
                                    <li data-i18n="skills.support.item1">Řešení ticketů</li>
                                    <li data-i18n="skills.support.item2">Technická dokumentace</li>
                                    <li data-i18n="skills.support.item3">Komunikace s klienty (CZ/EN)</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="experience" class="experience-section section">
            <div class="container">
                <h2 class="section-title" data-i18n="experience.title">Zkušenosti & Vzdělání</h2>
                
                <div class="timeline">
                    <div class="timeline-item" data-category="work">
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <div>
                                    <h3 data-i18n="experience.work1.title">Majitel / Founder</h3>
                                    <p class="company" data-i18n="experience.work1.company">Nevymyslíš lepší marketing</p>
                                </div>
                                <span class="timeline-period" data-i18n="experience.work1.period">07/2025 - současnost</span>
                            </div>
                            <p class="timeline-location" data-i18n="experience.work1.location">Moravskoslezský Kraj, Czech Republic</p>
                            <ul class="timeline-responsibilities" data-i18n-list="experience.work1.responsibilities"></ul>
                        </div>
                    </div>

                    <div class="timeline-item" data-category="work">
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <div>
                                    <h3 data-i18n="experience.work2.title">Obchod / Finance a bankovnictví</h3>
                                    <p class="company" data-i18n="experience.work2.company">Partners Banka</p>
                                </div>
                                <span class="timeline-period" data-i18n="experience.work2.period">03/2023 - 01/2026</span>
                            </div>
                            <p class="timeline-location" data-i18n="experience.work2.location">Ostrava/Kopřivnice, Czech Republic</p>
                            <ul class="timeline-responsibilities" data-i18n-list="experience.work2.responsibilities"></ul>
                        </div>
                    </div>

                    <div class="timeline-item" data-category="work">
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <div>
                                    <h3 data-i18n="experience.work3.title">IT praxe / stáž</h3>
                                    <p class="company" data-i18n="experience.work3.company">Tietoevry</p>
                                </div>
                                <span class="timeline-period" data-i18n="experience.work3.period">09/2022 - 01/2023</span>
                            </div>
                            <p class="timeline-location" data-i18n="experience.work3.location">Ostrava, Czech Republic</p>
                            <ul class="timeline-responsibilities" data-i18n-list="experience.work3.responsibilities"></ul>
                        </div>
                    </div>

                    <div class="timeline-item" data-category="work">
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <div>
                                    <h3 data-i18n="experience.work4.title">IT Support - Foreign Internship</h3>
                                    <p class="company" data-i18n="experience.work4.company">Horizon2000 Computers</p>
                                </div>
                                <span class="timeline-period" data-i18n="experience.work4.period">02/2022 - 03/2022</span>
                            </div>
                            <p class="timeline-location" data-i18n="experience.work4.location">Malta</p>
                            <ul class="timeline-responsibilities" data-i18n-list="experience.work4.responsibilities"></ul>
                        </div>
                    </div>

                    <div class="timeline-item" data-category="education">
                        <div class="timeline-marker"></div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <div>
                                    <h3 data-i18n="experience.edu1.title">Maturita v oboru IT</h3>
                                    <p class="company" data-i18n="experience.edu1.school">Střední průmyslová škola</p>
                                </div>
                                <span class="timeline-period" data-i18n="experience.edu1.period">2019 - 2023</span>
                            </div>
                            <p class="timeline-location" data-i18n="experience.edu1.location">Frýdek-Místek, Czech Republic</p>
                            <ul class="timeline-responsibilities" data-i18n-list="experience.edu1.subjects"></ul>
                        </div>
                    </div>
                </div>

                <div class="certifications">
                    <h3 data-i18n="certifications.title">Certifikace</h3>
                    <div class="cert-grid">
                        <div class="cert-card">
                            <div class="cert-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                                    <path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path>
                                </svg>
                            </div>
                            <h4>Cisco CCNAv7</h4>
                            <p data-i18n="certifications.ccna">Introduction to Networks</p>
                        </div>
                        <div class="cert-card">
                            <div class="cert-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                                    <line x1="8" y1="21" x2="16" y2="21"></line>
                                    <line x1="12" y1="17" x2="12" y2="21"></line>
                                </svg>
                            </div>
                            <h4>Cisco IT Essentials</h4>
                            <p data-i18n="certifications.essentials">Hardware & Software Fundamentals</p>
                        </div>
                        <div class="cert-card">
                            <div class="cert-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                                </svg>
                            </div>
                            <h4>ECDL</h4>
                            <p data-i18n="certifications.ecdl">European Computer Driving Licence</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="projects-section section">
            <div class="container">
                <h2 class="section-title" data-i18n="projects.title">Projekty</h2>
                
                <div class="projects-tabs">
                    <button class="tab-btn active" data-category="all" data-i18n="projects.tabs.all">Všechny</button>
                    <button class="tab-btn" data-category="web" data-i18n="projects.tabs.web">Web Development</button>
                    <button class="tab-btn" data-category="network" data-i18n="projects.tabs.network">Network</button>
                </div>

                <div class="projects-grid">
                    <div class="project-card" data-category="web">
                        <div class="project-header">
                            <div class="project-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                </svg>
                            </div>
                            <span class="project-status" data-i18n="projects.status.completed">Dokončeno</span>
                        </div>
                        <h3 data-i18n="projects.web1.title">Rezervační systém pro sdílenou kancelář</h3>
                        <p data-i18n="projects.web1.description">Vlastní rezervační systém pro správu sdílených pracovních prostor s real-time dostupností a správou uživatelů.</p>
                        <div class="project-tech">
                            <span class="tech-tag">HTML/CSS/JS</span>
                            <span class="tech-tag">Database</span>
                            <span class="tech-tag">AI-Assisted</span>
                        </div>
                        <a href="https://pricna.cz" target="_blank" rel="noopener noreferrer" class="project-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                                <polyline points="15 3 21 3 21 9"></polyline>
                                <line x1="10" y1="14" x2="21" y2="3"></line>
                            </svg>
                            <span data-i18n="projects.visitSite">Navštívit web</span>
                        </a>
                    </div>

                    <div class="project-card" data-category="web">
                        <div class="project-header">
                            <div class="project-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="9" cy="21" r="1"></circle>
                                    <circle cx="20" cy="21" r="1"></circle>
                                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                                </svg>
                            </div>
                            <span class="project-status status-progress" data-i18n="projects.status.progress">Probíhá</span>
                        </div>
                        <h3 data-i18n="projects.web2.title">E-shop pro malou firmu</h3>
                        <p data-i18n="projects.web2.description">Kompletní e-commerce řešení s košíkem, správou produktů a integracemi pro platby.</p>
                        <div class="project-tech">
                            <span class="tech-tag">E-commerce</span>
                            <span class="tech-tag">Payment Integration</span>
                            <span class="tech-tag">CMS</span>
                        </div>
                        <a href="https://monlii.cz" target="_blank" rel="noopener noreferrer" class="project-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                                <polyline points="15 3 21 3 21 9"></polyline>
                                <line x1="10" y1="14" x2="21" y2="3"></line>
                            </svg>
                            <span data-i18n="projects.visitSite">Navštívit web</span>
                        </a>
                    </div>

                    <div class="project-card" data-category="web">
                        <div class="project-header">
                            <div class="project-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                            </div>
                            <span class="project-status status-active" data-i18n="projects.status.active">V provozu</span>
                        </div>
                        <h3 data-i18n="projects.web3.title">Marketingová agentura</h3>
                        <p data-i18n="projects.web3.description">Webová prezentace a CRM systém pro vlastní marketingovou agenturu zaměřenou na tvorbu webů a digitální marketing.</p>
                        <div class="project-tech">
                            <span class="tech-tag">Web Design</span>
                            <span class="tech-tag">CRM</span>
                            <span class="tech-tag">Marketing</span>
                        </div>
                        <a href="https://nevymyslis.cz" target="_blank" rel="noopener noreferrer" class="project-link">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                                <polyline points="15 3 21 3 21 9"></polyline>
                                <line x1="10" y1="14" x2="21" y2="3"></line>
                            </svg>
                            <span data-i18n="projects.visitSite">Navštívit web</span>
                        </a>
                    </div>

                    <div class="project-card" data-category="network">
                        <div class="project-header">
                            <div class="project-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
                                    <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
                                    <line x1="6" y1="6" x2="6.01" y2="6"></line>
                                    <line x1="6" y1="18" x2="6.01" y2="18"></line>
                                </svg>
                            </div>
                            <span class="project-status status-progress" data-i18n="projects.status.progress">Probíhá</span>
                        </div>
                        <h3 data-i18n="projects.network1.title">Self-hosted CV Website na Raspberry Pi</h3>
                        <p data-i18n="projects.network1.description">Osobní portfolio hostované na vlastní síťové infrastruktuře s Nginx reverse proxy.</p>
                        <div class="project-tech">
                            <span class="tech-tag">Raspberry Pi 4</span>
                            <span class="tech-tag">Nginx</span>
                            <span class="tech-tag">DNS</span>
                        </div>
                    </div>

                    <div class="project-card" data-category="network">
                        <div class="project-header">
                            <div class="project-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="2" y1="12" x2="22" y2="12"></line>
                                    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
                                </svg>
                            </div>
                            <span class="project-status status-active" data-i18n="projects.status.active">Aktivní</span>
                        </div>
                        <h3 data-i18n="projects.network2.title">Home Network s Pi-hole</h3>
                        <p data-i18n="projects.network2.description">Síťové blokování reklam a správa DNS pro domácí síť pomocí Raspberry Pi.</p>
                        <div class="project-tech">
                            <span class="tech-tag">Pi-hole</span>
                            <span class="tech-tag">DNS</span>
                            <span class="tech-tag">Network Security</span>
                        </div>
                    </div>

                    <div class="project-card" data-category="network">
                        <div class="project-header">
                            <div class="project-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                                    <line x1="12" y1="22.08" x2="12" y2="12"></line>
                                </svg>
                            </div>
                            <span class="project-status status-progress" data-i18n="projects.status.progress">Probíhá</span>
                        </div>
                        <h3 data-i18n="projects.network3.title">N8N Automatizace a AI</h3>
                        <p data-i18n="projects.network3.description">Učím se workflow automatizaci pomocí N8N, integraci AI nástrojů a nastavování monitoringu zařízení a serverů s autofix skripty pro běžné chyby.</p>
                        <div class="project-tech">
                            <span class="tech-tag">N8N</span>
                            <span class="tech-tag">AI</span>
                            <span class="tech-tag">Monitoring</span>
                        </div>
                    </div>

                    <div class="project-card project-placeholder" data-category="network">
                        <div class="project-header">
                            <div class="project-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
                                    <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
                                    <line x1="6" y1="6" x2="6.01" y2="6"></line>
                                    <line x1="6" y1="18" x2="6.01" y2="18"></line>
                                </svg>
                            </div>
                            <span class="project-status status-future" data-i18n="projects.status.future">Plánováno</span>
                        </div>
                        <h3 data-i18n="projects.future1.title">NAS - Lokální síťové úložiště</h3>
                        <p data-i18n="projects.future1.description">Vlastní NAS řešení pro centralizované ukládání dat v domácí síti s vzdáleným přístupem a automatickým zálohováním.</p>
                        <div class="project-tech">
                            <span class="tech-tag">NAS</span>
                            <span class="tech-tag">Storage</span>
                            <span class="tech-tag">Network</span>
                        </div>
                    </div>

                    <div class="project-card project-placeholder" data-category="network">
                        <div class="project-header">
                            <div class="project-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path>
                                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                                    <line x1="12" y1="19" x2="12" y2="23"></line>
                                    <line x1="8" y1="23" x2="16" y2="23"></line>
                                </svg>
                            </div>
                            <span class="project-status status-future" data-i18n="projects.status.future">Plánováno</span>
                        </div>
                        <h3 data-i18n="projects.future2.title">AI Hlasový asistent</h3>
                        <p data-i18n="projects.future2.description">Vlastní AI hlasový asistent s přizpůsobitelnými skripty pro automatizaci domácích a pracovních úloh.</p>
                        <div class="project-tech">
                            <span class="tech-tag">AI</span>
                            <span class="tech-tag">Voice Recognition</span>
                            <span class="tech-tag">Automation</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact-section section">
            <div class="container">
                <h2 class="section-title" data-i18n="contact.title">Kontakt</h2>
                
                <div class="contact-content">
                    <div class="contact-info">
                        <div class="contact-intro">
                            <p class="lead" data-i18n="contact.intro">Hledám nové příležitosti v oblasti správy sítí a IT podpory. Rád se dozvím o vaší nabídce!</p>
                        </div>

                        <div class="contact-methods">
                            <a href="mailto:roman.velicka1@gmail.com" class="contact-method">
                                <div class="contact-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                                        <polyline points="22,6 12,13 2,6"></polyline>
                                    </svg>
                                </div>
                                <div>
                                    <strong data-i18n="contact.email.label">Email</strong>
                                    <p>roman.velicka1@gmail.com</p>
                                </div>
                            </a>

                            <a href="tel:+420737657407" class="contact-method">
                                <div class="contact-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <strong data-i18n="contact.phone.label">Telefon</strong>
                                    <p>+420 737 657 407</p>
                                </div>
                            </a>

                            <a href="https://linkedin.com/in/romanvelicka/" target="_blank" rel="noopener noreferrer" class="contact-method">
                                <div class="contact-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                                        <rect x="2" y="9" width="4" height="12"></rect>
                                        <circle cx="4" cy="4" r="2"></circle>
                                    </svg>
                                </div>
                                <div>
                                    <strong>LinkedIn</strong>
                                    <p>linkedin.com/in/romanvelicka</p>
                                </div>
                            </a>

                            <div class="contact-method">
                                <div class="contact-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg>
                                </div>
                                <div>
                                    <strong data-i18n="contact.location.label">Lokace</strong>
                                    <p data-i18n="contact.location.value">Brno nebo Ostrava - Czech Republic</p>
                                </div>
                            </div>
                        </div>

                        <div class="additional-info">
                            <h3 data-i18n="contact.additional.title">Další informace</h3>
                            <ul>
                                <li data-i18n="contact.additional.item1">Ochota cestovat</li>
                                <li data-i18n="contact.additional.item2">Ochota učit se nové technologie</li>
                                <li data-i18n="contact.additional.item3">Zájem o dlouhodobý profesní růst (směr Network / Security)</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>&copy; <span id="currentYear"></span> Roman Velička. <span data-i18n="footer.rights">Všechna práva vyhrazena.</span></p>
                <p class="footer-tech" data-i18n="footer.tech">Postaveno s HTML, CSS a JavaScript</p>
            </div>
        </div>
    </footer>

    <button id="scrollTop" class="scroll-top" aria-label="Scroll to top">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="18 15 12 9 6 15"></polyline>
        </svg>
    </button>

    <script src="js/language.js"></script>
    <script src="js/navigation.js"></script>
    <script src="js/animations.js"></script>
</body>
</html>
