DEV Community: Wantu

Introducing the ForemCards Ideia

Wantu — Sun, 31 Aug 2025 23:16:58 +0000

Sometimes, while browsing subforems, sometimes i wondered if a particular author had written a post there. Then, i notice to that to verify this I would need to try access the author profile for this especific subforem. If the author haven't no post, the sit was redirected to the dev.to profile.

Introducing the ForemCards Ideia

I thought that i could have a webpage to show which ones subforems i wrote some contribution, whether it be a post or a comment. So, i decide made that like a card of Top Trumps, and make it fun with the gamification.

I decide to made a fully clickable, eye‑catching SVG, ready to a git repositorio or social network. You can share your profile and maybe play with that. Perhaps this will encourage you to contribute more to the Forem community.

See a example:

See the SVG, fully clickable, version on this link.

Make Your Own ForemCard

You can create a ForemCard to your profile in this website.

Final Thougths

The main limitation is, for each contribution or profile modification that you want to show in your ForemCard, you shold to generate a fresh one. It would be far more convenient if the Forem API provide the way to automatate this processe. If you know how made that, comment please.

If you have sugestions or considerations let me know.
Thanks for reading!

#WeCoded Landing Page

Wantu — Sun, 23 Mar 2025 23:31:44 +0000

This is a submission for the WeCoded Challenge: Celebrate in Code

My WeCoded Landing Page

I've build a very simple landing page, with a project introduce, list of posts (using the DEV API) and ways to get involved in #wecoded. You can filter the posts by tags or languages. The tags count help to check out the vibe of the movement.

The color scheme is of the DEV webpage plus the palette of #wecoded suggested in the challenge post.

The main idea is that the lading page can be add in the DEV websit ewithout be in conflit with the currently design.

Demo

Live Demo

Site

Repo

codeberg

Screenshots

How I Built It

I've used pure HTML, CSS and JS. No frameworks, which made the code lighter. For the same reason, i've preferred to use a gradient background instead the image background.

The pictures were made by Google Gemini.

I'd love to hear any feedback or suggestions you might have. Thank to read!

🖖

Glam Up My Markup: Winter Solstice

Wantu — Sun, 15 Dec 2024 21:31:08 +0000

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

I've used the original HTML to create an interactive page where each topic is showing individually like a single page for a newspaper.

Inspiration

The content of the text provided reminded me of those that appear in school newspapers. With that in mind I decided to made the page in newspaper format. I set a serif font, put a paper texture in background and split the content in pages, showing each one while the user navigate from the main menu. Finally, I included some images (all licensed under creative commons) to illustrate what was being said.

Features

100% Responsive;
Dark mode;
Hight contrast text;
Dynamic content.

Demo

Screenshots

Example page

Dark mode

Mobile example

Journey

I've used pure CSS and JS. No frameworks, which made the code lighter.

For me, the most dificult challenge was not change the html file. This push me to learn a buch of things to manipulate the DOM.

License

The content are under a creative commons by-nc-sa 4.0 license.

Conclusion

I hope this content be useful for you. For me certainly was... pratice always wellcome.

I'd love to hear any feedback or suggestions you might have. Thank to read!

🖖

PicQuote

Wantu — Thu, 05 Dec 2024 17:44:05 +0000

While working on a blog system, specifically the share buttons, i realized something interesting: there are no share buttons for Instagram, TikTok, or Snapchat. The reason is pretty clear – these platforms are primarily designed for sharing images and videos, not text. However, I thought there might be a simple solution to this.

People often take screenshots of text content to share it on these image/video-focused social networks. So, I came up with an idea to create a system that generates images, similar to a screenshot, specifically designed for sharing on these platforms.
The concept is straightforward: users select a piece of text they like, and the blog provides a card featuring the quote, author, and post URL. I call it PicQuote (picture + quote). There are various templates to choose from, and users can customize colors and font sizes for better presentation.

You can try out the system on my personal blog, for example, in this post where I introduce PicQuote (written in Portuguese).

I'd love to hear any feedback or suggestions you might have.
Would you be interested in a WordPress plugin for PicQuote? Would you like to collaborate on creating it? Let me know!

🖖

DEV Community: Wantu

Introducing the ForemCards Ideia

Introducing the ForemCards Ideia

Make Your Own ForemCard

Final Thougths

#WeCoded Landing Page

My WeCoded Landing Page

Demo

Live Demo

Repo

Screenshots

How I Built It

Glam Up My Markup: Winter Solstice

What I Built

Inspiration

Features

Demo

Links

Screenshots

Journey

License

Conclusion

PicQuote