txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add bold project links and fix language selector spacing

Browse Source 
- Wrap project name links (Lidering, Jorpack, Delivery Bikes BCN, Mobbeel) with <strong> tags in shortDescription for both EN and ES
- Add padding-left: 3rem to .language-selector to prevent overlap with adjacent elements
This commit is contained in:
juanatsap
2025-11-08 16:37:14 +00:00
parent 286d0d0e3e
commit a6783da1f6
4 changed files with 35 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/cv-en.json
+1 -1
View File
@@ -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 <strong><a href='https://lidering.com' target='_blank' rel='noopener noreferrer'>Lidering</a></strong>, <strong><a href='https://jorpack.com' target='_blank' rel='noopener noreferrer'>Jorpack</a></strong>, <strong><a href='https://deliverybikesbcn.com/' target='_blank' rel='noopener noreferrer'>Delivery Bikes BCN</a></strong>, and <strong><a href='https://mobbeel.com' target='_blank' rel='noopener noreferrer'>Mobbeel</a></strong> where I contributed to development, implementation, and technical solutions across various industries.",
"responsibilities": [
"<img src='/static/images/projects/lidering.png' alt='Lidering'><div><strong><a href='https://lidering.com' target='_blank' rel='noopener noreferrer'>Lidering</a></strong> (via Twentic): Real estate and property management platform development</div>",
"<img src='/static/images/projects/jorpack.png' alt='Jorpack'><div><strong><a href='https://jorpack.com' target='_blank' rel='noopener noreferrer'>Jorpack</a></strong> (via Twentic): Industrial packaging solutions and corporate website</div>",
data/cv-es.json
+1 -1
View File
@@ -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 <strong><a href='https://lidering.com' target='_blank' rel='noopener noreferrer'>Lidering</a></strong>, <strong><a href='https://jorpack.com' target='_blank' rel='noopener noreferrer'>Jorpack</a></strong>, <strong><a href='https://deliverybikesbcn.com/' target='_blank' rel='noopener noreferrer'>Delivery Bikes BCN</a></strong> y <strong><a href='https://mobbeel.com' target='_blank' rel='noopener noreferrer'>Mobbeel</a></strong> donde contribuí al desarrollo, implementación y soluciones técnicas en diversas industrias.",
"responsibilities": [
"<img src='/static/images/projects/lidering.png' alt='Lidering'><div><strong><a href='https://lidering.com' target='_blank' rel='noopener noreferrer'>Lidering</a></strong> (a través de Twentic): Desarrollo de plataforma de gestión inmobiliaria y propiedades</div>",
"<img src='/static/images/projects/jorpack.png' alt='Jorpack'><div><strong><a href='https://jorpack.com' target='_blank' rel='noopener noreferrer'>Jorpack</a></strong> (a través de Twentic): Soluciones de embalaje industrial y sitio web corporativo</div>",
static/css/main.css
+29 -46
View File
@@ -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;
}
}
templates/index.html
+4 -5
View File
@@ -107,8 +107,11 @@
</button>
<span class="site-title-text">CV JAMR - {{.CurrentYear}}</span>
</div>
<!-- Language selector (after title) -->
<!-- Center: Language selector + View controls with labels -->
<div class="view-controls-center">
<!-- Language selector (centered) -->
<div class="language-selector">
<button class="selector-btn {{if eq .Lang "en"}}active{{end}}" data-short="EN" onclick="selectLanguage('en')" aria-label="English">
English
@@ -117,10 +120,6 @@
Español
</button>
</div>
</div>
<!-- Center: View controls with labels -->
<div class="view-controls-center">
<!-- CV Length toggle -->
<div class="selector-group">
<label class="selector-label">{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}:</label>