{"id":19543276,"url":"https://github.com/codewithalamin/article-preview-component","last_synced_at":"2026-05-11T12:42:30.445Z","repository":{"id":154934009,"uuid":"624619897","full_name":"CodeWithAlamin/Article-preview-component","owner":"CodeWithAlamin","description":"This is my solution for the Article Preview Component challenge on Frontend Mentor.","archived":false,"fork":false,"pushed_at":"2024-10-30T12:04:41.000Z","size":1034,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T21:36:28.036Z","etag":null,"topics":["codepapa360","codewithalamin","css","dark-mode","frontend-development","html","javascript","responsive-design","ui-design","ux-design","web-accessibility","web-development"],"latest_commit_sha":null,"homepage":"https://article-preview-component-alamin.netlify.app","language":"HTML","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/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"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":"2023-04-06T21:59:31.000Z","updated_at":"2024-10-30T12:04:45.000Z","dependencies_parsed_at":"2025-01-08T19:11:07.174Z","dependency_job_id":"ada0cc99-55ab-429b-ac35-ee69dccfcf2d","html_url":"https://github.com/CodeWithAlamin/Article-preview-component","commit_stats":null,"previous_names":["codewithalamin/article-preview-component","codepapa360/article-preview-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeWithAlamin/Article-preview-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FArticle-preview-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FArticle-preview-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FArticle-preview-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FArticle-preview-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Article-preview-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FArticle-preview-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32895619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["codepapa360","codewithalamin","css","dark-mode","frontend-development","html","javascript","responsive-design","ui-design","ux-design","web-accessibility","web-development"],"created_at":"2024-11-11T03:18:11.297Z","updated_at":"2026-05-11T12:42:30.428Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eArticle Preview Component\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://article-preview-component-alamin.netlify.app/\" target=\"_blank\"\u003e\n      🚀 Live Site\n    \u003c/a\u003e\n    |\n    \u003ca href=\"https://www.frontendmentor.io/solutions/responsive-article-preview-component-w-sass-and-dark-mode-lX-En3QJV6\" target=\"_blank\"\u003e\n      💡 Solution\n    \u003c/a\u003e\n  \u003c/h5\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    This is my solution for the Article Preview Component challenge on Frontend Mentor. Check out the live site!\u003c/p\u003e\n\u003c/div\u003e\n\n### Screenshot\n\n\u003ca align=\"center\" href=\"https://article-preview-component-alamin.netlify.app/\" target=\"_blank\"\u003e\n\n\u003cimg src=\"screenshots/Compared - Article preview component Frontend Mentor - Alamin.png\"/\u003e\n\u003c/a\u003e\n\n### The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the component depending on their device's screen size\n- See the social media share links when they click the share icon\n- **Bonus** Added dark mode toggle.\n\n#### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- CSS Grid\n- JavaScript\n- Mobile-first workflow\n- NPM\n\n## Installation\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Article-preview-component.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n- Run command:\n\n```sh\nnpm start\n```\n\n## Author\n\n\u003cb\u003e👤 Alamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Show your support\n\nGive a ⭐️ if you liked this project!\n\n## Acknowledgments\n\nI would like to express my gratitude to Frontend Mentor for providing this project idea and design. Their platform is an excellent resource for web developers looking to improve their skills.\n\n## License\n\nThis project is licensed under the [MIT](https://github.com/CodeWithAlamin/Article-preview-component/blob/main/LICENSE.md) license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Farticle-preview-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Farticle-preview-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Farticle-preview-component/lists"}