CSS Text Portrait Builder

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! ✨

😎 Demo

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

✨Community Showcase

• View more showcase here.

⚡ Features

• 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!

📖 Documentation

The complete documentation can be found here:

🎓 Tutorial

• CSS Text Portrait Builder Tutorial (Tagalog)

🛠️ Instant Setup

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

📋 Requirements

• A GitHub Account.
• A Gitpod 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!

🔨 Build Steps (Gitpod)

1. Rename your image into bg.jpg and make sure it is in JPG/JPEG format.
2. Navigate to src/img and upload your image, just replace the existing image.
3. Next, open config.json file by just clicking it, an editor will open.
4. Edit the contents of config.json file to match your needs.
   • For the object name, this is the name of your portrait, it can be a name of your subject.
   • For the object text, 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 to src/scss and open the file _vars.scss to edit the settings.
6. Lastly, look in the command-line interface and hover your mouse to the https://localhost:1234 and press ctrl + left click to open it to a new tab. You'll see your builds in real-time.

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

📡 Hosting

To learn more about hosting your builds check out the community discussion.

🎯 Contributing

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

Read the project's contributing guide for more info.

💬 Discussions

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 the community!

🐛 Issues

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

🍀 Sponsor

Love what I do? Send me some love or coffee!? 💖☕

Can't send love or coffees? 😥 Nominate me for a GitHub Star instead!

Note: Your support means a lot to me as it allows me to dedicate my time and energy to create and maintain open-source projects that benefits the community. Thank you for supporting my mission to make technology better, accessible and inclusive for everyone. 🙏😇

📋 Code of Conduct

Read the project's code of conduct.

📃 License

CSS Text Portrait Builder is licensed under The MIT License.

📝 Author

CSS Text Portrait Builder is created by Waren Gonzaga, with the help of awesome contributors.

💻💖☕ by Waren Gonzaga | He is Awesome 🙏