La animación es totalmente necesaria para una correcta experiencia de usuario.
Midu, no me mates, la próxima feature será que la animación se vea solo una vez por PC.
¡Y cómo me conoce!
¡Una pelota botando!
Bueno, no ha estado mal, no es mi favorita, también te digo, no es mi favorita,
porque creo que en lugar de hacer la pelotita, me gusta más que la pelota esté en medio y haga eso, y punto, ya está.
Está bonito, me gusta mucho la animación esta, pero hay un problema que tienes que arreglar,
y es el scroll, que se va a mover la imagen a la izquierda.
¡Ping! ¿Ves que ha pegado un salto?
El salto ha sido por el scroll, por culpa del scroll.
¿Scroll va al gutter? ¿Puede ser esta?
Vale, esta es, esta es, justamente.
Pero tú dirás, porque alguien me dirá, ya me están diciendo en el chat,
¡ay, qué ojo fino, que no sé qué!
No se trata solo de ojo fino, sino que por desgracia, esto se considera un mal rendimiento,
porque cuando, esto se llama Content Layout Shift, o sea, lo que ha pasado es que tu contenido ha cambiado un poquito,
ha cambiado un poquito, que según como sea, puede ser más o menos, claro.
Tú imagínate aquí, pues puede ser un poco más, y quién sabe si el Cumulative Layout Shift,
al hacerlo, ¡pum!
Pues claro, esto se mueve, todo se mueve, y eso lo tienes que evitar.
Porque además parece, entonces, que ha terminado de cargar en ese punto.
Después utilizar el scrollbar gutter.
Permite que el autor reserve un espacio del scrollbar,
y así previenes que haya un cambio del layout que no quieras.
Y esto lo puedes hacer con CSS.
Vas a evitar que haya un cambio visual, aunque el scrolling no se necesite.
Así que así lo arreglarás, ¿vale?
Con una sola propiedad lo tienes arreglado.
Me gusta mucho el hecho de que se, el dibujo y tal, eso me gusta bastante.
Lo que no me gusta es que estos botones...
Ya a ver, es que me sabe mal, ¿eh?
Porque seguro que ahora la gente me va a decir,
es que solo eres tú, Midu, porque no sé qué.
Puede ser, yo tengo el ojo fino, señores.
Seguro que os pasa a todos, en mayor o menor medida, en una película.
Veis una película que tiene efectos especiales, efectos con 3D ahí, hechos en ordenador.
Y, ¿cuál es el problema?
Que aunque no ves nada mal, tampoco te lo crees.
Es como que pasa algo, porque de forma inconsciente,
tus ojos, tu cerebro sabe que algo no está bien ajustado.
Pues esto es lo que me pasa mucho a mí con las páginas web.
Por ejemplo, yo veo esta página, que está bonita, por cierto,
pero en cuanto empiezo un poquito ahí tal a ver los detalles,
ya me doy cuenta que esto no está alineado.
O sea, estos botones, esto debería estar alineado.
Y el texto no está alineado.
Entonces, eso no cuesta nada.
Es gratis alinearlo.
O sea, haces un Justify Content Center, Align Items, y ahí lo tienes.
Otra cosa que yo le veo es el tema de que todo otra vez blanco y tal.
Que yo entiendo que lo hacéis porque es un poco minimalista,
pero a lo mejor, yo que sé, al menos la parte esta que has puesto tu nombre y esto,
mejor cambiando un poco la opacidad, aunque sea.
Solo para cambiar, que se cambie un poco.
Parece una tontería, pero es que al menos ya cambia un poquito ahí el grado de importancia
de los dos textos que se ven iguales.
Vale, ahí con el scroll moviéndose.
¿Esto lo habrá hecho con CSS?
No creo.
Ah, pero si eres tú el del blog este, ¿te gustó el feedback que te dimos o no?
A ver, a ver si nos ha hecho caso.
Noel nos hizo caso.
Noel nos hizo caso.
Y yo le doy la enhorabuena por hacernos casos.
No sé si os acordáis, Noel pasó su blog, este de aquí,
ponía como una página intermedia en el que explicaba un poco sus objetivos y tal.
Y la verdad es que estaba súper bonito.
Y yo le decía, hostia, pero molaría más que directamente saliese el blog que es lo importante, ¿no?
Y lo ha dejado súper bonito.
O sea, que enhorabuena, Noel.
Me ha gustado.
No me desagrada el scroll, pero no te da la sensación que van como en dos tiempos.
A lo mejor sería más interesante si...
No sé, es como un poco raro.
Primero porque me da la sensación que llega tarde, ¿no?
O sea, yo esperaría que estuviese aquí el siguiente.
O a lo mejor aquí.
Pero está como demasiado espacio.
Fíjate, es demasiado espacio, ¿no?
Y luego, el problema, yo también creo que está como...
Primero sale la imagen.
O sea, a lo mejor si estuviese más arriba el fading, ¿no?
O sea, es que fíjate que está en la mitad.
Yo lo esperaría como que lo hiciese antes.
Porque es que si no, como que tenía que subir mucho para que aparezca.
Menos mal que ha dado este colorcillo, que si no, cago en la leche.
I'm J. Cerme, pero mi nombre real es Jorge Cermeño Alfaro.
Vale, pero es welcome, I am, y luego en español, ¿qué está pasando?
Cuéntame, ¿en qué mundo vivo?
¿Es en español?
¿Es en inglés?
¿Es español?
¿Es español?
Quédate con uno, ¿vale?
O es en español o es en inglés.
Pero no me hagas Spanglish.
Sinceramente, no aporta nada, ¿eh?
O sea, que puedes petarte el I am este, te puedes petar el welcome, igual también incluso.
Y te va a quedar más limpio el diseño, también te digo.
Técnico superior en desarrollo de aplicación web con amplios conocimientos.
También tengo conocimientos de ciberseguridad y diseño, entre muchos otros.
Me encanta conocer el mundo de tecnología y mi objetivo es ofrecer al usuario una experiencia cómoda, fiable y atractiva.
No sé si es demasiado texto, ¿eh?
Igual yo creo que se podría acortar un poquito, ¿eh?
¿Está bien esto?
LinkedIn, Geek Capital, me gustan los botones.
La verdad es que la presentación, los colores, me gusta también aquí lo de los menuses.
¿Las estadísticas?
¿Por qué le he dado estadísticas?
Le doy a estadísticas y se va a porfolio, ¿eh?
Ahí hay algo raro que no ha terminado de funcionar muy bien.
Este número, demasiado negrito, ¿eh?
Está casi tanto que no, ni siquiera sé...
Yo esto lo bajaría, ¿eh?
Se ve mucho más claro, ¿no?
Yo lo pondría máximo 700.
Lo dejas así, 700.
Y, hombre, mucho mejor, ¿no?
Fíjate la diferencia.
Es que se ve como demasiado.
Fíjate que el 0 es un...
O sea, es medio píxel.
Es medio píxel, tío.
Porfolio.
¡Ay, qué bonito esto!
¡Qué bonito!
¡Qué bonito!
¡Ay, ay, ay, ay!
¡Qué bonito!
Un poquito más rápida la animación.
Empresa fundada, no sé qué.
Oye, pero está muy bonito.
La animación esta está muy bonita, pero yo la haría un pelín más rápida, ¿eh?
Pero está muy bien, ¿eh?
Me gusta, ¿eh?
Me gusta.
Me gusta mucho el título este del fondo.
Me gusta, me gusta bastante.
Porque queda como muy sutil.
La verdad es que está bastante bien eso.
Skills, ¿vale?
¿Veis?
En este caso, el scroll, veo como que entra un poco mejor que el otro, que el que hemos visto antes.
¿Vale?
Cursos.
¿Vale?
Es una pena de notar esa experiencia porque te quedaría ahí finísima.
Te quedaría buenísima.
Bueno, aquí pones certificados, clientes, proyectos.
Hostia, pues si tienes clientes y tienes el porfolio, claro, más 25.
Yo creo que lo que te faltaría, antes que poner los skills y tal, a lo mejor sería interesante
porque, claro, cinco años de experiencia.
Pero, claro, no sé, yo así, haciendo scroll, mi sensación, como pone cursos, no es más
interesante que dejes los cursos de lado y que te enfoques en explicar los clientes
con los que has trabajado y todo esto, teniendo en cuenta que tienes cinco años de experiencia.
Cinco años de experiencia.
Yo esto lo pondría aquí.
Yo no sé si le daría tanto importante a certificados, ¿no?
Porque, no sé, ah, que son cursos que da él.
Que a lo mejor son cursos que da él.
No, porque, bueno, ofrecido por Coder House.
Yo entiendo que no, ¿eh?
Siempre, amigos, la experiencia, siempre lo primero.
En cualquier cosa, nosotros leemos de arriba a abajo, izquierda a derecha.
Entonces, siempre arriba a la izquierda.
O sea, cuanto más arriba y a la izquierda esté, punto.
Perfecto.
A ver si hijita, punto tech.
¡Ojo!
¡Uy, ya!
Desarrollador, fronted, pam!
Bueno, me ha gustado, me ha gustado.
Es un poco polémico el logo.
O sea, no polémico, pero que, hostia, es como muy raro.
Yo creo que esto, igual, igual esto es lo que me genera un poco de ruido.
Igual esto lo puedes dejar, como estaba, y suelo quitar este trozo y tal.
Pero bueno, me gusta, me gusta que es tan grande, que me gusta que hagáis las cosas grandes,
que a veces os da vergüenza.
Bueno, a ver, sobre mí, ¡oy, qué bonito!
¡Ojo!
Me gusta hasta el verde, ¿eh?
Sobre mí, experiencia, proyectos y contacto.
Mi nombre es Simón, bueno, me gusta que te de colores, tengo 21 años, estoy en espera
de mi graduación.
No sé si es una sola vez ubicada, tengo claro mi objetivo, dedicarme y enfocarme en
ser un gran desarrollador web.
Desde niño siempre he sido muy creativo, descubrí que mi talento es dibujar y que me apasiona.
Bueno, hago flyers y otras cosas y tal.
Bueno, ya no voy a decir nada del texto justificado, porque ya lo he dicho todo muchas veces.
Me da la sensación que cuando hacéis animaciones de scroll, hacéis que empiecen demasiado tarde.
Y esta, esta es demasiado, esta animación no está bien.
Y os voy a explicar por qué, y esto es muy importante, ¿vale?
Esta es la guía definitiva para mejorar tus animaciones en tema de WX.
Y habla de posición, tiempo, tipo de animación, un montón de cosas.
Uno, la duración y velocidad de la animación.
Como veis aquí, bien y mal, ¿no?
Y la diferencia es muy sutil, pero fijaos que la diferencia es, claro,
cómo tarda esto, que es un poco lo que nos está pasando en este porfolio,
que es como demasiado lento.
Y aquí, ¿qué es lo que dice?
Diferentes investigaciones han descubierto que un tiempo de velocidad de animación
en las interfaces está entre 200 y 500 milisegundos.
O sea, no lo digo yo, lo dicen factos.
Factos.
O los investigadores, datos reales, ¿vale?
Datos.
Y los datos están aquí.
Entonces, aquí tenéis un poquito, una guía buenísima que te dice cómo son, ¿no?
Por ejemplo, para efectos hover, fadding y scaling serían de 100 a 200 milisegundos, ¿vale?
Y movimientos grandes o complejos de 300 a 500 milisegundos.
Y 500 milisegundos sería muy lento.
Claro, imagínate esto.
Uno, dos, tres, cuatro, cinco.
Casi cinco segundos.
¿Vale?
O sea, ya veis un poco la diferencia por dónde van los tiros, ¿vale?
Aparte de eso, hay un tema muy interesante.
Bueno, este artículo es una verdadera joya, ¿eh?
Pero os voy a contar un tema muy interesante y un error muy común en el tema de las animaciones, ¿vale?
Fijaos que aquí hay una.
¿Veis esto?
¿Veis aquí la diferencia?
La diferencia aquí es que mientras se estaba haciendo la animación del primero,
ya estaba haciendo la segunda, y no en forma de cascada, ¿vale?
Que lo estáis viendo aquí a la derecha.
Pero os voy a decir otro que es también bastante interesante, que es esta de aquí.
Que es un otro error muy común de las animaciones.
Fijaos la diferencia de hacerlo en diagonal, de hacerlo en zigzag, que es como lo estamos haciendo.
Cuando lo hacemos en zigzag, es como muy complicada la animación.
Y fijaos que es como izquierda-derecha, izquierda-derecha, izquierda-derecha.
Fijaos como cuando está bien, es como que lo hace en diagonal.
En cambio, hacerlo en zigzag queda raro.
Queda raro.
Y de hecho, a ver, no me podéis decir que no queda raro.
Queda raro.
Queda raro.
Pim, pam, pim, pam, pim, pam.
Pero fijaos que muchas animaciones que le pasan aquí, ¿veis?
Aquí tenemos el error que hemos visto antes.
El error que hemos visto.
A ver, no un error, no un error.
Algo a mejorar.
Hacer que en lugar de que vaya uno detrás de otro,
sino que conforme el primero se está animando, que se vaya animando el siguiente, ¿vale?
Para que quede como mucho más natural.
Y fijaos, ¿no?
Lo que digo, ¿no?
Uno, dos, tres, cuatro.
Fijaos que esto cambiaría un montón si fuese como más natural que el primero se está animando
y ya va al segundo, tercero, ¿entendéis?
Por eso las animaciones son complicadas, pero ya que las hacemos, las hacemos lo mejor posible.
Os recomiendo mucho ese artículo que os va a quedar buenísimo, buenísimo.
¿Ok?
Y por lo demás está muy chulo.
Me gusta, una cosa que no me gusta mucho, Simón, es el tema de que al dar la experiencia
desaparece el contenido.
Es un poco raro esto, ¿no?
A mí no me termina de gustar mucho el hecho de que sobre mí y cambia esta sección del medio,
de la página, pero haces scroll y desaparece y aparecen los servicios.
O sea, me gustaría que fuese como más natural que a lo mejor esta barra te siguiese y todo
el contenido se quedase siempre para que pudiese seguir haciéndolo con, no sé, para que pudiese
seguir haciéndolo con el scroll, ¿sabes?
O sea, es que es un poco raro que desaparezca.
Y si sobre mí, nadie le pone tilde nunca sobre mí, es verdad, tienes toda la razón y sobre
mí va con acento.
Muy bien, pero está muy bonito y me gusta ese verde radioactivo que le has puesto, como
los sobacos de Hulk.
¿Qué ha pasado, Matías, tío?
¿Qué ha pasado, Matías Perroni?
Te has comido el padding con unas patatas fritas aquí, tío.
Has dicho, no quiero, no quiero padding.
A mí el padding me...
Hostia, es que, tío, fíjate si tiene padding...
Fíjate si no tiene padding que un poco más y está encima de las DevTools.
Pero es que, a ver, estas cosas son mega, mega básicas.
¿Por qué?
Tú no le pones padding a tu página y ya lo has liado, tío.
Bueno, ya, este porfolio, no sé qué le pasa a este, pero lo vamos a eliminar.
Porque me está dando, además...
No sé si es que tiene ahí un margin...
Ah, Position Absolute.
Position Absolute, Left 0%.
De hecho, a ver, le voy a poner un Relative, pero no debería estar así, ¿eh?
Pero al menos un Relative, porque si no el Absolute tiene mucho peligro.
Si tú pones un Absolute y no está en un contenedor que tenga Relative, es Absolute sobre el primer
elemento que sea relativo.
Si no tiene ningún Relative, pues será el Body.
Y si es el Body...
¿Vale?
Pero fíjate cómo de importante es el Padding, porque tú tienes esto aquí, que está aquí
a fuego.
Tú tienes esto, le pones Padding y ya mejora.
O sea, es automático, tío.
Automático.
Así que dale cañita al menos al Padding.
Otro problema.
Y esto es un problema que vemos muchas veces por aquí, ¿vale?
Hacemos las páginas a lo grande.
Que ocupe todo el ancho, que no sé qué.
No pasa nada.
Nos cuesta el diseño.
No pasa nada.
Nos calmamos.
Y decimos, pues hacemos las cosas más chiquititas.
Fíjate que cuanto más ancho, más nos cuesta rellenar todo el espacio.
Oye, pues decimos, tío, no soy capaz de hacer una página tan grande.
Vamos a simplificarnos la vida.
Nos simplificamos la vida, ponemos esto aquí, esto acá, y la ponemos de máximo que
sean 900 píxeles.
¿Vale?
Y ya nos lo ponemos así, ¿vale?
Al menos nos decimos, bueno, esto lo vamos a decir así.
El porfolio este, el problema es que le habías puesto Position Absolute.
Claro, Position Absolute este de porfolio.
Yo la verdad es que para poner así en grande en porfolio, o sea, porfolio, porfolio
es un poco raro.
Yo casi que lo dejaría así.
Luego, ¿qué pasa?
No está mal el hover, aunque está demasiado pegado, tío.
Aquí se te ha pasado el dip, dip, dip, dip, dip, dip, dip, dip, dip, dip, dip.
Demasiado dip.
¿Qué pasa?
Que esto está demasiado, demasiado, aunque aquí ha puesto 700.
A mí esto no me parece un 700 ni en broma.
Lo cual me hace pensar que no estás cargando la fuente de Montserrat en su totalidad.
Y este 700 no está haciendo lo que esperas.
Ya que no lo estás utilizando correctamente, voy a poner System UI para que al menos veamos
las negritas que se supone que tengas que ver.
Pero no puedes hacer que esto sea 700 todo o no sé qué, porque es un poco raro.
Ah, porque este, claro, es que este, este.
A ver, header.
Claro, esto no es un párrafo.
A ver, a ver.
Importante, amigos, ¿vale?
Importante.
Dentro de un anchor no tiene sentido que sea un párrafo, porque no es un párrafo.
¿Qué es lo que se tiene que utilizar aquí?
Aquí lo que se tiene que utilizar, en todo caso, es un spam.
En todo caso.
Si es que acaso fuese necesario.
Pero no es necesario, porque este spam, si no lo vamos a estilar, podemos estilar directamente
el anchor y aquí directamente ya tenemos el anchor estilado y ya está.
Lo estilamos, punto.
O sea, no hace falta siempre que el texto esté envuelto en algo.
A veces sí, pero en un anchor, o sea, en un párrafo solo van párrafos.
Párrafos de texto.
El texto puede ir en un spam y justamente cuando queremos que sea en línea, que es este caso,
¿vale?
Pues podemos utilizar un spam, ¿ok?
Ahora ya eso tiene un pelín más de buena pinta.
El hover sí que me preocupa a mí.
Yo me imagino que este es el problema, ¿no?
O sea, que este es el hover y tal.
No sé si habría que poner, vamos a poner pixel.
No sé.
A ver si esto es, este es.
No.
Sí, sí que es.
Vale.
Pues lo vamos a separar un poco, más que nada porque como que es un poco exagerado.
Y yo lo pondría un poco más fino porque también me parece que es demasiado bestia.
Fíjate que un poquito más sutil le queda bastante mejor, ¿eh?
Aquí, esto significa que tú tienes algún width que no están ocupando siempre.
A ver, porque esto...
900...
¿Qué está pasando?
Ah, no, sí, sí, sí.
O sea, está justo.
Está justo aquí.
No.
Es que se está...
O sea, aquí hay algo en este, en este de aquí.
Claro.
Mira, esto está prohibido, ¿vale?
Esto de poner 80%, hay en otro incluso peor, en este, 80 del viewport.
Todo lo tienes que hacer.
Yo esto, en realidad, me los petaría a todos y pondría que sea 100% para que sea exactamente
como lo tienes puesto en un sitio y ya está.
¿Vale?
Porque si no se te sale.
Claro, si tú pones 80 del viewport, imagínate, si tú lo dices 800 píxeles y el 80 del viewport
es más grande, va a hacer que tu contenido sea más grande que como has envuelto todo,
¿vale?
Y esto es un texto demasiado, demasiado tocho que también, aquí sí, que has hecho correctamente
el tema de tal.
Esto lo tendríamos que poner aquí.
Y también sería interesante, pues, ponerle algún colorcillo, ¿vale?
No le vamos a poner este color, no os preocupéis, pero a lo mejor algo así.
Y también evitar el I am passionate about technology.
De verdad, yo sé que es difícil, ¿eh?
Sé que es difícil, pero buscad.
El reto es que este texto hable sobre vosotros, no hable sobre cualquiera.
Yo sé que es difícil, ¿eh?
Yo sé que es difícil.
Si yo me leo esto, esto, lo habéis dicho todos, lo habéis dicho todos, ¿sabes?
O sea, esto lo ha dicho cualquiera.
Esto no habla de ti.
Hay que intentar decir, ostras, ¿qué es lo que realmente voy a hablar sobre mí?
Si yo hablase de mí, no diría, soy apasionado sobre la tecnología y siempre estoy buscando cosas.
Es que podría hablar de mí esto.
Pero, ¿y si digo, divulgo sobre programación y tecnología y tengo el mayor canal de habla
hispana de desarrollo en Twitch?
Es que habla de mí.
No hay otro que tenga eso.
Es de mí.
Estuve durante cinco años liderando equipos de frontend en Adevinta, donde conseguí tal.
Eso habla de mí, ¿sabes?
No habla de otra persona.
Humilde, humilde no.
Factos.
Y eso es lo que hay, Mati Suárez.
¡Ojo!
Pablo, Pablo se la ha jugado con un pedazo de diseño.
Pablo Llarce R.
Desarrollador y diseñador web creativo y entusiasta especializado en experiencia de usuario e interfaces web.
Me gusta.
El grano, rápido, pim, pam.
Ahí está.
Inicio, porfolio, sobre mí, contacto, viene el hover, developer.
Me encanta el developer.
Me encanta.
Muy bien.
Vamos a bajar.
Me gusta el hover también.
Me gusta el diseño.
Está bonito.
Un poco polémico, ¿eh?
El enlace aquí.
Le falta texto.
Le falta aquí un poco desangelado, ¿eh?
Me gusta la parte de arriba, pero, hombre, el proyecto destacado.
Primer proyecto destacado.
Age Calculator.
Tío, me gusta más el Spotify Redesign más que el Age Calculator, ¿eh?
Y además le falta un poco de...
Tío, ¿por qué esto es la hostia?
¿Por qué este Spotify Redesign está para lamerlo?
Yo qué sé.
Ah, mira, hay 440...
Te voy a dar una colleja.
Te voy a dar una colleja.
Claro.
No está mal.
No está mal.
A ver cuántos años tengo.
Esto está roto.
¿Cómo que 30...?
Esto está roto.
Tengo 28.
Esto está mal.
Esto está mal.
A ver, yo pondría el más llamativo arriba.
El Spotify Redesign lo puede ser, pero tiene que funcionar.
Segundo, no me pongas el título Spotify Redesign y lo que me vas a explicar del proyecto rediseño de Spotify Web.
Porque, tío, es que es como si te digo, te enseño mi coche rojo.
Es rojo el coche.
Es raro, tío.
O sea, ¿pero qué hace el coche?
El coche va rápido, tiene marcha, automático, manual.
¿Con qué lo has hecho?
Dime algo.
Véndeme tus proyectos.
Y este Calcu, tío...
A ver, ¿cómo has podido empezar tan bien, Pablo?
Con este inicio.
Y cuanto más escroleo, más ganas me dan de ir a buscarte.
No puede ser que esta imagen...
O sea, tío, esta de Spotify al menos está bastante bien.
Pero esta imagen, Calcu, que me va a sacar un ojo los píxeles.
Dale cañita, hombre.
Minijuego algebraico en desarrollo.
Bueno, vamos a perdonar que está en desarrollo.
Esta parte también está bastante chula.
Mis tecnologías sobre mí.
Muy bien, que el sobre mí está ahí al final y que está bastante bien.
Igual estaría chula otra imagen, ¿eh?
Ya que estás.
Desarrollador y diseñador web.
Para los diseñadores de problemas de forma sencilla.
Te agradezco que no hayas justificado el texto.
Parece mentira, pero te lo agradezco.
Y queda bien, ¿vale?
Que hay mucha gente que dice...
Es que a mí me gusta el texto justificado porque queda bien.
Pues este queda bonito.
Y no se trata de justificar el texto.
Se trata realmente de que sea bonito el texto.
Y ya está.
Mis redes sociales.
Hecho con amor por mí.
Esto, tío...
Hecho con amor por mí suena muy mal, tío.
Porque eso puedes decir de un porfolio como...
Bueno, en fin.
Andrés Laguilabo, software developer.
Muy bien, software developer, LinkedIn Resume.
Me gusta, me gusta, sí.
Hay un problema, Andrés.
Hay un problema que es bastante polémico, que es el gris.
Oye, qué chulo esto, ¿eh?
Qué chulo ahí ese hover.
Está bonito.
Hostia.
Este...
Este...
Este botón...
Este botón es un poco como para...
Como si fuese una máquina de...
Andrés Laguilabo.
Sobre mí.
Esto está chulo.
La verdad es que está chula la cosa esta de poner como la imagen por encima.
Pero aquí tienes como dos opciones.
Porque una de dos.
O haces que realmente esto se note que queda muy por encima.
¿Sabes?
Que no sea tan sutil.
Porque si queda tan sutil, queda un poco raro.
Y luego, este padding que hay aquí, tiene que ser bastante parecido al que dejas aquí.
Porque si no, fíjate como que está un poco como descompensado un poco la caja.
Es como que encima está...
Está fuera.
Aquí hay un padding de una forma.
Luego aquí de otra.
Y quedaría...
Tendría que estar como mejor centrado.
¿Sabes?
Como un poco mejor centrado para que quede como mejor.
No sé si me explico.
Como mejor encuadrado.
Vamos a ver esto.
Desarrollador de software no es fácil.
A ver.
Uno.
No hace falta todo ponerlo en un solo párrafo.
¿Vale?
Es que esto es algo que siempre, siempre hacéis.
Y aquí hay más de un párrafo.
Es que hay más de un párrafo.
Porque no puede ser que un párrafo explique tantas cosas.
Se utiliza la P.
Y puedes tener dos párrafos que de hecho te va a ayudar a que se entienda un poquito mejor esto.
Esto por aquí.
Vale.
Perfecto.
Fíjate que ahora ya tiene un poquito de mejor pinta.
Un poquito de mejor pinta.
Desarrollador de software.
Me enfasen las tecnologías web.
Me interesa especialmente los temas sociales.
Me gusta contribuir en soluciones a los problemas a través de la tecnología.
He trabajado en proyectos tanto individuales como en equipo.
Dando siempre los mejores resultados.
Además de habilidades técnicas.
También me destaco por tener comunicación.
Revisar la ortografía por lo que más queráis.
¿Vale?
Por lo que más queráis.
O sea, no podéis tener un porfolio a día de hoy con faltas de ortografía.
Tío.
Si el chat GPT te la archiva.
Joder.
No me hagáis esto.
Muy bien.
Lo de la experiencia.
Me gusta.
Desarrollar un sistema de información para la bandería y tal.
Vale.
Ta, ta, ta.
Proyectos.
Yo los proyectos los pondría encima de las habilidades estas.
Porque las habilidades estas al final.
Si ya con los proyectos se va a ver.
Ya está.
Además los tienes aquí súper bien mostrados.
Oye.
Pues está.
Me gusta.
Me gusta el proyectillo.
Mira.
Muy bien.
Ahí mostrando certificados.
Ahí como una lista que parece que hay un montón.
Que seguramente habrá un montón.
Ver más.
O sea.
Es que encima tiene más Andrés.
Madre mía.
Madre.
Ay.
O sea.
Tienes una página solo para tus certificados.
Tienes cinco páginas de certificados.
La leche Andrés.
O sea.
Te envía otra página.
Te envía otra página directamente y dice.
No.
Sigue con los certificados por ahí.
Ay.
Qué risa.
Aquí este texto.
Pues ya hemos visto muchas veces que es demasiado tocho.
O sea.
Que también lo tendrías que.
O sea.
Hacer un max width a lo mejor de 80 caracteres.
O incluso menos.
Que 80 sería el límite.
No pasa nada que quede un poco así a la derecha y tal.
Pero al menos para que se lea.
Y hacer dos párrafos.
Porque a lo mejor también.
Aquí pueden haber dos párrafos perfectamente.
O visualizar un poco mejor.
Lo que necesitas.
Y aquí con dos párrafos se va a leer mucho mejor.
Y la gente va a poder escanear mejor la información.
Pensar que hice el midulibrito.
Seguro que cuando lo viste pensaste.
Dios.
Qué asco está UI.
Pues no lo sé.
Ninfugu.
Dime tu proyecto.
Que lo vamos a destruir.
Que tengo ganas de destruirte un poco.
Va.
A ver.
Dime tu proyecto.
Ninfugu.
Voy a buscarte.
Es broma.
Es broma.
Es broma.
Es broma.
Que si no luego se va a creer que es verdad.
Se va a creer que es verdad.
Se va a creer que lo voy a destruir.
Es broma.
Ah, mira.
Que nos lo va a pasar.
Ninfugu.
Pues está chulo.
Pero esto no es el de midulibros.
Esto es otra cosa.
Esto es tu proyecto, Ninfugu.
No te voy a dar feedback.
Porque si no te me ofendes.
Y entonces no te puedo decir nada.
Pero.
Pero bueno.
No voy a decir nada.
Que si no se me enfada.
Ya está.
Ya está.
No te digo nada.
No te digo nada.
Tengo una opinión.
Pero no te la voy a compartir.
Pues este es el proyectito de Feral.
Que quería que le echase un vistazo.
Bueno.
Pues me gusta.
Hay una cosa que me gusta mucho de las aplicaciones web.
De los recursos web.
Me encanta cuando entras.
Y nada más entrar.
Ya ves lo que puedes hacer.
¿Vale?
Por ejemplo.
Pues Tablet Icons.
Me encanta.
Esta no.
Esta la odio.
Es una copia pirata.
Pero esta.
¿Ves?
O sea.
Tablet Icons.
¡Pum!
Aquí tienes los iconos.
Ya.
Directamente.
Busca.
Y aquí.
Pues si bien.
Muy bien.
Oye.
¿Que lo quieres instalar?
Aquí lo tienes.
Instalar.
Para buscar.
Directamente.
Me gusta.
Rápido.
No está el de midudev.
Mal, ¿eh?
Ya mal.
Ah, no.
Que es React Symbols.
Que no tiene que ser el de midudev.
Vale.
Folders.
Ah, mira.
Las carpetas.
A ver.
Si le damos.
Ah, mira.
Para copiar.
Es darle un clic.
Y ya te copia aquí el componente.
Una cosa que me gusta mucho de Tablet Icons.
Es que cuando le das clic.
Además de que te sale más grande y tal.
Y que tienes diferentes tags.
Porque claro.
Una cosa que está chula.
Es que puedas buscar por más de una cosa.
No solo por el nombre.
Pero a lo mejor.
Si pones JavaScript.
Claro.
Ah.
JavaScript no existe.
¿Qué ha pasado?
Claro.
JS.
Claro.
Molaría que tuviese más de un nombre, ¿no?
Bueno.
Si pongo JavaScript.
Esperaría que estuviese JS también.
Pero bueno.
No pasa nada.
Por ejemplo.
En Tablet Icons sí que lo haces.
Que tú puedes buscar.
Rotate 360.
¿Sabes?
Como que tiene más de un nombre.
Y eso está bastante chulo.
Pero está muy bien.
Me gusta.
Mira.
Cuando haces clic y copias.
¿Ves?
Os sale esto aquí.
Que esto es de un componente de React muy chulo.
Que os recomiendo mucho.
O sea.
Para mí.
Uno de los mejores componentes de React.
Que existen de lejos.
De lejos.
Que le dais aquí al render.
¿Ves?
Y tenéis súper fácil este toast.
Y os queda para chuparse los dedos.
Y podéis.
Y hay de diferentes tipos.
Que si ha tenido éxito.
Un error.
Con acciones.
Para tener botones.
Promesas.
Para que te salga el loading.
Y para cuando se resuelva.
Pues esa es la que está utilizando justamente aquí también.
Si os fijáis.
Aquí abajo a la derecha.
¿Veis?
Es justamente la misma.
¿Vale?
Pero me gusta mucho el diseño.
Va muy directo al grano.
Y tal.
A ver.
¿Qué tiene Started?
Ah.
Esto ya es lo de Guija.
Y mira.
Responsive también.
Aunque aquí todavía caben dos.
No sé si es muy apurar.
Pero.
Es que me da un poco de rabia a veces cuando caben dos.
Y no se ponen dos.
Porque dices.
Ah.
Es espacio.
Pero bueno.
Está chulo.
Me gusta.
Muy buen proyecto.
Feral.
Bueno.
Ya sabéis.
Si necesitáis iconos SVG.
Pues ahí tenéis el de Feral.
Chau.