prod php blog

This commit is contained in:
2024-09-01 00:07:03 +02:00
commit 51940b50d0
160 changed files with 13696 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

View File

@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="Kankys Matrix" content="O mně."/>
<title>O mně</title>
<link rel="stylesheet" href="../../style/style.css"/>
<link rel="shortcut icon" href="img/logo_arch_linux_167.png"/>
<link rel="icon" type="image/x-icon" href="../../res/site/icons/favicon.ico"/>
<link href="//cdn.jsdelivr.net/npm/font-logos@1/assets/font-logos.css" rel="stylesheet"/>
</head>
<body style="cursor: url(../../res/site/icons/archlinux.png), auto">
<header class="page-header" role="banner">
<h1 class="project-name">O mně</h1>
<!-- <h2 class="project-tagline">The webmaster.</h2> -->
<a href="../../" class="btn">Domů</a>
</header>
<main id="content" class="main-content" role="main">
<h3>O mně</h3>
<div class="obsah">
<p>
Jsem IT nadšenec s pozitivním přístupem k životu a vášní pro
technologie, ve kterých se neustále vzdělávám. Absolvoval jsem kurz
testingu a SQL v Acamaru, další kurz byl web developer u společnosti Engeto. Pracoval jsem na pozici testera ve společnosti Uniprog a nyní pracuji ve společnosti Kyndryl na projektu České Spořitelny pro platformu SMART. Můj životopis najdete pod tímto <a href="../project/zivotopis/zivotopis.html"
target="_blank">odkazem.</a>
</p>
<div>
<ul class="dot">
<li><strong>Ve volném čase se věnuji:</strong></li>
<li>Svému blogu:<a href="https://lukan.cz"> Lukáš Bloguje.</a></li>
<li>Spolku Arch Linux CZ, kde jsem členem a pomáhám se správou webu: <a href="https://arch-linux.cz"
target="_blank">Arch Linux
CZ</a> a dalších webových aplikacích Arch Linux CZ.
</li>
<li>Linuxu, MacOS a Opensource (i si rozumím s Windows :-)).</li>
<li>Seberozvoji v oblasti komunikace a emoční inteligence.</li>
<li>Sportu, který mi dobíjí baterky.</li>
<li>Missing maps pro Lékaře bez hranic.</li>
<li>Mapování v OSM.</li>
</ul>
</div>
<div>
<ul class="dot">
<li><strong>V osobním životě se snažím vedle komerčních aplikací poznávat a
používat Opensource.</strong></li>
<li>To to jsou opensource aplikace, které používám vedle placených
aplikací a stojí myslím za vyzkoušení:
</li>
<li>Alternativa za OneNote od Microsoftu je aplikace <a href="https://joplinapp.org/"
target="_blank">Joplin</a></li>
<li>Pro cloud a tvorbu dokumentů k Microsoft 365 doporučuji <a href="https://cloud.arch-linux.cz"
target="_blank">NextCloud</a></li>
<li>Pokud potřebuji šifrovat dokumenty nebo jen s někým něco sdílet a
nechci sdílet s NextCloud nebo OneDrive použiji <a href="https://cryptpad.arch-linux.cz/"
target="_blank">CryptPad</a></li>
<li>Náhradu za Jiru může být <a href="https://tasks.archoslinux.cz/" target="_blank">Vikunja</a></li>
<li>Mimo GitHub svůj kód ukládám na <a href="https://git.archoslinux.cz/" target="_blank">Gitea</a></li>
<li>Pro tvorbu tohoto blogu vedle VS Code používám <a href="https://brackets.io/" target="_blank">Brackets</a>
</li>
<li>Jako RSS čtečku využívám minimalistickou <a href="https://rss.archoslinux.cz/">MiniFlux</a></li>
<li> Správce hesel může být <a href="https://bitwarden.archoslinux.cz/" target="_blank">Bitwarden</a>
</li>
<li>Internetový prohlížeč <a href="https://www.mozilla.org/en-US/firefox/new/"
target="_blank">Firefox</a>
</li>
<li>E-mail klienta používám <a href="https://www.thunderbird.net/en-US/" target="_blank">Thunderbird</a>
</li>
<li>Alternativu k sociální sítím může být <a href="https://mastodon.arch-linux.cz/"
terget="_blank">Mastodon</a><a
href="https://element.mxchat.cz/" target="blank">Element</a></li>
<li>Alternativou k Instagramu může být <a href="https://pixelfed.cz" target="_blank">Pixelfed</a></li>
</ul>
</div>
<div>
<ul class="dot">
<li><strong>Kde všude mně najdete: </strong></li>
<li>Můj profil na: <a href="https://git.archoslinux.cz/kankys" target="_blank"><i
class="fa fa-gitea"></i> Gitea</a></li>
<li>Můj profil na: <a href="https://www.github.com/LukasKanka" target="_blank"><i
class="fa fa-github"></i> GitHub</a></li>
<li>Můj profil na: <a href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/"
target="_blank"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
</ul>
</div>
<div>
<ul class="dot">
<li><strong>Budu velmi vděčný za malý příspěvek na provoz mých projektů:</strong></li>
<li>Pár satoshi nebo jiné krypto měny(po dohodě)</li>
<li>Nebo pomocí Lightning technologije na adresu: <strong>affableshirt47@walletofsatoshi.com</strong>
</li>
<li>či přes QR kód na Lightning:</li>
<li><img src="img/sat.jpeg" width="130" alt="Satoshi qrcode"/></li>
<li>Přes paypal pomocí QR kódu:</li>
<li><img src="img/qrcode-paypal.png" width="130" alt="Paypal qrcode"/></li>
<li>Aktivačním kódem na aplikaci k recenzi či článku</li>
<li>Kritikou, radou nebo e-mailem pár slov potěší</li>
<li>Také se můžeme potkat na WordPress pivu v Praze, Frodentisti akcích, PHPkáři akcích nebo jen tak na
pivku
a jiné akci.
</li>
</ul>
</div>
</div>
<footer class="site-footer">
Copyright &copy; Lukáš Kaňka 2024
</footer>
</main>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

View File

