Content & UX Improvements
Content & UX Improvements
Deep analysis and implementation guide for improving content strategy, user experience, and engagement.
Table of Contents
- Blog Content Strategy
- Project Pages Enhancement
- CV Interactive Timeline
- 404 Page Enhancement
- RSS Feed Visibility
- Client-Side Search
- Reading Progress & Engagement
1. Blog Content Strategy
Current State
Directory: _posts/
7 blog posts exist, all conference/event recaps:
- Advanced Detector Technologies Conference (2022)
- Hiroshima Symposium on Particle Physics (2023)
- New Horizons at CERN (2024)
-
- 4 more conference-related posts
Issues:
- All posts are conference recaps (single content type)
- No technical tutorials or how-to content
- No “day in the life at CERN” personal content
- Limited SEO value (niche conference keywords only)
- No regular publishing cadence
Recommendations
Content pillars to develop
| Pillar | Example Topics | SEO Value | Effort |
|---|---|---|---|
| Technical tutorials | “Python for particle physics analysis”, “ROOT data visualization guide”, “FPGA programming basics” | High (long-tail keywords) | Medium |
| Research explainers | “How silicon detectors work”, “What is LHCb VELO?”, “Understanding particle tracking” | High (educational queries) | Medium |
| Career/life at CERN | “A day as a CERN postdoc”, “How I transitioned from PhD to postdoc”, “Working in international collaborations” | Medium (career queries) | Low |
| Tool/project deep dives | “Building MapToPoster”, “Automating test beam data analysis”, “Why I built CERN Starter Pack” | Medium (project-specific) | Low |
| Conference/event recaps | Continue current format | Low | Low |
Post template
Create a reusable front matter template:
---
title: "Your Post Title"
title_en: "English Title"
title_es: "Spanish Title"
date: YYYY-MM-DD
excerpt: "150-character description for SEO and social sharing"
excerpt_en: "English excerpt"
excerpt_es: "Spanish excerpt"
tags:
- Tag1
- Tag2
header:
teaser: webp/post-image.webp
og_image: /images/og/post-title.png # Optional 1200x630 image
toc: true
toc_label: "Contents"
---
## Section Title
Publishing cadence
Aim for 1-2 posts per month. A reasonable schedule:
- 1 technical/tutorial post per month
- 1 lighter post (career, event, project update) per month
2. Project Pages Enhancement
Current State
Directory: _portfolio/
8 projects with consistent structure:
- Title (bilingual), excerpt, teaser image, tags
- Markdown content: overview, challenges, solutions, technical stack, results
Missing elements:
- No live demo links prominently displayed
- No GitHub badges (stars, language, last updated)
- No tech stack visual tags
- No project status indicator (active, completed, archived)
Implementation
Enhanced front matter
# _portfolio/example-project.md
---
title: "Project Title"
title_en: "English Title"
title_es: "Spanish Title"
excerpt: "Brief description"
collection: portfolio
header:
teaser: webp/project.webp
# New fields
status: active # active | completed | archived
demo_url: https://example.com
repo_url: https://github.com/EfrenPy/project
tech_stack:
- Python
- ROOT
- FPGA
- LabVIEW
started: 2023-01
role: "Lead Developer"
tags:
- Python
- Data Analysis
---
Updated archive-single template
Add badges and links to _includes/archive-single.html:
<!-- _includes/archive-single.html - add after the title -->
CSS for new elements
// _sass/_archive.scss - add new styles
.archive__item-status {
display: inline-block;
padding: 0.15em 0.5em;
font-size: 0.7em;
font-weight: 600;
border-radius: 1em;
text-transform: uppercase;
letter-spacing: 0.05em;
vertical-align: middle;
margin-left: 0.5em;
&--active {
background: rgba(16, 185, 129, 0.15);
color: #059669;
}
&--completed {
background: rgba(99, 102, 241, 0.15);
color: #4f46e5;
}
&--archived {
background: rgba(107, 114, 128, 0.15);
color: #6b7280;
}
[data-theme="dark"] & {
&--active { color: #34d399; }
&--completed { color: #818cf8; }
&--archived { color: #9ca3af; }
}
}
.archive__item-links {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
.btn--small {
font-size: 0.75em;
padding: 0.25em 0.75em;
}
}
.archive__item-tech {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.5rem;
}
.tech-tag {
display: inline-block;
padding: 0.1em 0.5em;
font-size: 0.7em;
background: var(--color-background-secondary, #f1f5f9);
color: var(--color-text-light, #64748b);
border-radius: 0.25em;
font-family: $monospace;
}
GitHub stats badges (optional)
For open-source projects, embed GitHub badges dynamically:
3. CV Interactive Timeline
Current State
File: _pages/cv.md
The CV uses custom HTML with CSS classes:
.cv-timelineand.cv-timeline-itemfor experience.cv-edu-cardfor education.cv-skill-tagfor skills- Font Awesome icons per entry
The current layout is a vertical timeline with icons, position titles, company names, dates, and bullet descriptions. It’s already well-structured.
Enhancements
Add expandable descriptions
For long CV entries, make descriptions collapsible:
<!-- In _pages/cv.md - wrap long descriptions -->
<div class="cv-timeline-item">
<div class="cv-timeline-icon"><i class="fas fa-briefcase"></i></div>
<div class="cv-timeline-content">
<h3>Postdoctoral Researcher</h3>
<p class="cv-timeline-company">CERN</p>
<p class="cv-timeline-date">Oct 2024 - Present</p>
<details class="cv-details">
<summary>
<span class="lang-en">View responsibilities</span>
<span class="lang-es">Ver responsabilidades</span>
</summary>
<ul>
<li>...</li>
<li>...</li>
</ul>
</details>
</div>
</div>
// _sass/_utilities.scss - add details/summary styling
.cv-details {
margin-top: 0.5rem;
summary {
cursor: pointer;
color: var(--color-primary);
font-size: 0.85em;
font-weight: 500;
&:hover {
text-decoration: underline;
}
&::marker {
color: var(--color-primary);
}
}
ul {
margin-top: 0.5rem;
padding-left: 1.25rem;
}
}
Add a visual timeline connector
Enhance the timeline with a connecting line:
// _sass/_utilities.scss - enhance timeline
.cv-timeline {
position: relative;
padding-left: 2rem;
&::before {
content: '';
position: absolute;
left: 0.75rem;
top: 0;
bottom: 0;
width: 2px;
background: var(--gradient-primary, linear-gradient(180deg, var(--color-primary), var(--color-accent)));
border-radius: 1px;
}
}
.cv-timeline-item {
position: relative;
margin-bottom: 2rem;
padding-left: 1.5rem;
.cv-timeline-icon {
position: absolute;
left: -1.5rem;
top: 0.25rem;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-background);
border: 2px solid var(--color-primary);
border-radius: 50%;
font-size: 0.65rem;
color: var(--color-primary);
z-index: 1;
}
}
Add print-friendly version
The CV page already has a PDF download link. Enhance the print stylesheet to make the web version printable:
// _sass/_print.scss - add CV-specific print styles
@media print {
.cv-download-btn { display: none; }
.cv-timeline::before { background: #000; }
.cv-timeline-icon { border-color: #000; color: #000; }
.cv-details[open] summary { display: none; }
.cv-details { display: block; }
.cv-skill-tag { border: 1px solid #ccc; }
}
4. 404 Page Enhancement
Current State
File: _pages/404.md
Current 404 page has:
- “404” large text
- Bilingual error message
- “Back to Home” button
- Witty excerpt
Enhancements
Add links to key sections and a search suggestion:
<!-- _pages/404.md - enhanced version -->
<div class="error-page">
<div class="error-page__code">404</div>
<div class="error-page__message">
<span class="lang-en">Oops! This page doesn't exist.</span>
<span class="lang-es">Esta pagina no existe.</span>
</div>
<p class="error-page__description">
<span class="lang-en">It might have been moved or deleted. Try one of these instead:</span>
<span class="lang-es">Puede que haya sido movida o eliminada. Prueba con alguna de estas:</span>
</p>
<div class="error-page__links">
<a href="/" class="btn btn--primary">
<i class="fas fa-home" aria-hidden="true"></i>
<span class="lang-en">Home</span>
<span class="lang-es">Inicio</span>
</a>
<a href="/portfolio/" class="btn btn--inverse">
<i class="fas fa-code" aria-hidden="true"></i>
<span class="lang-en">Projects</span>
<span class="lang-es">Proyectos</span>
</a>
<a href="/publications/" class="btn btn--inverse">
<i class="fas fa-book" aria-hidden="true"></i>
<span class="lang-en">Research</span>
<span class="lang-es">Investigacion</span>
</a>
<a href="/cv/" class="btn btn--inverse">
<i class="fas fa-file-alt" aria-hidden="true"></i>
CV
</a>
</div>
</div>
// _sass/_utilities.scss or inline styles
.error-page__links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-top: 1.5rem;
}
5. RSS Feed Visibility
Current State
jekyll-feedplugin generates/feed.xmlautomatically_includes/head.htmlincludes<link rel="alternate" type="application/atom+xml" href="/feed.xml">- No visible RSS link in navigation or footer
- No subscribe call-to-action anywhere on the site
Implementation
Add RSS icon to footer
<!-- _includes/footer.html - add to social-icons list -->
<li>
<a href="/feed.xml" title="RSS Feed" aria-label="RSS Feed">
<i class="fas fa-rss" aria-hidden="true"></i> RSS
</a>
</li>
Add subscribe CTA to blog archive
<!-- _pages/year-archive.html - add at top of page -->
<div class="archive__subscribe">
<p>
<span class="lang-en">Stay updated with new posts:</span>
<span class="lang-es">Mantente al dia con nuevas publicaciones:</span>
<a href="/feed.xml" class="btn btn--small btn--primary">
<i class="fas fa-rss" aria-hidden="true"></i>
<span class="lang-en">RSS Feed</span>
<span class="lang-es">Canal RSS</span>
</a>
</p>
</div>
6. Client-Side Search
Current State
_config.yml has search: true but no search implementation exists (no Lunr.js, Algolia, or custom search).
Implementation with Lunr.js
Step 1: Create search data JSON
Create assets/js/search-data.json:
---
layout: null
---
{
"portfolio-3d-sensor-simulation": {
"title": "3D Silicon Sensor Simulation",
"excerpt": "Developing simulation framework for next-generation radiation-hard particle detectors",
"url": "/portfolio/3d-sensor-simulation/",
"tags": ["Python","Simulation","Scientific Computing","Optimization"],
"collection": "portfolio",
"date": null
},
"portfolio-data-analysis-pipeline": {
"title": "Test Beam Data Pipeline",
"excerpt": "Built automated data processing system for particle physics experiments",
"url": "/portfolio/data-analysis-pipeline/",
"tags": ["Python","Data Engineering","ROOT","Automation","GRID Computing"],
"collection": "portfolio",
"date": null
},
"portfolio-julabo-control": {
"title": "JulaboFL1703-control",
"excerpt": "Python control suite for operating a Julabo recirculating chiller via CLI, GUI, and network interfaces",
"url": "/portfolio/julabo-control/",
"tags": ["Python","Serial Communication","GUI","TCP Server"],
"collection": "portfolio",
"date": null
},
"portfolio-lhcb-velo-upgrade": {
"title": "LHCb VELO Detector Upgrade",
"excerpt": "Contributed to a major particle physics detector upgrade at CERN's Large Hadron Collider",
"url": "/portfolio/lhcb-velo-upgrade/",
"tags": ["Electronics Design","Quality Assurance","International Collaboration","System Integration"],
"collection": "portfolio",
"date": null
},
"portfolio-maptoposter": {
"title": "MapToPoster",
"excerpt": "Python tool that transforms any city into minimalist map posters using OpenStreetMap data",
"url": "/portfolio/maptoposter/",
"tags": ["Python","OpenStreetMap","Data Visualization","Matplotlib"],
"collection": "portfolio",
"date": null
},
"portfolio-starter-pack": {
"title": "CERN Starter Pack",
"excerpt": "Bilingual informational website for newcomers at CERN covering legal, tax, and technical guidance",
"url": "/portfolio/starter-pack/",
"tags": ["HTML","CSS","JavaScript","Vite","i18n","SEO"],
"collection": "portfolio",
"date": null
},
"portfolio-timepix4-telescope": {
"title": "Timepix4 Beam Telescope",
"excerpt": "Led development of a precision particle tracking system achieving 90 picosecond time resolution",
"url": "/portfolio/timepix4-telescope/",
"tags": ["Python","Data Analysis","Hardware Integration","Project Management"],
"collection": "portfolio",
"date": null
},
"portfolio-vecindad-ames": {
"title": "Vecindad Ames",
"excerpt": "A civic engagement platform empowering residents of Ames, Spain to propose and drive community-led initiatives",
"url": "/portfolio/vecindad-ames/",
"tags": ["Civic Tech","Web Development","Community Engagement"],
"collection": "portfolio",
"date": null
},
"publication-the-lhcb-upgrade-i": {
"title": "The LHCb upgrade I",
"excerpt": "Detailing the first upgrade of the LHCb experiment, enhancing its capabilities for future research.",
"url": "/publication/the-lhcb-upgrade-i",
"tags": [],
"collection": "publications",
"date": "2023-01-01"
},
"publication-tracking-time-measurements-3d-pixel-time-resolution": {
"title": "Tracking the Time: Measurements towards the characterization of a 3D pixel in terms of time resolution and Landau contribution evaluation",
"excerpt": "Exploring the time resolution and Landau contribution of 3D pixel geometries in high-radiation environments.",
"url": "/publication/tracking-time-measurements-3D-pixel-time-resolution",
"tags": [],
"collection": "publications",
"date": "2023-01-01"
},
"publication-silicon-vertex-detector-timing-upgrade-ii-lhcb": {
"title": "Silicon vertex detector with timing for the Upgrade II of LHCb",
"excerpt": "Discussing the advancements in vertex detection technology for LHCb Upgrade II.",
"url": "/publication/silicon-vertex-detector-timing-upgrade-II-lhcb",
"tags": [],
"collection": "publications",
"date": "2023-03-01"
},
"posts-2024-10-new-horizons-at-cern": {
"title": "New Horizons in Particle Physics: My Role at CERN with the VELO Group",
"excerpt": "Embarking on a New Journey with CERN’s VELO GroupEmbarcándome en un Nuevo Viaje con el Grupo VELO del CERN",
"url": "/posts/2024/10/new-horizons-at-cern/",
"tags": ["Particle Physics","LHCb VELO Detector","CERN","Silicon Sensors","Timepix4"],
"collection": "posts",
"date": "2024-10-14"
},
"posts-2024-05-grid-ussage-nikhef": {
"title": "I Think I Broke the Grid: 3rd Place in Grid Usage at Nikhef!",
"excerpt": "Unveiling the Potential in Academic Research!Guess who’s been keeping the grid busy?That’s right, I managed to snag the 3rd place in grid usage at Nikhef for my timing analysis of the Timepix4 tele...",
"url": "/posts/2024/05/grid-ussage-nikhef/",
"tags": ["Data Analysis","Grid Computing","Research Innovation"],
"collection": "posts",
"date": "2024-05-13"
},
"posts-2023-12-generative-ai-for-dummies": {
"title": "Generative AI for Dummies",
"excerpt": "Unveiling the Potential in Academic Research!In a recent workshop titled “Generative AI for Dummies,” which I co-conducted with my esteemed colleague Victor Lopez Pardo, we embarked on a mission to...",
"url": "/posts/2023/12/generative-ai-for-dummies/",
"tags": ["Generative AI","AI Workshops","Research Innovation"],
"collection": "posts",
"date": "2023-12-22"
},
"posts-2023-12-hiroshima-symposium-particle-physics": {
"title": "Exploring the Frontiers of Particle Physics at the Hiroshima Symposium",
"excerpt": "Exploring the Frontiers of Particle Physics at the Hiroshima SymposiumToday marked a significant milestone in my journey through the realms of particle physics, as I had the privilege of presenting...",
"url": "/posts/2023/12/hiroshima-symposium-particle-physics/",
"tags": ["Particle Physics","LHCb VELO Detector","Research Innovation","Semiconductor Detectors"],
"collection": "posts",
"date": "2023-12-08"
},
"posts-2023-11-python-it-specialist-certification": {
"title": "Achievement Unlocked: INF-303 Python IT Specialist Certification",
"excerpt": "Achievement Unlocked!In a world where continuous learning and skill enhancement are keys to staying ahead in the tech realm, I am thrilled to share a recent milestone in my professional journey. I ...",
"url": "/posts/2023/11/python-it-specialist-certification/",
"tags": ["Python","Certification","IT Specialist","Milestone Reached"],
"collection": "posts",
"date": "2023-11-15"
},
"posts-2023-06-lhcb-velo-detector-launch": {
"title": "Journey to Unraveling the Universe's Mysteries: The LHCb VELO Detector Launch",
"excerpt": "Why is there more matter than antimatter in the universe?¿Por qué hay más materia que antimateria en el universo?",
"url": "/posts/2023/06/lhcb-velo-detector-launch/",
"tags": ["Particle Physics","CERN","LHCb VELO Detector","Research Innovation"],
"collection": "posts",
"date": "2023-06-30"
},
"posts-2022-06-advanced-detector-technologies-conference": {
"title": "Shaping the Future of Particle Physics: Insights from the Advanced Detector Technologies Conference",
"excerpt": "At the edge of Particle Physics Detectors at the “Pisa Meeting”Last week marked a significant milestone in my professional journey as I had the privilege to both present a talk and display a poster...",
"url": "/posts/2022/06/advanced-detector-technologies-conference/",
"tags": ["Particle Physics","LHCb VELO Detector","CERN","Conference"],
"collection": "posts",
"date": "2022-06-01"
},
"talks-silicon-vertex-detector-timing-lhcb-upgrade": {
"title": "A Silicon Vertex Detector with Timing for the Upgrade II of LHCb",
"excerpt": "Exploring advanced silicon vertex detector technologies for the LHCb Upgrade II with enhanced timing precision.",
"url": "/talks/silicon-vertex-detector-timing-lhcb-upgrade",
"tags": [],
"collection": "talks",
"date": "2022-05-24"
},
"talks-tracking-time-3d-pixel-resolution": {
"title": "Tracking the Time: Single cell 3D pixel time resolution and Landau contribution evaluation via test-beam and laboratory measurements",
"excerpt": "Investigating the timing resolution and Landau contribution of single cell 3D pixel technology in high radiation environments.",
"url": "/talks/tracking-time-3d-pixel-resolution",
"tags": [],
"collection": "talks",
"date": "2022-05-24"
},
"talks-timepix4-sps-results": {
"title": "New Results from Timepix4 at the SPS",
"excerpt": "Introducing the advancements in synchronous readout and track reconstruction with Timepix4 ASICs.",
"url": "/talks/timepix4-sps-results",
"tags": [],
"collection": "talks",
"date": "2023-02-28"
},
"talks-lhcb-velo-detector-design-operation-results": {
"title": "The LHCb VELO detector: design operation and first results",
"excerpt": "Presenting the design, operation, and initial outcomes of the upgraded LHCb VELO detector at CERN.",
"url": "/talks/lhcb-velo-detector-design-operation-results",
"tags": [],
"collection": "talks",
"date": "2023-12-04"
},
"workshops-generative-ais-for-dummies": {
"title": "Generative AIs for Dummies Workshop",
"excerpt": "An introductory workshop on Generative Artificial Intelligences, tailored for beginners in the field, focusing on practical applications in academic research.",
"url": "/workshops/generative-ais-for-dummies",
"tags": [],
"collection": "talks",
"date": "2023-12-20"
}
}
Step 2: Create search page
Create _pages/search.md:
---
layout: archive
title: "Search"
title_en: "Search"
title_es: "Buscar"
permalink: /search/
---
<div id="search-container">
<input type="search" id="search-input"
placeholder="Search publications, projects, posts..."
aria-label="Search site content"
autocomplete="off">
<div id="search-results" role="region" aria-live="polite" aria-label="Search results"></div>
</div>
Step 3: Add Lunr.js search script
// assets/js/search.js
(function() {
var searchInput = document.getElementById('search-input');
var resultsContainer = document.getElementById('search-results');
if (!searchInput) return;
var searchIndex = null;
var searchData = null;
// Load search data on first focus
searchInput.addEventListener('focus', function loadData() {
if (searchData) return;
fetch('/assets/js/search-data.json')
.then(function(r) { return r.json(); })
.then(function(data) {
searchData = data;
searchIndex = lunr(function() {
this.ref('id');
this.field('title', { boost: 10 });
this.field('excerpt', { boost: 5 });
this.field('tags', { boost: 3 });
this.field('collection');
Object.keys(data).forEach(function(key) {
var item = data[key];
item.id = key;
this.add(item);
}, this);
});
});
});
// Debounced search
var timeout;
searchInput.addEventListener('input', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
var query = searchInput.value.trim();
if (query.length < 2 || !searchIndex) {
resultsContainer.innerHTML = '';
return;
}
var results = searchIndex.search(query + '~1'); // Fuzzy match
if (results.length === 0) {
resultsContainer.innerHTML = '<p class="search-no-results">No results found.</p>';
return;
}
var html = '<ul class="search-results-list">';
results.slice(0, 10).forEach(function(result) {
var item = searchData[result.ref];
html += '<li class="search-result-item">';
html += '<a href="' + item.url + '">';
html += '<strong>' + item.title + '</strong>';
html += '<span class="search-result-collection">' + item.collection + '</span>';
html += '</a>';
if (item.excerpt) {
html += '<p>' + item.excerpt + '</p>';
}
html += '</li>';
});
html += '</ul>';
resultsContainer.innerHTML = html;
}, 300);
});
})();
Step 4: Add Lunr.js dependency
Download lunr.min.js from lunrjs.com and place it in assets/js/.
Include in search page only (not globally):
<!-- _layouts/search.html or conditional in scripts.html -->
Step 5: Add search to navigation
# _data/navigation.yml - add search icon
main:
# ... existing items ...
- title: "Search"
title_en: "Search"
title_es: "Buscar"
url: /search/
icon: "fas fa-search" # Optional icon indicator
7. Reading Progress & Engagement
Current State
A scroll progress bar exists (_main.js) showing page scroll position. Blog posts show read time.
Enhancements
Add “related posts” section
<!-- _includes/related-posts.html -->
Add table of contents for long posts
Enable TOC in post front matter:
---
toc: true
toc_label: "Contents"
toc_sticky: true # Sticky sidebar TOC
---
The Minimal Mistakes theme already supports this - just needs to be enabled per post.
Priority Matrix
| Improvement | Impact | Effort | Priority |
|---|---|---|---|
| Project page enhancements (status, tech, links) | High | Medium | P0 |
| 404 page enhancement | Medium | Low | P1 |
| RSS feed visibility | Low | Low | P1 |
| Blog content strategy | High | Ongoing | P1 |
| Client-side search | Medium | Medium | P2 |
| CV timeline enhancements | Low | Medium | P2 |
| Related posts | Medium | Medium | P2 |
| TOC for long content | Low | Low | P2 |