---
title: "Playground | Luca Brivio"
description: "A living gallery of components and snippets to reuse across sites."
canonical_url: "https://brivioluca.com/playground"
meta:
  "og:description": "A living gallery of components and snippets to reuse across sites."
  "og:title": "Playground | Luca Brivio"
---

> Index of every page on this site: [llms.txt](https://brivioluca.com/llms.txt)

# **Playground **

Components worth reusing. Add one by creating a file in `app/components/playground/`.

## **Card grid**

`app/components/playground/CardGrid.vue`

- ### **Brand pages**

  A homepage and a handful of pages that say who you are.

  Design
- ### **Wireframes**

  Clickable structure on its own URL before any colour is chosen.

  Design
- ### **Static sites**

  Pre-rendered pages served by nginx, nothing to patch at runtime.

  Build
- ### **Server rendering**

  Node at runtime for shops, accounts and content that changes.

  Build
- ### **Updates**

  Every push to main becomes a new image within minutes.

  Care
- ### **Staging**

  A stage copy on its own subdomain, hidden from search engines.

  Care

## **Contact section**

`app/components/playground/ContactSection.vue`

### **Tell us about the project **

A few lines are enough. Expect a reply within two working days.

- hello@example.com
- Milan, Italy

## **Hero rotating**

`app/components/playground/HeroRotating.vue`

### Sites that load in a blink, ship on every push, read well on a phone, stay yours. Sites that load in a blink

Hover or focus the hero to pause the rotation. Motion turns off when the visitor asks for reduced motion.

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://brivioluca.com/#website","@type":"WebSite","description":"Sito personale di Luca Brivio.","name":"Luca Brivio","url":"https://brivioluca.com/"},{"@id":"https://brivioluca.com/playground#webpage","@type":"WebPage","description":"A living gallery of components and snippets to reuse across sites.","name":"Playground","url":"https://brivioluca.com/playground","isPartOf":{"@id":"https://brivioluca.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://brivioluca.com/playground"]}]}]}
```

## Sitemap

See the full [sitemap](https://brivioluca.com/sitemap.md) for all pages.