@ -0,0 +1,14 @@
:root {
--dracula-body-bg: #2a232b;
--dracula-color: #f8f8f2;
--dracula-header-bg: #2a232b;
--dracula-scrollToTopBtn-color: #9fea8a;
--dracula-links-color: #f76b00;
--dracula-nav-bg: #2a232b;
--dracula-nav-links-color: #f76b00;
--dracula-h1-color: #e54472;
--dracula-h2-color: #18f700;
--dracula-solid-bg: #2a232b;
--dracula-solid-color: #f76b00;
--dracula-footer-bg: #2a232b;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -0,0 +1,193 @@
'
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="description" content="ApolloNvim svoboda v programování...." />
<meta name="keywords" content="ApolloNvim Distro" />
<meta name="author" content="Kankys" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/icons8-rocket.gif" />
<!--nav bar-->
<script src="https://kit.fontawesome.com/0a43c6cd1f.js" crossorigin="anonymous"></script>
<!--icons dark, go to up-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!--ubuntu fonts-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<title>ApolloNvim</title>
</head>
<body>
<header>
<h1 class="title">🚀ApolloNvim</h1>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a href="install.php">Instalace</a></li>
<li><a href="plugins.php">Pluginy</a></li>
<li><a href="manuals.php">Návody</a></li>
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr />
<!--Začátek sekcí - co h2 sekce + fotogalerie-->
<section class="content" id="welcome">
<section class="welcome">
<h2>Úvod:</h2>
<p>
👉 Neovim setup pro Front-End vývoj postavený na
<a href="https://github.com/neoclide/coc.nvim" target="_blank">Coc</a>.
</p>
<p>
👉 Výhody Neovim oproti klasickému IDE jsou nesporně ve svobodě
konfigurace, je tisíce možností, jak Váš Neovim může vypadat a
fungovat. Pro Vaši inspiraci a použití vznikl tento projekt 🚀
ApolloNvim.
</p>
<p>
👉 Tato distribuce nefunguje jen, že kliknete na tlačítko a
nainstaluje se. Vede Vás k samostatné instalaci pomocí tohoto webu.
Cílem je pochopit, jak Neovim funguje, abyste si sami mohli vše
modifikovat, což i click-on distribucí se nenaučíte.
</p>
<p>
👉 Toto nastavení je primárně pro vývoj webu. Inspiroval jsem se
pluginy, které jsem využíval v VSCode a Webstorm.
</p>
<p>👉 Velký důraz je kladen na rychlost a lehkost.</p>
<p>
👉 🚀 ApolloNvim Distro je stále ve vývoji a postupně se na něm
pracuje.
</p>
<p>
👉 Pro nejlepší zážitek s 🚀 ApolloNvim Distro doporučuji používat
multiplexor
<a href="https://git.archoslinux.cz/kankys/zellij-mySetup" target="_blank">Zellij </a>, ale není to samozřejmě
podmínkou.
</p>
</section>
<section id="advantages">
<h2>Přednosti:</h2>
<p>
👉 Hlavní předností tohoto nastavení jsou podpora: Codeium alternativa
k Copilot zdarma, Prettier, AutoSave, diplňování HTML, CSS, JS a
zkratky k zakomentování a odkomentování kódu. Taky je zde několik
pluginu pro příjemnější práci v Neovim.
</p>
<p>
👉 S
<a href="https://github.com/neovim/nvim-lspconfig" target="_blank">LSP</a>
v této instalaci využívám
<a href="https://github.com/neoclide/coc.nvim" target="_blank">Coc</a>
pro jeho jednoduchost s minimálními zásahy do konfigurace Coc. LSP se
mi velmi osvědčilo v modálním editoru
<a href="https://helix-editor.com/" target="_blank">Helix-editor</a>
má konfigurace
<a href="https://git.archoslinux.cz/kankys/Helix-frontend-setup" target="_blank">Helixu</a>.
</p>
<p>
👉 Ty nejlepší témata pro Neovim (ať je nemusíte hledat), je defaultně
nastavéné Dracula.
</p>
<p>
👉 Téma v Neovim si jednoduše změníte v command line příkazem
colorscheme a tlačítkem Tab se budete přepínat mezi jednotlivými
tématy.
</p>
</section>
<section class="photo">
<img class="picture" src="img/home.png" alt="Homescreen" />
<img class="picture1" src="img/config.png" alt="config.vim" />
<img class="picture2" src="img/fzf.png" alt="fzf" />
</section>
<section id="apollo">
<h2>Plán 🚀ApolloNvim:</h2>
<p>
👉 Do budoucna můžete očekávat tyto nové funkce a další novinky:
</p>
<p>
👉 Web na vlastní doméně.
</p>
<p>👉 Instalátor 🚀 ApolloNvim přes odkaz z Gitu.</p>
<p>👉 Nová vlastní uvítací obrazovka.</p>
<p>👉 Nové pluginy.</p>
👉 Návody k pluginům, jak nastavit a jak s nimi pracovat.
</p>
<p>👉 Návody k práci s Neovim.</p>
</section>
<section id="faq">
<h2>Otázky a odpovědi:</h2>
<p>👉 Kolik stojí 🚀 ApolloNvim? -> Nic 🚀 ApolloNvim je zdarma.</p>
</section>
<section id="contact">
<h2>Kontakty:</h2>
<p>
<a href="https://t.me/+o6qcLGlFROJhNzhk" target="_blank">👉 🚀 ApolloNvim Telegram skupina</a>
</p>
<p>
<a href="https://lukaskanka.cz/" target="_blank">👉 Osobní web autora 🚀 ApolloNvim</a>
</p>
<p>
<a href="https://git.archoslinux.cz/kankys" target="_blank">👉 Gitea profil</a>
</p>
<p>
<a href="https://github.com/LukasKanka/" target="_blank">👉 GitHub</a>
</p>
<p>
<a href="https://mastodon.arch-linux.cz/@Kankys" target="_blank" 👉>
Mastodon</a>
</p>
</section>
<section class="login"></section>
<section id="help">
<h2>Podpora:</h2>
<p>
👉 Pokud jakkoliv chcete podpořit nebo se podílet na obsahu a
funkčnosti 🚀 ApolloNvim, prosím budu rád když mi zde napíšete.
</p>
<p>👉 Taky můžete tento projekt podpořit pár Satoshi:</p>
<img class="sat" src="https://lukaskanka.cz/index/about/img/sat.jpeg" alt="Satoshi" />
</section>
<section id="other">
<h2>Další projekty a odkazy:</h2>
<p>
👉 <a href="https://arch-linux.cz/" target="_blank">ArchLinux CZ</a>
</p>
<p>
👉
<a href="https://searxng.cz/" target="_blank">Vyhledávač SearXNG CZ</a>
</p>
<p>
👉
<a href="https://endeavouros.com/" target="_blank">EndeavourOS Linux</a>
</p>
<p>
👉 <a href="https://i3wm.org/" target="_blank">i3 window manager</a>
</p>
</section>
<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">
<i class="fas fa-arrow-up"></i>
</button>
<footer>
Copyright &copy;
<a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a>
2024
</footer>
</section>
<script src="script.js"></script>
</body>
</html>
'

View File

@ -0,0 +1,303 @@
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta
name="description"
content="ApolloNvim svoboda v programování...."
/>
<meta name="keywords" content="ApolloNvim Distro Instalace" />
<meta name="author" content="Kankys" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/icons8-rocket.gif" />
<!--nav bar-->
<script
src="https://kit.fontawesome.com/0a43c6cd1f.js"
crossorigin="anonymous"
></script>
<!--icons dark, go to up-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!--ubuntu fonts-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<title>ApolloNvim Instalace</title>
</head>
<body>
<header>
<h1 class="title">🚀ApolloNvim Instalace</h1>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a href="index.php">Domů</a></li>
<li>
<a href="plugins.php"
>Pluginy</a
>
</li>
<li>
<a href="manuals.php"
>Návody</a
>
</li>
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr />
<section class="content" id="welcome">
<section id="install">
<h2>Instalace a nastavení:</h2>
<p>
<strong>
Vždy se podívej před instalací
nových pluginu, na dokumentaci k
plaginům na Githubu. Předejdeš
tím případným problémům! Pokud
si nejsi jistý postupem nebo ti
není něco jasné, tak raději se
podívej do dokumentace,napiš nám
nebo fórech najdeš odpověď.
</strong>
</p>
<p>
👉 Pokud ještě nemáte nainstalujte si
<a
href="https://neovim.io/"
target="_blank"
>Neovim</a
>.
</p>
<p>
👉 Bude potřeba nainstalovat plug.vim
aby jste mohl/a instalovat rozšíření.
</p>
<p>
👉 Běžte na tuto
<a
href="https://github.com/junegunn/vim-plug"
target="_blank"
>stránku</a
>
pod Installation si najděte svůj
operační systém a zkopírujte odkaz pod
ním do svého terminálu.
</p>
<p>
👉 Nejprve si však zálohujte své
aktuální nastavení Neovim!!!
</p>
<p>👉 Linux & Mac:</p>
<div class="code-box">
<p>/home/user/.config/nvim/init.vim</p>
</div>
<p>Windows:</p>
<div class="code-box">
<p>~\AppData\Local\nvim</p>
</div>
</section>
<section id="node">
<h2>Node.js:</h2>
<p>
👉 Doporučuji mít nainstalovaný
<a
href="https://nodejs.org/en"
href="_blank"
>Node.js</a
>.
</p>
<p>
👉 Dále si v Node.js nainstalujte
<a
href="https://www.npmjs.com/package/live-server"
target="_blank"
>Live-server</a
>
příkazem:
</p>
<div class="code-box">
<p>npm i live-server</p>
</div>
<p>
👉 Ve svém projektu budete moci pouštět
svůj index.html příkazem:
</p>
<div class="code-box">
<p>npx live-server</p>
</div>
<p>
👉 Pro správnou funkčnost LSP si
doinstalujte tyto balíčky:
</p>
<p>
<a
href="https://github.com/microsoft/vscode-html-languageservice"
target="_blank"
>vscode-html-langserver</a
>
</p>
<p>
<a
href="https://github.com/microsoft/vscode-css-languageservice"
target="_blank"
>vscode-css-langserver</a
>
</p>
<p>
<a
href="https://github.com/typescript-language-server/typescript-language-server"
target="_blank"
>typescript-language-server</a
>
</p>
<p>
<a
href="https://github.com/aca/emmet-ls"
target="_blank"
>emmet-ls</a
>
</p>
<p>
<a
href="https://eslint.org/docs/latest/use/getting-started"
target="_blank"
>eslint</a
>
</p>
<p>
<a
href="https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-server/README.md"
target="_blank"
>vtailwindcss-language-server</a
>
</p>
<p>
<a
href="https://github.com/artempyanykh/marksman"
target="_blank"
>marksman</a
>
</p>
<p>
<a
href="https://github.com/markdoc-extra/markdoc-ls"
target="_blank"
>markdoc-ls</a
>
</p>
</section>
<section id="neovim">
<h2>Neovim:</h2>
<p>
👉 Pro instalaci 🚀 ApolloNvim Distra
stačí stáhnout pouze soubor init.vim s
tohoto
<a
href="https://github.com/LukasKanka/ApolloNvim"
target="_blank"
>repositáře</a
>.
</p>
<p>
👉 Uložte ho do kořenováho adresáře
<strong>~/.. /nvim</strong> dle tvého
OS.
<strong
>Nezapomeňte na zálohu
stávajících souborů</strong
>
</p>
<p>
👉 Neovim pustíte v terminálu příkazem
<strong>nvim</strong>.
</p>
<p>👉 Odklikejte chybová hlášení.</p>
<p>
👉 V Neovimu zadejte do command line
<strong>PlugIns</strong> , tím
nainstalujete všechny pluginy.
Restartujte Neovim.
</p>
<p>
👉 Pokud Vám některý plugin chybí,
můžete ho lehce doinstalovat nebo naopak
odinstalovat pomocí
<strong>plug.vim</strong>. Více
informací najdete na GitHubu
<a
href="https://github.com/junegunn/vim-plug"
target="_blank"
>plug.vim</a
>
nebo velmi rád poradím viz. o nás.
</p>
<p>
👉 Pokud některý plugin nechcete
používat stačí v souboru
<strong>init.vim</strong> ho
zakomentovat pomocí dvojitých uvozovek
<strong>"</strong>.
</p>
<p>
👉 Do command line ještě zadejte Coc
příkaz pro doinstalování zbylých
pluginů:
</p>
<div class="code-box">
<p>
CocInstall coc-todolist
coc-tailwindcss coc-json
coc-html-css-support coc-html
coc-emmet coc-xml coc-tsserver
coc-lsp-wl coc-lit-html
coc-htmldjango coc-css
coc-markdown-preview-enhanced
coc-markdownlint
</p>
</div>
<p>
👉 A ještě jednou restartujte Neovim a
vše máte připravené.
</p>
<p>
👉 Tuto konfiguraci používám na Linuxu i
MacOS. Je ozkoušena i na Windows 11.
</p>
</section>
<button
onclick="scrollToTop()"
id="scrollToTopBtn"
title="Go to top"
>
<i class="fas fa-arrow-up"></i>
</button>
<footer>
Copyright &copy;
<a
href="https://git.archoslinux.cz/kankys"
target="_blank"
>Lukáš Kaňka</a
>
2024
</footer>
</section>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,301 @@
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta
name="description"
content="ApolloNvim svoboda v programování...."
/>
<meta name="keywords" content="ApolloNvim Distro Návody" />
<meta name="author" content="Kankys" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/icons8-rocket.gif" />
<!--nav bar-->
<script
src="https://kit.fontawesome.com/0a43c6cd1f.js"
crossorigin="anonymous"
></script>
<!--icons dark, go to up-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!--ubuntu fonts-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<title>ApolloNvim Návody</title>
</head>
<body>
<header>
<h1 class="title">🚀ApolloNvim Návody</h1>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a href="index.php">Domů</a></li>
<li>
<a href="install.php"
>Instalace</a
>
</li>
<li>
<a href="plugins.php"
>Pluginy</a
>
</li>
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr />
<!--Začátek sekcí - co h2 sekce + fotogalerie-->
<section class="content" id="welcome">
<p>
<strong
>Vždy se podívej před Instalací na
Githubu, na zdroj. Předejdeš tím
případným problémům! Pokud si nejsi
jistý postupem nebo ti není něco jasné,
tak raději se podívej do
dokumntace,napiš nebo fórech najdeš
odpověď.</strong
>
</p>
<section class="list">
<ul>
<li>
<a href="#plug-vim"
>Jak nainstalovat
plug.vim do Neovim</a
>
</li>
<li>
<a href="#codeium"
>Jak nainstalovat
Codeium do Neovim</a
>
</li>
</ul>
</section>
<section id="plug-vim" class="plug-vim">
<h2 class="h2-install">
Jak nainstalovat vim.plug do Neovim
</h2>
<p>
Nejprve si však zálohujte své aktuální
nastavení Neovim!!!
</p>
<p>Linux & Mac:</p>
<div class="code-box">
<p>/home/user/.config/nvim/init.vim</p>
</div>
<p>Windows:</p>
<div class="code-box">
<p>~\AppData\Local\nvim</p>
</div>
<p>
Běžte na tuto
<a
href="https://github.com/junegunn/vim-plug"
target="_blank"
>stránku</a
>
pod Installation si najděte svůj
operační systém a zkopírujte odkaz pod
ním do svého terminálu a pomocí Enter
nainstalujete vim.plug.
</p>
<p>Na Linuxu a macOS to bude tento příkaz:</p>
<div class="code-box">
<p>
sh -c 'curl -fLo
"${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim
--create-dirs \
https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'
</p>
</div>
<p>
Pro Windows příkaz najdete na
odkazovaném webu výšše.
</p>
<!--<div class="code-box">-->
<!--<p>-->
<!--<LeftMouse>iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`-->
<!--ni "$(@($env:XDG_DATA_HOME, $env:LOCALAPPDATA)[$null -eq-->
<!--$env:XDG_DATA_HOME])/nvim-data/site/autoload/plug.vim" -Force-->
<!--</p>-->
<!--</div>-->
<p>
Dále si otevřeme soubor init.vim a pokud
ho nemáme tak si ho vytvoříme zde:
</p>
<p>Linux & Mac:</p>
<div class="code-box">
<p>/home/user/.config/nvim/init.vim</p>
</div>
<p>Windows:</p>
<div class="code-box">
<p>~\AppData\Local\nvim</p>
</div>
<p>
A do něj vložíme a následně uložíme
tento kód:
</p>
<div class="code-box">
<p>
call plug#begin(has('nvim') ?
stdpath('data') . '/plugged' :
'~/.vim/plugged')
</p>
<br />
<p>
# Jsem budeš v budoucnu vkládat
pluginy. Začínající PLug a
adresa ke stažení
</p>
<br />
<p>call plug#end()</p>
</div>
<p>
A příkazem Nvim v terminálu spustíme
Neovim. Pokud vám vyskočí chybové
hlášení jen ho odklikněte.
</p>
<p>
Pomocí <code>Ctrl + :</code> se
dostanete do příkazového řádku a tam
napíšete <code>PlugInstall</code>
</p>
<p>
A restartujeme Neovim. Příkazem
<code>Ctrl + :</code> do príkazového
řádku napíšete <code>q</code> a
restartujeme Neovim.
</p>
<p>
Takto pokaždé když si přidáte do
init.vim pluginy, příkazem
<code>PlugInstall</code> je
nainstalujete a restartujeme Neovim.
</p>
<p>
Zdroj na
<a
href="https://github.com/junegunn/vim-plug"
target="_blank"
>GitHub</a
>
</p>
</section>
<section id="codeium" class="codeium">
ï
<h2 class="h2-install">
Jak nainstalovat Codeium do Neovim
</h2>
<p>
<a
href="https: //codeium.com"
target="_blank"
>Codeium</a
>
je alternativou k
<a
href="https://github.com/features/copilothttps://github.com/features/copilot"
target="_blank"
>GitHub Copilot</a
>
s tím, že pro jednotlivce je zdarma.
Codeium hodnotím velmi pozitivně a
Copilotu se vyrovná.
</p>
<p>
Instalace pomocí plug.vim je jednoduchá,
stačí pouze upravit svůj
<code>init.vim</code>
</p>
<p>Vložíme do něj:</p>
<div class="code-box">
<p>
" Free AI codium <br />
Plug 'Exafunction/codeium.vim',
{ 'branch': 'main' }
</p>
</div>
<p>
Výsledný <code>init.vim</code> bude
vypadat takto:
</p>
<div class="code-box">
<p>
call plug#begin(has('nvim') ?
stdpath('data') . '/plugged' :
'~/.vim/plugged') <br />
" Free AI codium <br />
Plug 'Exafunction/codeium.vim',
{ 'branch': 'main' } <br />
call plug#end()
</p>
</div>
<p>
A restartujeme Neovim. Příkazem
<code>Ctrl + :</code> do príkazového
řádku napíšete <code>q</code> a
restartujeme Neovim.
</p>
<p>
Po restartu provedeme
<code>PlugInstall</code> a ještě jednou
restartujeme Neovim.
</p>
<p>
Poslední krok bude konfigurace Codeium,
příkazem <code>CodeiumEnable</code> do
command line.
</p>
<p>
Codium vás vyzve k propojení API se
serverem Codium.
</p>
<p>A vše by Vám mělo fungovat.</p>
<p>
Zdroj na
<a
href="https://github.com/Exafunction/codeium.vim"
target="_blank"
>GitHub</a
>
</p>
</section>
<button
onclick="scrollToTop()"
id="scrollToTopBtn"
title="Go to top"
>
<i class="fas fa-arrow-up"></i>
</button>
<footer>
Copyright &copy;
<a
href="https://git.archoslinux.cz/kankys"
target="_blank"
>Lukáš Kaňka</a
>
2024
</footer>
</section>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="description" content="ApolloNvim svoboda v programování...." />
<meta name="keywords" content="ApolloNvim Distro Pluginy" />
<meta name="author" content="Kankys" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/icons8-rocket.gif" />
<!--nav bar-->
<script src="https://kit.fontawesome.com/0a43c6cd1f.js" crossorigin="anonymous"></script>
<!--icons dark, go to up-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!--ubuntu fonts-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<title>ApolloNvim Pluginy</title>
</head>
<body>
<header>
<h1 class="title">🚀ApolloNvim Pluginy</h1>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a href="index.php">Domů</a></li>
<li><a href="install.php">Instalace</a></li>
<li><a href="manuals.php">Návody</a></li>
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr />
<!--Začátek sekcí - co h2 sekce + fotogalerie-->
<section class="content" id="welcome">
<section id="plugin">
<h2>Výběr pluginu v Lite Web 🚀 ApolloNvim Distro 2024</h2>
<p>
👉
<a href="https://github.com/m4xshen/autoclose.nvim" target="_blank">Autoclosetag</a>
nástroj pro uzavírání všech typů závorek a tagů.
</p>
<p>
👉
<a href="https://github.com/valsorym/scrooloose-nerdtree" target="_blank">NERDTree</a>
vytvoří ti stromový postranní panel.
</p>
<p>
👉
<a href="https://github.com/neoclide/coc.nvim" target="_blank">Coc</a>
manager pro instalování doplňků do Neovim.
</p>
<p>
👉
<a href="https://github.com/Exafunction/codeium.vim" target="_blank">Codeium</a>
alternativa k GitHub Copilot, který si případně lehce také můžete
doinstalovat.
</p>
<p>
👉
<a href="https://github.com/mhinz/vim-startify" target="_blank">Startify</a>
alternativní uvítací obrazovka s pokaždé jiným IT mottem. Nemusí
fungovat s některými terminály či NERDTree nastaveným spuštěním po
startu.
</p
<p>
👉
<a href="https://github.com/preservim/nerdcommenter" target="_blank">NERD Commenter</a>
plugin pro zakomentování a odkomentování kódu. Zde ho máme nastaven
na
<strong>Ctrl + k</strong>.
</p>
<p>
👉
<a href="https://wakatime.com/neovim" target="_blank">Wakatime</a>
služba která je schopna měřit kolik času jste trávily při kódování
na pc a i na kterém projektu. Služba se jednoduše propojí přes API.
WakaTime najdeš
<a href="https://wakatime.com/" target="_blank">zde</a>.
</p>
<p>
👉
<a href="https://github.com/junegunn/fzf.vim" target="_blank">fzf.vim</a>
asynchronií vyhledávač souboru v projektu. Pro mnohé je toto
vyhledávaní rychlejší než klasické stromové, chce to trochu času.
Ale jak se dostane pod kůži vše ostatní Vám přijde pomalé.
</p>
<p>
👉
<a href="https://github.com/Pocco81/auto-save.nvim" target="_blank">Auto-save</a>
plugin pro automatické ukládání vašich souboru.
</p>
</section>
<section id="coc">
<h2>Coc extensions pro front-end:</h2>
<p>👉 coc-todolist</p>
<p>👉 coc-tailwindcss</p>
<p>👉 coc-json</p>
<p>👉 coc-html-css-support</p>
<p>👉 coc-html</p>
<p>👉 coc-emmet</p>
<p>👉 coc-xml</p>
<p>👉 coc-tsserver</p>
<p>👉 coc-lsp-wl</p>
<p>👉 coc-lit-html</p>
<p>👉 coc-htmldjango</p>
<p>👉 coc-css</p>
<p>👉 coc-markdown-preview-enhanced</p>
<p>👉 coc-markdownlint</p>
<p>👉 coc-eslint</p>
</section>
<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">
<i class="fas fa-arrow-up"></i>
</button>
<footer>
Copyright &copy;
<a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a>
2024
</footer>
</section>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="description" content="ApolloNvim svoboda v programování...." />
<meta name="keywords" content="ApolloNvim Distro" />
<meta name="author" content="Kankys" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/icons8-rocket.gif" />
<!--nav bar-->
<script src="https://kit.fontawesome.com/0a43c6cd1f.js" crossorigin="anonymous"></script>
<!--icons dark, go to up-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!--ubuntu fonts-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<title>ApolloNvim</title>
</head>
<body>
<header>
<h1 class="title">🚀ApolloNvim</h1>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a href="index.html">Domů</a></li>
<li><a href="install.html">Instalace</a></li>
<li><a href="#contact">Kontakty</a></li>
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr />
<!--Začátek sekcí - co h2 sekce + fotogalerie-->
<section class="content" id="welcome">
<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">
<i class="fas fa-arrow-up"></i>
</button>
<footer>
Copyright &copy;
<a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a>
2024
</footer>
</section>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,149 @@
//Navbar menu
const menuIcon = document.querySelector(".menu-icon");
const menuList = document.querySelector("nav");
const hamburgerIcon = document.querySelector(".fa-solid");
menuIcon.addEventListener("click", () => {
if (hamburgerIcon.classList[1] === "fa-bars") {
hamburgerIcon.classList.add("fa-xmark");
hamburgerIcon.classList.remove("fa-bars");
menuList.style.display = "block";
} else {
hamburgerIcon.classList.add("fa-bars");
hamburgerIcon.classList.remove("fa-xmark");
menuList.style.display = "none";
}
});
// Dark / Light Mode
/*
const body = document.querySelector("body");
const head = document.querySelector("header");
const links = document.querySelectorAll("a");
const nav = document.querySelector(".navigation");
const h1 = document.querySelector("h1");
const nadpish2 = document.querySelectorAll("h2");
const p = document.querySelector("p");
const solid = document.querySelector(".fa-solid");
const solid1 = document.querySelector(".menu-icon");
const footer = document.querySelector("footer");
const gotop = document.querySelector("#scrollToTopBtn");
const theme = document.querySelector("#toggleButton");
const box = document.querySelectorAll(".code-box");
let isDraculaMode = false;
// Funkce pro nastavení stylů pro Dracula mód
function setDraculaStyles() {
body.style.backgroundColor = "#2a232b";
body.style.color = "#f8f8f2";
head.style.backgroundColor = "#2a232b";
theme.style.color = "#e7efa7";
gotop.style.color = "#e7efa7";
links.forEach((a) => {
a.style.color = "#f76b00";
});
nav.style.backgroundColor = "#2a232b";
h1.style.color = "#e54472";
nadpish2.forEach((h2) => {
h2.style.color = "#18f700";
});
solid.style.backgroundColor = "#2a232b";
solid.style.color = "#f76b00";
solid1.style.backgroundColor = "#2a232b";
footer.style.backgroundColor = "#2a232b";
//gotop.style.backgroundColor = "#18f700";
//theme.style.backgroundColor = "#18f700";
}
// Funkce pro nastavení stylů pro Light mód;
function setLightStyles() {
body.style.backgroundColor = "#e7efa7";
body.style.color = "#282a36";
theme.style.color = "#2a232b";
gotop.style.color = "#2a232b";
head.style.backgroundColor = "#e7efa7";
nav.style.backgroundColor = "#e7efa7";
solid.style.backgroundColor = "#e7efa7";
solid1.style.backgroundColor = "#e7efa7";
footer.style.backgroundColor = "#e7efa7";
nadpish2.forEach((h2) => {
h2.style.color = "#c627d8";
});
//gotop.style.backgroundColor = "#a7e6ef";
//theme.style.backgroundColor = "#a7e6ef";
box.forEach((p) => {
p.style.color = "white";
});
}
// Funkce pro přepnutí módu
function toggleMode() {
if (isDraculaMode) {
// Pokud je momentálně v Dracula modu, přepnout na Light mód
setLightStyles();
isDraculaMode = false;
} else {
// Pokud je momentálně v Light modu, přepnout na Dracula mód
setDraculaStyles();
isDraculaMode = true;
}
}
// Funkce na změnu stylů
document.getElementById("toggleButton").addEventListener("click", toggleMode);
// Nastavení - výchozí styl na Dark
setDraculaStyles();
isDraculaMode = true;
*/
// Photo Gallery -> section (zoom)
const image1 = document.querySelector(".picture");
image1.addEventListener("mouseenter", () => {
image1.style.transform = "scale(2.2)";
});
image1.addEventListener("mouseleave", () => {
image1.style.transform = "scale(1)";
});
const image2 = document.querySelector(".picture1");
image2.addEventListener("mouseenter", () => {
image2.style.transform = "scale(2.2)";
});
image2.addEventListener("mouseleave", () => {
image2.style.transform = "scale(1)";
});
const image3 = document.querySelector(".picture2");
image3.addEventListener("mouseenter", () => {
image3.style.transform = "scale(2.2)";
});
image3.addEventListener("mouseleave", () => {
image3.style.transform = "scale(1)";
});
// Tlačítko go to top
// Zobrazení tlačítka od rolovaní části stránky (víc logické než až na konci)
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("scrollToTopBtn").style.display = "block";
} else {
document.getElementById("scrollToTopBtn").style.display = "none";
}
}
// Posunout nahoru, když uživatel klikne na tlačítko
function scrollToTop() {
document.body.scrollTop = 0; // Pro Safari
document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
}

View File

@ -0,0 +1,239 @@
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url("colors.css");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
max-width: 1000px;
margin: 0 auto;
font-family: "Ubuntu", sans-serif;
background-color: var(--dracula-body-bg);
color: var(--dracula-color);
}
/*Header */
h1 {
padding-left: 8px;
}
header {
margin-top: 25px;
display: flex;
align-items: center;
height: 70px;
flex-direction: row;
/*position: fixed;*/
background-color: var(--dracula-header-bg);
}
a {
color: var(--dracula-links-color);
}
.title {
padding-top: 25px;
}
.title {
flex-grow: 1;
display: flex;
}
/* navigation */
nav {
margin-right: 30px;
}
nav li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
nav li a {
text-decoration: none;
color: var(--dracula-nav-links-color);
}
.navigation {
background-color: var(--dracula-nav-bg);
}
h1 {
color: var(--dracula-h1-color);
}
h2 {
color: var(--dracula-h2-color);
}
.fa-solid {
background-color: var(--dracula-solid-bg);
color: var(--dracula-solid-color);
}
/* navigation icons */
.menu-icon {
display: none;
margin-right: 30px;
}
/*Header small display*/
@media (max-width: 600px) {
body {
padding: 10px;
}
header {
position: relative;
}
header nav {
position: absolute;
top: 70px;
width: 100%;
display: none;
}
.menu-icon {
display: block;
font-size: 23px;
}
header nav li {
display: block !important;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
}
/* Sekce */
.content {
text-align: center;
}
#welcome {
padding-top: 50px;
padding-bottom: 50px;
}
#install {
padding-top: 50px;
}
#node {
padding-top: 50px;
padding-bottom: 50px;
}
#apollo {
padding-top: 50px;
padding-bottom: 50px;
}
#coc {
padding-top: 50px;
padding-bottom: 50px;
}
#contact {
padding-top: 50px;
padding-bottom: 50px;
}
#plugin {
padding-top: 50px;
}
#other {
padding-top: 50px;
}
/*Code box*/
.code-box {
background-color: #353535;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: monospace;
max-width: 500px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
}
/*Picture settings*/
.sat {
width: 175px;
height: 175px;
}
.photo {
text-align: center;
padding-top: 50px;
}
.photo img {
width: 300px;
height: 200px;
margin: 10px;
transition: all 0.5s linear;
}
/*footer pevná pozice*/
footer {
bottom: 0;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 20px;
}
footer a {
text-decoration: none;
}
#scrollToTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
/*butoon přes obsah*/
z-index: 99;
outline: none;
cursor: pointer;
padding: 15px;
border-radius: 50%;
background-color: transparent;
color: var(--dracula-scrollToTopBtn-color);
}
/* Styl pro ikonu */
#scrollToTopBtn i {
font-size: 34px;
}
/*Instalace*/
.list ul {
list-style-type: none;
}
.list {
padding-top: 50px;
padding-bottom: 50px;
}
#plug-vim {
padding-top: 50px;
padding-bottom: 50px;
}
.h2-install {
padding-bottom: 15px;
}

View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fractal</title>
<link rel="stylesheet" type="text/css" href="../../../style/style.css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Fractal</h1>
<h2 class="project-tagline">
Interactive fractal using
<a href="https://github.com/xaos-project/XaoSjs">XaoS.js</a>.
</h2>
<a href="../../../" class="btn">Home</a>
<a href="../" class="btn">Games</a>
</header>
<div class="container">
<canvas id="canvas">
<p>
Your browser doesn't seem to support the &lt;canvas&gt; tag. Try
<a href="http://firefox.com">Firefox</a>.
</p>
</canvas>
<div id="controls">
<button
id="fullScreenButton"
class="btn btn-primary"
onclick="goFullScreen();"
></button>
<a href="./" id="resetButton" class="btn btn-danger">Reset</a>
<a
href="#"
id="saveCanvasButton"
class="btn btn-primary"
download="fractal.png"
onclick="saveCanvas()"
>Capture</a
><br />
</div>
</div>
<script src="./script/xaos.js"></script>
<script src="./script/starter-template.js"></script>
</body>
</html>

View File

@ -0,0 +1,12 @@
function saveCanvas() {
saveCanvasButton.download = "image.png";
saveCanvasButton.href = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
}
function goFullScreen() {
if (canvas.requestFullScreen) canvas.requestFullScreen();
else if (canvas.webkitRequestFullScreen) canvas.webkitRequestFullScreen();
else if (canvas.mozRequestFullScreen) canvas.mozRequestFullScreen();
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,67 @@
#controls {
position: relative;
margin-bottom: 2.5em;
}
#canvas {
width: 100%;
height: 100vh;
margin-bottom: 0.5em;
display: inline-block;
vertical-align: baseline;
}
#fullScreenButton {
position: absolute;
height: 100vh;
width: 100%;
bottom: 3rem;
visibility: hidden;
}
@media only screen and (max-width: 600px) {
#fullScreenButton {
visibility: visible;
opacity: 0;
}
#saveCanvasButton {
visibility: hidden;
}
}
#resetButton {
position: absolute;
left: 0em;
}
#saveCanvasButton {
position: absolute;
right: 0.1em;
visibility: visible;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

View File

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Games</title>
<link rel="stylesheet" href="../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Games</h1>
<h2 class="project-tagline">
Games I programmed or implemented. <br />
(Warning: They suck.)
</h2>
<a href="../../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<section id="rps">
<h3>
<a href="./rps/">Rock Paper Scissors 🪨📄✂️<sup></sup></a>
</h3>
<code>
The first game I ever made! I wrote this when I first began learning
Javascript, to be specific I wrote the logic during that time. The
game was only playable through the terminal, now its fairly portable
and can be integrated into anything.
</code>
</section>
<br />
<section id="es">
<h3>
<a href="./eternal-space/web">Eternal Space<sup></sup></a>
</h3>
<code>
Currently only playable on a pc, I haven't tried figuring out how to
scale down the game lol. I participated in the Opera GX + GameMaker
game jam and created this monstrosity. The game jam was alien themed,
however I never got that far. Before taking part in this game jam I
have never programmed an actual game nor have been in a game jam. I
learned how to program in GameMaker Language (basically Javascript)
during the event.
</code>
</section>
<br />
<section id="fractal">
<h3>
<a href="./fractal/">Fractal<sup></sup></a>
</h3>
<code>
Interactive Javascript real-time fractal renderer using XaoS.js. Works
best on a PC.
</code>
</section>
<!-- <section id="#">
<h3><a href="#">title</a></h3>
<code>
Description
</code>
</section> -->
<footer class="site-footer">
You have reached the end of the page. (ノ◕ヮ◕)*:・゚✧
</footer>
</main>
</body>
</html>

View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="../../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Rock Paper Scissors</h1>
<h2 class="project-tagline">Made using Javascript.</h2>
<a href="../../../" class="btn">Home</a>
<a href="../" class="btn">Games</a>
</header>
<main id="content" class="main-content" role="main">
<section class="game">
<div id="gameScore">
<p><span id="scorePlayer"></span> <span id="scoreCPU"></span></p>
<p><span id="round"></span></p>
</div>
<div>
<script src="./script/script.js"></script>
<button class="btn gameButton" onclick="play('rock')">🪨</button>
<button class="btn gameButton" onclick="play('paper')">📄</button>
<button class="btn gameButton" onclick="play('scissors')">✂️</button>
</div>
<div id="evaluation">
<p id="choice">
<span id="choicePlayer"></span> <span id="choiceCPU"></span>
</p>
<p><strong id="gameWinner"> </strong></p>
</div>
</section>
<footer class="site-footer">
You have reached the end of the page. (ノ◕ヮ◕)ノ*:・゚✧
</footer>
</main>
</body>
</html>

View File

@ -0,0 +1,93 @@
let userChoice = "";
const getUserChoice = (userInput) => {
userChoice = userInput;
};
function getComputerChoice() {
let cpuChoice = Math.floor(Math.random() * 3);
if (cpuChoice === 0) {
return "rock";
} else if (cpuChoice === 1) {
return "paper";
} else if (cpuChoice === 2) {
return "scissors";
}
}
function determineWinner(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return "Tie";
}
if (userChoice === "rock") {
if (computerChoice === "paper") {
return "Computer";
} else {
return "Player";
}
}
if (userChoice === "paper") {
if (computerChoice === "scissors") {
return "Computer";
} else {
return "Player";
}
}
if (userChoice === "scissors") {
if (computerChoice === "rock") {
return "Computer";
} else {
return "Player";
}
}
}
const score = {
player: 0,
cpu: 0,
ties: 0,
rounds: 0,
};
function playGame() {
var computerChoice = getComputerChoice();
const winner = determineWinner(userChoice, computerChoice);
score.rounds++;
switch (winner) {
case "Player":
score.player++;
break;
case "Computer":
score.cpu++;
break;
case "Tie":
score.ties++;
break;
}
console.log("\nPlayer: " + userChoice);
console.log("CPU: " + computerChoice);
if (winner != "Tie") {
console.log("Winner: " + winner);
} else {
console.log("Tie game!");
}
console.log(score);
scorePlayer.textContent = `Player wins: ${score.player}` + " ";
scoreCPU.textContent = `Computer wins: ${score.cpu}`;
round.textContent = `Round ${score.rounds}`;
choicePlayer.textContent = `You: ${userChoice}`;
choiceCPU.textContent = `CPU: ${computerChoice}`;
if (winner != "Tie") {
gameWinner.textContent = "Winner: " + winner;
} else {
gameWinner.textContent = "Tie game!";
}
}
function play(input) {
getUserChoice(input);
playGame();
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

View File

@ -0,0 +1,298 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Kakoune svoboda v programování...." />
<meta name="keywords" content="Kakoune fun-page" />
<meta name="author" content="Kankys" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/kakoune_logo_full.png" />
<!--nav bar-->
<script src="https://kit.fontawesome.com/0a43c6cd1f.js" crossorigin="anonymous"></script>
<!--icons dark, go to up-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!--ubuntu fonts-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<title>Kakoune Czech Community</title>
</head>
<body>
<header>
<div class="logo">
<link rel="stylesheet" href="style.css" />
<img src="img/kakoune_logo_full.png" alt="" />
<h1 class="title">Kakoune Czech Community</h1>
</div>
<!-- Kakoune - navigation -->
<nav class="navigation">
<ul>
<li><a href="#install">Instalace</a></li>
<li><a href="#kakoune">Kakoune</a></li>
<li><a href="#contact">Kontakty</a></li>
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr />
<button id="toggleButton"><i class="fas fa-adjust"></i></button>
<div class="test">1</div>
<!--Začátek sekcí - co h2 sekce + fotogalerie-->
<section class="content" id="welcome">
<section class="welcome">
<h2>Úvod:</h2>
<p>
👉 Kakoune Front-End Power postavený na
<a href="https://github.com/kakoune-lsp/kakoune-lsp" target="_blank">LSP</a>.
</p>
<p>
👉 <a href="http://kakoune.org/">Kakoune</a> je modální editor pro
<a href="http://www.linux.cz/" target="_blank">Linux</a> a
<a href="https://cs.wikipedia.org/wiki/MacOS" target="_blank">macOS</a>
jako je třeba
<a href="https://www.vim.org/" target="_blank">Vim</a> či
<a href="https://neovim.io/" target="_blank">Neovim</a>. . Z Kakoune
vychází také jeden velmi oblíbený modální editor
<a href="https://helix-editor.com/" target="_blank">Helix-editor</a>.
Jak Kakoune, tak Helix se od Vim a Neovim liší v ovládání, kde je opačná
logika příkazu a je bližší lidské řeči. Nespornou výhodou Kakoune je
oproti Helixu možnost rozšířit aplikaci o pluginy. Proto je
Kakoune vhodný pro zkušenější uživatele. Náš web by Ti měl pomoct s
prvotním nastavením. Pokud si i tak na tento editor netroufáš, Helix je skvělá náhrada.
</p>
<p>
👉 Tato distribuce nefunguje tak, že jen klikneš na tlačítko a nainstaluje
se. Vede k samostatné instalaci pomocí tohoto webu. Cílem je
pochopit, jak Kakoune funguje, abyste si mohli sami vše modifikovat.
</p>
<p>
👉 Toto nastavení je primárně pro vývoj webu, ale není problém si vše
přizpůsobit. Inspiroval jsem se pluginy, které jsem využíval ve VSCode a
Webstorm.
</p>
<p>👉 Velký důraz je kladen na rychlost a lehkost.</p>
<p>👉 Tento blog je stále ve vývoji a postupně se na něm pracuje.</p>
<p>
👉 Pro nejlepší zážitek s Kakoune doporučuji používat multiplexor
<a href="https://git.archoslinux.cz/kankys/zellij-mySetup" target="_blank">Zellij </a>, ale není to samozřejmě
podmínkou.
</p>
</section>
<section id="advantages">
<h2>Přednosti:</h2>
<p>
👉 Hlavní předností tohoto nastavení jsou AutoSave,
doplňování HTML, CSS, JS a zkratky k zakomentování a odkomentování
kódu. Taky je zde několik pluginu pro příjemnější práci v Kakoune.
</p>
<p>
👉 LSP se
mi velmi osvědčilo v modálním editoru
<a href="https://helix-editor.com/" target="_blank">Helix-editor</a>.
Mou konfiguraci Helixu najdete
<a href="https://git.archoslinux.cz/kankys/Helix-frontend-setup" target="_blank">zde</a>.
</p>
<p>
👉 Ta nejlepší témata v Kakoune nemusíš hledat, najdeš je po instalaci. Defaultně je
v naší konfiguraci nastaveno gruvbox-dark.
</p>
<p>
👉 Témá v Kakoune si jednoduše změníš v command line příkazem
`colorscheme` a tlačítkem Tab se budeš přepínat mezi jednotlivými
tématy. Command mode, česky příkazový mód, vyvoláš zkratkou <strong>Ctrl + :</strong> .
</p>
</section>
<section class="photo">
<img class="picture" src="img/home.png" alt="Homescreen" />
<img class="picture1" src="img/config.png" alt="Zellij" />
<img class="picture2" src="img/command.png" alt="Command" />
</section>
<section id="install">
<h2>Instalace a nastavení:</h2>
<p>
👉 Pokud ještě nemáš, nainstaluj si,
<a href=" http://kakoune.org/" target="_blank">Kakoune</a>.
</p>
<p>👉 Nejprve si zálohuj své aktuální nastavení Kakoune!!!</p>
<p>👉 Linux & Mac:</p>
<div class="code-box">
<p>~/.config/kak/kakrc</p>
</div>
<p>👉 Aby Kakoune dobře komunikoval s LSP, je potřeba mít nainstalovaný <a href="https://www.rust-lang.org/"
target="_blank">Rust</a>. </p>
</section>
<section id="node">
<h2>Node.js:</h2>
<p>
👉 Doporučuji mít nainstalovaný
<a href="https://nodejs.org/en" href="_blank">Node.js</a>.
</p>
<p>👉 Pro správnou funkčnost LSP si doinstaluj tyto balíčky:</p>
<p><a href="https://github.com/microsoft/vscode-html-languageservice">vscode-html-language-server</a></p>
<p><a href="https://github.com/microsoft/vscode-css-languageservice">vscode-css-language-server</a></p>
<p><a
href="https://github.com/typescript-language-server/typescript-language-server">typescript-language-server</a>
</p>
<p><a href="https://github.com/aca/emmet-ls">emmet-ls</a></p>
<p><a
href="https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-server/README.md">tailwindcss-language-server</a>
</p>
<p><a href="https://github.com/artempyanykh/marksman">marksman</a></p>
<p><a href="https://github.com/markdoc-extra/markdoc-ls">markdoc-ls</a></p>
<p>👉 A také si doinstaluj tento server pro správnou funkčnost HTML v LSP příkazem: </p>
<div class="code-box">
<p>npm install -g vscode-{html,css,json}-languageserver-bin</p>
</div>
<p>
👉 Dále si v Node.js nainstaluj
<a href="https://www.npmjs.com/package/live-server" target="_blank">Live-server</a>.
</p>
<p>
👉 Platí v případě, že chceš dělat front-end nebo programuješ v
Javascriptu.
</p>
<p>👉 Ve svém projektu budeš moci pouštět index.html příkazem:</p>
<div class="code-box">
<p>npx live-server</p>
</div>
<p> 👉 Všechny servery, co si můžeš pomocí LSP nainstalovat, najdeš <a
href="https://github.com/kakoune-lsp/kakoune-lsp/wiki/How-to-install-servers" target="_blank">zde</a>. </p>
</section>
<section id="kakoune">
<h2>Kakoune:</h2>
<p>
👉 Pro instalaci Kakoune Front-End Power Ti stačí stáhnout pouze soubor
<strong>kakrc</strong> z tohoto <a href="https://git.archoslinux.cz/kankys/Kakoune-modal-editor-config"
target="_blank">repozitáře</a> .
</p>
<p>
👉 Ulož ho do kořenováho adresáře <strong>~/.config/kak/</strong>. <strong>Nezapomeň na zálohu stávajících
souborů, pokud máš i své configy.</strong>
</p>
<p>👉 Kakoune pustíš v terminálu příkazem <strong>kak</strong>.</p>
<p>
👉 V Kakoune zadej do command line <strong>plug-install</strong>, tím
nainstaluješ všechny pluginy. Restartuj Kakoune.
</p>
<p>
👉 Pokud Ti některý plugin chybí, můžeš ho lehce doinstalovat nebo
naopak odinstalovat. Více informací
najdeš v Kakoune
<a href="https://github.com/mawww/kakoune#3-basic-interaction" target="_blank">dokumentaci</a>
nebo velmi Ti rád poradím viz. <a href="#contact">Kontakty</a>.
</p>
<p>
👉 Pokud některý plugin nechceš používat, stačí ho v souboru
<strong>kakrc</strong> zakomentovat pomocí hastagu
<strong>#</strong>.
</p>
<p>
👉 Tuto konfiguraci používám na Linuxu i macOS. </p>
</section>
<section id="plans">
<h2>Plán Kakoune Front-End Power:</h2>
<p>
👉 Do budoucna můžeš očekávat tyto nové funkce a další novinky:
</p>
<p>
👉 Web na vlastní doméně. Zatím Kakoune Front-End Power najdeš
<a href="https://lukaskanka.cz/kakoune/index.php" target="_blank">zde</a>.
</p>
<p>👉 Nové pluginy.</p>
<p>
👉 Návody k pluginům, jak nastavit a jak s nimi pracovat.
</p>
<p>👉 Návody k práci s Kakoune.</p>
</section>
<section id="plugin">
<h2>Výběr pluginu v Kakoune Front-End Power:</h2>
<p>
👉 <strong>plug.kak</strong> nejduležitější plugin, aby bylo možné instalovat další pluginy.</p>
<p>
👉 <strong>kakoune-lsp</strong>
</p>
<p>
👉 <strong>luar</strong> rozšíří možnost instalovat pluginy napsané v jazyce Lua. </p>
<p>
👉 <strong>byline.kak</strong> vybere celý řádek pomocí klávesy <strong>x</strong> jako v Helix-editoru. </p>
<p>
👉 <strong>auto-pairs</strong> automaticky doplní závorky. </p>
<p>
👉 <strong>fzf.kak</strong> rychlé asynchronní vyhledávaní souborů. </p>
</section>
<section id="faq">
<h2>Otázky a odpovědi:</h2>
<p>👉 Kolik Kakoune stojí? -> Nic, Kakoune je zdarma.</p>
</section>
<section id="contact">
<h2>Kontakty:</h2>
<p>
👉 <a href="https://t.me/+RlXM8oEZ8TJkMWVk" target="_blank"> Kakoune community Telegram skupina</a>
</p>
<p>
👉 <a href="https://lukaskanka.cz/" target="_blank"> Osobní web autora</a>
</p>
<p>
👉 <a href="https://git.archoslinux.cz/kankys" target="_blank"> Gitea profil</a>
</p>
<p>
👉 <a href="https://github.com/LukasKanka/" target="_blank"> GitHub</a>
</p>
<p>
👉 <a href="https://nostr.band/npub12xzu8ejrl9cwpd034cqj5jtuztn4mxp3em2frckm9tk28kmy48vqr0u0yu" target="_blank">
Nostr</a>
</p>
<p>
👉 <a href="https://mastodon.arch-linux.cz/@Kankys" target="_blank"> Mastodon</a>
</p>
</section>
<section id="help">
<h2>Podpora:</h2>
<p>
👉 Pokud chceš podpořit nebo se podílet na obsahu tohoto webu, budu rád, když mi napíšeš.
</p>
<p>👉 Taky můžeš tento projekt podpořit pár Satoshi:</p>
<img class="sat" src="https://lukaskanka.cz/index/about/img/sat.jpeg" alt="Satoshi" />
</section>
<section id="other">
<h2>Další projekty a odkazy:</h2>
<p>
👉 <a href="https://arch-linux.cz/" target="_blank">ArchLinux CZ</a>
</p>
<p>
👉
<a href="https://searxng.cz/" target="_blank">Vyhledávač SearXNG CZ</a>
</p>
<p>
👉
<a href="https://endeavouros.com/" target="_blank">EndeavourOS Linux</a>
</p>
<p>
👉 <a href="https://i3wm.org/" target="_blank">i3 window manager</a>
</p>
</section>
</section>
<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">
<i class="fas fa-arrow-up"></i>
</button>
<footer>
Copyright &copy;
<a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a>
2024
</footer>
</section>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,153 @@
//Navbar menu
const menuIcon = document.querySelector(".menu-icon");
const menuList = document.querySelector("nav");
const hamburgerIcon = document.querySelector(".fa-solid");
menuIcon.addEventListener("click", () => {
if (hamburgerIcon.classList[1] === "fa-bars") {
hamburgerIcon.classList.add("fa-xmark");
hamburgerIcon.classList.remove("fa-bars");
menuList.style.display = "block";
} else {
hamburgerIcon.classList.add("fa-bars");
hamburgerIcon.classList.remove("fa-xmark");
menuList.style.display = "none";
}
});
// Dark / Light Mode
const body = document.querySelector("body");
const head = document.querySelector("header");
const links = document.querySelectorAll("a");
const nav = document.querySelector(".navigation");
const h1 = document.querySelector("h1");
const nadpish2 = document.querySelectorAll("h2");
const p = document.querySelector("p");
const solid = document.querySelector(".fa-solid");
const solid1 = document.querySelector(".menu-icon");
const footer = document.querySelector("footer");
const gotop = document.querySelector("#scrollToTopBtn");
const theme = document.querySelector("#toggleButton");
const box = document.querySelectorAll(".code-box");
let isDraculaMode = false;
// Funkce pro nastavení stylů pro Dracula mód
function setDraculaStyles() {
body.style.backgroundColor = "#2a232b";
body.style.color = "#f8f8f2";
head.style.backgroundColor = "#2a232b";
theme.style.color = "#9fea8a";
gotop.style.color = "#9fea8a";
links.forEach((a) => {
a.style.color = "#f76b00";
});
nav.style.backgroundColor = "#2a232b";
h1.style.color = "#e54472";
nadpish2.forEach((h2) => {
h2.style.color = "#18f700";
});
solid.style.backgroundColor = "#2a232b";
solid.style.color = "#f76b00";
solid1.style.backgroundColor = "#2a232b";
footer.style.backgroundColor = "#2a232b";
//gotop.style.backgroundColor = "#18f700";
//theme.style.backgroundColor = "#18f700";
}
// Funkce pro nastavení stylů pro Light mód;
function setKakouneStyles() {
body.style.backgroundColor = "#9fea8a";
body.style.color = "#282a36";
h1.style.color = "#e84046";
theme.style.color = "#2a232b";
links.forEach((a) => {
a.style.color = "#ea3838";
});
gotop.style.color = "#2a232b";
head.style.backgroundColor = "#9fea8a";
nav.style.backgroundColor = "#9fea8a";
solid.style.backgroundColor = "#9fea8a";
solid1.style.backgroundColor = "#9fea8a";
footer.style.backgroundColor = "#9fea8a";
nadpish2.forEach((h2) => {
h2.style.color = "#1909f4";
});
//gotop.style.backgroundColor = "#a7e6ef";
//theme.style.backgroundColor = "#a7e6ef";
box.forEach((p) => {
p.style.color = "white";
});
}
// Funkce pro přepnutí módu
function toggleMode() {
if (isDraculaMode) {
// Pokud je momentálně v Dracula modu, přepnout na Light mód
setKakouneStyles();
isDraculaMode = false;
} else {
// Pokud je momentálně v Light modu, přepnout na Dracula mód
setDraculaStyles();
isDraculaMode = true;
}
}
// Funkce na změnu stylů
document.getElementById("toggleButton").addEventListener("click", toggleMode);
// Nastavení - výchozí styl na Dark
setKakouneStyles();
isDraculaMode = true;
// Photo Gallery -> section (zoom)
const image1 = document.querySelector(".picture");
image1.addEventListener("mouseenter", () => {
image1.style.transform = "scale(2.2)";
});
image1.addEventListener("mouseleave", () => {
image1.style.transform = "scale(1)";
});
const image2 = document.querySelector(".picture1");
image2.addEventListener("mouseenter", () => {
image2.style.transform = "scale(2.2)";
});
image2.addEventListener("mouseleave", () => {
image2.style.transform = "scale(1)";
});
const image3 = document.querySelector(".picture2");
image3.addEventListener("mouseenter", () => {
image3.style.transform = "scale(2.2)";
});
image3.addEventListener("mouseleave", () => {
image3.style.transform = "scale(1)";
});
// Tlačítko go to top
// Zobrazení tlačítka od rolovaní části stránky (víc logické než až na konci)
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("scrollToTopBtn").style.display = "block";
} else {
document.getElementById("scrollToTopBtn").style.display = "none";
}
}
// Posunout nahoru, když uživatel klikne na tlačítko
function scrollToTop() {
document.body.scrollTop = 0; // Pro Safari
document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
}

View File

@ -0,0 +1,212 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
max-width: 1000px;
margin: 0 auto;
font-family: "Ubuntu", sans-serif;
}
/*Header */
h1 {
padding-left: 8px;
}
header {
margin-top: 25px;
display: flex;
align-items: center;
height: 70px;
flex-direction: row;
/*position: fixed;*/
}
.title {
padding-top: 25px;
}
.logo {
flex-grow: 1;
display: flex;
}
.logo img {
/*width: 100px;*/
height: 100px;
padding-top: 15px;
margin-left: 20px;
}
/* navigation */
nav {
margin-right: 30px;
}
nav li {
display: inline-block;
list-style-type: none;
margin-right: 20px;
}
nav li a {
text-decoration: none;
color: black;
}
/* navigation icons */
.menu-icon {
display: none;
margin-right: 30px;
}
/*Dark/Light mode button*/
#toggleButton {
float: right;
margin-right: 30px;
margin-top: 10px;
padding: 5px;
}
#toggleButton {
bottom: 20px;
right: 20px;
border: none;
outline: none;
background-color: transparent;
font-size: 34px;
cursor: pointer;
}
/*Header small display*/
@media (max-width: 600px) {
body {
padding: 10px;
}
header {
position: relative;
}
header nav {
position: absolute;
top: 70px;
width: 100%;
display: none;
}
.menu-icon {
display: block;
font-size: 23px;
}
header nav li {
display: block !important;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
hr {
display: none;
}
}
/* Sekce */
.content {
text-align: center;
}
.welcome {
padding-top: 115px;
padding-bottom: 50px;
}
#install {
padding-top: 50px;
}
#node {
padding-top: 50px;
padding-bottom: 50px;
}
#plans {
padding-top: 50px;
padding-bottom: 50px;
}
#contact {
padding-top: 50px;
padding-bottom: 50px;
}
#other {
padding-top: 50px;
}
/*Code box*/
.code-box {
background-color: #353535;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: monospace;
max-width: 400px;
margin: 0 auto;
}
/*Picture settings*/
.sat {
width: 175px;
height: 175px;
}
.photo {
text-align: center;
padding-top: 50px;
}
.photo img {
width: 300px;
height: 200px;
margin: 10px;
transition: all 0.5s linear;
}
/*footer pevná pozice*/
footer {
bottom: 0;
margin-bottom: 10px;
margin-left: 25px;
margin-top: 20px;
}
footer a {
text-decoration: none;
}
#scrollToTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
/*butoon přes obsah*/
z-index: 99;
outline: none;
cursor: pointer;
padding: 15px;
border-radius: 50%;
background-color: transparent;
}
/* Styl pro ikonu */
#scrollToTopBtn i {
font-size: 34px;
}

View File

@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="Kankys Matrix" content="Zásady ochrany osobních údaju." />
<title>Zásady ochrany osobních údaju</title>
<link rel="stylesheet" href="../../style/style.css" />
<link rel="shortcut icon" href="img/logo_arch_linux_167.png" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
<link
href="//cdn.jsdelivr.net/npm/font-logos@1/assets/font-logos.css"
rel="stylesheet"
/>
</head>
<body style="cursor: url(../../res/site/icons/archlinux.png), auto">
<header class="page-header" role="banner">
<h1 class="project-name">O mně</h1>
<!-- <h2 class="project-tagline">The webmaster.</h2> -->
<a href="../../" class="btn">Domů</a>
</header>
<main id="content" class="main-content" role="main">
<p>
<strong>
<center>Zásady ochrany osobních údajů</center> </strong
><br />
Naposledy aktualizováno: 28.4.2022
</p>
<p>
Pokud jste návštěvníkem našeho blogu, odběratelem novinek,
přispěvatelem do komentářů poskytujete nám své osobní údaje. My vaše
údaje zpracováváme a za jejich bezpečnost odpovídáme. Slibujeme, že
vaše <br />údaje dostatečně chráníme a podřizujeme se požadavkům
Nařízení o ochraně osobních údajů (GDPR).
</p>
<p>
Neprodáváme žádný produkt, nejste tedy našimi zákazníky, ale
návštěvníky blogu.
</p>
<p>
Správcem vašich osobních údajů je Lukáš (Lucka ani nekouká přes
rameno!)<br />
Správcem osobních údajů je Lukáš Kaňka, který provozuje webové stránky
lukan.cz a lukan.cekuj.net. Lukáš vaše údaje spravuje a určuje, jak
dlouho budou osobní údaje zpracovávány, a za jakým účelem. Vybírá
<br />také další zpracovatele, které ke zpracování využíváme.
</p>
<p>
<strong>Jaké údaje zpracováváme a proč?</strong><br />
Vaše osobní údaje zpracováváme především proto, abychom vám mohli
poskytovat co nejkvalitnější obsah. Jednotlivé důvody zpracování:
</p>
<p>
<strong>Předávání osobních údajů třetím osobám.</strong><br />
Vaše údaje zpracovává správce Lukáš Kaňka, s využitím dalších dvou
zpracovatelů, společnosti Endora , jejichž zpracování spočívá v
uchovávání údajů na zabezpečených cloudových serverech.
</p>
<p>
Abychom mohli měřit, jak se vám na našem blogu líbí, kde trávíte
nejvíce času a kam klikáte, používáme další poskytovatele služeb pro
určité zpracovatelské operace. Jsou to:
</p>
<p>TopList pomocí měřícího kódu</p>
<p>
<strong>Jak nás můžete kontaktovat</strong><br />
na nás máte jakoukoliv otázku nebo požadavek, můžete nás
kontaktovat ne e-mailové adrese: lukas.kanka@lukan.cz.
</p>
<p>
<strong>Předávání vašich dat mimo Evropskou Unii</strong><br />
Vaše data zpracováváme výhradně v Evropské unii nebo v zemích, které
zajišťují odpovídající úroveň ochrany na základě rozhodnutí Evropské
komise.
</p>
<p>
<strong>Zabezpečení a ochrana osobních údajů</strong><br />
Vaše data jsou u nás v bezpečí. Přijali jsme technická opatření, která
zajišťují zabezpečení osobních údajů šifrováním přenosu dat pomocí
HTTPS protokolu (ten zámeček, co je vedle naší URL adresy ;-)) a<br />
zabezpečili vaše osobní údaje v souladu s čl. 32 GDPR.
</p>
<p>
<strong>Vaše práva v souvislosti s ochranou osobních údajů:</strong>
</p>
<p>
V souvislosti s ochranou osobních údajů máte řadu práv. Pokud budete
chtít některého z těchto práv využít, prosím, kontaktujte nás
prostřednictvím e-mailu: lukas.kanka@lukan.cz
</p>
<p>Máte právo na informace, které si právě teď čtete. 🙂</p>
<p>
Díky právu na přístup nás můžete kdykoli vyzvat a my vám do 30 dnů
doložíme, jaké vaše osobní údaje zpracováváme a proč. Pokud se u vás
něco změní nebo shledáte své osobní údaje neaktuální nebo<br />
neúplné, máte právo na doplnění a změnu osobních údajů.
</p>
<p>
Právo na omezení zpracování můžete využít, pokud se domníváte, že
zpracováváme vaše nepřesné údaje, domníváte se, že provádíme
zpracování nezákonně, ale nechcete všechny údaje smazat nebo pokud
jste<br />
vznesli námitku proti zpracování. Omezit můžete rozsah osobních údajů
nebo účelů zpracování.
</p>
<p><strong>Právo na výmaz (být zapomenut)</strong></p>
<p>
Vaším dalším právem je právo na výmaz (být zapomenut). Nechceme na vás
zapomenout, ale pokud si to budete přát, máte na to právo. 😞 V
takovém případě vymažeme veškeré vaše osobní údaje ze svého<br />
systému i ze systému všech dílčích zpracovatelů a záloh. Na zajištění
práva na výmaz potřebujeme 30 dní.
</p>
<p><strong>Stížnost u Úřadu na ochranu osobních údajů</strong></p>
<p>
Pokud máte pocit, že s vašimi údaji nezacházíme v souladu se zákonem,
máte právo se se svou stížností kdykoli obrátit na Úřad pro ochranu
osobních údajů. Budeme moc rádi, pokud nejprve budete o tomto<br />
podezření informovat nás, abychom s tím mohli něco udělat a případné
pochybení napravit.
</p>
<p><strong>Mlčenlivost:</strong></p>
<p>
Jsme povinni zachovávat mlčenlivost o osobních údajích a o
bezpečnostních opatřeních, jejichž zveřejnění by ohrozilo zabezpečení
vašich osobních údajů. Tato mlčenlivost přitom trvá i po skončení<br />
závazkových vztahů s námi. Bez vašeho souhlasu také vaše údaje žádné
jiné třetí straně nevydáme.
</p>
<p>Tyto Zásady ochrany osobních údajů nabývají účinnosti 28.4.2022</p>
<footer class="site-footer">
Copyright &copy; Lukáš Kaňka 2024
</footer>
</main>
</body>
</html>

View File

@ -0,0 +1,3 @@
# První povinný projekt v rámci Akademii Engeto - front-end developers
K projektu připravuji zároveň i testy v frameworku Playwright pod tímto [odkazem](https://github.com/LukasKanka/YourTravelAssistant_Playwright.git).

View File

@ -0,0 +1,554 @@
:root {
--word-black: #000;
--word-white: #fff;
--link-one: #efa69d;
--link-two: #e9877b;
--background-one: #33292a;
--background-two: #644b4f;
--background-three: #333333;
--background-four: #f2f2f2;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
}
/* Navigace (horní menu) */
nav {
padding: 10px;
background-color: var(--background-one);
font-size: 20px;
}
a {
text-decoration: none;
color: var(--word-white);
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
flex-grow: 1;
}
.navigation {
width: 65%;
margin: 0 auto;
}
.icon {
width: auto;
height: 22px;
display: none;
margin-left: auto;
margin-right: 12px;
}
.icon img {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.navigation {
width: 90%;
margin: 0 auto;
}
nav a {
display: none;
}
.icon {
display: block;
}
}
/* Hero - section */
.hero-section {
height: 80vh;
background-image: url(images/scott-goodwill-y8Ngwq34_Ak-unsplash.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-text-wrapper {
position: relative;
width: 65%;
margin: 0 auto;
height: 100%;
}
.hero-text {
color: var(--word-white);
position: absolute;
right: 0;
bottom: 50px;
font-size: 80px;
text-align: right;
}
.h2-about {
font-weight: 700;
}
@media (max-width: 768px) {
.hero-text-wrapper {
width: 90%;
margin: 0 auto;
}
.hero-text {
font-size: 35px;
height: 80px;
margin-bottom: 5px;
}
}
/* About sekce */
.about-section {
margin: 45px 0;
}
.about-section-wrapper {
width: 65%;
margin: 0 auto;
display: flex;
gap: 20px;
}
.about-text {
flex: 1;
}
.about-img {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.about-section-wrapper {
flex-direction: column;
width: 90%;
margin: 0 auto;
}
.about-text {
text-align: left;
}
.about-img {
text-align: center;
}
.about-text-p {
padding-top: 15px;
}
}
/* What We Do */
.what-section {
background-color: var(--background-one);
color: var(--word-white);
}
.what-section-wrapper {
width: 65%;
margin: 0 auto;
}
.what-text {
text-align: center;
}
.h2-what-we {
font-size: 38px;
text-align: center;
padding-top: 45px;
padding-bottom: 35px;
}
.where-text {
text-align: center;
}
.icon-what-section {
margin-top: 45px;
padding: 45px;
list-style: none;
display: flex;
justify-content: space-between;
flex-grow: 1;
}
.img-icons {
width: 100px;
height: 100px;
align-items: center;
}
.icon-text {
text-align: center;
padding-top: 15px;
font-size: 25px;
}
@media (max-width: 768px) {
.what-section-wrapper {
width: 90%;
margin: 0 auto;
}
.icon-what-section {
flex-direction: column;
align-items: center;
text-align: center;
}
.img-icons {
width: 80px;
height: 80px;
margin-top: 20px;
align-items: center;
}
.icon-text {
padding-top: 0px;
}
}
/* Our Trips */
.trips-section {
margin-top: 45px;
margin-bottom: 45px;
}
.trips-section-wrapper {
display: flex;
flex-wrap: wrap;
width: 65%;
margin: auto;
gap: 10px;
}
.images-item {
height: 222px;
width: 32%;
flex-shrink: 1;
border-radius: 4px;
}
.images-trips-1 {
background-image: url(images/simon-english-48nerZQCHgo-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-2 {
background-image: url(images/james-wheeler-ZOA-cqKuJAA-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-3 {
background-image: url(images/daniel-tseng-73lmMKhi2U8-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-4 {
background-image: url(images/holly-mandarich-UVyOfX3v0Ls-unsplash.jpg);
background-size: cover;
background-position: center;
}
.text-trips {
background-color: var(--background-four);
color: var(--word-black);
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
font-weight: 700;
}
.images-trips-5 {
background-image: url(images/patrick-szylar-45bM3XGqnDE-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-6 {
background-image: url(images/chung-yee-tsang-wqxCKM0R6R8-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-7 {
background-image: url(images/julian-bialowas-ilkTnuMunP8-unsplash.jpg);
background-size: cover;
background-position: center;
}
.images-trips-8 {
background-image: url(images/matej-drha-rbDzMcJsBkY-unsplash.jpg);
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.trips-section-wrapper {
width: 90%;
margin: 0 auto;
}
.images-item {
width: 333px;
height: 222px;
}
.text-trips {
height: 80px;
}
}
/* Where togo */
.where-section {
background-color: var(--background-two);
color: var(--word-white);
display: flex;
}
.where-section-wrapper {
width: 65%;
margin: 0 auto;
padding-top: 45px;
padding-bottom: 45px;
display: flex;
}
.where-text {
display: flex;
}
.h2-where {
flex: 1;
font-size: 25px;
width: 272px;
height: 114px;
text-align: left;
}
.where-text-div {
flex: 1;
width: 572;
height: 201;
text-align: left;
}
.contact-text {
margin-top: 20px;
}
.contact-button {
margin-top: 35px;
background-color: var(--background-four);
width: 133px;
height: 43px;
border-radius: 4px;
text-align: center;
line-height: 43px;
}
.contact-button-text {
font-size: 14px;
font-weight: 700;
font-family: Inter;
color: var(--word-black);
display: block;
}
.mobile {
display: none;
}
@media (max-width: 768px) {
.where-section-wrapper {
width: 90%;
margin: 0 auto;
}
.where-text {
flex-direction: column;
}
.desktop {
display: none;
}
.mobile {
display: block;
font-size: 25px;
margin-bottom: 25px;
}
}
/* Reviews section */
.reviews-section {
width: 65%;
margin: 0 auto;
margin-top: 45px;
margin-bottom: 45px;
}
.h2-reviews {
text-align: center;
padding-bottom: 20px;
}
.reviews-text {
width: 332px;
height: 159px;
text-align: center;
margin: auto;
}
.reviews-card-wrapper {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 300px;
}
.reviews-card {
width: 378.49px;
height: 346px;
text-align: center;
}
.reviews-card-1 {
width: 378.49px;
height: 346px;
text-align: center;
}
.reviews-card img {
width: 122.13px;
height: 111px;
border-radius: 50%;
}
.reviews-card-1 img {
width: 122.13px;
height: 111px;
border-radius: 50%;
}
.reviews-card-text {
margin-top: 20px;
}
.reviews-name {
font-weight: 700;
padding-top: 50px;
height: 19px;
align-items: center;
}
@media (max-width: 768px) {
.reviews-section {
width: 90%;
margin: 0 auto;
}
.reviews-card-wrapper {
flex-direction: column;
width: 90%;
margin: 0 auto;
gap: 95px;
}
.reviews-card {
width: 324px;
}
.reviews-card-1 {
width: 324px;
}
.reviews-text {
width: 263px;
}
.h2-reviews {
padding-top: 40px;
}
.reviews-name {
padding-bottom: 40px;
}
}
/* Photo gallery */
.photo-gallery {
/* display: flex; */
/* flex-wrap: wrap; */
}
.photo-gallery-wrapper {
display: flex;
flex-wrap: wrap;
}
.picture-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
max-width: 50%;
}
@media (max-width: 768px) {
.photo-gallery-wrapper {
flex-direction: column;
margin-top: 100px;
}
.picture-img {
max-width: 100%;
height: 260px;
}
}
/* Footer */
.footer-wrapper {
background-color: var(--background-three);
padding: 45px;
}
.footer-text {
text-align: center;
}
.footer-contact {
color: var(--link-two);
text-decoration: underline;
font-weight: 700;
}
.footer-text-p {
padding-top: 20px;
text-align: center;
color: var(--word-white);
font-weight: 700;
}
@media (max-width: 768px) {
.footer-contact {
font-size: 12px;
}
.footer-text-p {
font-size: 10px;
}
}

View File

@ -0,0 +1,217 @@
<!DOCTYPE html>
<html lang="en">
<!-- Lukáš Kaňka -->
<!-- lukas.kanka@outlook.cz -->
<!-- Lukáš K. -->
<head>
<link rel="stylesheet" type="text/css" href="cestovatel.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Travel Assistant</title>
</head>
<div>
<!-- Navigace -->
<nav>
<ul class="navigation" id="navigation">
<li><a href="#about">About Us</a></li>
<li><a href="#what-we-do">What We Do </a></li>
<li><a href="#trips">Our Trips</a></li>
<li><a href="#where">Where To Go</a></li>
<li><a href="#reviews">Reviews</a></li>
</ul>
<img class="icon" src="icons/PngItem_1608357.png" alt="#">
</nav>
<!-- Hero section -->
<header class="hero-section ">
<div class="hero-text-wrapper">
<h1 class="hero-text">Your <br>
Travel <br>
Assistant</h1>
</div>
</header>
<!-- About Us -->
<div class="content">
<section class="about-section" id="about">
<div class="about-section-wrapper">
<div class="about-text">
<h2 class="h2-about">About Us</h2>
<p class="about-text-p">Leigh McAdam is a Calgary-based writer, photographer and social media
enthusiast with over
48,000
followers. Her blog: HikeBikeTravel is frequently cited as one of the top travel and outdoor
adventure blogs in Canada, and consistently receives over 135,000 monthly page views. She
shares
her enthusiasm for the outdoors as a brand ambassador for Sporting Life, and has worked on
campaigns for Travel Alberta, Expedia and Flight Hub. Leigh is the author of Discover
Canada:
100 Inspiring Outdoor Adventures. Currently, she is co-authoring: 125 Nature Hot Spots in
Alberta (spring 2018). A true adventurer, Leigh will try anything once, except perhaps
bungee
jumping.
</p>
</div>
<div class="about-img"><img class="about-img content-container"
src="images/anneliese-phillips-uv4-vl3liKM-unsplash.jpg" alt="#">
</div>
</div>
</section>
<!-- What We Do -->
<section class="what-section" id="what-we-do">
<div class="what-section-wrapper">
<div class="what-text">
<h2 class="h2-what-we">What We Do</h2>
<p class="what-text-p">Opportunities for challenging hikes and pleasant strolls are scattered all
over this planet; you
just
need to know where to find them. We do. Kilimanjaro, Everest Base Camp, Patagonia, and the Inca
Trail are out there, waiting for you to walk all over them. Were proud of our record of
successful
ascents (over 92% of our travellers make it to the top of Kili, depending on the route), but
its
our CEOs and local guides that make the journey itself as memorable as the summit. And if youre
not
into big climbs, dont sweat it; weve got loads of lower-impact walks and iconic treks youll
love,
too.</p>
</div>
<ul class="icon-what-section">
<li><img class="img-icons" src="icons/hiking-white.png " alt="#"><br>
<p class="icon-text">Hiking</p>
</li>
<li><img class="img-icons" src="icons/cycle-white.png" alt="#"><br>
<p class="icon-text">Cycling</p>
</li>
<li><img class="img-icons" src="icons/water-white.png" alt="#"><br>
<p class="icon-text">Surfing</p>
</li>
<li><img class="img-icons" src="icons/car-white.png" alt="#"><br>
<p class="icon-text">Car trips</p>
</li>
</ul>
</div>
</section>
<!-- Our Trips -->
<section class="trips-section">
<div class="trips-section-wrapper">
<div class="images-trips-1 images-item "></div>
<div class="images-trips-2 images-item "></div>
<div class="images-trips-3 images-item "></div>
<div class="images-trips-4 images-item "></div>
<div class="text-trips images-item" id="trips">Our Trips</div>
<div class="images-trips-5 images-item "></div>
<div class="images-trips-6 images-item "></div>
<div class="images-trips-7 images-item "></div>
<div class="images-trips-8 images-item "></div>
</div>
</section>
<!-- Where togo -->
<section class="where-section" id="where">
<div class="where-section-wrapper">
<div class="where-text">
<div class="h2-where">
<h2 class="desktop">Where do you <br> want to go?</h2>
<h2 class="mobile">Where do you want to go?</h2>
</div>
<div class="where-text-div">
<p>
Youll find 21 detailed adventure guides, over a hundred practical travel tips, book reviews
on
anything outdoors related, packing lists on a range of outdoor activities including
kayaking,
backpacking and camping as well as honest hotel and B&B reviews.
</p>
<p class="contact-text">Contact us and we will help you!</p>
<div class="contact-button">
<a href="#" class="contact-button-text">CONTACT US</a>
</div>
</div>
</div>
</div>
</section>
<!-- Reviews section -->
<section class="reviews-section" id="reviews">
<h2 class="h2-reviews">Reviews</h2>
<div class="reviews-text">
<p>Our amazing clients are the reason we exist, and their reactions to our
customized travel experiences
and personalized service keep us smiling all day long. Here is just a sampling of what theyve said:
</p>
</div>
<div class="reviews-card-wrapper">
<div class="reviews-card">
<img src="images/kalen-emsley-kGSapVfg8Kw-unsplash.jpg" alt="#">
<div class="reviews-card-text">
She has booked two major European trips for us in the past year and every aspect has met, and
in
most cases exceeded, our expectations. Best prices, best hotels, best itineraries, and best
cruises, she does it all. But the most important thing is she remembers the little things
that
we would do if we were making the plans ourselves.
<div class="reviews-name">
Bertie Norton
</div>
</div>
</div>
<div class="reviews-card-1">
<img src="images/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg" alt="#">
<div class="reviews-card-text">
Leigh McAdam has been making my travel arrangements for about 20 years and there is no one
else I would trust to arrange my trips and tours. I've also had great fun on a few of the
group trips she has arranged - Peru & Machu Picchu and a 10-day cruise out of Venice and
diving. It's always an eclectic group of well traveled, interesting people.
<div class="reviews-name">
Frank Kinney
</div>
</div>
</div>
</div>
</section>
<!-- Photo galery -->
<section class="photo-gallery">
<div class="photo-gallery-wrapper">
<img class="picture-img" src="images/alexey-fedenkov-BaCZYH9RLmQ-unsplash.jpg" alt="picture-1">
<img class="picture-img" src="images/omer-salom-LoijtQXXNhs-unsplash.jpg" alt="picture-2">
<img class="picture-img" src="images/vincentiu-solomon-7MH4ped6_Mo-unsplash.jpg" alt="picture-3">
<img class="picture-img" src="images/daniel-tseng-73lmMKhi2U8-unsplash.jpg" alt="picture-4">
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-wrapper">
<div class="footer-text">
<a class="footer-contact" href="#">Contact</a>
<div class="footer-text-div">
<p class="footer-text-p">
© 2022 - Your Travel Assistant. All Rights Reserved.
</p>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

View File

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="Kankys Matrix" content="Kankys projekty." />
<title>Projekty</title>
<link rel="stylesheet" href="../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
<link rel="shortcut icon" href="../../img/logo_arch_linux_167.png" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
id="MathJax-script"
async=""
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Projekty</h1>
<h2 class="project-tagline">
Zde najdeš odkazy na projekty.
</h2>
<a href="../../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<div class="flexbox-project">
<!-- <div class="menu-project">
</div>
-->
<div class="content-pr">
<h2>
Vítám na této stránce, která slouží jako mapa pro projekty.
</h2>
<p>
Zde najtete projekty věnující se k tvorbě webu a hlavně mou cestu Akademií Engeto.
</p>
<p>
Všechny projekty jsou vytvořeny v HTML, CSS a strochou JavaScriptu. Ale určitě jsem přidám i další
projekty, které tvořím mimo Akademii.</p>
<p>
Projekty které se netýkají tworby webu, najdete na mém GitHubu přes tento odkaz na <a
href="https://git.archoslinux.cz/kankys">Gitea</a>.
</p>
<p>
U každého projektu najdete popis a odkaz na něj. Buď na Gitea nebo na stránky, kde je projekt umístěn.
</p>
</div>
<div class="project">
<div class="pr1">
<h2>Projekt 1: Tento Blog</h2>
<p>
Tento projekt je vytvořen mimo Akademii Engeto. Je to můj osobní blog, který postupně vylepšuji.
Tato stránka slouží čistě jako prezentace.</p>
<p>
Postupně jsem přidávám své znolosti z HTML, CSS a také se snažím aby web byl co nejlépe
responzivní. Tento projekt je nekončicí koloběh.
</p>
</div>
<div class="pr2">
<h2>Projekt 2: Životopis</h2>
<p>
Tento projekt je jako první úkol v Akademii.</p>
<p>Zadání bylo vytvořit jednoduchý životpis na procvičení základů HTML a CSS. Později jsem ještě pomocí
CSS nastavil v úkolu responsivní web pro mobilní zařízení.</p>
</p>
<p>Projekt Životopis najdete <a target="_blank" href="zivotopis/zivotopis.html">zde.</a></p>
</div>
<div class="pr3">
<h2>Projekt 3: Karta produktu</h2>
<p>Karta produktu. Na tomto projektu jsme se naučily pozicování elementu a pojmy jako Margin a Padding.
</p>
<p>Projekt Karta produkdu najdete <a target="_blank" href="kartaProduktu/karta-produktu.html">zde</a></p>
</div>
<div class="pr4">
<h2>Projekt 4: Nature and Culture</h2>
<p>Tento projekt je zaměřen na responsivitu webu pro mobilní zařízení a také jsme použily porvé Flexbox.
</p>
<p>Projekt Nature and Culture najdete <a target="_blank" href="nature/nature-and-culture.html">zde</a></p>
</div>
<div class="pr5">
<h2>Projekt 5: Your Travel Assistant</h2>
<p>Tento projekt je vytvořen mimo Akademii Engeto. Jedná se o stránku pro cestovatele.</p>
<p>Zadání jsme měli jako na reálném projektu a grafické rozložení se dělalo dle Figmi. Tento projekt byl hodnocený a je jeden ze tří projektů k získání certifikátu v Akademii.</p>
<p>Projekt najdeš pod tímto <a target="_blank" href="YourTravelAssistant/cestovatel.html">odkazem</a>. Od finální verze co jsem odevzdal se mírně liší, ještě před odevzdáním jsem vychytával poslední mouchy.</p>
</div>
</div>
</div>
<footer class="site-footer">
Copyright &copy; Lukáš Kaňka 2024
</footer>
</main>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB

View File

@ -0,0 +1,3 @@
# První povinný projekt v rámci Akademii Engeto - front-end developers
K projektu připravuji zároveň i testy v frameworku Playwright pod tímto [odkazem](https://github.com/LukasKanka/YourTravelAssistant_Playwright.git).

View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta keywords="Karta produktu, Sněhulák, Psí hračka">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.karta.css">
<title>Karta produktu</title>
</head>
<body>
<!-- Product Card -->
<div class="product-card">
<!-- Product Labels -->
<div class="whell">
<span class="product-only">Jen u nás</span>
<span class="discount-badge">-27%</span>
</div>
<!-- Product Image -->
<div class="product-image-container">
<img class="product-image" src="img/psi-hracka.png" />
</div>
<!-- Product Title -->
<h1>M-Pets Hračka Holly vánoční sněhulák</h1>
<!-- Product Description -->
<p><strong>Hračka pro psy - pro střední a velká plemena, vydává zvuky, materiál polyester, bílá barva</strong>
</p>
<!-- Product Change Offer -->
<div class="product-change">
<div>Výměna nevhodného dárku za poukaz do 31.1.2024 nyní zdarma! Více informací klini na odkaz: Výměna
dárku.
</div>
<div class="button-container">
<a class="button" href="#">Výměna dárku</a>
</div>
</div>
<!-- Product Price -->
<div class="product-price-container">
<p class="product-price-old">149,-</p>
<span class="product-price">109,-</span>
<span><a class="shopping-button" href="#">Do košíku</a></span>
</div>
<!-- Product Stock and Transport -->
<span class="stock">Skladem > 5 ks</span>
<span class="transport">Doprava zdarma</span>
</div>
</body>
</html>

View File

@ -0,0 +1,147 @@
:root {
--special-yellow: hsl(56, 94%, 49%);
--special-yellow-2: rgb(231, 231, 149);
--special-red-original: red;
--special-red: #db090d;
--special-black: #040303;
--special-white: #f7f7f7;
--special-green: rgb(0, 128, 0);
--special-agua: rgb(8, 126, 126);
--special-pink: palevioletred;
}
.product-card {
position: relative;
width: 450px;
background-color: var(--special-white);
padding: 16px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
border: 6px solid var(--special-black);
/* responzivita */
width: calc(100% - 32px);
max-width: 800px;
margin: auto;
}
.whell {
position: absolute;
}
.product-only {
background-color: var(--special-yellow);
position: absolute;
border-radius: 50%;
width: 120px;
height: 80px;
left: 35px;
top: 60px;
text-align: center;
font-size: 25px;
color: var(--special-white);
font-weight: bold;
padding-top: 50px;
}
.discount-badge {
background-color: var(--special-red);
position: absolute;
border-radius: 50%;
width: 120px;
height: 80px;
left: 35px;
top: 160px;
text-align: center;
font-size: 25px;
color: var(--special-white);
font-weight: bold;
padding-top: 50px;
}
.product-image {
width: 95%;
height: 90%;
}
h1 {
color: var(--special-agua);
}
.button {
color: var(--special-red);
border-style: solid;
text-decoration: none;
padding-right: 6px;
padding-left: 6px;
border-radius: 6px;
background-color: var(--special-yellow-2);
}
.product-price-container {
padding: 8px;
background-color: var(--special-pink);
margin-bottom: 16px;
position: relative;
border-radius: 6px;
top: 15px;
}
.product-price {
font-weight: bold;
font-size: 40px;
display: inline-block;
padding: 8px;
background-color: var(--special-red-original);
border-radius: 6px;
}
.product-price-old {
font-size: 20px;
color: var(--special-white);
text-decoration: line-through;
width: 75px;
background-color: var(--special-yellow);
margin-top: 1px;
margin-bottom: 1px;
padding-left: 35px;
border-radius: 6px;
font-weight: bold;
}
.shopping-button {
color: var(--special-black);
font-weight: bold;
font-size: 30px;
text-decoration: none;
position: absolute;
top: 30px;
right: 30px;
border-radius: 6px;
background-color: var(--special-yellow-2);
padding-left: 5px;
padding-right: 5px;
border-style: solid;
}
.stock {
font-weight: bold;
color: var(--special-green);
font-size: 20px;
padding: 10px;
}
.transport {
padding-left: 135px;
font-size: 20px;
font-weight: bold;
}
.button-container {
margin-top: 10px;
/* margin-bottom: 15px; */
}
/* ˇMobily */
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 845 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 539 KiB

View File

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="Kankys Matrix" content="Kankys projekty." />
<title>Projekty</title>
<link rel="stylesheet" href="../../style/style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
<link rel="shortcut icon" href="img/logo_arch_linux_167.png" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
id="MathJax-script"
async=""
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Projekty</h1>
<h2 class="project-tagline">
Zde najdeš odkazy na mé projekty.
</h2>
<a href="../../" class="btn">Home</a>
</header>
<main id="content" class="main-content" role="main">
<div class="flexbox-project">
<!-- <div class="menu-project">
</div>
-->
<div class="content-pr">
<h2>
Vítám tě na této stránce, která slouží jako mapa pro mé projekty.
</h2>
<p>
Zde najtete projekty věnující se k tvorbě webu a hlavně mou cestu Akademií Engeto.
</p>
<p>
Všechny projekty jsou vytvořeny v HTML, CSS a strochou JavaScriptu. Ale určitě jsem přidám i další
projekty, které tvořím mimo Akademii.</p>
<p>
Projekty které se netýkají tworby webu, najdete na mém GitHubu přes tento odkaz na <a
href="https://git.archoslinux.cz/kankys">Gitea</a>.
</p>
<p>
U každého projektu najdete popis a odkaz na něj. Buď na Gitea nebo na stránky, kde je projekt umístěn.
</p>
</div>
<div class="project">
<div class="pr1">
<h2>Projekt 1: Tento Blog</h2>
<p>
Tento projekt je vytvořen mimo Akademii Engeto. Je to můj osobní blog, který postupně vylepšuji.
Tato stránka slouží čistě jako má prezentace.</p>
<p>
Postupně jsem přidávám své znolosti z HTML, CSS a také se snažím aby web byl co nejlépe
responzivní. Tento projekt je nekončicí koloběh.
</p>
</div>
<div class="pr2">
<h2>Projekt 2: Životopis</h2>
<p>
Tento projekt je jako první úkol v Akademii.</p>
<p>Zadání bylo vytvořit jednoduchý životpis na procvičení základů HTML a CSS. Později jsem ještě pomocí
CSS nastavil v úkolu responsivní web pro mobilní zařízení.</p>
</p>
<p>Projekt Životopis najdete <a target="_blank" href="zivotopis/zivotopis.html">zde.</a></p>
</div>
<div class="pr3">
<h2>Projekt 3: Karta produktu</h2>
<p>Karta produktu. Na tomto projektu jsme se naučily pozicování elementu a pojmy jako Margin a Padding.
</p>
<p>Projekt Karta produkdu najdete <a target="_blank" href="kartaProduktu/karta-produktu.html">zde</a></p>
</div>
<div class="pr4">
<h2>Projekt 4: Nature and Culture</h2>
<p>Tento projekt je zaměřen na responsivitu webu pro mobilní zařízení a také jsme použily porvé Flexbox.
</p>
<p>Projekt Nature and Culture najdete <a target="_blank" href="nature/nature-and-culture.html">zde</a></p>
</div>
<div class="pr5">
<h2>Projekt 5: Your Travel Assistant</h2>
<p>Tento projekt je vytvořen mimo Akademii Engeto. Jedná se o stránku pro cestovatele.</p>
<p>Zadání jsme měli jako na reálném projektu a grafické rozložení se dělalo dle Figmi. Tento projekt byl hodnocený a je jeden ze tří projektů k získání certifikátu v Akademii.</p>
<p>Projekt najdeš pod tímto <a target="_blank" href="YourTravelAssistant/cestovatel.html">odkazem</a>. Od finální verze co jsem odevzdal se mírně liší, ještě před odevzdáním jsem vychytával poslední mouchy.</p>
</div>
</div>
</div>
<footer class="site-footer">
Copyright &copy; Lukáš Kaňka 2024
</footer>
</main>
</body>
</html>

View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style-nature.css" rel="stylesheet" />
<title>Hero</title>
</head>
<body>
<!-- Navigace -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Explore</a></li>
<li><a href="#">Contact US</a></li>
</ul>
<img class="icon" src="images/PngItem_1608357.png">
</nav>
<!-- Hero section -->
<div class="hero-section">
<div class="hero-text">
<div class="hero-subtitle">Exploring Icelandic Villages</div>
<div class="hero-title">
<h1>Nature and Culture Converge</h1>
</div>
</div>
</div>
<!-- image bird -->
<div class="image-container">
<img src="images/photo-1512419180521-2c5585bdf851.avif" alt="" bird>
</div>
</body>
</html>

View File

@ -0,0 +1,115 @@
:root {
--my-white: #fff;
--my-pink: #f08d8f;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 16px 32px;
}
.hero-section {
height: 70vh;
background-image: url(images/photo-1540503831458-3237544b2ce5.avif);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 12px;
margin-bottom: 10px;
position: relative;
}
.hero-text {
position: absolute;
left: 32px;
bottom: 16px;
color: var(--my-white);
}
.hero-subtitle {
font-size: 20px;
}
.hero-title {
margin-top: 8px;
}
.icon {
width: auto;
height: auto;
display: none;
padding: 14px;
margin-left: auto;
/* display: flex; */
}
.icon img {
width: 100%;
height: 100%;
/* display: flex; */
/* align-items: center; */
}
.image-container {
width: 50%;
}
.image-container img {
width: 100%;
height: 100%;
border-radius: 12px;
}
nav {
height: 55px;
background-color: var(--my-pink);
display: flex;
justify-content: space-evenly;
text-decoration: none;
margin-bottom: 10px;
border-radius: 12px;
}
nav a {
color: var(--my-white);
text-decoration: none;
font-size: 20px;
font-weight: bold;
list-style-type: none;
}
ul {
display: flex;
list-style-type: none;
gap: 65px;
padding-top: 16px;
padding-bottom: 16px;
}
/* Mobile - setting */
@media (max-width: 768px) {
body {
margin: 8px;
}
.hero-subtitle {
font-size: 18px;
}
.hero-title {
font-size: 14px;
}
.icon {
display: block;
}
.image-container {
width: 100%;
}
nav a {
display: none;
}
}

View File

@ -0,0 +1,2 @@
<wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<s:String x:Key="/Default/CodeInspection/PencilsConfiguration/Storage/@EntryValue">ThisComputer</s:String></wpf:ResourceDictionary>

View File

@ -0,0 +1,3 @@
# zivotopis_engeto
První zadání pro nepovinný domácí úkol, vytvořit CV.

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

View File

@ -0,0 +1,86 @@
:root {
--my-black: black;
--my-beckground: #ded4d4;
max-width: 1200px;
margin: auto;
}
body {
background-color: var(--my-beckground);
max-width: 1200px;
margin: auto;
margin-bottom: 25px;
}
@media screen and (max-width: 600px) {
body {
width: calc(100% - 16px);
}
}
footer {
position: fixed;
bottom: 0;
}
.tlacitko {
color: var(--my-black);
}
td,
th {
border: 1px solid var(--my-black);
padding: 15px;
}
.flexbox {
display: flex;
max-width: auto;
margin: auto;
}
.flexbox-content {
display: flex;
flex-direction: column;
}
.menu {
margin-top: 25px;
}
.content {
order: 2;
flex: 3;
padding: 55px;
margin-top: -45px;
}
.dot {
list-style-type: none;
}
.jobs,
.course,
.fun {
font-size: 20px;
}
.title {
text-align: center;
order: 1;
}
@media screen and (max-width: 600px) {
.flexbox {
flex-direction: column;
}
.menu {
order: 1;
text-align: center;
}
.dot-none {
list-style-type: none;
}
/* .content {
order: 3;
} */
.title {
order: -1;
}
}

View File

@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="CV Lukáše Kaňky" />
<meta name="keywords" content="Hlavní strana" />
<meta name="author" content="Lukáš Kaňka" />
<link rel="stylesheet" href="style-cv.css" />
<title>Životopis</title>
</head>
<body>
<div class="flexbox">
<!-- <div class="title">
<h1>ŽIVOTOPIS LUKÁŠ<br> KAŇKA</h1>
</div> -->
<div class="menu">
<img src="./image/1702045296079.jpeg" width="200" height="200" alt="Lukáš Kaňka" />
<h2>Státní příslušnost:</h2>
<ul class="dot-none">
<li>Česká</li>
</ul>
<h2>Datum narození:</h2>
<ul class="dot-none">
<li>2.4.1981</li>
</ul>
<h2>Kontakty:</h2>
<ul class="dot-none">
<li>
<a class="tlacitko" href="Tel: +420 725 303 747">Telefon: +420 725 303 747</a>
</li>
<li>
<a class="tlacitko" href="Mailto:lukas.kanka@lukan.cz" target="_blank">Email
</a>
</li>
<li>
<a class="tlacitko" href="https://lukaskanka.cz" target="_blank">Web</a>
</li>
<li>
<a class="tlacitko" href="https://github.com/LukasKanka" target="_blank">GitHub</a>
</li>
<li>
<a class="tlacitko" href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/"
target="_blank">LinkedIn</a>
</li>
</ul>
<h2>Adresa:</h2>
<ul class="dot-none">
<li>Petržílkova 27</li>
<li>Praha 13</li>
<li>158 00</li>
</ul>
</div>
<div class="flexbox-content">
<div class="title">
<h1>ŽIVOTOPIS<br> LUKÁŠ KAŇKA</h1>
</div>
<div class="content">
<section class="info-section">
<h2>O MNĚ</h2>
<hr />
<p>
IT nadšenec s pozitivním přístupem k životu a vášní pro technologie.
Do světa IT jsem vstoupil jako Support, pak mě osud dovedl na pozici
Testera a v současné době měním svůj kariérní směr do Front-Endu. Kód
i programování mě lákalo už dlouho, baví mě zobrazení okamžitého
výsledku, který mi umožňuje zlepšení a zdokonalení kódu. Aktuálně se
vzdělávám v JavaScript, TypeScript, HTML, CSS. Jako návazný krok bych své znalosti rád
prohluboval ve frameworcích React, Angular.
</p>
</section>
<section class="job-section">
<h2>PRACOVNÍ ZKUŠENOSTI</h2>
<hr />
<ul class="dot">
<li>
<strong class="jobs">Vývojář na platformě Smart</strong>
</li>
<li><strong>Kyndryl [ 15/05/2022 ]</strong></li>
<li>Město: Praha</li>
<li>Země: Česko</li>
<li>Vývojář na platformě Smart pro Českou spořitelnu.</li>
<li>Technologie:Jira, GitHub, TypeScript, Kibana.</li>
</ul>
<ul class="dot">
<li>
<strong class="jobs">Tester softwaru</strong>
</li>
<li><strong>Uniprog Solutions, a.s [ 15/08/2022 14/08/2023 ]</strong></li>
<li>Město: Praha</li>
<li>Země: Česko</li>
<li>Manuální testování PowerBuilder aplikací.</li>
<li>Údržba a oprava automatizovaných testů Cucumber.</li>
<li>Manuální testování webových aplikací dle Test Case a dokumentace.</li>
<li>Komunikace napříč vývojovými týmy.</li>
<li>Technologie: MSSQL, Jira, PowerBuilder, GitLab.</li>
</ul>
<ul class="dot">
<li><strong class="jobs">IT support</strong></li>
<li><strong>Comfort Finance Group CFG Živnostník [ 04/2022 07/2022 ]</strong></li>
<li> Město: Praha </li>
<li>Země: Česko </li>
<li>Poskytování IT podpory uživatelům (SW, HW), onboarding nováčků,
evidence skladu vybavení, řešení nastalých technických problémů.</li>
<li>Reporting systémových chyb na adekvátní oddělení.</li>
<li>Práce v OS Ubuntu Linux.</li>
<li>Práce s nástroji jako Intergromat, Jira.</li>
</ul>
<ul class="dot">
<li><strong class="jobs">Řidič dodávky</strong></li>
<li>
<strong>Artglass Lighting Na plný úvazek [ 03/2016 04/2020 ]</strong><br />
Země: Česko <br />
Řízení dodávky, komunikace se zákazníky, podpora prodeje.
</li>
</ul>
<ul class="dot">
<li><strong class="pozice">Řidič nákladního vozu</strong></li>
<li>
<strong>ČSAD Liberec Na plný úvazek [ 07/2006 08/2014 ]</strong>
</li>
<li>Řízení nákladních vozidel (MAN, DAF, Iveco, Renault).
</li>
</ul>
</section>
<section class="edu-section">
<h2>VZDĚLÁNÍ A ODBORNÁ PŘÍPRAVA</h2>
<hr />
<ul class="dot">
<li><strong class="course">Základy Testingu, SQL, Web Services</strong></li>
<li>
<strong>Acamar [ 08/2020 ]</strong>
</li>
<li>Město: Praha </li>
<li>Země: Česko</li>
</ul>
<ul class="dot">
<li><strong class="course">Úvod do Playwright</strong></li>
<li><strong>Tesena [ 04/2023 ]</strong></li>
<li>Město: Praha </li>
<li>Země: Česko</li>
</ul>
</section>
<section class="hobby-section">
<h2>ZÁJMY A KONÍČKY</h2>
<hr />
<ul class="dot">
<li><strong class="fun">
Opensource, Linux, Sebevzdělávání v testingu a dalších technologiích,
Cyklistika
</strong></li>
<li>
Na mi mo pracovních projektech mám základní zkušenosti se SW a
technologiemi jako: C#, .Net, NUnit, Selenium, Selenide,Cypress,
Playwrigt, Java, Linux Ubuntu a další distribuce, Docker, MacOS,
MangoDB, Windows, Obsidian. <br />
Mimo jiné se ve volném čase účastním amatérských závodů na kole a rád
si zaběhám.
</li>
</ul>
<h2>DOBROVOLNICKÁ ČINNOST</h2>
<hr />
<ul class="dot">
<li><strong class="fun">Maper Missing Maps</strong></li>
<li>
Ve volném čase mapuji pro humanitární účely, v projektu
<a class="tlacitko" href="https://www.missingmaps.org" target="_blank">Missing Maps</a>
pomocí OSM na platformě
<a class="tlacitko" href="https://tasks.hotosm.org" target="_blank">Hot Tasking Manager</a>.
</li>
</ul>
</section>
</div>
</div>
</div>
<footer>Copyright &copy; Lukáš Kaňka 2023</footer>
</body>
</html>

View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Repozitáře</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="../../style/alt.style.css" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">Repozitáře</h1>
</header>
<div class="main-content">
<nav>
<a href="../../" class="btn">Domů</a>
</nav>
<nav>
<a href="https://git.archoslinux.cz/kankys" class="btn" target="_blank"
><i class="fa fa-gitea"></i> Gitea na ArchLinux CZ</a >
<a href="https://github.com/LukasKanka" class="btn" target="_blank"
><i class="fa fa-github"></i> GitHub</a>
<a href="https://codeberg.org/Kankys" class="btn" target="_blank"
><i class="fa fa-gitea"></i> Codeberg</a>
<a href="https://gitlab.com/LukasKanka" class="btn" target="_blank"
><i class="fa fa-gitlab"></i> GitLab</a>
</nav>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 821 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 754 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

View File

@ -0,0 +1,224 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script
crossorigin="anonymous"
src="https://kit.fontawesome.com/0a43c6cd1f.js"
></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/600px-Arch-linux-logo-691350772.png">
<title>Lukáš Kaňka - IT služby</title>
</head>
<div>
<!-- Navigace -->
<nav>
<ul class="navigation" id="navigation">
<li><a href="#about">O mně</a></li>
<li><a href="#what-we-do"> služby </a></li>
<li><a href="#trips">Stačí si vybrat</a></li>
<!-- <li><a href="#where">Where To Go</a></li>-->
<!-- <li><a href="#reviews">Reviews</a></li>-->
</ul>
<img class="icon" src="icons/PngItem_1608357.png" alt="#">
</nav>
<!-- Hero section -->
<header class="hero-section ">
<div class="hero-text-wrapper">
<h1 class="hero-text">
Lukáš Kaňka <br>
IT služby pro Vás</h1>
</div>
</header>
<!-- About Us -->
<div class="content">
<section class="about-section" id="about">
<div class="about-section-wrapper">
<div class="about-text">
<h2 class="h2-about">O mně</h2>
<p class="about-text-p">Jsem IT nadšenec s pozitivním přístupem k životu a vášní pro
technologie, ve kterých se neustále vzdělávám. Absolvoval jsem kurz
testingu a SQL v Acamaru, další kurz byl web developer u společnosti Engeto. Pracoval jsem na pozici testera ve společnosti Uniprog a nyní pracuji ve společnosti Kyndryl na projektu České Spořitelny pro platformu SMART.
</p>
<p>
Nabízím služby v obkasti IT se zaměřením na open-source a Linux. Své služby nabízím po celé Praze, Jablonci
nad Nisou a online. Ceny startují na <strong>150/1hod</strong>.
Služby nabízím jednotlivcům tak i spolkům či školám adt. Faktura je samořejmostí.
</p>
</div>
<div class="about-img"><img class="about-img content-container"
src="img/IMG_4835.JPG" alt="#">
</div>
</div>
</section>
<!-- What We Do -->
<section class="what-section" id="what-we-do">
<div class="what-section-wrapper">
<div class="what-text">
<h2 class="h2-what-we">Nabízím tyto služby</h2>
<p class="what-text-p">
<ul class="dot">
<li>Instalace Linuxu.</li>
<li>Pomůžu vám najít vhodnou Linuxovou distribuci přímo pro Vás. Nejoblíbenější distribuce jsou Ubuntu,
Fedora, Manjaro či Zendalona pro zrakově postižené.
</li>
<li>Naučím vás práci v Linuxu, seznámím s Terminálem a OpenSource.</li>
<li>Nastavím v Linuxu váš nový SSD disk.</li>
<li>Seznámím vás s programy pro Linux které jsou alternativou pro programy Windows.</li>
<li>Vybereme a přispůsobíme vám prostředí v Linuxu.</li>
<li>Rychlá podpora pokud si nebudete vědět rady.</li>
<li>Tvorba on-Line vizitek - zajistím doménu i hosting, pomohu s návrhem vizitky. Základní vizitky
děláme v HTML a CSS, složitější v Wordpressu.
</li>
<li>Tvorba webů pro restaurace - tyto weby tvoříme v Wordpresu s jednoduchou administrací kde si můžete
jidelní lístky jednoduše spravovat.
</li>
</ul>
</p>
</div>
<ul class="icon-what-section">
<li>
<!-- <img class="img-icons" src="icons/hiking-white.png " alt="#"><br>-->
<p class="icon-text">Instalace Linuxu</p>
</li>
<li>
<!-- <img class="img-icons" src="icons/cycle-white.png" alt="#">-->
<p class="icon-text">Práce s Linuxem a Open Source aplikacemi</p>
</li>
<li>
<!-- <img class="img-icons" src="icons/water-white.png" alt="#">-->
<p class="icon-text">Tvorba vizitek a menších webů</p>
</li>
<li>
<!-- <img class="img-icons" src="icons/car-white.png" alt="#">-->
<p class="icon-text">Poradenství a administrace</p>
</li>
</ul>
</div>
</section>
<!-- Our Trips -->
<section class="trips-section">
<div class="trips-section-wrapper">
<div class="images-trips-1 images-item "></div>
<div class="images-trips-2 images-item "></div>
<div class="images-trips-3 images-item "></div>
<div class="images-trips-4 images-item "></div>
<div class="text-trips images-item" id="trips">Stačí si vybrat</div>
<div class="images-trips-5 images-item "></div>
<div class="images-trips-6 images-item "></div>
<div class="images-trips-7 images-item "></div>
<div class="images-trips-8 images-item "></div>
</div>
</section>
<!-- Where togo -->
<section class="where-section" id="where">
<div class="where-section-wrapper">
<div class="where-text">
<div class="h2-where">
<h2 class="desktop"></h2>
<h2 class="mobile"></h2>
</div>
<div class="where-text-div">
<p class="contact-text">Telefoní číslo: <i class="fas fa-phone"></i> <a href="tel:+725303747"> +420 725 303 747</a></a></p>
<p class="contact-text">E-mail: <i class="fas fa-envelope"></i> <a href="mailto:lukas.kanka@outlook.cz"> Lukáš Kaňka</a></p>
<!-- <div class="contact-button">-->
<!-- <a href="#" class="contact-button-text"></a>-->
<!-- </div>-->
</div>
</div>
</div>
</section>
<!-- &lt;!&ndash; Reviews section &ndash;&gt;-->
<!-- <section class="reviews-section" id="reviews">-->
<!-- <h2 class="h2-reviews">Reviews</h2>-->
<!-- <div class="reviews-text">-->
<!-- <p>Our amazing clients are the reason we exist, and their reactions to our-->
<!-- customized travel experiences-->
<!-- and personalized service keep us smiling all day long. Here is just a sampling of what theyve said:-->
<!-- </p>-->
<!-- </div>-->
<!-- <div class="reviews-card-wrapper">-->
<!-- <div class="reviews-card">-->
<!-- <img src="images/kalen-emsley-kGSapVfg8Kw-unsplash.jpg" alt="#">-->
<!-- <div class="reviews-card-text">-->
<!-- She has booked two major European trips for us in the past year and every aspect has met, and-->
<!-- in-->
<!-- most cases exceeded, our expectations. Best prices, best hotels, best itineraries, and best-->
<!-- cruises, she does it all. But the most important thing is she remembers the little things-->
<!-- that-->
<!-- we would do if we were making the plans ourselves.-->
<!-- <div class="reviews-name">-->
<!-- Bertie Norton-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="reviews-card-1">-->
<!-- <img src="images/jeffrey-keenan-pUhxoSapPFA-unsplash.jpg" alt="#">-->
<!-- <div class="reviews-card-text">-->
<!-- Leigh McAdam has been making my travel arrangements for about 20 years and there is no one-->
<!-- else I would trust to arrange my trips and tours. I've also had great fun on a few of the-->
<!-- group trips she has arranged - Peru & Machu Picchu and a 10-day cruise out of Venice and-->
<!-- diving. It's always an eclectic group of well traveled, interesting people.-->
<!-- <div class="reviews-name">-->
<!-- Frank Kinney-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- &lt;!&ndash; Photo galery &ndash;&gt;-->
<!-- <section class="photo-gallery">-->
<!-- <div class="photo-gallery-wrapper">-->
<!-- <img class="picture-img" src="images/alexey-fedenkov-BaCZYH9RLmQ-unsplash.jpg" alt="picture-1">-->
<!-- <img class="picture-img" src="images/omer-salom-LoijtQXXNhs-unsplash.jpg" alt="picture-2">-->
<!-- <img class="picture-img" src="images/vincentiu-solomon-7MH4ped6_Mo-unsplash.jpg" alt="picture-3">-->
<!-- <img class="picture-img" src="images/daniel-tseng-73lmMKhi2U8-unsplash.jpg" alt="picture-4">-->
<!-- </div>-->
<!-- </section>-->
<!-- Footer -->
<footer class="footer">
<div class="footer-wrapper">
<div class="footer-text">
<!-- <a class="footer-contact" href="#">Contact</a>-->
<div class="footer-text-div">
<p class="footer-text-p">
© 2024 - Lukáš Kaňka. All Rights Reserved.
</p>
</div>
</div>
</div>
</footer>
</div>
</div>
<button id="scrollToTopBtn" onclick="scrollToTop()" title="Go to top">
<i class="fas fa-arrow-up"></i>
</button>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,17 @@
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("scrollToTopBtn").style.display = "block";
} else {
document.getElementById("scrollToTopBtn").style.display = "none";
}
}
// Posunout nahoru, když uživatel klikne na tlačítko
function scrollToTop() {
document.body.scrollTop = 0; // Pro Safari
document.documentElement.scrollTop = 0; // Pro ostatní prohlížeče
}

View File

@ -0,0 +1,578 @@
:root {
--word-black: #000;
--word-white: #fff;
--link-one: #efa69d;
--link-two: #e9877b;
--background-one: #33292a;
--background-two: #644b4f;
--background-three: #333333;
--background-four: #f2f2f2;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
}
/* Navigace (horní menu) */
nav {
padding: 10px;
background-color: var(--background-one);
font-size: 20px;
}
a {
text-decoration: none;
color: var(--word-white);
}
.dot {
list-style: none;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
flex-grow: 1;
}
.navigation {
width: 65%;
margin: 0 auto;
}
.icon {
width: auto;
height: 22px;
display: none;
margin-left: auto;
margin-right: 12px;
}
.icon img {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.navigation {
width: 90%;
margin: 0 auto;
}
nav ul {
flex-direction: column;
}
nav a {
/*display: none;*/
}
/*.icon {*/
/* display: block;*/
/*}*/
}
/* Hero - section */
.hero-section {
height: 80vh;
background-image: url(img/wp7596264.jpg);
background-size: 70%;
background-position: center;
background-repeat: no-repeat;
}
.hero-text-wrapper {
position: relative;
width: 65%;
margin: 0 auto;
height: 100%;
}
.hero-text {
color: var(--word-white);
position: absolute;
right: 0;
bottom: 50px;
font-size: 80px;
text-align: right;
}
.h2-about {
font-weight: 700;
}
@media (max-width: 768px) {
.hero-text-wrapper {
width: 90%;
margin: 0 auto;
}
.hero-text {
font-size: 35px;
height: 80px;
margin-bottom: 5px;
color: black;
}
}
/* About sekce */
.about-section {
margin: 45px 0;
}
.about-section-wrapper {
width: 65%;
margin: 0 auto;
display: flex;
gap: 20px;
}
.about-text {
flex: 1;
}
.about-img {
flex: 1;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.about-section-wrapper {
flex-direction: column;
width: 90%;
margin: 0 auto;
}
.about-text {
text-align: left;
}
.about-img {
text-align: center;
}
.about-text-p {
padding-top: 15px;
}
}
/* What We Do */
.what-section {
background-color: var(--background-one);
color: var(--word-white);
}
.what-section-wrapper {
width: 65%;
margin: 0 auto;
}
.what-text {
text-align: center;
}
.h2-what-we {
font-size: 38px;
text-align: center;
padding-top: 45px;
padding-bottom: 35px;
}
.where-text {
text-align: center;
}
.icon-what-section {
margin-top: 45px;
padding: 45px;
list-style: none;
display: flex;
justify-content: space-between;
flex-grow: 1;
}
.img-icons {
width: 100px;
height: 100px;
align-items: center;
}
.icon-text {
text-align: center;
padding-top: 15px;
font-size: 25px;
}
@media (max-width: 768px) {
.what-section-wrapper {
width: 90%;
margin: 0 auto;
}
.icon-what-section {
flex-direction: column;
align-items: center;
text-align: center;
}
.img-icons {
width: 80px;
height: 80px;
margin-top: 20px;
align-items: center;
}
.icon-text {
padding-top: 0px;
}
}
/* Our Trips */
.trips-section {
margin-top: 45px;
margin-bottom: 45px;
}
.trips-section-wrapper {
display: flex;
flex-wrap: wrap;
width: 65%;
margin: auto;
gap: 10px;
}
.images-item {
height: 222px;
width: 32%;
flex-shrink: 1;
border-radius: 4px;
}
.images-trips-1 {
background-image: url(img/linux-penguin-and-rainbow-background-imsv6hxt0e8zcl7m-3730406657.jpg);
background-size: cover;
background-position: center;
}
.images-trips-2 {
background-image: url(img/1-4204059220.png);
background-size: cover;
background-position: center;
}
.images-trips-3 {
background-image: url(img/fedora-feat-5b9fe676c9e77c0050ce388c-2333270958.jpg);
background-size: cover;
background-position: center;
}
.images-trips-4 {
background-image: url(img/ubuntu-linux-minimal-4k-on-3840x2160-2398598343.jpg);
background-size: cover;
background-position: center;
}
.text-trips {
background-color: var(--background-four);
color: var(--word-black);
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
font-weight: 700;
}
.images-trips-5 {
background-image: url(img/Kali-linux-872298623.jpg);
background-size: cover;
background-position: center;
}
.images-trips-6 {
background-image: url(img/wp8843183-1041051902.jpg);
background-size: cover;
background-position: center;
}
.images-trips-7 {
background-image: url(img/91488-2048748032.jpg);
background-size: cover;
background-position: center;
}
.images-trips-8 {
background-image: url(img/endeavourOS-astronaught-3246654328.jpg);
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.trips-section-wrapper {
width: 90%;
margin: 0 auto;
}
.images-item {
width: 333px;
height: 222px;
}
.text-trips {
height: 80px;
}
}
/* Where togo */
.where-section {
background-color: var(--background-two);
color: var(--word-white);
display: flex;
}
.where-section-wrapper {
width: 65%;
margin: 0 auto;
padding-top: 45px;
padding-bottom: 45px;
display: flex;
}
.where-text {
display: flex;
}
.h2-where {
flex: 1;
font-size: 25px;
width: 272px;
height: 114px;
text-align: left;
}
.where-text-div {
flex: 1;
width: 572;
height: 201;
text-align: left;
}
.contact-text {
margin-top: 20px;
}
.contact-button {
margin-top: 35px;
background-color: var(--background-four);
width: 133px;
height: 43px;
border-radius: 4px;
text-align: center;
line-height: 43px;
}
.contact-button-text {
font-size: 14px;
font-weight: 700;
font-family: Inter;
color: var(--word-black);
display: block;
}
.mobile {
display: none;
}
@media (max-width: 768px) {
.where-section-wrapper {
width: 90%;
margin: 0 auto;
}
.where-text {
flex-direction: column;
}
.desktop {
display: none;
}
.mobile {
display: block;
font-size: 25px;
margin-bottom: 25px;
}
}
/* Reviews section */
.reviews-section {
width: 65%;
margin: 0 auto;
margin-top: 45px;
margin-bottom: 45px;
}
.h2-reviews {
text-align: center;
padding-bottom: 20px;
}
.reviews-text {
width: 332px;
height: 159px;
text-align: center;
margin: auto;
}
.reviews-card-wrapper {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 300px;
}
.reviews-card {
width: 378.49px;
height: 346px;
text-align: center;
}
.reviews-card-1 {
width: 378.49px;
height: 346px;
text-align: center;
}
.reviews-card img {
width: 122.13px;
height: 111px;
border-radius: 50%;
}
.reviews-card-1 img {
width: 122.13px;
height: 111px;
border-radius: 50%;
}
.reviews-card-text {
margin-top: 20px;
}
.reviews-name {
font-weight: 700;
padding-top: 50px;
height: 19px;
align-items: center;
}
@media (max-width: 768px) {
.reviews-section {
width: 90%;
margin: 0 auto;
}
.reviews-card-wrapper {
flex-direction: column;
width: 90%;
margin: 0 auto;
gap: 95px;
}
.reviews-card {
width: 324px;
}
.reviews-card-1 {
width: 324px;
}
.reviews-text {
width: 263px;
}
.h2-reviews {
padding-top: 40px;
}
.reviews-name {
padding-bottom: 40px;
}
}
/* Photo gallery */
.photo-gallery {
/* display: flex; */
/* flex-wrap: wrap; */
}
.photo-gallery-wrapper {
display: flex;
flex-wrap: wrap;
}
.picture-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
max-width: 50%;
}
@media (max-width: 768px) {
.photo-gallery-wrapper {
flex-direction: column;
margin-top: 100px;
}
.picture-img {
max-width: 100%;
height: 260px;
}
}
/* Footer */
.footer-wrapper {
background-color: var(--background-three);
padding: 45px;
}
.footer-text {
text-align: center;
}
.footer-contact {
color: var(--link-two);
text-decoration: underline;
font-weight: 700;
}
.footer-text-p {
padding-top: 20px;
text-align: center;
color: var(--word-white);
font-weight: 700;
}
@media (max-width: 768px) {
.footer-contact {
font-size: 12px;
}
.footer-text-p {
font-size: 10px;
}
}
/* Rolovací tlačítko */
#scrollToTopBtn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
/*butoon přes obsah*/
z-index: 99;
outline: none;
cursor: pointer;
padding: 15px;
border-radius: 50%;
background-color: transparent;

View File

@ -0,0 +1,102 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Socials</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
crossorigin="anonymous"
/>
<link
rel="stylesheet"
type="text/css"
href="../../style/alt.style.css"
/>
<link rel="shortcut icon" href="img/logo_arch_linux_167.png" />
<link
rel="icon"
type="image/x-icon"
href="../../res/site/icons/favicon.ico"
/>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">
sociální sítě a kontakty
</h1>
<h2 class="project-tagline">
Zde můžeš kontaktovat
</h2>
</header>
<div class="main-content">
<nav>
<a href="../../" class="btn">Domů</a>
</nav>
<nav>
<a
href="https://mastodon.arch-linux.cz/deck/@Kankys"
class="btn"
target="_blank"
><i class="fa fa-mastodon"></i>
Mastodon</a
>
<a href="" class="btn" target="_blank"
><i class="fa fa-matrix-org"></i>
Matrix</a
>
<a
href="https://www.linkedin.com/in/luk%C3%A1%C5%A1-ka%C5%88ka-b2a0a1a0/"
class="btn"
target="_blank"
><i class="fa fa-linkedin"></i>
LinkedIn</a
>
<a
href="https://t.me/Kankys"
class="btn"
target="_blank"
><i class="fa fa-telegram"></i>
Telegram</a
>
</nav>
<br />
<nav>
<a
href="https://git.archoslinux.cz/kankys"
class="btn"
target="_blank"
><i class="fa fa-gitea"></i> Gitea</a
>
<a
href="https://github.com/LukasKanka"
class="btn"
target="_blank"
><i class="fa fa-github"></i> GitHub</a
>
<a
href="https://pixelfed.cz/i/web/profile/464150575238569182"
class="btn"
><i class="fa fa-pixelfed"></i> Pixelded
CZ</a
>
<a
href="https://discord.com/kankys_"
class="btn"
target="_blank"
><i class="fa fa-discord"></i>
Discord</a
>
</nav>
</div>
</body>
</html>

View File

@ -0,0 +1,7 @@
# Terminal space
Prozatím nás najdeš na této [doméně](https://lukaskanka.cz/index/terminal-space/index.html), ale už se intenzivně pracuje na vlastní doméně pro Terminal space.
<p>Vítám Tě na Terminal space! </p>
<p>Web je věnován Terminálům konzolím a hlavně aplikacím pro terminály.</p>
<p>Najdeš tu tipy, návody, novinky a další obsah ze světa terminálu.</p>
<p>Terminal Space prymárně míří na uživatele Linuxu a macOS, ale spousty obsahu budeš moci aplikovat ve Windows.</p>

View File

@ -0,0 +1,14 @@
:root {
--dracula-body-bg: #2a232b;
--dracula-color: #f8f8f2;
--dracula-header-bg: #2a232b;
--dracula-scrollToTopBtn-color: #9fea8a;
--dracula-links-color: #f76b00;
--dracula-nav-bg: #2a232b;
--dracula-nav-links-color: #f76b00;
--dracula-h1-color: #e54472;
--dracula-h2-color: #18f700;
--dracula-solid-bg: #2a232b;
--dracula-solid-color: #f76b00;
--dracula-footer-bg: #2a232b;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Terminal space svoboda v programování...." />
<meta name="keywords" content="Terminal space" />
<meta name="author" content="Kankys" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/terminal-icon.png" />
<!--nav bar-->
<script src="https://kit.fontawesome.com/0a43c6cd1f.js" crossorigin="anonymous"></script>
<!--icons dark, go to up-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<!--ubuntu fonts-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<title>Terminal space</title>
</head>
<body>
<header>
<h1 class="title">💾 Terminal space</h1>
<!-- Terminal - navigation -->
<nav class="navigation">
<ul>
<li><a href="news.html">Novinky</a></li>
<li><a href="apollo-nvim/index.html">🚀 ApolloNvim</a></li>
<li><a href="kakoune/index.html">Kakoune</a></li>
<!--<li><a href="manuals.html">Návody</a></li>-->
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr />
<!--Začátek sekcí - co h2 sekce + fotogalerie-->
<section class="content" id="welcome">
<section class="welcome">
<h2>Terminal space:</h2>
<p>Vítám na Terminal space! </p>
<p>Web je věnován Terminálům konzolím a hlavně aplikacím pro terminály.</p>
<p>Najdeš tu tipy, návody, novinky a další obsah ze světa terminálu.</p>
<p>Terminal Space prymárně míří na uživatele Linuxu a macOS, ale spousty obsahu budeš moci aplikovat ve Windows.</p>
</section>
<section id="contact">
<h2>Kontakty:</h2>
<p>
<a href="https://t.me/+o6qcLGlFROJhNzhk" target="_blank">👉 🚀 ApolloNvim Telegram skupina</a>
</p>
<p>
<a href="https://lukaskanka.cz/" target="_blank">👉 Osobní web autora 💾 Terminal space</a>
</p>
<p>
<a href="https://git.archoslinux.cz/kankys" target="_blank">👉 Gitea profil</a>
</p>
<p>
<a href="https://github.com/LukasKanka/" target="_blank">👉 GitHub</a>
</p>
<p>
<a href="https://mastodon.arch-linux.cz/@Kankys" target="_blank" 👉>
Mastodon</a>
</p>
</section>
<section class="login"></section>
<section id="help">
<h2>Podpora:</h2>
<p>
👉 Pokud jakkoliv chcete podpořit nebo se podílet na obsahu a
funkčnosti 💾 Terminal space, prosím budu rád když mi zde napíšete.
</p>
<p>👉 Taky můžete tento projekt podpořit pár Satoshi:</p>
<img class="sat" src="https://lukaskanka.cz/index/about/img/sat.jpeg" alt="Satoshi" />
</section>
<section id="other">
<h2>Další projekty a odkazy:</h2>
<p>
👉 <a href="https://arch-linux.cz/" target="_blank">ArchLinux CZ</a>
</p>
<p>
👉
<a href="https://searxng.cz/" target="_blank">Vyhledávač SearXNG CZ</a>
</p>
<p>
👉
<a href="https://endeavouros.com/" target="_blank">EndeavourOS Linux</a>
</p>
<p>
👉 <a href="https://i3wm.org/" target="_blank">i3 window manager</a>
</p>
</section>
<button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top">
<i class="fas fa-arrow-up"></i>
</button>
<footer>
Copyright &copy;
<a href="https://git.archoslinux.cz/kankys" target="_blank">Lukáš Kaňka</a>
2024
</footer>
</section>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,303 @@
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta
name="description"
content="ApolloNvim svoboda v programování...."
/>
<meta name="keywords" content="ApolloNvim Distro Instalace" />
<meta name="author" content="Kankys" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/icons8-rocket.gif" />
<!--nav bar-->
<script
src="https://kit.fontawesome.com/0a43c6cd1f.js"
crossorigin="anonymous"
></script>
<!--icons dark, go to up-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!--ubuntu fonts-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
</style>
<title>ApolloNvim Instalace</title>
</head>
<body>
<header>
<h1 class="title">🚀ApolloNvim Instalace</h1>
<!-- Terminal - navigation -->
<nav class="navigation">:
<ul>
<li><a href="index.html">Domů</a></li>
<li>
<a href="plugins.html"
>Pluginy</a
>
</li>
<li>
<a href="manuals.html"
>Návody</a
>
</li>
</ul>
</nav>
<div class="menu-icon">
<!-- Ikona hamburger -->
<i class="fa-solid fa-bars"></i>
<!-- Ikona cross -->
<!-- <i class="fa-solid fa-xmark"></i> -->
</div>
</header>
<hr />
<section class="content" id="welcome">
<section id="install">
<h2>Instalace a nastavení:</h2>
<p>
<strong>
Vždy se podívej před instalací
nových pluginu, na dokumentaci k
plaginům na Githubu. Předejdeš
tím případným problémům! Pokud
si nejsi jistý postupem nebo ti
není něco jasné, tak raději se
podívej do dokumentace,napiš nám
nebo fórech najdeš odpověď. Také si vždy vše před změnou zálohuj!
</strong>
</p>
<p>
👉 Pokud ještě nemáte nainstalujte si
<a
href="https://neovim.io/"
target="_blank"
>Neovim</a
>.
</p>
<p>
👉 Bude potřeba nainstalovat plug.vim
aby jste mohl/a instalovat rozšíření.
</p>
<p>
👉 Běžte na tuto
<a
href="https://github.com/junegunn/vim-plug"
target="_blank"
>stránku</a
>
pod Installation si najděte svůj
operační systém a zkopírujte odkaz pod
ním do svého terminálu.
</p>
<p>
👉 Nejprve si však zálohujte své
aktuální nastavení Neovim!!!
</p>
<p>👉 Linux & Mac:</p>
<div class="code-box">
<p>/home/user/.config/nvim/init.vim</p>
</div>
<p>Windows:</p>
<div class="code-box">
<p>~\AppData\Local\nvim</p>
</div>
</section>
<section id="node">
<h2>Node.js:</h2>
<p>
👉 Doporučuji mít nainstalovaný
<a
href="https://nodejs.org/en"
href="_blank"
>Node.js</a
>.
</p>
<p>
👉 Dále si v Node.js nainstalujte
<a
href="https://www.npmjs.com/package/live-server"
target="_blank"
>Live-server</a
>
příkazem:
</p>
<div class="code-box">
<p>npm i live-server</p>
</div>
<p>
👉 Ve svém projektu budete moci pouštět
svůj index.html příkazem:
</p>
<div class="code-box">
<p>npx live-server</p>
</div>
<p>
👉 Pro správnou funkčnost LSP si
doinstalujte tyto balíčky:
</p>
<p>
<a
href="https://github.com/microsoft/vscode-html-languageservice"
target="_blank"
>vscode-html-langserver</a
>
</p>
<p>
<a
href="https://github.com/microsoft/vscode-css-languageservice"
target="_blank"
>vscode-css-langserver</a
>
</p>
<p>
<a
href="https://github.com/typescript-language-server/typescript-language-server"
target="_blank"
>typescript-language-server</a
>
</p>
<p>
<a
href="https://github.com/aca/emmet-ls"
target="_blank"
>emmet-ls</a
>
</p>
<p>
<a
href="https://eslint.org/docs/latest/use/getting-started"
target="_blank"
>eslint</a
>
</p>
<p>
<a
href="https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-server/README.md"
target="_blank"
>vtailwindcss-language-server</a
>
</p>
<p>
<a
href="https://github.com/artempyanykh/marksman"
target="_blank"
>marksman</a
>
</p>
<p>
<a
href="https://github.com/markdoc-extra/markdoc-ls"
target="_blank"
>markdoc-ls</a
>
</p>
</section>
<section id="neovim">
<h2>Neovim:</h2>
<p>
👉 Pro instalaci 🚀 ApolloNvim Distra
stačí stáhnout pouze soubor init.vim s
tohoto
<a
href="https://github.com/LukasKanka/ApolloNvim"
target="_blank"
>repositáře</a
>.
</p>
<p>
👉 Uložte ho do kořenováho adresáře
<strong>~/.. /nvim</strong> dle tvého
OS.
<strong
>Nezapomeňte na zálohu
stávajících souborů</strong
>
</p>
<p>
👉 Neovim pustíte v terminálu příkazem
<strong>nvim</strong>.
</p>
<p>👉 Odklikejte chybová hlášení.</p>
<p>
👉 V Neovimu zadejte do command line
<strong>PlugIns</strong> , tím
nainstalujete všechny pluginy.
Restartujte Neovim.
</p>
<p>
👉 Pokud Vám některý plugin chybí,
můžete ho lehce doinstalovat nebo naopak
odinstalovat pomocí
<strong>plug.vim</strong>. Více
informací najdete na GitHubu
<a
href="https://github.com/junegunn/vim-plug"
target="_blank"
>plug.vim</a
>
nebo velmi rád poradím viz. o nás.
</p>
<p>
👉 Pokud některý plugin nechcete
používat stačí v souboru
<strong>init.vim</strong> ho
zakomentovat pomocí dvojitých uvozovek
<strong>"</strong>.
</p>
<p>
👉 Do command line ještě zadejte Coc
příkaz pro doinstalování zbylých
pluginů:
</p>
<div class="code-box">
<p>
CocInstall coc-todolist
coc-tailwindcss coc-json
coc-html-css-support coc-html
coc-emmet coc-xml coc-tsserver
coc-lsp-wl coc-lit-html
coc-htmldjango coc-css
coc-markdown-preview-enhanced
coc-markdownlint
</p>
</div>
<p>
👉 A ještě jednou restartujte Neovim a
vše máte připravené.
</p>
<p>
👉 Tuto konfiguraci používám na Linuxu i
MacOS. Je ozkoušena i na Windows 11.
</p>
</section>
<button
onclick="scrollToTop()"
id="scrollToTopBtn"
title="Go to top"
>
<i class="fas fa-arrow-up"></i>
</button>
<footer>
Copyright &copy;
<a
href="https://git.archoslinux.cz/kankys"
target="_blank"
>Lukáš Kaňka</a
>
2024
</footer>
</section>
<script src="script.js"></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Some files were not shown because too many files have changed in this diff Show More