feat: update README for GitHub star link and add example project screenshot guidelines

README.md

@@ -6,7 +6,7 @@ Local Arduino emulator with code editor and visual simulator.
 
 If you find this project helpful, please consider giving it a star! Your support helps the project grow and motivates continued development.
 
-[![GitHub stars](https://img.shields.io/github/stars/yourusername/wokwi_clon?style=social)](https://github.com/yourusername/wokwi_clon/stargazers)
+[![GitHub stars](https://img.shields.io/github/stars/davidmonterocrespo24/openwokwi?style=social)](https://github.com/davidmonterocrespo24/openwokwi/stargazers)
 
 Every star counts and helps make this project better!
 
@@ -26,11 +26,11 @@ Every star counts and helps make this project better!
 
 ![Arduino Emulator - Editor and Simulator](doc/img1.png)
 
-*Arduino emulator with Monaco code editor and visual simulator with wokwi-elements*
+Arduino emulator with Monaco code editor and visual simulator with wokwi-elements
 
 ![Arduino Emulator - Component Properties and Wire Editing](doc/img2.png)
 
-*Interactive component properties dialog and segment-based wire editing*
+Interactive component properties dialog and segment-based wire editing
 
 ## Prerequisites
 

doc/examples/README.md

@@ -0,0 +1,69 @@
+# Example Project Screenshots
+
+Esta carpeta contiene las imágenes de preview para los proyectos de ejemplo de la galería.
+
+## Cómo Crear Screenshots
+
+### Método 1: Captura Manual (Recomendado)
+
+1. Carga el ejemplo en el editor (http://localhost:5173/examples)
+2. Haz click en el ejemplo
+3. Ajusta el zoom del canvas si es necesario
+4. Usa una herramienta de captura de pantalla para capturar solo el área del simulador
+5. Guarda la imagen con el nombre correspondiente
+
+### Método 2: Usando DevTools
+
+1. Abre el ejemplo en el navegador
+2. Abre DevTools (F12)
+3. Ve a la consola y ejecuta:
+```javascript
+const canvas = document.querySelector('.canvas-content');
+html2canvas(canvas).then(canvas => {
+  const link = document.createElement('a');
+  link.download = 'example-name.png';
+  link.href = canvas.toDataURL();
+  link.click();
+});
+```
+
+## Nombres de Archivos
+
+Los archivos deben seguir el ID del ejemplo:
+
+- `blink-led.png` - Blink LED example
+- `traffic-light.png` - Traffic Light example
+- `button-control.png` - Button Control example
+- `fade-led.png` - Fade LED example
+- `serial-hello.png` - Serial Hello World example
+- `rgb-led.png` - RGB LED Colors example
+- `simon-says.png` - Simon Says Game example
+
+## Dimensiones Recomendadas
+
+- **Ancho**: 800px
+- **Alto**: 500px
+- **Formato**: PNG con fondo transparente o oscuro (#1e1e1e)
+
+## Actualizar el Código
+
+Una vez tengas las imágenes, actualiza `frontend/src/data/examples.ts`:
+
+```typescript
+{
+  id: 'blink-led',
+  title: 'Blink LED',
+  // ... resto de propiedades
+  thumbnail: '/doc/examples/blink-led.png',  // Agregar esta línea
+}
+```
+
+## Placeholder Actual
+
+Mientras no haya imágenes, se muestra un placeholder con:
+- Icono de la categoría (emoji grande)
+- Número de componentes (azul cian)
+- Número de cables (amarillo)
+- Fondo degradado con borde punteado
+
+Este placeholder es más profesional que el preview SVG generado automáticamente.