feat(resume): render resume as html

biome.json

@@ -6,7 +6,8 @@
     "useIgnoreFile": true
   },
   "files": {
-    "ignoreUnknown": false
+    "ignoreUnknown": false,
+    "includes": ["src/**", "scripts/**"]
   },
   "formatter": {
     "enabled": true,

scripts/copy-resume.js

@@ -1,16 +1,16 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 
 const srcDir = 'external/resume/out';
 const destDir = 'public/resume';
 
 // Ensure destination directory exists
 fs.mkdirSync(destDir, { recursive: true });
 
-// Copy only PDF files
+// Copy PDF and HTML files
 const files = fs.readdirSync(srcDir);
 for (const file of files) {
-  if (file.endsWith('.pdf')) {
+  if (file.endsWith('.pdf') || file.endsWith('.html')) {
     fs.copyFileSync(path.join(srcDir, file), path.join(destDir, file));
     console.log(`Copied ${file}`);
   }

src/app/[locale]/resume/page.tsx

@@ -1,3 +1,5 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
 import Resume from '@/components/resume/Resume';
 import StaticOutput from '@/components/StaticOutput';
 import TerminalEmulator from '@/components/terminal/TerminalEmulator';
@@ -12,12 +14,27 @@ interface ResumePageProps {
 export const generateMetadata = async (routeData: RouteData) =>
   await setPageMeta(routeData, 'resume');
 
+async function getResumeHtml() {
+  const publicDir = join(process.cwd(), 'public', 'resume');
+  const [htmlEn, htmlFr] = await Promise.all([
+    readFile(join(publicDir, 'Xavier-SALINIERE_resume.EN.html'), 'utf-8').catch(
+      () => '',
+    ),
+    readFile(join(publicDir, 'Xavier-SALINIERE_resume.FR.html'), 'utf-8').catch(
+      () => '',
+    ),
+  ]);
+  return { htmlEn, htmlFr };
+}
+
 export default async function ResumePage({ params }: ResumePageProps) {
   await params;
+  const { htmlEn, htmlFr } = await getResumeHtml();
+
   return (
     <>
       <StaticOutput>
-        <Resume />
+        <Resume htmlEn={htmlEn} htmlFr={htmlFr} />
       </StaticOutput>
       <TerminalEmulator initialCommand={Command.Resume} />
     </>

src/components/resume/Resume.tsx

@@ -1,19 +1,57 @@
 'use client';
 
-import { Badge, Button, Typography } from '@nipsys/lsd';
+import { Badge, Button, ScrollArea, Typography } from '@nipsys/lsd';
 import { useLocale, useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { ResumeHtml } from './ResumeHtml';
 
 const RESUME_PATHS = {
-  en: '/resume/Xavier-SALINIERE_resume.EN.pdf',
-  fr: '/resume/Xavier-SALINIERE_resume.FR.pdf',
+  en: {
+    pdf: '/resume/Xavier-SALINIERE_resume.EN.pdf',
+    html: '/resume/Xavier-SALINIERE_resume.EN.html',
+  },
+  fr: {
+    pdf: '/resume/Xavier-SALINIERE_resume.FR.pdf',
+    html: '/resume/Xavier-SALINIERE_resume.FR.html',
+  },
 };
 
-export default function Resume() {
+interface ResumeProps {
+  htmlEn?: string;
+  htmlFr?: string;
+}
+
+async function fetchHtml(locale: 'en' | 'fr'): Promise<string> {
+  const response = await fetch(RESUME_PATHS[locale].html);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch resume HTML: ${response.status}`);
+  }
+  return response.text();
+}
+
+export default function Resume({ htmlEn, htmlFr }: ResumeProps) {
   const locale = useLocale();
   const t = useTranslations('Terminal.cmds.resume');
 
   const currentLocale = locale === 'fr' ? 'fr' : 'en';
-  const currentPdfPath = RESUME_PATHS[currentLocale];
+
+  const [html, setHtml] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const initialHtml = currentLocale === 'fr' ? htmlFr : htmlEn;
+    if (initialHtml) {
+      setHtml(initialHtml);
+      return;
+    }
+
+    fetchHtml(currentLocale)
+      .then(setHtml)
+      .catch((err) => {
+        console.error('Failed to load resume:', err);
+        setError('Failed to load resume');
+      });
+  }, [currentLocale, htmlEn, htmlFr]);
 
   return (
     <div className="flex flex-col gap-(--lsd-spacing-large) py-(--lsd-spacing-small)">
@@ -32,24 +70,32 @@ export default function Resume() {
 
       <div className="flex flex-wrap gap-(--lsd-spacing-smaller)">
         <Button variant="outlined" size="sm" asChild>
-          <a href={RESUME_PATHS.en} download>
+          <a href={RESUME_PATHS.en.pdf} download>
             {t('downloadEN')}
           </a>
         </Button>
         <Button variant="outlined" size="sm" asChild>
-          <a href={RESUME_PATHS.fr} download>
+          <a href={RESUME_PATHS.fr.pdf} download>
             {t('downloadFR')}
           </a>
         </Button>
       </div>
 
       <div className="flex flex-col gap-(--lsd-spacing-base)">
-        <div className="w-full h-[600px] border border-(--lsd-color-border) rounded-(--lsd-shape-sm) overflow-hidden">
-          <iframe
-            src={currentPdfPath}
-            className="w-full h-full"
-            title="Resume PDF"
-          />
+        <div className="w-full max-w-6xl h-[600px] border border-(--lsd-color-border) rounded-(--lsd-shape-sm) overflow-hidden">
+          <ScrollArea className="h-full">
+            {error ? (
+              <div className="p-4 text-center text-(--lsd-color-text-error)">
+                {error}
+              </div>
+            ) : html ? (
+              <ResumeHtml htmlContent={html} />
+            ) : (
+              <div className="p-4 text-center text-(--lsd-color-text-secondary)">
+                Loading...
+              </div>
+            )}
+          </ScrollArea>
         </div>
       </div>
     </div>

src/components/resume/ResumeHtml.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useStore } from '@nanostores/react';
+import { useEffect, useRef, useState } from 'react';
+import { $isDarkMode } from '@/stores/theme-store';
+
+interface ResumeHtmlProps {
+  htmlContent: string;
+}
+
+function extractContent(html: string): {
+  body: string;
+  style: string;
+  script: string;
+} {
+  const styleMatch = html.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
+  const scriptMatch = html.match(
+    /<script[^>]*type="module"[^>]*>([\s\S]*?)<\/script>/i,
+  );
+  const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+
+  return {
+    style: styleMatch?.[1] || '',
+    script: scriptMatch?.[1] || '',
+    body: bodyMatch?.[1] || '',
+  };
+}
+
+export function ResumeHtml({ htmlContent }: ResumeHtmlProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const shadowRef = useRef<ShadowRoot | null>(null);
+  const isDarkMode = useStore($isDarkMode);
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    if (!shadowRef.current) {
+      shadowRef.current = containerRef.current.attachShadow({ mode: 'open' });
+    }
+
+    const shadow = shadowRef.current;
+    const { style, body, script } = extractContent(htmlContent);
+
+    shadow.innerHTML = '';
+
+    const hostStyles = `
+      :host {
+        display: block;
+        width: 100%;
+        min-height: 100%;
+      }
+      :host(.dark) {
+        --color-background: var(--color-background-dark, #191e23);
+        --color-dimmed: var(--color-dimmed-dark, #23282d);
+        --color-primary: var(--color-primary-dark, #fbfbfc);
+        --color-secondary: var(--color-secondary-dark, #ccd0d4);
+        --color-accent: var(--color-accent-dark, #00a0d2);
+      }
+      :host(.light) {
+        --color-background: var(--color-background-light, #ffffff);
+        --color-dimmed: var(--color-dimmed-light, #f3f4f5);
+        --color-primary: var(--color-primary-light, #191e23);
+        --color-secondary: var(--color-secondary-light, #6c7781);
+        --color-accent: var(--color-accent-light, #0073aa);
+      }
+      .resume-wrapper {
+        background: var(--color-background);
+        padding: 1.5rem;
+        min-height: 100%;
+      }
+    `;
+
+    const styleEl = document.createElement('style');
+    styleEl.textContent = hostStyles + style;
+    shadow.appendChild(styleEl);
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'resume-wrapper';
+    wrapper.innerHTML = body;
+    shadow.appendChild(wrapper);
+
+    if (script) {
+      const scriptEl = document.createElement('script');
+      scriptEl.type = 'module';
+      scriptEl.textContent = script;
+      shadow.appendChild(scriptEl);
+    }
+
+    setInitialized(true);
+  }, [htmlContent]);
+
+  useEffect(() => {
+    if (!containerRef.current || !initialized) return;
+
+    const host = containerRef.current;
+    if (isDarkMode) {
+      host.classList.add('dark');
+      host.classList.remove('light');
+    } else {
+      host.classList.add('light');
+      host.classList.remove('dark');
+    }
+  }, [isDarkMode, initialized]);
+
+  return <div ref={containerRef} className={isDarkMode ? 'dark' : 'light'} />;
+}

src/i18n/messages/en.json

@@ -129,8 +129,8 @@
         "description": "View my resume/CV",
         "title": "Resume",
         "subtitle": "View and download my resume in PDF format",
-        "downloadEN": "Download (English)",
-        "downloadFR": "Download (French)",
+        "downloadEN": "Download English PDF",
+        "downloadFR": "Download French PDF",
         "viewing": "Currently viewing",
         "version": "version"
       }

src/i18n/messages/fr.json

@@ -129,8 +129,8 @@
         "description": "Voir mon CV",
         "title": "CV",
         "subtitle": "Afficher et télécharger mon CV en format PDF",
-        "downloadEN": "Télécharger (Anglais)",
-        "downloadFR": "Télécharger (Français)",
+        "downloadEN": "Télécharger le PDF en Anglais",
+        "downloadFR": "Télécharger le PDF Français",
         "viewing": "Version",
         "version": "actuellement affichée"
       }