Repository files navigation

A trending 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. Here's the builder just for you! ✨

Like this project?Leave a star! ⭐⭐⭐⭐⭐

ThisNayeon CSS Text Portrait below is created using CSS Text Portrait Builder. I use colored high-resolution image with lyrics fromNayeon's Santa Tell Me for the text. With the help of this builder it is responsive like crazy. 😅

• View more showcase here.

• Auto-fill screen with text.
• Responsive build output.
• Optimized builds.
• Easy to use, no-code/low-code friendly.
• Filter settings.
  • brightness
  • grayscale
  • invert
• Gitpod support.
• Generate build preview.
• Upload exported build.

Have suggestions in mind? Let me know!

The complete documentation can be found here:

• CSS Text Portrait Builder Tutorial (Tagalog)

Let's get started with the instant setup and build. Proceed to the requirements below.

• AGitHub Account.
• AGitpod Account. (sign up with GitHub)
• High resolution image in JPG/JPEG format. (we don't need PNG/GIF)

Meet the requirements? Click the Gitpod button below to get started!

1. Rename your image intobg.jpg and make sure it is in JPG/JPEG format.
2. Navigate tosrc/img and upload your image, just replace the existing image.
3. Next, openconfig.json file by just clicking it, an editor will open.
4. Edit the contents ofconfig.json file to match your needs.
   • For the objectname, this is the name of your portrait, it can be a name of your subject.
   • For the objecttext, this is the text you want to see in the portrait. It can be a lyrics, a passage from a book, or a sweet message to your subject or loved one.
5. Navigate tosrc/scss and open the file_vars.scss to edit the settings.
6. Lastly, look in the command-line interface and hover your mouse to thehttps://localhost:1234 and pressctrl +left click to open it to a new tab. You'll see your builds in real-time.

For the complete documentation please visithttps://docs.warengonzaga.com/css-text-portrait-builder. 😎

To learn more about hosting your builds check out thecommunity discussion.

Contributions are welcome, create a pull request to this repo and I will review your code. Please consider to submit your pull request to thedev branch. Thank you!

Read the project'scontributing guide for more info.

For any questions, suggestions, ideas, or simply you want to share your experience in using this project, feel free to share and discuss it to thecommunity!

If you're facing a problem in using CSS Text Portrait Builder pleasecheck the community FAQs first, if your issue is a potential bug I would suggest tocreate an issue here. I'm here to help you! 😇

Like this project?Leave a star! ⭐⭐⭐⭐⭐

Want to support my work and get some perks?Become a sponsor! 💖

Or, you just love what I do?Buy me a coffee! ☕

Recognized my open-source contributions?Nominate me as GitHub Star! 💫

Read the project'scode of conduct.

This project is licensed underThe MIT License.

This project is created byWaren Gonzaga, with the help of awesomecontributors.

💻 with ❤️ byWaren Gonzaga andHim 🙏