Merge pull request #21 from jcomte23/develop

Feat: The Visual Token Comparator project has been updated and added.

Author: jcomte23

index.html

@@ -114,7 +114,7 @@ <h2>Proyectos destacados</h2>
                 <div class="cards-grid" id="projectsGrid">
                     <!-- Example project cards (replace images/text with yours) -->
                     <article class="card project-card ">
-                        <img src="public/images/ForzaSpecialsWeldings.jpg" alt="Proyecto 3" class="card-media" />
+                        <img src="public/images/ForzaSpecialsWeldings.jpg" alt="Forza Specials Weldings" class="card-media" />
                         <div class="card-body">
                             <div class="tags">
                                 <span class="tag tag--empresa">Proyecto empresarial</span>
@@ -131,8 +131,8 @@ <h3>Forza Specials Weldings</h3>
                     </article>
 
                     <article class="card project-card">
-                        <img src="https://play-lh.googleusercontent.com/Xj_OcCMJXlkDNvK2pvZAM9A1oD5LsyfKrKLZiPQQxcGx6dDTrz90dxNT0CuLAuLNXmQ"
-                            alt="Proyecto 2" class="card-media" />
+                        <img src="public/images/mesadoko.png"
+                            alt="App mesadoko" class="card-media" />
                         <div class="card-body">
                             <div class="tags">
                                 <span class="tag tag--empresa">Proyecto empresarial</span>
@@ -177,11 +177,25 @@ <h3>Mesadoko <span class="credit-inline">| Desarrollado para <a
                             </div>
                         </div>
                     </article>
-
-
-
                     <article class="card project-card">
-                        <img src="public/images/hogenco-logo.jpg" alt="Proyecto 1" class="card-media" />
+                        <img src="public/images/json-vs-toon.png" alt="Visual Token Comparator" class="card-media" />
+                        <div class="card-body">
+                            <div class="tags">
+                                <span class="tag tag--personal">Proyecto freelance</span>
+                                <span class="tag tag--publico">Código publico</span>
+                            </div>
+                            <h3>Visual Token Comparator</h3>
+                            <p class="muted">Construi Comparador visual de consumo de tokens entre los formatos JSON y TOON al interactuar con modelos de lenguaje (LLMs) como Gemini.</p>
+                            <div class="card-actions">
+                                <a href="https://jcomte23.github.io/VisualTokenComparator/" target="_blank"
+                                    class="btn ghost small">Sitio web</a>
+                                <a href="https://github.com/jcomte23/VisualTokenComparator" target="_blank"
+                                    class="btn ghost small">Código</a>
+                            </div>
+                        </div>
+                    </article>
+                    <article class="card project-card hogenco">
+                        <img src="public/images/hogenco-logo.jpg" alt="Hogenco" class="card-media" />
                         <div class="card-body">
                             <div class="tags">
                                 <span class="tag tag--personal">Proyecto freelance</span>

public/images/json-vs-toon.png

@@ -269,6 +269,10 @@ body {
   align-items: stretch;
 }
 
+.project-card.hogenco {
+  grid-column: 2; /* Columna del centro en un grid de 3 */
+}
+
 .card {
   background: var(--white);
   border-radius: var(--radius-md);