From 5d45ac064f6b42608254a15db6e5af02772faa68 Mon Sep 17 00:00:00 2001 From: bryancito1090 Date: Thu, 3 Sep 2026 15:59:13 -0500 Subject: [PATCH] Refactor code structure for improved readability and maintainability --- .../app/application/i18n/translations/en.ts | 75 ++++-- .../app/application/i18n/translations/es.ts | 75 ++++-- .../src/app/domain/models/i18n.model.ts | 13 + .../featured-projects.component.css | 255 ++++++++++++++---- .../featured-projects.component.html | 79 +++++- .../featured-projects.component.ts | 187 ++++++++++--- .../project-detail.component.css | 170 +++++++++++- .../project-detail.component.html | 69 ++++- .../project-detail.component.ts | 22 +- .../src/assets/images/projects/ammi/ammi1.jpg | Bin 0 -> 224487 bytes .../src/assets/images/projects/ammi/ammi2.jpg | Bin 0 -> 134779 bytes .../src/assets/images/projects/ammi/ammi3.jpg | Bin 0 -> 115854 bytes .../images/projects/titulacion/tit1.jpg | Bin 0 -> 91041 bytes .../images/projects/titulacion/tit2.jpg | Bin 0 -> 75437 bytes .../images/projects/titulacion/tit3.jpg | Bin 0 -> 160122 bytes .../images/projects/vacaciones-rrhh/rrhh1.jpg | Bin 0 -> 76047 bytes .../images/projects/vacaciones-rrhh/rrhh2.jpg | Bin 0 -> 102357 bytes .../images/projects/vacaciones-rrhh/rrhh3.jpg | Bin 0 -> 115440 bytes 18 files changed, 781 insertions(+), 164 deletions(-) create mode 100644 src/frontend/src/assets/images/projects/ammi/ammi1.jpg create mode 100644 src/frontend/src/assets/images/projects/ammi/ammi2.jpg create mode 100644 src/frontend/src/assets/images/projects/ammi/ammi3.jpg create mode 100644 src/frontend/src/assets/images/projects/titulacion/tit1.jpg create mode 100644 src/frontend/src/assets/images/projects/titulacion/tit2.jpg create mode 100644 src/frontend/src/assets/images/projects/titulacion/tit3.jpg create mode 100644 src/frontend/src/assets/images/projects/vacaciones-rrhh/rrhh1.jpg create mode 100644 src/frontend/src/assets/images/projects/vacaciones-rrhh/rrhh2.jpg create mode 100644 src/frontend/src/assets/images/projects/vacaciones-rrhh/rrhh3.jpg diff --git a/src/frontend/src/app/application/i18n/translations/en.ts b/src/frontend/src/app/application/i18n/translations/en.ts index e4ed0c8..c948c7c 100644 --- a/src/frontend/src/app/application/i18n/translations/en.ts +++ b/src/frontend/src/app/application/i18n/translations/en.ts @@ -77,38 +77,59 @@ export const EN_TRANSLATIONS: TranslationDictionary = { // Featured Projects fpHeaderTag: '01 // PROJECTS', fpAriaLabel: "Bryan Baño's featured projects", - fpPlaceholderImage: 'Image', + fpPlaceholderImage: 'No screenshots', fpAltPrefix: 'Screenshot of ', + fpCarouselPrev: 'Previous project', + fpCarouselNext: 'Next project', + fpInDevelopment: 'In Development', + fpNoImagesTechnical: 'Architecture & CACES Audit Spec', projectDetailChallenge: 'Challenges', projectDetailSolution: 'Solution', projectDetailResults: 'Results', projectDetailCloseAria: 'Close project details', - prj1Subtitle: 'CACES Institutional Accreditation', - prj1Desc: 'Led platform development centralizing evidence upload and validation with advanced security via JWT and SharePoint.', - prj1Impact: 'Automated indicator tracking, eliminating physical paper management with complete traceability for government audits.', - prj1Challenge: 'The accreditation process was fragmented across spreadsheets, folders, and multiple validation stages, which made evidence control slow and vulnerable to omissions during audits.', - prj1Solution: 'I designed a central platform with role-based access, structured evidence workflows, document validation, and secure integrations with SharePoint and JWT-based authentication to protect records and streamline approval processes.', - prj1Result1: 'Reduced manual evidence review time and eliminated duplicate records across departments.', - prj1Result2: 'Improved audit readiness with full traceability, timestamps, and version control for every document.', - prj1Result3: 'Strengthened institutional governance by standardizing the approval flow for each accreditation requirement.', - prj2Subtitle: 'Comprehensive Workshop & Work Order Management', - prj2Institution: 'Automotive Sector', - prj2Desc: 'Comprehensive platform for mechanical supply inventory control, vehicle registration, and real-time work order tracking.', - prj2Impact: 'Optimized workshop operational flow, eliminating shortages of critical supplies and improving turnaround times with digital records.', - prj2Challenge: 'The workshop lacked a single source of truth for inventories, vehicle history, and pending work orders; that led to delays, stockouts, and repetitive manual coordination.', - prj2Solution: 'I built a modular system for inventory control, vehicle master data, and maintenance order lifecycle tracking, connecting operational records with real-time reporting to support faster decisions on the shop floor.', - prj2Result1: 'Minimized inventory shortages by improving stock visibility and replenishment planning.', - prj2Result2: 'Reduced operational friction with digital work orders and complete vehicle histories.', - prj2Result3: 'Improved delivery time and service planning through cleaner operational traceability.', - prj3Subtitle: 'Accelerated Virtual Education', - prj3Institution: 'Academic Platform', - prj3Desc: 'Led academic management platform development based on RESTful API architecture for high availability in remote learning.', - prj3Impact: 'Centralizes academic administration and automates student tracking, eliminating manual enrollment and attendance processes.', - prj3Challenge: 'Academic operations depended on disconnected manual procedures for enrollment, attendance, and course records, which slowed administrative work and limited visibility for management.', - prj3Solution: 'I implemented a scalable academic platform with REST APIs, structured student management, attendance tracking, and administrative dashboards to support remote learning under a reliable architecture.', - prj3Result1: 'Automated academic records and reduced the time spent on repetitive administrative tasks.', - prj3Result2: 'Improved data consistency for access, course enrollment, and attendance follow-up.', - prj3Result3: 'Created a more resilient and scalable foundation for the digital education experience.', + + // PRJ-01: SIPLECE (No images, technical / accreditation focus) + prj1Subtitle: 'CACES Accreditation & Document Governance', + prj1Desc: 'Centralized institutional platform to upload, audit, and validate technical-academic evidence required by CACES, integrating SharePoint, JWT authentication, and role-based access control.', + prj1Impact: 'Automated institutional indicator tracking, eliminating manual paperwork and guaranteeing complete traceability for governmental audits.', + prj1Challenge: 'The accreditation process was fragmented across desynchronized spreadsheets, physical binders, and informal approvals, creating severe delays and risking critical evidence omissions.', + prj1Solution: 'Designed a decoupled Clean Architecture platform using C# .NET and Angular, integrating SharePoint for encrypted storage, JWT with RBAC, and structured multi-stage approval workflows with immutable timestamps.', + prj1Result1: 'Drastically reduced review and validation turnaround times between academic and administrative departments.', + prj1Result2: 'Achieved 100% document version control and traceability for official CACES evaluation committees.', + prj1Result3: 'Standardized institutional governance for 100+ evaluation indicators and quality metrics.', + + // PRJ-02: Ammi-Online (Full academic management with images) + prj2Subtitle: 'Academic Management, Admissions, Payments & Grades', + prj2Institution: 'Higher Education / Academic Platform', + prj2Desc: 'Comprehensive web ecosystem for full student lifecycle management: online applications, automated enrollments, payment processing, and real-time grade records.', + prj2Impact: 'Unified academic and financial workflows into a single high-concurrency system, cutting enrollment wait times and guaranteeing instant payment reconciliation.', + prj2Challenge: 'Fragmented admission requests, manual bank receipt reconciliations, and spreadsheet grade records that were vulnerable to human errors and discrepancies.', + prj2Solution: 'Implemented Clean Architecture with C# .NET 8 (MediatR CQRS) and Angular Signals. Integrated decoupled modules for applications, payment gateways, accounting validation, and grade books under strict database-driven RBAC and JWT.', + prj2Result1: '100% automated enrollment and digital payment reconciliation without manual intervention.', + prj2Result2: 'Centralized real-time grade records with comprehensive teacher modification audit trails.', + prj2Result3: 'Ultra-fast and reactive user experience for thousands of concurrent students via Angular Signals and OnPush.', + + // PRJ-03: HR Vacations & Leaves Module (With images) + prj3Subtitle: 'Vacation Control, FIFO Algorithm & Real-Time Legal Deeds', + prj3Institution: 'Corporate / Human Resources', + prj3Desc: 'Comprehensive, legally compliant human resources module for employee vacation tracking, FIFO period calculations, real-time PDF legal deeds, and analytical executive dashboards.', + prj3Impact: 'Fully automated the vacation and leave lifecycle, eliminating manual labor liability calculations and guaranteeing 100% legal compliance.', + prj3Challenge: 'Manual calculations vulnerable to legal disputes over seniority periods, unworked leave deductions, institutional shutdowns, and delayed legal deed generation.', + prj3Solution: 'Engineered a FIFO vacation settlement engine following Clean Architecture, featuring real-time PDF deed generation, dynamic dashboards, and 100% configurable extra days by department, incentive, and closures. Integrated dynamic leave deductions, DB-backed RBAC, and JWT security.', + prj3Result1: 'Instant generation of signed, legally compliant vacation deeds with real-time auditability.', + prj3Result2: 'Dynamic and transparent leave deductions linked directly to the corresponding vacation balance.', + prj3Result3: 'Executive analytics dashboards monitoring absenteeism and labor liability metrics for leadership.', + + // PRJ-04: Academic Degree Completion System (In Development, with images) + prj4Subtitle: 'Calls, Modalities & Degree Matrices (In Development)', + prj4Institution: 'Higher Education', + prj4Desc: 'Comprehensive platform for managing university graduation processes: candidate applications, modality tracking (scientific paper, comprehensive exam, ICT projects), and degree requirement validation.', + prj4Impact: 'Standardizes institutional degree completion through configurable open calls, providing absolute transparency across students, tutors, and evaluation tribunals.', + prj4Challenge: 'Coordinating high candidate volumes with disparate prerequisites across degree modalities, manual validation of internship/community service hours, and lack of a unified evaluation channel.', + prj4Solution: 'Architected a Clean Architecture platform (.NET + Angular Signals) orchestrated around dynamic administrative calls. Features database-driven RBAC with 4 roles (Administrator, Student, Professor, and Evaluador), tracking matrices, and custom business rule validators.', + prj4Result1: 'Structured call lifecycle: opening, student application, tribunal assignment, and final defense.', + prj4Result2: 'Configurable support for scientific publications, comprehensive exams, and technological projects.', + prj4Result3: 'Hardened security via JWT, database-driven role permissions, and prerequisite validation.', // Terminal & Workstation terminalWorkstationTag: '02 // INTERACTIVE WORKSTATION', diff --git a/src/frontend/src/app/application/i18n/translations/es.ts b/src/frontend/src/app/application/i18n/translations/es.ts index ca8c9e5..8b7ecfb 100644 --- a/src/frontend/src/app/application/i18n/translations/es.ts +++ b/src/frontend/src/app/application/i18n/translations/es.ts @@ -77,38 +77,59 @@ export const ES_TRANSLATIONS: TranslationDictionary = { // Featured Projects fpHeaderTag: '01 // PROYECTOS', fpAriaLabel: 'Proyectos reales de Bryan Baño', - fpPlaceholderImage: 'Imagen', + fpPlaceholderImage: 'Sin capturas', fpAltPrefix: 'Captura de pantalla de ', + fpCarouselPrev: 'Proyecto anterior', + fpCarouselNext: 'Siguiente proyecto', + fpInDevelopment: 'En Desarrollo', + fpNoImagesTechnical: 'Arquitectura & Auditoría CACES', projectDetailChallenge: 'Complicaciones', projectDetailSolution: 'Solución', projectDetailResults: 'Resultados', projectDetailCloseAria: 'Cerrar detalle del proyecto', - prj1Subtitle: 'Acreditación Institucional CACES', - prj1Desc: 'Lideré el desarrollo de la plataforma centralizando la carga y validación de evidencias con seguridad avanzada mediante JWT y SharePoint.', - prj1Impact: 'Automatizó el seguimiento de indicadores, eliminando la gestión física de documentos con trazabilidad total para auditorías gubernamentales.', - prj1Challenge: 'El proceso de acreditación estaba fragmentado entre hojas de cálculo, carpetas físicas y varias etapas de validación, lo que hacía lento el control de evidencias y dejaba margen para omisiones durante auditorías.', - prj1Solution: 'Diseñé una plataforma central con accesos por roles, flujos estructurados de evidencias, validación documental e integración segura con SharePoint y autenticación JWT para proteger los registros y agilizar las aprobaciones.', - prj1Result1: 'Reduje el tiempo de revisión manual de evidencias y eliminé registros duplicados entre departamentos.', - prj1Result2: 'Mejoré la preparación para auditorías con trazabilidad completa, marcas de tiempo y control de versiones para cada documento.', - prj1Result3: 'Fortalecí la gobernanza institucional al estandarizar el flujo de aprobación de cada requisito de acreditación.', - prj2Subtitle: 'Gestión Integral de Talleres & Órdenes', - prj2Institution: 'Sector Automotriz', - prj2Desc: 'Plataforma integral para control de inventarios de insumos mecánicos, registro detallado de vehículos y seguimiento de órdenes de trabajo en tiempo real.', - prj2Impact: 'Optimizó el flujo operativo del taller, eliminando el desabastecimiento de suministros críticos y mejorando los tiempos de entrega con historial digital.', - prj2Challenge: 'El taller no contaba con una fuente única de verdad para inventarios, historial de vehículos y órdenes pendientes; esto generaba retrasos, faltantes y coordinación manual repetitiva.', - prj2Solution: 'Desarrollé un sistema modular para control de inventario, datos maestros de vehículos y ciclo de vida de órdenes de mantenimiento, conectando registros operativos con reportes en tiempo real para decisiones más rápidas en taller.', - prj2Result1: 'Disminuí los desabastecimientos mediante mejor visibilidad del stock y planificación de reposición.', - prj2Result2: 'Reducí la fricción operativa con órdenes digitales y un historial completo de cada vehículo.', - prj2Result3: 'Mejoré tiempos de entrega y planificación del servicio gracias a una trazabilidad más clara del trabajo.', - prj3Subtitle: 'Educación Virtual Acelerada', - prj3Institution: 'Plataforma Académica', - prj3Desc: 'Lideré el desarrollo de la plataforma de gestión académica basada en arquitectura de APIs RESTful para alta disponibilidad en entornos remotos.', - prj3Impact: 'Centraliza la administración académica y automatiza el seguimiento estudiantil, eliminando procesos manuales de inscripción y control de asistencia.', - prj3Challenge: 'Las operaciones académicas dependían de procedimientos manuales no conectados para matrícula, asistencia y registros de cursos, lo que reducía velocidad administrativa y visibilidad para la gestión.', - prj3Solution: 'Implementé una plataforma académica escalable con APIs REST, gestión estructurada de estudiantes, control de asistencia y dashboards administrativos para sostener la educación remota con una arquitectura confiable.', - prj3Result1: 'Automatizé registros académicos y reduje el tiempo invertido en tareas administrativas repetitivas.', - prj3Result2: 'Mejoré la consistencia de datos para acceso, matriculación y seguimiento de asistencia.', - prj3Result3: 'Construí una base más resiliente y escalable para la experiencia de educación digital.', + + // PRJ-01: SIPLECE (Sin imágenes, enfoque técnico / acreditación) + prj1Subtitle: 'Acreditación CACES & Gestión Documental', + prj1Desc: 'Plataforma institucional para centralizar, auditar y validar evidencias técnico-académicas requeridas por el CACES, integrando SharePoint y autenticación JWT con control de acceso por roles.', + prj1Impact: 'Automatizó el seguimiento de indicadores institucionales, erradicando la manipulación física de documentos y asegurando trazabilidad completa para auditorías gubernamentales.', + prj1Challenge: 'El proceso de acreditación estaba fragmentado entre múltiples hojas de cálculo, carpetas físicas desincronizadas y aprobaciones informales, lo que ocasionaba demoras críticas y riesgo de omisión de evidencias ante los evaluadores externos.', + prj1Solution: 'Diseñé una plataforma central bajo Clean Architecture con C# .NET y Angular, integrando SharePoint para almacenamiento cifrado, autenticación JWT con RBAC y flujos estructurados de aprobación multi-etapa con marcas de tiempo inmutables.', + prj1Result1: 'Reducción drástica del tiempo de revisión y validación de evidencias entre departamentos académicos y administrativos.', + prj1Result2: 'Trazabilidad y versionado al 100% de cada documento para auditorías oficiales del CACES.', + prj1Result3: 'Gobernanza institucional estandarizada para más de 100 indicadores y criterios de evaluación.', + + // PRJ-02: Ammi-Online (Gestión académica completa con imágenes) + prj2Subtitle: 'Gestión Académica, Solicitudes, Pagos & Calificaciones', + prj2Institution: 'Educación Superior / Academia', + prj2Desc: 'Ecosistema web integral para la administración del ciclo estudiantil completo: solicitudes de admisión, matriculación automatizada, procesamiento de pagos y registro de calificaciones en tiempo real.', + prj2Impact: 'Unificó las operaciones académicas y financieras en una sola plataforma de alta concurrencia, reduciendo el tiempo de matriculación y garantizando conciliación de pagos inmediata.', + prj2Challenge: 'Procesos de admisión dispersos, conciliación manual de pagos y comprobantes bancarios, y dispersión de actas de calificaciones en hojas de cálculo vulnerables a inconsistencias.', + prj2Solution: 'Implementé una arquitectura limpia desacoplada con backend en C# .NET 8 (CQRS con MediatR) y frontend Angular con Signals. Módulos integrados para solicitudes, pasarelas de pago, validación contable y actas de calificaciones con RBAC estricto desde base de datos y JWT.', + prj2Result1: 'Automatización del 100% del flujo de matrícula y validación digital de pagos sin intervención manual.', + prj2Result2: 'Centralización de actas de notas con auditoría rigurosa de modificaciones por docente.', + prj2Result3: 'Navegación reactiva instantánea para miles de estudiantes simultáneos mediante ChangeDetection OnPush y Signals.', + + // PRJ-03: Módulo Vacaciones & Permisos RRHH (Con imágenes) + prj3Subtitle: 'Control de Vacaciones, Algoritmo FIFO & Actas en Tiempo Real', + prj3Institution: 'Corporativo / Talento Humano', + prj3Desc: 'Módulo integral de recursos humanos apegado a la legislación laboral para la administración de vacaciones de empleados, cálculo por algoritmo FIFO de periodos acumulados, actas en tiempo real y dashboards analíticos.', + prj3Impact: 'Automatizó integralmente el ciclo de vacaciones y permisos, erradicando el cálculo manual de pasivos laborales y garantizando 100% de apego a la normativa legal vigente.', + prj3Challenge: 'Cálculo manual propenso a discrepancias legales en periodos acumulados por antigüedad, deducciones por permisos imprevistos, cierres institucionales y falta de generación inmediata de actas con validez jurídica.', + prj3Solution: 'Desarrollé un motor de liquidación vacacional bajo algoritmo FIFO con Clean Architecture, generación de actas en tiempo real en PDF, dashboards dinámicos y configuración al 100% de días extras por departamento, incentivos y cierres institucionales. Todo con gestión de permisos vinculada a descuentos dinámicos, RBAC en base de datos y JWT.', + prj3Result1: 'Generación instantánea de actas de vacaciones con firma y trazabilidad legal en tiempo real.', + prj3Result2: 'Descuento dinámico y transparente de permisos directamente vinculado al saldo y periodo correspondiente.', + prj3Result3: 'Dashboards analíticos de absentismo y pasivos laborales para la toma de decisiones directivas.', + + // PRJ-04: Sistema de Titulación Académica (En desarrollo, con imágenes) + prj4Subtitle: 'Convocatorias, Modalidades & Matriz de Grado', + prj4Institution: 'Educación Superior', + prj4Desc: 'Plataforma para la administración integral de procesos de titulación: postulación de aspirantes, seguimiento por modalidades (artículo científico, examen complexivo, proyectos TIC) y validación de requisitos de grado por convocatorias.', + prj4Impact: 'Estandariza el ciclo de graduación universitaria mediante convocatorias parametrizables, garantizando transparencia absoluta entre estudiantes, tutores y evaluadores.', + prj4Challenge: 'Dificultad para coordinar postulaciones con requisitos dispares por modalidad de titulación, validaciones manuales de horas de vinculación/prácticas y ausencia de un canal unificado para tribunales examinadores.', + prj4Solution: 'Diseñé una plataforma basada en Clean Architecture (.NET + Angular Signals) con motor de convocatorias dinámicas abiertas por el administrador. Incluye RBAC desde base de datos con 4 roles (Administrador, Estudiante, Profesor y Evaluador), matrices de seguimiento y validaciones personalizadas.', + prj4Result1: 'Gestión estructurada por convocatorias con apertura, postulación, dictamen de jurado y defensa final.', + prj4Result2: 'Soporte configurable para modalidades de artículo científico, examen complexivo y proyectos TIC.', + prj4Result3: 'Seguridad robusta con JWT, permisos por rol desde base de datos y control exhaustivo de requisitos previos.', // Terminal & Workstation terminalWorkstationTag: '02 // INTERACTIVE WORKSTATION', diff --git a/src/frontend/src/app/domain/models/i18n.model.ts b/src/frontend/src/app/domain/models/i18n.model.ts index 4a0becf..b680168 100644 --- a/src/frontend/src/app/domain/models/i18n.model.ts +++ b/src/frontend/src/app/domain/models/i18n.model.ts @@ -79,6 +79,10 @@ export interface TranslationDictionary { readonly fpAriaLabel: string; readonly fpPlaceholderImage: string; readonly fpAltPrefix: string; + readonly fpCarouselPrev: string; + readonly fpCarouselNext: string; + readonly fpInDevelopment: string; + readonly fpNoImagesTechnical: string; readonly projectDetailChallenge: string; readonly projectDetailSolution: string; readonly projectDetailResults: string; @@ -109,6 +113,15 @@ export interface TranslationDictionary { readonly prj3Result1: string; readonly prj3Result2: string; readonly prj3Result3: string; + readonly prj4Subtitle: string; + readonly prj4Institution: string; + readonly prj4Desc: string; + readonly prj4Impact: string; + readonly prj4Challenge: string; + readonly prj4Solution: string; + readonly prj4Result1: string; + readonly prj4Result2: string; + readonly prj4Result3: string; // Terminal & Workstation readonly terminalWorkstationTag: string; diff --git a/src/frontend/src/app/presentation/features/featured-projects/featured-projects/featured-projects.component.css b/src/frontend/src/app/presentation/features/featured-projects/featured-projects/featured-projects.component.css index af2f303..79eb2e4 100644 --- a/src/frontend/src/app/presentation/features/featured-projects/featured-projects/featured-projects.component.css +++ b/src/frontend/src/app/presentation/features/featured-projects/featured-projects/featured-projects.component.css @@ -1,3 +1,4 @@ +/* Featured Projects Component Styles */ :host { display: block; width: 100%; @@ -44,17 +45,64 @@ letter-spacing: 0.08em; } -.projects-stack { +.carousel-nav-controls { + display: flex; + align-items: center; + gap: var(--space-3); +} + +.carousel-counter { + font-family: var(--font-mono); + font-size: 0.8125rem; + font-weight: 700; + color: var(--zen-text-secondary); + letter-spacing: 0.1em; +} + +.carousel-buttons { + display: flex; + align-items: center; + gap: 6px; +} + +.carousel-nav-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 50%; + border: 1px solid var(--zen-border-subtle); + background: rgba(255, 255, 255, 0.04); + color: var(--zen-text-primary); + font-size: 1.15rem; + line-height: 1; + cursor: pointer; + transition: all var(--transition-fast); +} + +.carousel-nav-btn:hover:not(:disabled) { + background: rgba(255, 255, 255, 0.12); + border-color: var(--zen-accent-kintsugi); + transform: scale(1.06); +} + +.carousel-nav-btn:disabled { + opacity: 0.28; + cursor: not-allowed; +} + +/* Cuadrícula de Proyectos (Grid limpio sin scroll horizontal) */ +.projects-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); + width: 100%; } -@media (min-width: 960px) { - .projects-stack { +@media (min-width: 768px) { + .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: var(--space-5); - align-items: start; } } @@ -64,7 +112,6 @@ align-items: stretch; gap: var(--space-3); padding: var(--space-4); - min-height: 100%; background: linear-gradient(180deg, rgba(16, 20, 25, 0.92), rgba(12, 16, 20, 0.88)), rgba(11, 15, 18, 0.85); @@ -74,11 +121,19 @@ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18); cursor: pointer; text-align: left; - transition: - transform var(--transition-fast), - border-color var(--transition-fast), - box-shadow var(--transition-fast), - background var(--transition-fast); + transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); + animation: cardFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes cardFadeIn { + from { + opacity: 0.55; + transform: translateY(4px); + } + to { + opacity: 1; + transform: translateY(0); + } } .project-card:hover, @@ -107,6 +162,108 @@ justify-content: center; } +.project-image-slot.no-image { + background: #080c12; + border-color: rgba(125, 207, 255, 0.18); +} + +.tech-blueprint-slot { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background: + radial-gradient(circle at center, rgba(125, 207, 255, 0.08) 0%, transparent 70%), + #0a0e16; + user-select: none; +} + +.blueprint-grid-overlay { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(125, 207, 255, 0.08) 1px, transparent 1px), + linear-gradient(90deg, rgba(125, 207, 255, 0.08) 1px, transparent 1px); + background-size: 16px 16px; + pointer-events: none; +} + +.blueprint-content { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + text-align: center; + padding: var(--space-3); +} + +.blueprint-icon { + font-size: 1.8rem; + color: var(--prj-accent, var(--zen-accent-kintsugi)); + line-height: 1; +} + +.blueprint-code { + font-family: var(--font-mono); + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.12em; + color: var(--prj-accent, var(--zen-accent-kintsugi)); +} + +.blueprint-title { + font-family: var(--font-sans); + font-size: 1.1rem; + font-weight: 800; + color: var(--zen-text-primary); +} + +.blueprint-spec { + font-family: var(--font-sans); + font-size: 0.6875rem; + font-weight: 600; + color: var(--zen-text-secondary); + letter-spacing: 0.04em; +} + +.in-dev-badge { + position: absolute; + top: 10px; + right: 10px; + z-index: 2; + display: inline-flex; + align-items: center; + gap: 6px; + padding: 0.25rem 0.6rem; + background: rgba(18, 22, 32, 0.88); + border: 1px solid rgba(187, 154, 247, 0.4); + border-radius: 999px; + font-family: var(--font-sans); + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.06em; + color: #bb9af7; + backdrop-filter: blur(6px); +} + +.in-dev-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: #bb9af7; + box-shadow: 0 0 6px #bb9af7; + animation: pulse-dev 2s infinite ease-in-out; +} + +@keyframes pulse-dev { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(0.8); } +} + .project-img { width: 100%; height: 100%; @@ -115,40 +272,6 @@ filter: saturate(1.08) contrast(1.04); } -.image-placeholder { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 3px; - width: 100%; - height: 100%; - background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 80%); - border: 1px dashed rgba(255, 255, 255, 0.12); - color: var(--zen-text-muted); - user-select: none; -} - -.placeholder-icon { - font-size: 1.5rem; - color: var(--prj-accent, var(--zen-accent-kintsugi)); - opacity: 0.9; -} - -.placeholder-code { - font-family: var(--font-sans); - font-size: 0.75rem; - font-weight: 700; - color: var(--zen-text-secondary); -} - -.placeholder-label { - font-family: var(--font-sans); - font-size: 0.6875rem; - color: var(--zen-text-muted); - letter-spacing: 0.05em; -} - .project-content { flex: 1; min-width: 0; @@ -267,6 +390,47 @@ border-radius: 1.4rem; } +.carousel-dots-row { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + margin-top: var(--space-2); +} + +.carousel-dot { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 20px; + padding: 0; + background: transparent; + border: none; + cursor: pointer; + outline: none; +} + +.carousel-dot .dot-inner { + width: 8px; + height: 8px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + transition: all var(--transition-fast); +} + +.carousel-dot:hover .dot-inner { + background: rgba(255, 255, 255, 0.45); + transform: scale(1.2); +} + +.carousel-dot.is-active .dot-inner { + width: 24px; + border-radius: 999px; + background: var(--prj-accent, var(--zen-accent-kintsugi)); + box-shadow: 0 0 10px var(--prj-accent, var(--zen-accent-kintsugi)); +} + @media (max-width: 540px) { .project-card { padding: var(--space-3); @@ -281,4 +445,3 @@ align-items: flex-start; } } - diff --git a/src/frontend/src/app/presentation/features/featured-projects/featured-projects/featured-projects.component.html b/src/frontend/src/app/presentation/features/featured-projects/featured-projects/featured-projects.component.html index 292c027..bf87e79 100644 --- a/src/frontend/src/app/presentation/features/featured-projects/featured-projects/featured-projects.component.html +++ b/src/frontend/src/app/presentation/features/featured-projects/featured-projects/featured-projects.component.html @@ -1,13 +1,39 @@