feat(research): link the Master's thesis

src/components/Experience.astro

@@ -1,5 +1,12 @@
 ---
-import { experience } from '../data/profile';
+import { experience, type Mission } from '../data/profile';
+
+/** Splits a summary around its linked phrase, when it has one. */
+function split({ summary, link }: Mission): (string | NonNullable<Mission['link']>)[] {
+  const at = link ? summary.indexOf(link.text) : -1;
+  if (!link || at < 0) return [summary];
+  return [summary.slice(0, at), link, summary.slice(at + link.text.length)];
+}
 ---
 
 <section id="experience" class="experience" aria-labelledby="experience-title">
@@ -28,7 +35,17 @@ import { experience } from '../data/profile';
                 <p class="meta">
                   {missions.length > 1 ? `${mission.period} · ${mission.place}` : mission.place}
                 </p>
-                <p class="summary">{mission.summary}</p>
+                <p class="summary">
+                  {split(mission).map((part) =>
+                    typeof part === 'string' ? (
+                      part
+                    ) : (
+                      <a href={part.url} download>
+                        {part.text}
+                      </a>
+                    ),
+                  )}
+                </p>
                 <ul class="stack" aria-label="Technologies">
                   {mission.stack.map((tech) => (
                     <li>{tech}</li>
@@ -156,6 +173,19 @@ import { experience } from '../data/profile';
     color: var(--soft);
   }
 
+  .summary a {
+    color: var(--text);
+    text-decoration: underline;
+    text-decoration-color: var(--primary);
+    text-decoration-thickness: 1.5px;
+    text-underline-offset: 3px;
+    transition: color 0.3s;
+  }
+
+  .summary a:hover {
+    color: var(--primary);
+  }
+
   .stack {
     display: flex;
     flex-wrap: wrap;

src/components/Research.astro

@@ -32,10 +32,11 @@ const me = `${person.firstName[0]}. ${person.lastName}`;
       ))}
     </div>
     <ul class="highlights">
-      {highlights.map(({ title, text }) => (
+      {highlights.map(({ title, text, url, link }) => (
         <li class="reveal">
           <b>{title}</b>
           <span>{text}</span>
+          {url && <a href={url}>{link} →</a>}
         </li>
       ))}
     </ul>
@@ -130,6 +131,14 @@ const me = `${person.firstName[0]}. ${person.lastName}`;
     color: var(--soft);
   }
 
+  .highlights a {
+    display: inline-block;
+    margin-top: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--primary);
+  }
+
   @media (max-width: 920px) {
     .papers,
     .highlights {

src/data/profile.ts

@@ -36,6 +36,7 @@ export const person = {
   credly: 'https://www.credly.com/users/terencio-agozzino/badges',
   /** Served from public/; replace the file there to update it. */
   cv: '/terencio-agozzino-cv.pdf',
+  thesis: '/terencio-agozzino-master-thesis.pdf',
 } as const;
 
 /**
@@ -116,6 +117,8 @@ export interface Mission {
   period: string;
   place: string;
   summary: string;
+  /** A phrase of the summary that downloads a document, such as a thesis. */
+  link?: { text: string; url: string };
   stack: string[];
 }
 
@@ -222,6 +225,7 @@ export const experience: Employer[] = [
         place: 'Ghent, Belgium',
         summary:
           "Built pyRDF2Vec, now a widely cited library for knowledge-graph embeddings, and evaluated BERT within RDF2Vec for my Master's thesis.",
+        link: { text: "Master's thesis", url: person.thesis },
         stack: ['Python', 'Knowledge graphs', 'NLP', 'CI/CD'],
       },
     ],
@@ -332,5 +336,7 @@ export const highlights = [
   {
     title: 'Master in Computer & Systems Engineering',
     text: 'Haute École en Hainaut, Mons · 2021',
+    url: person.thesis,
+    link: 'Read the thesis',
   },
 ];

tests/site.spec.ts

@@ -57,9 +57,10 @@ test('loads every image', async ({ page }) => {
   expect(broken).toEqual([]);
 });
 
-test('serves the CV and the icons', async ({ request }) => {
+test('serves the CV, the thesis and the icons', async ({ request }) => {
   const files = {
     '/terencio-agozzino-cv.pdf': 'application/pdf',
+    '/terencio-agozzino-master-thesis.pdf': 'application/pdf',
     '/favicon.svg': 'image/svg+xml',
     '/favicon.ico': 'image/',
     '/apple-touch-icon.png': 'image/png',