new version

apps/react-app/src/pods/about-us/data-json.ts

@@ -8,20 +8,20 @@ interface User {
 
 export const userList: User[] = [
   {
-    avatar: './assets/teresa.jpg',
-    name: 'Teresa Milanés',
+    avatar: './assets/leticia-de-la-osa.jpg',
+    name: 'Leticia de la Osa',
     job: 'Frontend Developer',
-    linkedin_url: 'https://www.linkedin.com/in/mteresamb/',
+    linkedin_url: 'https://www.linkedin.com/in/deletidev/',
     description:
-      'Soy  MªTeresa,  desarrolladora  de  aplicaciones  web  enfocada  en el  Frontend  y diseño UI- UX.Combino habilidades en diseño y comprensión de la experiencia de usuario para crear interfaces atractivas y funcionales',
+      '¡Hola! Soy Leti, desarrolladora Frontend. Disfruto cada desafío de dar vida a ideas creativas. Trabajo integrando estética, funcionalidad y accesibilidad con código limpio y reutilizable. Asegurando así una experiencia de usuario positiva.',
   },
   {
-    avatar: './assets/flavio.png',
-    name: 'Flavio Forte',
+    avatar: './assets/teresa.jpg',
+    name: 'Teresa Milanés',
     job: 'Frontend Developer',
-    linkedin_url: 'https://www.linkedin.com/in/flavio-forte-/',
+    linkedin_url: 'https://www.linkedin.com/in/mteresamb/',
     description:
-      'Soy un desarrollador Front End, hace dos años arranque mi carrera cursando un Bootcamp de fundamentos, y me especialice cursando el Máster Front End Lemoncode, en la actualidad me encuentro colaborando en proyectos tales como ManfredExport y complementado mis capacidades cursando el Bootcamp Backend Lemoncode.',
+      'Soy  MªTeresa,  desarrolladora  de  aplicaciones  web  enfocada  en el  Frontend  y diseño UI- UX.Combino habilidades en diseño y comprensión de la experiencia de usuario para crear interfaces atractivas y funcionales',
   },
   {
     avatar: './assets/juan-berrocal.png',
@@ -31,14 +31,6 @@ export const userList: User[] = [
     description:
       'Graduado en informática de sistemas, gestioné la empresa familiar, fui freelance y desde hace tiempo trabajo en logística para una multinacional de alimentación. Las nuevas tecnologías brindan hoy unas posibilidades impensables hace unos años y estoy reciclándome para incorporarme a este fascinante mundo.',
   },
-  {
-    avatar: './assets/adolfo-zambrana.png',
-    name: 'Adolfo Zambrana',
-    job: 'Frontend Developer',
-    linkedin_url: 'https://www.linkedin.com/in/adolfo-zambrana-gilabert-a37776b5/',
-    description:
-      'Buenas, me llamo Adolfo Zambrana, soy programador FrontEnd, diseñador gráfico e Ilustrador, y durante estos últimos años he estado trabajando y formándome como programador Front-End especialista en experiencia de usuario.',
-  },
   {
     avatar: './assets/abel-de-tena-torres.jpg',
     name: 'Abel de Tena',
@@ -55,4 +47,20 @@ export const userList: User[] = [
     description:
       'Graduado en Derecho y Ciencias Políticas. Con anterioridad a dedicarme al desarrollo web, ejercí en un despacho la abogacía penal. Cursé el Bootcamp de JavaScript de Lemoncode y su Máster de FrontEnd. Quedé entusiasmado con la combinación de análisis y creatividad, versatilidad y belleza de la programación. Actualmente estoy estudiando DAW y formándome ante cualquier oportunidad que encuentre en este apasionante sector.',
   },
+  {
+    avatar: './assets/flavio.png',
+    name: 'Flavio Forte',
+    job: 'Frontend Developer',
+    linkedin_url: 'https://www.linkedin.com/in/flavio-forte-/',
+    description:
+      'Soy un desarrollador Front End, hace dos años arranque mi carrera cursando un Bootcamp de fundamentos, y me especialice cursando el Máster Front End Lemoncode, en la actualidad me encuentro colaborando en proyectos tales como ManfredExport y complementado mis capacidades cursando el Bootcamp Backend Lemoncode.',
+  },
+  {
+    avatar: './assets/adolfo-zambrana.png',
+    name: 'Adolfo Zambrana',
+    job: 'Frontend Developer',
+    linkedin_url: 'https://www.linkedin.com/in/adolfo-zambrana-gilabert-a37776b5/',
+    description:
+      'Buenas, me llamo Adolfo Zambrana, soy programador FrontEnd, diseñador gráfico e Ilustrador, y durante estos últimos años he estado trabajando y formándome como programador Front-End especialista en experiencia de usuario.',
+  },
 ];

apps/react-app/src/pods/template-export/components/export-config/export-config.component.tsx

@@ -17,7 +17,7 @@ interface Props {
 }
 
 const DOWNLOAD_MESSAGE_TIMEOUT = 2500;
-const DESIGN_OPTIONS: TemplateCV[] = ['Sith Elegance', 'Galactic CleanTech', 'Monochrome Force'];
+const DESIGN_OPTIONS: TemplateCV[] = ['Sith Elegance', 'Galactic CleanTech', 'X-Wing Squadron', 'Monochrome Force'];
 const LANGUAGE_OPTIONS: Language[] = ['es', 'en'];
 
 export const ExportConfig: React.FC<Props> = props => {
@@ -30,6 +30,7 @@ export const ExportConfig: React.FC<Props> = props => {
   const [htmlPreview, setHtmlPreview] = React.useState<string>(
     onHTMLSettingSelectionChanged(htmlTemplate, exportHTMLSettings)
   );
+  const [hideColorSelected, setHideColorSelected] = React.useState<boolean>(false);
 
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setExportHTMLSettings({ ...exportHTMLSettings, colorTheme: event.target.value as ColorTheme });
@@ -64,6 +65,7 @@ export const ExportConfig: React.FC<Props> = props => {
   };
 
   React.useEffect(() => {
+    setHideColorSelected(exportHTMLSettings.template === 'X-Wing Squadron');
     setHtmlPreview(onHTMLSettingSelectionChanged(htmlTemplate, exportHTMLSettings));
   }, [exportHTMLSettings]);
 
@@ -81,9 +83,11 @@ export const ExportConfig: React.FC<Props> = props => {
               label={'Idioma cabeceras'}
             /> */}
           </div>
-          <div className={classes.selectColorContainer}>
-            <CustomSelectColor label={'Colores'} onChange={handleColorChange} />
-          </div>
+          {!hideColorSelected && (
+            <div className={classes.selectColorContainer}>
+              <CustomSelectColor label={'Colores'} onChange={handleColorChange} />
+            </div>
+          )}
         </div>
         <div className={classes.prevContainer}>
           <p className={`${classes.title}`}>Previsualización</p>

export-samples/html/cv-x-wing-squadron.html

@@ -74,7 +74,7 @@
       h1 {
         display: flex;
         flex-direction: column;
-        width: min-content;
+        min-width: min-content;
         text-transform: capitalize;
         font-family: 'Source Serif Pro', sans-serif;
         font-size: 75px;
@@ -86,6 +86,15 @@
         -webkit-text-fill-color: transparent;
       }
 
+      .gradient__background {
+        display: flex;
+        flex-grow: 1;
+        background: var(--manfred-gradient);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+      }
       @media (min-width: 728px) {
         h1 {
           font-size: 82px;
@@ -129,7 +138,7 @@
       }
 
       .technologie__icon--gray-scale {
-        width: 35px;
+        max-width: 35px;
         filter: grayscale(100%);
       }
 
@@ -145,9 +154,13 @@
 
       header > img {
         align-self: center;
-        width: 225px;
-        height: 225px;
         border-radius: 225px;
+        min-width: 225px;
+        min-height: 225px;
+        max-width: 350px;
+        max-height: 350px;
+        object-fit: cover;
+        background: var(--manfred-gradient);
       }
 
       .header__content {
@@ -162,6 +175,10 @@
         padding: var(--spacing_16) 0px;
       }
 
+      .header__content__name > * {
+        padding-left: var(--spacing_8);
+      }
+
       .job-title {
         color: var(--manfred-dark);
         font-family: 'Source Serif Pro', sans-serif;
@@ -175,6 +192,7 @@
         display: flex;
         align-items: center;
         gap: var(--spacing_8);
+        padding-left: var(--spacing_8);
       }
 
       .header__content__address > p {
@@ -187,9 +205,10 @@
         display: flex;
         align-items: center;
         gap: var(--spacing_32);
+        padding-left: var(--spacing_8);
       }
 
-      @media (min-width: 1024px) {
+      @media (min-width: 728px) {
         .header__content__address > p {
           font-size: 16px;
         }
@@ -201,12 +220,7 @@
           justify-content: flex-start;
           align-items: center;
           flex-direction: row;
-          gap: var(--spacing_64);
-        }
-
-        header > img {
-          width: 350px;
-          height: 350px;
+          gap: var(--spacing_48);
         }
 
         .header__content {
@@ -387,7 +401,9 @@
             <svg xmlns="http://www.w3.org/2000/svg" width="64" height="10" viewBox="0 0 64 10" fill="none">
               <path d="M1.10269e-06 5L64 5" stroke="#3BA0B7" stroke-width="9" />
             </svg>
-            <h1>david</h1>
+            <div class="gradient__background">
+              <h1>david</h1>
+            </div>
             <h2 class="surname">bonilla fuertes</h2>
             <p class="job-title">Fundador en Manfred / C-Level Executive</p>
           </div>

packages/manfred-common/src/doc-parts/profile-section/profile-section.mapper.spec.ts

@@ -335,4 +335,5 @@ describe('Testing profile-section.mapper.ts', () => {
     });
   });
 });
+
 export {};

packages/manfred-common/src/doc-parts/studies-section/studies-section.helpers.spec.ts

@@ -15,6 +15,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',
@@ -31,6 +32,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',
@@ -47,6 +49,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description',
           institution: {
             name: 'name',
+            description: 'description',
             location: {
               country: 'España',
               region: 'region',
@@ -69,6 +72,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description',
           institution: {
             name: 'name',
+            description: 'description',
             location: {
               country: 'España',
               region: 'region',
@@ -85,6 +89,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',
@@ -101,6 +106,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',
@@ -123,6 +129,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description',
           institution: {
             name: 'name',
+            description: 'description',
             location: {
               country: 'España',
               region: 'region',
@@ -139,6 +146,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',
@@ -161,6 +169,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description',
           institution: {
             name: 'name',
+            description: 'description',
             location: {
               country: 'España',
               region: 'region',
@@ -177,6 +186,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',
@@ -201,6 +211,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',
@@ -223,6 +234,7 @@ describe('studies-section.helpers specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',

packages/manfred-common/src/doc-parts/studies-section/studies-section.mapper.spec.ts

@@ -92,6 +92,7 @@ describe('studies-section.mapper specs', () => {
           description: 'description',
           institution: {
             name: 'name',
+            description: 'description',
             location: {
               country: 'España',
               region: 'region',
@@ -136,6 +137,7 @@ describe('studies-section.mapper specs', () => {
                   address: 'address',
                 },
               },
+              linkedCompetences: [],
             },
             {
               studyType: 'certification',
@@ -173,6 +175,7 @@ describe('studies-section.mapper specs', () => {
           description: 'description',
           institution: {
             name: 'name',
+            description: 'description',
             location: {
               country: 'España',
               region: 'region',
@@ -190,6 +193,7 @@ describe('studies-section.mapper specs', () => {
           description: 'description2',
           institution: {
             name: 'name2',
+            description: 'description2',
             location: {
               country: 'Italia',
               region: 'region2',

packages/manfred-common/src/doc-parts/studies-section/studies-section.mapper.ts

@@ -1,4 +1,4 @@
-import { ManfredAwesomicCV } from '@/model';
+import { Competence, ManfredAwesomicCV } from '@/model';
 import { CountryType, Institution, StudiesSectionVm, StudyTypeWithTranslation } from './studies-section.vm';
 import { studiesTypes, countryList } from './studies-section.constants';
 import { sortedStudiesByStartDate } from './studies-section.helpers';
@@ -16,13 +16,13 @@ export const mapFromMacCvToStudiesSectionVm = (cv: ManfredAwesomicCV): StudiesSe
       const description = study?.description ?? '';
       let institution: Institution = {
         name: study?.institution?.name ?? '',
+        description: study?.institution?.description ?? '',
         location: {
           country: study?.institution?.location?.country ?? '',
           region: study?.institution?.location?.region ?? '',
           address: study?.institution?.location?.address ?? '',
         },
       };
-
       const mapStudyType = mapStudiesTypes(studyType, studiesTypes);
       const mapCountry = mapCountries(institution.location.country, countryList);
       institution = { ...institution, location: { ...institution.location, country: mapCountry } };

packages/manfred-common/src/doc-parts/studies-section/studies-section.vm.ts

@@ -14,6 +14,7 @@ export interface StudiesSectionVm {
 export interface Institution {
   name: string;
   location: Location;
+  description: string;
 }
 
 export interface Location {

packages/manfred2html/src/engine/cv-x-wing-squadron/html-parts/about-me-section/about-me-section.ejs

@@ -0,0 +1,11 @@
+<%_ if (profile && profile !== 'undefined' ) { -%>
+  <section class="main__section about-me__section">
+    <div class="main__section__header">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="6" viewBox="0 0 32 6" fill="none">
+        <path d="M5.51343e-07 3L32 3" stroke="#3BA0B7" stroke-width="6" />
+      </svg>
+      <h2><%- labels.ABOUT_ME_HEADING %></h2>
+    </div>
+    <p><%= profile?.description %></p>
+  </section>
+<%_ } -%>