AI Assistant Memory — Lasai Barreñada’s Academic Website

Personal academic Quarto website for Lasai Barreñada, a medical statistician at KU Leuven.
Live URL: https://lasaibarrenada.github.io/
Source repo: https://github.com/LasaiBarrenada/LasaiBarrenada.github.io/

Before you do anything

Always read MAINTENANCE.md before touching any file. It is the authoritative guide to how every part of the site works, and it is kept up to date after every session. This AGENTS.md is a quick-start summary; MAINTENANCE.md has the full detail.

Project structure

_quarto.yml                  # Site config: navbar, footer, theme, freeze, search:false
_variables.yml               # Global variables, e.g. last_updated date
index.qmd                    # Landing page (hero, particle canvas, Easter egg)
projects/
  projects-page.qmd          # Timeline page — reads projects.xlsx via R
  projects.xlsx              # Data source for projects timeline
speaking/
  speaking-page.qmd          # Talks page — reads conferences.xlsx + Leaflet map
  conferences.xlsx           # Data source for talks timeline and map
Publications/
  publications-page.qmd      # Co-authorship network (D3) from Google Scholar
cv/
  cv-page.qmd                # HTML CV page (freeze:true)
  cv.qmd                     # PDF CV source (quarto-cv-pdf format)
  cv.pdf                     # Rendered PDF linked from cv-page
  peer_bib.bib               # BibTeX publications list
html/
  styles.scss                # Global SCSS: fonts, colors, navbar responsive rules
  timeline.css               # Shared timeline CSS for projects + speaking pages
  landing_page_styles.css    # Hero section layout
  seo.html                   # Meta tags injected into every page <head>
img/
  lb_logo_opt1.svg           # Navbar logo (LB initials)
  favicon.svg                # Browser tab icon
  lasai_headshot.png         # Profile photo on landing page
  website_thumbnail.png      # Social preview image
  logo_kuleuven.svg          # KU Leuven logo (spare, not used on site)
  logo_umcutrecht.svg        # UMC Utrecht logo (spare, not used on site)
  logo_msk.jpeg              # Memorial Sloan Kettering logo (spare, not used on site)
license/index.qmd            # License page (MIT code + copyright content)
MAINTENANCE.md               # Full maintenance guide — always read this first
AGENTS.md                    # This file

Key site behaviours

Freeze

execute: freeze: true globally — R code is cached in _freeze/ and only re-runs when the cache is deleted. Exceptions: projects-page.qmd and speaking-page.qmd both have freeze: false — they always re-execute on render. The Publications page (_freeze/Publications/) must be manually cleared when a new paper appears on Google Scholar.

Deployment

quarto render        # builds _site/
quarto preview       # local hot-reload at localhost:22222
quarto publish gh-pages   # push to GitHub Pages

Landing page (index.qmd)

The hero section has: - A particle animation canvas (#hero-canvas) — 60 floating dots with connecting lines, drawn with vanilla JS. pointer-events: none on the canvas so clicks pass through. - An interactive LOESS Easter egg — click on the hero background to place blue data points. At 10 points, a LOESS curve (tricube kernel, span=0.75) is fitted and R² is shown in the top-right. A “⟳ Random data” button (top-right, top:56px) auto-generates 10 random points. 11th click resets everything. - Profile photo (img/lasai_headshot.png) and bio text in <p> tags inside the {=html} block.

Projects page (projects/projects-page.qmd)

  • R chunk tl-projects reads projects/projects.xlsx, sorts by -Year, -Month, and builds HTML cards via sprintf()/paste0() with cat(..., results='asis').
  • Year dividers are inserted automatically when the year changes between entries.
  • Upcoming projects (no Link_1) get a grey hollow dot, grey card, and “Upcoming” badge.
  • Links with “Award” in the name get a gold style with 🏆 icon (class tl-award).
  • ⚠️ No line of generated HTML may start with 4+ spaces — Pandoc treats that as a code block.
  • Shares all timeline CSS from html/timeline.css.

Talks page (speaking/speaking-page.qmd)

  • Navbar tab is labelled “Talks” — the file lives in speaking/.
  • Same timeline structure as projects (R chunk tl-speaking, year dividers, html/timeline.css).
  • Map: R chunk map-data geocodes city names and injects coordinates as JS arrays (conferenceData, universityData). The map is built with Leaflet.js + CartoDB Voyager tiles. Red circles = conferences; blue pulsing circles = affiliated institutions (KU Leuven, UMC Utrecht, Memorial Sloan Kettering). Popups on click, works on mobile. No travel arcs. Zoom constrained to a single world view (minZoom: 2, maxBounds).
  • Map → timeline linking: each timeline entry has a unique id (e.g., talk-iscb-2024). Conference popups have a “Show in timeline ↓” link that smooth-scrolls to the entry and highlights it with a blue pulse animation (tl-highlight class).
  • University popups: UMC Utrecht and MSK show “Visiting Researcher” below the name; KU Leuven does not (home institution).
  • Affiliated institutions are defined in the map-data R chunk as a uni_coords data frame.
  • ⚠️ Same 4-space indentation constraint as the projects page.

Publications page (Publications/publications-page.qmd)

  • Pulls data live from Google Scholar (user ID uPOL3NkAAAAJ) via the scholar R package.
  • Builds a D3 force-directed co-authorship network — nodes = co-authors, edges = shared papers, minimum 2 shared papers to appear.
  • Author name deduplication: accent variants are normalised; a manual_corrections vector handles edge cases (Dutch particle names, compound surnames).
  • Preprint/journal deduplication: Jaccard similarity ≥ 0.28 drops the preprint.
  • Cache in _freeze/Publications/ — delete to force re-fetch from Google Scholar.
  • ⚠️ D3 tooltips use mouseover — they do NOT work on mobile touch devices.

Timeline CSS (html/timeline.css)

Shared between projects and speaking pages. Contains: - .tl-wrapper, .tl-entry, .tl-date, .tl-card, .tl-title, .tl-venue - .tl-links, .tl-links a, .tl-award (gold award style with 🏆) - .tl-type, .tl-type-talk, .tl-type-poster, .tl-type-upcoming - .tl-year-divider — bold blue year label with a dash on the timeline line - .tl-toggle, .tl-summary — expand/collapse animation - @media (max-width: 600px) mobile rules

Do not inline timeline styles in the page files. Both pages load this file with a <link> tag.

Global styles (html/styles.scss)

  • Body and heading font: Inter (loaded from Bunny Fonts)
  • Accent colour: #007BFF
  • Navbar responsive block at @media (max-width: 991.98px):
    • Logo shrinks to 28px
    • Container padding set to 0.75rem each side
    • .navbar-brand: order:0, margin-right:auto, flex-shrink:0
    • .navbar-toggler: order:1, margin-left:0.5rem, flex-shrink:0
    • ⚠️ Do NOT add margin-left: auto to the toggler — it conflicts with margin-right: auto on the brand and causes overlap.

Common gotchas

Gotcha Detail
4-space indent in R-generated HTML Pandoc treats it as a code block — keep all sprintf templates ≤ 3 spaces
Freeze not updating Delete the relevant _freeze/<page>/ folder and re-render
Search reappearing It’s disabled with search: false — removing the line re-enables the default (on)
Hamburger overlapping logo margin-left: auto on toggler conflicts with margin-right: auto on brand — use only the brand’s auto margin
D3 tooltips on mobile The Publications network uses mouseover — no touch support
Logo SVG needs explicit dimensions SVGs without width/height attributes collapse to zero in some browsers
Map geocoding needs internet The map-data chunk in speaking-page uses tidygeocoder — requires network access on render