{"id":13494442,"url":"https://github.com/Dun-sin/Code-Magic","last_synced_at":"2025-03-28T14:31:10.953Z","repository":{"id":42284349,"uuid":"510675928","full_name":"Dun-sin/Code-Magic","owner":"Dun-sin","description":"All in one styling tool for developers","archived":false,"fork":false,"pushed_at":"2024-09-11T10:12:40.000Z","size":1907,"stargazers_count":383,"open_issues_count":5,"forks_count":200,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-24T00:48:06.206Z","etag":null,"topics":["css","developer-tools","generator","hacktoberfest","html","open-source","styling-css","tools","typescript"],"latest_commit_sha":null,"homepage":"https://code-magic.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dun-sin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-05T09:47:44.000Z","updated_at":"2025-02-28T07:26:22.000Z","dependencies_parsed_at":"2024-01-16T09:02:36.738Z","dependency_job_id":"8847822f-67af-4b49-bf7d-bc2a11aef31d","html_url":"https://github.com/Dun-sin/Code-Magic","commit_stats":null,"previous_names":[],"tags_count":188,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dun-sin%2FCode-Magic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dun-sin%2FCode-Magic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dun-sin%2FCode-Magic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dun-sin%2FCode-Magic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dun-sin","download_url":"https://codeload.github.com/Dun-sin/Code-Magic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246045898,"owners_count":20714867,"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":["css","developer-tools","generator","hacktoberfest","html","open-source","styling-css","tools","typescript"],"created_at":"2024-07-31T19:01:25.096Z","updated_at":"2025-03-28T14:31:08.711Z","avatar_url":"https://github.com/Dun-sin.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv id=\"header\" align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/121221252/215760592-3b24d03b-53ed-4264-9cda-b4f052151513.png\"/\u003e\u003cbr\u003e\n    \u003c!-- \u003cp\u003e\u003cstrong\u003e\u003cem\u003e\"Tagline\"\u003c/em\u003e\u003c/strong\u003e\u003c/p\u003e\n     --\u003e\n  \u003ca href=\"https://gitpod.io/#https://github.com/Dun-sin/Code-Magic\"\u003e\n    \u003cimg src=\"https://gitpod.io/button/open-in-gitpod.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e \n\u003cbr\u003e\n\n\n### 🚀 About\n\nCode Magic is a website where you can get simple CSS tricks to make your application elegant with just few clicks.\n\n![code magic v2](https://github-production-user-asset-6210df.s3.amazonaws.com/78784850/268496391-eb41fa2f-0617-49e1-9035-c9ade068624d.gif)\n\n### 🧙‍♀️ Magic options available for you:\n\n- Pic Text - Convert images to CSS art. Just upload and get CSS art with just one click.\n- Gradient Text - Dual color gradient for your texts.\n- Gradient Border - Get dual color gradient with desired radius.\n- Gradient Background - Make your backgrounds stand out by applying gradient colors.\n- Animations\n  - Select one of the below options\n    \u003ctable\u003e\n      \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd align=\"Center\" width=\"25%\"\u003e\n            \u003cp\u003eSkew\u003c/p\u003e\n          \u003ctd\u003e\n          \u003ctd align=\"Center\" width=\"25%\"\u003e\n            \u003cp\u003eFade\u003c/p\u003e\n          \u003ctd\u003e\n          \u003ctd align=\"Center\" width=\"25%\"\u003e\n            \u003cp\u003eSpin\u003c/p\u003e\n          \u003ctd\u003e\n        \u003c/tr\u003e\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n  - Set duration and speed for the animations\n  - And boom\n- Box Shadow - Cast a shadow on your element.\n- Border Radius - Get desired border radius for your element.\n- Text Shadow - Create a cool shadow for your text.\n- Input Range - Style your range input type elements easily and quickly\n\n### ⚒️ Languages / Tools\n\n \u003ctable\u003e\n\t \u003ctbody\u003e\n  \u003ctr\u003e\n   \u003ctd align=\"Center\" width=\"25%\"\u003e \n \u003ca href=\"https://developer.mozilla.org/en-US/docs/Glossary/HTML5\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://cdn.svgporn.com/logos/html-5.svg\" width=\"36\" height=\"36\" alt=\"HTML\" /\u003e\u003c/a\u003e\n    \u003cbr\u003eHTML\n    \u003c/td\u003e   \n   \n   \u003ctd align=\"Center\" width=\"25%\"\u003e\n        \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://cdn.svgporn.com/logos/css-3.svg\" width=\"36\" height=\"36\" alt=\"CSS\" /\u003e\u003c/a\u003e\n\t\u003cbr\u003eCSS\n    \u003c/td\u003e \n  \u003ctd align=\"Center\" width=\"25%\"\u003e\n\t  \u003ca href=\"https://www.typescriptlang.org/\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://img.icons8.com/color/144/000000/typescript.png\" width=\"36\" height=\"36\" alt=\"Typescript\" /\u003e\u003c/a\u003e\n\t\u003cbr\u003eTypeScript\n    \u003c/td\u003e   \n\t  \u003c/tr\u003e\n\u003c/tbody\u003e\n  \u003c/table\u003e\n\t\n\u003cbr\u003e\n\n## 🧑🏾‍💻 Demo\n\nCheck out the website: [Code Magic](https://Code-Magic.vercel.app/)\n\n## 👇🏽 Prerequisites\n\nBefore installation, please make sure you have already installed the following tools:\n\n- [Git](https://git-scm.com/downloads)\n- [NodeJs](https://nodejs.org/en/download/)\n\n## 👌🏾 What you have to do to contribute\n\n- [Read the rules](https://github.com/Dun-sin/Code-Magic/blob/main/CONTRIBUTING.md#rules)\n- [Follow the installation Steps](#%EF%B8%8F-installation-steps)\n- [Follow the contributing Steps](#-after-making-a-change)\n\n## 🛠️ Installation Steps\n\n1. [Fork](https://github.com/Dun-sin/Code-Magic/fork) the project. Click on the \u003ca href=\"https://github.com/Dun-sin/Code-Magic/fork\"\u003e\u003cimg src=\"https://i.imgur.com/G4z1kEe.png\" height=\"15\" width=\"15\"\u003e\u003c/a\u003e icon in the top right to get started\n2. Clone the project, you can use the following command:\n\n```bash\ngit clone https://github.com/\u003cyour-github-username\u003e/Code-Magic\n```\n\n3. Navigate to the project directory\n\n```bash\ncd Code-Magic\n```\n\n4. Install dependencies with npm install\n\n```bash\nnpm install\n```\n\n```bash\nnpm install -g commitizen\n```\n\n5. Run the project\n\n```bash\nnpm run dev\n```\n\n## 🥂 After making a change\n\n1. Create a new branch\n\n```bash\ngit checkout -b YourBranchName\n```\n\n2. Add it to staging area\n\n\u003e NOTE: don't commit the package.json\n\n```bash\ngit add \u003cpath to the file you worked on\u003e\n```\n\n3. Commit your changes with\n\n```bash\ngit cz\n```\n\n4. Push your changes\n\n```bash\ngit push\n```\n\n## 👨‍👩‍👦 Community\n\nDon't forget to join the discord community - [Join us](https://discord.com/invite/ufcysW9q23)\n\n## 👩🏽‍💻 Contributing\n\n- Contributions make the open source community such an amazing place to learn, inspire, and create.\n- Any contributions you make are greatly appreciated.\n- Check out our [contribution guidelines](/CONTRIBUTING.md) for more information.\n\n## 🛡️ License\n\nCode-Magic is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 💪🏽 Thanks to all Contributors\n\nThanks a lot for spending your time helping Code-Magic grow. Thanks a lot! Keep rocking🍻\n\n[![Contributors](https://contrib.rocks/image?repo=Dun-sin/Code-Magic)](https://github.com/Dun-sin/Code-Magic/graphs/contributors)\n\n## 🙏🏽 Support\n\nThis project needs a star️ from you. Don't forget to leave a star✨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDun-sin%2FCode-Magic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDun-sin%2FCode-Magic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDun-sin%2FCode-Magic/lists"}