About Me
I'm Martin Hanák, a developer with a focus on frontend development. I enjoy working with JavaScript and its related technologies to create effective web solutions.
I pursued my studies in physics at Charles University in Prague, where I specialized in computer modeling for molecular dynamics. The analytical skills I developed during this time have been invaluable in my transition to web development.
I'm always eager to learn and stay updated with the latest trends in HTML, CSS, JavaScript, and React. As a frontend developer, my goal is to use my skills to help create functional and user-friendly web experiences.
My Skills
Frontend
I have the most experience with JavaScript, TypeScript, and their accompanying technologies. To construct dynamic frontends for my applications, I leverage popular frameworks and libraries such as React, Redux, and Next.js. With proficiency in HTML and CSS, I can craft interactive and user-friendly interfaces that enhance the user experience.
React
HTML
CSS
Redux
Tailwind
Next.js
JavaScript
TypeScript
Backend
When it comes to backend development, I tend to gravitate towards Node.js and Express.js. I'm experienced in creating REST APIs and integrating applications with databases using technologies like Sequelize, PostgreSQL, MySQL, and Prisma.
Node
Express
Prisma
MySQL
Sequelize
Postgres
Tools
My educational journey introduced me to numerous tools that have since become an integral part of my daily routine. I use Git and GitHub for version control, Jest for testing, and VSCode as my preferred code editor. I deploy my applications using Linux virtual machines and services like DigitalOcean. Additionally, I have experience setting up Nginx as a reverse proxy and using the PM2 process manager.
npm
git
GitHub
Jest
VS Code
Nginx
PM2
Projects
Have a look at some of my projects that I created in recent times
Gravitorium
Online simulation of the Solar System dynamics
Gravitorium
Gravitorium is a real-time interactive platform that simulates the motion of planets in our Solar System. It accurately computes and visually represents their trajectories.
Main Technologies Used
- React
- React Three Fiber
- Three.js
React was the core library used to create the frontend for this project, along with CSS modules.
Data for planet positions and velocities were fetched from the publicly available NASA API.
The 3D visualization was mainly achieved using the React Three Fiber library, in conjunction with Three.js and Drei. Under the hood, it leverages WebGL and the requestAnimationFrame browser method to create a smooth 60 FPS animation.
Other Technologies
- SCSS modules
- NASA API
- i18next
Quizzillionaire
Who Wants to Be a Millionaire game with AI generated questions
Frontend
Quizzillionaire is an online game that allows you to play Who Wants to Be a Millionaire with AI-generated questions.
Optionally, you can specify a theme, and all the generated questions will revolve around that particular theme.
It provides the usual three lifelines that can assist you in answering all the questions: "Ask the Audience", "50:50," and "Phone a Friend."
Main Technologies Used
- React
- Redux Toolkit
- Tailwind CSS
The frontend is centered around the utilization of the backend REST API. It primarily employs React for the majority of the tasks, along with Tailwind CSS for defining the website styles.
The application utilizes the Redux and Redux Toolkit libraries to facilitate state management. The state is stored in a centralized store that includes information about login and game state. Asynchronous Thunks provided by Redux are employed to consume the backend API.
Other Technologies
- Async Thunks
- Event Source
- Server-Sent Events
Backend
The backend for the Quizzillionaire game offers a REST API for user login and registration, as well as handles the internal game logic.
It establishes a connection between the application and a database for persistent storage. Additionally, it defines an interface for interacting with the OpenAI ChatGPT API, which enables AI text generation capabilities.
Main Technologies Used
- Express
- Node.js
- Sequelize
The core of the application is written using Express.js, which defines the REST API for the application.
The application utilizes a Postgres database for data storage, and Sequelize is employed for Object Relational Mapping (ORM) to interact with the database.
To address asynchronous issues when a user requests data that has not yet been generated, server-sent events were implemented. These server-sent events notify the user once the generation process is complete.
Other Technologies
- JWT
- bcrypt
- Jest
- SQL
- Postgres
- OpenAI
- ChatGPT
Portfolio
A website where I showcase some of my creations
Portfolio
This website serves as a platform for displaying my creations and skills. Its primary objective is to provide people with an effortless means of finding and contacting me. Consequently, one of the main objectives during the website's creation was to focus on optimizing it for search engines (SEO) to enhance its discoverability.
Main Technologies Used
- Next.js
- Tailwind CSS
- Web Animations API
The main technology used to develop this website was Next.js. It was chosen for its capability to merge server-side and client-side rendering, while enabling the website to retain the interactivity of a React application.
Server components are rendered on the server and sent as HTML to the client. In contrast, client-side components are pre-rendered and then sent to the client for hydration, allowing for enhanced interactivity.
Next.js offers features such as handling redirects, code splitting, generating XML sitemaps, and server-side rendering, which collectively make it an excellent tool for Search Engine Optimization (SEO). These features help optimize the website's performance and structure, making it more search engine-friendly and enhancing its visibility and ranking in search results.
Other Technologies
- Prisma
- MySQL
- Server Components
- Client Components
- SEO