A high-performance, accessible results summary interface that dynamically renders performance metrics. This project showcases TypeScript-integrated JSON mapping, sophisticated CSS Gradient layering, and a robust BEM-structured SCSS architecture.
- Type-Safe Data Mapping: Utilises TypeScript to fetch and map local
data.jsoncontent, ensuring type integrity across category labels, scores, and iconography. - Dynamic DOM Injection: Engineered a modular rendering pipeline that generates list items dynamically based on the data source, promoting dry code and scalability.
- Complex Gradient Composition: Implemented multi-layered CSS Gradients and transparency effects to achieve the high-fidelity depth seen in the original design.
- Responsive Adaptive Layout: Leverages a Mobile-First strategy with a seamless transition from a vertical stack to a dual-pane horizontal layout using CSS Grid.
- Performance Optimised: Achieves near-perfect Lighthouse scores through optimised SVG assets and minimal execution overhead.
The component is designed to be content-agnostic:
- Interface Contracts: Defined a strict
ResultIteminterface to validate incoming data attributes (category, score, icon, theme-color). - Asynchronous Flow: Uses the
Fetch APIto simulate a real-world dashboard environment where data is retrieved from a backend or local JSON file. - Functional Mapping: Implemented
.map()logic to iterate through data, injecting categorised scores into the DOM with specific color tokens.
- Modular Architecture: Built using SCSS partials and the BEM (Block Element Modifier) methodology for strict component encapsulation.
- Design Tokens: Extensive use of CSS Custom Properties for the color palette, allowing for easy theme switching (e.g., dynamic opacity for category backgrounds).
- Fluid Typography: Utilises the 'Hanken Grotesk' typeface with optimised line heights to maintain legibility across various viewport densities.
- Semantic Structure: Uses
<section>and<ul>elements to ensure the summary is navigable by screen readers and search engine crawlers. - Interactive States: Custom focus and hover transitions on the "Continue" trigger, utilising
box-shadowandtransformproperties for a tactile feel. - Color Contrast: Verified color pairings against WCAG standards to ensure data readability.
-
Live Site: https://github.com/seanbuckle/results-summary-component
-
Source Code: https://results-summary-component.seanbuckle.com
To run this project locally:
- Clone the repository:
git clone https://github.com/seanbuckle/results-summary-component.git
- Navigate to the directory:
cd results-summary-component - Open the project: Simply open
index.htmlin your preferred browser.
Sean Buckle
This project is licensed under the MIT License - see the LICENSE file for details.
Note: This project was built as a solution to a Frontend Mentor challenge.