{"id":20294676,"url":"https://github.com/amrmabdelazeem/article-preview-component","last_synced_at":"2025-03-04T05:26:36.974Z","repository":{"id":167818343,"uuid":"639945937","full_name":"amrmabdelazeem/article-preview-component","owner":"amrmabdelazeem","description":"Article preview component","archived":false,"fork":false,"pushed_at":"2023-05-21T19:50:33.000Z","size":2178,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-14T09:41:03.823Z","etag":null,"topics":["conditional-statements","css-flexbox","css3","dom-manipulation","es6","gh-pages","html5","icons","javascript","mobile-first-workflow","reactjs"],"latest_commit_sha":null,"homepage":"https://amrmabdelazeem.github.io/article-preview-component/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amrmabdelazeem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-05-12T15:33:10.000Z","updated_at":"2023-05-21T09:25:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"60159c2b-4b9a-4c74-af99-d9422a9e3761","html_url":"https://github.com/amrmabdelazeem/article-preview-component","commit_stats":null,"previous_names":["amrmabdelazeem/article-preview-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amrmabdelazeem%2Farticle-preview-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amrmabdelazeem%2Farticle-preview-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amrmabdelazeem%2Farticle-preview-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amrmabdelazeem%2Farticle-preview-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amrmabdelazeem","download_url":"https://codeload.github.com/amrmabdelazeem/article-preview-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241789750,"owners_count":20020531,"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":["conditional-statements","css-flexbox","css3","dom-manipulation","es6","gh-pages","html5","icons","javascript","mobile-first-workflow","reactjs"],"created_at":"2024-11-14T15:30:21.447Z","updated_at":"2025-03-04T05:26:36.948Z","avatar_url":"https://github.com/amrmabdelazeem.png","language":"CSS","readme":"# Frontend Mentor - Article preview component solution\n\nThis is a solution to the [Article preview component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n\n\n## Overview\n\n![Design preview for the Article preview component coding challenge](./design/desktop-preview.jpg)\n\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\n### Screenshot\n\n![mobile-preview](public/screenshots/mobile-preview.png)\n![mobile-active](public/screenshots/mobile-active.png)\n![desktop-preview](public/screenshots/desktop-preview.png)\n![desktop-active](public/screenshots/desktop-active.png)\n\n### Links\n\n- Solution URL: [frontendmentor](https://www.frontendmentor.io/solutions/responsive-article-preview-with-flex-and-reactjs-cfY7yhKz0f)\n- Live Site URL: [Github pages](https://amrmabdelazeem.github.io/article-preview-component)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- Mobile-first workflow\n- [React](https://reactjs.org/) - JS library\n- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n- [DOM](https://www.w3schools.com/js/js_htmldom.asp)\n\n\n\n### Useful resources\n\n- [Example resource 1](https://developer.mozilla.org/en-US/) - Resources for Developers, by Developers\n- [Example resource 2](https://www.w3schools.com/) - Learn to Code With the world's largest web developer site.\n\n## Author\n\n- Website - [AMR](https://github.com/amrmabdelazeem)\n- Frontend Mentor - [@amrmabdelazeem](https://www.frontendmentor.io/profile/amrmabdelazeem)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famrmabdelazeem%2Farticle-preview-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famrmabdelazeem%2Farticle-preview-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famrmabdelazeem%2Farticle-preview-component/lists"}