Bryan.bano
/
PORTFOLIO
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Enhance contact section with micro-header and responsive design improvements

This commit is contained in:
bryancito1090 2026-09-03 14:41:07 -05:00
parent 5f143d5fac
commit f67b796d53
9 changed files with 224 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/frontend/src/app/application/i18n/translations/en.ts
View File

@ -114,13 +114,14 @@ export const EN_TRANSLATIONS: TranslationDictionary = {
terminalWorkstationTag: '02 // INTERACTIVE WORKSTATION', terminalWorkstationTag: '02 // INTERACTIVE WORKSTATION',
terminalHeading: 'Arch Linux Terminal // Fish Shell', terminalHeading: 'Arch Linux Terminal // Fish Shell',
terminalSectionDesc: 'Full-scale interactive console to query technical ecosystem, skills, and live database.', terminalSectionDesc: 'Full-scale interactive console to query technical ecosystem, skills, and live database.',
terminalBanner: ` /\\ bryan@archlinux terminalBanner: `bryan@archlinux
/ \\ OS: Arch Linux x86_64 OS: Arch Linux x86_64
/\\ \\ Host: ThinkPad Z13 Gen 2 Host: ThinkPad Z13 Gen 2
/ \\ Kernel: 6.10.7-arch1-1 Kernel: 6.10.7-arch1-1
/ ,, \\ Shell: fish 3.7.0 Shell: fish 3.7.0
/ | | -\\ Terminal: zen-alacritty Terminal: zen-alacritty
/_-'' ''-_\\ Type "help" to start.`,
Type "help" to start.`,
terminalHint: 'Welcome to the interactive Arch Linux / Fish Shell environment.\nType "help" to view available commands.', terminalHint: 'Welcome to the interactive Arch Linux / Fish Shell environment.\nType "help" to view available commands.',
terminalHelpContent: `Arch Linux (x86_64) — fish, version 3.7.0 terminalHelpContent: `Arch Linux (x86_64) — fish, version 3.7.0
Available commands for this interactive session: Available commands for this interactive session:

17
src/frontend/src/app/application/i18n/translations/es.ts
View File

@ -52,7 +52,7 @@ export const ES_TRANSLATIONS: TranslationDictionary = {
// Technical Profile // Technical Profile
tpAboutGreeting: 'Hola, soy', tpAboutGreeting: 'Hola, soy',
tpAboutName: 'Bryan Baño', tpAboutName: 'Bryan Baño',
tpAboutDescription: 'Soy ingeniero de software enfocado en construir experiencias digitales claras, accesibles y técnicamente sólidas. Me interesa combinar arquitectura limpia, desarrollo frontend moderno y soluciones backend escalables. Trabajo con .NET, Angular, Signals, APIs REST y bases de datos relacionales.\n\nMi proceso combina ingeniería y diseño. Primero entiendo el problema, después simplifico la experiencia y finalmente construyo una solución mantenible. Priorizo el rendimiento, la accesibilidad, la separación de responsabilidades y la calidad del código.\n\nTambién exploro interfaces inspiradas en terminales Unix, sistemas retro, estética Cyber-Zen y nuevas formas de presentar información técnica sin sacrificar legibilidad. Cada proyecto debe ser funcional, expresivo y fácil de mantener.\n\nActualmente desarrollo soluciones que conectan frontend, backend, diseño visual e interacción digital. Me interesa crear productos que no solo funcionen correctamente, sino que también comuniquen una identidad clara y memorable.', tpAboutDescription: 'Egresado de Ingeniería en Computación (EPN) | Desarrollador Full Stack apasionado por crear arquitecturas eficientes. Me enfoco en construir experiencias digitales claras, accesibles y técnicamente sólidas. Me interesa combinar arquitectura limpia, desarrollo frontend moderno y soluciones backend escalables. Trabajo con .NET, Angular, Signals, APIs REST y bases de datos relacionales.\n\nMi proceso combina ingeniería y diseño. Primero entiendo el problema, después simplifico la experiencia y finalmente construyo una solución mantenible. Priorizo el rendimiento, la accesibilidad, la separación de responsabilidades y la calidad del código.\n\nTambién exploro interfaces inspiradas en terminales Unix, sistemas retro, estética Cyber-Zen y nuevas formas de presentar información técnica sin sacrificar legibilidad. Cada proyecto debe ser funcional, expresivo y fácil de mantener.\n\nActualmente desarrollo soluciones que conectan frontend, backend, diseño visual e interacción digital. Me interesa crear productos que no solo funcionen correctamente, sino que también comuniquen una identidad clara y memorable.',
tpAboutAria: 'Sobre Bryan Baño', tpAboutAria: 'Sobre Bryan Baño',
tpEyebrow: 'INGENIERÍA EN COMPUTACIÓN & EXPERTISE', tpEyebrow: 'INGENIERÍA EN COMPUTACIÓN & EXPERTISE',
tpTitle: 'Habilidades Técnicas & Áreas de Interés', tpTitle: 'Habilidades Técnicas & Áreas de Interés',
@ -114,13 +114,14 @@ export const ES_TRANSLATIONS: TranslationDictionary = {
terminalWorkstationTag: '02 // INTERACTIVE WORKSTATION', terminalWorkstationTag: '02 // INTERACTIVE WORKSTATION',
terminalHeading: 'Terminal Arch Linux // Fish Shell', terminalHeading: 'Terminal Arch Linux // Fish Shell',
terminalSectionDesc: 'Consola interactiva a escala completa para consultar el ecosistema técnico, habilidades y base de datos.', terminalSectionDesc: 'Consola interactiva a escala completa para consultar el ecosistema técnico, habilidades y base de datos.',
terminalBanner: ` /\\ bryan@archlinux terminalBanner: `bryan@archlinux
/ \\ OS: Arch Linux x86_64 OS: Arch Linux x86_64
/\\ \\ Host: ThinkPad Z13 Gen 2 Host: ThinkPad Z13 Gen 2
/ \\ Kernel: 6.10.7-arch1-1 Kernel: 6.10.7-arch1-1
/ ,, \\ Shell: fish 3.7.0 Shell: fish 3.7.0
/ | | -\\ Terminal: zen-alacritty Terminal: zen-alacritty
/_-'' ''-_\\ Escribe "help" para comenzar.`,
Escribe "help" para comenzar.`,
terminalHint: 'Bienvenido al entorno interactivo Arch Linux / Fish Shell.\nEscribe "help" para ver los comandos disponibles.', terminalHint: 'Bienvenido al entorno interactivo Arch Linux / Fish Shell.\nEscribe "help" para ver los comandos disponibles.',
terminalHelpContent: `Arch Linux (x86_64) — fish, version 3.7.0 terminalHelpContent: `Arch Linux (x86_64) — fish, version 3.7.0
Comandos disponibles para la sesión interactiva: Comandos disponibles para la sesión interactiva:

281
src/frontend/src/app/presentation/features/contact-section/contact-section.component.css
View File

@ -3,182 +3,179 @@
width: 100%; width: 100%;
} }
/* 1. CONTENEDOR PRINCIPAL NORMALIZADO (Fondo #121517 & Padding Amplio) */ /* 1. SECCION PRINCIPAL — Sumi-e Background & Ma (Espacio Negativo) */
.contact-section { .contact-section {
width: 100%; width: 100%;
background-color: #121517; background-color: #121517;
padding: clamp(6rem, 10vw, 8rem) 0; /* py-24 sm:py-32 */ padding: clamp(5rem, 8vw, 7rem) 0;
border-top: 1px solid rgba(255, 255, 255, 0.04);
} }
.contact-container { .contact-container {
max-width: 80rem; /* max-w-7xl */ max-width: 72rem;
margin: 0 auto; margin: 0 auto;
padding: 0 1.5rem; /* px-6 */ padding: 0 clamp(1rem, 3vw, 2.5rem);
} }
@media (min-width: 1024px) { /* 2. MICRO-HEADER — Patrón de Estado Retro */
.contact-container { .contact-micro-header {
padding: 0 2rem; /* lg:px-8 */ display: flex;
} align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-12);
} }
.contact-pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--zen-accent-kintsugi);
box-shadow: 0 0 8px var(--zen-accent-kintsugi);
flex-shrink: 0;
}
.contact-header-tag {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--zen-text-muted);
}
/* 3. GRID DE CONTENIDO — 2 Columnas Responsive */
.contact-grid { .contact-grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 4rem; /* gap-16 */ gap: clamp(2rem, 5vw, 4rem);
align-items: center; align-items: start;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.contact-grid { .contact-grid {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 6rem; /* lg:gap-24 */ gap: clamp(3rem, 6vw, 5rem);
} }
} }
/* 2. COLUMNA IZQUIERDA (Textos en Paleta Zen Dark) */ /* 4. COLUMNA IZQUIERDA — Textos Corporativos */
.contact-info-col { .contact-info-col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.contact-eyebrow {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em; /* tracking-widest */
color: var(--zen-accent-kintsugi); /* Dorado Kintsugi Normalizado */
text-transform: uppercase;
margin-bottom: 1.25rem;
display: inline-block;
}
.contact-title { .contact-title {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(2.25rem, 4.5vw, 3.5rem); /* text-5xl o text-6xl */ font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800; /* font-bold */ font-weight: 700;
color: var(--zen-text-primary); color: var(--zen-text-primary);
line-height: 1.15; /* leading-tight */ line-height: 1.15;
letter-spacing: -0.02em; letter-spacing: -0.02em;
margin: 0 0 1.5rem 0; margin: 0 0 var(--space-6) 0;
} }
.contact-lead { .contact-lead {
font-size: 1.0625rem; /* text-lg */ font-size: 0.9375rem;
color: var(--zen-text-secondary); color: var(--zen-text-secondary);
line-height: 1.7; line-height: 1.7;
margin: 0 0 2rem 0; margin: 0 0 var(--space-8) 0;
max-width: 580px; max-width: 520px;
} }
.service-block { .service-block {
margin-top: 1.5rem; padding-left: var(--space-4);
} border-left: 2px solid var(--zen-border-subtle);
margin-bottom: var(--space-6);
.service-block:first-of-type {
margin-top: 2rem; /* mt-10 */
} }
.service-title { .service-title {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 1.2rem; /* text-xl */ font-size: 1rem;
font-weight: 700; /* font-bold */ font-weight: 600;
color: var(--zen-text-primary); color: var(--zen-text-primary);
margin: 0 0 0.5rem 0; margin: 0 0 var(--space-2) 0;
display: flex;
align-items: baseline;
gap: 8px;
}
.service-title::before {
content: '▹';
color: var(--zen-accent-kintsugi);
font-size: 0.8125rem;
} }
.service-desc { .service-desc {
font-size: 0.875rem; /* text-sm */ font-size: 0.8125rem;
color: var(--zen-text-muted); color: var(--zen-text-muted);
line-height: 1.6; line-height: 1.6;
margin: 0 0 0 1.25rem; margin: 0;
max-width: 540px;
}
/* 3. COLUMNA DERECHA (Tarjeta Formulario Zen Dark) */
.contact-card-col {
width: 100%;
} }
/* 5. COLUMNA DERECHA — Tarjeta Formulario (Retro Window Frame) */
.contact-card { .contact-card {
background-color: var(--zen-bg-surface); /* #131720 Normalizado */ background-color: var(--zen-bg-surface);
border-radius: 1.5rem; /* rounded-3xl */ border: 1px solid var(--zen-border-subtle);
border: 1px solid var(--zen-border-subtle); /* #1e2533 Normalizado */ border-radius: var(--zen-radius-sm);
padding: clamp(2rem, 4vw, 3rem); /* p-8 sm:p-12 */ box-shadow: var(--zen-shadow-window);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75); }
/* 6. CUERPO DEL FORMULARIO */
.contact-card-body {
padding: clamp(1.5rem, 3vw, 2rem);
} }
.form-header { .form-header {
margin-bottom: 2rem; /* mb-8 */ margin-bottom: var(--space-6);
} }
.form-title { .form-title {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 1.5rem; /* text-2xl */ font-size: 1.25rem;
font-weight: 700; /* font-semibold */ font-weight: 600;
color: var(--zen-text-primary); color: var(--zen-text-primary);
margin: 0 0 0.5rem 0; /* mb-2 */ margin: 0 0 var(--space-1) 0;
} }
.form-subtitle { .form-subtitle {
font-size: 0.875rem; /* text-sm */ font-size: 0.8125rem;
color: var(--zen-text-secondary); color: var(--zen-text-muted);
margin: 0; margin: 0;
} }
/* Campos del Formulario Normalizados */ /* 7. CAMPOS DEL FORMULARIO — Estilo Zen Minimalista */
.contact-form { .contact-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.25rem; gap: var(--space-4);
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.4rem; gap: var(--space-1);
} }
.form-row-2col { .form-row-2col {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 1rem; gap: var(--space-4);
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.form-row-2col { .form-row-2col {
grid-template-columns: 1fr 1fr; /* sm:grid-cols-2 */ grid-template-columns: 1fr 1fr;
} }
} }
.form-label { .form-label {
font-family: var(--font-sans); font-family: var(--font-mono);
font-size: 0.8125rem; /* text-sm */ font-size: 0.6875rem;
color: var(--zen-text-secondary); color: var(--zen-text-muted);
font-weight: 600; font-weight: 500;
letter-spacing: 0.02em; letter-spacing: 0.04em;
display: block; text-transform: uppercase;
} }
.form-input, .form-input,
.form-select, .form-select,
.form-textarea { .form-textarea {
width: 100%; width: 100%;
background-color: var(--zen-bg-base); /* #0c0e14 Normalizado */ background-color: var(--zen-bg-base);
color: var(--zen-text-primary); color: var(--zen-text-primary);
padding: 0.875rem 1rem; /* p-3 o p-4 */ padding: var(--space-3) var(--space-3);
border-radius: 0.75rem; /* rounded-xl */ border-radius: var(--zen-radius-xs);
border: 1px solid var(--zen-border-subtle); /* #1e2533 Normalizado */ border: 1px solid var(--zen-border-subtle);
font-family: inherit; font-family: inherit;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5; line-height: 1.5;
@ -189,6 +186,7 @@
.form-input::placeholder, .form-input::placeholder,
.form-textarea::placeholder { .form-textarea::placeholder {
color: var(--zen-text-muted); color: var(--zen-text-muted);
font-style: italic;
} }
.form-input:focus, .form-input:focus,
@ -196,12 +194,12 @@
.form-textarea:focus { .form-textarea:focus {
outline: none; outline: none;
border-color: var(--zen-accent-kintsugi); border-color: var(--zen-accent-kintsugi);
box-shadow: 0 0 0 2px rgba(197, 155, 39, 0.25); box-shadow: 0 0 0 2px rgba(197, 155, 39, 0.2);
} }
.form-textarea { .form-textarea {
resize: vertical; resize: vertical;
min-height: 110px; min-height: 100px;
} }
.select-wrapper { .select-wrapper {
@ -211,11 +209,11 @@
.form-select { .form-select {
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239aa5b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235e697d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 1rem center; background-position: right 0.75rem center;
background-size: 1.25rem; background-size: 1rem;
padding-right: 2.5rem; padding-right: 2.25rem;
} }
.form-select option { .form-select option {
@ -223,63 +221,68 @@
color: var(--zen-text-primary); color: var(--zen-text-primary);
} }
/* 8. VALIDACION Y ERRORES */
.input-error { .input-error {
border-color: #f7768e !important; border-color: var(--zen-accent-sakura) !important;
} }
.field-error { .field-error {
font-size: 0.6875rem; font-family: var(--font-mono);
color: #f7768e; font-size: 0.625rem;
color: var(--zen-accent-sakura);
letter-spacing: 0.02em;
} }
.error-banner { .error-banner {
padding: 0.75rem 1rem; padding: var(--space-3) var(--space-4);
background-color: rgba(247, 118, 142, 0.1); background-color: rgba(217, 111, 136, 0.08);
border: 1px solid rgba(247, 118, 142, 0.3); border: 1px solid rgba(217, 111, 136, 0.25);
border-radius: 0.5rem; border-radius: var(--zen-radius-xs);
color: #f7768e; color: var(--zen-accent-sakura);
font-size: 0.8125rem; font-size: 0.75rem;
font-family: var(--font-mono);
} }
/* Botón de Envío Kintsugi Gold */ /* 9. BOTON DE ENVIO — Kintsugi Flat */
.submit-btn { .submit-btn {
width: 100%; /* w-full */ width: 100%;
background: linear-gradient(135deg, var(--zen-accent-kintsugi) 0%, #e2b94a 100%); background-color: var(--zen-accent-kintsugi);
color: #07080b; /* text-black de alto contraste */ color: #07080b;
font-weight: 700; /* font-semibold */ font-family: var(--font-mono);
padding: 1rem; /* py-4 */ font-weight: 600;
border-radius: 0.75rem; /* rounded-xl */ font-size: 0.8125rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: var(--space-3) var(--space-4);
border-radius: var(--zen-radius-xs);
border: none; border: none;
font-size: 0.9375rem;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 16px rgba(197, 155, 39, 0.3); transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: var(--space-2);
margin-top: 0.5rem;
} }
.submit-btn:hover:not(:disabled) { .submit-btn:hover:not(:disabled) {
box-shadow: 0 0 24px rgba(197, 155, 39, 0.55); background-color: #d4a932;
transform: translateY(-2px); box-shadow: 0 0 16px rgba(197, 155, 39, 0.35);
} }
.submit-btn:active:not(:disabled) { .submit-btn:active:not(:disabled) {
transform: scale(0.99); transform: scale(0.98);
} }
.submit-btn:disabled { .submit-btn:disabled {
opacity: 0.7; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.spinner { .spinner {
width: 16px; width: 14px;
height: 16px; height: 14px;
border: 2px solid rgba(0, 0, 0, 0.2); border: 2px solid rgba(7, 8, 11, 0.2);
border-top-color: #000000; border-top-color: #07080b;
border-radius: 50%; border-radius: 50%;
animation: spin 600ms linear infinite; animation: spin 600ms linear infinite;
} }
@ -288,57 +291,59 @@
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
/* Estado de Éxito */ /* 10. ESTADO DE EXITO */
.success-banner { .success-banner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 2.5rem 1rem; padding: var(--space-8) var(--space-4);
gap: 1rem; gap: var(--space-4);
} }
.success-icon-badge { .success-icon-badge {
width: 52px; width: 48px;
height: 52px; height: 48px;
border-radius: 50%; border-radius: 50%;
background-color: rgba(197, 155, 39, 0.15); background-color: rgba(197, 155, 39, 0.12);
border: 1px solid rgba(197, 155, 39, 0.35); border: 1px solid rgba(197, 155, 39, 0.3);
color: var(--zen-accent-kintsugi); color: var(--zen-accent-kintsugi);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.5rem; font-size: 1.25rem;
font-weight: bold;
} }
.success-title { .success-title {
font-size: 1.25rem; font-family: var(--font-sans);
font-weight: 700; font-size: 1.125rem;
font-weight: 600;
color: var(--zen-text-primary); color: var(--zen-text-primary);
margin: 0; margin: 0;
} }
.success-desc { .success-desc {
font-size: 0.875rem; font-size: 0.8125rem;
color: var(--zen-text-secondary); color: var(--zen-text-secondary);
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
max-width: 420px; max-width: 380px;
} }
.btn-new-message { .btn-new-message {
margin-top: 0.5rem; margin-top: var(--space-2);
background: rgba(255, 255, 255, 0.06); background: transparent;
border: 1px solid var(--zen-border-subtle); border: 1px solid var(--zen-border-subtle);
color: var(--zen-text-primary); border-radius: var(--zen-radius-xs);
padding: 0.625rem 1.25rem; color: var(--zen-text-secondary);
border-radius: 0.5rem; font-family: var(--font-mono);
font-size: 0.8125rem; font-size: 0.75rem;
padding: var(--space-2) var(--space-4);
cursor: pointer; cursor: pointer;
transition: background-color var(--transition-fast); transition: border-color var(--transition-fast), color var(--transition-fast);
} }
.btn-new-message:hover { .btn-new-message:hover {
background: rgba(255, 255, 255, 0.12); border-color: var(--zen-border-focus);
color: var(--zen-text-primary);
} }

46
src/frontend/src/app/presentation/features/contact-section/contact-section.component.html
View File

@ -1,24 +1,22 @@
<section class="contact-section" id="contacto"> <section class="contact-section" id="contacto" role="region" [attr.aria-label]="i18n.t().contactEyebrow">
<div class="contact-container"> <div class="contact-container">
<!-- Micro-Header -->
<header class="contact-micro-header">
<span class="contact-pulse-dot" aria-hidden="true"></span>
<span class="contact-header-tag">{{ i18n.t().contactEyebrow }}</span>
</header>
<div class="contact-grid"> <div class="contact-grid">
<!-- 1. COLUMNA IZQUIERDA (Textos Corporativos & Servicios) --> <!-- 1. COLUMNA IZQUIERDA (Textos Corporativos & Servicios) -->
<div class="contact-info-col"> <div class="contact-info-col">
<!-- Eyebrow -->
<span class="contact-eyebrow">
{{ i18n.t().contactEyebrow }}
</span>
<!-- Título Principal H2 -->
<h2 class="contact-title"> <h2 class="contact-title">
{{ i18n.t().contactTitle }} {{ i18n.t().contactTitle }}
</h2> </h2>
<!-- Párrafo Principal -->
<p class="contact-lead"> <p class="contact-lead">
{{ i18n.t().contactLead }} {{ i18n.t().contactLead }}
</p> </p>
<!-- Bloque de Servicio 1 -->
<div class="service-block"> <div class="service-block">
<h3 class="service-title">{{ i18n.t().contactService1Title }}</h3> <h3 class="service-title">{{ i18n.t().contactService1Title }}</h3>
<p class="service-desc"> <p class="service-desc">
@ -26,7 +24,6 @@
</p> </p>
</div> </div>
<!-- Bloque de Servicio 2 -->
<div class="service-block"> <div class="service-block">
<h3 class="service-title">{{ i18n.t().contactService2Title }}</h3> <h3 class="service-title">{{ i18n.t().contactService2Title }}</h3>
<p class="service-desc"> <p class="service-desc">
@ -36,20 +33,11 @@
</div> </div>
<!-- 2. COLUMNA DERECHA (Tarjeta Formulario) --> <!-- 2. COLUMNA DERECHA (Tarjeta Formulario) -->
<div class="contact-card-col"> <div class="contact-card">
<div class="contact-card"> <div class="contact-card-body">
<!-- Cabecera del Formulario -->
<div class="form-header">
<h3 class="form-title">{{ i18n.t().contactFormTitle }}</h3>
<p class="form-subtitle">
{{ i18n.t().contactFormSubtitle }}
</p>
</div>
@if (isSuccess()) { @if (isSuccess()) {
<!-- Estado de Éxito al Enviar -->
<div class="success-banner" role="alert"> <div class="success-banner" role="alert">
<div class="success-icon-badge">✔</div> <div class="success-icon-badge" aria-hidden="true">&#10003;</div>
<h4 class="success-title">{{ i18n.t().contactSuccessTitle }}</h4> <h4 class="success-title">{{ i18n.t().contactSuccessTitle }}</h4>
<p class="success-desc"> <p class="success-desc">
{{ i18n.t().contactSuccessDesc }} {{ i18n.t().contactSuccessDesc }}
@ -59,9 +47,14 @@
</button> </button>
</div> </div>
} @else { } @else {
<!-- Formulario Reactivo --> <div class="form-header">
<h3 class="form-title">{{ i18n.t().contactFormTitle }}</h3>
<p class="form-subtitle">
{{ i18n.t().contactFormSubtitle }}
</p>
</div>
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate class="contact-form"> <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate class="contact-form">
<!-- Fila 1: Nombre o Empresa (100% ancho) -->
<div class="form-group"> <div class="form-group">
<label for="fullNameOrCompany" class="form-label">{{ i18n.t().contactLabelName }}</label> <label for="fullNameOrCompany" class="form-label">{{ i18n.t().contactLabelName }}</label>
<input <input
@ -83,7 +76,6 @@
} }
</div> </div>
<!-- Fila 2: Grid de 2 Columnas (Email y Teléfono) -->
<div class="form-row-2col"> <div class="form-row-2col">
<div class="form-group"> <div class="form-group">
<label for="email" class="form-label">{{ i18n.t().contactLabelEmail }}</label> <label for="email" class="form-label">{{ i18n.t().contactLabelEmail }}</label>
@ -116,7 +108,6 @@
</div> </div>
</div> </div>
<!-- Fila 3: Select Servicio (100% ancho) -->
<div class="form-group"> <div class="form-group">
<label for="serviceType" class="form-label">{{ i18n.t().contactLabelService }}</label> <label for="serviceType" class="form-label">{{ i18n.t().contactLabelService }}</label>
<div class="select-wrapper"> <div class="select-wrapper">
@ -130,7 +121,6 @@
</div> </div>
</div> </div>
<!-- Fila 4: Textarea Detalles (100% ancho, mínimo 4 filas) -->
<div class="form-group"> <div class="form-group">
<label for="projectDetails" class="form-label"> <label for="projectDetails" class="form-label">
{{ i18n.t().contactLabelDetails }} {{ i18n.t().contactLabelDetails }}
@ -154,14 +144,12 @@
} }
</div> </div>
<!-- Mensaje de Error Global si aplica -->
@if (errorMessage()) { @if (errorMessage()) {
<div class="error-banner" role="alert"> <div class="error-banner" role="alert">
{{ errorMessage() }} {{ errorMessage() }}
</div> </div>
} }
<!-- Botón de Envío -->
<button <button
type="submit" type="submit"
class="submit-btn" class="submit-btn"

35
src/frontend/src/app/presentation/features/terminal/terminal.component.css
View File

@ -68,9 +68,12 @@
color: var(--zen-text-secondary); color: var(--zen-text-secondary);
} }
.arch-icon { .gengar-icon {
color: #7dcfff; width: 22px;
font-size: 0.8125rem; height: 22px;
object-fit: contain;
image-rendering: pixelated;
flex-shrink: 0;
} }
.term-header-status { .term-header-status {
@ -101,6 +104,32 @@
background: radial-gradient(circle at top right, rgba(122, 162, 247, 0.04) 0%, transparent 60%); background: radial-gradient(circle at top right, rgba(122, 162, 247, 0.04) 0%, transparent 60%);
} }
/* Imagen pixel art + texto del sistema lado a lado */
.term-image-banner {
display: flex;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-3);
background-color: #0b0e14;
}
.term-image {
width: 140px;
height: 140px;
object-fit: contain;
image-rendering: pixelated;
flex-shrink: 0;
}
.term-banner-text {
margin: 0;
font-family: var(--font-mono);
font-size: 0.75rem;
line-height: 1.4;
color: #7dcfff;
white-space: pre;
}
.term-banner { .term-banner {
margin: 0 0 var(--space-3) 0; margin: 0 0 var(--space-3) 0;
font-family: inherit; font-family: inherit;

8
src/frontend/src/app/presentation/features/terminal/terminal.component.html
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="term-title-block"> <div class="term-title-block">
<span class="arch-icon">󰣇</span> <img src="assets/images/gengar.png" alt="" class="gengar-icon" aria-hidden="true" />
<span class="term-window-title">bryan&#64;archlinux: ~ (fish)</span> <span class="term-window-title">bryan&#64;archlinux: ~ (fish)</span>
</div> </div>
@ -18,6 +18,12 @@
<div #terminalBody class="term-body"> <div #terminalBody class="term-body">
@for (entry of entries(); track entry.id) { @for (entry of entries(); track entry.id) {
@switch (entry.type) { @switch (entry.type) {
@case ('image') {
<div class="term-image-banner">
<img [src]="entry.content" alt="" class="term-image" aria-hidden="true" />
<pre class="term-banner-text">{{ entry.textContent }}</pre>
</div>
}
@case ('banner') { @case ('banner') {
<pre class="term-banner" aria-label="Información del sistema Arch Linux">{{ entry.content }}</pre> <pre class="term-banner" aria-label="Información del sistema Arch Linux">{{ entry.content }}</pre>
} }

14
src/frontend/src/app/presentation/features/terminal/terminal.component.ts
View File

@ -14,9 +14,10 @@ import { I18nService } from '../../../application/services/i18n.service';
export interface TerminalEntry { export interface TerminalEntry {
readonly id: string; readonly id: string;
readonly type: 'input' | 'output' | 'error' | 'success' | 'banner' | 'ascii'; readonly type: 'input' | 'output' | 'error' | 'success' | 'banner' | 'ascii' | 'image';
readonly command?: string; readonly command?: string;
readonly content?: string; readonly content?: string;
readonly textContent?: string;
} }
@Component({ @Component({
@ -44,9 +45,10 @@ export class TerminalComponent implements AfterViewInit {
protected readonly entries = signal<TerminalEntry[]>([ protected readonly entries = signal<TerminalEntry[]>([
{ {
id: 'init-banner', id: 'init-gengar',
type: 'banner', type: 'image',
content: this.i18n.t().terminalBanner content: 'assets/images/gengar.png',
textContent: this.i18n.t().terminalBanner
}, },
{ {
id: 'init-hint', id: 'init-hint',
@ -60,8 +62,8 @@ export class TerminalComponent implements AfterViewInit {
const t = this.i18n.t(); const t = this.i18n.t();
this.entries.update(prev => this.entries.update(prev =>
prev.map(e => { prev.map(e => {
if (e.id === 'init-banner') { if (e.id === 'init-gengar') {
return { ...e, content: t.terminalBanner }; return { ...e, textContent: t.terminalBanner };
} }
if (e.id === 'init-hint') { if (e.id === 'init-hint') {
return { ...e, content: t.terminalHint }; return { ...e, content: t.terminalHint };

BIN
src/frontend/src/assets/images/gengar-clean.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/frontend/src/assets/images/gengar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB