El primer cambio importante es el nuevo uso del dominio https://ignacioac.online/ que compré desde la página https://hpanel.hostinger.com/domains
Por otra parte, lo primero que quería cambiar era la estructura de la página (y poner en español los títulos de cada página así como ordenaro los archivos), siguiendo los comentarios de la valoración de la web estática y revisando la página, asumí que la estructura no era la idónea para lo que estoy buscando. ¿Cuál es el objetivo de mi página? Como efectivamente con la versión de la página estática no quedaba muy claro, quería responderlo explícitamente. El objetivo principal es añadir información personal (sobre mi) que complemente mi cv, sin embargo también habrá una parte que se asemeje a mi cv. Además me gustaría tener un espacio que poder usar a modo de bibliografía personal, no sólo por recomendar los libros, si no para mi, ya que la lectura es algo que es indispensable para mi y me gustaría tener ese recurso de bibliografía online he ir aumentandola a medida que aumente la física. Como este espacio usando el modelo y estilo que decidí implementar ocuparía bastante en una página de intereses, las únicas opciones que veo es dejarlo a modo de menú desplegable (como en la versión estática, pero enlazándolo también desde algún lado en el que mencione la lectura.
Retomando la estructura de la página, me gustaría tener una página con información más personal, una página detallando mi formación y experiencia profesional, un menú desplegable en el que mantener la bibliografía ya mantenida e introducir otra página de sugerencias usando mysql o php y la página de contacto. También quiero añadir un footer.
El primer cambio ha sido modificar la paleta de colores, para que no fuese tan clara y combinase mejor con ciertas imágenes que pretendo añadir en el futuro y que comentaré en su momento. Además de darle un toque más personal a la página y diferenciador de la plantilla original, cambiando la estética de esta por completo. Además creo que esta nueva paleta de colores es más adecuada para una página web de este estilo, mezclando intereses personales con una parte profesional.
He decidido cambiar el color de fondo de la navbar, así como el de los elementos de esta para que vayan acorde al color del fondo.
Para realizar esto simplemento he modificado el color de fondo original por el nuevo, esto se puede apreciar en la línea 119 del archivo css para la navbar:
#header {
background: #5a5958;
box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.08);
z-index: 997;
padding: 15px 0;
}
Además, como he comentado antes, también he cambiado el color de las palabras así como de los elementos de redes sociales que se aprecian a la derecha. El cambio ha sido del color original a el #ddd4d4.
Me he dado cuenta que el menú desplegable con los cambios de estilo de css no se leía bien los elementos del desplegable ya que en el css estaba especificado que no se cambiaba el tipo de texto, pero claro, ahora con estos cambios esto ya no tenía sentido. Por eso lo he cambiado a esto:
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
font-weight: 600;
color: #5a5958;
}
No lo había comentado pero el botón de vuelta a arriba ha sufrido los mismos cambios.
Cambiando de tema, siguiendo la valoración de la web estática, he implementado un slider de imágenes usando JQuery:
He usado este vídeo de YouTube:
https://youtu.be/-YAgY4hVYAI?si=VJwrtdYfowkbJY7V como inspiración del slider. Sin embargo, he realizado cambios al css original y obviamente las fotos no serán las mismas. El cambio de fotos no se ve reflejado en las capturas anteriores ya que aún no las he implementado. Se verán representados más abajo, siguiendo el estilo cuaderno de vitácora.
Comentando el tema del archivo css, he añadido el estilo del slider al final de mi css original, realizando algunos cambios para que se ajustase al estilo de la página, por ejemplo reducir la anchura para que no genere espeacios indeseados a los lados de la página:
Añadí una "clase envoltorio" al estilo del slider para que no interfiriese con el estilo del resto de la página.
/*--------------------------------------------------------------
# Slider
--------------------------------------------------------------*/
.slider{
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Jost", sans-serif;
}
.slider-container{
width: 90%;
height: 100vh;
background-image: url('Images/bg-img.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.slider-images{
display: flex;
align-items: center;
gap: 21px;
}
.slider-images img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.slider-img{
width: 110px;
border-radius: 6px;
cursor: pointer;
position: relative;
transition: 0.7s ease;
}
.slider-images .slider-img:first-child, .slider-images .slider-img:last-child{
height: 450px;
}
.slider-images .slider-img:nth-child(2), .slider-images .slider-img:nth-child(6){
height: 550px;
}
.slider-images .slider-img:nth-child(3), .slider-images .slider-img:nth-child(4), .slider-images .slider-img:nth-child(5){
height: 655px;
}
h1{
font-family: "Jost", sans-serif;
font-size: 40px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 50%;
left: -10%;
transform: rotate(270deg);
transition: 0.7s ease;
}
.details{
position: absolute;
bottom: 43px;
left: 43px;
}
.details h2{
font-family: "Jost", sans-serif;
font-size: 26px;
font-weight: 700;
text-align: left;
line-height: 44px;
text-align: left;
color: #fff;
text-transform: uppercase;
transition: 0.7s ease;
display: none;
}
.details p{
font-family: "Jost", sans-serif;
font-size: 20px;
font-weight: 700;
text-align: left;
line-height: 33px;
text-align: left;
color: #fff;
text-transform: uppercase;
transition: 0.7s ease;
display: none;
}
.slider-img.active{
width: 766px !important;
height: 750px !important;
}
.slider-img.active h1{
display: none;
}
.slider-img.active .details p, .slider-img.active .details h2{
display: block;
}
}
He añadido un footer simple siguiendo el estilo de la navbar:
Además, he eliminado los iconos de twitter e instagram, por otra parte he enlazado los iconos de github y linkedin con mis correspondientes perfiles, haciendo la web más dinámica.
También he cambiado el icono que aparece en el navegador por uno más "universal".
He cambiado el color de la fuente a: #44ebd8;
Aquí se ve ya el cambio de imágenes y nombres realizados. La lista de personas que me inspiran es obviamente mucho más larga, pero para resaltar algunas de ellas creo que está bastante bien.
Además, he decidido eliminar la opción de la newsletter de recomendaciones debido a que esta página de libros está más enfocada a una bibliorafía personal que a recomendar, no descarto la idea de recomendar pero no es su uso personal, por eso he decidido eliminar esta opción. Sin embargo, añadiré una frase con una palabra que enlace a la página de contacto sugiriendo que si alguien quiere hacerme una recomendación de algún libro que lo haga sin problema!
Por otra parte, quiero añadir una opción de filtrar por años, para ir marcando los años en los que he ido leyendo los libros. Tambiém he completado la página con más libros (no los he leído desde la entrega de la web estática, son libros que no añadí para dicha entrega)
He añadido al footer un enlace a este blog, para que esté referenciado desde la página y viceversa desde el blog.
Comentarios
Publicar un comentario