Files
TD_Portfolio/index.html
T
Tomáš Dvořák 27144b2e17 fef
2025-09-10 14:39:20 +02:00

969 lines
64 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tomas Dvorak - Portfolio</title>
<meta name="keywords" content="Personal Portfolio, Tomáš Dvořák, Tomas Dvorak, Programmer, Hacker, Video Editor, Photographer, Web Developer, Developer">
<meta name="author" content="Tomáš Dvořák">
<meta name="title" content="Tomas Dvorak - Personal Portfolio">
<meta name="description" content="Personal portfolio by Tomas Dvorak">
<link rel="shortcut icon" href="icon.png" type="logo">
<link rel="icon" type="image/png" sizes="32x32" href="icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<meta property="og:url" content="https://tdvorak.dev">
<meta property="og:type" content="website">
<meta property="og:title" content="Tomáš Dvořák - Portfolio">
<meta property="og:description" content="Tomáš Dvořák Personal Portfolio">
<meta content="https://tdvorak.dev/images/tdvorak.png" property="og:image" />
<meta content="#ffffff" data-react-helmet="true" name="theme-color"/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tomáš Dvořák - Portfolio">
<meta name="twitter:description" content="Tomáš Dvořák Personal Portfolio">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500&family=Open+Sans:wght@400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="topbar">
<a href="https://tdvorak.dev/" class="logo">
<img src="images/Logo_dark.png" alt="Tomáš Dvořák" width="145" height="32" class="dark">
</a>
<button class="icon-btn theme-btn" data-theme-btn>
<div class="state-layer"></div>
</button>
</header>
<main>
<article>
<section class="section hero">
<div class="container">
<figure class="hero-banner img-holder" style="--width: 240; --height: 240;">
<img src="logo.png" width="240" height="240" alt="Tomáš Dvořák" class="img-cover">
</figure>
<div class="hero-content">
<span class="label-large section-subtitle"><i>CTO, Full-Stack Developer, WhiteHat</i></span>
<h1 class="display-small"><strong>Tomáš Dvořák</strong></h1>
<p class="body-large section-text">
Co-Founder & CTO at <strong>SportCreative</strong>. <br>
Full-Stack Developer at <strong>Poppe + Potthoff</strong>. <br>
Focused on <strong>Golang, web technologies & IT security</strong>.
</p>
<p class="body-large section-text"><i>Spojuji vývoj, design a infrastrukturu v jeden funkční celek, který přináší reálné výsledky.</i></p>
<div class="btn-wrapper">
<a href="mailto:info@tdvorak.dev" class="chip">
<span class="material-symbols-outlined" aria-hidden="true"> mail </span>
<span class="label-large">info@tdvorak.dev</span>
<div class="state-layer"></div>
</a>
</div>
</div>
</div>
</section>
<div class="article">
<div class="about-card">
<h2 class="card-title title-medium">About</h2>
<p class="body-medium card-text">
I am a <strong>Full-Stack Web Developer</strong> specializing in
<strong>Golang</strong> and modern <strong>frontend development</strong>.
My toolkit includes <strong>Docker</strong>, <strong>Proxmox</strong>,
<strong>Linux/Ubuntu</strong>, <strong>Git</strong>, and <strong>GitHub</strong> for efficient development and deployment workflows.<br><br>
I also work in <strong>2D graphic design</strong> with
<a href="https://www.adobe.com/products/photoshop.html" target="_blank" alt="photoshop"><strong>Photoshop</strong></a> and
<a href="https://www.adobe.com/products/photoshop-lightroom/mobile.html" target="_blank" alt="lightroom"><strong>Lightroom</strong></a>,
focus on <strong>IT security & penetration testing</strong> with
<a href="https://www.kali.org/" target="_blank" alt="kali linux"><strong>Kali Linux</strong></a>,
and create through <strong>video editing</strong> in
<a href="https://www.blackmagicdesign.com/products/davinciresolve" target="_blank" alt="davinci resolve"><strong>DaVinci Resolve</strong></a> and
<a href="https://photo.tdvorak.dev" target="_blank"><strong>photography & cinematography</strong></a>.
</p>
<style>
.body-medium a {
display: inline;
margin: 0;
}
</style>
<ul class="about-list">
<li class="list-item">
<span class="material-symbols-outlined" aria-hidden="true"> location_on </span>
<a href="https://en.wikipedia.org/wiki/Czech_Republic" target="_blank" class="label-medium">Czech Republic</a>
</li>
<li class="list-item">
<span class="material-symbols-outlined" aria-hidden="true"> work </span>
<a href="https://sgasos.cz" target="_blank" class="label-medium">Student</a>
</li>
<li class="list-item">
<span class="label-medium">TOR Website ⮧</span>
</li>
<p class="label-medium">tdvorak5yysirjdcvecyyde5svpkycu<br>heneavst4ahbgguiid5tuxwid.onion</p>
</ul>
</div>
<div>
<div class="primary-tabs">
<button class="tab-btn active" data-tab-btn="project">
<span class="tab-text title-small">Projects</span>
<div class="state-layer"></div>
</button>
<button class="tab-btn" data-tab-btn="resume">
<span class="tab-text title-small">Resume</span>
<div class="state-layer"></div>
</button>
<button class="tab-btn" data-tab-btn="contact">
<span class="tab-text title-small">Contact</span>
<div class="state-layer"></div>
</button>
</div>
<section class="section tab-content active" data-tab-content="project">
<div class="container">
<div class="project-list">
<!-- SparkScreen -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/sparkscreen.png" alt="SparkScreen" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">SparkScreen</h3>
</div>
<a href="https://www.sparkscreen.xyz/" target="_blank" class="state-layer" title="Free and open-source platform for movies and TV shows"></a>
</div>
<!-- SportCreative -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/sportcreative.png" alt="SportCreative" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Agency Website</span>
<h3 class="title-large card-title">SportCreative</h3>
</div>
<a href="https://www.sportcreative.eu/" target="_blank" class="state-layer" title="Digitální marketing pro sportovní týmy a společnosti"></a>
</div>
<!-- MyClub (SportCreative) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/sportcreative.png" alt="MyClub by SportCreative" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">MyClub</h3>
</div>
<a href="https://www.myclub.sportcreative.eu/" target="_blank" class="state-layer" title="Systém pro kluby, klubové weby, automatizace"></a>
</div>
<!-- ZEUS CZ -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/zeus.cz.png" alt="ZEUS CZ" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Eshop</span>
<h3 class="title-large card-title">ZEUS (CZ)</h3>
</div>
<a href="https://www.zeusport.cz/" target="_blank" class="state-layer" title="Váš partner pro profesionální sportovní vybavení"></a>
</div>
<!-- ZEUS EU (selfhosted) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/zeus.eu.png" alt="ZEUS EU" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">ZEUS (EU)</h3>
</div>
<a href="https://www.zeusport.eu/" target="_blank" class="state-layer" title="Váš partner pro profesionální sportovní vybavení"></a>
</div>
<!-- Bizoni UH (club site) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/bizoni.png" alt="Bizoni UH" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">Bizoni UH</h3>
</div>
<a href="https://www.bizoniuh.cz/" target="_blank" class="state-layer" title="Klubový web Bizoni UH"></a>
</div>
<!-- Reklik (landing) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/reklik.png" alt="Reklik landing" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Landing Page</span>
<h3 class="title-large card-title">Reklik</h3>
</div>
<a href="https://www.reklik.net/" target="_blank" class="state-layer" title="Profesionální fotografování nemovitostí"></a>
</div>
<!-- Reklik Foto (portfolio) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/reklik.foto.png" alt="Reklik foto portfolio" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">Reklik Foto</h3>
</div>
<a href="https://foto.reklik.net/" target="_blank" class="state-layer" title="Profesionální fotografování nemovitostí - portfolio"></a>
</div>
<!-- Personal Portfolio -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/tdvorak.png" alt="Personal portfolio" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfdeveloped</span>
<h3 class="title-large card-title">Personal Portfolio</h3>
</div>
<a href="https://www.tdvorak.dev/" target="_blank" class="state-layer" title="Personal portfolio"></a>
</div>
<!-- 1337x scraper -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/1337x.png" alt="1337x scraper" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">1337x Scraper</h3>
</div>
<a href="https://1337x.tdvorak.dev/" target="_blank" class="state-layer" title="1337x scraper, torrents"></a>
</div>
<!-- Filecloud -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/filecloud.png" alt="Filecloud" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">Filecloud</h3>
</div>
<a href="https://cloud.tdvorak.dev/" target="_blank" class="state-layer" title="Filecloud"></a>
</div>
<!-- Coolify -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/coolify.png" alt="Coolify" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">Coolify</h3>
</div>
<a href="https://coolify.tdvorak.dev/" target="_blank" class="state-layer" title="Coolify"></a>
</div>
<!-- Glance Dashboard -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/dash.png" alt="Glance dashboard" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">Glance Dashboard</h3>
</div>
<a href="https://dash.tdvorak.dev/" target="_blank" class="state-layer" title="Glance dashboard"></a>
</div>
<!-- FAČR scraper -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/facr.png" alt="FAČR scraper" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">FAČR Scraper</h3>
</div>
<a href="https://facr.tdvorak.dev/" target="_blank" class="state-layer" title="FAČR scraper, Czech football and futsal info"></a>
</div>
<!-- SparkScreen API (GoAPI) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/sparkscreen.png" alt="SparkScreen API (GoAPI)" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">GoAPI</h3>
</div>
<a href="https://goapi.tdvorak.dev/" target="_blank" class="state-layer" title="SparkScreen API, movies, stats"></a>
</div>
<!-- Personal photo portfolio -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/immich.png" alt="Personal photo portfolio" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">Photo Portfolio</h3>
</div>
<a href="https://image.tdvorak.dev/" target="_blank" class="state-layer" title="Personal photo portfolio"></a>
</div>
<!-- Memos (notepad) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/memos.png" alt="Memos notepad" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">Memos</h3>
</div>
<a href="https://memos.tdvorak.dev/" target="_blank" class="state-layer" title="Notepad"></a>
</div>
<!-- n8n -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/project11.webp" alt="n8n automations" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">n8n</h3>
</div>
<a href="https://n8n.tdvorak.dev/" target="_blank" class="state-layer" title="n8n automations"></a>
</div>
<!-- Plex -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/plex.png" alt="Plex/Plexamp" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">Plex</h3>
</div>
<a href="https://plex.tdvorak.dev/" target="_blank" class="state-layer" title="Plex, Plexamp"></a>
</div>
<!-- Proxmox -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/proxmox.png" alt="Proxmox" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">Proxmox</h3>
</div>
<a href="https://proxmox.tdvorak.dev/" target="_blank" class="state-layer" title="Proxmox"></a>
</div>
<!-- Sendmail API -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/project12.webp" alt="Email sending API" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">Sendmail API</h3>
</div>
<a href="https://sendmail.tdvorak.dev/" target="_blank" class="state-layer" title="Email sending API"></a>
</div>
<!-- Status (Uptime Kuma) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/kuma.png" alt="Status page (Kuma)" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">Status</h3>
</div>
<a href="https://status.tdvorak.dev/" target="_blank" class="state-layer" title="Status page (Kuma)"></a>
</div>
<!-- UPS (NUT GUI) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/nut.png" alt="NUT web GUI" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted</span>
<h3 class="title-large card-title">UPS (NUT)</h3>
</div>
<a href="https://ups.tdvorak.dev/" target="_blank" class="state-layer" title="Dockerized web GUI for NUT"></a>
</div>
<!-- YouTube channel data scraper API -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/youtube.png" alt="YouTube data scraper API" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">YouTube Scraper API</h3>
</div>
<a href="https://youtube.tdvorak.dev/" target="_blank" class="state-layer" title="YouTube channel data scraper API"></a>
</div>
<!-- YouTube search scraper API (proxy) -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/ytbproxy.png" alt="YouTube search scraper API" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">YouTube Proxy API</h3>
</div>
<a href="https://ytbproxy.tdvorak.dev/" target="_blank" class="state-layer" title="YouTube search scraper API"></a>
</div>
<!-- Personal Music Page -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/music.png" alt="Personal music page" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">Music</h3>
</div>
<a href="https://music.tdvorak.dev/" target="_blank" class="state-layer" title="Personal music page"></a>
</div>
<!-- Personal Blog -->
<div class="card">
<figure class="card-banner img-holder" style="--width: 334; --height: 180;">
<img src="images/projects/blog.png" alt="Personal blog" width="334" height="180" class="img-cover">
</figure>
<div class="card-content">
<span class="label-large card-subtitle">Selfhosted • Selfdeveloped</span>
<h3 class="title-large card-title">Blog</h3>
</div>
<a href="https://blog.tdvorak.dev/" target="_blank" class="state-layer" title="Personal blog"></a>
</div>
</div>
</div>
</section>
<section class="section tab-content resume-tab" data-tab-content="resume">
<div class="container">
<div class="resume-header">
<a class="resume-linkedin-btn" href="https://www.linkedin.com/in/tdvorak-dev" target="_blank" rel="noopener">Zobrazit kompletní profil na LinkedIn</a>
</div>
<h2 class="section-title title-small">Work Experience:</h2>
<ul class="list timeline">
<li class="resume-item timeline-item" data-start="2025-06" data-end="present">
<div class="resume-card">
<p class="body-large">Full Stack Developer — <strong>Poppe + Potthoff s.r.o.</strong></p>
<span class="label-medium card-subtitle">Na smlouvu · červen 2025 současnost · <span class="duration" data-start="2025-06" data-end="present"></span> · Kunovice, Zlínský, Česko</span>
<span class="body-medium card-text">Vývoj interních aplikací v Go + Tailwind, správa sítí a podpora IT, virtualizace v Proxmoxu.</span>
<span class="label-medium card-subtitle">Dovednosti: Tech support · IT infrastruktura · Go · Git · HTML5 · Tailwind CSS</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2025-05" data-end="2025-06">
<div class="resume-card">
<p class="body-large">Asistent IT — <strong>Poppe + Potthoff s.r.o.</strong></p>
<span class="label-medium card-subtitle">Stáž · květen 2025 červen 2025 · <span class="duration" data-start="2025-05" data-end="2025-06"></span> · Kunovice, Zlínský, Česko</span>
<span class="body-medium card-text">Webportal (Go, Tailwind, HTML5), virtualizace Proxmox, Git a zabezpečení přes Cloudflare.</span>
<span class="label-medium card-subtitle">Dovednosti: Go · HTML5 · Tailwind CSS · Proxmox · Cloudflare · Git</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2025-06" data-end="present">
<div class="resume-card">
<p class="body-large">Zakladatel — <strong>Vibly</strong></p>
<span class="label-medium card-subtitle">Živnostník · červen 2025 současnost · <span class="duration" data-start="2025-06" data-end="present"></span> · Uherské Hradiště · Hybridní</span>
<span class="label-medium card-subtitle">Dovednosti: Fotografie · Digitální marketing · HTML5 · Go</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2025-06" data-end="present">
<div class="resume-card">
<p class="body-large">Spoluzakladatel & CTO — <strong>ReKlik</strong></p>
<span class="label-medium card-subtitle">Živnostník · červen 2025 současnost · <span class="duration" data-start="2025-06" data-end="present"></span> · Uherské Hradiště · Onsite</span>
<span class="body-medium card-text">Technologický rozvoj a vizuální kvalita. Focení nemovitostí, workflow od focení po dodání.</span>
<span class="label-medium card-subtitle">Dovednosti: Fotografie · Marketing · Nemovitosti · Komerční fotografie · Úprava fotografií</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2025-04" data-end="present">
<div class="resume-card">
<p class="body-large">Spoluzakladatel & CTO — <strong>SportCreative</strong></p>
<span class="label-medium card-subtitle">Živnostník · duben 2025 současnost · <span class="duration" data-start="2025-04" data-end="present"></span> · Uherské Hradiště · Hybridní</span>
<span class="body-medium card-text">Vedení technické a kreativní strategie. Sociální sítě, weby, obsah a partnerství pro sportovní kluby.</span>
<span class="label-medium card-subtitle">Dovednosti: Grafický design · Fotografie · Photoshop · Digitální marketing · Fullstack vývoj</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2025-05" data-end="present">
<div class="resume-card">
<p class="body-large">Vývojář webových stránek, Marketing — <strong>WHS sport s.r.o.</strong></p>
<span class="label-medium card-subtitle">Na volné noze · květen 2025 současnost · <span class="duration" data-start="2025-05" data-end="present"></span> · Brno · Remote</span>
<span class="body-medium card-text">Podpora expanze značky ZEUS v ČR. Vývoj/správa webů, ecommerce koordinace a vizuální identita.</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2024-09" data-end="present">
<div class="resume-card">
<p class="body-large">Manažer marketingu — <strong>Winnersport a.s.</strong></p>
<span class="label-medium card-subtitle">Na volné noze · září 2024 současnost · <span class="duration" data-start="2024-09" data-end="present"></span> · Česko · Remote</span>
<span class="body-medium card-text">Správa sítí a obsahu, vylepšení eshopu, kreativní projekty a grafická podpora značky.</span>
<span class="label-medium card-subtitle">Dovednosti: Propagace produktů · Photoshop · Marketing na sociálních sítích · Webové služby</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2024-10" data-end="present">
<div class="resume-card">
<p class="body-large">Vývojář webových stránek — <strong>FC Bizoni Uherské Hradiště, z.s.</strong></p>
<span class="label-medium card-subtitle">Na volné noze · říjen 2024 současnost · <span class="duration" data-start="2024-10" data-end="present"></span> · Uherské Hradiště · Remote</span>
<span class="body-medium card-text">Tvorba a správa klubového webu, UX, správa YouTube/TikTok, krátká videa a klubová fotografie.</span>
<span class="label-medium card-subtitle">Dovednosti: CSS · Fotografie · Photoshop · HTML5 · JavaScript · Tvorba webových stránek</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2025-05" data-end="present">
<div class="resume-card">
<p class="body-large">Vývojář webových stránek, Vedoucí marketingu — <strong>Zeus Sport</strong></p>
<span class="label-medium card-subtitle">Na volné noze · květen 2025 současnost · <span class="duration" data-start="2025-05" data-end="present"></span> · Brno · Remote</span>
<span class="body-medium card-text">Vývoj webů a eshopu (HTML5, Tailwind, JS), správa, marketingová strategie a obsah pro značku ZEUS.</span>
<span class="label-medium card-subtitle">Dovednosti: Tailwind CSS · HTML5 · Digitální marketing · Photoshop · Marketing na sociálních sítích</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2024-09" data-end="present">
<div class="resume-card">
<p class="body-large">Manažer produktového marketingu — <strong>Masita</strong></p>
<span class="label-medium card-subtitle">Na volné noze · září 2024 současnost · <span class="duration" data-start="2024-09" data-end="present"></span> · Česko · Remote</span>
<span class="body-medium card-text">Správa sítí a obsahu, web, grafická podpora a spolupráce se sportovními týmy a školami.</span>
<span class="label-medium card-subtitle">Dovednosti: Propagace produktů · Propagace značky</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2024-11" data-end="present">
<div class="resume-card">
<p class="body-large">Manažer marketingu — <strong>RévviSport</strong></p>
<span class="label-medium card-subtitle">Na volné noze · listopad 2024 současnost · <span class="duration" data-start="2024-11" data-end="present"></span> · Remote</span>
<span class="body-medium card-text">Vývoj webu, správa sítí, grafika a online kampaně. Vizuální identita a růst značky.</span>
<span class="label-medium card-subtitle">Dovednosti: Grafický design · Propagace produktů · Vývoj webových stránek · Photoshop · Inzerce</span>
</div>
</li>
<li class="resume-item timeline-item" data-start="2024-07" data-end="2025-04">
<div class="resume-card">
<p class="body-large">Provoz oddělení služeb zákazníkům — <strong>McDonald's Czech Republic</strong></p>
<span class="label-medium card-subtitle">Na smlouvu · červenec 2024 duben 2025 · <span class="duration" data-start="2024-07" data-end="2025-04"></span> · Česko · Onsite</span>
<span class="body-medium card-text">Provoz a zákaznický servis, týmová spolupráce a řešení operativních úkolů.</span>
<span class="label-medium card-subtitle">Dovednosti: Příprava jídla · Týmová práce · Angličtina · Provozní podpora · Řešení problémů</span>
</div>
</li>
</ul>
<h2 class="section-title title-small">Education</h2>
<ul class="list">
<li class="resume-item">
<div class="resume-card">
<p class="body-large">
Certification in Responsive Web Design<br>
<b><a href="#">(freeCodeCamp Certification)</b></a>
</p>
<span class="label-medium card-subtitle">2019-2023</span>
</div>
</li>
<li class="resume-item">
<div class="resume-card">
<p class="body-large">
JavaScript Algorithms and Data Structures<br>
<b><a href="#">(freeCodeCamp Certification)</b></a>
</p>
<span class="label-medium card-subtitle">2023</span>
</div>
</li>
<li class="resume-item">
<div class="resume-card">
<p class="body-large">
ZeroToMastery BootCamps<br>
<b><a href="#">(ZTM/Udemy Certification)</b></a>
</p>
<span class="label-medium card-subtitle">2023</span>
</div>
</li>
<li class="resume-item">
<div class="resume-card">
<p class="body-large">
Nathan House: Cyber Security Courses 1-4<br>
<b><a href="#">(Udemy Certification)</b></a>
</p>
<span class="label-medium card-subtitle">2023</span>
</div>
</li>
<li class="resume-item">
<div class="resume-card">
<p class="body-large">
VS Code Magic Tricks Course<br>
<b><a href="https://fireship.io/courses/vscode-tricks/" target="_blank">(Jeff Delaney course)</b></a>
</p>
<span class="label-medium card-subtitle">2023</span>
</div>
</li>
<li class="resume-item">
<div class="resume-card">
<p class="body-large">
OAUH - Economics<br>
<b><a href="https://oauh.cz" target="_blank">High School</b></a>
</p>
<span class="label-medium card-subtitle">2023-2024</span>
</div>
</li>
<li class="resume-item">
<div class="resume-card">
<p class="body-large">
SGaSOŠ - IT<br>
<b><a href="https://stredni.cz" target="_blank">High School</b></a>
</p>
<span class="label-medium card-subtitle">2024-2027</span>
</div>
</li>
</ul>
<h2 class="section-title title-small">Programming Languages:</h2>
<ul class="resume-bottom-list">
<li class="resume-bottom-item">
<img src="images/html5.webp" width="28" height="28" loading="lazy" alt="HTML5" class="HTML5">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">HTML5</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/css3.svg" width="28" height="28" loading="lazy" alt="CSS3" class="CSS3">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">CSS3</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/C.webp" width="28" height="28" loading="lazy" alt="C" class="C">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">C</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/js.webp" width="28" height="28" loading="lazy" alt="JavaScript"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">JavaScript</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/go.webp" width="28" height="28" loading="lazy" alt="Go"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">GO</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/typescript.webp" width="28" height="38" loading="lazy" alt="Typescript"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Typescript</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/react.js.svg" width="28" height="28" loading="lazy" alt="React.js"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">React.js</a></span>
</li>
</ul><br>
<h2 class="section-title title-small">Softwares:</h2>
<ul class="resume-bottom-list">
<li class="resume-bottom-item">
<img src="images/VS_code.svg" width="28" height="28" loading="lazy" alt="VS Code"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">VS Code</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/github.webp" width="28" height="28" loading="lazy" alt="Github"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Github</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/git.webp" width="28" height="28" loading="lazy" alt="Git"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Git</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/tor.webp" width="30" height="38" loading="lazy" alt="TOR"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#ethical">TOR</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/metasploit.svg" width="28" height="28" loading="lazy" alt="Metasploit"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#ethical">Metasploit</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/nmap.svg" width="28" height="28" loading="lazy" alt="Nmap"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#ethical">Nmap</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/unreal.webp" width="28" height="26" loading="lazy" alt="Unreal"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">Unreal Engine 5</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/davinci.webp" width="28" height="30" loading="lazy" alt="Davinci Resolve"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">Davinci Resolve</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/photoshop.webp" width="28" height="28" loading="lazy" alt="Photoshop"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">Photoshop</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/lightroom.webp" width="28" height="34" loading="lazy" alt="Lightroom"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">Lightroom</a></span>
</li>
</ul><br>
<h2 class="section-title title-small">Operating Systems:</h2>
<ul class="resume-bottom-list">
<li class="resume-bottom-item">
<img src="images/windows10.webp" width="28" height="58" loading="lazy" alt="Windows 10"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">Windows 10</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/windows11.webp" width="28" height="58" loading="lazy" alt="Windows 11"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Windows 11</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/android.webp" width="28" height="58" loading="lazy" alt="Android"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">Android</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/linux.svg" width="28" height="38" loading="lazy" alt="Linux"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Linux</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/kali.webp" width="28" height="58" loading="lazy" alt="Kali Linux"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#ethical">Kali Linux</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/raspbian.webp" width="28" height="58" loading="lazy" alt="Raspbian/Debian Linux"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Raspbian / Debian Linux</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/ubuntu.webp" width="28" height="58" loading="lazy" alt="Ubuntu Linux"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Ubuntu Linux</a></span>
</li>
</ul><br>
<h2 class="section-title title-small">In Progress:</h2>
<ul class="resume-bottom-list">
<li class="resume-bottom-item">
<img src="images/blender.webp" width="28" height="26" loading="lazy" alt="Blender"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">Blender</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/ruby.webp" width="29" height="28" loading="lazy" alt="Ruby"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#ethical">Ruby</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/kotlin.webp" width="29" height="28" loading="lazy" alt="Kotlin"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Kotlin</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/swift.webp" width="29" height="28" loading="lazy" alt="Swift"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Swift</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/ae.webp" width="29" height="28" loading="lazy" alt="After Effects"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">After Effects</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/C++.webp" width="28" height="28" loading="lazy" alt="C++" class="C++">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">C++</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/PHP.webp" width="28" height="28" loading="lazy" alt="PHP" class="PHP">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">PHP</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/java.webp" width="28" height="28" loading="lazy" alt="JAVA" class="JAVA">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">JAVA</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/rails.webp" width="28" height="28" loading="lazy" alt="Ruby - Rails"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Ruby On Rails</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/node.js.svg" width="28" height="28" loading="lazy" alt="Node.js"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#web">Node.js</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/python.svg" width="28" height="28" loading="lazy" alt="Python"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#ethical">Python</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/au.webp" width="28" height="28" loading="lazy" alt="Adobe Audition"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">Adobe Audition</a></span>
</li>
<li class="resume-bottom-item">
<img src="images/fl.webp" width="28" height="28" loading="lazy" alt="FL Studio"
class="icon">
<span class="label-medium"><a href="https://tdvorak.dev/Timeline.html#video">FL Studio</a></span>
</li>
</div>
</section>
<section class="section tab-content contact-tab" data-tab-content="contact">
<div class="container">
<div class="contact-info">
<h4 class="section-title title-small">Contact Info</h4>
<ul class="contact-info-list">
<li class="contact-info-item">
<div class="icon-box">
<span class="material-symbols-outlined" aria-hidden="true"> mail </span>
</div>
<div class="info-content">
<p class="label-small info-title">Mail Me</p>
<a href="mailto:info@tdvorak.dev" class="label-small info-text">info@tdvorak.dev</a>
</div>
</li>
</ul>
<h4 class="title-small">Social Info</h4>
<div class="social-list">
<a href="https://www.instagram.com/tdv0rak_photos/" target="_blank" class="social-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_66_1657)">
<mask id="mask0_66_1657" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0"
width="24" height="24">
<path d="M0 7.05719e-05H23.9999V24H0V7.05719e-05Z" fill="white" />
</mask>
<g mask="url(#mask0_66_1657)">
<path
d="M23.062 12C23.0596 12.9866 23.0485 13.9731 23.035 14.9596C23.0187 16.1498 23.0003 17.3405 22.7018 18.5103C22.3888 19.7371 21.7715 20.795 20.811 21.5783C19.7989 22.4036 18.5755 22.8375 17.2552 22.9178C15.5039 23.0243 13.7519 23.0664 12 23.0622C10.248 23.0664 8.496 23.0243 6.7448 22.9178C5.42443 22.8375 4.20109 22.4036 3.18897 21.5783C2.2285 20.795 1.61116 19.7371 1.29813 18.5103C0.999629 17.3405 0.981255 16.1498 0.964989 14.9596C0.951489 13.9731 0.940285 12.9866 0.937988 12C0.940285 11.0135 0.951489 10.0269 0.964989 9.04045C0.981255 7.85025 0.999629 6.65954 1.29813 5.48973C1.61116 4.26301 2.2285 3.20505 3.18897 2.42182C4.20109 1.59644 5.42443 1.16262 6.7448 1.08232C8.496 0.97582 10.248 0.933726 12 0.937851C13.7519 0.933726 15.5039 0.97582 17.2552 1.08232C18.5755 1.16262 19.7989 1.59644 20.811 2.42182C21.7715 3.20505 22.3888 4.26301 22.7018 5.48973C23.0003 6.65954 23.0187 7.85025 23.035 9.04045C23.0485 10.0269 23.0596 11.0135 23.062 12Z"
style="stroke: var(--on-surface-variant)" stroke-width="1.5" stroke-miterlimit="10" />
<path
d="M16.875 12C16.875 14.7183 14.6714 16.9219 11.9531 16.9219C9.23484 16.9219 7.03125 14.7183 7.03125 12C7.03125 9.28174 9.23484 7.07815 11.9531 7.07815C14.6714 7.07815 16.875 9.28174 16.875 12Z"
style="stroke: var(--on-surface-variant)" stroke-width="1.5" stroke-miterlimit="10" />
<path
d="M19.875 5.67188C19.875 6.4485 19.2454 7.07812 18.4687 7.07812C17.6921 7.07812 17.0625 6.4485 17.0625 5.67188C17.0625 4.89526 17.6921 4.26563 18.4687 4.26563C19.2454 4.26563 19.875 4.89526 19.875 5.67188Z"
style="fill: var(--on-surface-variant)" />
</g>
</g>
<defs>
<clipPath id="clip0_66_1657">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</a>
<a href="https://www.instagram.com/tdv0rak_/" target="_blank" class="social-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_66_1657)">
<mask id="mask0_66_1657" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0"
width="24" height="24">
<path d="M0 7.05719e-05H23.9999V24H0V7.05719e-05Z" fill="white" />
</mask>
<g mask="url(#mask0_66_1657)">
<path
d="M23.062 12C23.0596 12.9866 23.0485 13.9731 23.035 14.9596C23.0187 16.1498 23.0003 17.3405 22.7018 18.5103C22.3888 19.7371 21.7715 20.795 20.811 21.5783C19.7989 22.4036 18.5755 22.8375 17.2552 22.9178C15.5039 23.0243 13.7519 23.0664 12 23.0622C10.248 23.0664 8.496 23.0243 6.7448 22.9178C5.42443 22.8375 4.20109 22.4036 3.18897 21.5783C2.2285 20.795 1.61116 19.7371 1.29813 18.5103C0.999629 17.3405 0.981255 16.1498 0.964989 14.9596C0.951489 13.9731 0.940285 12.9866 0.937988 12C0.940285 11.0135 0.951489 10.0269 0.964989 9.04045C0.981255 7.85025 0.999629 6.65954 1.29813 5.48973C1.61116 4.26301 2.2285 3.20505 3.18897 2.42182C4.20109 1.59644 5.42443 1.16262 6.7448 1.08232C8.496 0.97582 10.248 0.933726 12 0.937851C13.7519 0.933726 15.5039 0.97582 17.2552 1.08232C18.5755 1.16262 19.7989 1.59644 20.811 2.42182C21.7715 3.20505 22.3888 4.26301 22.7018 5.48973C23.0003 6.65954 23.0187 7.85025 23.035 9.04045C23.0485 10.0269 23.0596 11.0135 23.062 12Z"
style="stroke: var(--on-surface-variant)" stroke-width="1.5" stroke-miterlimit="10" />
<path
d="M16.875 12C16.875 14.7183 14.6714 16.9219 11.9531 16.9219C9.23484 16.9219 7.03125 14.7183 7.03125 12C7.03125 9.28174 9.23484 7.07815 11.9531 7.07815C14.6714 7.07815 16.875 9.28174 16.875 12Z"
style="stroke: var(--on-surface-variant)" stroke-width="1.5" stroke-miterlimit="10" />
<path
d="M19.875 5.67188C19.875 6.4485 19.2454 7.07812 18.4687 7.07812C17.6921 7.07812 17.0625 6.4485 17.0625 5.67188C17.0625 4.89526 17.6921 4.26563 18.4687 4.26563C19.2454 4.26563 19.875 4.89526 19.875 5.67188Z"
style="fill: var(--on-surface-variant)" />
</g>
</g>
<defs>
<clipPath id="clip0_66_1657">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</a>
<a href="https://github.com/BcDvorinka" target="_blank" class="social-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_66_1649)">
<path
d="M0.184072 10.462C-0.594929 15.368 1.58507 21.285 8.30707 23.468C8.42707 23.49 8.53807 23.5 8.64207 23.5C9.42407 23.5 9.96207 22.918 9.96207 22.2C9.86507 21.677 10.3451 19.558 9.04207 19.843C6.52307 20.379 6.22107 18.972 5.83707 18.236C6.92307 19.63 8.55507 19.595 9.78607 19.055C10.4691 18.755 10.1121 17.991 10.4361 17.712C10.5468 17.6167 10.6273 17.4911 10.6677 17.3507C10.7081 17.2103 10.7065 17.0611 10.6633 16.9216C10.6201 16.782 10.537 16.6581 10.4244 16.5651C10.3117 16.4721 10.1743 16.414 10.0291 16.398C7.71507 16.143 5.57207 15.397 5.57207 11.696C5.57207 9.52797 7.07707 9.33397 6.66207 8.42697C6.64707 8.39397 6.32907 7.67297 6.61707 6.57797C8.03607 6.83997 8.68907 7.85797 9.37007 7.67497C11.0571 7.21497 12.9141 7.21497 14.6001 7.67497C15.3041 7.86397 15.8071 6.87397 17.3381 6.57197C17.7791 8.22597 16.8651 8.62997 17.4411 9.24897C18.0731 9.92897 18.3941 10.752 18.3941 11.696C18.3941 17.26 13.6771 15.653 13.2931 16.916C13.2501 17.0565 13.2495 17.2065 13.2913 17.3474C13.3331 17.4882 13.4155 17.6136 13.5281 17.708C14.1381 18.221 14.0581 19.538 13.9931 20.597C13.9261 21.695 13.8681 22.642 14.4751 23.176C14.6891 23.366 15.0701 23.569 15.7591 23.429C22.3931 21.298 24.5891 15.407 23.8221 10.512C21.7261 -2.85603 2.29607 -2.84003 0.184072 10.462ZM8.45407 21.44L8.45807 21.945C7.95288 21.7709 7.46008 21.5628 6.98307 21.322C7.40807 21.431 7.89607 21.478 8.45407 21.44ZM8.82407 17.74L8.80907 17.82C7.95607 18.072 7.30007 17.821 6.85207 17.068L6.85107 17.066C7.53107 17.43 8.23207 17.626 8.82407 17.74ZM12.0001 1.99997C23.8331 1.99997 26.5021 18.267 15.4691 21.941C15.4311 21.644 15.4661 21.084 15.4901 20.689C15.5481 19.738 15.6161 18.63 15.2771 17.704C20.3651 16.645 20.7901 11.058 18.8311 8.56897C19.0741 7.61697 18.9761 5.37997 18.1021 5.10597C17.8961 5.04097 16.7971 4.80197 14.6651 6.14297C12.9023 5.72648 11.0668 5.72648 9.30407 6.14297C8.24007 5.47597 5.84207 4.39097 5.38207 5.54297C4.84807 6.88497 4.97507 7.96997 5.13407 8.57297C3.39507 10.777 3.91607 14.467 5.66807 16.199C4.67507 15.724 3.30707 15.562 3.01207 16.513C2.68907 17.55 3.92407 17.424 4.69107 19.317C4.76407 19.553 4.89907 19.83 5.10607 20.105C-1.70493 14.54 1.58107 1.99997 12.0001 1.99997Z"
style="fill: var(--on-surface-variant)" />
</g>
<defs>
<clipPath id="clip0_66_1649">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</a>
<a href="https://linkedin.com/in/tomáš-dvořák-542bb7294" target="_blank" class="social-item" style="margin-top: -2.15px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="28.5" height="28.5">
<g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="10" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="20" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<g transform="scale(5.12,5.12)">
<path d="M9,4c-2.74952,0 -5,2.25048 -5,5v32c0,2.74952 2.25048,5 5,5h32c2.74952,0 5,-2.25048 5,-5v-32c0,-2.74952 -2.25048,-5 -5,-5zM9,6h32c1.66848,0 3,1.33152 3,3v32c0,1.66848 -1.33152,3 -3,3h-32c-1.66848,0 -3,-1.33152 -3,-3v-32c0,-1.66848 1.33152,-3 3,-3zM14,11.01172c-1.09522,0 -2.08078,0.32736 -2.81055,0.94141c-0.72977,0.61405 -1.17773,1.53139 -1.17773,2.51367c0,1.86718 1.61957,3.32281 3.67969,3.4668c0.0013,0.00065 0.0026,0.0013 0.00391,0.00195c0.09817,0.03346 0.20099,0.05126 0.30469,0.05273c2.27301,0 3.98828,-1.5922 3.98828,-3.52148c-0.00018,-0.01759 -0.00083,-0.03518 -0.00195,-0.05274c-0.10175,-1.90023 -1.79589,-3.40234 -3.98633,-3.40234zM14,12.98828c1.39223,0 1.94197,0.62176 2.00195,1.50391c-0.01215,0.85625 -0.54186,1.51953 -2.00195,1.51953c-1.38541,0 -2.01172,-0.70949 -2.01172,-1.54492c0,-0.41771 0.15242,-0.7325 0.47266,-1.00195c0.32023,-0.26945 0.83428,-0.47656 1.53906,-0.47656zM11,19c-0.55226,0.00006 -0.99994,0.44774 -1,1v19c0.00006,0.55226 0.44774,0.99994 1,1h6c0.55226,-0.00006 0.99994,-0.44774 1,-1v-5.86523v-13.13477c-0.00006,-0.55226 -0.44774,-0.99994 -1,-1zM20,19c-0.55226,0.00006 -0.99994,0.44774 -1,1v19c0.00006,0.55226 0.44774,0.99994 1,1h6c0.55226,-0.00006 0.99994,-0.44774 1,-1v-10c0,-0.82967 0.22639,-1.65497 0.625,-2.19531c0.39861,-0.54035 0.90147,-0.86463 1.85742,-0.84766c0.98574,0.01695 1.50758,0.35464 1.90234,0.88477c0.39477,0.53013 0.61523,1.32487 0.61523,2.1582v10c0.00006,0.55226 0.44774,0.99994 1,1h6c0.55226,-0.00006 0.99994,-0.44774 1,-1v-10.73828c0,-2.96154 -0.87721,-5.30739 -2.38086,-6.89453c-1.50365,-1.58714 -3.59497,-2.36719 -5.80664,-2.36719c-2.10202,0 -3.70165,0.70489 -4.8125,1.42383v-0.42383c-0.00006,-0.55226 -0.44774,-0.99994 -1,-1zM12,21h4v12.13477v4.86523h-4zM21,21h4v1.56055c0.00013,0.43 0.27511,0.81179 0.68291,0.94817c0.40781,0.13638 0.85714,-0.00319 1.11591,-0.34661c0,0 1.57037,-2.16211 5.01367,-2.16211c1.75333,0 3.25687,0.58258 4.35547,1.74219c1.0986,1.15961 1.83203,2.94607 1.83203,5.51953v9.73828h-4v-9c0,-1.16667 -0.27953,-2.37289 -1.00977,-3.35352c-0.73023,-0.98062 -1.9584,-1.66341 -3.47266,-1.68945c-1.52204,-0.02703 -2.77006,0.66996 -3.50195,1.66211c-0.73189,0.99215 -1.01562,2.21053 -1.01562,3.38086v9h-4z"></path>
</g>
</g>
</svg>
</a>
</div>
</div>
<!-- Contact Form (separate grid column) -->
<div class="card contact-form-wrapper">
<form id="contact-form" class="input-wrapper" novalidate>
<input type="hidden" name="domain" value="tdvorak.dev" />
<div>
<label for="name" class="label-medium" style="margin-bottom:6px;">Jméno a příjmení *</label>
<input type="text" id="name" name="name" required class="input-field" placeholder="Vaše celé jméno">
</div>
<div>
<label for="email" class="label-medium" style="margin-bottom:6px;">Email *</label>
<input type="email" id="email" name="email" required class="input-field" placeholder="vas@email.cz">
</div>
<div>
<label for="subject" class="label-medium" style="margin-bottom:6px;">Předmět *</label>
<input type="text" id="subject" name="subject" required class="input-field" placeholder="O co se zajímáte?">
</div>
<div>
<label for="message" class="label-medium" style="margin-bottom:6px;">Zpráva *</label>
<textarea id="message" name="message" rows="5" required class="textarea" placeholder="Jak vám můžeme pomoci?"></textarea>
</div>
<div>
<button type="submit" class="btn send-btn">Odeslat zprávu</button>
</div>
</form>
</div>
</div>
</section>
</div>
</div>
</article>
</main>
<footer class="footer">
<div class="container">
<p class="body-medium">Copyright 2025. All right reserved by <b><a href="https://tdvorak.dev">TDvorak.</a></b></p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>