From a6783da1f690de302ea82292f808772bc44e0dd5 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Sat, 8 Nov 2025 16:37:14 +0000 Subject: [PATCH] feat: add bold project links and fix language selector spacing - Wrap project name links (Lidering, Jorpack, Delivery Bikes BCN, Mobbeel) with tags in shortDescription for both EN and ES - Add padding-left: 3rem to .language-selector to prevent overlap with adjacent elements --- data/cv-en.json | 2 +- data/cv-es.json | 2 +- static/css/main.css | 75 +++++++++++++++++--------------------------- templates/index.html | 9 +++--- 4 files changed, 35 insertions(+), 53 deletions(-) diff --git a/data/cv-en.json b/data/cv-en.json index 6a1ae20..f81e79a 100644 --- a/data/cv-en.json +++ b/data/cv-en.json @@ -801,7 +801,7 @@ "startDate": "2015", "current": false, "technologies": ["JavaScript", "React", "Node.js", "PHP", "WordPress", "Web Development"], - "shortDescription": "Collection of client projects and websites where I contributed to development, implementation, and technical solutions across various industries.", + "shortDescription": "Collection of client projects and websites including Lidering, Jorpack, Delivery Bikes BCN, and Mobbeel where I contributed to development, implementation, and technical solutions across various industries.", "responsibilities": [ "Lidering
Lidering (via Twentic): Real estate and property management platform development
", "Jorpack
Jorpack (via Twentic): Industrial packaging solutions and corporate website
", diff --git a/data/cv-es.json b/data/cv-es.json index 579356c..662a0e8 100644 --- a/data/cv-es.json +++ b/data/cv-es.json @@ -806,7 +806,7 @@ "startDate": "2015", "current": false, "technologies": ["JavaScript", "React", "Node.js", "PHP", "WordPress", "Desarrollo Web"], - "shortDescription": "Colección de proyectos de clientes y sitios web donde contribuí al desarrollo, implementación y soluciones técnicas en diversas industrias.", + "shortDescription": "Colección de proyectos de clientes y sitios web incluyendo Lidering, Jorpack, Delivery Bikes BCN y Mobbeel donde contribuí al desarrollo, implementación y soluciones técnicas en diversas industrias.", "responsibilities": [ "Lidering
Lidering (a través de Twentic): Desarrollo de plataforma de gestión inmobiliaria y propiedades
", "Jorpack
Jorpack (a través de Twentic): Soluciones de embalaje industrial y sitio web corporativo
", diff --git a/static/css/main.css b/static/css/main.css index 50fb097..6bc4c5a 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -266,6 +266,8 @@ iconify-icon { display: inline-flex; gap: 0; padding: 0; + padding-left: 3rem; /* Add left space to prevent overlap with site title */ + margin-right: 2rem; /* Add space to prevent overlap with Length toggle */ background: transparent; border-radius: 0; height: 100%; @@ -320,6 +322,8 @@ iconify-icon { color: white; } +/* Language selector buttons - no global animations (applied in responsive range only) */ + /* Action buttons - transparent with white text */ .action-btn { padding: 0 1.5rem; @@ -1904,32 +1908,6 @@ html { Desktop: Ensure Sidebar Content Visible (>1280px) ======================================== */ -@media (min-width: 1281px) { - /* Ensure sidebar content is always visible in desktop view */ - .sidebar-content { - max-height: none !important; - opacity: 1 !important; - overflow: visible !important; - display: block !important; - margin-top: 10px !important; - } - - .skill-category .sidebar-content, - .cv-sidebar-section .sidebar-content { - max-height: none !important; - opacity: 1 !important; - overflow: visible !important; - } - - .sidebar-title::after { - display: none !important; - } - - .sidebar-title { - cursor: default !important; - } -} - /* ======================================== Responsive: Medium Screens (1024px - 1280px) ======================================== */ @@ -1964,7 +1942,7 @@ html { .project-item li { font-size: 0.85rem; } - + /* ========== Selector Labels - Hide, Show on Hover ========== */ .selector-label { max-width: 0; @@ -1973,20 +1951,24 @@ html { transition: all 0.3s ease; white-space: nowrap; } - + .selector-group:hover .selector-label { max-width: 200px; opacity: 1; margin-right: 0.75rem; } - + /* ========== Language Selector - Collapse to EN/ES ========== */ .language-selector .selector-btn { position: relative; - padding: 0.4rem 0.8rem; + padding: 0.4rem 1rem; /* Keep padding consistent */ min-width: 50px; font-size: 0; /* Hide actual text */ overflow: visible; + transition: font-size 0.3s ease; /* Slower animation */ + display: inline-flex; + justify-content: center; + align-items: center; } /* Show only short version (EN/ES) */ @@ -1994,22 +1976,23 @@ html { content: attr(data-short); font-size: 1rem; /* Restore font size for pseudo-element */ opacity: 1; + transition: opacity 0.3s ease; /* Slower animation */ + display: block; + width: 100%; + text-align: center; } - /* On hover, show full text */ - .language-selector:hover .selector-btn, + /* On hover of INDIVIDUAL button only, show full text */ .language-selector .selector-btn:hover { - font-size: 1rem; /* Restore font size */ - padding: 0.4rem 1rem; + font-size: 1rem; /* Restore font size to show full text */ min-width: auto; } - .language-selector:hover .selector-btn::before, .language-selector .selector-btn:hover::before { content: ''; /* Hide short version */ opacity: 0; } - + /* ========== Action Buttons - Icon Only, Expand on Hover ========== */ .action-btn { position: relative; @@ -2019,18 +2002,18 @@ html { white-space: nowrap; text-indent: 0; } - + /* Hide button text, keep icon */ .action-btn iconify-icon { flex-shrink: 0; } - + .action-btn { font-size: 0; padding: 0 0.65rem; justify-content: center; } - + /* On hover, show text */ .action-btn:hover { width: auto; @@ -2038,19 +2021,19 @@ html { padding: 0.65rem 1.5rem; gap: 0.5rem; } - + /* ========== Sidebar Content - Hide Text, Show on Hover ========== */ .sidebar-content { - max-height: 0; - overflow: hidden; - opacity: 0; + max-height: 0 !important; + overflow: hidden !important; + opacity: 0 !important; } /* Show sidebar content on hover */ .skill-category:hover .sidebar-content, .cv-sidebar-section:hover .sidebar-content { - max-height: 1000px; - opacity: 1; - margin-top: 10px; + max-height: 1000px !important; + opacity: 1 !important; + margin-top: 10px !important; } } diff --git a/templates/index.html b/templates/index.html index 836884d..d45a3fe 100644 --- a/templates/index.html +++ b/templates/index.html @@ -107,8 +107,11 @@ CV JAMR - {{.CurrentYear}} + - + +
+
-
- - -