Hoy nos toca desarrollar, pero no desarrollar cualquier cosa.
Hoy vamos a desarrollar un portafolio que te va a servir también de currículum y además que sea fácil de imprimir.
O sea, una página web que con un solo JSON, ¿veis? Como este de aquí.
Con un solo JSON, ya veis, imprimís esto, os queda buenísimo, maravilloso, fantástico, muy bonito, ¿vale?
Que lo podéis imprimir y que además es una página web que la vais a poder mantener.
Ah, mira, qué interesante este detalle. Este detalle no lo había visto, me parece muy interesante.
Ahora lo arreglaremos porque esto no lo había tenido en cuenta.
Pero me parece muy bien porque vamos a ver cosas interesantes.
Por ejemplo, la media query de imprimir.
Cómo hacer una página web muy minimalista que nos quede bien para que quede impresa perfecta
y que os puede servir de portafolio.
Por si no queréis tener estos típicos portafolios tan vistosos y queréis un portafolio más minimalista, vamos a hacer este.
La pregunta del millón es, ¿y por qué lo haces, no?
Porque ya existe este, que es de Bartosz Yaroky, que lo hizo y se hizo muy famoso.
Oye, y está muy bien, ¿eh? Está muy interesante el proyecto que hizo Bartosz.
Pero, ¿por qué lo vamos a hacer? Lo vamos a hacer por diferentes motivos.
Uno, para aprender. Siempre para aprender. Aprender es bonito.
¿Cómo podemos hacer esta página? Y vamos a intentar hacerla en el directo de hoy.
Dos, porque tengo una idea que va un poquito más allá.
En el sentido de que mi idea es que configurando un solo JSON,
podáis tener toda la información sin necesidad de tocar ni una línea de código.
¿No? Sin tocar ni una línea de código que tengáis vuestro portafolio, con vuestro currículum, con este diseño.
Tocando un JSON.
Lo vamos a ver y vamos a ver en qué nos estamos basando.
Porque vamos a seguir esto.
Un esquema de JSON que está pensado justamente para los portafolios y los currículums.
En cuanto tú a esto, lo bueno es que tú le pones el nombre, el label, imagen, el email, el font,
donde has trabajado, educación, los premios, certificados, publicaciones, skills, lenguajes, todo.
Hasta los proyectos. Tú cambias este JSON y ya lo tienes.
Solo con esto ya lo tendríamos, ¿vale?
Y luego, ¿qué más vamos a tener?
Bueno, la idea además es que tenga mejor rendimiento.
No es que esté mal de rendimiento el de Bartóz, pero lo ha hecho con Next.js.
Que, a ver, no pasa nada. Funciona súper bien, ¿eh?
Funciona súper bien. Me gusta un montón la página.
Pero lo malo es que creo que, ¿veis? Aquí tenemos un montón de JavaScript, JavaScript, JavaScript, JavaScript.
Y no es necesario todo este JavaScript.
A mí me encanta Next.js, pero Next.js no me parece el mejor caso de uso.
Vamos a intentar simplificarla al máximo para que justamente no necesitemos nada de esto.
Y a ver cuánto nos queda después nuestra página web de JavaScript, de CSS y todo esto.
Aquí podemos ver que son 600k, 300 que se transfieren, 600 que tendré de recursos.
Se transfieren menos porque se comprimen, ¿vale?
Justamente, no sé si lo sabéis, pero esto es bastante interesante.
Si le dais aquí, a ver, ¿dónde estaba? Es que esto como va cambiando cada 2x3.
Esto como va cambiando.
Ah, es que lo han cambiado esto.
A ver aquí, ¿será aquí?
Aquí, Big Request... Aquí.
¿Ves? Big Request Rows.
Joder, es que estaba oculto. Antes era un iconito.
Pues esto, ¿veis que aquí aparecen como dos tamaños?
Uno arriba y otro abajo.
¿Esto qué significa?
Esto significa que se han transferido 9k, pero que lo que ocupa el HTML son 94k.
¿Por qué?
Porque esto, como utiliza una compresión, seguramente Broly o Gzip, una de las dos, lo que hace es comprimir,
transfiere menos datos y esto te permite que vaya más rápido la página, obviamente.
Muy bien, pues vamos a tener que darle cañita porque lo quiero hacer todo hoy y quiero que lo podamos terminar.
Y quiero que también lo vamos a hacer de código abierto, por supuesto.
De hecho, le voy a crear ya el repositorio y vamos a ir por faena, ¿vale?
Vamos a ir por faena.
Así que, venga, vamos a poner aquí...
Por supuesto, la idea es de este chico, que luego la gente dirá, ¿pero te lo has copiado?
Sí, me lo he copiado, pero porque nos vamos justamente a basar en su trabajo, que es muy interesante.
Voy a poner Minimalist Portafolio JSON, ¿vale?
Vamos a ponerle así, a Minimalist Portafolio Configurable Via One JSON.
Y esto, luego ya le diremos a Feral que nos haga el Ritmi, buenísimo.
Pero por ahora tenemos esto.
Os comento dos cosas, antes de que os olvidemos, ¿eh?
Ahí, le he puesto Portafolio y podría haber puesto Portfolio para que todo el mundo lo...
Venga, Rename, ya está, ya está.
Bueno, pues vamos a darle cañita.
Ya os podéis imaginar con qué vamos a hacer esto, ¿vale?
Lo vamos a hacer con Astro.
Y ahora os voy a explicar también por qué, ¿vale?
Porque, porque Astro, para mí, se está convirtiendo...
Ya sé que igual mucha gente, ah, yo otra vez con Astro.
Pero yo, a día de hoy, creo que es el framework de la web.
O sea, es el framework de la web, ¿por qué?
Porque puedes hacerlo todo con Astro, todo, todo.
A ver, hay cosas que sí que yo utilizaría en XDS para páginas que son más interactivas y tal.
Pero páginas estáticas que tengan muy poquito, que sea dinámico, yo utilizaría Astro.
Es que, es que, es que tiene todo cosas buenas, todo cosas buenas.
Te mejora un montón la experiencia de desarrollo.
Puedes utilizar luego React, Preact, Svelte, Vue, lo que tú quieras.
Entonces, yo, la verdad, si hay algo que tienes que aprender este 2024, yo te diría Astro.
Se aprende muy fácil y, además, es que, es que, es que me parece como que va a ser el por defecto cuando quieras crear cualquier página web.
De verdad, ¿eh?
O sea, es como, y además es lo más parecido a utilizar HTML.
De verdad, es lo más parecido.
Así que, nada, npmcreateastro arroba latest.
Y vas a ver si es la primera vez que lo ves, que lo dudo, porque ya lo hemos visto un montón de veces.
Exacto, es como un HTML con asteroides.
Con asteroides, no, con esteroides, perdón.
Con asteroides.
He dicho asteroides, ¿sabéis por qué he dicho asteroides?
Porque, como es Astro, pues, como tiene que ver con el espacio, me ha venido eso, ¿vale?
Vale, ¿cómo le he llamado a esto?
Le he llamado Minimalist Portfolio JSON.
Vale, Minimalist Portfolio JSON, le decimos que sí, que queremos todo lo que es por defecto, que sí, que...
No, que no instale las dependencias.
Inicializamos el repositorio, ¿vale?
Vamos a inicializar el repositorio.
Vamos a ponerle el remote este, ¿vale?
Vamos a seguir las instrucciones que ya tenemos por aquí.
Así que, Minimalist Portfolio JSON, le ponemos el remoto, vamos a pushear esto.
Venga, pusheamos Init Project y pusheamos.
Pusheamos.
Venga, pusheamos ya los primeros archivos y así ya podemos empezar.
Y aquí, PNPM Install.
Aquí cada uno que utilice el que le dé la gana, ¿eh?
Si queréis utilizar MPM, pues ya está bien.
PNPM es una alternativa que es más rápida.
A mí me gusta más porque además lo que hace es que ocupan menos los Node Modules de todos tus proyectos
porque reutiliza las dependencias.
Y así, pues ahorras disco, ahorras disco, ¿vale?
Que no sé si lo sabéis, no sé si lo sabéis, pero MPM se lo va a copiar.
Se va a copiar esto, se lo va a copiar.
Que está bien, tiene sentido que se lo copie, ¿eh?
Se lo va a copiar.
Y va a ser dentro, no sé, en algún tiempo, en algún momento, va a ser como por defecto lo que va a hacer.
Pero se va a basar en lo de PNPM para no instalar más de una vez los Node Modules.
Y había una perra abierta, la estuve viendo el otro día, ¿eh?
PNPM, RAM DEV y ya tendríamos aquí nuestro proyectito, ¿vale?
Bueno, empezamos ahí desde cero con el welcome para que se vea que estamos empezando desde cero, ¿eh?
Que no se diga.
Vale, cositas.
No voy a utilizar Tailwind.
Muchas veces me decís, es que Tailwind siempre estás con...
No voy a usar Tailwind, no voy a usar Tailwind esta vez.
Me gusta muchísimo Tailwind, las cosas como son, pero sé que a muchos de ustedes le da bastante cosita.
Pues esta vez no vamos a usar Tailwind.
Ahora, lo que sí que vamos a utilizar es Astro.
Si no tienes ni idea de Astro, te recomiendo que te veas algún vídeo mío.
YouTube, Astro, Curso...
Seguro que tú, tú, tú, mira este.
Aprende Astro 3 desde el principio, ta, ta, ta.
Pues aquí tienes uno, ¿vale?
Aquí tienes uno, una hora y media.
Es que tengo un montón.
Tengo un montón de vídeos de Astro.
Es que lo hacemos todo con Astro.
Me encanta Astro.
Si pudiera, me casaría con Astro.
Es que me encanta, de verdad.
Entonces, voy a inicializar aquí ya...
Voy a quitar todos estos estilos por defecto.
Aquí irían los estilos globales, ¿vale?
Fíjate que aquí tenemos una etiqueta Is Global, porque aquí vamos a tener estilos globales.
Como no vamos a utilizar Tailwind, vamos a hacer una cosa que es bastante interesante.
Vamos a aprovecharnos de las bondades de Astro, tanto para los estilos globales como para los que no son globales, ¿vale?
Así que vamos primero con los estilos globales que nos van a facilitar bastante la vida.
Primero, en el HTML vamos a utilizar una familia de Monospace.
Nos vamos a basar mucho en el estilo que tiene Bartorz, ¿vale?
O sea, vamos a copiarnos la página y le daremos créditos, tanto en el Ritmi como seguramente en la página web.
Y si no, alguna cosa haremos para que se note que lo hemos sacado de su página, ¿eh?
Él lo ha hecho de código abierto también, que podéis ir aquí a los repositorios.
Y está súper chulo porque es un public template que si queréis le podéis hacer un fork y tal, ¿vale?
Lo que queráis.
Está muy chulo, o sea, que no hay ningún tipo de problema.
Y no quiero que nadie diga, no, es que se lo ha copiado.
No, es que claro que me lo ha copiado porque lo estoy diciendo.
Me ha gustado mucho, solo que me apetecía a mí hacerlo desde cero y que veáis cómo lo podíamos hacer, ¿vale?
Entonces, la familia de la fuente que vamos a utilizar va a ser la Menlo, la Monaco, bueno, y aquí depende ya un poquito de la que tenga cada uno en el sistema.
Yo voy a dejar aquí hasta la Courier New, Courier y Monospace.
Esto básicamente serían las fuentes Monospace que más o menos están en los sistemas operativos y que van a quedar más o menos bien, ¿vale?
Le vamos a dejar que el fondo sea blanco, aunque es el que es por defecto, pero bueno, se lo vamos a dejar.
Y vamos a juntar un poquito, un poquito las letras para que básicamente queden un poquito pegaditas, ¿vale?
Vamos a hacer un CSS Reset un poco pirata, ¿vale?
Porque como no usamos Tailwind, tenemos que resetear algunos estilos.
Así que nada, vamos a poner que el Body y el Figure, pues nada, tengan el Margin y el Padding a cero.
Vamos a poner que los Ancos, pues el Text Decoration, pues el Sean On, que no tenga el Underline.
Pues el UL también, le quitamos los estilos típicos, Margin cero, Padding cero.
Vamos a poner también el Box Sizing, importante, el Box Sizing.
Vamos a poner el Box Sizing para el Before también y el After.
Y esto, nada, por ahora no vamos a hacer modo oscuro.
Luego ya veremos si tenemos tiempo, pues le daremos cañita al modo oscuro.
¿Qué más ponemos? Que el H1, H2, H3 y H4, todo lo que son títulos lo vamos a hacer con otra fuente, ¿vale?
Le quitamos los márgenes por defecto y le vamos a poner la fuente del sistema,
que es la que queda normalmente mapónica.
Y para terminar, vamos a estilar lo que son los párrafos.
Vamos a ponerlos con un color así por defecto, que más o menos nos quede...
Bueno, ahora ajustaré, igual queda muy oscuro, no sé.
Luego iré viendo, ¿vale? A ver cómo queda cada uno.
Le dejamos así y quitamos el Margin y por defecto vamos a ponerle un TextGrab Pretty,
para que queden bonitos, para que no haga saltos de línea y solo deje una palabra.
Esto no está soportado todavía por todos los navegadores, pero porque esté soportado, pues ya quedará bien, ¿vale?
Entonces, al menos ya empezamos con unos estilos por defecto de nuestra página web, ¿vale?
Vamos a poner que esto sea en español, que esto dependerá de cada uno, también os digo.
Y en la página, en el índice, que esta sería el índice, vamos a quitar la card y vamos a eliminar todo lo que hay aquí dentro.
Todo esto lo eliminamos y todo esto también lo eliminamos y ahora empezamos aquí a hacer nuestra magia.
Aquí vamos a poner Minimalist Portfolio y ahora arreglamos un poquito esto, ¿vale?
Vamos a poner por aquí Hola Mundo, ¿vale? Y vamos a ver cómo va quedando esto.
Mira, ya está, ya está hecho. No, es mentira, es este.
Vale, todavía nos quedan cositas, muchas cosas.
Pero bueno, ya tenemos la página blanca con el título aquí, ¿vale?
Vale, vamos a centrarnos ahora en los componentes.
¿Qué quiere decir esto? Vamos a ver las secciones que vamos a tener que crear.
Yo la voy a dividir por secciones. Por ejemplo, esta sería el Giro, esto sería el About, esto sería Experience.
Ya vais entendiendo, ¿no? Cada una de las secciones pues va a ser un componente.
Así que lo que vamos a tener que hacer, hostia, no sé si me va a salir este truco.
Lo puedo intentar, lo puedo intentar. Pero puede ser un truco muy interesante por si alguna vez tenéis que hacer cositas así, como muchos archivos de golpe.
No sé si me va a salir, ¿vale? Pero hay un truco porque, claro, si hay que crear muchos archivos...
Ah, mira, este truco. Joder, pues si es que el otro día... Ah, ya lo tengo aquí.
About, Gider, Experience... Claro, pues mirad, About, Gider... No, Gider no.
Bueno, sería Giro, About... Hostia, no sé si es con espacio o sin espacio. Yo creo que es en espacio.
Giro, About... ¿Cuál hemos dicho? Giro, About, Experience, Skills, Projects...
Y vamos a tener uno más que va a ser el teclado. Porque una cosa muy chula que tiene el de Bartóz es esto.
¿Vale? Que esto es como para buscar acciones y enlaces. ¿Veis? Que podéis ir a enlaces y tal.
Esto también lo vamos a hacer. Esto también lo vamos a hacer y os voy a enseñar cómo hacerlo, que está bastante chulo.
¿Vale? Así que esto es bastante fácil. Parece muy difícil, pero al final utilizas una biblioteca y lo haces y ya está.
Así que os lo voy a enseñar. ¿Vale? Entonces me faltaría... Education, ¿no? Pues vamos a poner el de Education y ya está.
Mirad, esto es un truco. Si alguna vez tenéis que crear un montón de componentes a la vez, lo que podéis hacer es utilizar el Touch,
que esto seguro que lo habéis utilizado alguna vez. Pero lo que podéis hacer... Mira, que se vea todo.
Es decirle, vale, Touch, pones aquí como el path y aquí pondrías entre llaves como todos los archivos que quieres crear a la vez.
Giro, About, Experience, Education, Skills, Projects, separado por coma. Y luego aquí pondrías .astro, que sería la extensión.
Si no me he equivocado, ¿vale? Y le damos al Enter. Ahora deberíamos ver que nos ha creado todos los archivos.
Esto es trucazo. Está muy chulo porque si por lo que sea tenéis que crear esto a mano, tendrías que estar aquí, aquí, About, no sé qué.
Y tendrías que estar creando uno a uno, ¿vale? Esto funciona pues en Linux, en MacOS y en Windows si estás en la terminal WSL.
Pero bueno, que está muy chulo porque muchas veces seguro que te pasa que tienes que crear...
Si tienes que crear un archivo, no te des a la cuenta. Pero cuando tienes que crear 5 o 10 archivos, pues puede estar bastante interesante.
¿Vale? Solo que lo sepáis. Muy bien. Voy a crear también dos cositas.
Vale. Uno. Voy a crear aquí en el tsconfig, vamos a poner también el compiler options, para que básicamente vamos a poner esto barra...
Vale. Así podremos con esto, lo que estamos haciéndose es un alias.
Y ahora cuando pongamos arroba barra asterisco, se refiere a source.
Y ahora nos quedará mucho más fácil porque ahora podremos hacer esto.
Que va a facilitarnos un montón entender de dónde vienen los componentes.
Entonces importamos todos nuestros componentes, el Education, y así vamos a poder ir uno a uno con todos estos componentes.
¿Vale? El Projects, Import, Skills, ¿vale? Y ya tendríamos estos.
Esto, a mí me encanta hacer esto, ¿vale? Ordenarlos de forma ascendente, para que se entienda.
Y por otro lado, ¿qué más? Ah, quería eliminar este card, que no lo necesitamos.
Y aquí lo que vamos a hacer es, con cada uno, pues poner el Hero, luego el About, luego el Experience, luego sería el Education, luego tendríamos el Projects.
Y yo pondría al final Skills, ¿vale? Yo lo haría así.
Y luego nos faltaría uno más que no he creado, que es el Keyboard Manager, ¿vale?
Vamos a tener un componente que va a ser el Keyboard Manager.
Y el Keyboard Manager no es importante, no sé, no es importante, o sea, que esté ahí.
Lo vamos a poner aquí, Keyboard Manager, porque va a estar como fuera del Main.
Keyboard Manager, ¿vale? Esto lo ponemos por aquí.
Y el Keyboard Manager, que es el que nos va a ayudar a hacerlo de las teclas y tal, lo ponemos fuera.
Y esto está bien, porque así, además, queda bastante más fácil de entender y vamos a poder ir paso a paso, ¿vale?
Así que, vale, pues aquí tendríamos el Hero, vamos a ir poniendo, este sería el About, vamos a poner el About, vamos a poner aquí el Education.
Voy a poner títulos así un poco, solo para que los tengamos, ¿vale?
El Experience, y ahora seguimos con los estilos un poquito.
Ok, H2, pa, pa, pa, este es el Hero.
El Keyboard Manager, esto será un footer, que ya luego lo haremos, que tendremos un script y tendremos que ponerle aquí un Style también, ¿vale?
El Style.
Tendríamos aquí el Projects, Projects, y tendríamos los Skills, ¿vale?
Muy bien, vale.
Solo para que se vea algo que no esté totalmente vacía nuestra página.
Vamos a ver cómo va quedando nuestra página.
Vale, todavía tenemos que centrar todo esto, pero al menos ya tendríamos alguna cosita.
Vale, ahora, lo importante que tenemos que hacer, porque como os he dicho, esto va a ser como configurable y que dentro de lo que vamos a hacer va a ser con un solo JSON,
lo vamos a hacer aquí, ¿vale?
¿Veis aquí que tenemos este esquema?
Esto es un esquema que es como un contrato que existe, que se llama JSON Resume,
que lo que es una iniciativa open source para crear portafolios y currículums basado en un JSON.
Entonces, lo que es para desarrolladores, por desarrolladores.
Está bastante bien porque está bastante bien documentado, es open source, hay mucha comunidad detrás y, bueno,
hay un montón de proyectos que están construidos a través de esto.
Pues vamos a crear mi idea al largo plazo.
Mi idea es básicamente crear una línea de comandos que tú le pases este JSON y que te cree la página web directamente, ¿vale?
Te cree esta página web y así la tengáis totalmente, ¿vale?
Que sería genial. Y claro, ¿ese porfolio sería perfecto para un backend?
Estaría perfecto para un backend, por ejemplo. Totalmente, claro que sí.
Así que os puede servir sobre todo para la gente que no quiera algo tan visual ni nada raro, ¿sabes?
Entonces, vamos a darle por aquí.
Vamos al read more por aquí y fijaos que hay aquí resume.json version 1.0.0.
O sea, copiando todo esto ya tendríamos la información.
De hecho, lo vamos a copiar para que lo veamos, aunque yo voy a utilizar el mío que ya he trabajado en esto.
Lo vamos a poner por aquí, cb.json y lo vamos a poner por aquí.
Y aquí ya tendríamos toda esta información.
Aparte, yo ya tengo uno preparado que ahora lo pegaré, pero por ahora vamos a empezar con este.
Una cosa que está interesante es que podríamos en el tsconfig crear también un import que para traernos el currículum, ¿sabes?
Vamos a poner aquí arroba cv que directamente te busque el archivo del currículum.
Que esto va a ser importante después, más adelante cuando queramos que...
Porque lo vamos a poner aquí y cualquier persona que solo tocando este archivo ya le cambiará toda la página web, ¿vale?
Vamos a ver un ejemplo.
Para que veamos un ejemplo, vamos a hacer el giro, que es como lo más fácil dentro de lo que cabe
y también lo primero más visual y más importante.
Mira, vamos a crear aquí un section, ¿vale?
Porque todas las secciones van a ser section, section, section, una detrás de otra, ¿vale?
Vamos a tener aquí un div, que va a ser un contenedor.
Vamos a ponerle una clase, container, porque de nuevo vamos a estilar con css, ¿eh?
Vamos a estilarlo todo con css.
Y dentro del container vamos a tener por un lado la parte que sea la info,
aunque vamos a utilizar css, luego veréis que vamos a intentar no utilizar muchas clases, ¿eh?
De hecho, igual la quito esta, ¿eh?
Porque podríamos poner que esto sea section, deep y ya nos estamos refiriendo al primero.
Pero bueno, esto simplemente para que tengamos...
Para que no os liéis, por ahora lo haremos así, luego igual quito las clases porque no son necesarias como tal.
Entonces, aquí quiero enseñar el nombre y aquí quiero enseñar la etiqueta,
la etiqueta de la persona, que claro, aquí la ha puesto programmer, que es un poco aburrido.
Mira, voy a hacer una cosa.
Voy a copiar el mío, porque este al final no está tan bien trabajado.
Voy a copiar el mío, ¿vale?
¡Pium!
Pues aquí está el mío.
Este sería el mío con toda mi información.
Mi nombre, mi etiqueta, la imagen que quiero utilizar, el email, mi teléfono, la URL, un sumario,
la localización, dónde vivo, mis redes sociales, dónde he trabajado, con el nombre, la posición,
toda la información.
La información es simplemente aquí, es lo que habría que cambiar para cambiar totalmente el currículum o el portafolio que estamos haciendo, ¿vale?
Entonces, ya con esto que hemos hecho, podríamos irnos a este giro que teníamos por aquí
y lo que podríamos es importar la información del currículum.
¿Qué podemos importar?
Pues nos traemos lo básico.
Basics, Froms, CV, ¿vale?
A ver si lo ha pillado.
Yo creo que sí.
Y ya nos ponemos el nombre y el label, la etiqueta de Basics.
Y ya tendríamos esta parte de aquí, ya tendríamos que traernos más cosas.
Por ejemplo, la imagen, la localización, los profiles, el teléfono, el email y toda la información.
Email no es, es email, ¿vale?
Todo esto lo tenemos que traer.
Y de hecho, en Location tenemos que traernos la ciudad y la región, ¿vale?
Así que nos traemos la city, la location de, ah, no es location, perdón.
He dicho la región, ¿vale?
La región.
No sé por qué le llaman región, que podría ser country.
Pero de nuevo, este JSON es un contrato que ya existe, ¿vale?
Este es un contrato que viene del JSON esquema este que os he enseñado.
Vale.
De hecho, para que tengáis ahí en el Ritmi toda la información, os voy a poner este, ¿vale?
Os voy a poner por aquí.
Esquema del JSON del currículum, ¿vale?
Luego tendríamos basado en el diseño de, de este chico, Bartorz.
Voy a poner el enlace al repositorio para que lo tengáis también por si le queréis echar un vistazo.
Porque está bastante chulo y al final es de dónde lo estamos sacando.
Basado en el diseño tal, basado en el diseño tal, tal, esquema.
Vale.
Pues con esto ya tendríamos ahí dos referencias.
Entonces, vamos a mostrar esta parte, ¿no?
El nombre, el label.
Al lado deberíamos tener también, es, ah, no, espera.
Al lado no, porque creo, vale, justo debajo, veis que enseña también la ciudad.
Pues esa, la ciudad también la vamos a, la enseñamos aquí, ¿vale?
Span.
Aquí nos faltaría el icono, ¿vale?
Esto lo voy a poner por aquí.
Robar icono.
Vamos a robar el icono y luego lo sacamos.
City y coma la región.
¿Vale?
Esto sería la información.
Y por otro lado aquí tendríamos la figura que sería la imagen.
Que aquí, bueno, nos ha puesto este image que es un poco ahí polémico.
Porque, ah, bueno, espérate.
Vale.
Esta figura no iría aquí, ¿no?
Porque, o sí que iría aquí.
Sí, lo que pasa es que aquí tendríamos la lista esta.
Vale.
Esto lo hacemos ahora.
Footer.
Y aquí tendríamos.
Si tienes el teléfono, por ejemplo, si tienes el email, entonces vamos a poner el anchor del email.
¿Vale?
El anchor del email tendríamos que prepararlo con el href y que tenga el mail to.
Y aquí le pondríamos el email.
Esto para que lo evalúe correctamente lo tendríamos que hacer así.
¿Vale?
Y ahora title.
Vamos a hacerlo todo en español, ¿eh?
Porque si no estaríamos ahí todo el día.
Pero enviar un correo electrónico.
Ah, y puedes poner utilizar el nombre, al name, al correo.
Y aquí le ponemos el email.
¿Vale?
Para que tenga el title, para que sea accesible, para que sepa de lo que tiene que hacer.
¿Vale?
Esto que lo abrimos en otra página.
¿Vale?
Y esto, yo creo que esto da igual porque esto al final lo que hace es abrir el cliente del email.
Pero bueno.
Y aquí también nos falta robar icono.
Por ahora voy a ponerlo así.
Hostia, ¿por qué no?
Ah, porque es así.
Vale, es así.
El robar icono sería así.
Vale.
Creo que sí, que es así.
¿Cómo era el comentario?
Si lo he puesto ahí.
Es que como no me está poniendo el color.
Vale.
Por ahora voy a poner esto.
¿Vale?
Pero luego lo arreglo.
Entonces, vamos a ver cómo va quedando esto.
Obviamente, el estilo todavía está un poco regulinchis.
Vale.
Vamos con el estilo para que la gente no se me ponga nerviosa.
Porque si no, la gente se me va a poner nerviosa con los estilos.
Pero lo importante es que ya todo lo que es información y tal, ya lo estamos sacando del JSON directamente.
Ya cualquier cosa que cambiamos del JSON, si alguien cambia el JSON por lo que sea, ¿no?
Y en lugar de Miguel Ángel le pone Pepito Ángel, ¿vale?
Pues ya tendría ahí el Pepito Ángel.
Bueno.
Vamos a arreglar un poco los estilos para que esto se vea bastante mejor.
Vamos a ver.
Primero, en el main, no sé si en el main deberíamos cambiar...
Sí, lo voy a poner aquí.
¿Vale?
Vamos a cambiar primero el main que va a ser lo más fácil.
Le vamos a poner un padding para que tenga bastante espacio alrededor.
Le vamos a poner un margin auto y le vamos a poner que ocupe el 100%.
¿Vale?
¿Vale?
Al menos ya tiene eso.
Ahora lo que vamos a hacer es que cada uno de los componentes vamos a envolverlos en una sección.
¿Veis aquí que tenemos un section?
Vamos a crear un componente que se llame section que justamente envuelva cada uno de los componentes.
O sea, a ver, lo puedo hacer aquí, pero es que lo vamos a tener que reutilizar.
O sea, este section que tengo aquí lo puedo hostilar aquí para que quede bien, pero lo ideal sería llevárselo, ¿no?
O sea, hacer un componente para reutilizarlo y no tener que repetir constantemente esto.
Entonces, vamos a poner, por ejemplo, esto sería arriba.
Vale, no dejamos ningún margen.
Con esto lo centramos y dejamos una separación hacia abajo de 72 píxeles.
¿Vale?
Y con esto al menos, pues ya estaríamos empezando a centrar todos los contenidos.
Como quiero reutilizar esto, yo creo, y en los títulos también, porque lo vamos a tener que reutilizar los títulos.
Voy a crear un componente aquí que le vamos a llamar section, ¿vale?
Section.astro.
De hecho, creo que voy a crear aquí una carpeta, le voy a llamar sections y voy a mover todo esto.
Lo voy a mover aquí para que quede más claro que son secciones lo que estamos haciendo ahí.
Creo que los imports se habrán arreglado automáticamente.
Sí, se han arreglado automáticamente.
Así que perfecto.
Y lo que vamos a hacer en el section este que he creado, este section, aquí, es que vamos a crear el section y voy a ponerle el estilo que habíamos dejado en el giro.
¿Vale?
Aquí, este estilo.
Lo voy a copiar, lo voy a poner aquí.
Y vamos a aprovechar porque todas las secciones al final se le va a pasar un título.
Así que vamos a copiarnos, vamos a pasarle el title, que va a ser opcional.
No siempre se le va a pasar un title, pero si tiene un title, vamos a pintar un h2 con el título, ¿vale?
Y ya lo tendríamos, y así lo tenemos ya aquí, ¿vale?
Dejamos un poquito de separación, que sea negrita, 1.5 y un rem, ¿vale?
1.5 rem.
Vale.
Por ahora esto lo dejamos así y aquí utilizamos este nuevo componente, section, ¿vale?
Lo importamos.
Siempre vamos a utilizar el barra components, components, ¿vale?
Nunca vamos a utilizar los relativos y vemos que aquí nos lo ha dejado mal, así que eso lo arreglamos.
Esto lo eliminamos y por ahora vamos a ver cómo va quedando.
¿Vale?
No astro, ta, ta, ta.
Vale.
La he ligado parda porque me falta el slot.
Si no, no renderiza nada.
Ahora sí.
Vale.
Vamos, vamos, ya va por faena, ya va por faena.
Bueno, estos, ¿qué es lo que pasa?
Que no los hemos envuelto con el section, ¿no?
Lo que pasa es que este section lo tenemos que utilizar también aquí, ¿vale?
Section y le pasaríamos el title directamente así, en lugar de hacer esto.
Y este section habría que importarlo, ¿vale?
Así que esto me lo voy a copiar también para el education y aquí le cambiamos education, en el experience, experience, en el giro, no.
En el projects, projects y en las skills también.
Y así estamos reutilizando ya el mismo componente todo el rato.
Vale.
Ahora ya empieza a pillar un poquito la gestión, ¿vale?
¿Qué hace el slot?
Lo que hace el slot, lo tenemos por aquí, ta, ta, ta, en el section, el slot lo que hace es lo que se le pasa a este componente.
Por ejemplo, ves que este section, ahora le voy a pasar que envuelva esta cosa que voy a poner aquí, hola mundo, ¿vale?
Pues fíjate que en la sección education va a renderizar este hola mundo, ¿no?
Si estamos aquí, ves, hola mundo.
¿Cómo hemos conseguido que hacer esto?
Porque le estamos diciendo al section, ¿vale?
En este slot es como un hueco donde va a introducir la información que le estamos pasando aquí.
O sea, lo que está envolviendo el componente es lo que le llega dentro aquí en el slot.
Uy, coño, pensaba que alguien estaba abriendo aquí la puerta.
Qué desulto.
Una pregunta, ¿cuál es la diferencia entre usar guión, guión, guión y la etiqueta script en astro?
Son muy buena pregunta, pero es que esto, esto se ejecuta en el servidor, ¿vale?
Esto se está ejecutando en el servidor.
Y el script, por ejemplo, la idea, esto se ejecuta en el cliente.
O sea, que son dos cosas diferentes.
El script se ejecutaría en el cliente y esto se ejecutaría en el servidor, en el servidor o en build time, ¿vale?
Si es una página estática, por ejemplo.
Está bastante bien.
¿Has escuchado a alguien? Sí, sí, he escuchado a alguien que estaba como parecía que estaba abriendo la puerta y me metió un susto de tres pares de cojones.
Esperad al que está queriendo escapar.
Sí, sí.
¿Por qué usar figure en lugar del componente image de astro?
Porque son dos cosas diferentes, ¿no?
Figure es un elemento HTML que justamente te puede servir para envolver una imagen.
En este caso, tú, para utilizar el image, en todo caso, lo tendríamos que utilizar en el image, ¿no?
Que es donde tendría sentido.
Aquí deberíais utilizar el image.
Porque el componente image, la idea que hace es optimizar una imagen.
Que lo podríamos hacer también, ¿vale?
Llegando para aprender.
Gracias, hombre.
Alguien pasó atrás de vos.
Verá, no me digas las cosas que me cago encima, ¿vale?
No me digáis esas cosas.
Midu, para crear uno de 18 de unas traducciones, ¿se tendría que hacer dos Jasons?
Pues sí, efectivamente se tendría que hacer dos Jasons porque sería imposible con uno solo.
Así que sí, podrías tener el currículum tanto en inglés.
Por ejemplo, podríamos poner así, es, ¿no?
Bueno, no sé si lo veis.
Sí que lo veis.
Podríais tener el archivo guión es y guión en, uno que tuviese en español y otro en inglés.
De hecho, podríais tener tres.
Uno que sería la información que es para los dos y otro que tenga la información que es específica para el idioma.
Y ya estaría.
En el JSON, ¿puedes la dirección absoluta de la imagen en caso de que sea un recurso local?
A ver, aquí puedes poner, también podríamos utilizar, por ejemplo, mira, lo voy a hacer para que lo veas.
Aquí tengo la imagen, ¿no?
Si la imagen la quitamos, la ponemos aquí, la optimizamos, ¿vale?
Y la ponemos aquí y la bajamos, la ponemos con webp, ¿vale?
La optimizamos para que baje mi webp, ¿vale?
Ya tengo aquí mi imagen.
Podríamos ir a la carpeta public, ¿vale?
Ahora tengo la carpeta public y es muy fácil.
Aquí, en lugar de ser una ruta absoluta, pues ya lo que hago es mi.webp.
Y esto va a funcionar exactamente igual.
O sea, esto es lo interesante.
Lo interesante es que al final, una vez que nosotros tengamos, ¿ves?
La página ha funcionado exactamente igual.
La imagen es la misma.
Pero ahora la está sacando de la propia página web.
O sea, la puedes poner relativa o absoluta.
Eso es indiferente.
Yo lo he puesto absoluta porque simplificaba un poquito la cosa, ¿eh?
En el giro, yo me he robado los iconos ya.
¿Por qué?
Porque si no, no me daba la vida.
Entonces, ya me he robado todos los iconos y me los voy a poner por aquí en una carpeta icons.
La carpeta icons, ¿ves?
Tengo aquí los iconos.
¡Pium!
¿Vale?
Yo me he robado los iconos, todos los iconos, GitHub, Mail y tal.
Que al final no dejan de ser SVGs y ya está.
Entonces, ya el icono este del email, pues ya me lo he robado.
Entonces, vamos a traérnoslo.
A ver si no lo encuentra.
Vamos a importarlo y vamos a traernos el mail de barra icons barra mail.
¿Vale?
Importamos el mail, que es un SVG.
¿Por qué me dice que no lo encuentra?
Ay, porque lo he puesto fuera de components.
Bueno, tiene sentido, ¿no?
O sea, no es un componente como tal.
Al final, son iconos.
O sea, que tiene sentido.
Vale, pues ya tendríamos aquí el email.
¿Vale?
Ah, espérate.
Que esto...
Algo he cerrado mal aquí.
Ah, porque esto no debería ir aquí.
Y esto debería cerrarse automáticamente.
Vale, igual que hemos hecho el email, también deberíamos hacer el phone.
¿Vale?
Igual que hemos hecho el email, deberíamos tener aquí el phone.
Aquí vamos a llamar por teléfono.
En todo caso, phone.
Y llamar...
Llamar por teléfono a...
Al número.
¿Vale?
Le ponemos ahí el número y el teléfono sería phone.
¿Vale?
Y vamos a poner aquí...
Phone.
Ay, no.
Phone.
Ah, es que no me he traído el icono, ¿no?
Vale, pues lo traemos aquí.
Phone.
Y ya está.
Ya tendríamos dos cositas.
¿Vale?
Ahí están los iconitos.
Falta estilarlos.
Ahora los estilamos.
Vamos a añadir ahora los profiles, que es como lo más interesante.
Y al menos ya tendremos toda la información.
No, toda la información tenemos.
A ver, creado el contenido.
Nos falta algo, ¿no?
Porque, a ver, aquí, aquí tiene también...
No, este sí que lo tenemos.
El prato de Jorregat.
Nos falta...
Sí, solo nos faltan los iconitos.
Vale, vale.
Fácil, fácil.
Nos faltan los iconitos.
Bueno, lo único que tenemos que hacer...
¿Ves?
Ya tenemos los profiles.
Vamos a traernos...
Vamos a crear los social icons.
Que esto va a ser un récord.
Esto no debería hacerse, pero como no tengo ganas de ver cuáles son los estilos y tal que tiene,
pues lo voy a hacer así, ¿vale?
Me voy a traer el icono de X, el de LinkedIn, el de GitHub, ¿vale?
Nos traemos los tres iconos y así vamos a poner que vamos a tener el icono de GitHub, el de LinkedIn y el de X, ¿vale?
Así tenemos los social icons, ¿vale?
Ya tenemos todos los iconos sociales.
Y aquí vamos a hacer un map.
Vamos a mapear porque en el currículum, fijaos, que tenemos aquí profiles.
¿Veis?
Que tenemos aquí un array de profiles.
Aquí vosotros podéis poner los que queráis.
Yo creo que con soportar Twitter, GitHub y LinkedIn ya estaría.
Lo interesante es que además aquí le podemos cambiar el orden y según el orden que tenga aquí se verá diferente también en la página web.
¿Sabes?
O sea que si aquí ponemos LinkedIn el primero, el primero que se verá el LinkedIn.
O si no queremos mostrar Twitter, pues quitamos Twitter y ya está.
Eso ahora os lo enseñaré para que veáis cómo queda.
Pero básicamente aquí lo único que tendríamos que hacer es profiles.map.
De cada uno sacar el network, la URL y el username, que es la información que tenemos por ahí, ¿vale?
Y muy bien.
Joder, GijacoPilot, qué maravilla.
Muy bien.
Sacamos el icono del objeto que hemos creado antes y creamos de cada uno un anchor.
Tenemos la URL, visitar el perfil del usuario en la network y ya está.
Con esto ya tendríamos todos los iconitos y fijaos, ¿vale?
Si vamos aquí, ¿vale?
Ya tenemos todos los iconos y además si le damos un clic nos lleva a la página web que esperamos.
Ahora, fijaos también lo que os decía.
Si por lo que sea no queréis mostrar Twitter, solo eliminándolo, pues desaparece Twitter y ya está.
Y si no queréis mostrar ninguno, pues lo quitáis y ya no mostraría ninguno.
O sea que está chulo porque así lo que estamos consiguiendo es que se adapte.
Además, también le podéis cambiar la posición, ¿sabes?
Lo podéis poner aquí y cambiaría la posición.
¿Veis?
Ahora está LinkedIn el primero y dependiendo de dónde lo pongáis, pues se verá en un sitio o se pondrá en otro, ¿no?
Que está bastante, bastante chulo.
A ver, vamos a poner un poco los estilos en orden.
A ver, en el container, por ejemplo, que es lo que hemos hecho al principio.
Vamos a hacer algo así.
Display Flex.
Flex Direction Column.
No, este tiene que ser row porque el container lo que queremos es que salga a la izquierda la información y a la derecha la imagen.
O sea que tiene que ser con row.
Y vamos a querer que el contenido deje espacio entre sí.
O sea que sea space between.
Sí que lo alineamos con el centro y vamos a dejarle un gap para que tenga una separación entre los dos elementos.
Luego, el nombre, que lo tenemos por aquí arriba, lo hemos puesto con un h1, que tiene sentido, ¿vale?
Entonces, h1, vamos a hacerlo bastante grande con dos rem, ¿vale?
Y el margin 0 creo que ya lo hemos reseteado.
Aquí vamos a ponerle un poquito un estilo al h2 para que quede mejor.
Vamos a ponerle que sea gordita, pero no tanto, ¿vale?
Que al final esto si no queda demasiado bestia.
Y le ponemos un text graph balance para ver cómo va quedando esto, ¿vale?
Ajá, vale.
Va quedando mejor.
Ahora lo que pasa es que la imagen nos está quedando demasiado grande, demasiado grande.
Vamos a estilar la imagen para que no sea tan bestia, ¿vale?
A ver, la imagen, vamos a hacer que tenga un aspect ratio de 1 a 1.
Vamos a hacer que object fit, object fit cover.
Y vamos a hacer que el tamaño sea de 128.
Bord de radius de 6 píxeles.
Vale, ya va tirando por ahí un poquito, ¿no?
Ya va teniendo un poquito mejor pinta.
No sé si...
Un poquito menos incluso.
No sé si poner algo así como 100.
Nada.
A ver, tampoco pasa nada que sea...
No sea exactamente igual, pero con que más o menos se vaya viendo el tema.
Vale, pues yo creo que así ya quedará bastante bien, ¿vale?
Tenemos esto, el borde radius.
No sé si ponerle más borde radius.
Está, lo ha puesto bastante.
Bueno, pues lo dejamos así.
Object fit 128.
¿Qué nos falta?
Teníamos un span por aquí que esto teníamos que robar el icono.
Yo ya lo he robado, que es el de Word no sé qué.
¿Veis aquí en components?
¿Veis que tengo el Word Map?
Es un SVG que ya he robado.
Ya le he pegado el hachazo.
Entonces, vamos a utilizarlo también, el Word Map, para que podamos estilar esa parte.
Vamos a estilar Word Map.
Word Map.
Word Map.
Y esto que íbamos a robar por aquí.
Word Map.
¿Vale?
Y vamos a estilar el span también.
Vamos a ponerlo por aquí.
Una cosa muy interesante que seguramente hay gente que se está escandalizando y es, oye, que estás estilando directamente las etiquetas HTML.
Que se te ha ido de la cabeza.
¿Pero qué estás haciendo?
A ver, una cosa muy interesante que tiene Astro es que los estilos que tú pones aquí dentro de un componente tienen un scope.
O sea, el ámbito es local de este componente.
Por lo tanto, imagínate, este H1 que estamos viendo aquí, si miramos e inspeccionamos el elemento, le damos aquí a inspeccionar.
Si funciona, si no funciona.
Ah, vale, ahora sí.
Vale.
Si le damos a inspeccionar, fijaos que hace un estilo raro.
Pone este Data, Astro, Zit, Unloy.
O sea, le pone como un hash específico y utilizando eso es que lo estila.
¿Veis?
H1, Data, Astro, no sé qué.
Entonces, no hay ningún tipo de problema con las colisiones.
Que mucha gente igual se pueda asustar con esto.
Es como el estilo de que hace Svelte.
Al final la idea es evitar tener que poner un montón de clases y automáticamente Astro lo que hace es poner esto.
Que está bastante bien.
A mí me gusta mucho.
También lo habréis visto en Angular.
Angular también lo hace.
Si no me equivoco, Vue también lo puede hacer, creo, con los SFC.
Yo creo que lo hace.
Pero bueno, que esa es un poco la idea.
La idea de no tener que preocuparte tanto de las clases.
Que no sé por qué es una cosa que la gente se cabrea con estas cosas.
No sé, no sé.
O sea, hay como gente que es muy, muy, muy, muy purista del CSS que se cabrea porque dice,
pero si es lo mejor, lo mejor es poner clases.
Yo las, sinceramente, a mí no me parece que sea lo mejor lo de poner las clases.
Y sí que creo que puede dar problemas.
Es cierto que con una muy buena arquitectura CSS, que tengas unas buenas reglas de CSS y cosas así, pues te puede quedar bien.
Pero también es verdad que a la mínima se te puede ir de madre las clases.
Se te puede ir de madre.
Entonces, yo creo que es normal que al final, pues, intentemos mejorar la mantenibilidad.
Y si esto te lo hace automáticamente, pues, ¿para qué te vas a preocupar?
Vale.
Me parece a mí que nos faltaría en algún sitio un gap, ¿no?
Porque, a ver, esto hemos puesto este info, pero no lo hemos estilado todavía, ¿verdad?
Vale, pues, vamos a estilarlo.
Vamos a poner que esto es Display Flex porque están como muy juntas las cositas y vamos a hacer que tengan un poquito más de separación, ¿vale?
5 rem y le ponemos, no sé si va a necesitar esto un poco de padding.
Vale, ahora sí que, y ahora estilamos esto, ¿eh?
Vale, y a ver, vale, yo creo que le voy a poner un pelín de padding a esta parte, más que nada para que se separe de esto y ya no tenga, ¿vale?
Luego nos pelearíamos y nos preocuparemos del responsive.
Pero por ahora, como lo que queremos es imprimirlo, o sea, lo que vamos a querer es hacer así, con Control-P, si funciona, que no sé por qué no funciona, ahora.
Y poder imprimirlo súper bien, ¿vale?
Entonces, venga, sigamos.
Vamos con los iconitos, que los iconitos que os estaba poniendo nervioso con los iconos, que es que se ven de un color.
¿No le puedes arreglar el color?
Claro que sí, que se le puede arreglar el color.
Vamos a ponerlos, los hemos puesto en el footer y vamos a hacer que tengan flex para que podamos utilizar el gap y dejar una separación entre los iconos, ¿vale?
Y vamos a hacer que estén un poquito más separados de la parte de arriba.
Luego, de cada uno de los footers vamos a arreglarle el color, que tanto os estaba molestando.
Eso es porque tiene el color por defecto y por defecto el color indica si has visitado ese link, si no lo has visitado y todo esto.
Entonces, vale, vamos a centrar esto, lo centramos todo totalmente.
No hace falta el font size ni nada porque dentro tenemos iconitos, pero sí que vamos a ponerle un pequeño borde, ¿vale?
Y ahora le pondremos un padding para que tenga un poquito de separación.
Así que le ponemos un padding, vamos a poner que sea cuadrado esto y también vamos a ponerle el borde radius, que no se lo he puesto, borde radius de 6 píxeles.
Le vamos a poner una transición, le voy a poner que sea todo la transición, que no es lo ideal, pero bueno, al menos.
Y aquí el borde le cambiamos un pelín el color.
Bueno, vamos a cambiarle mejor el fondo solo para que sea un poquito más...
Vale, vamos a ver cómo queda esto, ¿vale?
Pero bueno, ya está, ya está.
Es bastante parecido al que tiene él, no sé, es el mismo.
O sea, es el mismo, es el mismo, o sea, es igual, es igual, la verdad.
O sea, es el mismo.
Si os gusta, si lo queréis cambiar, lo podéis cambiar y tal, pero bueno, yo creo que este se ve bastante bien.
No sé si a lo mejor se podría...
En este caso está con el mismo borde y creo que aquí el borde se mantiene.
Se podría hacer un pelín más oscuro el borde, ¿sabes?
Se podría hacer un pelín más oscuro el borde cuando se pone aquí y entonces tendría el mismo efecto.
Bueno, esto son tonterías, ¿eh?
Son tonterías, pero bueno, son detallitos, son detallitos.
Pues yo creo que aquí tendríamos ya la parte de arriba, ¿no?
Bueno, tendríamos un poquito la parte de arriba, igual se podría ajustar un poco alguna cosita.
Yo le voy a dejar este título, subtítulo, yo lo voy a dejar con esta fuente.
Él le ha puesto esta, yo lo voy a dejar con esta.
Me gusta, ¿eh?
Y bueno, el about es el más fácil de todos porque el about es que lo vamos a hacer en un momento.
Y fijaos que ahora es cuando ya, cuando empieza a pillar su cosita, ya empezamos a ver las cosas interesantes.
Porque podemos ir viendo cómo estamos pillando la información todo el rato del JSON.
Creo que se pillaba del summary.
Ahora lo veremos.
Y esto es muy fácil.
Dentro del section vamos a renderizar básicamente un párrafo con nuestro summary.
¡Hala! ¡Pum!
Ya tenemos el about.
No sé si se ve demasiado clarito.
Yo creo que se ve demasiado clarito.
Ya os he dicho antes que a lo mejor íbamos a tener que cambiar alguna cosa aquí.
Pero bueno, al menos vamos a ponerlo un poquito más oscuro, ¿vale?
No sé si...
Hostia, es que si pongo 666...
Me gusta el 666, pero es que a lo mejor la gente se pone un poco nerviosa con el 666.
Y no sé si aumentarle un pelín, un pelín más.
Algo así.
Yo creo que sí, ¿eh?
Sí, algo así.
Vale, pues ya tendríamos el about, ¿vale?
Bueno, ahora vamos con la experiencia.
La experiencia no es difícil, ¿vale?
Vamos ahí cerrando cositas.
De hecho, los que son más interesantes...
Bueno, la experiencia tiene alguna cosita.
Es el de proyectos.
Fijaos el de proyectos.
Y este.
Que este yo creo que es el mejor que vamos a hacer.
Que es el de tener como moverte con el teclado.
Esto lo vamos a hacer en un momentito.
Vale, vamos con el work experience.
El work experience...
Vamos a mirar el currículum.
Y vamos a buscar experience...
¿No?
¿Dónde está?
Projects.
A ver, basics.
Work.
Vale, está en work.
Pues nada, nos traemos el work del currículum, ¿vale?
Y aquí esto lo vamos a tener que iterar, básicamente, y mostrar la información.
Section.
¿Cómo lo hacemos?
Pues nada, vamos a poner la lista desordenada.
Vale.
No está bien.
Lo que nos ha puesto no está bien.
Pero bueno, ya me sirve para al menos tener algo.
Aquí vamos a sacar el name, el start date, el end date, el position, el summary, el url.
Bueno, es opcional, pero yo creo que no hace falta.
Y el highlights.
¿Qué he puesto en highlights?
Ah, el highlights.
Ah, bueno, yo este no lo he utilizado.
El highlights no lo he utilizado, pero podría ser interesante y se podría añadir.
Igual más adelante lo ponemos.
Vamos a poner este, vamos a cambiar esto, esto lo vamos a hacer con un return, porque
tenemos que sacar cierta información, ¿vale?
Vamos a poner que esto es name, position, summary.
Esto obviamente está mal.
Ahora lo arreglamos, pero al menos para que aparezca algo, ¿vale?
Para que aparezca algo, ¿vale?
Bueno, no está mal, ¿eh?
O sea, ya está apareciendo ahí cierta información.
Dentro de lo que cabe no está mal del todo.
O sea, ha quedado más o menos.
Vale.
Nos falta alguna cosita.
Ahora lo estiramos bien.
Lo primero es que necesitamos sacar, fijaos, que tenemos aquí start date y el end date,
que además puede ser null.
Claro, porque a lo mejor no ha terminado todavía y todavía estás ahí.
Por lo tanto, tenemos que sacar del start date o el start year.
Entonces, vamos a crear una nueva fecha utilizando start date y recuperamos el año.
Y con el end year serías parecido siempre que sea diferente a null, ¿vale?
Si es diferente a null, entonces hacemos lo mismo.
Y si no...
No sé.
O sea, lo podemos dejar null porque esto de present actual...
Bueno, podemos poner o actual o podemos dejar null y que no aparezca.
No sé lo que queráis.
Y estos serían los años, ¿no?
Para que teníamos que mostrar.
Inicio, final.
Bueno, ¿qué os parece?
Ponemos actual.
¿Cómo lo veis?
O ya estaría la próxima sección.
Sí, casi, ¿no?
No sé si poner actual, el mes y el año.
Bueno, no creo que sea interesante.
Es que él ha puesto el año y la verdad es que creo que queda bien solo el año, ¿eh?
O sea que actual.
Actualidad queda raro, ¿no?
Actualidad.
Yo pondría actual y ya está.
Vale.
Entonces, ya tendríamos el years.
¿Qué es lo que podemos hacer ahora?
A ver, lo primero...
Vamos a hacer semánticamente un poquito más interesante esto.
Vamos a poner que cada uno es un article.
Porque es información que podría ser independiente, ¿vale?
Dentro del article vamos a tener por un lado el header, por otro lado el footer.
Porque en el footer es donde vamos a tener el summary y en el header es donde vamos a tener esto, ¿vale?
Esto nos va a ayudar además también para el CSS, que es bastante interesante.
Y luego, para poder hacer que tengamos esto así, necesitamos tener en un lado una cosa y otra.
Por lo tanto, aquí necesitamos un div para poner otro div aquí.
O bueno, no hace falta un div.
Podemos poner aquí el time.
Time.
Y aquí poner directamente el...
TTT years.
¿Vale?
Y ya tendríamos...
Ya tendríamos la semántica más o menos, ¿vale?
Vale.
Ahora nos faltan los estilos.
Que bueno, no debería ser muy complicado porque ya tenemos los peores estilos.
Ya los hemos hecho antes.
Mira, el article, vamos a poner el display flex y así vamos a tener la posibilidad de ponerle...
Bueno, no sé si es necesario.
Yo creo que no es necesario el display flex aquí, ¿no?
No es necesario.
O sea, el article lo podemos dejar con un margin bottom.
De hecho, de hecho, a lo mejor es interesante ponérselo en el lead, ¿no?
Display flex con el gap de 32 píxeles.
Ah, el ul, perdón.
Y el flex direction lo podríamos dejar así.
Y entonces lo dejamos como gap en lugar de margin.
Siempre que podáis...
Esto parece una tontería.
Pero siempre que podáis es interesante estilar el contenedor y no el contenido.
¿Por qué?
Esto sé que a veces puede ser un poco raro.
Pero cuando tú haces un article, ¿por qué puede ser interesante que el article no tenga un margin?
Como el article es un contenido que es independiente, que podrías utilizar en cualquier sitio,
en realidad no deberíamos tener la información de cómo se debe ver el contenido independiente.
Porque justamente queremos que aquí se vea así.
Pero como este article puede ser independiente y se podría utilizar en un sitio de forma totalmente autónoma,
a lo mejor no queremos que allí tenga margin, ¿no?
Por eso he hecho esto, ¿no?
Porque igual alguien se pregunta, oye, ¿pero por qué no haces esto directamente?
Pues lo hago justamente por eso.
Porque estoy intentando estilar el contenedor y no el contenido.
Siempre que pueda voy a intentar hacer esto.
Esto tiene mucho sentido.
Por ejemplo, imaginad un botón también, ¿no?
A ver, no hace falta que os volváis locos con esto, pero sobre todo cuando creamos componentes,
imagínate un botón.
¿Tendría sentido que un botón tuviese sus márgenes cuando no sabe ni siquiera dónde se va a utilizar?
Pues no tendría sentido.
Pues esta es un poco la idea.
Es un poco la idea, ¿vale?
Por lo que he hecho esto.
Por si alguien se pregunta, ¿pero por qué haces estas cosas?
Pues lo hago por esto.
Muy bien, ahora el article H3, vamos a darle un poquito menos de oscuridad, ¿vale?
Que está como demasiado oscuro.
Y el H4, que es justo el de debajo, no sé si ponerlo un poquito menos.
Y menos, menos, porque es que está todo en negrita y queda un poco raro, ¿vale?
Vale, vamos a ver ahora.
Vale, ahora lo que nos faltaría es también el tema de lo que hemos hecho.
El header justamente lo hemos hecho para poder separar uno al lado del otro.
Así que le ponemos aquí, que tenga el space between.
A ver, ¿qué más me dice esto?
Vale, esto sí, que tiene sentido.
Bueno, no tiene sentido.
Joder, es que no te puedes fiar, ¿eh?
A ver, no está mal, pero creo que esto en realidad debería ser así, ¿no?
Claro, esto en realidad, ¿veis?
Esto tiene que quedar alineado con lo de arriba, no centrado.
No centrado.
No te puedes fiar, ¿eh?
Siempre de header.
A ver, de header, de copilot.
No pasa nada, ¿eh?
Si lo ponéis center, pues aparecerá ahí.
Pero yo creo que es mejor, yo creo que es mejor hacerlo que quede arriba.
Suele ser, suele ser como más visualmente más placentero.
Vale, el time, vamos a ponerle un font size un poquito más pequeñito.
A ver si este es un poquito más pequeñito.
¿Vale?
Y yo creo que también un color un poquito menos, más o así.
A lo mejor no tanto.
Vale, la marca de la bestia.
Bueno, pues un poquito menos.
Vale, yo creo que algo así.
Y yo creo que nos falta.
Yo creo que ya está, ¿no?
O sea, no nos falta nada más.
No nos falta nada más.
O sea, ya está destilado esto, ¿no?
Bueno, ¿qué os parece?
Bueno, ya tenemos la experience.
A ver, es minimalista, pero bueno, fijaos que lo imprimís.
Y es que os queda esto.
O sea, impreso, creo que hay demasiada separación.
Vamos a arreglar un momento esto.
¿Dónde hemos hecho esto?
En el section.
Yo creo que el section tiene como demasiada separación.
A lo mejor un poquito menos.
¿Un poquito menos?
Sí, yo creo que sí, ¿eh?
Yo creo que sí.
Bueno, pues fijaos, ¿no?
En un momento queda bastante fino, la verdad, ¿eh?
¿Por qué los SVG llevan extensión astro?
¿No acepta SVG?
Sí que acepta SVG, pero lo interesante de utilizar los componentes, así como astro,
es que además los puedes estilar, o sea, por ejemplo, aquí yo podría pasarle,
y de hecho, normalmente, lo que pasa es que en este caso no lo estoy haciendo porque
es muy minimalista ese que no lo haría, podríamos pasarle, por ejemplo, el width, el g, y esto
utilizarlo así, ¿vale?
Y aquí pasarle esto.
Y entonces, pues ya tiene sentido, ya es un componente y está súper genial.
En este caso lo hago por si el día de mañana lo cambio y ya está.
Pero podrías poner esto como un SVG, una de dos, o puedes crear un SVG directamente, o lo que sea.
Pero lo hago más que nada por eso, ya pensando un poco en el futuro,
si le quiero cambiar algún atributo y tal, y normalmente alguna cosita hacemos.
Venga, tenemos la educación.
A ver, la educación es exactamente lo mismo.
No lo voy a hacer, no lo voy a hacer, pero porque es exactamente lo mismo que la experiencia.
Entonces, por ahora lo voy a comentar, pero lo haremos más adelante.
Voy a hacer los skills primero, que es un momento y que me parece que a vosotros os encanta el tema de los skills.
A mí es una cosa que no me suele triunfar mucho.
Pero bueno, como aquí aparecen, lo vamos a hacer.
Vale, aquí los skills básicamente es un array donde cada objeto tiene el nombre, el nivel y palabras clave.
Lo de palabras clave, esto es porque he intentado seguir el esquema del currículum.
Pero yo no voy a utilizar nada de esto, ¿vale?
Esto yo lo he puesto, de hecho le he dicho a ChatGPT que me los genere todos.
Entonces los niveles que veáis de avanzado, máster y tal, se los ha inventado.
O sea, yo no le he dicho absolutamente, pon aquí máster.
No, no sé por qué ha puesto máster.
Le he dicho a ChatGPT, utiliza esta plantilla y añade todo lo que sea en desarrollo web.
Y me ha hecho esto.
Entonces, vamos a añadirlos aquí en un momentito.
Importamos los skills del currículum.
Del currículum, ¿vale?
Y nada, otra listita.
Esta listita, nada, es un momentito.
Una lista desordenada para cada skill.
Vale, no necesitamos nada de esto.
Solo vamos a poner del skill el nombre.
Esto es lo único que necesitamos.
Esto es todo lo que tenemos que mostrar.
Lo que sí que necesitamos es estilar un poquito.
Y lo que vamos a estilar aquí, vamos a poner que tenga un display inline flex.
Inline flex, ¿vale?
Para que quede todo en línea, pero que podamos tener una separación.
Y además...
Ah, mira, interesante lo de flex grab.
Ahora lo veré porque seguramente tenemos que hacer flex grab.
Si no, va a quedar un poco raro, ¿vale?
Borde radius, 6 píxels.
Vamos a poner que tenga un background así clarito.
Creo que él tenía un background bastante oscurito.
No está mal.
Bueno, y mira, aquí como que los junta algunos y tal.
Yo voy a intentar hacerlo más clarito.
No sé, es que creo que rompe un poco el tema minimalista.
Cuando metes ahí algo tan oscuro, ¿no?
De golpe.
Y para que quede como una...
Esto es muy típico.
Tanto en botones como en etiquetas, lo que intentamos es poner arriba y abajo menos padding que lo que ponemos a los lados, ¿vale?
Y con esto, pues ya deberíamos tener algo así.
No es perfecto.
Y yo creo que...
¿Ves que aquí está saliendo...
No sé si está saliendo.
Vale.
¿Ves este error?
Esto es porque necesitamos ponerle un flex grab.
Entonces vamos a poner aquí el flex grab, grab, ¿vale?
Y ya, vale.
Y ya lo tendríamos.
Así que ya tenemos los skills.
Perfecto.
Ya tenemos uno más.
Muy bien.
Vamos a mover los skills.
Vamos con los proyectos.
Que este sí que está interesante y este es bastante trabajo.
A ver, no tiene trabajo en el sentido de que todos tienen su cosa.
Vamos aquí.
Projects.
Vale.
Aquí tenemos los proyectos, ¿vale?
Yo he puesto Mars Codes.
Ya sabéis que la semana que viene...
Bueno, no sé si lo sabéis porque no hago publicidad.
Pero la semana que viene, la semana que viene, dentro de siete días, si soy capaz, si soy capaz y me da la vida, vamos a hacer una nueva mecánica, un juego que estoy preparando.
Que es un juego que va a ser interactivo, ¿vale?
Básicamente es una aventura de estas de Elige tu propia aventura.
Y cada...
Mi idea es al menos una vez a la semana vais a tener un capítulo donde vais a estar explicando la historia y tendréis un reto de programación.
Y cuando cumpláis el reto de programación vais a tener que decidir algo.
Vais a tener que votar entre una cosa u otra.
Vais a vosotros a decidir cuál es el siguiente paso del protagonista, ¿vale?
Y vosotros vais a decidir qué es lo que pasa con el buen protagonista, nuestro amigo Alex Rivera.
Se llama Alex Rivera.
Ya no se imaginaremos de dónde es.
El tema es que ya podéis iniciar sesión, si queréis podéis iniciar sesión.
Y entonces tendréis musiquita como esta.
Ya tenéis el primer capítulo un poco para saber lo que va pasando.
Pero bueno, que ya veréis más adelante cómo va a ser un poco la mecánica.
Necesitaréis estar iniciada la sesión para poder participar porque tenéis que votar.
Y veréis cómo se muestran los votos para todo.
Son retos que podréis hacer con cualquier cosa.
Son retos de código que la idea es que la podáis hacer con el lenguaje de programación que queráis.
Serán bastante más parecido, por ejemplo, a lo que hicimos con Codenberg.
Que Codenberg al final lo podéis hacer con lo que queráis.
Pues esa es un poco la idea.
Que la podáis hacer con Codenberg.
Como Codenberg.
Lo podéis hacer con COBOL, con RAST, con Python, con JavaScript, con TypeScript, con lo que queráis.
Y está hecho con Astro.
Todo lo que veis está hecho con Astro también.
Y de hecho, para la autentificación, estoy utilizando Lucía.
Que justo ha salido de la versión 3.0.
Y estoy utilizando Lucía.
Así que nada, así me va bien para aprender.
Porque nunca había utilizado Lucía.
Y ya tengo que hacer bastantes cambios.
Pero bueno, bastante bien.
¿Retos nivel Dios?
No, nivel Dios tampoco.
Tampoco nos pasemos.
Pero bueno, es una iniciativa diferente que espero que os guste.
Porque vais a ver que yo al menos nunca he visto una cosa así.
Así que espero que os guste.
Dentro de seis días, estad pendientes aquí al Twitch que lo comentaremos.
¿Vale?
Venga, vamos con los proyectos.
Si miramos el JSON, tenemos projects.
Y dentro pues tenemos nombre, si está activo.
Esto lo he añadido yo.
Esto lo he añadido yo.
¿Vale?
Esto no es parte del esquema.
Pero lo he añadido para poder poner si está activo o no.
Si no, pues lo podríamos ignorar.
Pero bueno, yo lo he decidido poner porque me parecía interesante.
La descripción, URL y los highlights.
Que bueno, los highlights es porque es lo que se me ha ocurrido.
Lo que vamos a hacer, pues nada.
Otra vez lo mismo, ¿no?
Importamos projects from el curriculum.
¿Vale?
El curriculum de nuestro JSON maravilloso.
Y aquí dentro, pues ya directamente vamos a poner otra vez un UL.
Y aquí projects.map.
Y para cada proyecto vamos a devolver un lead.
Y aquí un article.
Bastante parecido al otro.
Fijaos que es bastante minimalista.
En el sentido de que son etiquetas muy sencillas.
No tiene cosas muy complicadas.
¿Vale?
Vamos a poner aquí el anchor.
Porque cada proyecto tiene la URL.
Vamos a ir sacando aquí cosas.
Por ejemplo, del proyecto se puede sacar la URL.
La descripción.
Los highlights.
El nombre.
El GitHub.
Esto no lo utilizo todavía.
Así que por ahora vamos a quitar.
¿Vale?
Y pensad que la idea es que se imprima el curriculum.
Y por lo tanto no vamos a querer tener muchos iconos.
Luego veremos que los iconos que hemos puesto los vamos a cambiar en la media query.
Luego lo veremos.
Vale.
Entonces, aquí tendríamos la URL.
El title sería ver el proyecto.
Name.
¿Vale?
Y esto así.
Esto por acá.
¡Hostia, que me ha puesto ahí!
Vale.
Esto aquí.
Esto acá.
¿Vale?
Y aquí ya ponemos el nombre.
Que no sé si poner un H3.
Vale.
Vamos a poner un H3.
¿Vale?
Vale.
Aquí tendríamos el proyecto.
El tal.
Si el proyecto...
Si está activo el proyecto...
Bueno.
Esto lo hago después.
Porque es una tontería y tampoco es tan importante.
¿Vale?
Por ahora lo dejamos así.
Y ya está.
Lo importante es que aquí vamos a poner la description.
Esto va a estar en el header.
Y también vamos a tener un footer.
Y sí, amigos.
Si te lo estás preguntando.
El footer y el header también se pueden poner en un article.
¿Vale?
No necesitas que haya uno solo en la página web.
De hecho, tiene bastante sentido en un article poner lo que es el header.
Que es donde estaría el título, el contenido principal y tal.
Y lo que sea el footer donde a lo mejor hay acciones o los comentarios y cosas así.
¿Vale?
Lo digo más que nada porque hay gente que muchas veces le vuela la cabeza con estas cosas.
Vamos a poner aquí highlights.map y para cada highlight que al final es un string, pues lo mostramos aquí y ya estaría.
Bueno, con esto ya tendríamos mostrando la información que queremos.
Vamos a ver por aquí.
No se está mostrando muy bonito, pero eso lo arreglamos ahora en un momentito.
Así que nos vamos aquí con el estilo.
Vamos a utilizar...
Mira, vamos a utilizar el grid, que está muy chulo.
Está muy chulo.
Claro, claro.
Es que tiene sentido que sea un grid esto.
Si utilizamos el display grid, lo que vamos a poder hacer es utilizar la magia esta del template columns que le puedes decir.
Vale, template columns.
Quiero que te repitas.
¿Vale?
Vale, es que ya me lo hace hasta aquí, jacopile.
Vale, os lo explico.
Que está bastante chulo esto.
Vale.
Podríamos hacer un fr, un fr y tal.
Y con media queries...
Bueno, ahora porque se ve regular.
Pero, mira, voy a poner el gap al menos para que haya una separación entre las cositas.
Y vamos a...
Por ahora voy a poner...
Voy a hacer un hidden de esto.
Un momento.
¿Vale?
Para que se vea más o menos bien.
¿Vale?
Fijaos.
Claro.
Una cosa que podéis hacer con display grid es decir, bueno, cuando está así, pues son tres columnas.
Y cuando baja, pues son dos columnas.
Entonces quitaríamos una y con las media queries y tal, haces dos columnas.
Y cuando es móvil, pues haces una sola columna.
Pero es que hay un trucazo que es que me parece lo más increíble que lo que decía ayer de que hay unas líneas de CSS que te salvan la vida.
Esta es una.
Esta es una de esas líneas que te salvan la vida para todo.
Y es el hecho de utilizar el repeat y dentro lo que dices, ¿vale?
Quiero que utilices...
Puedes utilizar el autofit o el autofill, ¿vale?
Vamos a utilizar en este caso el autofit.
La diferencia de autofit y autofill es cuando solo rellena la primera...
O sea, cuando no rellenas más de una línea.
Y entonces es como utiliza el espacio.
En este caso vamos a utilizar autofit.
Es indiferente.
Y vamos a utilizar min max.
Esto es tremendo.
¿Qué es lo que significa esto?
Esto es lo que significa es que queremos que cada columna, como mínimo, ocupe 200 píxeles.
Si no va a ocupar 200 píxeles, entonces pasamos a tener una columna más.
¿Qué es lo que hace esto?
Pues esto lo que hace es que te hace un responsive maravilloso.
Así.
¿Veis?
¿Qué es lo que está haciendo?
Dice, vale, cuando por fin puedo tener...
Si puedo tener tres columnas que como mínimo cada columna tenga 200 píxeles, hago una columna.
Si por lo que sea voy haciéndome pequeño y resulta que voy a ser menos de 200 píxeles, si va a haber una columna de menos de 200 píxeles, entonces quito la columna y reparto el espacio.
Y esto es lo que hace esta maravilla.
Y así te queda este responsive maravilloso en un momentito.
¿Vale?
Justamente con esto.
Así que esto es una de esas líneas de CSS que es espectacular el cómo te cambia la vida para muchas de las cositas.
Es un responsive sin media queries que hace que quede genial.
Vale, pues este es el UL, ¿vale?
Vamos a hacer...
Vamos a estirar el article para que quede bastante bonito.
Porque ahora con...
Estirando el article es cuando vamos a ver que queda bien.
Vamos a poner...
No sé cuánto he puesto por ahí.
6 o 8.
Ya no me acuerdo.
Si no, luego lo cambio, ¿vale?
F2, F2, F2.
¿Vale?
Le dejamos un poquito de separación.
Esto es dentro del article.
O sea, que hacemos un display flex.
Flex direction column.
¿Vale?
Vamos a ver cómo va quedando esto.
¿Vale?
Nos falta el padding también.
Le ponemos 16 de padding.
Y que ocupe todo el espacio.
Esto básicamente es...
Por si hay alguna...
Vale.
Vale.
Perfecto.
Entonces, al menos ya tenemos esto.
Vamos a...
También vamos a hacer que ocupe el header...
No sé.
Esto, el flex 1.
Ahora lo miro esto.
Voy a quitar el hidden que había puesto por aquí.
Porque esto necesitamos que aparezca.
¿Vale?
Y vamos a hacer que el footer sea más pequeño.
Porque ya veo que queda muy grande.
Footer, display flex, flex direction.
No, flex direction.
Flex grab.
Hay que hacer algo parecido a lo que hemos hecho antes.
¿No?
Que es el hecho de...
Como etiquetas.
Pues es que es exactamente lo mismo que hemos hecho antes.
Lo podríamos sacar a un componente.
Pero bueno, me parece lo suficientemente sencillo como para no...
Es exactamente lo mismo.
Es lo que hemos hecho en el skills.
Que hemos hecho el inline flex.
No sé qué.
Flex grab.
Pues esto, básicamente, sería lo mismo que aquí.
Podemos hacerlo que se diferencie un poco.
Lo podemos hacer un poco más pequeño.
No sé.
Lo podemos hacer un poco diferente.
Pero tampoco es necesario.
Básicamente sería algo así.
Ah, espérate.
Footer.
Ah, es que le hemos puesto footer.
A ver.
Yo aquí le voy a quitar el ul.
Porque no creo que tenga mucho sentido.
Y vamos a poner aquí un span.
Que tampoco le pasa nada de que no sea una lista desordenada.
Y así lo tendríamos así.
¿Vale?
Y el...
Ah, me falta aquí el ul este.
Vale.
Ul, ul.
Vale.
Y también otra cosa.
Podríamos hacer esto...
Que esto sea inline flex.
Porque...
O inline flex lo tendríamos que poner en este.
Display inline flex.
Coño.
Es que no está...
Ajá.
También es que queda como muy grande.
No sé si hacerlo todavía más pequeño.
Es que tampoco es muy importante la información esta.
O sea, que lo podemos poner algo así.
¿Vale?
Vale.
Entonces, ahora el tema es que veis que aquí...
Esto...
Esto es un tema que veo muchas veces en vuestros porfolios.
Que a ver, no pasa nada.
Pero veis que...
Se queda aquí este espacio aquí abajo.
Aquí lo que podemos hacer es decirle...
Que el header se ocupe todo el espacio que pueda y que le deje el resto a los demás.
¿Vale?
Entonces, le pones un flex 1 y haces que el header empuje el contenido.
Y entonces ya te queda todo esto, te queda abajo.
Y así, pues tienes una separación y como que siempre está abajo las pastillas.
No pasa nada, pero hay veces que visualmente puede quedar un poco raro si no lo haces.
Porque, claro, dices, ostras, en unos están más arriba, en otros están más abajo y tal.
Y así siempre van a estar organizados, alineados abajo.
¿Vale?
Lo que podemos hacer también, que todavía falta alguna cosita, pues un poquito de margin-bottom.
¿Vale?
Ahora arreglamos también el anchor con un color del 1.
Y podemos ponerle que cuando hagamos hover, le ponemos el text decoration, underline y ya tendríamos algo así.
¿Vale?
También podemos hacer un poco más pequeño esto, ¿no?
Que me parece un poquito grande.
El span este, no sé cómo lo hemos puesto.
Un párrafo.
Vale, pues el párrafo este lo vamos a hacer un poquito más pequeño.
Vamos a poner font size.
Vamos a ver lo que nos dice esto.
Vamos a ver lo que nos dice esto.
A ver qué tal.
Vale.
Bueno, un poquito más pequeño, ¿no?
Yo creo que un poquito más pequeño.
Bueno, tampoco nos pasamos.
Y tampoco...
Hay que ir ajustando.
Hay que ir ajustando.
Vale, pues esta sería un poco la idea.
¿Vale?
A ver, también para que siempre tengan la misma separación.
Porque si no, pues un poco...
No, igual es demasiado.
¿Vale?
Poquito.
¿Vale?
Pues algo así.
¿Vale?
Ya tendríamos un poquito esto.
Ya tendríamos los proyectos también.
Bueno, le he puesto projects, pero debería ser en español.
Que he puesto projects, pero esto debería ser proyectos.
Esto debería ser el experience.
Todo lo he puesto en inglés.
Porque experiencia laboral.
El about también.
Lo vamos a poner sobre mí.
Que si queréis lo podríamos hacer también multi idioma.
Pero bueno, al menos con esto ya hemos hecho en un momento el tema este.
A ver, esto está alineado.
Vale.
Ya tendríamos esto.
Podríais hacerlo de lease active.
Eso es un momento.
Podríamos indicar al lado de cada uno si está activo con un detallito.
Él lo hace.
O sea, esta idea es porque veis que aquí hay un puntito.
Bueno, está bastante chulo.
O sea, no me parece mal.
Así que lo podemos hacer.
El is active este en un momento.
Podríamos...
A ver.
El is active lo podemos poner en la línea esta.
Justo al lado del...
Justo al lado...
A ver.
Es que esto es la experience.
Claro.
Es en projects.
¿Vale?
En projects.
Aquí.
Vale, vale.
Es que digo, hostia.
Vale.
Pero estoy pensando que entonces...
Claro, pero esto me va a complicar alguna cosa.
Es que deberíamos hacerlo al revés.
Porque aquí es donde tendríamos que mirar.
Si es active, entonces vamos a poner un spam con el símbolo bull.
Me encanta este símbolo.
Me encanta el símbolo bull.
Este símbolo bull es una redondita, pero es una redondita que es más gorda que las demás.
Es una redondita...
¿Ves?
Parece una redonda normal y corriente.
Es una redonda normal y corriente.
A tus ojos parece una redonda normal y corriente.
Pero no lo es.
Este bullet tiene algo que ha escondido.
Y es que no es exactamente el bullet que todos conocemos.
Fijaos.
Fijaos.
¿Vale?
Fijaos la diferencia.
El primero es el que estoy poniendo.
Y el segundo sería el típico símbolo que haces con el teclado.
¿Veis la diferencia?
Es gordito.
Es fuerte.
Está papillado.
¿Vale?
Entonces lo estoy poniendo así.
A ver, que se puede poner así directamente también.
Pero solo para que lo sepáis.
Y solo que me sé siempre de memoria, me sé el símbolo ese.
Está más grueso.
Está fuerte.
Está fuerte.
Bueno.
Header.
H3.
Vale.
Pues el H3 span.
Entonces el article H3 span.
Color.
Otro.
Mira.
Trucazo.
Trucazo.
¿Sabías?
¿Sabías este truco?
¿Sabías que puedes abrir en Visual Studio Code en cualquier momento, en cualquier lugar,
el color picker?
¿En cualquier sitio que tú quieras?
Pues mira, aquí lo tienes.
A ver, en este caso no era necesario porque podía haber puesto un color y ya me sale el
color picker.
Pero puedes abrir el color picker de Visual Studio Code desde cualquier lugar.
Buscas color picker en la paleta de comandos y tienes lector de colores independientes y
te aparece de una.
Y ya puedes ponerlo y ya está.
Súper fácil, súper rápido.
Pim, pam, pim, pam.
Vale.
Entonces lo insertas y ya tenías ahí el color en un momentito.
Y con esto, ah, tendríamos que ponerlo aquí, no sé si 16, 16, borde.
Ah, no, claro, no hace falta.
No hace falta porque es que estaba pensando en otra cosa.
Vale.
Ojo, tía, me ha quedado demasiado, demasiado clarito.
Vale.
Ya está.
Vale.
Pues ahí tendríamos como los proyectos que son activos, ¿sabes?
Vamos a arreglar cositas.
Vamos a arreglar cositas porque tiene buena pinta.
De hecho, o sea, es que tenemos ya el proyectito, lo tenemos buenísimo.
Pero si yo imprimo, fijaos que tenemos dos problemas.
Uno, que aparece esto.
Esto se arregla fácil, pero esto no es problema nuestro, la verdad.
Es un poco, creo que se puede quitar, de hecho.
¿Cómo se puede?
Ah, esto.
Astro preferences in your terminal to disable.
O sea que esto no tiene sentido, pero esto sí.
Esto sí.
Vale.
Ya está.
Ala, desactivada.
Ya hemos quitado la barra.
Una cosita menos que preocuparnos y mira, fíjate.
La verdad es que queda bastante fino, ¿eh?
Queda bastante bien para imprimir.
Luego, lo segundo, claro, no podemos imprimir iconos.
Iconos, ¿qué?
¿Qué le va a dar?
¿Le va a dar ahí un clic?
No tiene sentido.
¿Qué vamos a hacer?
Lo que vamos a hacer es ir al hero, hero, y lo que vamos a hacer aquí,
que aquí tendríamos toda esta parte del footer y esto.
A ver, podríamos poner aquí un div que va a ser para print, ¿vale?
Y aquí vamos a poner, pues, por ejemplo, el email directamente.
El email.
Mira, vamos a poner el bull, ya que me...
No sé si lo he copiado.
No.
Vale.
Bull.
El bull este.
Hostia, ¿no se puede poner así?
A ver, ¿dónde lo he puesto?
¿Dónde lo he utilizado?
En projects, ¿no?
Vale.
Me lo voy a copiar para separar.
Que en realidad se debería separar de otra forma, pero bueno, no pasa nada.
El teléfono, la ciudad, la ciudad no, porque la estamos poniendo arriba.
Lo que sí que podríamos enseñar aquí, en todo caso, sería el LinkedIn.
El LinkedIn.
LinkedIn.
Ah, claro, habría que buscar si tenemos LinkedIn.
Tendríamos que buscar si lo tenemos.
El email.
¿Qué creéis?
¿Busco LinkedIn?
Yo creo que sí, ¿no?
Yo creo que sí.
Yo creo que deberíamos buscar LinkedIn info.
En el profiles buscamos LinkedIn y si lo tenemos, lo buscamos y ya está.
Y entonces, aquí tendríamos const URL linkedin info punto URL.
Midu, en mi CV puse un QR para los links.
¿Está malo?
¿Debería quitarlo?
No, me parece bien.
Buena idea.
Me parece muy buena idea, la verdad.
Muy buena idea.
Sinceramente, me parece buena idea.
Vale.
Entonces, ¿qué es lo que vamos a hacer?
Que vamos a hacer una clase especial que le vamos a llamar print, que por defecto sea displayNone.
Pero vamos a poner una media query que se llama, que esto a lo mejor no lo sabíais, pero hay una media query que básicamente...
Hostia, es verdad que alguien me ha dicho que iba a salir el bool aunque no salga, aunque no tengamos LinkedIn.
Vale.
Vale, vamos a hacer algo.
Vamos a hacer algo.
Vamos a hacer print info.
Vamos a poner aquí el email font filter tal.
Ya está.
Madre mía.
Maravilloso.
¿Vale?
Esto al final lo que va a hacer es utilizar el join y solo lo va a hacer con los que lo tienen.
Y ya tenemos ahí lo que va a imprimir.
Bueno, tenemos una media query especial que lo que hace es directamente decirle, oye, cuando vayas a imprimir entonces lo muestra.
O sea, puedes aplicar estilos solo para imprimir.
Sea, por ejemplo, para quitar colores, para ocultar cosas.
Es bastante útil y muchas veces se utiliza justamente para esto.
Y aquí, vale, bueno, obviamente ahora lo que tenemos que hacer es todo lo contrario.
Tendríamos que ocultar cuando imprimimos.
O sea, por ejemplo, aquí lo podemos hacer de dos formas.
Lo podríamos hacer con una clase.
Podríamos utilizar no print.
Que el no print va a ser, por ejemplo, que cuando utilizamos media print, si hay un no print, le ponemos un display none.
¿Vale?
Algo así.
Son dos utility clases que tendríamos.
Y así las podremos utilizar, por ejemplo, el footer.
Ah, claro, es que lo he puesto en el footer.
Lo he puesto en el footer.
Y esto.
Bueno.
No print.
Es que, claro, en el footer creo que he puesto lo del display flex.
Me da mucha rabia esto porque os voy a explicar una historia muy interesante.
Ah, no.
¿Veis que no está bien?
No está bien porque el display flex ahora, como hemos hecho lo del dip, ahora no está afectando correctamente.
Y esto me da rabia porque justamente hay un tipo de display muy interesante que no podemos utilizar porque no tiene mucho uso,
pero que en este caso tiene todo el sentido del mundo, pero que en este caso tiene todo el sentido del mundo.
Y es el display contents.
Y es una pena porque sí que parece que tiene mucho soporte, pero es que funciona un poco regular.
Y os voy a explicar porque esto sí que no he visto que lo explica ni el tato.
Y está muy chulo.
El display contents lo que hace es básicamente hacer que ignora, o sea, utiliza lo que el padre le ha pasado, o sea, el display flex y se lo pasa a los hijos.
Y es súper útil justamente para este tipo de caso, porque lo que hace es ignorar la capa del display flex y se la pasa a los hijos, o el del display grid y se la pasa a los hijos.
Y está bastante chulo y con esto lo arreglaría.
Pero ¿cuál es el problema?
El problema es que no funciona bien.
No es accesible, no funciona correctamente, hay un montón de bugs.
Me imagino que algún día lo arreglarán, me imagino, pero ya veis, veis, es por soporte parcial porque hace que el contenido se renderiza y es inaccesible.
Es una pena, es una pena.
Entonces, lo que vamos a hacer en este caso, podríamos hacer dos cosas.
Una, podríamos hacer, pues nada, dos footers, o sea, podríamos tener aquí el footer normal, el que teníamos antes, footer, o sea, podríamos.
Vamos, mira, vamos a moverlo esto.
Podríamos tener dos footers, uno que se ve y otro que no se ve al imprimir.
Este, vamos a poner el class print y así, pues podríamos poner esto, esto así, esto así.
Y luego tendríamos aquí el footer normal que habíamos hecho antes.
Footer, vale, y cerramos aquí, no sé si este dip tiene sentido ahora, no sé, vamos a ver si se queja esto.
Pero...
Vale.
Y el footer...
Hostia, me ha creado aquí dos footers.
A ver, vamos a ver.
Es que esto es para cerrar, vale.
Ahora.
Y esto es el no print, no print.
Vale.
Entonces, en el layout...
Hostia, ¿por qué no me está pillando el display?
¿No?
¿Por qué me lo está mostrando?
¡Ah!
La madre que lo parió.
A ver.
No hagan esto en vuestras casas.
No hagan esto en vuestras casas.
No hagan esto en vuestras casas.
Pero ese es el problema, básicamente.
Bueno, la verdad es que tiene sentido para evitar problemillas, ¿vale?
Y aquí tendríamos justamente lo contrario.
Aquí, ta, ta, ta, importan.
Y para eso son los importans, ¿vale?
Ahora lo que vamos a arreglar es un poco los estilos, porque el footer este del print como que se ve demasiado grande, ¿vale?
Así que ahora el problema es que tenemos dos, ¿no?
Vamos a arreglar uno de los dos.
A ver.
Este es print y vamos a poner accessible info.
Le vamos a poner aquí...
Ah, bueno.
Como el footer.
Mira.
El footer que tenemos más abajo.
Antes he dicho que no necesitamos cambiar los estilos de tal, pero es que lo podemos hacer.
No hay ningún problema, ¿vale?
Lo podemos hacer más pequeñito.
75.
Vale.
65.
Vale.
Pues mira.
Ahí lo tenemos.
Le ponemos un poquito el color un poco más claro.
No nos pasemos.
5, 5, 5.
Y ahí ya lo tenemos.
Y al final lo interesante es que en la web os sale esto y aquí os sale esto.
Y ya está.
O sea, ya lo tenéis imprimible.
Súper bien y tal.
Ahora nos faltan los comandos del tecladón.
Que os pensabais que no lo íbamos a hacer.
No, no.
El primero no está alineado a la palabra.
¿A qué te refieres?
Te refieres a esto.
O sea, a esta palabra que esto no esté alineado.
A ver, se pueden hacer dos cosas.
Si os animáis, si queréis.
Podríamos hacer una cosa.
O sea, a ver.
Yo lo...
Por ejemplo, esto lo hace mucha gente.
Yo no soy muy fan, la verdad.
Pero bueno, una cosa que se puede hacer...
Hostia.
Es utilizar el margin block y utilizar el menos 16 píxeles.
Ah, y margin block no.
Margin in line.
Y básicamente lo estaríamos alineando.
Y ahora sí que lo tendríamos.
Me imagino que te refieres a esto.
Que es alinearlo con el título, ¿no?
Directamente.
Y entonces que salga la caja.
Que sobresale la caja aquí.
Bueno, puede ser.
Si no os importa, lo puedo dejar así.
Es una cosa que se hace bastante y que no me da ningún problema.
Y ya está.
Qué feo.
Bueno, hay gente que le parece feo.
Otra gente que le parece bien.
Es un poco...
¿Qué es eso del margin in line?
¿Veis?
Es que se aprende de todo.
Margin in line es la forma corta de hacer margin left y margin right.
Sería la forma corta de hacer esto.
Porque el in line significa en línea.
Y para nosotros las líneas de texto van de izquierda a derecha de forma horizontal.
Por lo tanto, in line sería horizontal.
De izquierda a derecha.
Y está bastante...
Eso es porque no vino al directo de ayer totalmente.
Vamos a tener que pasar lista.
Bueno, os lo dejo así, pero si queréis lo cambiáis.
Entonces, nos falta esto.
Esta parte de aquí.
Lo vamos a hacer.
Y lo vamos a hacer con uno que está muy chulo.
Que ahora no me acuerdo cómo se llama.
Creo que se llama Ninja Coach.
No, Ninja Keys.
Ninja Keys.
Ninja Keys.
Este, Ninja Keys.
Eso, Ninja Keys.
¿Puede ser?
Creo que sí.
Es muy antigua esta biblioteca.
Es muy antigua.
Pero funciona bien.
Que es lo importante.
Y está chula.
Entonces, vamos a utilizarla.
A ver, ¿por qué utilizo esta y no utilizo otra?
La explicación es que esta utiliza Vanilla JS.
O sea, está hecha con Vanilla.
No necesitas ninguna dependencia.
La puedes utilizar con cualquier biblioteca y tal.
¿Qué pasa?
Que hay otras.
Que de hecho, hay un sitio que se llama Awesome Command Palette.
Por si queréis otro tipo.
Que sepáis que hay un montón.
Y, por ejemplo, Feral tiene una incluso.
Y hay aquí...
No sé si es esta la de Feral.
No.
No, esta es la de Paco.
Paco.
Esta está chulísima.
Esta está muy chula.
Pero esta necesitas tener React.
Y claro, ya teníamos que instalar React.
Ya lo complicaría.
No quiero instalar React.
No quiero.
Hay diferentes alternativas.
Aquí tenéis unas cuantas.
Y la verdad es que la de Ninja Keys lo bueno es que ocupa poco.
Entonces, quiero que ocupe poco.
Y que además podamos utilizar en cualquier sitio.
Así que le vamos a...
La de Feral es la de SuperKey.
Feral tiene de todo, ¿eh?
La verdad.
La verdad es que sí.
Lo malo de la de Feral, pues lo mismo.
Que necesita React.
Y entonces, es una...
Está genial.
Pero necesita React.
Necesitas instalar Healist UI.
Entonces, quiero hacerlo minimalista.
Quiero instalar lo mínimo posible.
Vamos a utilizar esta.
Y vais a ver que se utiliza súper fácil.
Que está muy chula.
Y que vamos a hacer...
Que quede muy bien.
Que quede guapo.
Muy guapo.
Lo siento, Feral.
Pero es para no instalar React.
¿Vale?
¿Hay algo que este muchacho no haga bien?
No sé.
Feral lo hace todo bien, tío.
Es que es increíble, Feral.
Cago en la leche.
Feral.
Vale.
Hemos instalado Keyboard Manager.
Keyboard Manager aquí.
¿Vale?
Hemos hecho esto antes.
Que os he explicado y os he comentado.
Luego hacemos aquí un Keyboard Manager.
No sé qué o sea cuánto.
Vale.
¿Qué vamos a hacer en el script?
Pues como ya hemos instalado la dependencia,
lo que vamos a hacer es importar Ninja...
Ninja...
Kiss...
No sé por qué no aparece.
Ah, pero sí que lo encuentra.
Entonces, en la documentación te explica cómo utilizarlo.
Y es muy fácil.
Dice, añade este tag.
Vale, añado este tag.
Entonces añadimos en el tag.
El tag lo podemos poner aquí.
Aquí añadimos el tag.
Es como un web component.
Así que maravilloso.
Luego, para acceder a la información y pasarle toda la configuración,
de qué tienen que hacer las keys y tal,
pues hacemos el Ninja.
Y aquí, Ninja punto...
Bueno, vamos a mirar si Ninja...
Si es diferente a null, porque es que si no TypeScript se me queja.
Vamos a poner Ninja punto data.
Y esto me lo voy a copiar.
Me lo voy a copiar de ellos.
No mío.
Me lo voy a copiar de aquí.
Porque ves que aquí viene ya con todo esto.
Entonces ya nos sirve al menos uno para tener uno.
Para tener uno de ejemplo.
Y aquí nosotros pues vamos haciendo lo que sea.
¿Vale?
Entonces aquí pone ID.
ID aquí vamos a poner print título.
Por ejemplo, imprimir.
Y ahora vamos a control P.
El icono.
Yo el icono...
A tomar por saco icono.
Vamos a utilizar emojis.
Vamos a utilizar emojis porque...
A ver, impresora.
Ah, vale.
Digo, juro que había una impresora.
Vale.
La impresora.
La sección.
Acciones.
Y que cuando esto se ocurra, pues vamos a hacer...
¿Qué vamos a hacer?
Window punto print.
No sé si sabíais que podéis imprimir con window punto print.
¿Vale?
Vale.
Pues con esto ya lo tenemos.
Con esto tan fácil.
Lo que pasa es que ahora mejoraremos unas cositas.
¿Vale?
Por ejemplo, si ahora hago comando K.
¡Ojo!
Ya lo tenemos.
Y le doy aquí.
¡Ojo!
¡Ojo!
¡Ojo!
La madre que lo pare.
Bueno, eso lo arreglamos ahora.
Lo arreglamos ahora.
Vale.
Vamos a arreglar cositas.
Vamos a arreglar cositas.
Ninja action.
Ninja action.
Ninja header.
Modal visible.
Ninja keys.
Si esto lo pongo display none.
Vale, perfecto.
Vale.
Pues en el ninja keys, ya sabemos que el ninja keys layout...
Cuando vayamos aquí...
A ver, que esto lo bueno es que el estilo este lo podemos poner aquí.
¿Sabes?
Y entonces ya queda todo mejor.
Ninja keys.
Bueno, que esto debería ser...
A ver, da igual que sea global o no sea global.
Display none important.
A ver ahora.
Si, por ejemplo, hago esto y le doy...
Vale.
Ya está.
Vale, vale.
Ya mejor, ¿no?
Entonces...
¡Ay!
Que se va.
Comando K.
Y fijaos.
Ya sale esto.
Vamos a arreglar unas cositas con esto.
Porque, por ejemplo, aquí que pone ese home no tiene mucho sentido.
El playholder está en inglés.
Tampoco tiene sentido.
Entonces, aquí tiene algunas opciones.
Creo que...
Creo que...
Playholder...
Placeholder...
Vale.
Playholder.
Escribe el comando...
Escribe...
O...
Buscar comando.
Yo que sé.
Buscar comando.
Y luego hay otro.
Vale.
Disable hotkeys.
Este no.
Esto para ocultar los breakcrams.
Este sí que lo vamos a utilizar.
Aquí pone navigation.
Navigation.
Los navigation sí.
Dice...
No autoload MD icons.
MD icons.
Ah, es que carga los iconos de MD.
Hostia, hostia.
De material.
MD, ¿qué será?
A ver, icons.
A ver si...
O sea, que ya viene icons.
Dice...
Por defecto los iconos...
Por ejemplo, puedes utilizar MD icon o no sé qué.
Para añadir los iconos, claro.
Tendrías que añadir los iconos.
Pero bueno, también puedes...
Fíjate que se puede añadir un icono a mano.
Hostia, esto está chulísimo, tío.
Esto está bien chulo.
Claro, porque al final, si ponéis ahí un icono a mano...
Por ejemplo, vamos a utilizar los de Hero Icons.
Vamos a no utilizar emojis, va.
Y tenemos este print.
¿Vale?
Si aquí, por ejemplo, quitamos esto.
Y ponemos icon.
Y ponemos aquí esto.
Hostia.
Esto que es un poco así, de esa forma.
¿Vale?
Vamos a ver si esto funciona.
Vamos a verlo.
Bueno, más o menos.
¿Qué es lo que pasa?
Pues lo que pasa es que estas clases...
Tendríamos que poner aquí algo así.
Vamos a ver cómo queda esto.
A ver ahora.
¡Uy!
Bueno, no está mal.
Lo malo es que veo que no tiene margen.
O sea, no sé si lo tengo que poner yo a mano.
Sí, se lo tengo que poner yo a mano.
Pero bueno, quedar queda bien bonito.
O sea...
Vale.
Ya tendríamos al menos esto.
Y ahora lo que podríamos hacer...
Me iré escribiendo más rápido que Rust.
Gracias, hombre.
Al menos ya tendríamos esto.
Y obviamente ahora tendríamos que añadir más comandos.
Para añadir más comandos...
A ver, sé que esto no queda muy bonito aquí.
La verdad, no es lo más bonito del mundo.
Pero bueno, tampoco es muy importante.
Que no nos vamos a preocupar.
Voy a hacer una cosa aquí también.
Voy a poner información de cómo pueden abrir esto.
Hay una etiqueta muy importante en HTML que es KBD.
¿Sabéis para qué sirve la KBD?
¿KBD?
Seguro que lo sabéis.
Porque sois gente lista.
Gente con criterio.
Abrir la paleta de comandos.
Os lo podéis imaginar, al menos, ahora que lo hemos hecho.
KBD.
KBD es básicamente para...
Representa una tecla del teclado.
¿Vale?
KBD.
Es Keyboard.
KBD es la forma corta de Keyboard.
Y básicamente lo que hace es para representar una tecla del teclado.
Se puede utilizar para otras cosas.
Pero está pensada justamente para eso.
De hecho, tiene unos estilos por defecto que ya vienen.
Si nos fijamos...
Mira, ahora le voy a poner...
Voy a poner unos estilillos ahí al footer.
¿Vale?
Voy aquí a los estilos para que veamos el footer.
Footer.
Background.
FD, FD, FD.
Border.
Border top.
Un pixel.
Solid.
No sé qué ponerle de...
Algún colorcillo así que se vea un poquito.
Position.
Fix.
Bottom.
Cero.
Pixels.
¿Vale?
¿Vale?
Width.
100%.
Padding.
Text center.
¿Vale?
¿Por qué no me sale...?
¡Ay!
Text.
¡Ay!
La madre que me parió.
Text.
Align.
Sent.
He hecho una clase de Tailwind.
¡Ay!
La madre que me parió.
La madre que me parió.
Perdonadme.
Perdonadme.
Porque he pecado.
Mirad.
Aquí hay en el padding...
Mira, voy a enseñar.
Antes hemos visto el margin in line.
Aquí podemos hacer el padding block.
Para que tenga el padding por arriba y por abajo.
Que está bastante interesante.
¿Vale?
Y podemos poner un Z index.
Muy grande.
Bueno, tampoco tan grande.
¿No?
No hace falta que tenga Z index.
Bottom.
Vale.
Pues con esto ahí tendríamos la información.
Vamos a hacer esto un poquito más pequeño.
¿Vale?
Y ahí tendríamos pulsa.
Y ves que tiene un estilillo ahí un poco diferente.
Se le puede poner tu propio estilo también.
K, B, D.
Para que parezca más una letra.
Una tecla.
Background.
A ver.
Mira.
No está mal.
No está mal.
A ver.
¿Cómo le hemos puesto aquí?
Aquí hemos utilizado System.
Bueno, como ya utiliza esta.
Yo creo que la Phone Family no hace falta.
Y ya está.
¿Vale?
Para abrir la paleta de comandos.
Vamos a poner un font size un poquito más pequeñito.
¿Vale?
Vale.
Y eso ahora lo animaremos.
¿Vale?
Haremos que solo aparezca cuando hacemos scroll.
Que es interesante.
Entonces, por ahora, lo tendríamos aquí en móvil.
En mobile lo que tendríamos que hacer es poner un botón que lo abra.
¿Vale?
Es lo que tendríamos que hacer.
Pero bueno, lo que hemos hecho es poner esta cosita aquí.
Que ellos también tienen algo así similar.
Y ahora lo que vamos a hacer es mostrar más información.
Por ejemplo, pues lo de GitHub.
Todas las cositas que tenemos.
Vamos a importar otra vez.
De basics.
Del curriculum.
Del curriculum.
Pi, pi, pi.
Teníamos aquí en basics.
Profiles.
¿Vale?
Profiles.
Profiles.
De basics.
Y aquí pues tenemos que sacar la información de cada uno.
A ver.
Estoy pensando.
¿Cómo podríamos hacer esto?
Iterando.
Necesitamos los iconos de cada uno.
Social icons.
Otra vez.
Tendríamos que los iconos de cada uno.
Por ejemplo.
GitHub.
Pues GitHub tendríamos que buscar cómo está escrito.
Aquí.
Tendríamos que escribir siempre igual GitHub.
¿Vale?
Y aquí poner el icono del SVG.
Vamos a ponerlo.
A ver si aquí tiene.
No tiene.
No tienes.
¿Quién es?
Ay.
Bueno.
A ver.
Puedo utilizar el mismo.
¿No?
Que tenemos aquí.
Claro.
Puedo utilizar el mismo.
Tiene sentido.
Tiene sentido.
Vale.
Luego el de LinkedIn.
LinkedIn.
LinkedIn.
Tu, tu, tu.
Este por aquí.
Y Twitter, ¿no?
Le hemos llamado X.
Así que.
Bueno.
Porque el icono aparece X.
¿Vale?
Vale.
Vale.
Vale.
Vale.
Entonces estos serían los iconos.
Y ahora lo que podemos hacer es.
Vamos a poner.
Profiles.
Info.
Profiles.
Punto map.
Para cada profile.
Tenemos aquí.
Bueno.
A ver.
No encuentra.
Profiles.
Punto map.
Y de cada uno.
Ah, vale.
Porque esto lo he puesto mal.
Tenemos que sacar la network y el URL.
Entonces.
De social icons.
Vale.
Vamos a ponerle aquí.
Que esto es un record.
Esto es por TypeScript.
Vale.
Que se nos queja.
Y con esto lo deberíamos arreglar.
Vale.
Y con esto tendríamos.
Social network.
A ver.
No tiene mucho sentido.
Que le ponga uno por defecto.
Y tendríamos el icono.
Y aquí.
Lo que pasa.
Es que en lugar de ponerle.
Network URL y tal.
Lo que tendríamos que hacer.
Es crear.
Esta parte de aquí.
O sea.
Que todo tenga una idea.
El título.
La sección.
Vale.
O sea.
Tendríamos que crear.
Section.
Y esto sería.
Social.
Por ejemplo.
Luego.
Title.
Esta sería la network.
Esto es.
Lo que le vamos a pasar a la configuración.
Title.
El icono.
Esto sí que lo tenemos aquí.
Luego tendríamos el hotkey.
Que claro.
El hotkey.
Lo ideal sería.
Utilizar la primera letra.
Lo voy a intentar.
Vamos a intentarlo.
A ver.
First letter.
No sé cómo.
Si quedará bien y tal.
Pero podríamos recuperar la primera letra.
De la red.
Y la primera letra.
Es la que utilizaríamos.
Para hacer el shortcut.
Ya os digo.
Puede ser que no quede bien.
Porque tenemos linkedin.
Que es con la L.
Bien.
Tenemos.
Github.
Que es con G.
Bien.
Y X.
Vale.
O sea.
Que igual nos salvamos con eso.
Igual nos salvamos con eso.
Porque claro.
Si fuese la P.
Sería la misma que print.
Entonces ya estaríamos.
Ahí la liaríamos parda.
Pero bueno.
Con esto.
Al menos.
Vale.
Cerramos aquí.
¿Qué más necesitaríamos?
Section.
El handler.
Claro.
El handler de cada uno.
Debería ser.
Abrir la página.
Por lo tanto.
Sería.
Window.
Punto.
Open.
Y aquí tendríamos.
La URL.
Y en una página nueva.
Y creo que con esto.
Este Profiles Info.
Hostia.
Pero ¿cómo se le pasa el Profiles Info a esto?
Esto es una cosa que no me gusta de Astro.
Esto es una cosa que no me gusta de Astro.
Esto es una cosa que no me gusta de Astro.
Porque se le puede pasar con el Define Bars.
Pero entonces hace que es un script en línea.
Y entonces no deja de funcionar esto.
Ah.
No.
No.
Qué lástima.
Con lo bien que estaba quedando.
La madre que lo parió.
A ver.
No podemos hacerlo así.
No podemos hacerlo así.
Es que Astro.
Para pasarle las variables desde el servidor a un script.
Puedes utilizar Define Bars.
¿Cuál es el problema?
El problema es que si utilizas Define Bars.
Vais a ver.
Que lo pone por aquí.
Dice.
El uso de Define Bars.
Es una etiqueta script.
Implica que la directiva es inline.
Lo que significa que los scripts de estilo no se empaquetarán.
Y serán incluidos inline directamente de HTML.
Esto se debe a que cuando Astro empaqueta los scripts.
Astro incluye y ejecuta los scripts solo una vez.
Claro.
Entonces.
¿Qué es lo que se puede intentar hacer?
Pues esto que te dicen aquí.
Pero ¿cuál es el problema de esto?
Que no se pueden pasar funciones.
Que necesitan.
Claro.
Tal y como lo he hecho.
Estaba pasándole funciones.
Entonces.
No podríamos hacer exactamente lo que hemos hecho.
No lo podríamos hacer.
Porque el handler no funcionaría.
¿Qué es lo que podemos hacer?
Pues no pasarle la función.
O sea.
Podríamos no pasarle la función.
Pasar el ProfileSinfo.
Que claro.
Tampoco tengo muy claro.
Como va a quedar un poco regulinches esto.
Pero bueno.
Podríamos pasarle aquí con JSON Stingify.
El ProfileSinfo.
Y este DataInfo.
Lo podríamos recuperar de aquí.
Info Ninja Get Attribute.
El DataInfo.
Bueno.
Esto lo podríamos hacer aquí.
Y así ya sabríamos que esto existe.
Y aquí parsearíamos la información.
Pero claro.
La Info solo en el caso que exista.
Así que.
Podríamos poner.
Un Sting Vacío.
Por ejemplo.
Un Sting Vacío.
Si lo intento parsear.
Si intento parsear un Sting Vacío.
JSON.parse.
¿Esto peta?
Sí.
La madre que lo parió.
Entonces.
Null.
Vale.
Pues null.
Vale.
Ajá.
Dicen.
Dicen.
Si.
Si.
El parámetro Sting.
Pues no le gusta.
No le gusta.
Bueno.
Pues nada.
Esto.
Ya está.
Lo único que quiero es que no pete.
Bueno.
Tiene sentido que sea esto.
¿No?
Porque así.
Vale.
Tiene sentido porque sea un array vacío.
Ya está.
Entonces.
El parseInfo este.
Ahora sí.
Lo que tendríamos que hacer aquí.
Es transformarlo en Data.
Data.
Tendríamos el parseInfo.
Y aquí es donde tendríamos que hacer la función.
Que he hecho antes.
¿Vale?
Entonces.
Tendríamos aquí.
Vale.
Más o menos.
Más o menos.
A ver.
Hotkey.
Ta ta ta.
Vale.
Este handler que habíamos hecho aquí.
Este handler.
Esto de hotkey.
Esto lo dejaríamos.
Esto lo quitaríamos.
Pa pa pa.
Y aquí le añadiríamos la función del handler.
Y aquí lo que tenemos que hacer es.
Window.open.
ItemViewerL.
Y tal.
Vaya por Dios.
Que esto tiene un tipo AENI.
No sé qué.
Calla.
Calla.
Me gustó mucho un truco que vi el otro día.
Muy interesante.
Que decía de utilizar.
La.
No sé.
Era un type.
Type.
To do.
Y entonces.
Le pasaba a ENI.
Y entonces.
Tú lo que podías hacer.
Es decir.
To do.
A ver.
Es un poco.
Es un poco pirata.
La verdad.
Es un poco pirata.
Pero es interesante.
¿No?
Porque.
Al menos.
Al menos.
Puedes buscar fácilmente los to do.
Y la palabra ENI.
Es un poquito más.
Pero bueno.
A ver.
Si no.
Lo que podríamos hacer es.
Tiparlo.
Pero me da palo.
Me da palo.
Ahora mismo.
Me da palo.
Solo quiero ver si esto funciona.
Solo quiero ver si esto funciona.
Vamos a ver.
No funciona.
No funciona.
Madre que parió.
No funciona.
Vamos a ver por qué.
¿Vale?
Que si no.
A las malas.
Lo hago de otra forma.
Y ya está.
Vamos a ver por qué no funciona.
Tú, tú, tú.
Vale.
Aquí sí que veo que tiene toda la información.
Ah.
No funciona porque no lo estoy usando.
¿Cómo va a funcionar?
La madre que me parió.
¿Cómo va a funcionar?
Vale.
Ojo.
Ojo.
Ojo.
Ojo.
Vale.
Hay alguna cosa que está mal.
Y es la ID.
¿Veis?
Aquí tenía la ID.
Claro.
La ID no la estoy utilizando.
Y la tenemos que poner.
Network.
Y aquí.
El title.
Visitar.
Vale.
Vale.
Mejor.
Y lo que nos faltaría ahora.
Toque final.
Es el margin right.
Este que tengo que poner a mano.
Podría estilarlo.
Pero no me quiero meter en los estilos del.
Del ninja keys este.
Y prefiero tenerlo yo en el control este.
Ya lo arreglaremos normal.
¿Vale?
Vale.
Y ya tendríamos esto.
Buscar comando.
Visitar linkedin.
Y te lleva linkedin.
Visitar x.
Y tal.
Ya para rizar el rizo.
El detallazo final.
¿Vale?
Va a tener el detallazo final.
Lo que vamos a hacer es.
Básicamente.
Para.
Animar.
Es una tontería.
Pero me parece que.
Que es de nota.
Es de nota.
Básicamente.
Vamos a.
Animar.
Aquí los estilos.
Ves que he hecho esto de footer.
Background y tal.
El problema es que.
Ahora esto se ve siempre.
Que a ver.
No pasa nada.
También tendríamos que quitarlo aquí.
Porque veis.
Aquí se ve.
Y esto.
Tenemos que quitarlo.
Así que.
Primero.
Vamos a poner el no print.
En el footer este.
Class.
No print.
Para asegurarnos.
Que no se imprime.
Perfecto.
Y lo segundo que vamos a hacer además.
Es.
Hombre.
Vamos a por la nota.
Y para sacar nota.
Vamos a ponerle una pequeña animación.
Vale.
Vamos a hacer una animación.
Keyframes.
Que sea fading.
Bueno.
Reveal.
O fading.
Fading.
Le ponemos esto.
Vale.
Y vamos a añadirle aquí.
Una animación.
Una animación.
Que va a ser.
A través.
Del scroll.
Así que vamos a crear un timeline.
Vamos a ponerle un nombre.
Que sea.
Yo que sé.
Revealing.
Revealing.
Para mostrar.
Para mostrar.
Esto.
Cuando hacemos scroll.
El timeline.
Axis.
Va a ser el block.
Vale.
El bloque.
Es el que es vertical.
El inline.
Es el que es horizontal.
Eso lo hemos visto antes.
Justamente con el margin.
Inline.
El padding block.
Vale.
Y vamos a hacer que la animación.
Va a ser lineal.
0.3s.
Con el fading.
Y esta animación.
Va a utilizar el timeline.
Del revealing.
Ok.
Y solo nos faltaría ya.
Bueno.
Yo con esto.
Vale.
Bueno.
O sea.
Esto.
Se ve.
Pero es un poco raro.
Que tarde tanto.
O sea.
Ya lo hace.
¿Veis que lo hace?
Aquí lo que podríamos es.
Tunear un poco.
Con el animation range.
Y decirle.
Cuando lo tiene que mostrar.
Por ejemplo.
Cuando entra el 100%.
Como queremos que se enseñe rápido.
¿Ves?
Ahí.
Ya lo tendríamos.
Fijaos que.
Que bonito.
Ahora cuando haces scroll una vez.
Ya te aparece.
Y con CSS.
Sin necesidad de hacer absolutamente nada.
Hostia.
Joder.
Que como me ilumina la cámara de vez en cuando.
Pues esto.
Hacemos esto.
Y fíjate.
Queda súper bonito.
¿Eh?
Queda bonito.
Y lo hace inmediato.
Cuando ya.
En cuanto bajas.
Con seis líneas de CSS.
Bueno.
Cinco líneas de CSS.
Porque si quitas estas.
Son cinco.
Pues ya tienes ahí un fade in maravilloso.
Fíjate.
¿Y qué es lo más interesante de todo lo que hemos hecho?
A ver.
Lo increíble de lo que hemos hecho.
Que está bastante bien.
Lo más increíble.
¿Qué es lo interesante?
Lo interesante de todo esto.
Es que.
Ahora.
Cuando vayáis al repositorio.
Ah.
Y espérate.
Una cosita.
Porque el layout.
En el index.
Ahora además.
El title.
También.
Deberíamos mejorarlo.
Porque aquí podríamos poner.
Eh.
Portafolio.
De.
Eh.
Name.
Name.
Name.
Y aquí podríamos poner también.
Ah.
Es que no tengo aquí el name.
Bueno.
Importamos.
Basics.
Esto es lo que está chulo.
De.
Summary.
No.
A ver cómo era esto.
Turururú.
Label.
Label.
Label.
Vale.
Y entonces ahora.
Portafolio de Miguel Ángel.
No sé qué.
No sé cuánto.
Y luego sale el resto.
Que debe ser.
Full stack developer.
Con más de 15 años de experiencia.
Vale.
A ver.
¿Qué me pone esto?
Pim, pim, pim.
Sí.
Y sincronizamos los cambios.
Vale.
Lo interesante de esto.
Es lo que.
La idea.
La idea es que.
Simplemente.
Eh.
Edita.
El archivo.
Cv.
.json.
Para crear.
Tu propio.
Cv.
Imprimible.
Port.
Portafolio.
Cv.
Imprimible.
Solo tocando.
Un archivo.
Que es el cv.
Json.
Tú aquí.
Puedes poner.
Yo que sé.
Madeval.
El.
El.
El.
Hostia.
El crack.
Y puedes poner aquí.
Yo que sé.
Backend developer.
Y hago cosas increíbles.
Y te pones aquí.
Aquí buscas.
Por ejemplo.
En github.
Github.com.
Madeval.
Png.
Vale.
Bueno.
No sé por qué sale ese.
Pero vale.
Pone su email.
No sé qué.
Dice.
Soy el mejor desarrollador.
De esta parte.
Del planeta.
Vas a alucinar.
Alucinar.
Con el código.
Que sale.
De mis manitas.
Vale.
Y esto.
Pones aquí.
Montevideo.
Esto.
La verdad.
Es que no lo hemos usado.
Pero bueno.
Uruguay.
Eso.
Lo he rellenado.
Más que nada.
Por.
Por si acaso.
Entonces.
Solo poniendo eso.
Pues ya está.
Pam.
Ya lo tienes.
Imprimir.
Y lo imprimes.
Y tienes ahí.
Pues.
Tu.
Con tu experiencia.
Con todas tus cosas.
Con tu imagen.
Y solo.
Tienes que tocar.
Un archivo.
No tienes que tocar.
Nada más.
O sea.
Obviamente.
Lo podéis mejorar.
Si queréis.
Pero la idea.
Es un poco.
El hecho de.
Tenemos un currículum.
Hecho.
Fácil.
Imprimible.
Que tocando un JSON.
Pues lo podéis desplegar.
Y ya lo tenéis.
La idea.
A partir de aquí.
Sería hacer una línea de comandos.
Que hoy no nos da tiempo.
Pero.
Seguramente lo haremos más adelante.
Para que lo tengamos.
¿Vale?
Así que.
Nada.
Ahí.
Ahí lo tenéis.
Y lo tenemos.
Bueno.
Vamos a.
A tirar para atrás.
Estos cambios.
Vale.
Este sí que lo añado.
Le voy a hacer una foto.
Y lo voy a poner en el currículum.
Ahí en el currículum.
En el ritme.
Para que básicamente.
La gente vea como.
Como lo hemos hecho.
Y lo más interesante de esto.
Y.
Que es que esto es lo que.
A mí me encanta.
Hacéis una build.
Básicamente.
Para tener.
Los estáticos.
O sea.
El CSS.
El HTML.
Y todo esto.
¿Vale?
Os vais a Netlify Drop.
Netlify Drop.
Netlify Drop.
¿Vale?
Hostia.
Netlify Drop.
Vercell pagando public.
Y Digital Ocean pagando public.
Para salir arriba.
Hostia.
La leche.
Netlify.
Que van por ti.
Van por ti.
Chico.
Cuidado que van por ti.
Que te revientan.
Vale.
Entonces.
Dist.
Pillamos estos archivos.
Nos vamos aquí.
Drop.
Y además.
Gratis.
Ay.
¿Cómo que no records?
¿Qué es eso?
¿Será que tiene que ser la carpeta?
Más que no.
Nunca me acuerdo.
Si es la carpeta o si es.
O son los archivos.
Parece que es la carpeta.
¿Vale?
¡Pum!
Ya lo tenemos.
¿Cuánto tiene esto?
De JavaScript y de todo.
Vamos a ver.
Vamos a ver cuánto ocupa.
Bueno.
100K.
La verdad.
No está mal.
Por culpa de la dependencia.
Pero bueno.
Es menos.
No está mal.
A ver.
Nos faltaría el Fabicon.
Que no lo hemos cambiado.
Pero solo son.
Bueno.
Es que son nada.
12K.
Que bueno.
Es un poquito menos que el que teníamos aquí.
Que al final eran 600.
600K.
No estaba mal.
600K.
Pues estos son 100.
Y yo creo que esto es por culpa.
Por desgracia.
Porque está utilizando LEED.
Que también tiene bastante.
Me encantaría una paleta de comandos.
Pero es la más pequeñita que he encontrado.
La más minimalista.
Si alguien se atreve.
Que haga una paleta de comandos.
Que sea vanilla.
Y que no utilice dependencias.
Entonces la utilizamos.
O que utilice una dependencia que sea muy chiquitita.
Como PRIAC.
Por ejemplo.
Pero bueno.
Que tiene un rendimiento perfecto.
Que vais.
Entrais.
Y ya está.
Y no tiene.
Y esto.
Pues funciona perfectamente.
Y podéis moveros aquí con el tecladito.
Visitar.
Le dais.
Y tal.
Así que ahí tenéis proyectazo.
¿Vale?
Para que también.
Si veis alguna cosita que podríamos mejorar.
Que podríamos hacer mejor.
Ya sabéis.
Le echáis un vistazo.
Hacéis una PR.
Que siempre se puede mejorar alguna cosa.
Y lo bueno.
Es que podemos hacer que esto sea un template.
Mira.
Alguien hace una pull request ya.
Create.
Queda para ir el JSON de repositorio oficial.
No he entendido esto.
Ah.
Pero bueno.
Esto no es necesario.
Porque al final.
Este esquema ya lo hemos hecho.
Basándonos en otra cosa.
Piensa que este esquema.
Él lo ha hecho.
Porque se lo ha inventado.
O sea.
Se ha inventado.
No se lo ha inventado.
Pero que nosotros hemos intentado utilizar el JSON esquema este.
Para seguirlo.
¿Vale?
Para utilizar uno que está como de código abierto.
Y todo esto.
¿Vale?
Muy bien.
¿Cómo se hace una paleta de comandos?
Bueno.
Hoy hemos visto cómo utilizarla.
El cómo crearla ya.
Se sale de.
Se sale de todo lo que podemos hacer hoy.