Code hard

Projekty

Zde si můžete prohlédnout některé z mých posledních projektů. Každý projekt je uveden na samostatné kartě. Pokud na ni přejedete myší nebo kliknete na mobilním zařízení, dozvíte se o jednotlivých projektech více informací (hlavní funkce / co jsem se naučil při jeho vytváření) a také si je můžete vyzkoušet naživo. Doufám, že se vám ukázky mé práce budou líbit a že se při hraní jednoduchých her budete bavit ;)

Webové aplikace

Vyhledávač receptů

Vyhledávač receptů "Forkify"

Tato aplikace vyhledává recepty na základě uživatelem zadaného klíčového slova. Vyhledávání probíhá asynchronně prostřednictvím externí API. Aplikace není responzivní.

V tomto projektu jsem procvičoval hlavně práci s asynchronním JS (Promises a Async / Await). Architektura aplikace je postavena na MVC principu a využívá možností a výhod ES6 modulů.

Při tomto projektu jsem aplikoval aktuální vývojářské postupy, jako je například využití nástroje npm, kompilátoru Babel, balíčkovače Parcel apod.

Prozkoumat

Úkolníček

Úkolníček

Webová aplikace, která umožňuje zapsat si krátké úkoly a poznámky. Tyto se ukládají do localStorage, takže zůstanou uživatelům k dispozici i po zavření prohlížeče.

Při vytváření tohoto projektu jsem využil JS knihovnu React, která je úžasným nástrojem pro tvorbu UI rozhraní. Naučil jsem se v praxi sestavit webovou aplikaci pomocí funkčních komponentů a využívat tzv. props či hooks useState a useEffect, které umožňují měnit UI podle aktuálního stavu webové aplikace.

Prozkoumat

Průvodce aplikací růstového hormonu

Průvodce aplikací růstového hormonu (RH)

Jednoduchá webová aplikace, která pomáhá rodičům / dětem orientovat se v každodenní aplikaci RH.

Kromě toho se po kliknutí na nadpis vygeneruje náhodný obrázek zvířete, což dětem pomáhá se uvolnit.

V tomto projektu jsem procvičoval hlavně práci s daty tak, aby bylo možné stanovit správnou pozici pro aplikaci RH.

Aplikace byla navržena a vyvinut na základě nápadu, který jsem dostal ve spánku ;)

Prozkoumat

CMS pro webové stránky penzionu

CMS pro webové stránky penzionu

CMS pro webové stránky penzionu Statek Hájek, jejichž pracovní je prezentována také níže.

Tento CMS umožňuje např. upravovat obsah stávajících stránek, přidávat nové stránky nebo mazat aktuální stránky. Veškeré změny se po uložení na webu penzionu Statek Hájek projeví automaticky.

Při práci na tomto projektu jsem se zdokonalil hlavně v backendových technologiích PHP a MySQL a využití podpůrných externích knihoven např. jQuery, tinyMCE nebo PhotoSwipe.

Prozkoumat

Vyhledávač postav ze seriálu "Breaking Bad"

Vyhledávač postav ze seriálu "Breaking Bad"

Tato aplikace zobrazuje a vyhledává postavy z mého nejoblíbenějšího seriálu "Breaking Bad". Pokud jste ho ještě neviděli, tak to rychle napravte! ;)

Aplikace byla vytvořena pomocí knihovny ReactJS a Breaking Bad API. Při tomto projektu jsem si procvičil práci s React hooks a získávání dat z webové API pomocí asynchronních operací async / await.

Prozkoumat

Aplikace pro mapování tréninků

Aplikace "Mapty" pro mapování tréninků

Tato aplikace lokalizuje polohu uživatele a zobrazí ji na mapě. Uživatel si do mapy může přidat dva typy tréninků (běh a jízdu na kole), které se liší některými svými vlastnostmi a stylem zobrazení. Aplikace není responzivní.

V tomto projektu jsem se zdokonalil zejména v používání OOP, tedy v práci s třídami, podtřídami a jejich instancemi. Dále jsem se v tomto projektu naučil používat geolokační API a opensource knihovnu Leaflet, která umožňuje pracovat s mapami.

