This mini-project was one of the first I have ever built. It is a simple app that creates a grid with desired length and colors squares on hover. App is written with HTML, CSS, and vanilla JavaScript and was my first hands-on experience with DOM manipulation. Looking back it was a simple but essential project to understand the underlying logic of DOM manipulation and core HTML and CSS concepts.\nPlus - 5-year-olds love it!
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/etch-a-sketch.md"}},{"node":{"frontmatter":{"listName":"🍒 /Sunnyside-Agency","nameOfClass":"projects-items miniProjects","popupGithubLink":"https://github.com/Kielx/Sunnyside","popupImageAlt":"Sunnyside agency screenshot","popupImageSrc":"SunnysideSS.png","popupLiveLink":"https://sunnyside.pantak.net/","techIcons":["html5","css3","javascript","react","tailwindcss"],"title":"Sunnyside Agency landing page","slug":"projects/sunnyside","video":"false","added":"2021-08-02"},"html":"The project was a solution to Sunnyside agency landing page challenge.\nI decided that my portfolio of projects is lacking something good-looking and well designed so coding that landing page would be a good experience and asset.
\nThis was my first project using Tailwind CSS. Utility and Mobile First CSS was a challenge itself. Nevertheless, the experience was really good and allowed me to create this project in a little more than 24 hours.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/sunnyside.md"}},{"node":{"frontmatter":{"listName":"📈 /Expenses Analyzer","nameOfClass":"projects-items","popupGithubLink":"https://github.com/Kielx/expenses-analyzer","popupImageAlt":"Expenses analyzer screenshot","popupImageSrc":"expensesAnalyzer.png","popupLiveLink":"https://expenses-analyzer.pantak.net/","techIcons":["react","html5","css3","bootstrap","d3dotjs"],"title":"Expenses Analyzer","slug":"projects/expenses-analyzer","video":"false","added":"2021-08-05"},"html":"Expenses analyzer is a React-based app, that allows the user to analyze bank statements from (at the moment) polish Mbank bank accounts.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/expensesAnalyzer.md"}},{"node":{"frontmatter":{"listName":"🌎 /Country Quiz","nameOfClass":"projects-items","popupGithubLink":"https://github.com/Kielx/country-quiz","popupImageAlt":"Country Quiz screenshot","popupImageSrc":"country-quiz.webp","popupLiveLink":"https://country-quiz.pantak.net/","techIcons":["react","html5","css3","tailwindcss"],"title":"Country Quiz","slug":"projects/country-quiz","video":"false","added":"2021-08-07"},"html":"Country quiz is a relatively simple app that utilizes RESTCountries API to create a quiz about world countries. It was a challenge from devChallanges.io which provided the idea and a set of user stories to build the app.
\nI wanted to utilize the RESTCountries API since I first heard about it. My first take on it was to create a SPA (Single Page Application) that provided info about a particular country. It would be a decent learning experience nevertheless boring and not interactive. When I got the quiz idea I was sold. Managed to code it in two days thanks to TailwindCSS and React. The outcome looks good, is fun and useful.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/country-quiz.md"}},{"node":{"frontmatter":{"listName":"🔗 /Shortly","nameOfClass":"projects-items","popupGithubLink":"https://github.com/Kielx/url-shortener","popupImageAlt":"Shortly URL shortener screenshot","popupImageSrc":"Shortly.webp","popupLiveLink":"https://shortly.pantak.net/","techIcons":["react","html5","css3","tailwindcss"],"title":"Shortly","slug":"projects/shortly","video":"false","added":"2021-08-08"},"html":"The project was a solution to URL Shortener challenge.\nIt was a good challenge to solidify my external API usage, responsive layout, and React skills.
\nThe challenge was to integrate with the shrtcode API to create shortened URLs and display them like in the designs.\nUser stories that needed to be fulfilled:
\nThe challenge consisted of three external API's usage, state management, responsive layout all wrapped in a single-page React App.\nThe project was a solution to IP-Tracker challenge.
\nUser stories that needed to be fulfilled:
\nMy Unsplash is my solution to challenge. This is my version of the application based on the popular Unsplash website. The application is a digital gallery that allows you to add and remove photos and display them in a Masonry layout.
\nDoes that mean all I had to do was copy the finished design and called it my project? Not at all. For this project, I had design files at my disposal, but I had to translate their implementation into TailwindCSS. In addition, I had to choose a solution responsible for Masonry Layout and create all facilities responsible for adding and storing photos.
\nIn my introduction to artificial intelligence class during my computer science studies I was tasked with calculating output of 2-input single layer perceptron by hand. As with all hand calculations they were prone to errors. What's more - I had no way to check, whether my calculations were correct. I searched for similar program on the web with no results. Therefore, I decided to create one for myself. Probably I could have found a library for this task, but I thought that it will be a good learning project nevertheless. You may find this notebook useful if you are tasked with similar problem.
\nThis notebook solves the problem of presenting the user with results and visualisation of all the steps that perceptron algorithm took while calculating the decision boundary for 2 input points.
\nIt is a simple example, and I do not guarantee its correctness. It works but further testing is required. I am by no mean an expert in the field of machine learning, deep learning or artificial intelligence. I created this notebook as a way to reinforce my learning and provide myself with visual representation and steps that perceptron took to get to the solution. Descriptions provided may not be accurate, may lack sufficient details and in some cases may be plainly wrong. As I mentioned earlier this notebook might be useful to someone who is a student, tasked with calculating perceptron outcome by hand, to check whether their calculations are correct or not.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/perceptron.md"}},{"node":{"frontmatter":{"listName":"⚡ /Arduino Knight Rider","nameOfClass":"projects-items miniProjects","popupGithubLink":"https://github.com/Kielx/arduino-knight-rider","popupImageAlt":"App screenshot","popupImageSrc":"https://raw.githubusercontent.com/Kielx/arduino-knight-rider/master/assets/Animation.gif","popupLiveLink":"https://www.tinkercad.com/things/h6UGRvyt57M?sharecode=AdzrjSHtaL6RfG9oV-UQ7uABUGXwvTwtX3bNIyHkgfQ","techIcons":["arduino","autodesk"],"title":"Arduino Knight Rider","slug":"projects/arduino-knight-rider","video":"false","added":"2023-01-09"},"html":"This is an Arduino project that creates a \"Knight Rider\" effect, also known as Larson Scanner. The Arduino Knight Rider is a circuit that features a series of LEDs that move back and forth in a \"scanning\" motion, creating a dynamic and eye-catching effect. The name Larson scanner is derived from Glen A. Larson, the creator of the original \"Knight Rider\" television show, which featured a car with a similar light sequence.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/arduino-knight-rider.md"}},{"node":{"frontmatter":{"listName":"💾 /Insurance-DB","nameOfClass":"projects-items","popupGithubLink":"https://github.com/Kielx/Insurance-company-database","popupImageAlt":"App screenshot","popupImageSrc":"https://raw.githubusercontent.com/Kielx/Insurance-company-database/master/images/data_warehouse.png","popupLiveLink":null,"techIcons":["oracle","python"],"title":"Insurance Company Database","slug":"projects/insurance-company-database","video":"false","added":"2023-01-14"},"html":"The goal of the project was to create a fragment of an insurance company's database and a data warehouse based on it. The database contains information about the insurance company's customers, employees and branches, as well as the insurance policies between these entities. The database and warehouse designed this way allows for easy visualization and development of summaries of the work of all branches, employees, as well as policies taken by clients. The assumption is that a company can offer different types of policies - e.g., home insurance, vehicle insurance - and each customer can take out an unlimited number of policies. The project was developed entirely in the environment offered by Oracle, using SQL Developer and SQL Developer Data Modeler, as well as the SQL*Loader tool. The scripts generating the data with which the database was fed were written in Python using the Faker library.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/insurance-company-database.md"}},{"node":{"frontmatter":{"listName":"🔍 /AnyGrabber","nameOfClass":"projects-items","popupGithubLink":"https://github.com/Kielx/AnyGrabber","popupImageAlt":"App screenshot","popupImageSrc":"https://raw.githubusercontent.com/Kielx/anygrabber/master/assets_readme/screenshot1.png","popupLiveLink":"https://anygrabber.pantak.net","techIcons":["python"],"title":"AnyGrabber","slug":"projects/anygrabber","video":"false","added":"2023-07-14"},"html":"AnyGrabber simplifies the process of searching for AnyDesk logs, extracting relevant data concerning IP addresses used\nfor logging in, along with corresponding dates. It also generates .txt and .csv reports based on the data retrieved. The user-friendly interface and localization features make it easy for anyone to use, regardless of technical proficiency. It's portable and can be used on any modern Windows machine without the need for\ninstallation.
\nThis project utilizes React, React Native, and Firebase to deliver a robust, scalable application, with Expo facilitating streamlined development and deployment. The focus is on creating a highly responsive, accessible application that adheres to WCAG standards, ensuring a seamless user experience across both web and mobile platforms.
\nSuper Arkanoid is a modern C++ implementation of the classic brick-breaking game, built using SFML. Break bricks, catch power-ups, and enjoy 8-bit nostalgia!
\n🧱 Classic Arkanoid Gameplay: Destroy bricks by bouncing the ball off your paddle. Keep the ball from slipping past your paddle, or you'll lose a life!
\n🎲 Randomly Generated Levels: Each playthrough generates a fresh, random layout of bricks, ensuring no two games are alike.
\n🎶 8-Bit Music: Relive the 80s with authentic retro tunes that capture the spirit of classic arcade games.
\n⚡ Power-ups: Collect power-ups as they fall from broken bricks. Enhance your gameplay by expanding your paddle, adding extra balls, or even unlocking a laser cannon!
\n✨ Particle Effects: Experience visually captivating particle effects as bricks shatter, adding a modern visual twist to the classic action.
\n❤️ Life Indicator: Keep track of your remaining lives with the handy life counter feature.
\n🔫 Paddle & Laser Mechanics: Skillfully control the paddle to bounce the ball and break bricks, or use your laser to obliterate them directly!
\nThis project utilizes React, React Native, and Firebase to deliver a robust, scalable application, with Expo facilitating streamlined development and deployment. The focus is on creating a highly responsive, accessible application that adheres to WCAG standards, ensuring a seamless user experience across both web and mobile platforms.
\nSuper Arkanoid is a modern C++ implementation of the classic brick-breaking game, built using SFML. Break bricks, catch power-ups, and enjoy 8-bit nostalgia!
\n🧱 Classic Arkanoid Gameplay: Destroy bricks by bouncing the ball off your paddle. Keep the ball from slipping past your paddle, or you'll lose a life!
\n🎲 Randomly Generated Levels: Each playthrough generates a fresh, random layout of bricks, ensuring no two games are alike.
\n🎶 8-Bit Music: Relive the 80s with authentic retro tunes that capture the spirit of classic arcade games.
\n⚡ Power-ups: Collect power-ups as they fall from broken bricks. Enhance your gameplay by expanding your paddle, adding extra balls, or even unlocking a laser cannon!
\n✨ Particle Effects: Experience visually captivating particle effects as bricks shatter, adding a modern visual twist to the classic action.
\n❤️ Life Indicator: Keep track of your remaining lives with the handy life counter feature.
\n🔫 Paddle & Laser Mechanics: Skillfully control the paddle to bounce the ball and break bricks, or use your laser to obliterate them directly!
\nAnyGrabber simplifies the process of searching for AnyDesk logs, extracting relevant data concerning IP addresses used\nfor logging in, along with corresponding dates. It also generates .txt and .csv reports based on the data retrieved. The user-friendly interface and localization features make it easy for anyone to use, regardless of technical proficiency. It's portable and can be used on any modern Windows machine without the need for\ninstallation.
\nThe goal of the project was to create a fragment of an insurance company's database and a data warehouse based on it. The database contains information about the insurance company's customers, employees and branches, as well as the insurance policies between these entities. The database and warehouse designed this way allows for easy visualization and development of summaries of the work of all branches, employees, as well as policies taken by clients. The assumption is that a company can offer different types of policies - e.g., home insurance, vehicle insurance - and each customer can take out an unlimited number of policies. The project was developed entirely in the environment offered by Oracle, using SQL Developer and SQL Developer Data Modeler, as well as the SQL*Loader tool. The scripts generating the data with which the database was fed were written in Python using the Faker library.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/insurance-company-database.md"}},{"node":{"frontmatter":{"listName":"⚡ /Arduino Knight Rider","nameOfClass":"projects-items miniProjects","popupGithubLink":"https://github.com/Kielx/arduino-knight-rider","popupImageAlt":"App screenshot","popupImageSrc":"https://raw.githubusercontent.com/Kielx/arduino-knight-rider/master/assets/Animation.gif","popupLiveLink":"https://www.tinkercad.com/things/h6UGRvyt57M?sharecode=AdzrjSHtaL6RfG9oV-UQ7uABUGXwvTwtX3bNIyHkgfQ","techIcons":["arduino","autodesk"],"title":"Arduino Knight Rider","slug":"projects/arduino-knight-rider","video":"false","added":"2023-01-09"},"html":"This is an Arduino project that creates a \"Knight Rider\" effect, also known as Larson Scanner. The Arduino Knight Rider is a circuit that features a series of LEDs that move back and forth in a \"scanning\" motion, creating a dynamic and eye-catching effect. The name Larson scanner is derived from Glen A. Larson, the creator of the original \"Knight Rider\" television show, which featured a car with a similar light sequence.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/arduino-knight-rider.md"}},{"node":{"frontmatter":{"listName":"👨🔬 /2-Input Perceptron","nameOfClass":"projects-items miniProjects","popupGithubLink":"https://github.com/Kielx/2-Input-Single-Layer-Perceptron","popupImageAlt":"2-Input single layer Perceptron screenshot","popupImageSrc":"https://github.com/Kielx/2-Input-Single-Layer-Perceptron/raw/master/screenshots/Instruction4.png?raw=true","popupLiveLink":"https://mybinder.org/v2/gh/Kielx/2-Input-Single-Layer-Perceptron/HEAD?labpath=Perceptron.ipynb","techIcons":["python"],"title":"2-Input single layer Perceptron","slug":"projects/perceptron","video":"false","added":"2022-05-05"},"html":"In my introduction to artificial intelligence class during my computer science studies I was tasked with calculating output of 2-input single layer perceptron by hand. As with all hand calculations they were prone to errors. What's more - I had no way to check, whether my calculations were correct. I searched for similar program on the web with no results. Therefore, I decided to create one for myself. Probably I could have found a library for this task, but I thought that it will be a good learning project nevertheless. You may find this notebook useful if you are tasked with similar problem.
\nThis notebook solves the problem of presenting the user with results and visualisation of all the steps that perceptron algorithm took while calculating the decision boundary for 2 input points.
\nIt is a simple example, and I do not guarantee its correctness. It works but further testing is required. I am by no mean an expert in the field of machine learning, deep learning or artificial intelligence. I created this notebook as a way to reinforce my learning and provide myself with visual representation and steps that perceptron took to get to the solution. Descriptions provided may not be accurate, may lack sufficient details and in some cases may be plainly wrong. As I mentioned earlier this notebook might be useful to someone who is a student, tasked with calculating perceptron outcome by hand, to check whether their calculations are correct or not.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/perceptron.md"}},{"node":{"frontmatter":{"listName":"📸 /My-Unsplash","nameOfClass":"projects-items","popupGithubLink":"https://github.com/Kielx/my-unsplash","popupImageAlt":"App screenshot","popupImageSrc":"My-Unsplash-ss.png","popupLiveLink":"https://my-unsplash-mu.vercel.app/","techIcons":["react","firebase","redux","html5","css3","tailwindcss","materialdesign"],"title":"My Unsplash","slug":"projects/my-unsplash","video":"/myUnsplash.mp4","added":"2021-10-01"},"html":"My Unsplash is my solution to challenge. This is my version of the application based on the popular Unsplash website. The application is a digital gallery that allows you to add and remove photos and display them in a Masonry layout.
\nDoes that mean all I had to do was copy the finished design and called it my project? Not at all. For this project, I had design files at my disposal, but I had to translate their implementation into TailwindCSS. In addition, I had to choose a solution responsible for Masonry Layout and create all facilities responsible for adding and storing photos.
\nThe challenge consisted of three external API's usage, state management, responsive layout all wrapped in a single-page React App.\nThe project was a solution to IP-Tracker challenge.
\nUser stories that needed to be fulfilled:
\nThe project was a solution to URL Shortener challenge.\nIt was a good challenge to solidify my external API usage, responsive layout, and React skills.
\nThe challenge was to integrate with the shrtcode API to create shortened URLs and display them like in the designs.\nUser stories that needed to be fulfilled:
\nCountry quiz is a relatively simple app that utilizes RESTCountries API to create a quiz about world countries. It was a challenge from devChallanges.io which provided the idea and a set of user stories to build the app.
\nI wanted to utilize the RESTCountries API since I first heard about it. My first take on it was to create a SPA (Single Page Application) that provided info about a particular country. It would be a decent learning experience nevertheless boring and not interactive. When I got the quiz idea I was sold. Managed to code it in two days thanks to TailwindCSS and React. The outcome looks good, is fun and useful.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/country-quiz.md"}},{"node":{"frontmatter":{"listName":"📈 /Expenses Analyzer","nameOfClass":"projects-items","popupGithubLink":"https://github.com/Kielx/expenses-analyzer","popupImageAlt":"Expenses analyzer screenshot","popupImageSrc":"expensesAnalyzer.png","popupLiveLink":"https://expenses-analyzer.pantak.net/","techIcons":["react","html5","css3","bootstrap","d3dotjs"],"title":"Expenses Analyzer","slug":"projects/expenses-analyzer","video":"false","added":"2021-08-05"},"html":"Expenses analyzer is a React-based app, that allows the user to analyze bank statements from (at the moment) polish Mbank bank accounts.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/expensesAnalyzer.md"}},{"node":{"frontmatter":{"listName":"🍒 /Sunnyside-Agency","nameOfClass":"projects-items miniProjects","popupGithubLink":"https://github.com/Kielx/Sunnyside","popupImageAlt":"Sunnyside agency screenshot","popupImageSrc":"SunnysideSS.png","popupLiveLink":"https://sunnyside.pantak.net/","techIcons":["html5","css3","javascript","react","tailwindcss"],"title":"Sunnyside Agency landing page","slug":"projects/sunnyside","video":"false","added":"2021-08-02"},"html":"The project was a solution to Sunnyside agency landing page challenge.\nI decided that my portfolio of projects is lacking something good-looking and well designed so coding that landing page would be a good experience and asset.
\nThis was my first project using Tailwind CSS. Utility and Mobile First CSS was a challenge itself. Nevertheless, the experience was really good and allowed me to create this project in a little more than 24 hours.
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/sunnyside.md"}},{"node":{"frontmatter":{"listName":"🎨 /Etch-a-sketch","nameOfClass":"projects-items miniProjects","popupGithubLink":"https://github.com/Kielx/etch-a-sketch","popupImageAlt":"Etch a sketch app","popupImageSrc":"etch-a-sketch.png","popupLiveLink":"https://etch-a-sketch.pantak.net/","techIcons":["html5","css3","javascript"],"title":"Etch-a-sketch","slug":"projects/etch-a-sketch","video":"false","added":"2021-08-01"},"html":"This mini-project was one of the first I have ever built. It is a simple app that creates a grid with desired length and colors squares on hover. App is written with HTML, CSS, and vanilla JavaScript and was my first hands-on experience with DOM manipulation. Looking back it was a simple but essential project to understand the underlying logic of DOM manipulation and core HTML and CSS concepts.\nPlus - 5-year-olds love it!
","fileAbsolutePath":"/opt/build/repo/src/markdown-pages/projects/etch-a-sketch.md"}}]},"info":{"edges":[{"node":{"frontmatter":{"listName":"👨💻 /About","nameOfClass":null,"popupGithubLink":"https://github.com/Kielx","popupImageAlt":"Cartoon photo of myself","popupImageSrc":"mojephoto.jpg","popupLiveLink":null,"techIcons":["javascript","nodedotjs","react","html5","css3","cplusplus","c","python","mongodb","express","bootstrap","sass","heroku","netlify","postman","d3dotjs","archlinux","linux","windowsterminal","fontawesome","tailwindcss","amazondynamodb","amazonaws"],"title":"About me","slug":"/about","video":"false","added":null},"html":"