55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
<div class="featured-projects-wrapper" role="region" [attr.aria-label]="i18n.t().fpAriaLabel">
|
|
<!-- Cabecera de la sección -->
|
|
<header class="section-micro-header">
|
|
<div class="header-left">
|
|
<span class="pulse-indicator" aria-hidden="true"></span>
|
|
<span class="header-tag">{{ i18n.t().fpHeaderTag }}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Lista de las 3 Tarjetas de Proyecto -->
|
|
<div class="projects-stack">
|
|
@for (prj of projects(); track prj.id) {
|
|
<article class="project-card" [style.--prj-accent]="prj.accentColor">
|
|
<!-- Espacio reservado para la imagen del proyecto -->
|
|
<div class="project-image-slot">
|
|
@if (!imageErrors()[prj.id] && prj.imageUrl) {
|
|
<img [src]="prj.imageUrl" [alt]="i18n.t().fpAltPrefix + prj.title" class="project-img"
|
|
(error)="onImageError(prj.id)" loading="lazy" />
|
|
} @else {
|
|
<div class="image-placeholder">
|
|
<span class="placeholder-icon"></span>
|
|
<span class="placeholder-code">{{ prj.code }}</span>
|
|
<span class="placeholder-label">{{ i18n.t().fpPlaceholderImage }}</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Contenido descriptivo del proyecto -->
|
|
<div class="project-content">
|
|
<!-- Meta superior -->
|
|
<div class="project-meta-row">
|
|
<div class="institution-badge">
|
|
<span class="meta-bullet">●</span>
|
|
<span class="meta-institution">{{ prj.institution }}</span>
|
|
</div>
|
|
<span class="meta-tag">{{ prj.subtitle }}</span>
|
|
</div>
|
|
|
|
<!-- Título principal -->
|
|
<h3 class="project-title">{{ prj.title }}</h3>
|
|
|
|
<!-- Impacto y resultados clave extraídos del CV -->
|
|
<p class="project-impact">{{ prj.impact }}</p>
|
|
|
|
<!-- Chips de Tecnologías -->
|
|
<div class="project-tags-row">
|
|
@for (tag of prj.tags; track tag) {
|
|
<span class="tech-chip">{{ tag }}</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
}
|
|
</div>
|
|
</div> |