I began developing my first websites in the early 2000's when I got my first computer. Since then the web became my passion and hobby. I began creating websites for friends, but soon I got my first serious commissions and started working as a freelance web developer. When I started, I was more interested in front-end, so I got a deep understanding of HTML and CSS. This also helped me to understand more principles of UX and UI. However, at some point I realised that my front-end needed custom made back-end to work properly. Thus I started learning PHP and about web servers. Right now I am re-discovering the beauty of static websites and JAM stack. My primary programming language has become JavaScript and I am working with a few amazing clients on a variety of web applications. As a web developer I am trying to understand the client's motivation and goals, so I can always deliver the best results.

  Besides web development, I am a PhD student at the Institute of Greek and Latin Studies at the Faculty of Arts at Charles University. Here I study textual transmission of medieval texts and latin. I am also delving in to the field of Digital Humanities which connects traditional academic research with digital technologies and provides new ways of analysing and representing data. I attend many interesting workshops and conferences at well known universities and work with professionals in the field.

About me

## Introduction
The Association of Beauticians and Hairdressers of the Czech Republic (Asociace kosmetických a kadeřnických oborů České republiky) was founded relatively recently. Their goal is to connect professionals across these fields and share important and helpful information with them. They wanted their website to be a secondary communication platform, as they are primarily active on social networks. The web should serve more like an archive, where all important documents and answers can be found.

## Assignment and requests
The only requirement was to use Wordpress as the content management system as the content managers were used to it. The design should be clean and nice with an easy access to information.

 

![Page with registration form.](/img/project--akocr_clenstvi.png)_Page with registration form_

## Solution
I decided to go with a design that utilises a dominant _hero_ element which provides space for the most important news or information. The _hero_ section is followed by two distinctive sections. First is a secondary menu which contains shortcuts to a document archive and various guides. The other section contains news, where two most recent articles are displayed as large boxes and optionally can contain a cover image. The rest of the news is shown in a table-like style and is followed by a contact section. The content management system is Wordpress, however, the front-end is completely build in Nuxt.js. This allowed me to create a website that can be easily modified.

Due to the client being a beauty association, I chose soft colours, gradients and shadows, which soften the design and represent the beauty sector. The combination of the chosen colours - soft orange and green - should not only emphasise a new and fresh approach in the field of beauty and hairdressing.

Asociace kosmetických oborů ČR

## Introduction
The Bosworth-Toller Anglo-Saxon Dictionary is the largest dictionary of Old English to date. The first edition was published in 1838 on paper by Joseph Bosworth. Thomas Northcote Toller later revised the dictionary and from 1898 the dictionary was referred to as the Bosworth-Toller's Dictionary. In 1921 Thomas Northcote Toller issued a supplement with additional words and further explanations. The digital edition was started by Sean Christ in 2001 as a part of his Germanic Lexicon Project. In 2010 Ondřej Tichý built a website based on Sean Christ's data. However, in 2013 it was decided to modernise the dictionary and provide functions that weren't possible in the original solution.

 

