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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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:
\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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/src/markdown-pages/projects/arduino-knight-rider.md"}},{"node":{"frontmatter":{"listName":"💾 /PdftextEditor","nameOfClass":"projects-items","popupGithubLink":"https://github.com/ilyshoaib/PdftextEditor","popupImageAlt":"App screenshot","popupImageSrc":"https://raw.githubusercontent.com/Kielx/Insurance-company-database/master/images/data_warehouse.png","popupLiveLink":null,"techIcons":["python"],"title":"PdftextEditor","slug":"projects/PdftextEditor","video":"false","added":"2023-01-14"},"html":"Welcome to the PDF Text Editor project! This project was developed as part of our Operating System course in the 4th semester. The aim of this project was to create a simple text editor application that allows users to perform various operations on PDF files.
\nThe PDF Text Editor provides a user-friendly graphical interface for performing tasks such as creating new PDF files, opening existing ones, editing text, adding images, cropping images, rotating pages, deleting pages, merging PDF files, and splitting PDF files. The application leverages the power of Python and several libraries, such as PyPDF2, Pillow, and reportlab, to achieve these functionalities.
\nBy working on this project, we gained valuable insights into file handling, GUI development, PDF manipulation, and the overall implementation of an application in Python. We also improved our understanding of various operating system concepts, including file systems, process management, and user interfaces.
","fileAbsolutePath":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/src/markdown-pages/projects/insurance-company-database.md"}},{"node":{"frontmatter":{"listName":"🔍 /Phishing Page-Gmail","nameOfClass":"projects-items","popupGithubLink":"https://github.com/ilyshoaib/gmail_phishing_page","popupImageAlt":"App screenshot","popupImageSrc":"https://github.com/ilyshoaib/gmail_phishing_page/assets/94924310/7af734ad-2bca-46e9-a54a-f6f56457641c","popupLiveLink":null,"techIcons":["css3","html5"],"title":"Phishing Page-Gmail","slug":"projects/Gmail","video":"false","added":"2023-05-04"},"html":"In my web application security end-semester project, I developed a realistic Gmail phishing page using HTML, CSS, JavaScript, and PHP. The project aimed to raise awareness about phishing attacks and their potential risks. It simulated a targeted attack by distributing the phishing page to specific users via social engineering. The page resembled the legitimate Gmail login interface, tricking users into entering their credentials. This project allowed me to explore web application security, frontend design, backend functionality, and ethical considerations related to phishing simulations.
","fileAbsolutePath":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/src/markdown-pages/projects/Phishing Page-Gmail.md"}},{"node":{"frontmatter":{"listName":"🎯 /BankingSystem","nameOfClass":"projects-items","popupGithubLink":"https://github.com/ilyshoaib/banksys","popupImageAlt":"Bank","popupImageSrc":"","popupLiveLink":null,"techIcons":["java","mysql"],"title":"Banking Database Management System","slug":"projects/banksys","video":"false","added":"2023-12-20"},"html":"This project focuses on creating a secure and efficient platform for banking operations, including transactions, bill payments, and account management. The repository provides an overview of the system architecture, database design, input validations, and key functionalities implemented.
\n 1. Apache NetBeans for Java development.\n 2. XAMPP for SQL Server and PHPMyAdmin.\nMagicHEX allows users to perform various operations on files based on their headers. It provides options to identify file types by examining their headers, print the hexadecimal representation of file headers, change individual headers to different formats currently (JPEG, PNG, PDF, DOCX), reverse the file's hexadecimal representation, and save reversed hex as a copy.
\nThis project focuses on creating a secure and efficient platform for banking operations, including transactions, bill payments, and account management. The repository provides an overview of the system architecture, database design, input validations, and key functionalities implemented.
\n 1. Apache NetBeans for Java development.\n 2. XAMPP for SQL Server and PHPMyAdmin.\nMagicHEX allows users to perform various operations on files based on their headers. It provides options to identify file types by examining their headers, print the hexadecimal representation of file headers, change individual headers to different formats currently (JPEG, PNG, PDF, DOCX), reverse the file's hexadecimal representation, and save reversed hex as a copy.
\nIn my web application security end-semester project, I developed a realistic Gmail phishing page using HTML, CSS, JavaScript, and PHP. The project aimed to raise awareness about phishing attacks and their potential risks. It simulated a targeted attack by distributing the phishing page to specific users via social engineering. The page resembled the legitimate Gmail login interface, tricking users into entering their credentials. This project allowed me to explore web application security, frontend design, backend functionality, and ethical considerations related to phishing simulations.
","fileAbsolutePath":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/src/markdown-pages/projects/Phishing Page-Gmail.md"}},{"node":{"frontmatter":{"listName":"💾 /PdftextEditor","nameOfClass":"projects-items","popupGithubLink":"https://github.com/ilyshoaib/PdftextEditor","popupImageAlt":"App screenshot","popupImageSrc":"https://raw.githubusercontent.com/Kielx/Insurance-company-database/master/images/data_warehouse.png","popupLiveLink":null,"techIcons":["python"],"title":"PdftextEditor","slug":"projects/PdftextEditor","video":"false","added":"2023-01-14"},"html":"Welcome to the PDF Text Editor project! This project was developed as part of our Operating System course in the 4th semester. The aim of this project was to create a simple text editor application that allows users to perform various operations on PDF files.
\nThe PDF Text Editor provides a user-friendly graphical interface for performing tasks such as creating new PDF files, opening existing ones, editing text, adding images, cropping images, rotating pages, deleting pages, merging PDF files, and splitting PDF files. The application leverages the power of Python and several libraries, such as PyPDF2, Pillow, and reportlab, to achieve these functionalities.
\nBy working on this project, we gained valuable insights into file handling, GUI development, PDF manipulation, and the overall implementation of an application in Python. We also improved our understanding of various operating system concepts, including file systems, process management, and user interfaces.
","fileAbsolutePath":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/src/markdown-pages/projects/perceptron.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:
\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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/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":"/home/runner/work/ilyshoaib.github.io/ilyshoaib.github.io/src/markdown-pages/projects/etch-a-sketch.md"}}]},"info":{"edges":[{"node":{"frontmatter":{"listName":"👨💻 /About","nameOfClass":null,"popupGithubLink":"https://github.com/ilyshoaib","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":"