Code hard

Projects

Please feel free to have a look and play around with some of my recent projects. Each project is presented on separate card. If you hover over the card or click on it on a mobile device you can read more details about the project (main features of the project/what I have learned when creating it) and click a button for a live demo. I hope you will like it and will have fun when playing the games ;)

Web Applications

Recipe finder

Recipe finder "Forkify"

This application searches for recipes based on a user-entered keyword. The search is performed asynchronously via an external API. The application is not responsive.

In this project I mainly practiced working with asynchronous JS (Promises and Async / Await). The application architecture is based on the MVC principle and uses the capabilities and advantages of ES6 modules.

During this project, I applied current development procedures, such as the use of the npm dependency management tool, the Babel compiler, the Parcel bundler, etc.

Try it!

Task Tracker

Task Tracker

A web application that allows you to track short tasks and notes. These are stored in localStorage, so they remain available to users even after closing the browser.

In creating this project, I used the ReactJS library, which is an amazing tool for creating UI interfaces. In practice, I learned to build a web application using functional components and use the so-called props or useState and useEffect hooks, which allow you to change the UI according to the current state of the web application.

Try it!

Growth Hormone Application Guide

Growth Hormone (GH) Application Guide

Simple web application that guides parents/children themselves in daily GH application.

Additionally, a click on the heading generates random animal image which helps to relax the child patient.

In this project I practised mainly working with dates in order to determine correct position for the GH application.

Designed and developed fully by myself based on an idea that I got in a sleep ;)

Try it!

CMS for the pension's website

CMS for the pension's website

CMS for the draft website of the Statek Hájek pension that is presented also below.

This CMS allows, for example, to edit the content of existing pages, add new pages or delete current pages. All changes will be reflected automatically after saving on the Statek Hájek website.

While working on this project, I improved mainly in PHP and MySQL backend technologies. Also, I learned how to use supporting external libraries such as jQuery, tinyMCE or PhotoSwipe.

Try it!

Character Finder from "Breaking Bad"

Character Finder from "Breaking Bad"

This application displays and searches for characters from my favorite series "Breaking Bad". If you haven't seen it yet, fix it quickly! ;)

The application was created using the ReactJS library and Breaking Bad API. During this project, I practiced working with React hooks and retrieving data from the web API using async / await operations.

Prozkoumat

Workout mapping application

Workout mapping application "Mapty"

This application locates the user's location and displays it on the map. The user can add two types of workouts (running and cycling) to the map, which differ in some of their features and display style. The application is not responsive.

In this project, I improved especially in the use of OOP, ie in working with classes, subclasses and their instances. Furthermore, I learned to use the geolocation API and the open source mapping library Leaflet.

Last but not least, in this project I learned how to work with the localStorage property of the browser.

Try it!

Fictitious online banking system

Fictitious online banking system "Bankist"

A simplified online banking system that shows users an overview of their account and allows, for example, to transfer cash to another account, apply for a loan or close an account. The application is not responsive.

In this project I mainly practiced working with arrays and their methods, such as map, sort, reduce, flat, etc.

I also learned to use the Internalization API to format data and numbers and Timers, which allow the user to log out automatically when inactive.

Try it!

Application for tracking income and expenses

"Budgety" application for tracking income and expenses

This application allows you to add and remove various income and expenses and monitor the overall balance. The application is not responsive.

In this project, I learned the basics of MVC architecture, hence the program is divided into three modules: a data module, a UI module and a controller module.

Furthermore, I practiced usage of IIFE, DOM manipulation, event handling or event bubbling/delegation.

Try it!

Breathing meditation guide

Breathing meditation guide

This simple app guides users throughout the so called '4-7-8' breathing meditation. I decided to create this app because I am interested in enhancing mental and physical health by practising meditation and various breathing techniques.

In this project I improved mainly my CSS skills and learned e.g. how to create spinning element. In terms of JS I was introduced to Timer methods setTimeOut and setInterval.

Try it!

