Martin Hanák

Nadšenec pro tvorbu webu

Zdravím! Já jsem
Martin Hanák
Vítejte na mé portfolio webové stránce

O mně

Já jsem Martin Hanák, programátor se zaměřením na vývoj frontendu webových aplikací. Rád pracuji s JavaScriptem a jeho příbuznými technologiemi při vytváření efektivních webových řešení.

Studium jsem započal v oboru fyziky na Univerzitě Karlově v Praze, kde jsem se specializoval na počítačové modelování pro molekulární dynamiku. Analytické dovednosti, které jsem v průběhu této doby získal, byly neocenitelné při mém přechodu ke tvorbě webových aplikací.

S nadšením se stále učím nejnovějším trendům v HTML, CSS, JavaScriptu a Reactu. Jako frontend programátor usiluji o vytváření funkčních a uživatelsky přívětivých webových rozhraní.

Moje dovednosti

Frontend

Nejvíce zkušenosti mám s jazyky JavaScript, TypeScript a jejich souvisejícími technologiemi. Pro tvorbu dynamických frontendů mých aplikací využívám populární frameworky a knihovny jako jsou například React, Redux nebo Next.js. Spolu s mými znalostmi HTML a CSS jsem schopen vytvářet interaktivní a uživatelsky přívětivá rozhraní.

React

HTML

CSS

Redux

Tailwind

Next.js

JavaScript

TypeScript

Backend

Pro tvorbu backendu je mojí preferovanou volbou Node.js nebo Express.js. Jsem obeznámen s vytvářením REST API a propojováním aplikací s databázemi pomocí technologií jako jsou Sequelize, PostgreSQL, MySQL nebo Prisma.

Node

Express

Prisma

MySQL

Sequelize

Postgres

Tools

Během studia jsem se seznámil s mnoha užitečnými nástroji, které nyní používám denně. Pro správu verzí svých aplikací využívám Git a GitHub, pro testování pak Jest a jako svůj hlavní editor kódu používám VS Code. Aplikace nasazuji pomocí virtuálních strojů s operačním systémem Linux a služeb jako je DigitalOcean. Kromě toho mám zkušenosti s konfigurací reverzní proxy pomocí Nginx a s používáním správce procesů PM2.

npm

git

GitHub

Jest

VS Code

Nginx

PM2

Projekty

Podívejte se na některé z mých projektů, které jsem v poslední době vytvořil

Gravitorium

Online simulace dynamiky sluneční soustavy

Gravitorium

Gravitorium je interaktivní simulace pohybu planet v naší sluneční soustavě. Simulace umožňuje přesně vypočítat jejich pohyb a zobrazovat jejich trajektorie.

Hlavní použité technologie
  • React
  • React Three Fiber
  • Three.js

React byla hlavní technologie použitá k vytvoření frontendu tohoto projektu, spolu s CSS moduly.

Data pro pozice a rychlosti planet byla načtena z veřejně dostupného NASA API.

3D vizualizace byla převážně vytvořena pomocí knihovny React Three Fiber ve spojení s Three.js a Drei. Pod kapotou využívá WebGL a metodu requestAnimationFrame prohlížeče k vytvoření plynulé animace s 60 snímky za sekundu.

Ostatní technologie
  • SCSS modules
  • NASA API
  • i18next

Quizzillionaire

Hra Kdo chce být milionářem s otázkami generovanými umělou inteligencí

Frontend

Quizzillionaire je online hra, která vám umožňuje hrát Kdo chce být milionářem s otázkami generovanými umělou inteligencí.

Volitelně můžete specifikovat téma a všechny generované otázky se budou točit kolem tohoto konkrétního tématu.

Poskytuje běžné tři nápovědy, které vám mohou pomoci při zodpovězení všech otázek: "Zeptat se publika", "50:50" a "Zavolat příteli".

Hlavní použité technologie
  • React
  • Redux Toolkit
  • Tailwind CSS

Frontend je zaměřen na využití backend REST API. Převážně využívá React pro většinu úkolů a spoléhá se na Tailwind CSS pro definování vzhledu webové stránky.

Aplikace využívá knihovny Redux a Redux Toolkit pro usnadnění správy stavu. Stav je ukládán v centralizovaném úložišti, které obsahuje informace o přihlášení a stavu hry. Pro komunikaci s backend API jsou využívány asynchronní Thunky poskytované knihovnou Redux.

Ostatní technologie
  • Async Thunks
  • Event Source
  • Server-Sent Events

Backend

Backend pro hru Quizzillionaire poskytuje REST API pro přihlášení a registraci uživatele a zároveň se stará o interní herní logiku.

Navazuje spojení mezi aplikací a databází pro trvalé ukládání dat. Kromě toho definuje rozhraní pro interakci s OpenAI ChatGPT API, které umožňuje využívat funkce generování textu pomocí umělé inteligence.

Hlavní použité technologie
  • Express
  • Node.js
  • Sequelize

Hlavní část aplikace je napsána s využitím Express.js, které definuje REST API pro aplikaci.

Aplikace využívá databázi Postgres pro ukládání dat a k interakci s touto databází je používán Sequelize pro objektově relační mapování (ORM).

Pro vyřešení asynchronních problémů, kdy uživatel požaduje data, která ještě nebyla vygenerována, byly implementovány události odesílané ze serveru (server-sent events). Tyto události odesílané ze serveru informují uživatele, jakmile je generační proces dokončen.

Ostatní technologie
  • JWT
  • bcrypt
  • Jest
  • SQL
  • Postgres
  • OpenAI
  • ChatGPT

Portfolio

Webová stránka, kde prezentuji některé ze svých výtvorů

Portfolio

Tato webová stránka slouží jako platforma pro zobrazení mých výtvorů a dovedností. Jejím hlavním cílem je poskytnout lidem snadný způsob, jak mě najít a kontaktovat, proto byl během jejího vytváření kladen důraz na optimalizaci pro vyhledávače (SEO) za účelem zvýšení její objevitelnosti.

Hlavní použité technologie
  • Next.js
  • Tailwind CSS
  • Web Animations API

Hlavní technologií použitou při vývoji této webové stránky bylo Next.js. Bylo vybráno kvůli jeho schopnosti spojit serverové a klientové vykreslování a zároveň umožnit webové stránce zachovat interaktivitu React aplikace.

Serverové komponenty jsou vykresleny na serveru a odeslány jako HTML na klienta. Naopak, klientové komponenty jsou předvykresleny a poté odeslány klientovi pro hydrataci, což umožňuje zlepšenou interaktivitu.

Next.js nabízí funkce jako zpracování přesměrování, dělení kódu, generování XML sitemap a serverové vykreslování, které z něj dohromady dělají vynikající nástroj pro optimalizaci pro vyhledávače (SEO). Tyto funkce pomáhají optimalizovat výkon a strukturu webové stránky, čímž ji činí přívětivější pro vyhledávače a zlepšují její viditelnost a umístění ve výsledcích vyhledávání.

Ostatní technologie
  • Prisma
  • MySQL
  • Server Components
  • Client Components
  • SEO