#Gab Zeta webs
open falcon
No sé si este logo lo hiciste vos
pero yo que vos encuentro otro
yo normalmente busco iconos svg que me agraden y los uso como logos
hollow thicket
Hola! Si lo hice yo, pase por varios logos ya este es el que mas duro 😛
open falcon
Yo por ejemplo uso este
busque por internet y este me encantó y lo uso
bien simple
y pega con todo
esa web recopila otras webs de iconos
siguiendo con tu web:
creo que algo obvio es que tenes que cambiar la imagen de fondo
hollow thicket
Veo que no gusta la imagen, me dijeron de desenfocarla tambien
open falcon
si
en si no es que no guste
más bien no queda acorde a un portfolio y a una web de este estilo
hollow thicket
Y que se recomienda? algo liso y ya?
open falcon
depende de los colores
normalmente deberías usar una paleta o gamma de colores especificos
y ver que el fondo quede con ellos
mira
ahí modifique un poco tu web en mi navegador para probar como se vería
cambié el fondo por un color gris
tu nombre debe ir más grande que "Web developer"
además estás separando con margenes y padding
eso mejor deja de hacerlo ya, debido a que es una muy mala practica
siempre que quieras dividir dos cosas como los botones de linkedin y github por ejemplo, usa display flex con gap
el gap es una buena forma de dividir cosas
hollow thicket
uso gap en varios lados, pero si, voy dandole forma con padding.
lo oy a tener en cuenta.
open falcon
obviamente esos botones hay que modificarlos
pero también está mal su html
no insertes un button dentro de un a (anchor)
el anchor ya de por si podes usarlo como un button
el button es casi lo mismo solo que el anchor te envía hacia otra página
hollow thicket
Si, eso lo tuve en cuenta, a veces lo hago como para tener una capa mas encima y tratar los elementos por separado.
open falcon
si querés te paso algunas de mis webs para que veas como hacer botones y demás
hollow thicket
Si si
hollow thicket
Es todo muy a mano lo que hago, mas quiero estudiar algoritmos y lo que es diseño va saliendo como lo ves, por eso todo suma
open falcon
no siempre tenés que usar los iconos como el -> de ahí
porque eso no es necesario
ahí modifiqué los tuyos para que se vean así
este fue el css
hollow thicket
Me interesa mucho lo que es flex, grid, y toda la semantica, lo que es diseño, o sea, lo visual es como que voy sobre la marcha, trato de entender bien como acomodar los elementos, y poder implemetar un responsive sin tener que estar cambiando todo.
open falcon
aunque yo generalmente prefiero no usar texto sino iconos
este es mi portfolio
ahí ves en la esquina superior derecha como los uso
hollow thicket
Me compartis el link? para verlo a detalle
open falcon
Me interesa mucho lo que es flex, grid, y toda la semantica, lo que es diseño, o...
lo que te recomiendo es aprender bien CSS, aunque no sea lo que más busques lo que se ve siempre bien ayuda, como dice midu todo debe entrar por los ojos
y de ahí aprendé tailwind css
hollow thicket
deberia poner un fondo de este estilo quizas, un gradient con todo oscuro. Mas simple tambien. Menos engorroso.
open falcon
Me compartis el link? para verlo a detalle
está hecho con tailwind css no con css puro
open falcon
deberia poner un fondo de este estilo quizas, un gradient con todo oscuro. Mas s...
exacto
lo más simple es mejor
igual mi portfolio no está terminado
hollow thicket
Estoy emepezando con tailwind, pero como te digo, me centro por ahora en entender semantica y poder adaptarlo a responsive, voy usando recursos de ux que voy encontrando 😛
open falcon
Estoy emepezando con tailwind, pero como te digo, me centro por ahora en entende...
el responsive con tailwind es una locura de lo bueno que es
por eso te digo
tailwind ayuda en todo
hollow thicket
Siento que tailwind ahorra mucho tiempo, hace poco empece lo implemente en mis proyectos
hollow thicket
Claro, muy util, pasa que yo me estoy yendo para el lado del backend de a poco, y no meti a ux a fondo. Mas que lo basico y tailwind.
open falcon
siguiendo con tu web, viste que usas width con porcentaje? eso también es un error a menos que sea bien claro, nunca modifiques los porcentajes porque se rompe la web. En algo que está bien usado pero a la vez lo pusiste en el lugar equivocado es el width; 92%; en tu body
porque si te fijás tu header está cortado en los lados
a mi en general no me gusta eso de cortar el header
tenés que hacerlo demasiado bien para que me guste un poquito
yo en general si te fijas uso también un max-width para que la web no se estire
pero lo uso en el main y en el footer
hollow thicket
Si, lo sentia muy ancho el body y lo baje un poco, el header se veia raro con el body a 92 y lo puse del mismo tamaño
open falcon
luego no necesito usarlo más
open falcon
Si, lo sentia muy ancho el body y lo baje un poco, el header se veia raro con el...
en mi portfolio lo uso así
con diferentes width
pero obvio que la diferencia debería ser de más porcentaje
otra cosa
donde casi siempre hay que usar max-width
es en los textos
a este texto ya le saqué el background que le pusiste porque obvio con un fondo gris ya no precisa
pero si te fijas en la web directamente el texto es muy largo
hollow thicket
ah largo el elemento
Si, me comentaron tambien de ponerlo junto con el avatar y mi nombre
todavia no lo probe, pero me imagino los 3 elementos en fila capaz queda bien, igual eso seria para la resolucion maxima
open falcon
creo que ahí es obvia la diferencia
de hecho no sé si conoces el text-wrap ??
es "nuevo"
hollow thicket
Si, sugeris dejarlo donde esta y reducir el ancho?
hollow thicket
de hecho no sé si conoces el text-wrap ??
Eh si lo vi no me acuerdo
Ahi lo investigo
open falcon
Si, sugeris dejarlo donde esta y reducir el ancho?
exacto
open falcon
Ahi lo investigo
fijate
este es con text-wrap balance
este es con text-wrap pretty
viste como ocupa espacios?
hollow thicket
Claro es menos raro que tener todo a lo ancho de la pantalla
open falcon
uno intenta dejar todas las líneas usando el mismo width y el otro lo acomoda de forma que quede más lindo
además como te dije, ahí usé flex con gap
y el título SIEMPRE separado y con font weight mayor
es algo que vas a aprender luego
la coherencia de los textos
y no solo sobre escribirlos
por ejemplo
título > tu nombre > "web developer" > texto
ese es un ejemplo raro pero que sirve
por ejemplo una incoherencia que tuviste
el título "sobre mí", lo pusiste hacia la izquierda
pero el de "proyectos" hacia el centro
siempre hay que ponerlos hacia el mismo lado, a menos que la página lo requiera
también con el mismo font-size y el font-weight
hollow thicket
el título "sobre mí", lo pusiste hacia la izquierda
Es verdad es el unico que no esta centrado 😛
El responsive lo viste masomenos?
open falcon
xd
lo vi si
yo hacia lo mismo de modificar mucho el responsive
con tailwind vas a aprender que a menos que sea una página difícil entonces solo se modifica una o dos veces
y a su vez la modificación es al revés
no se modifica para celulares
se programa con el "mobile first"
osea primero celulares
hollow thicket
Si si, arranco desde ahi ahora que empece con tailwind
y tenia varios proyectos con css puro, que los fui modificando con tailwind y les adapte un responsive aunque sea zafable
open falcon
de hecho veo que si
hollow thicket
bah, esos que estan en el portf
open falcon
mira las diferencias
de hecho los botones de linkedin y github como los del header son muy grandes
no es necesario
achicalos todos un poco igual que tu logo y la imagen esa de color piel
hollow thicket
Dale, voy a ir aplicando todo esto, lo de los textos voy a investigar, las distintas formas de acomodarlos me parecio interesante
y los proyectos los enfoque mas en las integraciones para una api que tambien tengo en deploy, se que los diseños son muy pobres. Pero bueno le puse onda xd
lo proyectos que estan en el portf
open falcon
aguanta que tengo tiempo para ayudarte
ahora te ayudo con los proyectos
otro tipo de coherencia que tenés que aprender es sobre las secciones
fijate como tenés tus tecnologías antes que tus proyectos
cuando en realidad alguien que te quiere conocer va a ver antes tus proyectos
igualmente esa zona de tecnologías podrías dejarla aunque no es necesaria tan grande
ni tampoco que les pongas un fondo blanco y les pongas border radius
lo mejor es que descargues los iconos svg de cada uno
y los pongas en un tamaño correspondiente
además los iconos también tienen su tipo de coherencia
porque hay muchos tipos de iconos
con colores distintos, con los mismos colores, con fondo o sin fondo, redondeados, con o sin relleno, con barras o sin barras
esta web ya te la pase
por las dudas te la dejo otra vez
hollow thicket
Claro, me ahorraria tener que estar agregandole estilos a cada imagen
open falcon
siguiendo con el resto
el formulario de contacto es excesivamente grande
no es demasiado
es excesivo
yo nunca uso formularios de contacto
ya quedaron viejos
y prefiero que contacten por gmail directamente
pero si querés usarlos, mucho más chicos
por lo menos que entre en la pantalla
pero todo en general es muy grande
y los botones tmb
son demasiado grandes xd
otra cosa muy muy grande
estos textos con estos iconos
lo de los iconos ya hablamos
pero el hecho de tener una imagen y los iconos es no usar tanto texto
este texto y ya
nada más
modificalo como quieras
pero es imposible que alguien lea todo eso
y menos sin colores ni nada
fijate como yo uso colores para llamar la atención
en los puntos claves e importantes
también la imagen de los proyectos es muy grande
hollow thicket
Claro, tenia un texto asi cortito como el que me pasaste, pero me queda tanto espacio que le agregue mas caracteristicas porque se me hace raro verlo vacio, teniendo en cuenta que es dificil que alguien lea todo eso, por eso puse una separacion entre los textos, lo primero seria lo mas resumido y los segundo se supone que es lo mas tecnico de la app, lo que se me ocurre con lo que me decis seria agregarle color al primer parrafo y el otro dejarlo como esta como texto secundario.
open falcon
que no ocupe todo
hollow thicket
que no ocupe todo
eso tambien, pense en hacer mas estilo cards que ocupe ya de por si toda la seccion de proyectos mucho menos espacio y que esten en fila, o columnas de 2 a medida que agregue mas proeyctos
hollow thicket
Claro, tenia un texto asi cortito como el que me pasaste, pero me queda tanto es...
agregar span en palabras clave y resaltarlas de alguna manera
open falcon
eso tambien, pense en hacer mas estilo cards que ocupe ya de por si toda la secc...
así como los mostras si solo usas menos de 4 o 4 proyectos está perfecto
solo que deberían ser mucho más chicos
open falcon
Claro, tenia un texto asi cortito como el que me pasaste, pero me queda tanto es...
siento que no
creo que mejor es solo sacarlo
en general uno pierde la atención si es tanto texto
es obvio que uno siempre quiere describir sus proyectos al máximo
pero en si mismo los proyectos deberían describirse a si mismo y si no pueden entonces ahí se escribe acá
hollow thicket
Bueno queria armar un diseño nuevo para probar
de la seccion de proyectos
le saque la imagen que nadie quiere :p
y el texto quedo mas compacto
open falcon
sacale los background de fondo a los textos
no hace falta decir que eso queda muy mal
hollow thicket
Si, eso estoy modificando, con la imagen oscura que tenia antes no se distinguian casi
hollow thicket
Si, igual, tene en cuenta que esas webs no estan enfocadas en el front, los diseños los hice como me fue saliendo, y luego le agregue tailwind para todo lo que es flex, grid, etc.
open falcon
igual creo que si seguís mis consejos en las demás webs no hay mucho que decir
open falcon
Si, igual, tene en cuenta que esas webs no estan enfocadas en el front, los dise...
entiendo si
hollow thicket
Porque si te enfocas en el front, le falta mucho
open falcon
pero siempre es mejor que se vean bien
hollow thicket
y soy conciente de eso
Sisi, considero que cada vez se ven mejor, pero no me meti a detalle con eso, a lo que voy es que cosas para modificar y mejorar vas a encontrar miles 😛
open falcon
mira un error que tuviste en la de dota2 y no en la otra
es un error común en la gente
así se ve cuando la animación terminó
pero si te das cuenta al dejar de poner el mause encima la animación termina bruscamente
eso pasa porque pusiste la animación o la transición sobre el hover
y no sobre el elemento
hollow thicket
Si, creo que es un scale en el hover
open falcon
en tu caso fue la transición
el scale está bien
tiene que ir en el hover sino se escala siempre
pero la transición de .5s está en el hover
eso va en el elemento
sin el hover
open falcon
creo que no hay mucho más que decir
hollow thicket
No, y eso que no la viste antes de que le agregue tailwind y un poco de cariño jjaja
open falcon
siempre que tengas una pregunta o algo que pienses que puede mejorar mandame mensaje y te ayudo
open falcon
No, y eso que no la viste antes de que le agregue tailwind y un poco de cariño j...
digo que no hay mucho más que decir porque las web en general si cometes un error entonces lo cometés en todas
me pasa igual
todo lo que te dije te sirve para todas las webs que hagas o hayas hecho
bueno te dejo que ando mirando el partido de italia
ta luego
