warengonzaga / css-text-portrait-builder Goto Github PK

View Code? Open in Web Editor NEW

342.0 6.0 77.0 6.01 MB

A popular pure CSS text portrait builder for your loved ones. 🥰

Home Page: https://css-text-portrait-builder.vercel.app

License: GNU General Public License v3.0

HTML 9.77% JavaScript 70.62% SCSS 19.61%

css text portrait builder trending cssart generator no-code low-code hacktoberfest

css-text-portrait-builder's Introduction

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

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

😎 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)

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.
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 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.

⚙️ Project Activity

🎯 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

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

📋 Code of Conduct

Read the project's code of conduct.

📃 License

This project is licensed under The MIT License.

📝 Author

This project is created by Waren Gonzaga, with the help of awesome contributors.

💻 with ❤️ by Waren Gonzaga and Him 🙏

css-text-portrait-builder's People

Contributors

Stargazers

Watchers

Forkers

mkdirlove guchannn gjscl ujude25 quincydaryl66 jolores dreysmbt anton14xd agentpx jjtitusjj ramj14 cossettealexis tovicgit muixcuel kaido189 warrenqt emmanlazzy first27lady zecs09 shennboku siegh02 jamblebeew jersoncarin-dev deathstar427 epromite yumi20 mlnskii-dot-com rendydendimara xhierra jnskiee decantyme deawx tiamat-tech morpheus1537 eunit99 devs-tools-userfuls mikhail-panzo duraaaaaaan capaio yashen14 nourhanhamada 3ul4 nhatminhnagoya mielbooi dzypherit visalyputra githubbuildjaq jaronavales abc0923 quangnx99 kienvu41 ankurdaharwal gonzalezulises alejouribe aeromn joanpi themayurahir matiasmunozs terry1921 keshavashiya thecodemasterchief andriitech swaranonymous kuntal-c kiteeel xtechnology-tr dexit nshxzh geekfusion msixgod cheney1941 shangkouyou 322326 bicycle-fish 98king marco-bot-18 nonomal

css-text-portrait-builder's Issues

replace license to GPL-3.0

The reason is that my project is not a library or framework. It is a builder a TOOL which means not fit for MIT license. I'm gonna change this to GPL-3.0 to match the purpose of the project. 👌

command failed with exit code 1

I am getting this issue when running the yarn command.

Thankss.

shareable previews

As mentioned here: #34 (comment)

This is a separate feature request for enabling shareable previews for what you build with the builder.
Currently, have no idea what to use and how to do this... maybe you have an idea how to deliver it. Let me know! 😅

build issues

Discussed in #4

^{Originally posted by Chaw11 November 20, 2021}
Hello whenever I try to do yarn install in cmd this is the message that im getting.

After doing tests, this is a confirmed issue when building the project locally. 😅
Working on a hot fix right now. ☕😁

yarn have problem

'yarn' is not recognized as an internal or external command,
operable program or batch file.

resize settings for image

This is a good question (#12) and an addition to the project. Ability to control the image in the config file without editing the actual code inside. 👊😇

yarn is not recognized command

Hello whenever I try to do yarn install in cmd this is the message that im getting.

sharebale exports

As mentioned here: #34 (comment)

We can use https://file.io API to temporarily upload builds and generate a short link where a user can share it directly.

add CI/CD workflow

It is nice to have a reliable CI/CD for the project. If you can work on it then let me know so I can assign it to you!

shareable links

A user suggested it to me to add a way to share their builds with a shareable link.
For me, it's a brilliant idea, and considering adding this to my roadmap. 🥰

export builds

It is nice to have an output package that can be shared with your friends.

dynamically update max chars

Is your feature request related to a problem? Please describe.
Max characters needed to fill the screen had to be calculated through trial and error. This also had to be recalculated when changing font families or sizes, for example. On orientation/page zoom/window resize, recalculate. More on #43 (comment).

Describe the solution you'd like
There should be a function to dynamically calculate maxChar based on at least these contexts: font-family, font-size, and screen dimensions/magnification. Something like this:

I worked some initial code and set it to 50% fill to better see it dynamically update. While it does not perfectly fill at 50%, at 100% it should eliminate any whitespaces and effectively fill the screen.

Might PR this if everyone also agrees or wants this feature.

migrate to modern yarn

The migration process is perfectly documented here: https://yarnpkg.com/getting-started/migration

Cannot find package.json file

add filters to the image

Originally, planning to add an image filter so you can instantly filter your image without actually editing it.

Filters to add:

grayscale
brightness
invert

Animation for Text
Animation for Image

official documentation

I'm currently working on documentation so please be patient at the moment.
You can check the readme steps for now. If you need further help please use our Q&A section. 🙏😇