'Guess my number' game

'Guess my number' game

At this moment, this is probably the most favourite computer game of my kids :) I believe that this is great way how to teach them to understand how numbers work and have together a lot of fun.

In this project I learned basic DOM manipulation, handling of click events and how to re-factor code using ternary operator.

Try it!

'Pig' (dice game)

'Pig' (dice game)

This simple game is fun to play with my kids. The design is based on one of their favourite cartoons 'Peppa Pig' and it helps them to learn basic numbers and understand sum operation.

The first player to score 12 points wins. When he rolls 1, he loses all points and it's the second player's turn.

In this project I enhanced especially my JS skills, e.g. how to manipulate DOM based on random numbers generation, switch between players using ternary operator, or use state defining variable.

Try it!

Websites

Our wedding website

Our wedding website

I designed and developed this website from scratch for our wedding. When creating this site I learned a lot new stuff about HTML, CSS and JS and in the end I am quite satisfied with the final design and functionality.

In this project I learned e.g. how to create animated CSS loader, form with front-end validation and simple PHP script on the server side, or implement external JS library for an image gallery.

Try it!

Fictional travel agency website

Fictional travel agency website

This is website of a fictional travel agency called "Natours".

When working on this website I practised and learned a lot of advanced CSS techniques and features, such as Flexbox, Grid, animations, or how to properly handle responsive design.

Try it!

Fictional bank website

Fictional bank website

This is website of the fictional online bank called "Bankist".

When working on this project I learned a lot of about advanced DOM manipulation, e.g. how to dynamically change display of elements based on user's interaction with the site. I also learned how to implement cool features such as smooth scrolling, lazy loading, tabbed component or sliding carousel just by using vanilla JS.

Try it!

Pension website

Pension website

This is a draft version of the "Statek Hájek" pension website.

When creating these pages, I used, among other things, the PHP backend language and the OOP programming paradigm. This paradigm defines the data structure in the background of these pages. The actual data (for example, titles or content of individual pages) is stored in a MySQL database, with which the website communicates via PHP.

This web page can be administered in separate web application , which is presented also above.

Try it!
shape

About Me

Personal Information

Hi, my name is Honza.
I am 37-years old aspiring web developer from Prague. My passion for web development began about 2 years ago when I started feeling urge for a career change after spending almost 8 years as a tax consultant in a multinational advisory company.
Not so long after beginning of this new life chapter I decided to firstly focus on front-end ("FE") web development. In the vast world of programming for me this was a logical choice because in FE I can fully express myself in both creative/artistic and logical/analytical ways which as I believe have always been quite natural parts of my personality. Later on I have also learned some back-end ("BE") web development technologies in order to complement my knowledge and competence. I would say that FE still remains my main speciality, however I also like BE very much.
You may ask, why is this web page called "Code hard"? Well, my journey, especially in the beginning, was not always easy. I had to combine my coding studies with full-time job and family life. In order to keep myself motivated during my coding night shifts I created motto "Code hard or f#ck off" which I later changed to less offensive and more positive "Code hard and have fun" ;)
Currently, I am looking for a junior web developer position. I am super excited to finally become professional web developer, learn a lot of new stuff from senior colleagues and become valuable member of your team. Let's code hard and have fun together! ;)

My Skills

These are the main technologies, programs and tools I am using and learning. Some I know more, some less (just like everyone ;)), but I am constantly working to expand and improve my knowledge.

Front-end

HTML 5

CSS 3

JavaScript ES6+

TypeScript

ReactJS

jQuery

Backend

PHP

MySQL

Programs & Tools

Visual Studio Code

npm

Git/GitHub

Parcel

Webpack

Babel

Figma

Photoshop

shape

Contact

If you like my work and think that I could be good fit for your team, please, get in touch with me. I will be pleased to chat with you not only about my passion for web development ;) If you are interested, you can also check out the code of the above presented projects on my GitHub profile.

+420 739 680 773

info@codehard.cz