📢 Nominate (@WarenGonzaga) as GitHub Star. If you appreciate his hardwork and dedication to open source.
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! ✨
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.
- your build url here.
- Auto-fill screen with text.
- Responsive build output.
- Optimized builds.
- Easy to use, no-code friendly.
- Filter settings (will add).
Have suggestions? Let me know!
The complete documentation can be found here:
To build your own pure CSS text portrait, you need to meet the requirements below.
- NodeJS LTS version.
- Terminal/CMD/Bash installed or access.
- High resolution image in JPG format.
If you meet the requirements above then proceed to the steps below.
-
Rename your image to
bg.jpg(it should be in JPG, we don't need PNG lol). -
Place your image inside
src/img, just replace the existing image. -
Now, edit
config.jsoninsidesrcfolder. -
Replace the text object inside with your own text. It can be a lyrics, a message, or a passage from a book its up to you! (I prefer personal message if this is for your loved one.)
-
Open your terminal/cmd/bash and type:
yarn install
-
Once done, type:
yarn run build
-
Lastly, you need to serve your builds, type:
yarn run serve
A local server should open at port
1234 -
You're done! 🎉
Note: The output is not locally accessible. Meaning can't be viewed on your local machine without being served. I'm currently working on packaging the output after building.
To learn more about hosting your builds check out the community 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 the dev branch. Thank you!
Read the project's contributing 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 the community!
If you're facing a problem in using CSS Text Portrait Builder please let me know by creating an issue here. I'm here to help you!
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. 🙏😇
Join to my growing tech community and get the latest updates!
Read the project's code of conduct.
CSS Text Portrait Builder is licensed under The MIT License.
CSS Text Portrait Builder is created by Waren Gonzaga, with the help of awesome contributors.
💻 Made with 💖 and ☕ by Waren Gonzaga with YHWH 🙏 | Citizen of Heaven