Forem: Matteo Santoro Dev

Feel free to leave feedback! 💬

Matteo Santoro Dev — Wed, 02 Apr 2025 09:13:35 +0000

Matteo Santoro Dev

Apr 2 '25

New mega update for my GameBoy style portfolio

#webdev #gamedev #javascript #programming

Comments 5

1 min read

New mega update for my GameBoy style portfolio

Matteo Santoro Dev — Wed, 02 Apr 2025 08:50:22 +0000

🇬🇧 My Portfolio is Finally Ready! 🚀
After months, I finally took the time to work on the "final" version of my interactive portfolio! 🎮✨

🔥 What's New:

📝 Added a Blog icon (coming soon)
🔑 Enhanced #gamification with new mechanics, including unlocking doors with a key, a hidden mini-level, and a new CTA in the Game Over screen (whether you win or lose!)
📱 Now fully playable on smartphones!
🎁 Added new #easterEggs, new avatar, improved the website core, enhanced the auto-translation system, and fixed several #bugs

If you love websites that feel like real games, give mine a try and let me know what you think! 🎮👇

🚀 The final update on matteosantoro.dev.

Check out my latest post, especially if you're a fan of Japanese culture or if you're studying it!

Matteo Santoro Dev — Wed, 08 Jan 2025 09:36:17 +0000

Wakaruyo - Japanese Text Translation Browser Extension 🌐

Matteo Santoro Dev ・ Jan 8 '25

#webdev #javascript #browser #programming

Wakaruyo - Japanese Text Translation Browser Extension 🌐

Matteo Santoro Dev — Wed, 08 Jan 2025 09:26:35 +0000

Hello everyone!

Those who know me are aware of how much I love the Japanese language and how dedicated I am to self-studying it. They also know that I can never sit still. For this reason, I developed Wakaruyo, a browser extension that is currently in the experimental phase.

Website

This extension allows you to translate selected text on a webpage from Japanese to the language set in your browser, which is automatically detected.

Main features include:

1. Text Selection and Translation

When a user selects text on a webpage, the extension automatically detects if the text is in Japanese and initiates a translation request via API. The translation is then displayed in a floating "overcard" next to the selected text. The functionality also supports Japanese text within images.

2. Translation Caching

Translations are stored locally in the browser to reduce API calls and speed up repeated translations of the same text. The cache is managed through localStorage and has an expiration time to ensure continuous updates.

3. Retry Mechanism

If an API request fails due to network issues or other reasons, the extension will automatically retry up to three times, with a delay between each attempt.

4. Romanization Support

The extension can also convert Japanese text into Romanji (the transcription of Japanese into the Latin alphabet). Users can easily toggle between the translation and Romanji with a simple click.

5. Translation Requests with Debounce

To prevent overloading the API with too many requests, the extension uses a debounce function that only sends the translation request after the user has finished selecting the text, with a short delay.

Video preview on X.com:

🚀 I created Wakaruyo, a browser extension to automatically translate Japanese! Select text on a webpage and instantly get the translation in your browser's language. Supports romanization, cache, retry, and more! 🌐 #Tech #Japanese #BrowserExtension pic.twitter.com/tSwpKDpY53
— Matteo Santoro Dev (@matteosant_dev) January 8, 2025

New WebGL QR code generator

Matteo Santoro Dev — Sun, 12 May 2024 11:58:14 +0000

Hi everyone🌟, today I show you a new tool of mine: a QR Code Generator developed in webgl.

I know it's something I've seen before but it's a tool that never goes out of fashion and is always useful, as well as the QRs it generates never expire and it's totally free 💼💰.

It allows you to generate codes in different formats:

Text📄
URLs🔗
Telephone number 📞
VCard🙋🏼‍♂️
Mecard🧑🏼‍💼
SMS📱
Wifi📶
Calendar event📅
email📧
Bitcoin wallet🪙

Obviously, like all my products, it is responsive and has an automatic self-translation system:

If the browser language is different from Italian (where I live) the tool will automatically apply English, since it is a universal language🌍🔠.

As always, I am open to any feedback from you.

The tool is accessible from here: https://interactive.matteosantoro.dev/qr-code-gen/

Downloadable version is on website

New Web Portfolio 16bit OS Style

Matteo Santoro Dev — Tue, 23 Apr 2024 10:39:35 +0000

🚀 Big news on the way! 🎨🎮
I'm working on creating a completely revamped version of my web portfolio, dedicated exclusively to artists and developers.

While I drew inspiration from the iconic graphics of the GameBoy for my personal website, in this new iteration, I've been guided by the style of an operating system.

Naturally, the site will provide:

