Search for a command to run...
You'll learn how to use CSS text portrait builder.
A Filipino self-taught software engineer, open-source maintainer, cybersecurity researcher, tech community builder, Web3 enthusiast, and technopreneur from the Philippines. 💻💖☕
Thank you! ✨
Thanks! Really appreciate my first blog in Hashnode has been featured. Which is one of my goals this year! 🚀
You'll learn how to set up thirdweb Engine instantly on your local machine.
Learn how to deploy instantly your self-hosted thirdweb Engine on Railway in less than minutes.
You'll learn how to quickly set up a Buy Me a Coffee button for your open source project on GitHub.
Learn how to recover the ownership of your thirdweb pre-built smart contract if your admin wallet address has been compromised.
Learn how to deploy Next.js app or any static site generator to GitHub pages with new GitHub actions.
A CSS text portrait is one of the sweetest gifts for your loved one as a programmer or developer. You can add your personal message to it or just use lyrics from a song to show your love. I made an example below for the context of this tech blog.
This is my girlfriend Emily, and I use lyrics from Beautiful in White by Shane Filan.
It is easy to create your own CSS text portrait from scratch, but how about others willing to create their own but have no knowledge in coding? That's where my builder comes for! 👊
Let's create your own CSS text portrait in less than 3 minutes using my builder!
The CSS text portrait builder is a popular pure CSS text portrait builder for your loved ones. You don't need to waste your time just to create it from scratch and spend time working on its CSS sorcery.
I created this builder for the reason of adding space for freedom. That's why I created a builder instead of a plain web application or a drag and drop generator. I know it is more convenient but it is more fun if you allow yourself to get your hands dirty while building a text portrait specifically for your loved ones.
GitHub: github.com/warengonzaga/css-text-portrait-builder
To get started, all you have to do is to go to the official GitHub repository.
Make sure you meet the following requirements. 👌
Now, here's the fun part. We are going to use Gitpod as our cloud-based development environment so that it can eliminate inconsistency in our building process due to differences in the operating system we are using. Why not use the same system under Gitpod? 😁
Open the builder using the link below.
gitpod.io/#github.com/warengonzaga/css-text-portrait-builder
A new Gitpod workspace will be created. Now proceed to the build steps below.
bg.jpg and make sure it is in JPG/JPEG format.src/img and upload your image, just replace the existing image.config.json file by just clicking it, an editor will open.config.json file to match your needs. name, this is the name of your portrait, it can be the name of your subject.text, this is the text you want to see in the portrait. It can be lyrics, a passage from a book, or a sweet message to your subject or loved one.src/scss and open the file _vars.scss to edit the settings.https://localhost:1234 and press ctrl + left click to open it to a new tab. You'll see your builds in real-time.You can customize the output of the build by editing the src/scss/_vars.scss file.
This is the default configuration for the colored version.
$brigthness: 1;
$grayscale: 0;
$invert: 0;
If you want to use the classic version of text portrait then use the following configuration.
$brigthness: 0.8;
$grayscale: 1;
$invert: 0;
Then these are the variables inside the _vars.scss file.
/**
* builder settings
*/
$subject-image: url('../img/bg.jpg'); // image to potrait
$black: #222; // background color
$regular: 12px; // font size
/**
* image filter settings
* defaults: brightness = 1, grayscale = 0, invert = 0 (colored result)
* classic: brightness = 0.8, grayscale = 1, invert = 0 (black and white result)
*/
$brigthness: 1;
$grayscale: 0;
$invert: 0; // it will convert the color of the image
It is always up to you what you want with your builds. Every time you made changes to the code it will automatically update and save your changes.
To learn more about the builder or you just want to showcase your builds then you are welcome to hop in on our official GitHub discussions.
I want to share this build with one of the builders in the community! 🥰
I featured this build since it is very unique, the author of this portrait uses a special character to achieve this meme look.
Alright, looks like that's fast enough to create your own CSS text portrait using my builder. The builder is currently under development and I will add more features sooner! I created this project in just 4 hours including the publishing of the project. I will leave some useful links below for you to take a look at and learn more about the project.
Official Documentation: docs.warengonzaga.com/css-text-portrait-builder
GitHub Repository: github.com/warengonzaga/css-text-portrait-builder
📢 Nominate me (@warengonzaga) as a GitHub Star. If you appreciate my hard work, passion, and dedication to open source projects like this.
Cheers! 🚀👌 See you on my next blog...