From a1ffbbc17eede7e45a66caf1031045e2361688dc Mon Sep 17 00:00:00 2001 From: Alexander Fuks Date: Mon, 28 Oct 2024 19:36:44 +0000 Subject: [PATCH] chore: update about page --- .vscode/settings.json | 6 +- ...commercial-equipment-production-company.md | 2 +- ...ulture-management-and-analysis-software.md | 2 +- ...013-07-04-creating-a-development-server.md | 2 +- ...5-01-18-resource-limitations-cause-bugs.md | 2 +- ...-application-to-search-for-requirements.md | 2 +- ...console-application-into-ui-application.md | 2 +- ...1-14-exploring-the-world-of-electronics.md | 6 +- ...t-framework-for-microsoft-office-add-in.md | 2 +- ...measure-application-startup-performance.md | 2 +- ...pa-web-application-for-small-businesses.md | 2 +- ...023-08-01-web-api-to-run-tasks-remotely.md | 2 +- ...rowser-extension-to-add-what-is-missing.md | 2 +- ...-02-23-streaming-api-and-how-to-test-it.md | 2 +- .../2024/2024-05-26-development-containers.md | 2 +- ...om-web-application-for-existing-service.md | 2 +- .../2024/2024-09-16-yarp-transformations.md | 2 +- _tabs/about.md | 93 +----------- assets/css/about.css | 33 +++++ assets/css/jekyll-theme-chirpy.scss | 1 + assets/js/about.js | 137 ++++++++++++++++++ 21 files changed, 201 insertions(+), 105 deletions(-) create mode 100644 assets/css/about.css create mode 100644 assets/js/about.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 9690dfa..f65f26b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,7 +4,7 @@ "editor.formatOnPaste": true, "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true, - // Prettier + // Prettier "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, // Shopify Liquid @@ -45,6 +45,7 @@ "appsettings", "aspnet", "cover.webp", + "cplusplus", "devcontainer", "devcontainers", "endraw", @@ -52,6 +53,7 @@ "Fuks", "kungfux", "Photoshop", + "raspberrypi", "reduxjs", "signin", "thisunsafe", @@ -63,5 +65,5 @@ "WORKDIR", "wwwroot", "YARP" - ], + ] } diff --git a/_posts/2012/2012-08-12-website-for-local-commercial-equipment-production-company.md b/_posts/2012/2012-08-12-website-for-local-commercial-equipment-production-company.md index d5f529f..a32994c 100644 --- a/_posts/2012/2012-08-12-website-for-local-commercial-equipment-production-company.md +++ b/_posts/2012/2012-08-12-website-for-local-commercial-equipment-production-company.md @@ -5,7 +5,7 @@ date: 2012-08-12 22:49:02 +0200 last_modified_at: 2012-08-12 22:49:02 +0200 published: true categories: [Projects, Web, Desktop] -tags: [DotNet/C#, WinForms, PHP, MySQL, HTML, JavaScript] +tags: [DotNet, CSharp, WinForms, PHP, MySQL, HTML, CSS, JavaScript, Windows] mermaid: true media_subpath: /assets/media/2012/website-for-local-commercial-equipment-production-company/ image: cover.webp diff --git a/_posts/2013/2013-05-16-aquaculture-management-and-analysis-software.md b/_posts/2013/2013-05-16-aquaculture-management-and-analysis-software.md index fa7b4be..4240417 100644 --- a/_posts/2013/2013-05-16-aquaculture-management-and-analysis-software.md +++ b/_posts/2013/2013-05-16-aquaculture-management-and-analysis-software.md @@ -5,7 +5,7 @@ date: 2013-05-16 01:09:23 +0200 last_modified_at: 2013-05-16 01:09:23 +0200 published: true categories: [Projects, Desktop] -tags: [DotNet/C#, WinForms, SQLite, InnoSetup, Delphi, Batch Scripting] +tags: [DotNet, CSharp, WinForms, SQLite, InnoSetup, Delphi, Batch Scripting] mermaid: true media_subpath: /assets/media/2013/aquaculture-management-and-analysis-software/ image: cover.webp diff --git a/_posts/2013/2013-07-04-creating-a-development-server.md b/_posts/2013/2013-07-04-creating-a-development-server.md index cd6582b..e89845f 100644 --- a/_posts/2013/2013-07-04-creating-a-development-server.md +++ b/_posts/2013/2013-07-04-creating-a-development-server.md @@ -5,7 +5,7 @@ date: 2013-07-04 00:18:57 +0200 last_modified_at: 2013-07-04 00:18:57 +0200 published: true categories: [Projects, System Administration] -tags: [Linux, Bash, SVN, Munin, Jenkins, Redmine, PHP, MySQL] +tags: [Linux, Bash, SVN, Munin, Jenkins, Redmine, PHP, MySQL, Apache] mermaid: false media_subpath: /assets/media/2013/creating-a-development-server/ image: cover.webp diff --git a/_posts/2015/2015-01-18-resource-limitations-cause-bugs.md b/_posts/2015/2015-01-18-resource-limitations-cause-bugs.md index 7bb7ef8..b911480 100644 --- a/_posts/2015/2015-01-18-resource-limitations-cause-bugs.md +++ b/_posts/2015/2015-01-18-resource-limitations-cause-bugs.md @@ -58,4 +58,4 @@ My Notes application had only a few lines of code and was written quickly to ser ## Conclusion - Get your application used every day, not just by QA, but by the entire team. This helps to uncover many issues related not only to functionality, but also to usability, performance, and resource usage. -- As a software developer, be aware of resource constraints. For example, limit the number of objects created, close database connections, etc. to avoid hitting OS/hardware limits. \ No newline at end of file +- As a software developer, be aware of resource constraints. For example, limit the number of objects created, close database connections, etc. to avoid hitting OS/hardware limits. diff --git a/_posts/2018/2018-08-05-web-application-to-search-for-requirements.md b/_posts/2018/2018-08-05-web-application-to-search-for-requirements.md index ea805e4..391d568 100644 --- a/_posts/2018/2018-08-05-web-application-to-search-for-requirements.md +++ b/_posts/2018/2018-08-05-web-application-to-search-for-requirements.md @@ -5,7 +5,7 @@ date: 2018-08-05 23:11:02 +0300 last_modified_at: 2018-08-05 23:11:02 +0300 published: true categories: [Projects, Web] -tags: [Java, JSP, JavaScript, Tomcat, Bootstrap, jQuery] +tags: [Java, JSP, JavaScript, Tomcat, Bootstrap, jQuery, HTML, CSS] mermaid: true media_subpath: /assets/media/2018/web-application-to-search-for-requirements/ image: cover.webp diff --git a/_posts/2019/2019-03-04-turn-console-application-into-ui-application.md b/_posts/2019/2019-03-04-turn-console-application-into-ui-application.md index ed055bb..976c4b6 100644 --- a/_posts/2019/2019-03-04-turn-console-application-into-ui-application.md +++ b/_posts/2019/2019-03-04-turn-console-application-into-ui-application.md @@ -5,7 +5,7 @@ date: 2019-03-04 21:44:37 +0300 last_modified_at: 2019-03-04 21:44:37 +0300 published: true categories: [Projects, Desktop] -tags: [DotNet/C#, WinForms, MVC] +tags: [DotNet, CSharp, WinForms, MVC, Windows] mermaid: false media_subpath: /assets/media/2019/turn-console-application-into-ui-application/ image: cover.webp diff --git a/_posts/2019/2019-11-14-exploring-the-world-of-electronics.md b/_posts/2019/2019-11-14-exploring-the-world-of-electronics.md index e15f95a..c5c1f61 100644 --- a/_posts/2019/2019-11-14-exploring-the-world-of-electronics.md +++ b/_posts/2019/2019-11-14-exploring-the-world-of-electronics.md @@ -140,7 +140,7 @@ DioxideSensor::Data DioxideSensor::getConcentration(){ uart.write(requestGetConcentration, 9); memset(response, 0, 9); uart.readBytes(response, 9); - + Serial.print(F("MH-Z19B response:")); for (unsigned char i=0;i<=8;++i){ Serial.print(F(" ")); @@ -148,7 +148,7 @@ DioxideSensor::Data DioxideSensor::getConcentration(){ Serial.print(response[i], HEX); } Serial.println(); - + if(verifyChecksum()){ short high = (short)response[2]; short low = (short)response[3]; @@ -192,4 +192,4 @@ _Technologies_ ## Conclusion This journey took me about a year and I completely understand why people choose this direction and what it means to be an engineer. I would highly recommend anyone to take this path and explore the world of electronics to better understand how computers work and how to write efficient programs, even if they will not connect their lives with electronics itself. -The knowledge and experience I have gained is hard to overestimate. Some tools and knowledge I can use in my daily life. Others have helped me organize my knowledge. The rest are just for fun and push the boundaries of knowledge and can be used to understand many technical things. \ No newline at end of file +The knowledge and experience I have gained is hard to overestimate. Some tools and knowledge I can use in my daily life. Others have helped me organize my knowledge. The rest are just for fun and push the boundaries of knowledge and can be used to understand many technical things. diff --git a/_posts/2021/2021-06-14-test-framework-for-microsoft-office-add-in.md b/_posts/2021/2021-06-14-test-framework-for-microsoft-office-add-in.md index dedaa1d..2e8dc0d 100644 --- a/_posts/2021/2021-06-14-test-framework-for-microsoft-office-add-in.md +++ b/_posts/2021/2021-06-14-test-framework-for-microsoft-office-add-in.md @@ -5,7 +5,7 @@ date: 2021-06-14 18:01:24 +0300 last_modified_at: 2021-06-14 18:01:24 +0300 published: true categories: [Projects, Desktop, Web] -tags: [DotNet/C#, Selenium, FlaUI, Desktop automation, Web automation] +tags: [DotNet, CSharp, Selenium, FlaUI, Desktop automation, Web automation, Windows] mermaid: true media_subpath: /assets/media/2021/test-framework-for-microsoft-office-add-in/ image: cover.webp diff --git a/_posts/2021/2021-09-30-measure-application-startup-performance.md b/_posts/2021/2021-09-30-measure-application-startup-performance.md index ce6bbb1..3ca8d6b 100644 --- a/_posts/2021/2021-09-30-measure-application-startup-performance.md +++ b/_posts/2021/2021-09-30-measure-application-startup-performance.md @@ -5,7 +5,7 @@ date: 2021-09-30 22:16:55 +0200 last_modified_at: 2021-09-30 22:16:55 +0200 published: true categories: [Projects, Desktop] -tags: [DotNet/C#, FlaUI, Desktop automation, Performance testing] +tags: [DotNet, CSharp, FlaUI, Desktop automation, Performance testing, Windows] mermaid: false media_subpath: /assets/media/2021/measure-application-startup-performance/ image: cover.webp diff --git a/_posts/2021/2021-11-10-spa-web-application-for-small-businesses.md b/_posts/2021/2021-11-10-spa-web-application-for-small-businesses.md index dfa0200..ac46162 100644 --- a/_posts/2021/2021-11-10-spa-web-application-for-small-businesses.md +++ b/_posts/2021/2021-11-10-spa-web-application-for-small-businesses.md @@ -5,7 +5,7 @@ date: 2021-11-10 21:16:09 +0300 last_modified_at: 2021-11-10 21:16:09 +0300 published: true categories: [Projects, Web] -tags: [Angular, JavaScript, TypeScript, NodeJS, Fastify, SQLite, Electron] +tags: [Angular, JavaScript, TypeScript, NodeJS, Fastify, SQLite, Electron, Windows] mermaid: false media_subpath: /assets/media/2021/spa-web-application-for-small-businesses/ image: cover.webp diff --git a/_posts/2023/2023-08-01-web-api-to-run-tasks-remotely.md b/_posts/2023/2023-08-01-web-api-to-run-tasks-remotely.md index 0dea4bf..74a2854 100644 --- a/_posts/2023/2023-08-01-web-api-to-run-tasks-remotely.md +++ b/_posts/2023/2023-08-01-web-api-to-run-tasks-remotely.md @@ -5,7 +5,7 @@ date: 2023-08-01 13:31:18 +0400 last_modified_at: 2023-08-01 13:31:18 +0400 published: true categories: [Projects, Web] -tags: [DotNet/C#, ASP.NET, CodeceptJS, API, Test automation] +tags: [DotNet, DotNet Core, CSharp, ASP.NET, CodeceptJS, API, Test automation] mermaid: true media_subpath: /assets/media/2023/web-api-to-run-tasks-remotely/ image: cover.webp diff --git a/_posts/2023/2023-09-20-browser-extension-to-add-what-is-missing.md b/_posts/2023/2023-09-20-browser-extension-to-add-what-is-missing.md index 85ca158..01c21c9 100644 --- a/_posts/2023/2023-09-20-browser-extension-to-add-what-is-missing.md +++ b/_posts/2023/2023-09-20-browser-extension-to-add-what-is-missing.md @@ -5,7 +5,7 @@ date: 2023-09-20 23:18:32 +0400 last_modified_at: 2023-09-20 23:18:32 +0400 published: true categories: [Projects, Web] -tags: [Javascript, Webpack] +tags: [Javascript, Webpack, NodeJS, Chrome, Firefox] mermaid: true media_subpath: /assets/media/2023/browser-extension-to-add-what-is-missing/ image: cover.webp diff --git a/_posts/2024/2024-02-23-streaming-api-and-how-to-test-it.md b/_posts/2024/2024-02-23-streaming-api-and-how-to-test-it.md index 8ccdbdf..4436890 100644 --- a/_posts/2024/2024-02-23-streaming-api-and-how-to-test-it.md +++ b/_posts/2024/2024-02-23-streaming-api-and-how-to-test-it.md @@ -5,7 +5,7 @@ date: 2024-02-23 04:32:16 +0400 last_modified_at: 2024-02-23 04:32:16 +0400 published: true categories: [Posts, Software Development] -tags: [DotNet/C#, ASP.NET, API] +tags: [DotNet, DotNet Core, CSharp, ASP.NET, API] mermaid: true media_subpath: /assets/media/2024/streaming-api-and-how-to-test-it/ image: cover.webp diff --git a/_posts/2024/2024-05-26-development-containers.md b/_posts/2024/2024-05-26-development-containers.md index bdb6b15..390ab2f 100644 --- a/_posts/2024/2024-05-26-development-containers.md +++ b/_posts/2024/2024-05-26-development-containers.md @@ -5,7 +5,7 @@ date: 2024-05-28 02:03:11 +0400 last_modified_at: 2024-05-28 02:03:11 +0400 published: true categories: [Posts, Software Development] -tags: [Docker] +tags: [Docker, VSCode, Rider, Visual Studio] mermaid: true media_subpath: /assets/media/2024/development-containers/ image: cover.webp diff --git a/_posts/2024/2024-09-13-custom-web-application-for-existing-service.md b/_posts/2024/2024-09-13-custom-web-application-for-existing-service.md index f374571..3f262d2 100644 --- a/_posts/2024/2024-09-13-custom-web-application-for-existing-service.md +++ b/_posts/2024/2024-09-13-custom-web-application-for-existing-service.md @@ -5,7 +5,7 @@ date: 2024-09-13 11:07:20 +0400 last_modified_at: 2024-09-13 11:07:20 +0400 published: true categories: [Projects, Web] -tags: [React, Typescript, Vite, MUI, Redux, DotNet/C#, API, Reverse Proxy, YARP] +tags: [React, Typescript, Vite, Material UI, Redux, HTML, CSS, NodeJS, DotNet, DotNet Core, CSharp, API, Reverse Proxy, YARP] mermaid: true media_subpath: /assets/media/2024/custom-web-application-for-existing-service/ image: cover.webp diff --git a/_posts/2024/2024-09-16-yarp-transformations.md b/_posts/2024/2024-09-16-yarp-transformations.md index 8324f3a..df0207e 100644 --- a/_posts/2024/2024-09-16-yarp-transformations.md +++ b/_posts/2024/2024-09-16-yarp-transformations.md @@ -5,7 +5,7 @@ date: 2024-09-16 19:58:19 +0400 last_modified_at: 2024-09-16 19:58:19 +0400 published: true categories: [Projects, Web] -tags: [DotNet/C#, YARP, API, Reverse Proxy] +tags: [DotNet, DotNet Core, CSharp, YARP, API, Reverse Proxy] mermaid: true media_subpath: /assets/media/2024/yarp-transformations/ image: cover.webp diff --git a/_tabs/about.md b/_tabs/about.md index 18a6199..13c5664 100644 --- a/_tabs/about.md +++ b/_tabs/about.md @@ -4,93 +4,16 @@ icon: fas fa-info-circle order: 4 --- -Hi, I'm Alexander. Nice to meet you. ---- - -Since I started my journey as an enterprise software test engineer 15 years ago, I've been building applications to simplify my work and that of my colleagues. After all these years of improving my skills and gaining experience, I continue to build small and bigger projects playing with different technology stacks and I really enjoy this process. - -```js -const experience = [ - { role: 'Software Developer', years: 2 }, - { role: 'SDET', years: 5 }, - { role: 'QA Engineer', years: 10 }, -]; - -const languages = ['C#', 'JavaScript', 'TypeScript', 'Java', 'PHP', 'C++', - 'Delphi', 'Pascal', 'Basic']; - -const tools = ['Apache', 'ASP.NET', 'Azure', 'CodeceptJS', 'Git', 'Jenkins', - 'JMeter', 'JSP', 'MSSQL', 'Node.js', 'Nuke', 'Playwright', 'Postman', - 'Selenium', 'SQLite', 'SVN', 'TFS', 'Tomcat', 'Webpack', 'WinForms', 'WPF']; - -const os = ['Windows', 'Linux']; - -const others = ['Raspberry Pi', 'Arduino', 'NodeMCU', 'ESP8266']; - -function describeExperience() { - const yearsOfExperience = experience.reduce((total, job) => total + job.years, 0); - const jobHistory = experience.map(job => `${job.role} for ${job.years} years`); - const skills = [...programmingLanguages, ...tools, ...os, ...others]; - - return `With ${yearsOfExperience} years of experience, ` + - `I've worked as a ${jobHistory.join(', ')}. My skills include ${skills.join(', ')}.`; -} -``` - - - -> -> Click me -> to see the code output. -{: .prompt-tip #output-console } - -> Want to know more about my experience? Here are [projects](/categories/projects) I worked on and [tools](/tags) I use. -{: .prompt-info } - -Testimonials ------------- + + + -People I've worked with have said some nice things... +## Hi. I'm Alexander. Nice to meet you. -> Lacey and I want you to know that Alexander is a real asset to our team. We previously noticed that he brings thoughtful questions to our planning sessions and he has a good understanding of the product, but when David was on vacation the last two weeks, he did an excellent job of taking on many of her responsibilities. We especially appreciate the work he did to prepare documentation and scenarios for our meeting with client last week (including working some hours one weekend). -- Senior Program Manager +I wrote my first line of code in 1999 and I've been hooked ever since. After a couple of years I was asked to build the first client application and I did. I always knew I wanted to code, but my path to the tech industry hasn't been a straight line. I've worked in a variety of roles that have given me a broad perspective. I have played with hardware, software, security and quality; desktop, web and mobile. -> You are one of my favorites and I have made it very clear to many people here and at there that you are a valuable member of the team. You quickly learned the product, but more importantly I can see that you are good at looking at the whole picture and not focusing only on the specific thing you are testing. This is a skill that is extremely valuable to an organization. I am sure you will be successful at current position and wherever life takes you. -- Senior Program Manager +I started this blog to share my discoveries and experiences with others so you can get to know me better. Below, you'll find a list of tools I'm familiar with. Click to learn more about how I use [tools](/tags) or take a look at my [projects](/categories/projects). In the sidebar you can find my contact details. -> Throughout the course of your engagement with us, your dedication and proficiency have not only met but exceeded our expectations. Your commitment to delivering high-quality results has significantly contributed to the success of our projects. We recognize and commend your hard work, attention to detail, and the collaborative spirit you brought to the table. Your contributions have undoubtedly left a lasting impact, and we are grateful for the positive influence you have had on our projects and team dynamics. -Thank you bringing out a lot of automation POC’s and not just introducing it but also helping the teams to embrace new automation tools and changes that had happened. Thanks a lot for your contributions and all the best for your future! -- Senior QA Team Lead +
-> I wanted to take a moment to let you know how much I appreciate the knowledge and insights you've shared with me. Your guidance has been invaluable, and I'm truly grateful for the opportunity to learn from someone as experienced as you. -- SDET \ No newline at end of file +
diff --git a/assets/css/about.css b/assets/css/about.css new file mode 100644 index 0000000..3baeec8 --- /dev/null +++ b/assets/css/about.css @@ -0,0 +1,33 @@ +hr.about { + margin: 2.5rem 0; +} + +#tools { + text-align: center; +} + +i.tool-icon::before { + font-size: 300%; + opacity: 1; +} + +i.tool-icon:not(.colored)::before { + color: #696969; + opacity: 0.5 !important; +} + +a.tool { + display: inline-block; + padding: 0.5rem; + border-bottom: unset !important; + transition: transform 0.2s; +} + +a.tool:hover { + transform: scale(1.5); + transition: transform 0.2s; +} + +a.tool.disabled { + cursor: default; +} diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss index a5f22b6..9832f50 100644 --- a/assets/css/jekyll-theme-chirpy.scss +++ b/assets/css/jekyll-theme-chirpy.scss @@ -1,6 +1,7 @@ --- --- +/* prettier-ignore */ @import 'main {%- if jekyll.environment == 'production' -%} .bundle diff --git a/assets/js/about.js b/assets/js/about.js new file mode 100644 index 0000000..e10fb51 --- /dev/null +++ b/assets/js/about.js @@ -0,0 +1,137 @@ +// Icons provided by https://devicon.dev/ +const tools = [ + // Languages and frameworks + { icon: 'csharp', hint: 'C#' }, + { icon: 'dot-net', tag: 'dotnet', hint: 'DotNet' }, + { icon: 'dotnetcore', tag: 'dotnet-core', hint: 'DotNet Core' }, + { icon: 'blazor', iconType: 'original', isClickable: false }, + { icon: 'javascript' }, + { icon: 'typescript' }, + { icon: 'java' }, + { icon: 'cplusplus', tag: 'c', hint: 'C++' }, + { icon: 'python' }, + { icon: 'php' }, + // { icon: 'delphi' }, + // { icon: 'pascal' }, + // { icon: 'basic' }, + { icon: 'nodejs', hint: 'Node.js' }, + { icon: 'react' }, + { icon: 'electron', iconType: 'original' }, + { icon: 'angular' }, + { icon: 'android', isClickable: false }, + { icon: 'html5', tag: 'html', hint: 'HTML' }, + { icon: 'css3', tag: 'css', hint: 'CSS' }, + { icon: 'sass', isClickable: false }, + { icon: 'bootstrap' }, + { icon: 'fastify' }, + { icon: 'arduino' }, + + // Host, deployment and CI/CD + { icon: 'docker' }, + { icon: 'podman', isClickable: false }, + { icon: 'kubernetes', isClickable: false }, + { icon: 'helm', isClickable: false }, + { icon: 'azure', isClickable: false }, + { icon: 'tomcat', iconType: 'line' }, + { icon: 'apache' }, + { icon: 'github', hint: 'GitHub', isClickable: false }, + { icon: 'azuredevops', hint: 'Azure DevOps', isClickable: false }, + { icon: 'bitbucket', isClickable: false }, + { icon: 'gitlab', hint: 'GitLab', isClickable: false }, + { icon: 'jira', isClickable: false }, + { icon: 'confluence', isClickable: false }, + // { icon: 'teamcity', hint: 'TeamCity', isClickable: false }, + { icon: 'jenkins' }, + + // IDEs, editors, and tools + { icon: 'vscode', hint: 'Visual Studio Code' }, + { icon: 'rider' }, + { icon: 'visualstudio', tag: 'visual-studio', hint: 'Visual Studio' }, + // { icon: 'netbeans', hint: 'NetBeans' }, + { icon: 'eclipse', isClickable: false }, + { icon: 'git', isClickable: false }, + { icon: 'subversion', isClickable: false }, + // { icon: 'tfs', isClickable: false }, + { icon: 'nuget', iconType: 'original', isClickable: false }, + { icon: 'npm', iconType: 'original-wordmark', isClickable: false }, + { icon: 'webpack' }, + { icon: 'jekyll', isClickable: false }, + { icon: 'markdown', isClickable: false }, + { icon: 'materialui', tag: 'material-ui', hint: 'Material UI' }, + { icon: 'redux' }, + { icon: 'vite' }, + // { icon: 'virtualbox' }, + + // Databases + { icon: 'sqlite', hint: 'SQLite' }, + { icon: 'mysql', hint: 'MySQL' }, + { icon: 'microsoftsqlserver', hint: 'SQL Server', isClickable: false }, + { icon: 'postgresql', hint: 'PostgreSQL', isClickable: false }, + + // Testing tools + { icon: 'playwright' }, + { icon: 'selenium' }, + { icon: 'cucumber', isClickable: false }, + { icon: 'postman', isClickable: false }, + // { icon: 'jmeter', isClickable: false }, + + // Others + { icon: 'windows11', tag: 'windows', hint: 'Windows' }, + { icon: 'powershell', isClickable: false }, + { icon: 'linux' }, + { icon: 'bash' }, + { icon: 'vim', isClickable: false }, + { icon: 'raspberrypi', hint: 'Raspberry Pi' }, + { icon: 'chrome' }, + { icon: 'firefox' }, + { icon: 'opentelemetry', hint: 'OpenTelemetry', isClickable: false }, + { icon: 'json', hint: 'JSON', isClickable: false }, + { icon: 'yaml', hint: 'YAML', isClickable: false }, + { icon: 'figma', isClickable: false }, + { icon: 'msdos', hint: 'MS-DOS', isClickable: false }, +]; + +const container = document.getElementById('tools'); + +tools.forEach((tool) => { + const icon = tool.icon; + const iconType = tool.iconType ?? 'plain'; + const tag = tool.tag ?? icon; + const title = tool.hint ?? tool.icon; + const isClickable = tool.isClickable ?? true; + + const anchor = document.createElement('a'); + const classes = isClickable ? ['tool'] : ['tool', 'disabled']; + anchor.classList.add(...classes); + if (isClickable) { + anchor.href = `/tags/${tag}`; + } + anchor.title = title.charAt(0).toUpperCase() + title.slice(1); + + const content = document.createElement('i'); + content.className = `tool-icon devicon-${icon}-${iconType}`; + + anchor.appendChild(content); + container.appendChild(anchor); +}); + +document.querySelectorAll('.tool-icon').forEach((ti) => { + ['mouseenter', 'touchstart'].forEach((event) => + ti.addEventListener( + event, + () => { + ti.classList.add('colored'); + }, + { passive: true } + ) + ); + ['mouseleave', 'touchend'].forEach((event) => + ti.addEventListener( + event, + () => { + ti.classList.remove('colored'); + }, + { passive: true } + ) + ); +});