**Responsive design: **ensuring optimal viewing on every device.
**Adaptive language: **to reach an international audience without language barriers. (If the site detects a system or browser local language different from Italian, it will automatically switch to English, making it easier for all users to access.)

🌟 Though still in the refinement stage, we're nearing the goal!

I'm always open to your feedback to make it even better.
Stay tuned for further updates! 🖌️✨

Disney Gargoyles native porting Development Update 🚀

Matteo Santoro Dev — Fri, 12 Jan 2024 10:22:21 +0000

Before the official announcement of the remaster, I began working on a native port for Disney's Gargoyles, an old game originally for Sega Genesis/Mega Drive.

Video Gameplay

Despite the ongoing work, I've made significant progress so far:

Recreated the Main Menu
Implemented a portion of the options menu
Worked on the introductory sequence (still undergoing refinements)

I've also commenced the development of the first level, incorporating animations and movements.

Excitement for this project is high, and I can't wait to share further updates. You can track the development progress on the dedicated website I've created: https://interactive.matteosantoro.dev/gargoyles-remaster/.
Stay tuned!

ColorPicker: An Interactive Tool for Developers and Designers

Matteo Santoro Dev — Thu, 11 Jan 2024 11:18:07 +0000

Hello dev.to community! Today, I'm excited to introduce my latest project developed in my free time using VUE JS and Bulma. It's called ColorPicker, a versatile web application that not only allows developers but also graphic designers and those in the digital printing world to explore a wide range of colors. Additionally, ColorPicker provides the ability to extract their code in various formats.

Visit [https://color-picker-vue-bulma.vercel.app/]

Key Features:

Color Exploration: With ColorPicker, you can navigate through a vast color palette to find the perfect shade for your project.

Code in Various Formats: Once you've found the desired color, you can extract its code in common formats such as HEX, RGB, HSL, and many more.

Intuitive Interface: The user interface is carefully designed to ensure a smooth and intuitive experience. Choose your color with ease and extract the code effortlessly.

Tool for Developers and Designers: Whether you're a web developer working on a frontend project or a graphic designer or digital printing professional, ColorPicker is designed to cater to your color needs.

Important Note:

Please be aware that as ColorPicker was developed during my free time, the English language version is not currently available. However, I want to assure you that English language support will be implemented in future updates.
How to Use ColorPicker:

Explore the color palette and select your favorite.
Choose the desired code format (HEX, RGB, HSL, etc.).
Copy the code and paste it directly into your project.

Future Developments:

I'm continuing to work on ColorPicker to introduce new features and enhance the overall experience. If you have suggestions or feedback, feel free to share them in the comments section!

Thank you for taking the time to explore ColorPicker. I hope it becomes a valuable tool in your web development and design toolbox. Happy coding and designing! 👨‍💻🎨

🔐 Introducing My Secure Password Generator App VUE JS + Bulma

Matteo Santoro Dev — Thu, 11 Jan 2024 10:03:04 +0000

Hello everyone on dev.to! I'm excited to introduce my latest creation: an app for generating secure passwords!

Technologies Used:

Vue JS: For a smooth and responsive user experience.
Bulma: For a clean and modern design.

Key Features:

Secure Password Generation: Get robust and secure passwords with just one click.
No Saving: Your security is my priority! The app never saves the generated passwords.

Currently, the app is available only in Italian, but I'm working on implementing English language support. In the meantime, I've developed this app in my free time, aiming to make it as intuitive as possible.

I hope you find it useful! Let me know what you think and if you have any suggestions for improvement. Thank you so much for your support! 🚀✨

https://generatore-password-pci.vercel.app/

My new GameBoy style portfolio

Matteo Santoro Dev — Wed, 10 Jan 2024 09:15:23 +0000

With great satisfaction, I am pleased to announce the launch of the first public version of my web portfolio, to which I have dedicated a lot of effort.

I decided to highlight my deep passion for video games, especially retro gaming, drawing inspiration for the site's UI from the graphics of old 8-bit GameBoy games.

I was excited about the idea of making the site interactive with elements of "gamification," albeit in a simple form at the moment. For example, if you visit the site from a computer, you can move the small sprite that represents me using the arrow keys.

In the top right, you will notice an icon that opens the settings menu, where you can modify the color palette and mute or reactivate sounds.

I have added English language support, so the site will automatically be displayed in English on systems and browsers different from Italian.

The site is not perfect yet, and I will continue to add small extras over time. However, I am pleased to share the link with you:

https://interactive.matteosantoro.dev/

I hope you appreciate my work, and I invite you to take a look at the site. I will be grateful for any feedback you would like to share with me.