Venga, vamos por faena, amigos.
Kevin Fullstack, developer, entusiasta por el desarrollo web.
Vamos a ver los proyectos.
¡Pum!
Hostia, se ha pasado una sección entera.
Bienvenido, soy Alan Kevin desde muy temprana edad.
¿Cómo de temprana?
A los 3, a los 4 años.
Fui afortunado al tener una computadora personal en la que pasaba horas y horas de montando piezas por piezas.
No, de entenderse.
Bueno, yo esto más cortito, pero bueno, está bien.
Estos son mis proyectos concluidos.
Espero tu feedback.
Oye, ¿qué ha pasado?
¿Qué pasa con esta letra?
Si tienes esta letra aquí, aquí le falta padding.
Esto está muy juntito.
Aquí a lo mejor la imagen podrías hacer que quede pegada directamente.
Página, página.
A ver, página tiene acento en la A.
Mírate los errores de ortografía, amigo.
Página que contiene 3 juegos.
Hostia.
Vamos a ver cómo tiene el hombre este.
¿Por qué?
313K.
¿Esta imagen qué es?
¿Esto qué es?
¿Es un póster o algo?
O sea, un póster popcorn plus encima de la pirata.
¿Por qué ocupa esto 300K?
¿Pero qué resolución tiene esta imagen, tío?
O sea, si va a salir así de pequeño.
¿De verdad hace falta que pongas un wallpaper?
Bueno, pero tiene buena pinta, ¿eh?
Me gusta.
Gracias por llegar hasta aquí.
Hombre, hombre.
He hecho lo que he podido.
Gracias.
A ver, está bien.
Kevin, no entiendo muy bien esta raya.
Esta raya como me pone un poco nervioso.
Hay una extensión para abscode de corrector ortográfico.
Instalarla, por favor.
Se llama CodeSpellChecker.
Es esta.
Efectivamente.
Podéis instalarla y luego, además, podéis instalar el lenguaje, porque funciona con diferentes
lenguajes.
Y podéis hacer que funcione solo en ciertos archivos.
Si no queréis que funcione en los .js, podéis hacer que funcione solo en los .js, .md y
cosas así.
No soy muy fan de esto de aquí a la izquierda, porque está como muy al lado.
No sé si yo lo centraría aquí.
Pero por lo demás, pues está bien.
A ver, no sé qué pasa.
No sé si es que esta letra no ha cargado, porque esta fuente aquí también la tienes.
Cuando en realidad está, no sé, me parece más bonita.
Yo utilizaría la misma todo el rato.
Lo que sí que a lo mejor puede jugar un poco más con diferentes colores y tal.
Pero bueno, tiene buena pinta.
Mírate también lo de las imágenes, hombre, que ocupan un cojón.
Joder, pero Marco, ¿cuántas veces quieres?
Buah, Manu.
Esta imagen se ha cargado por fascículos, tío.
¿Cuánto debo ocupar esta imagen?
1,7 megas.
O sea, un poco más si me gastas internet, tío.
O sea, es que no he tenido ni que abrir las herramientas de desarrollo para que me lo diga.
Soy desarrollador web full staff Barcelona, vale.
Bueno, está bonito, me gusta.
Bueno, me gusta mucho la card.
TypeScript con la S en mayúscula.
Yo la verdad es que esto, esto de hola soy desarrollador, a mí esto no me termina de gustar.
Creo que rompe incluso la estética de la página web.
O sea, el cómo estaba esto.
Yo esto lo pondría debajo de Manu Torres.
Creo que te quedaría mejor.
Esto, lo típico, header aquí alineado.
Aquí el Manu alineado aquí.
Aquí alineado aquí.
Hay que decidirse.
Si lo quieres hacer muy poco ancho, pues alinealo todo aquí y es que te va a quedar mucho mejor.
A ver, hay un problema con el gris.
El gris, tío, aburre un montón.
Claro, si utilizáis gris para todo, fijaos que menos mal que tenéis las imágenes.
Porque es que si no, entonces yo algún colorcillo para llamar la atención.
No sé, algún color que sea tu favorito.
Azul o tal.
Hola, soy Santiago.
¿Qué tal, Santiago?
Frontend Developer que le encanta crear páginas web.
Le encanta, le encantan ver las gafas de sol rechulonas.
Yo ya no sé cómo poner o cómo explicar o qué hacer o qué poder.
No sé, no sé qué hacer para deciros que no pongáis, tío, textos tan largos.
Que no se los lee nadie.
Nadie se los lee.
Por lo de tanto, esto está bien.
Esto está guay.
Me gusta.
Tech Stack.
Vale.
Me gusta mucho el título.
Muy bien el detalle ese del punto, del colorcito.
Jugando con lo del logo.
La verdad es que eso está bastante bien, ¿eh?
Me gusta, me gusta.
Muy bien ahí con los proyectitos.
Getting Touch.
Oye, pues está bastante bien presentado, ¿eh?
Me gusta, es beta.
Me gusta.
A ver, cosas que yo le veo.
Mira, muy bien que está esto alineado.
Que bueno, aquí deja de estar alineado, pero entiendo que también es un espacio como más pequeño.
No pasa nada.
No pasa nada.
Lo puedo llegar a entender.
Aunque es verdad que no para de romperlo.
Pero la verdad es que en general me gusta, ¿eh?
Loading Models and Heavy Assets.
Welcome to my portfolio.
Vale.
O sea, tú entras en...
O sea, yo entro en la página web y me aparece esto.
Welcome to my portfolio.
Lo primero que pienso es...
¿Tengo que hacer un clic?
Vale.
No hay clic.
El clic no funciona.
No funciona el clic.
Aquí sí.
Hay que darle a eso.
Y entonces me aparece esto.
Yo entiendo que a veces os gusta el hecho de...
No, para que vea que domino la carga de recursos y tal.
No.
Mira, ¿qué es lo que tú tienes que hacer?
Lo que tienes que hacer es enseñar esto desde el...
Segundo cero.
Y esto, que debe ser el Heavy Assets que dices desde el principio, ¿no?
Que esto que dices...
Loading Models and Heavy Assets.
Vale.
Que encima ya empieza mal porque dices...
Hostia.
Lo que tienes que hacer es que esto aparece en blanco y que cuando se cargue se muestre.
Pero mientras que tú dejes que la gente pueda ver tu página web.
Porque si no, la gente se te va a ir.
Que la gente está cargando y está diciendo...
Oye, ¿qué pasa aquí?
¿Qué pasa aquí?
¿Dónde carga?
¿Cuándo pasa esto?
¿Sabes?
Tío, no hagáis esperar a la gente.
Está prohibido.
De primero, de programador web.
En la experiencia del usuario es que no se le hace esperar a la gente.
Pensad en vuestras experiencias a la hora de navegar, de aplicaciones, de lo que sea.
Imaginad que entráis en un sitio y os dice...
Perdona, estoy cargando los recursos y tal.
Y a los 5 segundos...
¿Qué pensaríais?
Si a mí ya me da rabia en los videojuegos.
Cuando al principio me salen los créditos esos de la empresa que la he hecho.
Y no puedo pasarme los créditos.
¿Sabes?
Que pone Capcom.
Y dices...
Tío, ya sé que eres Capcom.
Déjame pasar al juego.
Hola, soy Andy Canales, web developer, full start developer y tal.
Bueno, lo mismo, todo blanco, todo blanco.
Hay que intentar darle un poquito de cañita.
Mira, pero qué bonito esto, se mueve para los lados.
Un poquito sobre mí, pero ves, blanco.
Oye, muy bien.
Muy bien, casi utilizamos un párrafo.
Mira, vamos a ver.
Andy, un punto por usar más de un párrafo.
Menos un punto por solo usar color blanco.
¿Vale?
Todo blanco, todo blanco.
Esto se hace un poco aburridillo.
¿Vale?
Menos 99 puntos por usar texto justificado.
Basta ya.
Soltad, soltad, soltad, soltad, por favor, el texto justificado.
Eliminad ese valor de vuestro CSS.
Yo no lo sé.
O sea, es que no sé si llamar a la policía, poner una denuncia, no sé qué hacer.
Midu.
Si no gusta mi opinión, porque veis que mi opinión, no sé qué.
Mira, aquí tenéis, por ejemplo, justificar texto, no lo hagas.
Y os explica por qué.
Porque está, o sea, que está de sobra demostrado que el texto justificado de CSS está mal.
Es malo para la tipografía.
Es obvio que estos huecos que se dejan aquí no son, no son.
No quiero volver porque es que todas las semanas tengo el texto justificado.
Que yo no sé si es que cada semana viene gente nueva o qué es lo que está pasando.
Lo que no entiendo de esto, o sea, está chulo esto de la derecha, pero lo que no entiendo,
sabes, porque se va moviendo y tal, pero molaría que cada sección cambiase, ¿no?
¿Cuál es la manera correcta?
La manera correcta es básicamente texto alineado a la izquierda, porque es como la gente lee
y es mucho más fácil de leer y no hay ningún tipo de problema.
El texto justificado, lo hacéis justificado para que visualmente el texto encaje.
Y para leer se lee horrible.
Bueno, pues está chulo, me gusta, ¿no?
El problema, lo que le he hecho en falta a Andy, le he hecho...
Andy está terminando de...
Mira, no me digas que me has puesto un loading.
Para cambiar de sección.
La madre que te trajo.
O sea, más loading no puede ser, ¿no?
No pueden ser.
Mika Diffo Frontend Developer Contact Me.
Hostia, esta Amy se parece a Marco JS Library.
Puede ser que se parece un poco.
About me...
Oh, qué bonito, qué bonito ahí.
El contraste está justito, ¿eh?
Aquí se echa en falta alguna imagen, ¿eh?
Alguna imagen.
Hostia, es bastante polémico el borde radius.
A ver, no pasa nada, pero como que...
Sabes que aquí en punta, aquí en punta, pero aquí en redondeado.
Me gusta la letra.
Es curiosa, porque al final es diferente.
¿Vale?
¿Dónde he estudiado?
¿Dónde he trabajado?
Yo la verdad es que donde he trabajado lo pondría lo primero.
El donde trabajas es bastante importante para que se vea.
Hostia, aquí es que también lo del borde radius.
Está encantado lo del borde radius este.
Lo que le he hecho un poquito en falta es alguna imagen, ¿no?
O sea, en los proyectos, por ejemplo.
Aquí te has pasado, ¿eh?
Con line height.
Aquí a veces o mucha separación o poca separación.
Pero la justificación es como muy exagerada, ¿no?
Me da un poco de sensación de que el line height es muy exagerado
y en cambio aquí te falta separación con la parte de arriba.
Porque parece parte del párrafo, ¿no?
Entonces yo lo separaría un poquito mejor.
Así.
O incluso también el título, ¿no?
Separarlo un poquito también para que se note exactamente.
Porque si tiene la misma separación el párrafo que el título y tal,
pues queda un poco raro.
Y aquí también esta separación.
Pero bueno, al menos un poquito mejor separado.
Y alguna imagen, ¿eh?
Justifica el texto.
Que te morde un ojo.
No digas eso, ¿eh?
Es un poco raro este sí website.
Es como muy aburrido este botón.
Muy, muy, muy aburrido.
No llama mucho la atención.
Y además está con otro tipo de letra.
Con lo bonito que era este, ¿no?
Si habías confiado en este, yo iría por ese tipo de letra.
En este caso, en los proyectos, yo el slider, sinceramente, no lo veo, ¿eh?
Yo casi que el slider prefiero...
Es que solo tienes tres.
Yo creo que te vale la pena mostrar los tres.
Columna y tal.
En modo oscuro, me gusta más.
Aunque es verdad que esta...
Aquí le pasa lo mismo.
Que me da la sensación que al borde del contraste.
Pero por lo demás está bien.
Aquí está súper importante también mostrar un avatar de esta gente.
Hola, de esto es David Salima.
Software developer en Cuenca, Ecuador.
Descarga mi currículum.
Los botones, normalmente algo que es interactivo, algo que es clicable, no lo mováis.
¿Vale?
No hagáis que se mueva.
Pensad que hay gente que puede tener problemas de accesibilidad.
Ya no solo de accesibilidad, sino que tú estás aquí, le das clic.
Oye, ¿por qué no ha funcionado?
Este tipo de cosas, yo las evitaría.
Las cosas que son interactivas.
Si lo que queréis es otra cosa, pues sí, lo podéis mover un poquito.
Pero los botones, evitarlo.
Aquí le falta padding.
Fíjate que esto está aquí al límite, ¿eh?
David, eso lo tienes ahí al límite.
Yo lo que te recomiendo es que el header, a los lados, tenga un padding como...
O que tengas un ancho máximo y lo centres.
La letra esta, esta letra es un poco polémica, ¿eh?
Yo la...
A no ser que tenga una explicación muy concreta de utilizar una...
Con tanta floritura, yo las evitaría.
David, si salima.
También es verdad que a lo mejor esto podrías hacerlo una vez, ¿vale?
No que esté en loop todo el rato escribiendo tu nombre.
Y puedes dejar que a lo mejor el cursor esté parpadeando.
Pero que se esté quietecito.
Esto no es redondo.
Entonces, las cosas que tienen que ser cuadradas y redondas, tienen que ser cuadradas y redondas.
Visualmente quedan un poco raras.
Así que, lo que tenéis que hacer en este caso...
Podéis hacer, por ejemplo, el anchor, el anchor este.
Podríais decir 36 píxeles.
36 píxeles.
Display.
Line.
Block.
Aquí es que hay algo raro.
El padding es raro.
Vamos a poner solo que sea así.
Que esto sea en line block.
Vamos a poner que esto sea display flex.
Align.
Center.
¿Ves?
Ahora sí que es una redonda.
Ahora sí que es una redonda.
Fíjate la diferencia.
Los saltos que te da esto del contenido es por culpa de esto.
O también una cosa importante, que no evitar los layout shift.
De que vayan cambiando, dando brincos y cosas así, ¿vale?
Tecnologías que impulso como desarrollador.
¿Qué estás impulsando tú?
Tecnologías que uso como desarrollador.
Tecnologías que domino como desarrollador.
Cosas así, ¿vale?
Es un poco raro que esto lo tienes en inglés, esto lo tienes en español.
En mi trabajo de desarrollador utilizo diversas...
A ver, no pongáis subtítulos para explicar los títulos.
O añades más información o no lo expliques.
Luego, para crear la estructura, esto claramente.
Yo le pondría un text wrap balance, ¿vale?
Para que quede mejor.
Y más separación.
Es que esto lo tienes aquí muy pegado.
Muy, muy pegado, ¿vale?
O sea, que habría que separarlo así un poquito.
Yo creo que esta card que has elegido no es la más adecuada, ¿eh?
Porque si esto va a ser una imagen cuadrada...
Fíjate, aquí te está quedando este hueco.
Entonces, una de dos.
O metes esta imagen dentro de la card, ¿no?
Porque está como separada la card.
No tiene mucha cosa.
Así que o la metes dentro y entonces no te queda así.
Es roto este trozo que queda como raro, ¿verdad?
Así que echar un vistazo.
Y esta imagen que está rota, ¿eh?
Está rota.
Y aquí te falta una separación también, David.
David H. Linares.
¡Ojo!
Herli Linares.
Apasionado en todo lo que hago.
Dispuesta siempre a enfrentar desafíosamente de todo que indique transformación digital y accesibilidad.
Mi punto único.
Tu punto único es que no se te olvide que en español hay que puntuar correctamente.
No se nos olvide esto.
Que queda muy raro.
Y después de la puntuación, la mayúscula.
Me gusta en general cosas que no me terminan de gustar.
Que esto no esté alineado y que no tenga hover.
Esto queda un poco raro.
No pasa nada.
No es lo peor que hemos visto en los porfolios.
Pero estaría bien que esto estuviese alineado en el centro, ¿no?
Y además que tenga algún tipo de hover.
Además lo tiene fácil.
Porque aquí, ya que tienes el rosita ese, lo ideal sería que el stroke aquí, tú le pones current color.
Es que esto cuando sea hover, voy a poner pink, aunque no debería ser pink.
Ah, no, me lo he cargado.
¿Por qué?
Esto tiene que ser blanco.
¿Vale?
Y luego, pues ya, entonces le puedes poner el color que tú quieras.
Y ya con el current color le cambias el hover, le pones aquí el color que quiera, que puede ser este que está bastante bonito.
Y entonces, ya, le quitamos el hover y, fíjate, le pones aquí una pequeña transition de color 3S.
Todo lo que puedes imaginar lo podrás programar.
Bueno, esto está bonito.
Está bonito, ves, un subtítulo que no tiene nada que ver con el título y que añade información.
Muy bien, aquí con los...
Hostia, el...
No sé si esta animación es la mejor porque parece muy loca, ¿eh?
También es verdad que es difícil normalmente este tipo de animaciones, pero yo lo intentaría mirar otra.
Habilidades, un poco más sobre mí.
Soy Herli, una mujer apasionada en todo lo que hago y ahora con el mundo tech.
La verdad es que bastante bien.
Aquí estaría chulo tener un poco de padding, ¿vale?
Con responsive y todo, ¿eh?
Muy bien, Herli.
Muy bien.
Igual aquí sí que estaría mejor poner uno al lado del otro, ¿no?
O sea, esto a la izquierda y el menú a la derecha para tener un poquito más de espacio en el móvil, que si no va a ser muy vertical.
Me gusta, además me gusta que haya aquí una pequeña introducción y que es diferente a lo típico que todo el mundo pone, así que eso se agradece.
Edwin, transformando ideas en realidad a través de código limpio y soluciones innovadoras.
Código tiene acento en la O.
Ahí está gente.
Como desarrollador, me he especializado en el fascinante mundo del frontend.
Está chulo, pero aquí te faltan acentos, ¿eh?
Transformando ideas en código a través de código y soluciones, tal, tal, tal.
A través, también, a través.
Tres, como utilizas en el texto el gris, así, como que no se ve tanto, claro, eso hace que quede más apagado.
Esta parte me gusta bastante más, la de proyectos, aunque creo que estaría bien tener un poquito más de separación.
En lugar de esto típico de poner aquí las habilidades y tal, estaría chulo porque eso le da como vistosidad.
El hecho de poner aquí las tecnologías y tal.
Creado con, por Equin Santos, sobre mí, proyectos, logros, contacto.
Está bien, a ver, es que es complicado el naranja, ¿eh?
Te quedaría mejor menos ancha la página porque así, creo que, un poquito más, así.
A lo mejor es que así queda un poquito más estirada y tal, pero bueno, está bien, me gusta, ¿eh?
Francesco, vamos, Francesco.
Hola, mi nombre es Francesco.
Este Full Start Developer, este colorcito, este color no es accesible, ¿eh?
Yo aquí creo que el black es el que sí que se vería y se nota bastante, ¿eh?
Aquí sí que se lee, el blanco no se lee.
Teamwork, esto es como...
Vale, esto es un poco raro.
Esto es como que lo has dicho tú mismo, de ti mismo, ¿cómo ha sido esto?
O sea, Teamwork.
Teamwork es esencial, no sé qué.
Francesco Alterio.
Amo aprender.
The Love of Learning es...
Soy Francesco Alterio.
Esto me lo quitaba.
Esto lo quitaba también.
Bueno, claro, esto sí lo quito.
Francesco.
Francesco.
Me he cargado un fondo, ¿vale?
Pero solo imagínate esta parte.
Mira, este iconito, en realidad, lo tendrías que poner a la izquierda, tío.
Porque es que ahí queda muy raro.
O sea, este icono, a ver si soy capaz.
Esto lo tendrías que hacer, en realidad, así.
Porque está como muy separado y creo que tiene sentido que el icono esté al lado de justamente lo que quieres comentar.
No sé, algo así, ¿vale?
Y yo lo pondría al principio, ¿eh?
El icono creo que queda mejor cuando lo pones más así.
Vamos a poner background transparent.
Yo creo que queda mejor algo así que no es lo que tenía antes.
Tú tenías esto que, fíjate que le estás cambiando el fondo.
Un fondo del que acabas de salir.
Estás metiendo ahí unos cuadrados que están como confundiendo.
Que aquí tienes otros cuadrados.
Que aquí cambia otra vez de color.
Que no sé qué.
Y yo creo que muchas veces se os olvida que la simplicidad es lo mejor.
A lo mejor estaría mejor mover esto a la izquierda y esto ponerlo a la derecha, ¿vale?
A mí esto no me termina de gustar tampoco, ¿eh?
O sea, casi que prefiero...
Yo preferiría casi que se quede ahí.
Es que claro, es que ¿por qué no toquéis el height?
Es que el height no tiene sentido.
Vamos a arreglar uno para que nos hagamos la idea.
Yo haría algo así, ¿sabes?
De cada uno.
148, 148 y 148.
No sé.
Y ya lo dejaría en su sección porque creo que tampoco añade nada.
Aquí le añadiríamos un poco de padding, ¿vale?
Algo así.
Y a lo mejor esto lo pondría en otro sitio, ¿vale?
Que lo podrías poner incluso dentro de la sección anterior para que no quede ahí en medio.
Mis proyectos favoritos.
¡Hostia!
Yo esto...
Aquí te pasa otra vez lo de la accesibilidad, que no se lee bien.
El título lo pondría dentro de esta caja.
Es que aquí la información la tienes como muy separada, muy confusa, no queda muy clara.
Aquí tienes el título.
Aquí un botón.
Yo lo metería todo aquí, con el título, el botón.
O sea, intentaría meterlo todo porque está como muy, muy confuso.
Y es que esta letra es muy pequeña.
Casi no se va a leer.
12.
12 es el límite, pero es el límite no para texto, ¿eh?
Yo creo que debe ser más, ¿eh?
Debe ser más.
Para texto, ¿qué quieres que se lea?
Tiene que ser más.
Como mucho 12, tiene que ser una palabra, un tag, cosas así.
Este de Rauno, este tío, es muy crack.
La verdad es que este tío es muy, muy crack.
Que fíjate, que ya te dan ganas de darle a todo.
Y además, fijaos, que es que está muy chulo.
Entre que esto rota.
Entre que le puedes dar click a estas cosas que cuando te pones se mueven.
Mira.
Y esto, súper, súper chulo.
O sea, está chulo lo de los artículos.
Pero no soy súper, súper fan porque es que encima el tío se pasa demasiado de que escribe y se hacen un poco aburridillos, la verdad.
Me gusta también el menú este que tiene aquí abajo.
No sé si lo habéis visto.
Pero tiene aquí un menú muy chulo.
Puede ser a la home, para ir a las páginas, a los proyectos, las fotos.
Estas son las fotos que ha hecho.
Además, también tío hace unas fotos súper bonitas.
Están además fotos de Reino Unido, San Francisco.
O sea, son fotos por todos lados.
Esto, Twitter, está muy bonito el menú.
Para que no lo sepáis, es uno de los diseñadores de Bersel.
Entonces ya se nota dónde saca Bersel el buen gusto, ¿sabes?
No solo tiene a Raghun, es que también tiene al otro, que también es otro crack.
El del conejo.
Así que, pero no, muy chula, muy chula.
La verdad, y mira que esto, porque esto de los proyectos, claro, esto de los proyectos es utilizando todo el espacio.
Pero, no sé, es que le queda bien.
Claro, lo mete como unas cars así, y bastante sencillas.
Y como todos son con movimiento, y cada uno tiene su alto y su ancho, pues le queda súper, súper bien.
La verdad es que esta forma de mostrar proyectos, el tener como un masonry,
que no sé con qué librería lo estará haciendo, ni cómo lo está haciendo en realidad.
Esto, interactive, ah, sí, sí, son columnas.
O sea, está utilizando el grid, son dos columnas.
Pues mira, esto se puede copiar fácil.
Son dos columnas puestas ahí a mano, y ya está.
Pero claro, el tema es, ¿ves?
Claro, lo está haciendo con JavaScript.
Porque fijaos que aquí desaparece y lo mete todo en una columna, para poder guardar el orden.
Claro, es que esto lo tienes que hacer con un poco de JavaScript.
Necesitas hacer un poco de JavaScript para saber dónde tienes que meter cada uno.
¿Ves? Aquí tiene que tener tres columnas, por ejemplo.
Pero bastante elegante, la verdad.
Me parece muy, muy interesante.
¿Qué es Vercel?
Es mi empresa.
¿No conocía a mi empresa?
Pues es mi empresa.
Está bastante chula.
Está empezando, ¿eh?
Por eso no.
Entonces, ya tiene que tenerlas.
Bueno, ya está.
Listo.
Gracias por ver el video.