Este sería un poco el diseño y, bueno, ya le daremos una vuelta, ¿vale?
Ya haremos algunas cositas que arreglamos y todo esto.
Pero yo por ahora intentaría seguir lo máximo posible.
Sí que le daremos algún detalle.
Veo que aquí tiene multipáginas.
Seguramente multipáginas yo no lo haría.
Ya sabéis que a mí me gusta bastante que sea de scroll en una sola.
Pero, bueno, lo podemos ir separando luego y ir viendo, ¿ok?
Usaremos Astro.
A ver, yo es que creo que hay que usar Astro, tío.
Es que para estas páginas yo creo que lo mejor es utilizar Astro.
Astro, para el que no sepa lo que es, es un framework web.
Y que el otro día alguien me decía, ¿pero vale la pena utilizar Astro?
Claro que sí.
Es que yo creo que Astro para los porfolios, las landing page y tal, es que no hay...
Iba a decir, no hay nada mejor.
Bueno, pero es que de verdad yo creo que la experiencia de desarrollo es buenísima.
Y además, aunque tú no sepas Astro, es que entenderlo es increíblemente fácil.
O sea, no hay excusa.
Si alguien me dice, no, es que no sé Astro, es que da igual.
Es que es tan fácil que si sabes HTML, CSS y un poco de JavaScript, es que ya tienes que saber Astro.
Sí que luego tienes App y tal, pero bueno, es que es muy fácil.
Bueno, The Web Framework for Content Driven Websites.
Básicamente es un framework web que puedes utilizar lo que quieras.
React, Preact, Svelte, Vue o ninguno.
No hace falta.
De hecho, yo creo que no vamos a utilizar ninguno.
Y así nos vamos a acercar más a utilizar vanilla JavaScript, ¿vale?
Para que esté totalmente lo más cerca de la plataforma.
Ejecutamos el NPM Create o podéis utilizar BAN, BAN Create, creo que también estaría.
Vamos a ver si funciona con BAN Create.
Ah, pues sí.
BAN es una alternativa a Node que va bastante bien y que también es una alternativa a NPM.
O sea, es una alternativa a todo.
Vale, vamos a poner Portfolio Dep, Portfolio Dep, ¿vale?
Include Sample Files.
Decíamos que sí.
Vamos a ver, ahí está.
Un amigo está usando Astro con Svelte 5 y lo prefiere por sobre Svelte Kit.
No me extraña, no me extraña.
Es que está muy bien Astro.
Y lo bueno que tiene Astro, si lo piensas fríamente, es que si tú el día de mañana,
claro, él está utilizando Svelte, pero si el día de mañana dice,
ostras, en realidad quiero utilizar otra cosa, ¿sabes?
Quiero utilizar Preact.
Bueno, pues al final puedes ir utilizando Preact, React, Vue, lo que tú quieras.
Entonces, no estás atado.
Es que Next.js, por ejemplo, al final te ata mucho a tener que utilizar React para siempre.
Que no pasa nada, pero no sé.
No sé, me parece que para este tipo de páginas web tiene todo sentido el mundo.
Muy bien, pues nada, nos vamos a Portfolio Dep, hacemos el BanRanDev o NPMRanDev, lo que queráis, ¿vale?
En este caso, fijaos la diferencia para que veáis, ¿no?
Porque muchas veces la gente me dice, ¿por qué utilizarías uno u otro?
Fíjate bien, mira, NPMRanDev, fíjate bien.
Fíjate.
Vale, no ha tardado mucho, pero fíjate ese salto que da, fíjate.
¿Veis que he pegado como un salto y tal?
BanRanDev.
¿Habéis notado un poquito la diferencia?
La diferencia de que va un poquito más rápido.
Un poquito, ¿eh?
Porque aunque aquí parece que tarda en lo mismo, aunque parece que tarda en lo mismo,
lo cierto es que no es exactamente lo mismo.
Porque tarda más en inicializar el proceso de NPM.
De hecho, yo creo que tarda más de 88 milisegundos en iniciar lo otro que no el servicio.
Pero bueno, es muy poco, ¿eh?
La diferencia es muy poquita.
Solo que, pues, se os hacía ilusión saber la diferencia.
Bueno, pues aquí tendríamos el Astro.
Astro, maravilloso Astro.
Vamos a levantar aquí en Visual Studio Code.
Levantamos aquí el proyectito.
Aquí tenemos todo el código.
Astro, para la gente que no sabe de qué va Astro, rápidamente.
Aquí nos ha creado ya toda la estructura, las extensiones.
Por supuesto, te tienes que instalar la extensión de Astro.
Aquí, importante.
Porque Astro tiene unos archivos.astro, que es donde mezcla el HTML con el JavaScript, con el CSS y todo esto.
Y para que tengas la sintaxis.
Luego, ¿qué más?
Aquí tendríamos los archivos públicos, los estáticos de toda la vida.
Y aquí, todos los de código fuente.
Componentes, layouts, páginas.
En las páginas tendríamos las rutas.
Que ahora mismo solo tenemos la ruta principal.
Luego tendríamos aquí los layouts, que serían lo que envuelve a nuestras páginas.
Que claro, ¿qué es lo que envuelve a toda nuestra página?
Pues aquí tenemos el layout principal, con todo el HTML.
Vamos a poner que esto está en español.
Todos los metas.
Y aquí en el slot es donde se van a renderizar nuestras rutas, nuestras páginas.
Y aquí tenemos unos estilos globales.
Lo único que es diferente, digamos, del HTML típico, esta parte de aquí.
Que esta sería la parte en la que puedes ejecutar JavaScript.
Que la tienes que limitar por estos tres guiones.
Y esta directiva, que lo que quiere decir es que estos estilos son globales.
Todo lo demás no deja de ser HTML puro y duro.
En componentes tendríamos algunos componentes.
En este caso, ahora mismo solo tenemos las cards.
Y esto es lo que está muy chulo de Astro.
Porque puedes crear componentes de cualquier página.
Y esta sería la página principal.
¿Qué ves?
Ya estamos envolviéndolo con nuestro componente layout.
Le pasamos el título.
Bueno, pues esto.
Vamos a quitar todas estas cosas que no necesitamos para nada.
Este style que podemos tener estilos en cada una de las rutas y componentes.
Y encima tienen su propio scope.
Está súper bien.
Y vamos a poner aquí el porfolio.
¿Vale?
Para añadir Tailwind podemos utilizar un comando.
Y esto es una maravilla que tiene Astro.
Van x o npx astro add.
Y le decir la tecnología.
En este caso, Tailwind.
De hecho, creo que podéis hacer list y os sale la lista.
¿Ves?
Esto es la lista de todas las tecnologías que podéis añadir con un solo comando.
Lo cual es súper bueno.
Por ejemplo, npx astro add Tailwind.
Y entonces esto ya os añade la configuración y todo esto.
¿Vale?
Sí.
Esto es lo que va a ejecutar.
Van.
Porque hemos utilizado van para instalar las dependencias.
¿Vale?
Nos dice que va a generar una configuración mínima.
Le decimos que sí.
Esto es lo que va a modificar.
Le decimos que sí.
Y ya lo tenemos.
Y ahora, pues, nada.
Ya podemos inicializar.
Ah, bueno.
Se reinicializa solo.
Detallazo.
Detallazo.
¿Vale?
Entonces, localhost 4, 3, 2, 1.
¿Sí?
Puede ser que era este.
Vale.
Ya lo tenemos.
No se ve ahí muy bien.
No se ve muy bien.
Voy a hacer un pequeño cambio para lo de Tailwind.
Que si no me equivoco, el dark mode.
Aquí le vamos a poner clase.
Porque vamos a intentar utilizar.
No sé si hacemos dark mode.
Yo creo que sí.
Yo creo que sí.
Vale.
Pues ya tendríamos esto por aquí.
Voy a poner el diseño que vamos a hacer por acá.
Lo abro con Figma.
No es que sea yo un gran crack de Figma, la verdad.
Pero bueno, voy a intentar defenderme.
Y ya está.
Este sería un poco el diseñito que vamos a hacer.
Ya veis que tenemos aquí como el header.
Sencillo.
Nada raro.
Y aquí, fijaos que muchas veces decimos.
Es que menos es más.
Y es que aquí lo tenéis.
Es que lo sencillo que es esto.
Y ya lo tendréis.
Pues vamos a hacer el header, si os parece.
De hecho, componentizamos.
¿O qué?
Header, header, astro.
Header, astro.
Venga.
Tenemos el header.
Lo bueno es que con las clases, pues tendríamos justify between.
Y tendríamos aquí, por un lado, lo que sería el logo.
Que esto lo vamos a...
Ahora lo arreglaremos, el logo.
Vale.
Alt logo for portfolio o midu de foto.
Vamos a poner.
Porque va a ser mi foto, ¿no?
Y aquí podríamos poner el nap.
Vale.
Que el nap...
Estoy pensando que el nap muchas veces la gente lo pone en una lista desordenada.
¿Ves?
Y no sé hasta qué punto es obligatorio.
¿Sabes?
Yo también lo hago, ¿eh?
Yo también lo hago.
Pero no sé.
Me gustaría ver a ver si hay algún ejemplo en el que...
No, pero veo que siempre meten...
O el título.
Ah, pero ¿ves aquí?
No tiene por qué contener una lista.
Puede tener otro tipo de contenido.
Es un bloque de navegación.
Y aquí tienes enlaces en prosa.
¿Ves?
Nunca te acostarás en saber una cosa más, amigos.
Nunca te acostarás en saber una cosa más.
Uno siempre piensa...
Da por hecho.
¿Eh?
¿Has visto?
Uno siempre da por hecho.
Que tiene que ser en listas.
Y mira, ¿eh?
Uno aprende aquí cualquier cosa.
Por lo tanto, teniendo en cuenta esto...
Pues mira, ya está.
Vamos a poner aquí nuestros enlaces.
Bueno, vamos a poner el home, el about, el projects.
Creo que estaba también.
Oye, trabaja hija Copilot.
No me hagas escribirlo a mí todo, ¿eh?
Projects y el contact.
Vamos a intentar a ver si nos da tiempo a hacer el contacto también.
Para enviarlos todo esto.
Vale.
El header, la verdad, que no tiene mucha historia.
Lo que sí que...
1120.
1120.
O sea, MXAuto...
Bueno, esto no sé si hacer que sea el layout en realidad, ¿no?
O sea, si...
Aquí vamos a poner el header.
El header lo vamos a poner en el layout.
¿Vale?
Tiene sentido que esté en el header aquí.
Header, ¿vale?
En el layout.
Y lo que estoy pensando es que el body, ¿vale?
Vamos a ver qué cositas hay por aquí.
Este code fuera.
No necesitamos este estilo.
Este background size tampoco.
Esto tampoco.
Vamos a utilizar in system UI.
Vale.
Ya está bien el system UI.
Accent.
Nada.
Todo esto fuera.
Y por ahora el body vamos a poner que sea display flex.
Justify content center.
¿Vale?
Centramos ahí cada cosita.
¿Lo hacemos blanco o negro?
Negro, negro, negro, negro, negro.
Bueno, ya veo que muchos negros, ¿eh?
Pasión, negro, dark, negro.
Vale, pues yo creo que ha ganado el negro, ¿eh?
Pues negro.
Bueno, tendremos que cambiar totalmente la paleta, pero ya está.
No pasa nada.
No pasa nada.
No vamos a poder adaptar a estas.
Pero bueno, más o menos, más o menos tampoco pasa nada.
A ver, normalmente el negro puro es un poco complicado, ¿eh?
Entonces, podemos hacer dos cosas.
Entonces, vamos a poner mi UDEP logo o mi UDEP image.
Foto.
A ver si tengo una foto ahí más o menos.
Mira, esta no está mal.
Bueno, salgo un poco pixelado, ¿eh?
Eh, no.
Esta no está mal.
Vamos a poner esta.
Vamos a poner esta en el header, ¿vale?
Y vamos a poner aquí ya el class, rounded, full, 4, no sé si 6, 6.
Luego lo ajustamos un poquito.
Vamos a centrar también aquí los items para que se vaya viendo esto.
Vale.
Creo que es un poquito más grande.
A ver si podemos darle aquí.
50 por 50.
Claro, es que esto es el doble.
Vamos a ponerle.
Vale.
Y aquí, una cosa interesante, es que tiene una especie de...
Joder.
Oye, ¿por qué no me sale...?
Bueno, no pasa nada.
Estaba viendo más o menos cuál era...
Vamos a ponerle 3, ¿vale?
Y al menos ahí ya tenemos un poco esto.
Vamos a ponerle también el ancho, que el ancho 1,120.
1,120.
Pues tiene que ser uno bastante tocho.
1,120.
Ah, claro, no.
Se lo vamos a tener que poner nosotros.
Se lo vamos a tener que poner nosotros.
Claro, claro.
Porque...
Bueno, vamos a ponérselo por ahora a mano, ¿vale?
Para que lo tengamos así.
Vale.
Más o menos.
Ya veremos si no se lo cambiamos después.
Vale.
Y aquí iría lo de los proyectos, no sé qué, no sé cuánto.
Y esto tiene que...
Si le ponemos los colores, vamos a ponerle por aquí.
Color...
El color scheme.
Se lo vamos a poner aquí.
Color scheme.
Light, dark.
Y, vale.
¿Veis?
Ya tenemos por aquí esto en color blanco.
Por defecto...
Esto lo que hace, básicamente, es que le estamos diciendo cuáles son los colores que, por defecto,
el navegador tiene que entender que soportamos.
El light y el dark.
Y como estamos en modo oscuro, ya por defecto le cambia los colores.
¿Vale?
Y le pone...
Vale, pues entonces entiendo que en modo oscuro, por defecto,
el texto se tiene que ver blanco.
Y esto está chulo porque al menos así, pues vamos poco a poco, vamos viendo esto, ¿no?
Pues este, 740.
Vale.
Y esto, la separación entre cada uno...
Oye, ¿por qué no sale esto?
Ah, 42.
Hay que darle al option.
Es que ya no me acuerdo, hace mucho tiempo que hago estas cosas.
42.
Vale.
Esto tiene que tener un gap.
O sea, esta parte de aquí vamos a tener que es flex, que es flex row, que la X, lo más
parecido debe ser 42.
O sea, vamos a ponerle 40.
Y lo que, claro, lo importante...
Oye, ¿y este porfolio?
Ah, eso lo he dejado por ahí.
Ese porfolio lo he dejado en el index.
¿Ves?
Este porfolio de aquí lo he dejado en el index.
Pues esto, caca, fuera.
¿Vale?
Entonces ya tendríamos al menos esta parte de aquí.
Luego buscamos a ver qué hover le podemos hacer, que esté rechulón.
¿Vale?
Y ya está.
Pero sí que es verdad que yo en este tipo de cosas, que sea totalmente blanco, totalmente
negro, lo hace un poco complejo.
Yo intentaría ir por algo así, no sé, algo un poquito menos fuerte.
¿Vale?
Algo así.
Y vamos a hacer que esto, como mínimo, la altura sea así.
Porque esto lo vamos a querer siempre.
Pero esto no lo vamos a querer así.
Y items...
Oye, ¿por qué no me...?
A ver.
Mínima altura.
Mínima altura.
¿Y por qué no me lo pilla todo?
A ver, no pasa nada porque luego lo vamos a ir empujando.
Bueno, no pasa nada.
Luego me preocupo.
No pasa nada.
No pasa nada porque...
Es que no sé si es una sensación que me da lo del color, ¿sabes?
Que está cortado.
Está cortado el color.
Bueno, pues nada.
Luego lo arreglamos.
Lo importante es que me lo centre.
Luego lo empujará el contenido.
No pasa nada.
Vale.
Ya tenemos más o menos la parte de arriba.
Aquí vamos a ponerle un opacity así un poquito.
Para cambiarle...
Que el color no sea exactamente blanco.
¿Vale?
Y luego cargamos la fuente.
Que vamos a cargar...
Tenemos diferentes fuentes.
Esta me la ha pasado Pablo.
Feralp.
Feralp me ha pasado esta fuente que está bien rechulona.
Pero...
Pero bueno.
No sé.
Podemos...
Tenemos dos opciones.
¿Vale?
Una, la oficial del diseño o esta.
Podemos probar esta si queréis, ¿eh?
Que está...
Además está disponible en Google Fonts y lo más importante en Font Source, que es el que suelo utilizar yo para los proyectos con Astro.
Si no me equivoco es Honest.
Ah, ¿por qué no aparece?
Aquí estás.
Esta.
Y aquí tenemos todos los...
¿Sí?
¿Esta está guapa?
¿Os gusta?
Bueno, pues mira.
Vamos a cargar esta.
Si no me equivoco...
Bueno.
Custom Fonts...
Es que nunca me acuerdo cómo es el...
Tenemos aquí Using Font Source.
Esto.
Ah, es instalando.
Está muy chulo, ¿eh?
Porque básicamente tú lo que haces aquí es que le dices PNP install, ¿sabes?
Tú instalas como la fuente y haces barra y lo puedes ver aquí.
Si te vas aquí, vas a ver aquí en instalación que tienes que instalar como si fuese una dependencia.
Pues ya está.
Tú le dices, vale, pues quiero instalar esta fuente.
La instalas como una dependencia.
Y así no te tienes que preocupar de cargar, descargar las fuentes o de cargarlas desde el CDN de Google Family que al final...
¡Ay, mierda!
He utilizado BAN.
Me equivoqué.
Es que es la manía de que siempre utilizo PNPM.
Vale.
Mejor.
Más rápido.
¿Vale?
BAN install.
Perfecto.
Entonces, lo bueno es que no te tienes ya que preocupar de cómo se carga o qué...
Nada.
Te olvidas y punto.
Lo que sí que es verdad que me gustaría saber cómo se registran las fuentes...
Vale.
Esto sería para el font, pero quiero decir, no recuerdo si automáticamente es capaz de detectar las...
Bueno.
Ahora no nos vamos a preocupar, pero me gustaría saber que no carguemos todas, ¿sabes?
Que carguemos solo las que necesitamos.
Es que nunca me acuerdo de esto.
La vamos a poner en layout, que al final es lo que siempre se carga en el layout este.
Y por ahora, vamos a ir un poco a saco.
Vamos a ponerlo aquí, que se cargue todas las fuentes.
En este caso, la familia es honest...
Ah, variable.
Claro.
O sea, que es la...
Claro, tendría que haber puesto la static.
Ah, pero también es lo mismo, ¿no?
Honest o la variable.
¿Vale?
Ah, mira.
Se cargan así.
Se cargan así.
O sea, tú si le pones diferentes, las tienes que cargar así.
Ajá.
Interesante, interesante.
Vale, vale.
Pues ya está.
Pero aquí igualmente, font source, honest...
O sea, pondríamos honest...
Y entiendo que aquí deberíamos poner cuál es el tamaño que queremos cargar.
¿Vale?
Vamos a intentar con 400...
Y ahora veremos si tenemos que cargar alguna más.
Entonces, 400.
Y aquí, si ponemos honest...
¿Vale?
Vamos a ver si esto lo ha cargado correctamente.
Bueno...
No lo ha cargado.
No lo ha cargado.
Me ha engañado.
O sea, esto no funciona.
Esto no funciona.
Me engañó.
A ver ahora.
Pues me dice que no la encuentra.
La he instalado, de verdad, ¿no?
¿La he instalado o la he liado?
Ah, es que la variable...
Ah...
Bueno, utilizamos la variable.
Claro, es que estaba con variable.
Vale, vale, vale.
Nada, utilizamos la variable.
Que la variable, por si no lo sabéis, las variables están muy chulas.
Porque al final lo que haces con esta fuente es que soportas todos los grosores.
Porque es variable.
Entonces, solo la utilizas una vez.
Solo la cargas una vez.
Pero puedes utilizar cualquier grosor.
Lo bueno, que es un poquito más óptima que la otra.
Porque al final lo que hace es que tiene...
Mira, ya está.
Tienes algún tipo de...
La fuente es especial y lo que hace es controlar el grosor de una forma totalmente diferente.
No de forma estática que tiene cada una de las fuentes.
Sino que lo que hace es dibujarle el grosor de forma dinámica.
Y lo más increíble de esto es que además lo puedes animar.
Lo cual lo hace bastante más chulo.
Vale, pues mira.
Ahí lo tenemos.
Y ya se ve la fuente.
Y la verdad es que está bastante bonita.
Me gusta bastante la fuente.
Está bonita, bonita.
Vale, pues bueno.
Ya tenemos aquí la fuente.
La variable.
Pues maravilloso.
Y vamos a la parte de abajo.
Esta parte de aquí de...
Soy el Fira.
No sé qué, no sé cuánto.
Haremos también esto.
Vamos a hacer cada una de las cositas que tenemos por abajo.
Vamos a poner el h1 con...
Soy mi dudep.
Vamos a poner esto.
Aquí deberíamos poner el span que lo vamos a poner por aquí.
Vamos a poner...
Le vamos a llamar batch.
Veremos si le cambiamos el nombre después.
Batch.
Y vamos a poner batch.
Y vamos a poner aquí disponible para ser...
O disponible para trabajar.
No sé.
Si os ocurre otro mejor, me lo decís.
¿Vale?
Vamos a tener aquí ya un h2.
Que vamos a poner más 15 años de experiencia.
Web designer...
Vale.
Desarrollador web y creador de contenido.
Por ejemplo.
Creador de contenido.
Vamos a darle...
Le ponemos aquí unas mayúsculas un poco para dramatismo.
De Barcelona, España y...
Me especializo en hacer webs.
No.
Me especializo...
No sé.
¿En qué me especializo?
Especializado en crear soluciones o aplicaciones únicas.
Así que suena muy potente.
Y luego tendríamos aquí ya...
Este es un poco raro, ¿vale?
Porque fijaos que aquí le pone como unas pastillas muy raras.
Que veis que pone driver.
O sea, tiene aquí Instagram, YouTube, LinkedIn.
Y luego aquí el correo.
Es como muy raro.
No me desagrada que salga así el correo.
Eso está bien.
Pero me parece como un poco rara las pastillas.
Porque además se parece mucho a estas.
Entonces, no sé.
Pero una de las dos va a tener que cambiar.
Yo creo que la parte esta de aquí no me termina de gustar.
De hecho, me gusta más la de Flowbyte.
Si vamos a Flowbyte y buscamos aquí los batch.
Vais a ver aquí docs.
A ver si lo encuentro.
Batch.
Yo creo que a este le puede quedar un poquito mejor.
Porque no tiene tanto rounded, ¿vale?
Y nos puede ayudar a diferenciarlo de los otros.
Entonces, vamos a empezar con este.
Con este batch.
Que luego esto lo podemos simplificar.
Esto tendríamos que ponerle aquí el slot.
¿Vale?
Porque es lo que le vamos a pasar con lo que se va a rellenar.
Ok.
Este span aquí.
No sé por qué me lo ha puesto tan raro.
Y esto disponible para trabajar.
Lo ponemos así.
Ahora tendríamos que poner aquí este sí.
Vamos a hacer que sea text white.
O sea, que sea totalmente blanco.
Y a ver, a ver.
¿Dónde teníamos esto por aquí?
Vale.
Bueno, ya veis que esto me lo ha puesto la conchinchina.
Esto me lo ha puesto la conchinchina.
Porque cuando hemos hecho que esto sea flex.
El flex direction.
Tendría que ser column.
Para que vaya uno arriba del otro.
Vale.
Y ahora que esto me lo ha puesto así.
Y esto...
Vamos a hacer...
Yo creo que hay un tema con el...
Con este...
No sé qué, no sé cuánto.
Vale.
Esto.
Esto.
Margin.
Cero auto.
A ver, a ver.
La estoy liando con el...
Que no salga esto.
Ajá.
Ajá.
Vale.
Vamos a hacer...
Vamos a hacer...
Este nav.
Este header.
Vale.
Margin.
Lo vamos a...
No sé si centrarlos todos.
O sea, ¿sabes?
O sea, ir uno a uno.
O centrarlo a partir de aquí.
Y bueno, no preocuparme de que vaya saliendo como está saliendo.
Ajá.
Bueno, vamos a ir dándole.
Es que total, no pasa nada.
Soy yo porque pienso, bueno, es que me va a quedar mal y la gente se va a rayar.
Pero bueno, no pasa nada.
Vamos a poner aquí que esto sea un section.
Vale.
Que va a ser la sección general de principio.
Le vamos a poner el class.
Vamos a poner 740.
No soy muy fan de poner esto.
Pero bueno, luego cuando hagamos responsive estaría bien que lo vayamos ajustando esto.
Porque no tiene mucho sentido.
Vale.
Esto por aquí.
Y esto que tiene una separación bastante bestia entre esto.
193.
Vale.
Vamos a ponerle...
No sé.
¿Por qué me pone solo estos?
P y...
¡Ay!
Que no me está poniendo el...
No me está poniendo la cosa esta.
O no me lo está detectando.
A ver.
No me está detectando el padding ahora.
¿Qué he liado aquí?
¿La he liado aquí con algo?
No.
Pero se me ha ido el...
A ver.
Voy a recargar la ventana que a veces se le va la olla.
Pero veis que no tengo el autocomplete de ahora.
Ahora.
Ta ta ta ta.
Vamos a poner uno grande.
Hacemos esto por aquí.
Vale.
Vale.
Y ahora vamos a poner que esto sea bastante grande.
Le vamos a poner que sea bold.
Porque eso es lo que tenemos que destacar.
Vamos a hacer que esto sea justify center.
Y que sea flex row.
¿Vale?
Vale.
Y esto de aquí.
Este.
Vamos a poner para que no haga esto.
Podríamos poner en el otro.
Pero bueno.
Y este es el que vamos a tener que poner.
Class.
Flex.
Justify.
Center.
Vale.
Ay.
¿Otra vez?
No.
No.
¿Por qué me hacéis esto?
A ver.
¿Qué?
¿Cómo hago esto?
Que se me quede...
Que se me quede centrado sin liar la parda.
A ver.
Contadme.
¿Qué opinas sobre el framework de PHP Laravel?
Madre mía.
Pues si...
Es que...
¿Qué más da lo que yo opine si Laravel es increíblemente potente?
O sea...
Tiene un montón de trabajo.
Un montón de gente lo utiliza.
Tiene un montón de trabajo.
O sea...
Tiene un montón de posibilidades.
O sea...
Da igual lo que opine yo o lo que opine cualquiera.
Si es que...
Es como si alguien te dice...
¿Qué opinas de WordPress?
No sé.
A ver.
Si fuese algo que es verdad que nadie conoce o que no tiene mucha historia, pues lo podría
entender.
Pero hombre.
No...
No tiene mucho sentido preguntar por Laravel, tío.
O sea...
¿Qué quieres?
Si...
Si...
Si te digo que no, imagínate.
Imagínate.
No tiene sentido.
Hay tecnologías que no importa.
Si es que ya están de sobras comprobadas.
Hay tecnologías que te puede venir el mayor creador de contenido en el mundo y que no
importa lo que te diga, macho.
Si es que va a ser baladí.
Es como si alguien te dice...
Es que Angular es asqueroso.
¿Qué dices, tío?
O sea...
Angular al final te puede gustar más o menos, pero al final tiene un montón de trabajo.
Así que...
Nada.
Ni caso, macho.
Y si te gusta, pues...
A darle cañita.
Yo creo que haga lo que hagas, te va a ir bien.
En el sentido del Aravel.
También tienes otras adopciones, obviamente.
Pero es que del Aravel no te va a faltar trabajo.
Con PHP en general no te va a faltar trabajo.
Por mucho hate que tiene, la verdad es que al final un montón de gente lo utiliza, un montón
de empresas y no vas a tener problemas.
Vale.
Esto...
Esto por aquí.
Vale.
Y ya lo estamos ajustando un poquito.
Esto le quitamos un poquito de...
Aquí.
Le vamos a quitar un poquito de opacidad.
De hecho, luego le pondremos algunos colores.
Pero bueno, por ahora lo dejamos así.
Soy mi dudé.
No sé qué, no sé cuánto.
No vamos a hacerlo exactamente igual, porque sería un poquito aburrido.
Nos vamos a basar, ¿vale?
Pero para que nos vayamos haciendo a la idea, ¿vale?
Muy bien.
Entonces, a mí me gusta un poquito más este de disponible para trabajar, lo que sí que
me parecería interesante que a lo mejor esto fuese directamente a nuestro LinkedIn.
¿Sabes?
Porque, hombre, ya que le decimos disponible para trabajar, pues, coño, le decimos, vale,
disponible para trabajar, pero ¿dónde me llevas, no?
Pues ahí lo tienes.
Vale.
Ya veo que no me sé ni mi LinkedIn.
Creo que es por esto, ¿no?
¿Puede ser?
¿No?
A ver.
LinkedIn.
Ah, porque tengo una empresa también.
Pero en este sí.
Ajá.
Este sí.
Vale.
Pues ya hemos encontrado el enlace correcto.
Ah, bueno, que hay que poner tres W dobles.
Vale.
Ok.
Bueno, pues ya más o menos, esto está pillando ya un poquito mejor de buena cara, ¿eh?
En un momento ya le hemos dado cañita a la carita, ¿eh?
Ya le hemos dado un poquito de cara a esto.
A ver, esto está centrado.
Sí que está centrado, pero en mi opinión le falta un poquito de espacio, ¿eh?
No sé.
Yo me he basado un poco en el que teníamos arriba, o sea, en el otro diseño, pero yo
le voy a dar un poquito más de espacio, ¿vale?
Vale.
La foto es pequeña.
Bueno, para que funcione como un logo.
Es que tampoco, o sea, esa foto podemos ponerla, o sea, nos estamos pasando en este diseño.
Como podéis ver aquí en este diseño, tiene la foto ahí.
Que la verdad es que eso, ahí como queráis.
Otro sitio donde se puede poner la foto que puede quedar bien es justamente aquí encima.
Tampoco puede quedar mal.
Aunque sea una foto pequeña, pero es mucho más interesante a veces que pongáis una foto,
al menos, a que no pongáis nada.
Entonces, a ver, para no tener que cambiarlos este, lo voy a poner esto para que lo veáis.
Una sería seguir el diseño, ¿vale?
Lo ponemos aquí, ¿vale?
Esta sería una.
Y la otra sería, voy a poner un span para no tener que cambiar los estilos.
Y aquí, aquí podríamos poner la fotito.
Le daríamos un poquito de espacio para abajo, algo así.
Y la podríamos poner ahí.
Que es otro estilo que muchas veces he visto.
Si hacemos esto, otra cosa que al final se puede hacer es centrar esto.
Y además, claro, una vez que tenemos esto, lo ideal, para que no se rompa un poco la estructura del header,
porque queda un poco raro si le quitamos la imagen,
entonces ya sería, pues, entonces, centrar el menú.
Pondríamos el menú en el centro y ya aquí incluso podríamos luego jugar y hacer un diseño un poquito mejor.
Para el main, a ver, para el main.
Ah, para esto.
Oh, qué bonito.
Para el fondo.
Hostia, este está muy chulo, ¿eh?
Hostia, qué chulo.
Hostia, este está muy guapo, tío.
Este está muy guapo, ¿eh?
Me gusta mucho.
Un degradado está muy bien.
Lo malo es, no sé cuál.
Están muy chulos, ¿eh?
A ver, este.
Este está muy chulo, ¿eh?
Este está muy chulo.
Muy chulo.
Muy, muy chulo.
A ver, ¿dónde habría que poner esto?
En el layout, me imagino.
No sé si en el bot, me imagino que sí.
Ah, porque...
O sea, es un dip que habría que poner aquí.
Habría que poner aquí.
Pero está bien re chulón, ¿eh?
Me gusta, me gusta.
Aquí.
Me gusta, me gusta.
Pues vamos ya por la parte de los proyectos, ¿no?
Porque, ah, bueno, necesitamos esta parte de aquí.
Esta parte de aquí es un poco tú, tú, tú.
Porque, ah, mira.
Una cosa...
Esto parece un poquito más grande.
Vamos a hacer un poco más grande esto.
Porque sí que parece que esté un poquito más grande.
Y que creo que le puede dar...
Especializado en crear aplicaciones...
Vale.
Vamos a poner aquí el text wrap.
Vale.
Y aquí a lo mejor lo que podemos hacer, que podría estar bien,
es el tema de algunos colores y...
Coño, la moto.
Algunos colores.
¿Sabes?
Como para destacar.
Esto lo podemos dejar de este color.
Este, a lo mejor le podemos poner otra cosa.
Desarrollador, etc, etc.
Vale.
Le podemos poner que sí que tenga una opacidad.
Opacity.
80.
No sé si el 15 de año de experiencia.
De Barcelona, España.
Lo podemos poner de otro color.
A lo mejor con un poquito de opacidad.
Lo vamos a poner aquí.
Class, text, red.
Y le damos un poquito de opacidad.
Tiene que ser un poquito blanco.
Pues igual, algo así.
A ver.
Hostia.
Porque se ha puesto...
Ah, claro.
Vale.
De Barcelona, España.
Esto necesita un espacio.
Especializado en crear no sé qué, no sé cuánto.
Esto también necesita un espacio aquí.
Vale.
Desarrollador, creador de contenido.
Esto lo podemos poner a mejor text, yellow.
Vamos a hacer que se vea un poquito más porque me da la sensación que si no, no...
Vale.
Y ahora me lo he cargado.
Me lo he cargado esto.
Está aquí.
Desarrollador de contenido.
Hostia.
¿Me ha roto los estilos esto porque le ha dado la gana o es cosa mía?
¿Sabes?
¿Me ha puesto ahí lo que le ha dado la gana?
¿Sabes?
¿Sabes?
¿Web?
He creado el contenido.
Pues creo que le voy a quitar la opacidad, ¿eh?
Creo que le voy a quitar la opacidad a esta.
Sí, yo creo que sí.
Y esto igual también un poquito más.
Barcelona, España, etc.
Y a lo mejor esto es lo que le podemos dar un poquito menos de interés, ¿vale?
Esto sí que le vamos a dar un poquito menos de interés.
Y ahora ya sí pasamos a lo de abajo, ¿eh?
85, venga.
Coño, casi no se nota que es menos, ¿eh?
Vale.
Y vamos a hacer los botones abajo.
Los botones, aquí lo hacen así.
No me desagradan que sea con todo el nombre.
Pero es un poco raro.
Lo hacemos con nombre y solo icono.
¿Qué os parece, eh?
El icono y el nombre de la combinación completa.
¿Sí?
¿Lo queréis con combinación completa?
Vale.
Vale.
Pues venga, vamos a utilizar los de Tablet Icons, que me parece que están muy chulos.
Luego utilizaremos también los de Feralp, ¿eh?
Y vamos a ver.
Bueno.
¿Qué preferís?
Sí.
Igual utilizamos los de Feralp.
Porque estos no son oficiales realmente.
Se ven como bonicos, pero no son los oficiales.
En cambio, lo malo de los de Feralp es que me da la sensación que a lo mejor si viene con el color...
Bueno, igual lo podemos cambiar, ¿no?
Vale.
Pues venga.
Vamos a ver.
¿Cuál deberíamos poner?
Según ustedes, ¿cuál deberíamos poner aquí?
¿Deberíamos poner el de LinkedIn?
Sin ningún tipo de duda, ¿no?
Vamos a poner LinkedIn, este seguro.
LinkedIn.
Vale.
Vamos a poner aquí LinkedIn y vamos a poner aquí la imagen.
Vamos a poner esto por aquí.
¡Pum!
Lo vamos a ir haciendo ahí un poco a saco.
¿Lo ideal qué sería?
Yo creo que lo ideal sería poner aquí una carpeta, Icons, y aquí empezar GitHub.
Y lo puedes hacer con Astro, que no pasa nada.
Ah, mira, está bien porque tiene que recurre en color.
Entonces, vale.
Pues bien.
Y entonces traértelos en lugar de ponerlos así y así poder reutilizarlos, porque seguro
que los vas a reutilizar en lugar de ponerlos a mano.
Entonces, aquí poner GitHub Icon, no sé qué.
Vamos a ponerle LinkedIn.
LinkedIn.
Vale.
LinkedIn.
LinkedIn.
LinkedIn.
Punto Astro.
Vale.
Pues aquí.
LinkedIn.
Bueno, no sé por qué.
No le gusta.
Ah, porque no está dentro de componentes.
No detecta entonces, que es un componente.
Bueno, vamos a poner los componentes dentro.
A ver.
Link.
No.
No es por eso.
No es por eso.
¿Por qué no hace el autocomplete?
Si tengo ahí el...
Si sabes que lo tengo aquí en Icons.
¿Por qué no me detectas que pongo...?
A veces no lo hace.
No sé por qué no lo detecta.
No sé por qué no lo detecta.
Se supone que debería detectar cuando lo importas, sin necesidad de hacer todo esto.
No sé por qué no lo hacen.
No.
Icons no es.
Es este.
No sé por qué a veces no lo hace automáticamente.
Se supone que por el nombre debería detectarlo.
Pero bueno.
Y una cosa que podemos hacer para pasarle...
¿Ves que le estoy pasando la clase del tamaño y tal?
Aquí se pueden hacer dos cosas.
Pasarle el size.
Pasarle no sé qué.
Normalmente con pasarle la clase directamente, pues ya estaría.
Y aquí, donde tenemos el class, pues podemos poner astro.props.class.
Y le pasamos toda la clase ahí directamente.
Creo que esto no debería dar ningún problema.
Y que se lo debería comer con patatas.
Así que nada.
Vamos a echarle un vistazo.
A ver qué tal.
Vale.
No se la ha comido con patatas.
¿No se la ha comido con patatas?
¿Puede ser?
¿Puede ser?
Si no, pasamos...
No.
¿No se la ha comido con patatas?
¿Por qué no se ha comido con patatas este class?
Vamos a ver.
O es porque no tiene...
O es porque no tiene el viewbox...
Vamos a ver.
El problema...
¿Por qué pasa esto?
Me da la sensación.
Pasa esto porque el icono...
El icono no está bien del todo.
Está demasiado limpio.
A ver.
El tema es que...
Amigo.
Claro.
Esto debería tener un viewbox.
¿Vale?
Eso debería tener un viewbox.
Mira, vamos a hacer esto.
Y así le pasamos todas las props por si se le pasa cualquier cosa.
Esto debería tener un viewbox.
Y ahora...
¿Ves que ahora sí?
¿Ves que ahora sí?
Claro.
El problema es que sin el viewbox, cuando tú lo estás...
Lo estás haciendo más pequeño o más grande, no sabe...
No sabe cómo reducirlo o hacerlo más grande.
Entonces necesitamos el viewbox.
Por suerte aquí el viewbox sabemos que va del 0,0 al 256, más o menos, porque nos hacemos a la idea.
Pero, claro, lo ideal sería en este caso, pues, que estuviese ya desde el principio esto, ¿no?
Pero, bueno.
Feral, vas a tener que arreglarlos.
No se pueden escalar.
Claro.
Sin el viewbox no se pueden escalar.
Es complicado, ¿eh?
No, van para Feral.
No, eso tampoco, hombre.
Tampoco es eso.
Como lo queremos mucho.
De hecho, le podéis hacer una PR.
Podéis ir, mira, podéis ir al proyectito que tiene Feralpa aquí.
En Submit logo.
Me imagino que esto será en las Isus, bla, bla, bla.
Entonces, vais aquí.
Vais a...
No sé si Static o...
No sé dónde tendrá los imágenes.
No sé.
¿Iconos?
A ver si lo estoy aquí.
No.
En Fuentes.
No sé dónde tienen los iconos.
Bueno, mira, puedo buscar LinkedIn y ya está.
LinkedIn.
Aquí estás.
Aquí estás.
Y lo editamos.
Y ya está.
Le ponemos aquí el viewbox.
¿Qué es lo que le ha pasado seguramente?
Lo que le ha pasado, porque a mí me ha pasado muchas veces,
es que lo ha limpiado demasiado.
Add viewbox to LinkedIn SVG.
¿Y qué pasa?
Claro, que el problema es que...
Bueno, claro, voy a tener que crear la pull request.
Esto es...
We need it in order to use a custom width and height vía CSS.
El tema es que utilizando SVG, oh my god, que es un sitio donde tú pegas un SVG, por ejemplo, este, ¿no?
Lo pegas aquí.
Ah, vale.
Me dice que no es un SVG por culpa de esto.
¿Cómo que no es un SVG?
Si lo estoy viendo aquí.
Me dice, no es un SVG.
No es un SVG.
¿Qué hay aquí que no es un SVG?
Que no le gusta.
¿Hay algo aquí que no le gusta?
Ahora.
Vale.
El problema es que fijaos aquí que hay un montón de features y hay una que es un poco peligrosa,
que es la que digo que esta.
Y esta hay que desactivarla.
Claro, ocupa un poquito más, pero es que es necesario, porque si no la lia a esparda.
¿Vale?
Pero para que lo tengáis en cuenta, ¿vale?
Que el viewbox no hay que quitarlo nunca, porque si no los iconos no son...
No se pueden redimensionar.
¿Vale?
Entonces esto lo dejamos por aquí.
Ya tendríamos este.
El index, bla, bla, bla.
Vale.
Lo que vamos aquí en un momento a hacer estos...
¿Qué vamos a hacer con estos componentes?
Porque estos van a ser componentes y no tiene sentido que estemos repitiendo aquí constantemente.
Podemos poner aquí socialPill.
Voy a llamarle socialPill.
Yo qué sé.
Y aquí vamos a poner esto, esto por aquí, esto por acá.
Ahora, ¿qué vamos a poner aquí?
El slot, que nunca me acuerdo.
Es let, name, icon.
¿Vale?
Esto por aquí.
Y aquí el slot normal.
Nunca me acuerdo si...
A ver, no tiene mucho sentido.
Vamos a dejar el slot normal y le pasaremos las dos cosas así.
Y aquí es donde vamos a ponerle los estilos.
Entonces, ahora aquí ya podríamos utilizar el socialPill este.
¿Vale?
Y ya le pasamos todo lo que tendría que tener dentro.
Esto ya lo podemos quitar.
Esto lo podemos repetir unas cuantas veces.
De hecho, aquí es donde vamos a poner los estilos.
Vamos a hacer que sea rounded.
Creo que está full.
Vamos a poner borde.
Borde grey.
Yo qué sé.
Bueno, claro.
Vamos a poner que sea white.
Porque tiene que ser como white.
Flex.
¿Vale?
Y aquí justify center, items center, ¿vale?
Gap x2.
Aquí esto, esto así.
Igual hemos pasado aquí un poquito.
¿Vale?
Igual un poco menos.
Bueno, claro.
Es que el px no se ve muy bien.
Vale.
Por ahí irían un poco los tiros.
Ahora lo que necesitamos aquí, que aquí hemos puesto esto, pero bueno.
No pasa nada.
Vamos a poner que esto sea nap.
Que ya hemos visto que se puede utilizar un nap sin la lista desordenada, según eso.
Aunque, bueno, me imagino que aquí tendría sentido, ¿eh?
La lista desordenada.
Vamos a poner aquí que esto sea flex.
Vamos a poner que el gap sea de 2.
Vamos a ponerle otro.
Ah, claro.
Aquí necesitamos el href.
Porque si no, aquí siempre va a ir a esto, ¿vale?
Entonces, vamos a poner aquí el href.
Esto por aquí.
Y también este href lo sacamos de astroprops.href.
O podemos hacer otra vez lo mismo, ¿no?
Que sean todas las props de astro.
Que las meta por aquí.
Normalmente, esto tendría que ir a otro sitio.
No, pero no referer.
¿Vale?
Aquí ponemos el github.
Y aquí sí que tenemos el github icon.
Vamos a cambiar el nombre a github icon.
Para que sepamos que es un icono.
¿Cuál más creéis que tiene sentido que pongamos?
Hostia.
¿Veis?
Aquí le pasa un poco lo mismo, ¿no?
View box.
Tenemos que añadirlo.
El problema de este, este es un poco más peligroso.
Porque si os fijáis, ¿ves?
Este, la altura es un poco diferente.
De hecho...
De hecho, no está.
Ah, vale.
Le falta aquí el astro.props para las clases.
Y otro problema que tiene es que tiene aquí el fill, que este fill no lo necesitamos.
Y así ya tenemos el color directamente.
¿Vale?
Le faltaría esto, un poquito de esto.
Para que esté un poquito más así.
Y podríamos hacer también que tenga un poquito de...
O un poquito menos, a ver.
Algo así.
¿Vale?
Le ponemos el hover que escale ahí un poco.
Con un transition.
Y el hover también hacemos que sea un poco hover...
VG white 10.
¿Vale?
Y ya está.
¿Vale?
Y aquí tendríamos ahora el enlace para GitHub.
Y os leo para que me digáis qué otro creéis que debería tener esto.
¿Vale?
Les operamos un poco.
Un poquito más.
No tanto.
Vale.
Pues por ahí van los tiros.
Bueno.
Bueno.
Vamos en ello.
Estamos en ello.
Luego cambiar su estilo será un dolor de cabeza.
¿Por qué?
Porque...
Bueno, porque no te gusta Tailwind.
No sé qué, no sé cuánto.
A ver.
¿Qué es lo que puedes hacer para que no sea un dolor de cabeza?
Si mucho te preocupa, aparte de utilizar Headwind, que no está mal.
Una cosa que puedes hacer es agruparlos más o menos.
¿Vale?
O sea.
Lo digo por si realmente es una preocupación o es solo odio que tienes de...
Que no pasaría nada, ¿eh?
Que si odiáis a Tailwind está bien.
Pero una cosa que puedes hacer es un poco agruparlos, ¿no?
El rounded, por ejemplo, tiene sentido con el borde.
Y aquí los hovers, pues los puedes poner todos juntos.
Poner los hovers.
Y por otro lado puedes tener todas las animaciones.
Las puedes tener aquí.
Y a ver, la verdad.
Con algo así tampoco es que sea tan, tan difícil, ¿eh?
Yo no odio.
No lo entiendo.
Bueno, pero al final lo vas a creer, ¿eh?
Al final lo vas a creer.
La cuenta de Steam.
¿Te imaginas?
Me gusta mucho cómo está quedando.
Gracias, gracias.
Más o menos.
A ver, está quedando limpio, sencillo, fácil.
Pero bueno.
LinkedIn, GitHub.
Vamos a darle un poquito más de separación aquí.
Que me parece que le vendría bien.
Y a ver, aquí tenía el GitHub, que yo creo que no tiene mucho sentido.
LinkedIn, YouTube puede tener sentido.
El correo.
El correo puede ser chulo.
La verdad.
El correo puede ser chulo.
Y además me gusta el detalle de que pongo aquí esto.
Y aquí sí que vamos a buscar en Tablet Icons.
Vamos a buscar un mail.
Y podríamos buscar un mail así que sea, ¿no?
Esto.
Como para enviar directamente el mail.
Bueno.
Aquí lo que hay que tener cuidado con este tipo de cositas.
Mail Astro.
Mira, fijaos.
Esto es una cosa que no me gusta de Tablet Icons.
Tablet Icons, que es una caráloga de iconos increíble.
4.900.
O sea, espectacular.
Está muy chulo por diferentes cosas.
Y una cosa que está muy chula es el stroke.
Porque los tienen más finitos.
Y esto es importante para hacer que los iconos tengan sentido con tu fuente.
Pero bueno.
Eso no es lo que te vengo a hablar.
Lo que te vengo a hablar es que no me gusta que tengan las clases.
No tiene mucho sentido que te venga la clase.
Es una cosa que no me gusta.
Pero por lo demás, sí que podemos ver.
¿Ves?
Que tiene el Viewbox.
¿Por qué?
Porque es importante.
Y luego fíjate que no tiene ningún color puesto a mano.
No tiene ningún color.
Siempre tiene el current color para que siempre se habitúe.
O sea, adecúe al que tengas puesto justamente en tu texto.
Así que mail.
Vamos a poner aquí mail icon.
Tu, tu, tu, tu.
Mail icon.
Mail icon.
Vale.
Ay.
Este no es mail icon.
Esto es mail.
Y aquí tendríamos el mail icon.
Y al menos así, pues ya tendríamos...
Iríamos por aquí.
Bueno.
No está mal.
No está mal.
Ya tenemos ahí un poquito de alguna cosica.
¿Vale?
Para darle un poquito de arreglo a esto, una cosa que podemos hacer aquí es que en el
index, en el layout, ¿veis el título?
Pues aquí, importante.
Porfolio de Midudep.
Desarrollador y programador web.
¿Por qué desarrollador y programador se significan lo mismo?
Bueno, pues para aprovechar las palabras clave ahí a saco, ¿eh?
Desarrollador y programador web con 15 años de experiencia.
Ya no haría más, ¿eh?
Ya está.
No hace falta poner más.
También le podríamos poner un description.
¿No?
Y aquí, en el description, astro description, lo quitaríamos aquí.
Astro punto...
Mira, lo podemos poner aquí si queremos, ¿eh?
Description.
Esto es los tipos, pero al menos aquí ya podemos poner el description.
¿Vale?
Description, description.
Y aquí pone la descripción que queramos.
Contrata a Midudep para que...
Bueno, pues ya está.
Y al menos, pues ahora arreglamos el favicon.
Pero al menos ya tenemos el título.
Esto del título es súper importante y muchas veces se nos olvida.
Porque me encuentro algunos porfolios que vas al porfolio...
Ya, espero, quiero pensar que no vamos a entrar a uno y lo voy a ver, ¿eh?
Pero muchas veces veo que se os olvida poner el título.
Y a ver, a lo mejor no es tan importante por cuando...
Bueno, este no está mal.
Ram Z porfolio.
Bueno, algo es algo.
Pero Mobile Web Developer...
Ahí está muy...
O sea, no se diferencia absolutamente nada.
Es una pestaña como que sería demasiado general.
Pensad al menos en la pestaña de nuestros usuarios para que sepan diferenciar que realmente está en nuestra página, ¿no?
Si...
A ver, esta.
Yo no puedo poner...
Bueno, este también le ha puesto al menos algo.
¿Vale?
Pero es que hay algunos que no me ponen absolutamente nada.
Que le dejan el título por defecto y este tipo de cosas.
Bueno, no está mal, no está mal.
Veo que lo estamos cambiando, ¿eh?
¿Sabías de la clase size?
¡Ay, es verdad!
Es que es nueva.
Es verdad.
Gracias por el recordatorio.
Es verdad, amigos.
Hay una nueva clase.
Hay una nueva clase.
Fijaos.
Cuando tenéis esto, ¿no?
El ancho de 12 y el alto de 12 podéis hacer size 12.
Es verdad.
Se me había olvidado.
Se me había olvidado porque, claro, está nueva.
Entonces podéis hacer esto.
Podéis hacer que cada vez que se repita, por ejemplo, todos estos, ya no hace falta que pongáis dos veces.
Sino que podéis poner size 6 y eso significa que tanto el alto y el ancho va a ser el mismo.
Gracias por recordármelo.
No me acordaba.
Es nuevo de Tailwind de la 3.4.
Es nada.
Es de acá de salir.
La carpeta de icons debe encontrarse dentro de components.
No es obligatorio.
No es obligatorio.
Yo lo he puesto ahí porque pensaba que así íbamos a tener el autocomplete.
Pero ya ves que no.
Ya ves que no.
No sé por qué.
Vamos con esta parte.
Aunque yo os voy a decir una cosa.
A mí no me gusta mucho.
A ver, últimos proyectos.
Así, directamente.
No está mal.
Pero yo creo que si dices que tienes 15 años de experiencia, lo mejor que puedes poner al principio.
¿Cómo puedo escribir así en todo lo seleccionado?
En todo lo seleccionado.
Seleccionando.
Seleccionas.
Control-D.
Control-D.
Y ya está.
¿Has visto?
Esto es un tip de producción.
O sea, para ser productivo, muy importante.
Muy, muy importante.
Entonces, yo lo que haría en algo así, en Flowbyte, de nuevo, Flowbyte es que es la hostia.
Me encanta, me encanta Flowbyte.
Porque además los estilos, aparte que los puedes cambiar, obviamente, están muy bien.
Entonces, yo lo que os diría es que si por lo que sea tenéis que poner algo y tenéis experiencia, yo lo primero que pondría sería la experiencia.
La experiencia es la clave.
A ver, no son la hostia tampoco, pero bueno, este no está mal.
Este está bien.
Me gusta.
Entonces, yo qué sé.
Podemos poner aquí en Components, Components, Experience.astro.
¿Vale?
Hacemos un pequeño componente.
Vamos a copiar todo esto.
Lo pegamos aquí, como se verán mañana.
Vamos a hacer también Experience.item.astro para tener el componente de Experience.item.
Y así podemos separar esta parte de aquí.
¿Vale?
Sería todo esto hasta el lead.
¿Vale?
Todo esto.
¿Vale?
Pues ya teníamos aquí el item.
Y así lo que podemos hacer aquí es que podemos crear un array, ¿no?
Const Experience.
Y aquí un array.
Y vamos a ver todo lo que necesitaríamos.
Por un lado, vale.
Muy bien, GuijacoPilot.
Esto es lo que más me gusta de GuijacoPilot.
Es el hecho de que sabe extraer muy bien la información, ¿sabes?
Sin necesidad de preocuparte.
Y fíjate que me ha extraído los títulos, la descripción, todo, todo.
O sea, tremendo.
Me encanta.
Eso es lo mejor.
Bueno, sí que veo que el link también, aunque el link lo ha dejado vacío.
Pero lo bueno de esto es que en este caso, como este sí que le hemos puesto aquí el link.
Aquí le hemos puesto el link.
Vale.
Pues, ¿qué podemos hacer ya?
Pues todo esto lo quitamos.
Todo esto, este...
Bueno, vamos a hacerlo así.
Hacemos el map experience.map y por cada experience, experience, lo que vamos a hacer es renderizar un link.
Y en el link vamos a tener el experience item.
¿Vale?
Experience item.
Y que le vamos a pasar todo el experience.
Así, todo esto que tenemos aquí, que obviamente era un HTML muy bestia, lo podemos quitar.
¿Vale?
Y ahora, ya cambiando solo este archivito de aquí, deberíamos ver aquí las diferencias.
Claro, tenemos que pasarle por props.
Por props esto es como React.
Como veis, aquí le estamos pasando todo el objeto experience, que sería esto, el date, el title, el description.
Así que aquí tenemos que recuperar el title, el description, el link y el date.
¿Vale?
Esto lo sacamos de astro.props y lo podéis tipar, que esto está muy chulo.
Si por lo que sea queréis que tengas tipos, pues lo que puedes hacer es export interface props.
Y puedes decir, vale, pues el title es un string, link string y tal.
Y así ya los tenéis tipados.
Automáticamente, solo exportando la interfaz de props, no sé ni siquiera si hace falta exportarla.
No hace falta exportarla.
¿Vale?
¿Veis?
No hace falta exportarla.
Y así los tenéis tipados.
Y ya aquí, pues cambiamos.
Esto, por ejemplo, sería el date.
Esto, por ejemplo, sería el title.
Esto sería la descripción.
Description.
Y esto sería el link en el caso que tuviéramos.
Hacemos un renderizado condicional.
Aquí metemos todo esto.
Esto, por aquí.
Y en este, vale, saber más.
Esto va a ser opcional, ¿eh?
Esto va a ser opcional.
Y aquí tendríamos el link, en el caso que venga.
Y con esto.
Ah, mira, espérate, que hay algo que no me gusta.
No se puede asignar porque...
Ah, porque el link puede ser undefined, ¿vale?
¿Ves?
Por eso puede ser útil.
Ah, pues sigue sin gustarle.
Ah, no, ya está.
¿Vale?
Y ahora ya podemos aquí tener otra sección que sea experience.
Toda la experience.
No hace falta que le pasemos las props.
Lo podríamos hacer para recuperarlo de otro sitio y tal.
Pero con esto ya, obviamente, los estilos no van a estar muy para allá.
¿Vale?
Pero más o menos ya empezamos a tener algo por aquí.
Viendo esto, ya vemos que las secciones, esta sección se repite.
O sea, lo que es el ancho.
Fíjate, esta sección de full, no sé qué, no sé cuánto.
Pues podemos crear un componente que le llamamos section, por ejemplo.
O container incluso.
Container.
Porque total, eso va a ser...
Mira, vamos a poner section container.
Vamos a llamarle section container.
Section container.
Y así lo que podemos hacer, esto, ya en lugar de repetirlo constantemente,
ponemos aquí el slot y lo que hacemos es cambiar esto por el section container.
¿Vale?
Section container.
Pa, pa, pa.
Section container.
Y al menos así ya podemos utilizar todo el rato esto sin necesidad de duplicarlo.
Y si alguna vez queremos cambiar algo, pues lo cambiamos y ya está.
Vale.
Aquí vamos a cambiar una cosa.
Aquí esto tenía que ser mínimo.
¿Vale?
Para que se vea bien.
No sé por qué sale rayado, pero por qué sale cuadrado esto.
¿Sabes?
Es que no entiendo.
Si...
No entiendo por qué sale esto cuadrado.
O sea, entiendo, entiendo, entiendo.
¿Veis que sale eso así?
¿Pero por qué?
¿Por qué sale así?
O sea, es que me da la sensación que es algo visual.
O sea, que no es que el body ocupe eso.
¿Sabes?
¿Ves?
No entiendo, no entiendo, no entiendo.
Como raro.
Es como algo del render.
Me da la sensación que es algo del renderizado.
No sé por qué.
No sé por qué.
¿Lo veis?
No sé si es que es cosa mía o me lo estoy imaginando.
Section container main.
Bueno, a ver, no vamos a hacer mucho más.
Tampoco creo que lleguemos a más.
Bueno, ahora arreglo esto para que se vea correctamente.
Vamos por partes.
Primero, la separación es demasiado bestia.
En este de aquí, en este.
Ah, porque el section container este, le hemos puesto este padding, no sé qué, que le hemos puesto mucha separación.
Vale.
Por ahora lo vamos a quitar y ahora lo arreglaremos.
Ahora lo pegamos un poquito mejor.
¿Qué es lo que pasa?
Lo que pasa es que el header, a lo mejor...
A ver, tenemos diferentes opciones.
Una, que tengamos más estilos.
O sea, que tampoco pasaría nada.
O sea, podríamos tener estos estilos.
Y luego pasarle también los de astro.props.class.
O sea, pasarle también el resto.
Aunque token inesperado...
Token inesperado...
A ver...
Class, class name, astro props...
Vamos a poner esto por aquí.
Ah, coño.
Es que le he puesto los tres puntos y era innecesario.
Pero bueno, da igual.
Así se lo sacamos correctamente.
¿Vale?
Y entonces, al que lo necesite,
que en este caso el principal lo podríamos necesitar,
le vamos a poner el padding este que habíamos visto.
Por arriba...
Vamos a hacer que por arriba sea de 44,
pero por abajo que sea de la mitad.
¿Vale?
Para que no tenga tanta separación.
Algo así.
Un poquito más, quizás.
No, tampoco tanto.
Tampoco tanto.
Algo así.
Ahora lo que falta también es el título.
Porque fíjate que aquí tiene un título,
que está bastante chulo.
Entonces, vamos a hacerle el título a este.
Vamos a poner aquí H2, experiencia laboral.
Vamos a hacer que esto sea bastante grande.
4XL, por ejemplo.
¿Vale?
Vamos a hacer que tenga un font volt.
Vamos a hacer que sea más pequeñito.
Y que sea semi-volt.
¿Vale?
Experiencia laboral.
Y que esto le dé bastante separación abajo.
A lo mejor no tanta.
A lo mejor un poquito más.
¿Vale?
Experiencia laboral.
Y para que le dé ese toquecito, vamos a ver aquí.
Experience.
Experience o X.
Vale.
A ver si encontramos un icono que nos guste.
Algún icono que nos guste que sea de experiencia.
A ver.
Work.
Si busco work.
Work.
Sweet case.
Una maleta.
Muy bien.
Muy bien.
Esta no, ¿no?
Esa no.
Esa no.
A ver.
Sweet case.
Esta.
Vale.
Esta tiene buena pinta.
¿Qué os parece esta?
Esta tiene buena pinta, ¿no?
¿Sí?
Yo creo que está bien.
Venga.
Copiamos.
Y aquí en iconos.
Briefcase.astro.
Pegamos esto.
Quitamos esto.
Astro.props.
Vale.
Le pasamos todas las props.
Y aquí.
Vamos a hacer aquí.
Esto por aquí.
Esto por acá.
Y aquí el briefcase.
Con el class.
Le ponemos el size de 6.
Vale.
Y a ver cómo va quedando esto.
Vale.
Flex.
Gap x2.
Item center.
Vale.
Yo creo.
¿Veis?
Esto es lo que os comentaba.
Yo creo que en este caso.
¿Veis que este es más gordito?
Y este es más finito.
Esto nos pasa a veces.
Que hacemos uno finito.
Otro no sé qué.
Yo creo que en este caso.
Este debería ser más gordito.
Y de hecho incluso puede ser que un poquito más grande.
Porque si no queda un poco raro.
No sé si hay 7.
Sí.
Queda un poco raro.
Y es que de hecho este debería ser el doble.
Debería ser el doble.
Vamos a poner un poquito más de separación.
Vale.
Y ahí lo tendríamos.
Y ahora vamos a poner los colores estos bien.
Que están regulinchis.
Pero bueno.
Al menos.
Al menos ya va pillando un poquito más de...
Vale.
Voy a cambiarlo de arriba.
Que me da un poco de tiricia.
El hecho de que está en inglés.
Y todavía la página no está en inglés.
Entonces vamos a poner inicio.
Sobre mí.
Proyectos.
Vale.
Experiencia.
Vale.
Vamos a poner aquí experiencia.
Proyectos.
Y contacto.
Lo voy a poner con un hash.
Sobre mí.
Porque luego.
Vamos a ponerlo así.
Inicio.
Esto debería ser top.
Vale.
Y vamos a aprovechar para.
Que cuando le demos a uno.
Nos lleve al container correcto.
Entonces.
Aquí.
Aquí que teníamos el class name.
También le podríamos poner la id.
Y la id.
Se la vamos a pasar aquí.
Vale.
Para que así.
Cuando le demos a uno.
A cada uno.
Por ejemplo.
Tenemos aquí.
El section container este.
Y este.
Este sería.
Bueno.
Este no sería nada.
O sea.
Que esté nada.
Pero este.
Este sí que sería experience.
Experience.
No experiencie.
Experience.
Vale.
Y ahora al menos.
Cuando.
Bueno.
Todavía no.
Porque es demasiado.
Pero.
Si hago esto.
Algo así.
Para que quede así muy bestia.
Cuando le dé aquí.
Ah.
Es que he puesto experiencia.
He puesto experiencia.
Vale.
Pero cuando le demos aquí.
Vale.
Ya irá al siguiente.
Para hacer.
Que esto se mueva.
Lo que vamos a hacer es.
En el index.
Punto astro.
Vamos a hacer algo.
En el index.
No.
En el layout.
Vamos a poner aquí.
Que el scroll behavior.
Sea smooth.
Pero vamos a poner.
Que.
Si.
No.
Prefers.
Que no.
Prefers.
¿Cómo se llama esto?
Ah.
Prefers.
Disable.
Animation.
Esto.
Reduce.
Prefers.
Reduce.
Motion.
Vale.
Lo que vamos a hacer es.
Ah.
Mira.
Esto.
Que está en el HTML.
Si el usuario.
Por lo que sea.
Ha desactivado las animaciones.
Las ha reducido.
Vamos a poner.
Que no haga la animación.
Porque la animación.
Puede ser un poco rara.
Para la gente.
Que ha desactivado las animaciones.
Vale.
Entonces.
Tenemos la animación.
Pero.
Si por lo que sea.
El usuario.
Te ha desactivado las animaciones.
No verá la animación.
Vale.
Al menos ya teníamos esto.
Luego lo que podemos hacer.
Hostia.
¿Qué le ha pasado esto?
Se ha ido a la olla.
Ahora.
Luego lo que podemos hacer.
Es que el header también se quede.
Y todo esto.
Pero al menos ya teníamos esto.
Vale.
¿Quién desactiva eso y dónde?
Muy sencillo.
Esto lo desactiva mucha gente.
Mucha más gente de lo que crees.
Yo de hecho lo he tenido desactivado durante mucho tiempo.
Y lo he vuelto a activar.
Porque básicamente.
Para ver temas de estilos y tal.
Pero en temas de accesibilidad.
Hay bastante gente que le marean.
Las miles de animaciones que pone la gente.
Y las puede desactivar.
No sé si es en pantalla.
¿Ves?
Aquí lo tendríamos.
Reducir movimiento.
Si yo le doy a este reducir movimiento.
¿Vale?
Vas a ver que ya no lo hace.
Entonces.
Por eso es importante.
Porque si no.
Lo vas a hacer.
Y hay gente que la puede marear.
Hay gente que se marea con los movimientos que hacéis.
Y hoy en día.
Que mucha gente se pasa con las animaciones.
Pues.
En Windows también se puede desactivar.
No hay ningún tipo de problema.
También se puede desactivar.
Obviamente.
Así que no te preocupes.
Vale.
Bueno.
Va pillando.
Va pillando forma.
Va pillando forma.
Lo que nos falta aquí un poco.
Es estos estilos.
Que están ahí un poco de aquella manera.
Vamos con el Experience.
Voy a cerrar aquí un montón de cosas.
Nos vamos al Experience.
¿Vale?
Febrero 2022.
Marzo 2022.
Vale.
Esto es un error.
Esto es un error.
Lo que hay que hacer siempre es más bien al revés.
Siempre arriba hay que poner los que sean más nuevos.
Actualmente.
Por ejemplo.
Y aquí puedes poner creador de contenido.
Creador de contenido.
Que es lo que estoy haciendo ahora.
Pues podemos hacer aquí.
Divulgo sobre programación y desarrollo web en diferentes plataformas.
¿Cómo se dice?
Considerado.
Bueno.
Mira.
Esto no sería enfocado.
Bah.
No.
Aquí lo que pondría es algún logro.
¿No?
De programación.
Podría poner.
¿Cómo se dice esto?
Considerado.
No.
Galardonado.
Galardonado.
Como mejor creador de contenido.
De habla hispana.
No.
De habla no inglesa.
En 2022.
Y mejor creador o mejor comunidad en 2023.
Por guija.
Por decir algo así que sea bastante fuerte.
Y yo que sé.
Aquí podríamos poner marzo.
No.
Esto sería septiembre del 2022.
Y aquí.
Principal.
Frontend.
Engineer.
Es verdad que faltaría la información de la empresa.
Responsable.
Responsable de la plataforma.
Y sus.
Plataforma.
Componentes.
Y utilidades.
Para la creación.
Y desarrollo.
De aplicaciones web.
Lo ideal aquí.
Que sería.
Pues sería poner.
Mejora de un.
30%.
En la entrega.
De software.
De entrega de software.
Implantación.
De medidas.
De.
No.
Acesión de rendimiento.
No.
De.
Integración.
Continua.
Y despliegue.
Con.
A-B testing.
En más de 15 equipos.
Yo que sé.
Ah.
No me acuerdo.
Podría buscarlo en número.
¿No?
¿Vale?
Y ahora.
Ta-ta-ta.
Creación de contenido.
Vamos a poner aquí.
Buscamos aquí esta barrita.
Twitch.
Vamos a buscar barritas.
Para no hacer todo.
Aquí lo ideal sería.
Yo creo.
Tenerlo separado.
Adivinta Spain.
Podría poner más.
Pero bueno.
Para que nos hagamos un poco la idea.
Ok.
Vamos a poner aquí bien los colores.
En el experience.
Este.
Item.
Que veis que aquí.
Claro.
Tenemos el modo dark.
Y el modo no dark.
Pero no están funcionando muy bien.
O sea.
Este no tiene pinta de ser muy dark.
Entonces.
Vamos a hacer el divulgo.
Esta es la descripción.
Text gray.
Es que.
Este text gray.
O sea.
Se ve fatal.
¿No?
No sé.
¿Por qué no?
O sea.
Me está pillando mal.
O sea.
Me está pillando este.
¿No?
Que me está pillando solo el normal.
Bueno.
Pues lo vamos a arreglar.
Vale.
Podríamos ponerle.
¿Ves aquí que pasa esto?
Ahora han sacado el text pretty este.
Que lo ha arreglado un poquito.
Este está bastante chulo.
Este no lo habéis visto todavía.
Cuando os quedan textos muy largos.
A veces en textos muy largos.
Queda una palabra suelta.
¿Vale?
Que sale aquí.
Dibulga no sé qué.
Y veis que sale una palabra suelta.
Pues ya conocíais seguramente el text grab balance.
Que ese es interesante para los títulos.
Pero hay otro que es justamente para los textos.
Para los párrafos.
¿Vale?
Entonces.
Para los párrafos.
Lo que podéis hacer es utilizar el text pretty.
Text pretty.
Que es text grab pretty.
Y en este caso.
¿Veis?
Aparece una palabrita más.
¿Por qué hace el...
¿Cuál es la diferencia entre el pretty y el grab?
El grab es muy agresivo.
Bueno, agresivo.
Veo que ni agresivo ni nada.
No es nada.
No hace nada.
No hace nada en este caso.
No sé por qué.
Pero debería...
No sé si es porque a lo mejor no funciona.
Porque tiene demasiadas líneas.
Pero con el pretty sí que funciona.
A ver.
Ah, es que es text balance.
Ah, text grab balance.
Claro.
Con el balance.
¿Veis?
Es demasiado agresivo.
Y puede hacer que quede como demasiado bestia.
A ver.
No queda mal.
Yo creo que no queda mal.
Pero puede ser que moleste un poco.
Entonces.
Tened en cuenta la diferencia.
El pretty es un poquito más sutil.
Porque solo añade una palabra que hace que quede un poquito mejor.
Si lo queréis balancear más.
Pues un poquito más agresivo.
Para quitar este color también.
Que me parece un poco muerto.
Este grey.
Vamos a ponerle el yellow 200 que habíamos puesto antes.
Que creo que aprovechando que sale por aquí.
Aquí le da bastante toquecito.
Vale.
Aquí podríamos ponerle.
Vamos a ponerle en el index.
O en el layout.
Vamos a ponerle el footer.
Vale.
Slot header.
Aquí vamos a poner un footer.
Vamos a poner un footer para que le dé bastante footer.
Class.
Vamos a hacer que tenga bastante separación.
Aquí va el footer.
Vale.
El footer.
Lo cargamos por aquí.
Básicamente para que aparezca por ahí el footer.
Vale.
Y ahora ya tengamos una separación más.
Vale.
Pues.
¿Qué más?
A ver.
Yo aquí lo veo como un poquito.
Así es como venía.
Pero yo lo voy a separar un poco.
Por ejemplo.
Ajá.
Yo aquí esto lo separaría un poquito de arriba.
O sea, un poquito.
Tampoco tanto.
Vale.
Para que se vea mejor.
¿Qué estabas haciendo antes?
No sé qué.
No sé cuánto.
Dibujo sobre la opción.
No sé qué.
Aquí puedes poner saber más.
Yo qué sé.
Esto lo he puesto opcional.
Para dejarlo.
De dejarlo.
También es verdad que esto tan...
No se ve mucho.
Actualmente no sé cómo de importante puede ser.
Pero a lo mejor podemos jugar con un poco el azulito.
¿Sabes?
Algo más que gris.
Es que el gris.
Todo el rato gris.
Como que todo queda demasiado aburrido.
Y es un poco polémico.
Entonces darle un poquito...
Tampoco tanto a lo mejor.
Tampoco hace falta que se vea tanto.
De hecho podemos jugar más con la opacidad.
Para que no se vea tanto el azul.
Pero que sí que se vea algo un poco más...
Más divertidillo.
Que no otra vez el gris.
¿Vale?
Pues algo así.
Y ya podríamos seguir añadiendo.
Poner la experiencia laboral.
Y ya está.
Otra cosa que a mí al menos no me gusta mucho.
Es que esto no queda alineado.
¿Ves?
Que esto queda como aquí.
A mí esto yo creo que molaría que quedase aquí.
Claro.
Es que esto aquí ha quedado así.
Pero ha sido más por esto.
No sé.
Pero mi sensación aquí es que queda un poco raro.
El que esto esté aquí.
Yo lo tiraría un poquito para la izquierda.
O sea, para la derecha.
Perdón.
Porque me da la sensación que queda un poco raro.
¿Ves?
Aquí ha puesto un menos no sé qué del start.
Lo podemos quitar.
A ver.
Hostia.
No sé.
Pero este start.
O a lo mejor lo podemos tirar como pone.
Un absolute.
¿Por qué pone absolute todo?
Ah, no.
Pero este absolute solo es la parte esta.
O sea, solo es la parte esta de aquí.
Pero.
Time.
Claro.
O sea, deberíamos en todo caso mover esta parte de aquí.
Esta parte de aquí.
Y yo creo que con esto ya a lo mejor podemos hacer algo así.
En el 3.
Para que quede ahí un poquito mejor.
¿Vale?
Vale.
Pues ahí ya tenemos la experiencia laboral.
¿Vale?
¿Por qué no lo haces con Next.js?
Quiero aprender a hacer este tipo de webs en Next.
No tiene sentido hacerla con Next.
A mí me encanta Next.js.
Me encanta.
Me encanta Next.js.
Pero es como si a ti te encantase.
Es como si dijese.
Ah, es que me encanta un martillo.
¿No?
Y entonces tienes que atornillar un tornillo.
Y como te encantan los martillos.
Lo hicieses con un martillo.
O sea, un poco raro.
Entonces, es que una página así no tiene sentido hacerla con Next.js.
No tiene ningún tipo de sentido.
Con todo mi cariño, ¿eh?
Por ejemplo, ¿por qué no tiene sentido?
Pues porque con todo lo que hemos hecho.
Si tú haces un PNPM Run Build.
¿Vale?
Y esto al final.
Bueno, ahora estará chequeando lo que sea.
¿Vale?
Es que fíjate lo que nos ha devuelto.
Si es que nos ha devuelto.
Si vamos aquí en el dist.
Es que fíjate.
Es una página.
Que no tiene nada.
No tiene nada.
Esto lo hace con Next.js.
Lo mismo.
Y te ocupa JavaScript un montón.
No tiene sentido.
No tiene sentido que lo ocupe JavaScript.
A ver.
Te vas a Netlify Drop.
Y esta página que hemos hecho.
Vamos aquí.
Esta página.
Mira, el dist este.
Vamos a mostrarla en el Finder.
¿Vale?
Te haces así.
Y esta página.
Uno.
Cuesta cero euros.
Si es que esto cuesta cero euros.
Porque no hay nada más rápido que algo estático.
No tienes que poner nada de JavaScript.
Mira, ya está aquí.
Desplegada.
Ya tienes aquí desplegada.
Y es que.
Si esto es imbatible en rendimiento.
¿Para qué vas a cargar ya Next.js.
Con todo lo que necesitas.
Es que no tiene sentido.
No tiene sentido.
Esto va rapidísimo.
Sin JavaScript y sin nada.
O sea.
Es que no carga ni JavaScript.
Esto es porque es de las extensiones.
De hecho.
Mira.
No tiene JavaScript.
¿Para qué vas a cargar React?
No tiene sentido.
No tiene sentido.
Pone Lighthouse.
Bueno.
Igual Lighthouse no lo hemos mirado.
Igual nos da más sorpresa.
Navigation.
No sé qué.
Time span.
Snapshot.
Mobile.
Venga.
Claro.
Es que no hemos hecho responsive todavía.
Igual flipa.
Bueno.
100.
100.
A ver.
Es normal.
Es que es una página muy sencilla.
Es normal que nos dé 100.
Y podríamos mejorar el tema de las imágenes.
Que todavía ni las hemos optimizado ni nada.
O sea.
Que imagínate.
Está mal lo del mail.
Está mal.
Sí.
Está mal.
Porque no lo hemos arreglado todavía.
Pero bueno.
Que hay que intentar adecuar cada.
Utilizar cada framework herramienta.
Cuando tiene más sentido.
Y en este caso.
Pues no tiene sentido.
Que utilicemos Nexies.
En mi opinión.
En mi opinión.
No sé.
Si hay gente que le encanta utilizar Nexies para todo.
O tal.
Pero es que con esto también puedes utilizar React.
Lo que pasa es que puedes utilizar React.
Solo en aquellas partes que tengan más sentido.
¿Sabes?
Solo en aquellas partes que tengan sentido.
Pues lo haríamos.
Vamos a hacer un momento un poco responsive.
Un poco.
Tampoco vamos a volvernos locos.
Básicamente.
Para que no esté.
No esté rotísimo.
¿Vale?
Entonces.
Vamos a ver.
El LG.
¿Cuánto es?
T, t, t, t.
1040.
O sea.
Que tiene que ser a partir del XL.
Vamos a poner que esto sea full.
Al menos.
Esto nos vamos aquí al localhost.
4, 3, 2, 1.
Ok.
4, 3, 2, 1.
Al menos para que no se rompa.
¿Vale?
Ahí estaría.
Luego tendríamos el hola soy mi dudep este.
Hola.
Ey.
Soy mi dudep.
Que el problema que tendríamos aquí es que este text tendría que ser más pequeño.
¿Vale?
Tampoco tanto.
A lo mejor.
Y los paddings vamos a tener en el body, en el layout.
Vamos a poner que todo esto tenga un padding de 4.
Vale.
Ay.
Se me ha ido.
Vale.
Vale.
Ah, espérate.
Porque este.
En lugar de hacerlo aquí.
Claro.
En este sí que lo he puesto.
Pero en el main.
Vamos a ponerlo en main.
Class.
PX2.
O 4.
Vale.
Siempre pongan padding.
¿Vale?
Siempre pongan padding para que no quede todo ahí a fuego.
¿Vale?
Tendríamos que ir ajustando mejor la fuente esta.
Esta.
A lo mejor empezar 2XL.
O incluso un poquito más.
Yo creo que cabe.
O sea.
Va justito.
Pero bueno.
Por ahora dejamos así.
El MD.
Pues 4XL.
No sé qué.
Y así pues que vaya pegando un salto.
Un poquito más.
¿Vale?
Esta parte también tiene que tener un max width.
Porque tampoco tiene sentido que salga tan alargada de repente.
De hecho queda mejor ahí.
En ese momento que se queda con un ancho máximo.
¿Vale?
Y esto pues igual.
Vamos a evitar que como tiene el text grab.
Vamos a ponerle.
¿Cuánto pone por aquí?
384.
Nada.
384 es que es muy poco.
Vamos a poner 500 píxeles.
¿Vale?
Para que no pegue tanto.
Más.
Más.
700.
Vale.
700.
¿Vale?
Y aquí lo que vamos a hacer.
Pues lo mismo.
LG.
XL.
¿Vale?
Y también la separación.
Vamos a hacerla un poquito más pequeña.
Porque tiene como demasiada separación.
Así que esto lo hacemos con LG.
Y PB6.
¿Vale?
Un poquito más de separación.
Y luego incluso los botones los podemos hacer más pequeños.
Y obviamente que pegue un salto para abajo.
Que para eso tenemos que hacer un text grab.
Vamos a poner por aquí.
Flex grab.
¿Vale?
Y el gap este.
Al final lo haremos así.
Y podremos hacer que quede un poquito más pequeño.
O sea que esa social pills.
Que es un font base por defecto.
Podemos hacer aquí.
Que a lo mejor.
Esto solo sea a partir del eje.
LG.
PI1.
PX2.
¿Vale?
Un poquito más pequeños.
Bueno.
Hostia, claro.
Pero también los sizes.
También a lo mejor deberíamos hacer más pequeños también.
Bueno.
Da igual.
Text XS.
Text base.
¿Vale?
Un poquito más pequeños.
Y también.
Los tamaños de esto.
Hacerlos un poco más pequeños.
Bueno.
Un poquito.
Tampoco.
Ya os digo que tampoco vamos a hacer aquí el responsive.
Al detalle.
En un momento.
Pero al menos para que no.
No se nos rompa la página.
A la mínima de cambio.
¿Vale?
De hecho.
Claro.
Como esto lo hemos puesto en MD.
Esto lo hemos puesto en MD.
Pues aquí.
MD.
Y ya está.
Vale.
Pues al menos.
Ahí tenemos un poquito de responsive.
En un momento.
Joder.
Esta es la maravilla.
Esta es la maravilla.
Que muchas veces tenemos.
No creas como Mobile First.
No.
En este caso no.
Pero no por nada.
Sino que hay que tener en cuenta.
Que el diseño que teníamos.
El diseño que teníamos.
Era desktop.
Me hubiera gustado hacerlo Mobile First.
Si hubiéramos tenido el diseño Mobile First.
Pero si tenemos el diseño.
Desktop First.
Pues hemos tirado de ese diseño.
¿No?
Para empezar a crear a partir de ahí.
Entonces ya teníamos la experiencia laboral.
Podríamos seguir un poco lo mismo.
Con el tema de los proyectos.
¿Vale?
Lo mismo.
¿No?
Selection Container.
Aquí podríamos poner proyectos.
Vamos al Tablet Icons.
Tablet Icons.
Tu, tu, tu, tu, tu.
¿Qué podemos poner con los proyectos?
Perdón por interrumpir.
¿Por qué usas Brave y no Chrome?
Porque me da la gana.
Neon Teta.
Porque es el que me gusta.
Si a ti te gusta Chrome.
Pues usa Chrome.
O sea.
Básicamente.
Es que hay un montón de.
Hay un montón de navegadores.
¿Por qué uso Brave?
A mí me gusta el tema de los anuncios.
Pero seguramente con Ublog en Chrome.
Pues ya tendrás lo mismo.
Pero me gusta porque está integrado.
Ya directamente en Brave.
El tema de los anuncios.
No tienes que instalar una extensión.
Y a mí me di sensación que tiene mejor rendimiento.
Pero es que es Chrome por debajo.
O sea.
¿Qué más da?
¿Por las criptos?
No.
Las tengo desactivadas las criptos.
Las tengo totalmente desactivadas.
O sea que imagínate.
No utilizo el tema de las criptos.
Code.
Me parece bien.
¿Cuál os gusta de Code?
¿Este?
Este tiene buena pinta.
Puede ser este.
Este.
Puede ser el primero.
Que es el más.
La respuesta es porque te han pagado.
¿What?
Brave no me ha pagado.
Me encantaría.
Vamos.
O sea.
Ojalá me pagase Brave.
Sería lo mejor que me pasaría en el mundo.
Dios mío.
O sea.
A mí me encanta la gente que se cree que me pagan por todo.
¿Sabes?
Que utilizo Astro.
Te pagan por Astro.
Utilizo Nex.
Que te paga Nex.
Que hablo de React.
Te paga React.
Que utilizo Telwin.
Te paga Telwin.
Joder.
Me cago en la leche.
Ojalá.
Sería millonario.
Si todo lo que utilizo lo pago.
Lo que pasa.
¿Qué es lo que pasa?
Que obviamente voy a recomendar cosas que utilizo.
Es normal.
¿No?
Es que sería muy raro que recomendase cosas que no utilizo.
Y que hablase de ellas sin tener ni puñetera idea.
Entonces.
No.
No.
No es que no.
Ah.
Mira.
No es que me paguen.
Más quisiera yo.
O sea.
Os lo digo en serio.
Ojalá me pagasen.
Pero no.
No me pagan.
Code is not defined.
Code is not defined.
Otra vez con el code is not defined.
Vale.
Ya te lo pongo.
La leche.
Vale.
Proyectos.
Bueno.
Aquí irían los proyectos.
Para el tema de los proyectos.
Según el diseño.
Aquí.
Es un diseño un poco.
A ver.
Está chulo.
O sea.
Me gusta el diseño.
Aunque es bastante.
O sea.
Es bastante general.
Porque es.
Título grande.
Descripción.
Una pastilla.
Que ya ves tú.
Y luego una imagen.
Que no está mal.
No está mal.
O sea.
No me desagrada realmente.
Porque al final.
Muchas veces nos complicamos demasiado.
Vamos a poner projects.
Vale.
Vamos a poner componente projects.
Y siempre tenemos tiempo a darle una vuelta.
O sea.
Que lo podemos hacer.
Sencillote.
Vamos a poner aquí.
Const projects.
Ta.
Pa.
Pa.
El title.
Project 1.
Vale.
Descripción.
Lo de Mipsum.
Vamos a ponerle un link.
Con el proyecto.
El github también.
Github.
Vale.
Tututu.
Tututu.
Tututu.
Tututu.
Y podemos poner aquí.
El image.
Vale.
Y.
Los tags.
Vale.
Por lo que sea.
Este link.
Le falta aquí una coma.
Esto por aquí.
Esto por acá.
Y.
Vamos a ver.
El projects este.
A ver.
El projects.
Normalmente.
Podría ser un grid.
También.
Puede ser un grid.
Puede ser.
Lo que nos dé la gana.
Pero.
Vamos a.
Vamos por ahora.
A seguir.
Este estilo.
Vale.
El estilo que.
Que tiene aquí.
Así que.
Básicamente.
Vamos a hacer un projects.
Map.
Project.
De cada uno.
Vamos a sacar.
El article.
Vamos a poner.
De cada artículo.
Podríamos poner aquí ya.
Un h1.
Directamente.
Del artículo.
Porque.
Un artículo.
Podría tener un h1.
Pero bueno.
Hay gente que le puede volar la cabeza.
Así que vamos a poner.
Project title.
Project title.
Que pone.
Luego la descripción.
Que.
Es que.
No sé por qué.
Nos complicamos.
Muchas veces.
Con el tema de.
De las cars.
Y todo esto.
Y a veces.
Lo visualmente.
Más sencillo.
Es hacer algo así.
Sabes.
Podemos poner el lead.
Y aquí.
Pues todos los tags.
No.
A esto.
Lo vamos a quitar así.
Sino que simplemente.
Los tags.
Vale.
Voy a hacer esto.
Que seguro que mucha gente.
Se va a poner.
No.
Es que.
Por qué.
No lo estructura.
Si no sé qué.
Es que.
Para no repetir.
Project punto.
Project punto.
Vamos a hacer esto.
Y lo hacemos más fácil.
Por ahora.
Vamos a dejar el tag.
Aunque luego.
Lo podemos hacer un poco más complicado.
Para que justamente.
Podamos hacer alguna cosa.
Interesante.
Que aparezca el icono.
Que eso puede estar chulo.
Y luego la imagen.
En este caso.
La imagen la pone debajo.
Es verdad que es un poco raro.
Pero no me desagrada.
Aunque sea algo diferente.
O sea.
Eso le da como un toque.
El hecho de que sea diferente.
Así que.
Vamos a darle.
Nos encuentra.
El image.
Porque lo tenemos que sacar de aquí.
Vamos a poner aquí.
Captura.
De pantalla.
Pantalla.
Del proyecto.
Y aquí ponemos el image.
¿Vale?
Y ya está.
Y.
Ti ti ti ti ti.
Ya lo tendríamos.
La verdad es que.
Aunque sea sencillo.
Me gusta.
Porque es que.
Muchas veces.
Ya os digo.
Que hacemos unas cards muy raras.
Muy complicadas.
Y que a veces no es tan necesario.
Oye.
¿Esto se puede poner así?
Ah no.
Vale.
Que como ponía en rojo.
Digo.
Ostras.
Vale.
Pues ya tenemos el projects.
Vamos a hacer una cosa.
Experiencia.
Vale.
Esperaba.
No sé qué.
Y ha encontrado.
No sé cuánto.
Alguna cosa se me ha olvidado aquí.
Alguna cosa he hecho mal.
Por aquí.
En projects.
¿Qué he hecho aquí?
Project.
Título.
Uno.
No sé qué.
Esto.
Tiene una coma aquí.
Una coma acá.
Es que no sé.
Si es que esto necesita un fragment.
No creo.
Yo creo que.
O sea.
No en serio.
Es que nunca he hecho un.
¿Sabes?
Nunca he hecho una cosa así a saco.
Pero.
¿Sabes?
O sea.
Nunca he puesto.
No.
¿Ves?
No.
No necesita nada.
O sea.
Es algo que estoy renderizando mal.
A ver.
Que alguien habrá encontrado.
Alguien.
Alguien con su.
Con su sharingan.
Seguro que la ha encontrado.
Que he hecho mal ya amigos.
Línea 21.
Tú.
Tú.
Tú.
Tú.
Tú.
Ah.
Muy bien.
Muy bien visto.
Bien visto.
Muy bien.
Bien visto.
Vale.
Obviamente aquí tenemos que cambiar unas cuantas cosas.
Y además tenemos que hacer un poco de separación.
El section container.
Veo que.
Yo creo que le falta un poquito de separación.
Claro.
Aquí le hemos puesto un poco más.
Un poquito más.
Pero aún así.
Yo creo que por defecto.
No sé cuál es la rele...
O sea.
Cuál es el que va primero.
Pero vamos a intentar poner aquí algo así.
Vale.
Algo así.
Incluso podríamos.
Yo creo que los títulos que hemos puesto aquí.
Estos títulos.
Tú.
Tú.
Tú.
Tú.
¿Ves que aquí habíamos puesto section container h2 y habíamos puesto esto?
Esto.
Este título.
Estoy pensando si meterlo dentro del section container.
Estoy pensando meterlo dentro porque es un poco rollo, ¿no?
Tener que estar repitiendo.
Bueno.
Por ahora vamos a repetir, pero lo meteremos dentro, ¿eh?
Yo creo.
Y lo vamos a hacer un poco...
Es que por eso estaba pensando en meterlo dentro.
Para no repetir.
Para no repetir.
Vamos a hacer un poquito más grande.
¿Vale?
Experiencia laboral.
Actualmente.
Proyectos.
Aquí otra vez lo mismo nos ha pasado con el code.
Que lo hemos dejado con stroke.
¿Vale?
Vamos a poner con el 2 para que quede un poquito más grande.
De hecho, se ve como un pequeño, ¿no?
El código.
Vamos a tener que forzar ahí que se vea un poco más grande.
Porque mi sensación es que se ve un poquito más pequeño que este icono.
Queda raro.
Queda un poco...
¡Ah!
Es que no hemos puesto esto.
No hemos puesto esto.
Entonces, claro.
Ya está.
Ya decía yo.
Digo, ¿qué le pasa?
Es que no le estaba afectando eso.
¿Vale?
Vale.
Entonces, es verdad que igual es muy grande.
Pero, mira, vamos a hacer como que hemos hecho el proyecto de Feral.
¿Vale?
Imaginad que tenemos este proyectazo.
Que lo hemos hecho nosotros.
No lo ha hecho Feral.
Lo hemos hecho nosotros.
¿Vale?
Proyectazo.
Lo hemos hecho nosotros.
Entonces, vamos a ver cómo lo vendemos esto para que quede re chulón.
¿Qué podemos hacer aquí con las imágenes?
Yo creo...
Screenshot, no sé qué.
¿Y esto qué es?
El browser.
A ver.
No sé si hay un aspect ratio por aquí.
Yo creo que sí que me suena.
No hice...
¡Uy!
¡Qué chulo esto!
Dios.
¡Qué bonito!
La madre que os parió.
¡Qué bonito está!
Creo que en algún sitio había aspect ratio o me lo he inventado yo.
Output resolution.
No sé qué.
No sé por qué.
A ver, pues podríamos hacer este de aquí.
Este podría estar bien.
Es que hay algunos que son muy feos, tío.
Que sale ahí.
Esto es como demasiado...
Este no está mal.
Pero a ver.
Hay algunos que no me terminan de gustar mucho.
Pero mira, este con el noise...
Noise.
Algo así.
Claro, tendría que ser oscuro, ¿no?
Tendría que ser más rollo oscuro.
Algo así.
A lo mejor podría estar bien.
¿Cuánto el noise?
A lo mejor lo podemos quitar un poquito, ¿no?
Hostia, no sé por qué ha salido esta raya aquí.
Me da un poco de rabia que haya salido esa raya.
Pero no sé si es culpa mía que he apurado mucho.
A ver.
Vamos a hacer menos.
Voy a apurar menos.
A ver si así...
Mejor.
Mejor.
Vale.
Pues aquí tendríamos ya la imagen.
¿Sabes?
O sea, tampoco...
Le podríamos poner...
Ah, mira.
Aquí sí que salen los...
Aquí sí que salen.
Mira.
Pues ya está.
Algo así.
Algo así.
Podría ser.
Le podríamos quitar el browser, ¿no?
A ver.
¿Qué podríamos tener por aquí?
O ponerle otro estilo.
Oh.
Oh.
El de Chrome.
Oh.
You.
O el de screenshot.
Es que screenshot como que queda un poco más aburrido, ¿no?
Este es el que me gusta de browser en modo oscuro.
En browser dark.
Es que este está re chulón.
Este me gusta.
Me gusta.
Pues le voy a dar caña a este, ¿vale?
Le damos caña a este.
Y aquí nos vamos al public.
Public.
Vale.
Bueno.
Lo guardo por aquí mismo.
Obviamente esto habría que optimizarlo.
Porque esta imagen, pues, ocupa dos megas.
Luego pasa lo que pasa.
¿Ok?
Entonces, cosas que podemos hacer con esto.
Primero, vamos a ver bien la imagen.
Aquí tendríamos la actual y aquí la optimizada.
Solo ya con lo que estoy haciendo.
Solo con...
O sea, yo lo doy a guardar ya.
Y ya fíjate que estoy optimizándolo un 92%.
O sea, es una salvajada, tío.
O sea, salvajada no hacer estas cosas.
Pero si lo pasamos a WebP, un 96%.
Y no se nota la diferencia.
Y no se nota la diferencia.
Guardar.
Guardar.
¿Vale?
100K.
Bueno, 100K es más aceptable.
Y es que no se nota.
No se nota.
O se nota muy poco.
Fuera.
SVG, SVG, L.
¿Vale?
Entonces, ya tenemos aquí nuestra pedazo de imagen.
Que encima la podría haber hecho más pequeña también.
Pero bueno, no pasa nada.
No pasa nada.
Aquí nos vamos a...
En Public.
Vamos a poner aquí Projects, SVG, L.
¿Vale?
Tu, tu, tu, tu, tu, tu.
Vamos a ver.
SVG, L.
Beautify Library.
Más bonita la página de Feralp.
Vamos al Github, SubmitLogo, SVG, L.
¿Vale?
Y lo ponemos aquí.
La imagen en projects barra SVG, L.
Punto WebP.
Tecnologías que habrá utilizado.
Pues me imagino que NextYes, porque me lo conozco como si lo hubiera parido.
Está bastante...
Estoy bastante seguro que también habrá utilizado Shazen.
Obviamente Tailwind.
Tailwind también a saco.
Y Shazen.
No sé si tiene logo Shazen, pero...
Bueno, no importa.
Yo creo que con esto ya más o menos.
Y React.
Vamos a poner React también.
Vale.
Proyecto 1.
SVG, L.
¿Y qué pone aquí?
A beautiful library...
A beautiful library with SVG icons.
O logos ponía, ¿no?
Ta, ta, ta...
Mira, para no tener inventiva.
Ah, bueno.
La descripción es lo mismo que tienes en el título.
Esto no puede ser.
No puede ser.
Created from scratch.
Scratch.
Scratch.
Scratch.
Ta-da.
Toco.
Optimize for sound performance.
Algo así.
Vale.
Nos vamos a la página.
Nuestra página.
Que ya tengo tantas cosas que...
Vale.
Venga.
Vamos con la imagen.
Le ponemos aquí un rounded.
Rounded.
Vale.
Rounded.
¿Le podemos poner un shadow a esto?
¿Sabes?
Un shadow, shadow, white...
No sé.
Pero que tenga shadow blur...
No.
No se puede poner blur.
Claro.
Es que si no...
Shadow, shadow, white...
Y ponemos 10%.
¿20%?
Vale.
Pues...
No.
Menos.
10%.
Que casi no se note.
Que esté ahí, pero casi no se note.
Entonces, ya aquí...
Le ponemos el textx...
2xl...
Font...
Semi-volt...
Y para diferenciar...
Otra vez tenemos que poner el text...
Este.
Vale.
Un poquito de separación.
Esto...
Tu, tu, tu, tu...
Class...
Texts.lg...
O más...
Otra separación por aquí.
Un poquito más grande.
Y...
Le vamos a poner el text pretty.
Vale.
Vale.
Y aquí tendríamos ahora las píldoras estas.
Vamos a ver si me puedo copiar una.
Y me faltaría el enlace.
Que estoy pensando cómo podemos hacer el enlace.
Haz que los tags sean un objeto con name y link.
No.
Link no.
No.
O sea, link no.
Lo que sí que puede tener sentido es que...
Que tampoco.
Es el hecho de que sean una constante.
O sea, que nosotros tengamos tags.
Vale.
Y en los tags que aquí pues tengamos next.
Vale.
Y next que sea a su vez pues que tengamos el nombre nexties.
Que tengamos el color.
¿No?
Que esto puede estar interesante.
Como decir, vale.
O la clase.
Y decir, vale.
Cuando quiera enseñar nexties.
Vamos a hacer que sea black y text white.
¿Vale?
Y por otro lado, el icono.
Y que el icono sea pues el que tengamos de svgl.
Aquí next.
Pues este de aquí.
Y claro, esto tendríamos que sacarlo y tal.
Pero bueno.
Voy a hacerlo así.
Solo para que lo tengamos puesto ahí a mano.
¿Vale?
View box y tal.
Pero un enlace no.
Un enlace no.
Porque yo no quiero que la gente se vaya de mi portfolio.
A ver nexties.
Oye.
No es mi problema.
¿Sabes?
No queremos.
Entonces aquí lo que sí que podemos hacer es...
Vale.
Tags.next.
Esto sí.
Y lo mismo podríamos hacer con Tailwind.
Lo voy a hacer con estos dos solo para que lo veamos.
Y Tailwind CSS.
Entonces en lugar de poner a mano Tailwind Color...
Claro.
¿Cómo podemos hacer Tailwind?
Podemos hacerlo blanco.
Da igual.
White.
Y aquí lo podemos hacer sky...
A ver.
Tailwind Color logo.
¿Cuál es el color oficial de Tailwind?
Brand.
Brand.
A ver si nos dicen color.
Tu, tu, tu.
Assets.
Vale.
No me lo dice.
Pica.
Pillamos el color y ya está.
¿Vale?
Ya tenemos el color.
Y este color, pues lo pegamos aquí de una y ya está.
Y el icono, pues lo mismo.
Nos vamos a SVGL.
Tailwind.
Le robamos aquí el icono.
Viewbox.
¿Vale?
Hacemos lo del Viewbox para poder cambiarlo.
Y aquí, pues lo mismo.
¿Vale?
Tags.react.
Ahí, Tailwind.
Perdón.
Y así nos tenemos que acordar todo el rato del string, la cadena de texto, el icono y no tener que ponerlo a mano y ya está.
Y aquí en proyectos, cuando tengamos esto aquí, lo que sí que podemos hacer es directamente que esto sea un enlace.
O sea, un enlace.
Que sea un componente.
¿Vale?
Voy a cerrar todo esto que se os ponen nerviosos.
Se os ponen nerviosos.
Localhost.
4, 3, 2, 1.
Y nos vamos a Flowbyte.
¿Vale?
¿Qué le pasa a esto?
XMLNS.
¿Vale?
Esto es porque no acepta el XMLNS.
Este de aquí.
Este de aquí no le gusta.
Fuera.
¿Vale?
Ay, espérate.
Que igual también.
¿Será que no puede tener componentes aquí?
No creo, ¿no?
O se me ha olvidado una coma.
A ver, ¿qué he hecho mal?
Ya está.
Pero parece que hay algo.
Dice, expected that but found XMLNS.
Puede ser que no se pueda poner.
Me extrañaría que no se pueda poner.
Yo juraría que esto lo he hecho yo.
Yo juraría que esto lo he hecho fijo.
Estoy bastante convencido.
¿Sabéis si se puede poner JSX dentro?
¿Sabéis o no?
¿Saben?
¿Saben?
Yo diría que se podría, ¿no?
El map quedó bien.
El map quedó bien.
No, no.
Yo creo que es el tema...
Mira, el icono este me da la sensación.
A ver si quitamos este icono, por lo que sea.
Pero encontró width.
Me da la sensación que no se puede poner esta especie de JSX que tiene.
Me da la sensación.
¿Ves?
Se está quejando solo de esta parte.
No, string literal no.
String literal no, ¿eh?
String literal no.
Bueno, o sea, puede ser que se queje solo por esto.
O sea, decís que si hago esto, o sea, que se me queja.
Yo es que pensaba...
Tag.name, ¿vale?
No, no.
Es que me da la sensación que es un tema de sintaxis, ¿vale?
Un tema de sintaxis en el que esta parte de aquí no la...
O sea, que no detecta bien el JSX, o sea, el componente.
Otra cosa que podemos intentar, si no, pues es hacerlo componente.
Pero es raro esto.
Pero bueno, podemos intentar.
¿Sabes?
Que solo ejecutándolo, pues...
No, no, no.
Es que es un tema de sintaxis.
A ver, pues si no, por lo que decía, es un archivo aparte.
No hay otra.
¿Sabes?
O sea, next, next.js, next.js, next.js, next.js, así.
Venga, astro.
Pero claro, ¿puedo importar un componente entonces?
O sea, ¿puedo hacer que esto al menos sí decirle, vale, esto es next.js y me importas aquí next.js, next.js, from...
Que si no lo separamos en un archivo SVG ya está, no pasa nada.
Pero bueno, me hubiera gustado que se pudiera hacer esto.
Components, no.
Sin el components.
Entonces, icons, next.js, ¿sabes?
Esto yo creo que sí que se puede.
Vamos a hacer.
Vamos a verlo.
¿Sabes?
Como pasarle directamente...
O sea, es que se tiene que poder porque yo esto...
Vale, estas cosas las he hecho.
Entonces, se supone que ahora sí que podríamos obtener aquí el tag.icon.
Lo que pasa es que así no debería funcionar, ¿no?
Sino que esto debería ser así.
Tag.icon.
¿Vale?
Ahora sí que está ahí.
¿Vale?
Y otra cosa es el size.
O sea, aquí hay la pregunta del millones.
Si le paso aquí que esto sea rollo 4.
Y aquí le ponemos que le pasamos todas las props.
Vale.
Ahora sí que sí.
Ahora sí que sí.
Entonces, podemos ponerle aquí la pastillita.
Aquí vamos a ponerle.
Aquí en el class, pues tendríamos el tag.class.
¿Vale?
Ya empiezan ahí a verse cositas.
Vamos a poner esto en un template string para que básicamente podamos poner más cosas.
y ponemos aquí un flex, gap x2, en el rounded full, txs, para que sea un small.
Y aquí lo cerramos así.
Y vale, vale, vale, vale.
Aquí, class, flex, también.
Este un poquito más de separación.
Flex row.
Vale.
Bueno, esto es porque me ha pegado ahí el que le ha dado la gana, ¿eh?
Pero ahora lo arreglamos.
Vamos a hacer la pastillita.
2, px1.
El S igual es demasiado pequeño.
Vamos a poner el SM.
SM igual es demasiado grande.
El XS es como demasiado pequeño.
Uno es grande, el otro es pequeño.
Vamos a hacer esto un poco más grande.
Y esto más pequeño.
O sea, debería ser al revés.
Y es verdad que este azul casi no se ve.
O sea que vamos a meterle un poquito menos de separación.
¿Vale?
Vale.
Pues lo que necesitaríamos es el de Tailwind.
Así que vamos a poner un momento aquí.
Tailwind Astro.
Copiamos el de Tailwind.
Este no.
Aquí.
El bueno de Feralp.
Le ponemos el Viewbox.
Le ponemos el Astro.props.
¿Vale?
Y con esto...
Vale.
Pues ya empieza a quedar así.
¿Por qué esto...?
Ah, vale.
Es una...
Vale.
Es que lo parece.
Pero no es...
Es que digo...
¿Por qué se ve exactamente uno más grande que el otro?
Pero no es así.
Import Tailwind from icons Tailwind Astro bla bla bla.
¡Ojo!
¡Qué apachao!
¿Por qué el de Tailwind no se ve?
¿Por qué este no se ve el cabrón?
¿Por qué no se ve?
¿Qué le pasa?
A Feral sí que se le veía.
A ver...
SVG...
Parece que es como por el color.
No.
No, porque si no...
Se vería algo.
Pero me da la sensación que este no se ve...
Text...
No sé qué...
A ver así.
No, no se ve.
No se ve.
Bueno.
Voy a aprovechar para...
Para poner el color...
El color correcto.
¿Vale?
Este color que le habíamos pegado por aquí...
Me lo voy a pegar...
Y voy a pillar uno como más...
Algo así.
¿Vale?
Más oscuro.
Más oscuro.
Y vamos a hacer que el...
No, el texto no.
Vamos a hacer esto.
¿Vale?
Que este color esté aquí.
Y el texto, en todo caso, que sea blanco.
Porque creo que se va a ver mejor blanco...
Que no con un color ahí un poco random.
Y ahora, pues arreglaremos lo del ban.
A ver, que si no a las malas me pillo este.
A las malas me pillo este.
Que esto es un SVG.
Vamos al código fuente.
SVG oh my god.
Vamos por aquí.
Pasteamos.
Y aquí, importante, que no le quitemos el viewbox.
Que no sé qué...
A ver, ahí estamos.
Nos lo quitamos.
Nos vamos aquí.
Tailwind Astro.
Vale.
No sé.
No tiene mala pinta.
Astro.props.
A ver si este sí que le gusta.
A ver si este sí que le gusta.
Vale.
Vale.
Pues bueno.
Ya tenemos ahí todos los tags.
Le ponemos un poquito de separación.
Nos faltarían los enlaces.
Pero bueno.
No me desagrada ya que empieza a verse algo bonito.
Simple.
Simple, pero bonito.
¿No?
Vamos a poner un footer rápidamente.
Solo para que no tengamos ahí ese hueco de...
Aquí va un footer.
¿Vale?
A ver.
Sin derechos reservados que os conozco.
Sin derechos reservados.
A ver.
Uy.
Y este.
Sticky footer.
Ah, mira.
Sticky footer.
Qué bien pensado.
Ajá.
Bueno.
Hostia.
No me gusta ninguno, ¿eh?
No me gusta ninguno.
La madre me parió.
Bueno.
A ver.
Podemos poner este que al menos tiene un poco de gracia.
Y ya está.
Footer.
Vale.
Esto lo vamos a poner...
Quitamos el white este.
Vamos a hacer que sea black.
Pero con un...
Vamos a poner un blur.
Blur.
No.
Backdrop.
Blur.
LG.
Que total.
No se va a ver casi.
Pero bueno.
Y...
Casi todos los derechos reservados.
Casi todos.
Casi todos.
Vale.
Ta ta ta.
Aquí deberíamos poner todos los enlaces.
Sobre mí.
O contacto.
Bueno.
Que el contacto lo haríamos más adelante.
Por ahora lo dejamos así.
Vale.
Casi todos los derechos reservados.
Vamos aquí al final.
Vale.
Aquí en el max width.
Vamos a ponerle el mismo que el header.
O sea.
Toda esta cosa que habíamos puesto aquí.
Ta ta ta.
Esta.
Esta parte de aquí.
Vamos a ponerla también aquí.
Vale.
Incluso.
Vamos a hacer que tenga más separación por abajo.
Y vamos a hacer que esto...
Tenga...
Vale.
Y esto...
Vamos a hacer que sea amarillo.
Para que tenga ese toque amarillo que le hemos estado dando por todos lados.
Esto se está quejando aquí.
Pa pa pa pa.
Bueno.
Igual no hace falta que tenga tanto amarillo.
Como un poquito así.
Vale.
Vale.
Pues...
¿Cómo va quedando el porfolio?
¿Cómo lo veis?
¿Os está gustando o qué?
¿Os está gustando o qué?
Casi.
Casi todos los derechos reservados.
A ver.
Es minimalista.
Sencillo.
¿No?
Pero...
Pero bueno.
Esa es la idea.
Que hagamos algo ahí que cualquiera lo pueda adaptar.
Que al final se pueda añadir alguna cosa.
Proyectos.
Estos serían los proyectos.
Ya podemos ir dando...
Ir a uno u otro.
No sé por qué a veces falla.
Creo que es...
Ah.
Porque voy muy rápido.
Vale.
Proyectos.
Sobre mí.
Todavía no faltaría el sobre mí y tal.
Pero ya tenemos la parte de arriba.
Tenemos un poquito esto.
Vale.
Tendríamos aquí el saber más.
Yo creo que este botón lo cambiaría por algo parecido a este.
Para no tener dos tipos de botones.
Pero bueno.
No me ha dado tiempo a hacerlo.
Tenemos los proyectos que faltarían los enlaces.
Pero bueno.
Vamos a hacer una cosa.
Vamos a crear ya el repositorio.
Por aquí.
Que vamos a llamarle portfolio.dep.
Portfolio.dep.
Así que ejemplo de portfolio para programadores y desarrolladores.
Ok.
Portfolio.
Create repository.
Y vamos a poner este git remote por aquí.
Pam.
Vamos a hacer branch.
Bueno.
La branch ya estamos.
Que no se me olvide nada.
El ban.
No sé qué.
No sé cuánto.
Add first version for the portfolio.
Pusheamos.
Y lo que vamos a hacer además.
Es una captura de pantalla.
A ver.
Teniendo en cuenta.
Que lo hemos hecho.
En una hora y poco.
Ojo.
No está mal.
Portfolio.
Portfolio.
Para programadores.
Y desarrolladores.
Lo iremos mejorando.
Lo vamos a continuar.
Porque me parece un proyectillo bonito.
Que al final os puede servir.
O no.
Ya sea para aprender.
Ya sea para revisar.
Ya sea para utilizarlo.
Lo que queráis.
Y ya está.
¿Vale?
Y lo iremos añadiendo.
Lo iremos arreglando.
Y lo haremos en directo.
Y ahí lo tenéis.
Así que.
Por ahora.
Vamos a poner esto por aquí.
Chuchuchu.
Muy interesante.
Estuvo el directo de hoy.
Gracias hombre.
Déjalo publicado.
Pues mira.
Súper fácil.
Es que os vais a Netlify Drop.
Si iniciáis sesión.
Lo vais a poder tener para siempre.
Si esto haces en dos horas.
Una semana.
¿Qué logras hacer?
Bueno.
Pues en dos.
En una semana.
Logro hacer esto.
El AppGIS.
El AppGIS.
Que con todo el tema de edición.
Los test.
Y todo.
Que ha estado súper divertido.
Mira.
Para publicarlo.
Es súper fácil.
Porque si vais a Netlify Drop.
Lo único que tenéis que hacer.
Es.
Hacer un.
NPM Run Build.
Esto.
Os va a generar.
Todos los archivos estáticos.
¿Vale?
Y lo único que tenéis que hacer.
Es.
Simplemente arrastrar.
O sea.
Que vais aquí.
Code.
Punto.
Ta ta ta.
Aquí.
Este.
Este.
Esta carpeta.
Dist.
Vais a mostrar en Finder.
Y os vais para aquí.
Plam.
La carpeta.
La arrastráis aquí.
Y ya está.
Desplegado.
A producción.
En un momento.
Ya está.
O sea.
Sí.
Es rápido.
Si le dais aquí.
Sync app for free.
Que es gratis.
No me pagan.
Tampoco.
No me pagan.
Pero bueno.
Es que me parece un servicio muy chulo.
Si iniciáis sesión.
Podéis hacer esto.
Y automáticamente.
Ya.
Está en vuestra cuenta.
Y entonces.
No os quitan el.
El proyecto.
Ya se queda aquí.
Por siempre.
Por los días de los días.
Así que.
Nos vamos aquí.
Portfolio.
Dep.
Ay.
He puesto port.
Portfolio.
Mierda.
Mierda.
No.
Porque la idea es.
Portfolio.
Portfolio sería el correcto.
En español no es con T.
Es sin T.
Yo siempre lo hago así.
No sé por qué.
Pero bueno.
Lo tenemos aquí.
Quitamos esto.
Portfolio.
Bueno.
Podemos hacerlo también en inglés.
Portfolio.
Portfolio.
Y ahí tendríamos la versión.
Y joder.
No me digáis que no va rápido.
Es que va.
Va.
Increíblemente rápido.
Follado va.
Animate churros.
Me encanta el nombre que nos ha puesto el dominio.
Brutal.
achar.
Si es.
Lo que we're selling it back.
Muy bien.
Aorts.
O lo que sea.
Se.
El newcomer.
No te lo es.
Puede.
No.
Te lo es.
Muy bien.
A