CSS Text Portrait Builder
A trending pure CSS text portrait builder for your loved ones.
๐ 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.
โจ Community Showcase
- your build url 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.
Have suggestions in mind? Let me know!
๐ Documentation
The complete documentation can be found here:
๐ Tutorial
๐ ๏ธ 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)
- Rename your image into
bg.jpg
and make sure it is in JPG/JPEG format. - Navigate to
src/img
and upload your image, just replace the existing image. - Next, open
config.json
file by just clicking it, an editor will open. - 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.
- For the object
- Navigate to
src/scss
and open the file_vars.scss
to edit the settings. - Lastly, look in the command-line interface and hover your mouse to the
https://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 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!
๐ Sponsors and Supporters
Love what I do? Send me some coffees!
โ โ โ Can't send coffees?
๐ฅ Nominate me for a GitHub Star instead! Your coffee donation and support will help me to continue working on open-source projects like this.๐ ๐
๐ Community
Join to my growing tech community and get the latest updates!
๐ 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.