V neposlední řadě jsem se v rámci tohoto projektu naučil, jak pracovat s vlastnost localStorage prohlížeče.

Prozkoumat

Fiktivní online banking systém

Fiktivní online banking systém "Bankist"

Zjednodušený online banking systém, který uživatelům zobrazuje přehled o jejich účtu a umožňuje například převést hotovost na jiný účet, požádat o úvěr nebo účet uzavřít. Aplikace není responzivní.

V tomto projektu jsem procvičoval hlavně práci s poli a jejich metodami, jakou jsou například map, sort, reduce, flat, atd.

Dále jsem se naučil využívat Internalization API k formátování dat a čísel a Timery, které umožní automatické odhlášení uživatele, pokud je neaktivní.

Prozkoumat

Aplikace pro sledování příjmů a výdajů

Aplikace "Budgety" pro sledování příjmů a výdajů

Tato aplikace umožňuje přidávat a odebírat různé příjmy a výdaje a sledovat celkovou bilanci. Aplikace není responzivní.

Na tomto projektu jsem se naučil základům MVC architektury. Program je rozdělen do tří modulů: 1) datového modulu, který se stará o data, 2) UI modulu, který data zobrazuje uživateli a 3) controller modulu, který aplikaci řídí.

Dále jsem si například vyzkoušel využívat IIFE, manipulovat s DOM elementy, reagovat na akce uživatele nebo používat koncept "event delegation".

Prozkoumat

Průvodce relaxačním dýcháním

Průvodce relaxačním dýcháním

Tato jednoduchá aplikace provede uživatele relaxačním dýcháním „4-7-8“. Rozhodl jsem se vytvořit tuto aplikaci, protože se zajímám o zlepšení duševního a fyzického zdraví například prostřednictvím meditace a různých dýchacích technik.

V tomto projektu jsem zdokonalil hlavně své dovednosti v CSS a naučil se např. jak vytvořit rotující prvek. Pokud jde o JS, seznámil jsem se například s funkcemi setTimeOut a setInterval.

Prozkoumat

Hra „Uhádni mé číslo“

Hra „Uhádni mé číslo“

V tuto chvíli je to pravděpodobně nejoblíbenější počítačová hra mých dětí :) Věřím, že je to skvělý způsob, jak je naučit posloupnost čísel a společně si užít spoustu zábavy.

V tomto projektu jsem se naučil základní manipulaci s DOMem a jak pracovat s událostmi typu „click“.

Prozkoumat

"Prase" (hra s kostkami)

"Prase" (hra s kostkami)

Tuto jednoduchou hru také hraji rád s mými dětmi. Design je založen na jednom z jejich oblíbených kreslených seriálů „Peppa Pig“ a pomáhá jim naučit se základní čísla a porozumět operaci součtu.

Vyhrává hráč, který první nahází 12 bodů. Když hodí 1, přijde o všechny body a na řadě je druhý hráč.

V tomto projektu jsem vylepšil zejména své dovednosti JS, např. jak manipulovat s DOMem na základě generování náhodných čísel, přepínat mezi hráči pomocí ternárního operátoru nebo používat proměnnou definující stav.

Prozkoumat

Webové stránky

Náš svatební web

Náš svatební web

Pro naši svatbu jsem navrhl a vyvinul tento web kompletně od počátku. Při vytváření tohoto webu jsem se naučil spoustu nových věcí o HTML, CSS a JS a nakonec jsem s konečným designem a funkčností celkem spokojen ;)

V tomto projektu jsem se naučil např. jak vytvořit animovaný CSS loader, formulář s front-end validací a jednoduchým PHP skriptem na straně serveru nebo implementovat externí JS knihovnu pro prohlížení obrázků.

Prozkoumat

Web fiktivní cestovní kanceláře

Web fiktivní cestovní kanceláře

Toto je web fiktivní cestovní kanceláře s názvem „Natours“.

