{"id":13402305,"url":"https://github.com/warengonzaga/css-text-portrait-builder","last_synced_at":"2025-04-05T17:09:48.817Z","repository":{"id":45583419,"uuid":"429654999","full_name":"warengonzaga/css-text-portrait-builder","owner":"warengonzaga","description":"A popular pure CSS text portrait builder for your loved ones. 🥰","archived":false,"fork":false,"pushed_at":"2024-04-07T16:41:05.000Z","size":6152,"stargazers_count":341,"open_issues_count":0,"forks_count":77,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-04-14T00:38:06.083Z","etag":null,"topics":["builder","css","cssart","generator","hacktoberfest","low-code","no-code","portrait","text","trending"],"latest_commit_sha":null,"homepage":"https://css-text-portrait-builder.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/warengonzaga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":".github/funding.yml","license":"license","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"security.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"warengonzaga","buy_me_a_coffee":"warengonzaga"}},"created_at":"2021-11-19T03:14:30.000Z","updated_at":"2024-04-15T07:15:27.397Z","dependencies_parsed_at":"2024-04-15T07:15:21.995Z","dependency_job_id":"0e97c175-565a-4722-9c32-56dd3232d69c","html_url":"https://github.com/warengonzaga/css-text-portrait-builder","commit_stats":{"total_commits":60,"total_committers":3,"mean_commits":20.0,"dds":"0.31666666666666665","last_synced_commit":"991ba84b32013e20d99202d76d94677aa27eb4bc"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Fcss-text-portrait-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Fcss-text-portrait-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Fcss-text-portrait-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warengonzaga%2Fcss-text-portrait-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/warengonzaga","download_url":"https://codeload.github.com/warengonzaga/css-text-portrait-builder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369954,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","css","cssart","generator","hacktoberfest","low-code","no-code","portrait","text","trending"],"created_at":"2024-07-30T19:01:14.253Z","updated_at":"2025-04-05T17:09:48.780Z","avatar_url":"https://github.com/warengonzaga.png","language":"JavaScript","readme":"# CSS Text Portrait Builder [![author/maintainer](https://img.shields.io/badge/by-Waren%20Gonzaga-016eea.svg?logo=github\u0026labelColor=181717\u0026longCache=true\u0026style=flat-square)](https://warengonzaga.com) [![nominate](https://img.shields.io/badge/nominate-%20@warengonzaga%20as%20GitHub%20Star-yellow.svg?logo=github\u0026labelColor=181717\u0026longCache=true\u0026style=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)\n\n[![made in](https://img.shields.io/badge/project%20for-Open%20Source%20Software%20PH-0060a0.svg?logo=github\u0026longCache=true\u0026labelColor=181717\u0026style=flat-square)](https://github.com/ossphilippines) [![sponsors](https://img.shields.io/badge/sponsor-%E2%9D%A4-%23db61a2.svg?\u0026logo=github\u0026logoColor=white\u0026labelColor=181717\u0026style=flat-square)](https://github.com/sponsors/warengonzaga) [![release](https://img.shields.io/github/release/warengonzaga/css-text-portrait-builder.svg?logo=github\u0026labelColor=181717\u0026color=green\u0026style=flat-square)](https://github.com/warengonzaga/css-text-portrait-builder/releases) [![star](https://img.shields.io/github/stars/warengonzaga/css-text-portrait-builder.svg?\u0026logo=github\u0026labelColor=181717\u0026color=yellow\u0026style=flat-square)](https://github.com/warengonzaga/css-text-portrait-builder/stargazers) [![license](https://img.shields.io/github/license/warengonzaga/css-text-portrait-builder.svg?\u0026logo=github\u0026labelColor=181717\u0026style=flat-square)](https://github.com/warengonzaga/css-text-portrait-builder/blob/main/license)\n\n[![repo banner](.github/img/repo_banner.png)](https://github.com/warengonzaga/css-text-portrait-builder)\n\nA 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! ✨\n\nLike this project? **Leave a star**! ⭐⭐⭐⭐⭐\n\n## 😎 Demo\n\nThis **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. 😅\n\n[![demo image](./.github/img/demo.gif)](https://css-text-portrait-builder.vercel.app)\n\n### ✨Community Showcase\n\n- [View more showcase here](https://github.com/WarenGonzaga/css-text-portrait-builder/discussions/categories/showcase).\n\n## ⚡ Features\n\n- Auto-fill screen with text.\n- Responsive build output.\n- Optimized builds.\n- Easy to use, no-code/low-code friendly.\n- Filter settings.\n  - brightness\n  - grayscale\n  - invert\n- Gitpod support.\n- Generate build preview.\n- Upload exported build.\n\nHave suggestions in mind? Let me know!\n\n## 📖 Documentation\n\nThe complete documentation can be found here:\n\n[![docs](https://img.shields.io/badge/Docs-docs.warengonzaga.com/css--text--portrait--builder-blue.svg?longCache=true\u0026style=for-the-badge)](https://docs.warengonzaga.com/css-text-portrait-builder)\n\n### 🎓 Tutorial\n\n- **[CSS Text Portrait Builder Tutorial (Tagalog)](https://youtu.be/K6FbjwvVq_g)**\n\n## 🛠️ Instant Setup\n\nLet's get started with the instant setup and build. Proceed to the requirements below.\n\n### 📋 Requirements\n\n- A [GitHub Account](https://github.com/signup).\n- A [Gitpod Account](https://gitpod.io). (sign up with GitHub)\n- High resolution image in JPG/JPEG format. (we don't need PNG/GIF)\n\nMeet the requirements? Click the Gitpod button below to get started!\n\n[![open in gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#github.com/warengonzaga/css-text-portrait-builder)\n\n## 🔨 Build Steps (Gitpod)\n\n1. Rename your image into `bg.jpg` and make sure it is in JPG/JPEG format.\n2. Navigate to `src/img` and upload your image, just replace the existing image.\n3. Next, open `config.json` file by just clicking it, an editor will open.\n4. Edit the contents of `config.json` file to match your needs.\n   - For the object `name`, this is the name of your portrait, it can be a name of your subject.\n   - 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.\n5. Navigate to `src/scss` and open the file `_vars.scss` to edit the settings.\n6. 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.\n\n\u003e For the complete documentation please visit \u003chttps://docs.warengonzaga.com/css-text-portrait-builder\u003e. 😎\n\n## 📡 Hosting\n\nTo learn more about hosting your builds check out the [community discussion](https://github.com/warengonzaga/css-text-portrait-builder/discussions).\n\n## ⚙️ Project Activity\n\n![activity](https://repobeats.axiom.co/api/embed/f6f3a65b2993ccc86b8bf66993f61bf2f18105ee.svg \"Repobeats analytics image\")\n\n## 🎯 Contributing\n\nContributions 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!\n\nRead the project's [contributing guide](./CONTRIBUTING.md) for more info.\n\n## 💬 Discussions\n\nFor 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)!\n\n## 🐛 Issues\n\nIf 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! 😇\n\n## 🙏 Sponsor\n\nLike this project? **Leave a star**! ⭐⭐⭐⭐⭐\n\nWant to support my work and get some perks? [Become a sponsor](https://github.com/sponsors/warengonzaga)! 💖\n\nOr, you just love what I do? [Buy me a coffee](https://buymeacoffee.com/warengonzaga)! ☕\n\nRecognized my open-source contributions? [Nominate me](https://stars.github.com/nominate) as GitHub Star! 💫\n\n## 📋 Code of Conduct\n\nRead the project's [code of conduct](./code_of_conduct.md).\n\n## 📃 License\n\nThis project is licensed under [The MIT License](https://opensource.org/licenses/MIT).\n\n## 📝 Author\n\nThis 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).\n\n[![contributors](https://contrib.rocks/image?repo=warengonzaga/css-text-portrait-builder)](https://github.com/warengonzaga/css-text-portait-builder/graphs/contributors)\n\n---\n\n💻 with ❤️ by [Waren Gonzaga](https://warengonzaga.com) and [Him](https://www.youtube.com/watch?v=HHrxS4diLew\u0026t=44s) 🙏\n","funding_links":["https://github.com/sponsors/warengonzaga","https://buymeacoffee.com/warengonzaga","https://github.com/sponsors/warengonzaga)!","https://buymeacoffee.com/warengonzaga)!"],"categories":["CSS Text Portrait Builder","JavaScript","Open Source"],"sub_categories":["Low Code"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarengonzaga%2Fcss-text-portrait-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarengonzaga%2Fcss-text-portrait-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarengonzaga%2Fcss-text-portrait-builder/lists"}