{feature.title}
+ +{feature.description}
+ + {feature.bullets.length > 0 && ( +-
+ {feature.bullets.map((bullet) => (
+
- + + {bullet} + + ))} +
{summary}
diff --git a/src/features/projects/components/ProjectReleaseHighlights.tsx b/src/features/projects/components/ProjectReleaseHighlights.tsx
new file mode 100644
index 0000000..16937d3
--- /dev/null
+++ b/src/features/projects/components/ProjectReleaseHighlights.tsx
@@ -0,0 +1,239 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { CloseIcon, ExternalLinkIcon } from '@/components/ui'
+import { cn } from '@/lib/utils'
+import type { LocalizedProjectRelease, LocalizedProjectReleaseFeature } from '../detail'
+
+interface ProjectReleaseHighlightsProps {
+ release: LocalizedProjectRelease
+ watchLabel: string
+ tutorialLabel: string
+ closeLabel: string
+ youtubeLabel: string
+}
+
+function PlayIcon({ className }: { className?: string }) {
+ return (
+
+ )
+}
+
+/** youtu.be/ and youtube.com/watch?v= both reduce to the embeddable id. */
+function getYoutubeId(url: string): string | null {
+ const match = /(?:youtu\.be\/|[?&]v=|\/embed\/)([A-Za-z0-9_-]{6,})/.exec(url)
+ return match?.[1] ?? null
+}
+
+interface ReleaseFeatureCardProps {
+ feature: LocalizedProjectReleaseFeature
+ isFlipped: boolean
+ onFlip: (id: string) => void
+ onClose: () => void
+ watchLabel: string
+ closeLabel: string
+ youtubeLabel: string
+}
+
+function ReleaseFeatureCard({
+ feature,
+ isFlipped,
+ onFlip,
+ onClose,
+ watchLabel,
+ closeLabel,
+ youtubeLabel,
+}: ReleaseFeatureCardProps) {
+ const videoId = feature.videoUrl ? getYoutubeId(feature.videoUrl) : null
+
+ // Clicking the card body flips it too, but never while the reader is
+ // selecting text inside it.
+ const handleCardClick = useCallback(() => {
+ if (!videoId) return
+ if (typeof window !== 'undefined' && window.getSelection()?.toString()) return
+ onFlip(feature.id)
+ }, [feature.id, onFlip, videoId])
+
+ return (
+ (null)
+
+ const handleFlip = useCallback((id: string) => {
+ setFlippedId((current) => (current === id ? null : id))
+ }, [])
+
+ const handleClose = useCallback(() => setFlippedId(null), [])
+
+ useEffect(() => {
+ if (!flippedId) return
+
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') setFlippedId(null)
+ }
+
+ window.addEventListener('keydown', onKeyDown)
+ return () => window.removeEventListener('keydown', onKeyDown)
+ }, [flippedId])
+
+ if (release.features.length === 0) {
+ return null
+ }
+
+ return (
+
+
+ )
+}
diff --git a/src/features/projects/detail.ts b/src/features/projects/detail.ts
index 24982f1..90ff107 100644
--- a/src/features/projects/detail.ts
+++ b/src/features/projects/detail.ts
@@ -8,6 +8,24 @@ export interface ProjectDetailLink {
kind?: 'repo' | 'web' | 'marketplace' | 'doi' | 'ieee' | 'award' | 'certificate'
}
+export interface LocalizedProjectReleaseFeature {
+ id: string
+ title: string
+ description: string
+ bullets: string[]
+ videoUrl?: string
+}
+
+export interface LocalizedProjectRelease {
+ version: string
+ date: string
+ title: string
+ codename?: string
+ intro: string
+ tutorialUrl?: string
+ features: LocalizedProjectReleaseFeature[]
+}
+
export interface LocalizedProjectDetail {
summary: string
detailSummary: string
@@ -21,6 +39,7 @@ export interface LocalizedProjectDetail {
description: string
status?: ProjectMilestone['status']
}>
+ release?: LocalizedProjectRelease
}
export function getAdjacentProjects(currentSlug: string, projects: Project[]): { prev: Project | null; next: Project | null } {
@@ -52,6 +71,21 @@ export function getLocalizedProjectDetail(project: Project, locale: Locale): Loc
description: isSpanish ? milestone.description_es : milestone.description_en,
status: milestone.status,
})) ?? [],
+ release: project.release && {
+ version: project.release.version,
+ date: isSpanish ? project.release.date_es : project.release.date_en,
+ title: isSpanish ? project.release.title_es : project.release.title_en,
+ codename: isSpanish ? project.release.codename_es : project.release.codename_en,
+ intro: isSpanish ? project.release.intro_es : project.release.intro_en,
+ tutorialUrl: project.release.tutorialUrl,
+ features: project.release.features.map((feature) => ({
+ id: feature.id,
+ title: isSpanish ? feature.title_es : feature.title_en,
+ description: isSpanish ? feature.description_es : feature.description_en,
+ bullets: (isSpanish ? feature.bullets_es : feature.bullets_en) ?? [],
+ videoUrl: feature.videoUrl,
+ })),
+ },
}
}
diff --git a/src/features/projects/types.ts b/src/features/projects/types.ts
index 19cb886..9f66975 100644
--- a/src/features/projects/types.ts
+++ b/src/features/projects/types.ts
@@ -47,6 +47,7 @@ export interface Project {
supervisorUrl?: string
tech: string[]
milestones?: ProjectMilestone[]
+ release?: ProjectRelease
}
export interface ProjectMilestone {
@@ -60,8 +61,35 @@ export interface ProjectMilestone {
status?: 'released' | 'awarded' | 'presented' | 'active'
}
+/** A single headline of the latest release, shown as a card on the project page. */
+export interface ProjectReleaseFeature {
+ id: string
+ title_en: string
+ title_es: string
+ description_en: string
+ description_es: string
+ bullets_en?: string[]
+ bullets_es?: string[]
+ videoUrl?: string
+}
+
+/** What the latest release brought, rendered above the project narrative. */
+export interface ProjectRelease {
+ version: string
+ date_en: string
+ date_es: string
+ title_en: string
+ title_es: string
+ codename_en?: string
+ codename_es?: string
+ intro_en: string
+ intro_es: string
+ tutorialUrl?: string
+ features: ProjectReleaseFeature[]
+}
+
// Localized project for display
-export interface LocalizedProject extends Omit {
+export interface LocalizedProject extends Omit {
summary: string
detailSummary?: string
highlights: string[]
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index aca0326..1d8ce80 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -581,7 +581,7 @@
"summary": "Data interchange and persistence format used in tooling and project manifests.",
"purpose": "Portable structured data for app and tooling flows.",
"h1": "Stored analysis outputs and project metadata.",
- "h2": "Connected static analysis data with UI and XR rendering."
+ "h2": "Connected analysis data with UI and XR rendering."
},
"googleMaps": {
"label": "Google Maps",
@@ -760,6 +760,12 @@
"summaryTitle": "Project narrative",
"milestones": "Versions & milestones"
},
+ "release": {
+ "watch": "Watch the demo",
+ "tutorial": "Full tutorial (12:24)",
+ "close": "Close the video",
+ "youtube": "Open on YouTube"
+ },
"quickFacts": {
"title": "Quick facts",
"type": "Type",
@@ -834,12 +840,12 @@
"codexr": {
"role": "Author & Lead Developer",
"org": "Code-XR (Open Source)",
- "desc": "Active VS Code extension for XR/3D visualization of software metrics. Started as a final degree project, accepted at VISSOFT @ ICSME 2025, released as version 1.1.0 outside the thesis context, and currently evolving toward 1.2.0.",
+ "desc": "Active VS Code extension for XR/3D visualization of software metrics. Started as a final degree project, accepted at VISSOFT @ ICSME 2025, released as version 1.1.0 outside the thesis context, and evolved into version 1.2.0 in July 2026, which added the dependency graph, the two Git analyses and cross-network sessions. Still under active development.",
"highlights": {
"v008Poster": "v0.0.8 - VISSOFT poster track",
"v100Defense": "v1.0.0 - university defense",
"v110Release": "v1.1.0 - public release",
- "v120Current": "v1.2.0 - in progress"
+ "v120Release": "v1.2.0 - public release"
}
},
"vissoft": {
diff --git a/src/i18n/messages/es.json b/src/i18n/messages/es.json
index 5afdc7b..0759e1a 100644
--- a/src/i18n/messages/es.json
+++ b/src/i18n/messages/es.json
@@ -760,6 +760,12 @@
"summaryTitle": "Narrativa del proyecto",
"milestones": "Versiones e hitos"
},
+ "release": {
+ "watch": "Ver la demo",
+ "tutorial": "Tutorial completo (12:24)",
+ "close": "Cerrar el vídeo",
+ "youtube": "Abrir en YouTube"
+ },
"quickFacts": {
"title": "Datos rápidos",
"type": "Tipo",
@@ -834,12 +840,12 @@
"codexr": {
"role": "Autor & Lead Developer",
"org": "Code-XR (Open Source)",
- "desc": "Extensión activa de VS Code para visualización XR/3D de métricas de software. Nació como trabajo fin de grado, fue aceptada en VISSOFT @ ICSME 2025, salió como versión 1.1.0 fuera del contexto del TFG y actualmente evoluciona hacia la 1.2.0.",
+ "desc": "Extensión activa de VS Code para visualización XR/3D de métricas de software. Nació como trabajo fin de grado, fue aceptada en VISSOFT @ ICSME 2025, salió como versión 1.1.0 fuera del contexto del TFG y evolucionó hasta la versión 1.2.0 en julio de 2026, que añadió el grafo de dependencias, los dos análisis de Git y las sesiones entre redes. Sigue en desarrollo activo.",
"highlights": {
"v008Poster": "v0.0.8 - poster track en VISSOFT",
"v100Defense": "v1.0.0 - defensa universitaria",
"v110Release": "v1.1.0 - release pública",
- "v120Current": "v1.2.0 - en progreso"
+ "v120Release": "v1.2.0 - release pública"
}
},
"vissoft": {
diff --git a/src/lib/seo.ts b/src/lib/seo.ts
index c845492..f2e599e 100644
--- a/src/lib/seo.ts
+++ b/src/lib/seo.ts
@@ -11,7 +11,7 @@ const messages = {
} as const
export const OG_IMAGE = '/images/og/portfolio.png'
-export const LAST_MODIFIED = '2026-05-09'
+export const LAST_MODIFIED = '2026-08-29'
const localeMeta = {
en: {
+
+ )
+}
+
+export function ProjectReleaseHighlights({
+ release,
+ watchLabel,
+ tutorialLabel,
+ closeLabel,
+ youtubeLabel,
+}: ProjectReleaseHighlightsProps) {
+ // One card open at a time: four YouTube players at once is not a reading experience.
+ const [flippedId, setFlippedId] = useState
+
+
+
+ {videoId && (
+
+
+
+ )}
+
+
+
+ {/* The player keeps its own 16:9 box and sits centred in whatever
+ height the card has, instead of stretching into black bars. */}
+ {feature.title}
+ +
+
+
+
+
+ {/* Mounted only while flipped: keeps YouTube off the page until
+ asked for, and stops playback the moment the card flips back. */}
+ {isFlipped && (
+
+ )}
+
+
+
+
+ {release.codename && (
+ {release.title}
+ + v{release.version} + + {release.date} +{release.codename}
+ )} + ++ {release.intro} +
+ + {release.tutorialUrl && ( + +
+ {release.features.map((feature) => (
+
+