# bertomjr/frontend-mentor architecture

> Architecture diagram of the GitHub repository bertomjr/frontend-mentor, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bertomjr/frontend-mentor
- Repository: https://github.com/bertomjr/frontend-mentor

## Overview

This repository is a collection of four standalone HTML/CSS implementations of Frontend Mentor challenges. A visitor opens a project page and views its responsive interface; the README identifies the distinct design and content focuses. Source excerpts were not available, so relationships are limited to the documented pages and shared styling files.

Main entry points: [`newbie/qr-code-component/index.html`](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/qr-code-component/index.html) (QR Code Component), [`newbie/blog-preview-card/index.html`](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/blog-preview-card/index.html) (Blog Preview Card), [`newbie/social-links-profile/index.html`](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/social-links-profile/index.html) (Social Links Profile), [`newbie/recipe-page/index.html`](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/recipe-page/index.html) (Recipe Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_challenges["Challenge Pages"]
  node_qr["QR Code Component<br/>[index.html]"]
  node_blog["Blog Preview Card<br/>[index.html]"]
  node_social["Social Links Profile<br/>[index.html]"]
  node_recipe["Recipe Page<br/>[index.html]"]
end

subgraph group_presentation["Page Styling"]
  node_qrstyles["QR Layout Styles<br/>[styles.css]"]
  node_blogstyles["Blog Card Styles<br/>[styles.css]"]
  node_socialstyles["Profile Styles<br/>[styles.css]"]
  node_recipestyles["Recipe Styles<br/>[styles.css]"]
end

node_visitor(("Site Visitor"))

node_visitor -->|"opens page"| node_qr
node_visitor -->|"opens page"| node_blog
node_visitor -->|"opens page"| node_social
node_visitor -->|"opens page"| node_recipe
node_qr -->|"uses styles"| node_qrstyles
node_blog -->|"uses styles"| node_blogstyles
node_social -->|"uses styles"| node_socialstyles
node_recipe -->|"uses styles"| node_recipestyles

click node_qr "https://github.com/bertomjr/frontend-mentor/blob/main/newbie/qr-code-component/index.html"
click node_blog "https://github.com/bertomjr/frontend-mentor/blob/main/newbie/blog-preview-card/index.html"
click node_social "https://github.com/bertomjr/frontend-mentor/blob/main/newbie/social-links-profile/index.html"
click node_recipe "https://github.com/bertomjr/frontend-mentor/blob/main/newbie/recipe-page/index.html"
click node_qrstyles "https://github.com/bertomjr/frontend-mentor/blob/main/newbie/qr-code-component/styles.css"
click node_blogstyles "https://github.com/bertomjr/frontend-mentor/blob/main/newbie/blog-preview-card/styles.css"
click node_socialstyles "https://github.com/bertomjr/frontend-mentor/blob/main/newbie/social-links-profile/styles.css"
click node_recipestyles "https://github.com/bertomjr/frontend-mentor/blob/main/newbie/recipe-page/styles.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_qr,node_blog,node_social,node_recipe toneBlue
class node_qrstyles,node_blogstyles,node_socialstyles,node_recipestyles toneAmber
class node_visitor toneIndigo
```

## Components

### Challenge Pages

- [QR Code Component](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/qr-code-component/index.html): `newbie/qr-code-component/index.html`
- [Blog Preview Card](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/blog-preview-card/index.html): `newbie/blog-preview-card/index.html`
- [Social Links Profile](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/social-links-profile/index.html): `newbie/social-links-profile/index.html`
- [Recipe Page](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/recipe-page/index.html): `newbie/recipe-page/index.html`

### Page Styling

- [QR Layout Styles](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/qr-code-component/styles.css): `newbie/qr-code-component/styles.css`
- [Blog Card Styles](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/blog-preview-card/styles.css): `newbie/blog-preview-card/styles.css`
- [Profile Styles](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/social-links-profile/styles.css): `newbie/social-links-profile/styles.css`
- [Recipe Styles](https://github.com/bertomjr/frontend-mentor/blob/main/newbie/recipe-page/styles.css): `newbie/recipe-page/styles.css`

### Other components

- **Site Visitor**

## Connections

- Site Visitor → QR Code Component: opens page
- Site Visitor → Blog Preview Card: opens page
- Site Visitor → Social Links Profile: opens page
- Site Visitor → Recipe Page: opens page
- QR Code Component → QR Layout Styles: uses styles
- Blog Preview Card → Blog Card Styles: uses styles
- Social Links Profile → Profile Styles: uses styles
- Recipe Page → Recipe Styles: uses styles