Cambio emojis por iconos

Author: SebiGitHub

assets/css/styles.css

@@ -468,24 +468,54 @@ p{
   height: 140px;
   border-radius: calc(var(--radius) - 4px);
   margin: -4px -4px 12px -4px;
+
   display:flex;
   align-items:center;
   justify-content:center;
+
+  position: relative;
+  overflow: hidden;
+
+  /* Colores por defecto del thumb (se pueden “tunear” por clase) */
+  --a: rgba(124,58,237,.35);
+  --b: rgba(34,211,238,.22);
+
+  /* Fondo: rejilla + luces + base */
   background:
-    radial-gradient(circle at 0% 0%, rgba(124,58,237,.35), transparent 55%),
-    radial-gradient(circle at 100% 100%, rgba(34,211,238,.22), transparent 55%),
+    /* grid (rejilla) */
+    repeating-linear-gradient(
+      0deg,
+      rgba(255,255,255,.06) 0 1px,
+      transparent 1px 22px
+    ),
+    repeating-linear-gradient(
+      90deg,
+      rgba(255,255,255,.06) 0 1px,
+      transparent 1px 22px
+    ),
+    /* glow corners */
+    radial-gradient(circle at 0% 0%, var(--a), transparent 55%),
+    radial-gradient(circle at 100% 100%, var(--b), transparent 55%),
+    /* base */
     linear-gradient(135deg, #050816, #0b0f14);
 }
-.project-thumb span{
-  font-size: 42px;
-  filter: drop-shadow(0 8px 24px rgba(0,0,0,.6));
+
+/* capa para “suavizar” un poco el grid */
+.project-thumb::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.06), transparent 60%);
+  pointer-events:none;
 }
+
 .project-card .tech{
   margin: 12px 0;
   display:flex;
   flex-wrap:wrap;
   gap:6px;
 }
+
 .project-card .tech span{
   background: rgba(255,255,255,.08);
   padding: 6px 10px;
@@ -500,12 +530,29 @@ p{
   margin: 10px 0 22px;
   color: var(--muted);
 }
+
 .project-card details summary{
   cursor:pointer;
   color: #c4b5fd;
   font-weight: 700;
 }
 
+.project-icon{
+  position: relative;
+  z-index: 1;
+
+  font-size: 56px;
+  color: rgba(255,255,255,.92);
+
+  filter: drop-shadow(0 10px 26px rgba(0,0,0,.55));
+  opacity: .95;
+}
+
+.project-thumb.thumb-powerapps{ --a: rgba(196,181,253,.38); --b: rgba(34,211,238,.20); }
+.project-thumb.thumb-desktop{  --a: rgba(148,163,184,.30); --b: rgba(196,181,253,.22); }
+.project-thumb.thumb-android{  --a: rgba(34,197,94,.22);  --b: rgba(244,114,182,.18); }
+
+
 /* =========================================================
    CV
    ========================================================= */

assets/js/app.js

@@ -191,24 +191,27 @@ function getProjectItems() {
       why: proj.p1_why,
       link: "https://github.com/SebiGitHub/WEB-DE-PROTOCOLOS-HSJD",
       tech: ["PowerApps", "SharePoint", "VBScript", "Access", "Excel"],
-      emoji: "🧩",
+      icon: "fa-solid fa-diagram-project",
+      thumbClass: "thumb-powerapps"
     },
     {
       title: proj.p2_title,
       desc: proj.p2_desc,
       why: proj.p2_why,
       link: "https://github.com/SebiGitHub/AvaloniaCatalogoWinForms",
       tech: ["Avalonia", "WinForms", "Visual Studio"],
-      emoji: "🪄",
+      icon: "fa-solid fa-cubes-stacked",
+      thumbClass: "thumb-desktop"
     },
     {
       title: proj.p3_title,
       desc: proj.p3_desc,
       why: proj.p3_why,
       link: "https://github.com/SebiGitHub/Agenda",
       tech: ["Android", "Kotlin", "SQLite/Room"],
-      icon: "fa-solid fa-calendar-days"
-    },
+      icon: "fa-solid fa-calendar-days",
+      thumbClass: "thumb-android"
+    }
   ];
 }
 
@@ -234,7 +237,9 @@ function renderProjects() {
 
   stage.innerHTML = `
     <div class="card project-card">
-      <div class="project-thumb"><span>${p.emoji}</span></div>
+      <div class="project-thumb ${p.thumbClass || ""}">
+        <i class="project-icon ${p.icon}" aria-hidden="true"></i>
+      </div>
 
       <h3>${p.title}</h3>
       <p>${p.desc}</p>