Při práci na tomto webu jsem se zdokonalil ve spoustě pokročilých technik a funkcí CSS, jako jsou Flexbox, Grid nebo animace.

Dále jsem se dozvěděl mnoho užitečných informací ohledně responzivního designu a optimalizace CSS kódu.

Prozkoumat

Webové stránky fiktivní banky

Webové stránky fiktivní banky

Toto je web fiktivní online banky s názvem „Bankist“. Stránka není plně responzivní.

Při práci na tomto projektu jsem se naučil hodně o pokročilé manipulaci s DOMem, např. jak dynamicky měnit zobrazení DOM elementů na základě akcí uživatele. Také jsem se naučil, jak implementovat skvělé funkcionality, jako jsou plynulý scrolling, lazy loading obrázků nebo posuvný karusel, pouze pomocí čistého JS.

Prozkoumat

Webové stránky penzionu

Webové stránky penzionu

Toto je pracovní verze webových stránek penzionu "Statek Hájek".

Při tvorbě těchto stránek jsem využil mimo jiné backendový jazyk PHP a programovací paradigma OOP. Tímto paradigmatem je definována datová struktura na pozadí těchto stránek. Vlastní data (například titulky nebo obsah jednotlivých stránek) jsou uloženy v databází MySQL, se kterou webová stránka pomocí PHP komunikuje.

Tuto webovou stránku je možné administrovat v separátní webové aplikaci, která je také prezentována výše.

Prozkoumat
shape

Info

Osobní informace

Ahoj, jmenuji se Honza.
Jsem 37letý začínající webový vývojář z Prahy. Moje vášeň pro vývoj webů začala asi před 2 lety, když jsem začal pociťovat nutkání ke změně kariéry poté, co jsem strávil téměř 8 let jako daňový poradce v nadnárodní poradenské společnosti.
V první fázi této nové životní kapitoly jsem se rozhodl nejprve zaměřit na front-endovou („FE“) část vývoje webových aplikací. V rozsáhlém světě programování to pro mě byla logická volba, protože v rámci FE mohu plně rozvinout obě složky mé osobnosti, tedy kreativní / uměleckou i logickou / analytickou složku. Později jsem se také seznámil s některými back-endovými (“BE”) technologiemi, abych si doplnil své znalosti a kompetence. Řekl bych, že FE je stále moji silnější stránkou, nicméně BE mně také velmi baví.
Možná se ptáte, proč se tato webová stránka jmenuje „Code hard“? Je to proto, že moje cesta k programování, zejména na začátku, nebyla vždy snadná. Musel jsem spojit studium programování s prací na plný úvazek a rodinným životem. Abych se během svých programátorských večerních a nočních směn udržel motivovaný, vytvořil jsem si motto „Code hard or f #ck off“, které jsem později změnil na méně urážlivé a pozitivnější „Code hard and have fun“ ;)
V současné době hledám juniorskou pozici webového vývojáře. Moc se těším, až ze mně konečně bude profesionál, naučím se spoustu nových věcí od zkušenějších kolegů a stanu se cenným členem Vašeho týmu. Pojďme programovat a bavit se u toho společně! ;)

Co umím

Toto jsou hlavní technologie, programy a nástroje, které používám a učím se s nimi pracovat. Některé ovládám více, některé méně (asi jako každý ;)), nicméně neustále pracuji na rozšiřování a zdokonalování svých znalostí.

Front-end

HTML 5

CSS 3

JavaScript ES6+

TypeScript

ReactJS

jQuery

Back-end

PHP

MySQL

Programy a nástroje

Visual Studio Code

npm

Git/GitHub

Parcel

Webpack

Babel

Figma

Photoshop

shape

Kontakt

Pokud se vám moje práce líbí a myslíte si, že bych mohl být vhodnou posilou pro Váš tým, dejte mi prosím vědět. Rád si Vámi popovídám, a to klidně i o něčem jiném, než jen o mé vášni pro vývoj webů;) Pokud máte zájem, můžete si také prohlédnout kódy výše uvedených projektů na mém GitHubovém profilu.

+420 739 680 773

info@codehard.cz