{"id":29247620,"url":"https://github.com/codingwithjiro/frontend-mentor-results-summary-component","last_synced_at":"2026-05-02T20:40:18.006Z","repository":{"id":302326236,"uuid":"1010685554","full_name":"CodingWithJiro/frontend-mentor-results-summary-component","owner":"CodingWithJiro","description":"A clean and responsive results summary component page built with HTML and CSS. Created as part of a Frontend Mentor challenge.","archived":false,"fork":false,"pushed_at":"2025-07-02T14:43:35.000Z","size":4497,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-01T12:53:11.825Z","etag":null,"topics":["3rd-month","css","frontend-mentor","git","github","html","lighthouse","netlify","perfectpixel","project","vscode"],"latest_commit_sha":null,"homepage":"https://results-summary-component-fm-jiro.netlify.app/","language":"CSS","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/CodingWithJiro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-29T15:43:34.000Z","updated_at":"2025-07-02T14:43:38.000Z","dependencies_parsed_at":"2025-09-01T12:34:15.452Z","dependency_job_id":"a7aca1bc-4961-4a15-abf1-e6a94af7bd35","html_url":"https://github.com/CodingWithJiro/frontend-mentor-results-summary-component","commit_stats":null,"previous_names":["codingwithjiro/frontend-mentor-results-summary-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodingWithJiro/frontend-mentor-results-summary-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-results-summary-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-results-summary-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-results-summary-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-results-summary-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodingWithJiro","download_url":"https://codeload.github.com/CodingWithJiro/frontend-mentor-results-summary-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodingWithJiro%2Ffrontend-mentor-results-summary-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279990458,"owners_count":26255517,"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","status":"online","status_checked_at":"2025-10-20T02:00:06.978Z","response_time":62,"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":["3rd-month","css","frontend-mentor","git","github","html","lighthouse","netlify","perfectpixel","project","vscode"],"created_at":"2025-07-04T00:01:35.637Z","updated_at":"2025-10-20T02:56:16.641Z","avatar_url":"https://github.com/CodingWithJiro.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Results Summary Component\n\n![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n[![Frontend Mentor](https://img.shields.io/badge/Frontend%20Mentor-3e54a3?style=for-the-badge\u0026logo=frontendmentor\u0026logoColor=white)](https://www.frontendmentor.io/)\n[![Visual Studio Code](https://img.shields.io/badge/VS%20Code-007ACC?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)](https://code.visualstudio.com/)\n[![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge\u0026logo=git\u0026logoColor=white)](https://git-scm.com/)\n[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/)\n[![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge\u0026logo=netlify\u0026logoColor=white)](https://www.netlify.com/)\n[![PerfectPixel](https://img.shields.io/badge/PerfectPixel-F56C94?style=for-the-badge)](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonecod/dkaagdgjmgdmbnecmcefdhjekcoceebi)\n![Image → Code](https://img.shields.io/badge/Image%20→%20Code-✔️-6a1b9a?style=for-the-badge\u0026labelColor=2e003e\u0026logoColor=white)\n![Semantic HTML](https://img.shields.io/badge/Semantic%20HTML-ff9800?style=for-the-badge)\n![Accessible](https://img.shields.io/badge/Accessibility-A11Y-0052cc?style=for-the-badge)\n![Responsive Layout](https://img.shields.io/badge/Responsive%20Layout-Full%20Support-blue?style=for-the-badge)\n![Mobile First](https://img.shields.io/badge/Mobile--First-Design-orange?style=for-the-badge)\n![Dark Mode](https://img.shields.io/badge/Dark--Mode-Available-111?style=for-the-badge\u0026logo=halfbrickstudios\u0026logoColor=white)\n[![Google Lighthouse](https://img.shields.io/badge/Lighthouse-Audit-00B0FF?style=for-the-badge\u0026logo=lighthouse\u0026logoColor=white)](./assets/downloads/lighthouse-performance-report.pdf)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/f00f4e4d-9046-433b-b347-da61f1c68918/deploy-status)](https://results-summary-component-fm-jiro.netlify.app/)\n![Status](https://img.shields.io/badge/status-complete-brightgreen)\n![Learning Path](https://img.shields.io/badge/learning%20path-month%203-blue)\n![Views](https://visitor-badge.laobi.icu/badge?page_id=CodingWithJiro.frontend-mentor-results-summary-component\u0026left_text=repo%20views)\n\n## A Responsive Results Summary Component for a Test Result\n\n| _Mobile Preview (375x812)_                                   | _Desktop Preview (1440x960)_                                    |\n| ------------------------------------------------------------ | --------------------------------------------------------------- |\n| ![Mobile](./assets/img/site-preview-mobile_375x812.png)      | ![Desktop](./assets/img/site-preview-desktop_1440x960.png)      |\n| ![Mobile](./assets/img/site-preview-mobile-dark_375x812.png) | ![Desktop](./assets/img/site-preview-desktop-dark_1440x960.png) |\n\nA clean, accessible, and visually engaging test results component designed using HTML and CSS. The layout adapts beautifully across screen sizes and supports dark mode.\n\nCreated as part of the building challenges from **[Frontend Mentor](https://www.frontendmentor.io/)**.\n\n---\n\n## Overview\n\nThis project replicates a summary results card for test scores using a mobile-first, responsive layout. The left section presents a performance score with a gradient background, while the right side lists category-based results. The design is built from a static image and matched closely using tools like **[PerfectPixel](https://chromewebstore.google.com/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi)**.\n\nAccessibility was prioritized through ARIA labels, semantic HTML5 structure, skip links, and light/dark theme compatibility via the `prefers-color-scheme` media query. Transitions respect reduced motion settings to ensure inclusivity.\n\n---\n\n## Features\n\n- Responsive layout using `flexbox` and `clamp()`\n- Custom theme switching with `prefers-color-scheme: dark`\n- Semantic HTML for screen readers\n- Animated hover/focus states for call-to-action\n- Color-coded categories for clarity\n- Font loading using `@font-face` and local hosting\n- Optimized for mobile, tablet, and desktop screens\n- Accessibility enhancements with ARIA and skip links\n- Smooth transitions for modern user experience\n- Lighthouse-audited for performance and accessibility\n\n---\n\n## What I Learned\n\n- How to structure a two-column layout using mobile-first Flexbox\n- Implemented a complete light/dark theme system using CSS variables\n- Refined my use of `clamp()` and media queries for fluid typography\n- Practiced accessibility techniques such as skip links, `aria-hidden`, and `outline-offset`\n- Applied transition animations while respecting `prefers-reduced-motion`\n- Improved my use of gradient backgrounds and color contrast ratios\n- Learned how to properly handle font performance with `@font-face` self-hosting\n\n---\n\n## Tech Used\n\n- HTML5\n- CSS3\n- Git\n- GitHub\n- Netlify\n\n---\n\n## Design Reference \u0026 Tools\n\n- JPG design image\n- PerfectPixel\n\n---\n\n## How to Run\n\n1. Clone the repository\n2. Open `index.html` in your browser\n\n---\n\n## Live Demo\n\nOr you can check out the **[live website here](https://results-summary-component-fm-jiro.netlify.app/)**\n\n---\n\n## Performance Report\n\nA **Google Lighthouse** audit was conducted on the final version of this project. You can view the **[full report here](./assets/downloads/lighthouse-performance-report.pdf)**.\n\n---\n\n## Author\n\nCreated by **Elmar Chavez**\n\nMonth/Year: **June 2025**\n\nJourney: **3\u003csup\u003erd\u003c/sup\u003e** month of learning _frontend web development_.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-results-summary-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-results-summary-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingwithjiro%2Ffrontend-mentor-results-summary-component/lists"}