Content & UX Improvements

Content & UX Improvements

Deep analysis and implementation guide for improving content strategy, user experience, and engagement.


Table of Contents

  1. Blog Content Strategy
  2. Project Pages Enhancement
  3. CV Interactive Timeline
  4. 404 Page Enhancement
  5. RSS Feed Visibility
  6. Client-Side Search
  7. Reading Progress & Engagement

1. Blog Content Strategy

Current State

Directory: _posts/

7 blog posts exist, all conference/event recaps:

  1. Advanced Detector Technologies Conference (2022)
  2. Hiroshima Symposium on Particle Physics (2023)
  3. 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-timeline and .cv-timeline-item for experience
  • .cv-edu-card for education
  • .cv-skill-tag for 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-feed plugin generates /feed.xml automatically
  • _includes/head.html includes <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

<!-- _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>

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

<!-- _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