![Page with the entry Abbat in the Bosworth-Toller's Dictionary.](/img/project--bosworth-toller_entry.png)_Page with the entry Abbat in the Bosworth-Toller's Dictionary_
## Assigment and requests
The original project used slightly modified _Drupal_ CMS. However, when mobile devices became more mainstream the original user interface was no longer sufficient. However, interface was not the only problem as the data was stored in HTML and contained a lot of OCR errors. I was asked to provide a new and clean interface and design a new backend architecture which would allow to store data in a customised XML format. The process of correction of OCR records is still ongoing and is under the leadership of Ondřej Tichý from the Faculty of Arts, Charles University.


 

![Search in Bosworth-Toller's Dictionary.](/img/project--bosworth-toller_search.png)*Search in the Bosworth-Toller's Dictionary*

## Solution
Instead of relying on already existing CMS we decided to build our own backend PHP platform based on _Laravel_ framework. This gave us maximum control over the processing of entries and how they are subsequently distributed to the API and web interface. Due to speed limits of XML databases it was decided to use a MySQL database, where entries are stored in plain XML and in deconstructed form which is then queried with backend. Since database queries do not provide such a range of options as specialized search engines, the _Elasticsearch_ engine was used for the purpose of full-text search. This resulted in a much more efficient and reliable search than in the original application.

The user interface has been completely redesigned. Instead of the grey colours that were typical of the original interface, a more vibrant blue-green scheme has been adopted. The homepage has been reduced to a functional minimum, as its main purpose is to provide the user with a dictionary search - this is also the dominant feature of the site. After _scrolling_, additional information is displayed that was previously part of the home page. Slightly less radically, the entry information page has been redesigned, with more emphasis now placed on the logical sections. Icons have also been added for better orientation, which also enlivens the whole design at the same time. The use of the _Nuxt.js_ JavaScript framework also makes it easier to develop and modify the entire application, as it consists of only a few separate components.

The entire application is divided into several Docker containers, which allows easy scaling or A/B testing of new features if necessary. Docker also makes it easier to update, since due to the separation of services, you only need to update one container.

Bosworth-Toller's Anglo-Saxon Dictionary

## Introduction
Evaluation is a web application used by several faculties of Charles University to evaluate teachers and their lectures by students. The app aggregates information from various data sources and has heavy usage spikes when the evaluation begins. It should also provide maximum anonymity for students if they want to stay anonymous, but also ensure that only students from a given faculty can evaluate. The gathered results serve not only as an information for the dean and vice-deans of the faculty, but also for teachers and students as a form of feedback.

 

![The publicly accesible list of results in the appliation](/img/project--evaluace_results.png)_The publicly accesible list of results in the appliation_

## Assignment and requests
Initially I was asked to upgrade the existing application from PHP5.x to PHP7.x and add a new functionality to it. However, the application was developed in early 2000's and the code was very obsolete in 2014. The user interface had a similar problem, some nice 2000's aesthetic but was almost unusable on other devices than computers.

 

![The in-app email client](/img/project--evaluace_mailing.jpeg)_The in-app email client_

## Solution
The initial idea of upgrading the existing app was scratched very early as I realised that upgrading the very old undocumented codebase from PHP5.x to PHP7.x could take more time than developing a new app. So I came up with a proposal of developing a new app using Laravel framework. Thanks to Laravel I was able to focus more on transferring required functionalities and introducing new ones instead of building the whole application again. Laravel also provides basic security layers and has relatively easy upgrade process of the core. The next step was to decide whether to have an API for separated front-end or render pages directly from Laravel.

Due to possible complexity of things I decided to decouple the front-end from back-end and thus back-end provides only API. Front-end was completely written in JavaScript framework Vue.js. This allowed me to deconstruct the UI into small isolated components which then could be easily reused across the application. JavaScript front-end also brought various benefits like easier implementation of auto-save or more importantly show real-time data. There are several drawbacks as the application is not server-side rendered and thus not indexed, however in this context it is not important. Separation of front-end and back-end also ensures easier replaceability of one or the other.

The application follows a previously established scheme with blue and white colours. However, it was slightly modified to make it feel modern. The layout was not significantly changed as well. The layout wasn't changed to create a feeling of continuity between the old and new applications, thus only a sidebar with shortcuts to the most used parts of the application was introduced.

Evaluace

## Introduction
K-Fin Accounting is a company that has been working not only in the field of accounting, but also in the field of private equity and project management for over 10 years. The company has dozens of external clients that include sole proprietors, start-ups, healthcare entrepreneurs and mid-sized manufacturing companies.

## Assigment and requests
The main requirement was to create a modern website that would present the most important information about the company. The website was to include a section with a portfolio of companies with which K-Fin Accounting cooperates.

 

![](/img/project--kfin-slide-2.jpg)

## Solution
As this is primarily an informational website, the design was deliberately kept as clean as possible to make the basic information about the company immediately obvious. The individual sections are complemented by simple illustrations that are intended to resemble paper puzzles. This style of illustration was chosen in relation to the logo, which is made up of a solid letter K with blue-green and grey colour gradients that create the impression of an origami puzzle.

K-FIN Accounting, s.r.o.

## Introduction
Kódim.cz is the personal website of programmer and teacher, Martin Podloucký. His goals is to make learning programming languages easy even for total beginners by showing them that programming can be fun and playful. For that purpose he asked me if I could propose a new design for his website and draw a few illustrations.

## Assigment and requests
The original yellow and blue scheme used on the website previously should be kept the same. The new design should be more playful and colourful and not too distractive.

 

![Detail kurzu na kodim.cz](/img/project--kodimcz_course-detail.png)_Detail kurzu na webu kodim.cz_


## Solution
I began with various combinations of yellow and blue. In the end I decided to make the colours slightly brighter. The homepage is designed with a bold dominant _hero_ element which is followed with list of available courses. Each course box contains an illustration, title and short description. The background gradient is meant to break the curtness of the website and bring more life to it. Most of the elements use pastel colours and sharp shadows which should bring a cartoony feeling to the site. The course page is rather simple, it has a sidebar with section navigation and content which again uses the pastel-like elements, but is without illustrations to keep the student's focus on the content. Each illustration on the website is custom made. Martin's idea was to go with the popular _flat art_ which feels modern and playful.

Kodim.cz

## Introduction
Latin is not exactly a dictionary, but rather a tool that aggregates data from several other dictionaries. It was developed as a tool to help me translate my latin texts and provide me with grammatical information about each word. Furthermore the tool allows the use of _regular expressions_ in case you are uncertain about a part of the word. It allows to search several words at once as I often found the need of several open tabs annoying. At the same time each result is provided with additional links to dictionaries that do not have an open API.

## Assignment
The goal was to build an application which would aggregate information from different latin dictionaries in real time. Everything had to be as simple as possible and quick to use.

 

![Box with grammatical information about the word](/img/project--latin_word.png)_Box with grammatical information about the word_

## Solution
The _dictionary_ part of the app uses an analyser _Words_ developed by William Whitaker. Which is open-sourced on [Github](words). This provided the application with reliable source of grammatical information and Latin-English translation data. However, _Words_ is a CLI app, so it was necessary to somewhat connect user with the CLI tool and for that purpose a simple _Express.js_ application was developed. This backend application also searches using _regular expressions_ in plain text document containing all words known to _Words_.

Later on, when I realised that there is open API for the Dictionary of Medieval Latin the Czech Lands the backend app was extended with results from the mentioned dictionary.


[words]: https://github.com/mk270/whitakers-words
[ics]: http://lb.ics.cas.cz/o_slovniku.html#cs

Latin

## Introduction
SilentBox is _LightBox like_ plugin for Vue.js. It was inspired by _FancyBox_ and _LightBox_ which were used for this kind of feature/task on websites back in 2010's. However, both these libraries relied heavily on jQuery and thus when I wanted to try modern JavaScript frameworks like Vue.js, there was no other option than to build my own extension. Since then SilentBox became quite popular and I decided to continue developing it and focus more on simple and basic tasks like image and video previews. This allowed me to keep SilentBox's code clean and independent of 3rd party libraries. All animations and scripts are SilentBox's own. Right now SilentBox has over a 1000 weekly downloads on [npmjs](npmjs).

 

![SilentBox is mobile-friendly](/img/project--silentbox_mobile.png)_SilentBox is mobile-friendly_

I developed the first version of SilentBox in late 2017 and because I did not understand work with DOM elements and how modern frameworks like Vue.js work, the implementation of SilentBox was very similar to aforementioned libraries. However, it still got good attention from other developers. Thus I decided to completely rewrite SilentBox to fix errors that I made and to add a new layer of flexibility that was not possible with the old code.

 

<video controls="controls" loop="loop">
 <source src="/img/project--silentbox_video.mp4" type="video/mp4">
</video>
Preview of slideshow in SilentBox