Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/warengonzaga/css-text-portrait-builder

A popular pure CSS text portrait builder for your loved ones. 🥰
https://github.com/warengonzaga/css-text-portrait-builder

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

Last synced: 20 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# CSS Text Portrait Builder [![author/maintainer](https://img.shields.io/badge/by-Waren%20Gonzaga-016eea.svg?logo=github&labelColor=181717&longCache=true&style=flat-square)](https://warengonzaga.com) [![nominate](https://img.shields.io/badge/nominate-%20@warengonzaga%20as%20GitHub%20Star-yellow.svg?logo=github&labelColor=181717&longCache=true&style=flat-square)](https://stars.github.com/nominate) [![Mentioned in Awesome CSS Text Portrait](https://awesome.re/mentioned-badge-flat.svg)](https://github.com/warengonzaga/awesome-css-text-portrait)



[![made in](https://img.shields.io/badge/project%20for-Open%20Source%20Software%20PH-0060a0.svg?logo=github&longCache=true&labelColor=181717&style=flat-square)](https://github.com/ossphilippines) [![sponsors](https://img.shields.io/badge/sponsor-%E2%9D%A4-%23db61a2.svg?&logo=github&logoColor=white&labelColor=181717&style=flat-square)](https://github.com/sponsors/warengonzaga) [![release](https://img.shields.io/github/release/warengonzaga/css-text-portrait-builder.svg?logo=github&labelColor=181717&color=green&style=flat-square)](https://github.com/warengonzaga/css-text-portrait-builder/releases) [![star](https://img.shields.io/github/stars/warengonzaga/css-text-portrait-builder.svg?&logo=github&labelColor=181717&color=yellow&style=flat-square)](https://github.com/warengonzaga/css-text-portrait-builder/stargazers) [![license](https://img.shields.io/github/license/warengonzaga/css-text-portrait-builder.svg?&logo=github&labelColor=181717&style=flat-square)](https://github.com/warengonzaga/css-text-portrait-builder/blob/main/license)



[![repo banner](.github/img/repo_banner.png)](https://github.com/warengonzaga/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](https://www.youtube.com/watch?v=XO9GiPOLd3I) for the text. With the help of this builder it is responsive like crazy. 😅



[![demo image](./.github/img/demo.gif)](https://css-text-portrait-builder.vercel.app)



### ✨Community Showcase



- [View more showcase here](https://github.com/WarenGonzaga/css-text-portrait-builder/discussions/categories/showcase).



## ⚡ 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:



[![docs](https://img.shields.io/badge/Docs-docs.warengonzaga.com/css--text--portrait--builder-blue.svg?longCache=true&style=for-the-badge)](https://docs.warengonzaga.com/css-text-portrait-builder)



### 🎓 Tutorial



- **[CSS Text Portrait Builder Tutorial (Tagalog)](https://youtu.be/K6FbjwvVq_g)**



## 🛠️ Instant Setup



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



### 📋 Requirements



- A [GitHub Account](https://github.com/signup).

- A [Gitpod Account](https://gitpod.io). (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!



[![open in gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#github.com/warengonzaga/css-text-portrait-builder)



## 🔨 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 . 😎



## 📡 Hosting



To learn more about hosting your builds check out the [community discussion](https://github.com/warengonzaga/css-text-portrait-builder/discussions).



## ⚙️ Project Activity



![activity](https://repobeats.axiom.co/api/embed/f6f3a65b2993ccc86b8bf66993f61bf2f18105ee.svg "Repobeats analytics image")



## 🎯 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](./CONTRIBUTING.md) 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](https://github.com/warengonzaga/css-text-portrait-builder/discussions)!



## 🐛 Issues



If you're facing a problem in using CSS Text Portrait Builder please [check the community FAQs first](https://github.com/WarenGonzaga/css-text-portrait-builder/discussions?discussions_q=label%3Afaq), if your issue is a potential bug I would suggest to [create an issue here](https://github.com/warengonzaga/css-text-portrait-builder/issues/new). 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](https://github.com/sponsors/warengonzaga)! 💖



Or, you just love what I do? [Buy me a coffee](https://buymeacoffee.com/warengonzaga)! ☕



Recognized my open-source contributions? [Nominate me](https://stars.github.com/nominate) as GitHub Star! 💫



## 📋 Code of Conduct



Read the project's [code of conduct](./code_of_conduct.md).



## 📃 License



This project is licensed under [The MIT License](https://opensource.org/licenses/MIT).



## 📝 Author



This project is created by **[Waren Gonzaga](https://github.com/warengonzaga)**, with the help of awesome [contributors](https://github.com/warengonzaga/css-text-portrait-builder/graphs/contributors).



[![contributors](https://contrib.rocks/image?repo=warengonzaga/css-text-portrait-builder)](https://github.com/warengonzaga/css-text-portait-builder/graphs/contributors)



---



💻 with ❤️ by [Waren Gonzaga](https://warengonzaga.com) and [Him](https://www.youtube.com/watch?v=HHrxS4diLew&t=44s) 🙏