Una buena Portada
Se dice que hoy en día solo contamos con 3 segundos de atención para enganchar a nuestros visitantes, antes de que dejen nuestro sitio abruptamente. Por lo que una buena portada es fundamental para capturar su atención. Lo que te recomendamos es que incluyas una imagen de fondo con tipografía agradable y el logo de tu marca personal.
Para ello, Bootstrap nos permite asegurar que nuestro logo sea completamente responsivo mediante la clase ‘img-responsive’, sin importar el ancho del dispositivo, además nos da una forma muy sencilla de crear nuestro menú responsivo y estático en la parte superior para que mantenga su posición sin importar el scroll mediante la clase ‘navbar-collapse’ y ‘page-scroll’. Para que la imagen de fondo ocupe toda la pantalla del dispositivo deberemos agregar una implementación parecida a la siguiente:
Con la clase ‘col-md-12’ aseguraremos que nuestro contenido ocupe todo el ancho de la pantalla, pues Bootstrap la divide en 12 columnas y con esta clase le decimos que las ocupe todas. Así mismo, con la clase ‘container’ agrupamos los elementos dentro de la etiqueta que lleva esta clase, como un bloque. Finalmente, como se puede apreciar usamos clases y ID’s propios que referencian a nuestro CSS personalizado.
<section id=”intro”>
<div class=”intro-body text-center”>
<div class=”row”>
<div class=”col-md-12 intro-content”>
<div class=”intro-text-center”>
<img src=”assets/img/codesolt.png” width=”100%” class=”img-responsive img-rounded” />
<h2 style=”font-size: 35px”>Carlos Salazar</h2>
</div>
Nuestro CSS personalizado agregará la imagen de fondo y la pondrá como portada (sin repetirse, centrándola y ocupando todo la pantalla tanto de ancho como de alto). Además de asegurarse que el contenido mostrado se alinee al centro de forma responsiva.
#intro {
position: relative;
display: table;
width: 100%;
height: auto;
background-image(“../img/bg-intro.jpg”);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#intro .intro-body {
position: relative;
display: table-cell;
vertical-align:middle;
}
Proyectos o Especialidades
La sección de proyectos o especialidades es fundamental, incluso podrías tener ambas. El objetivo es que tus clientes, colegas o seguidores puedan apreciar tu trabajo y algunos ejemplos de lo que haces o incluso que estén conscientes de tus habilidades más fuertes y tu experiencias más relevantes.
Boostrap nos permite utilizar clases de CSS predefinidas para alinear los elementos a la derecha y colapsarlos hacia abajo en un brake-point predefinido por el framework, cuando el ancho de la pantalla así lo requiera. Por otro lado los iconos son muy fáciles de agregar mediante clases de CSS en la etiqueta ‘i’ mediante Font Awesome que es una librería de iconos responsivos muy popular.
<div class=”row”>
<div class=”col-sm-4 col-md-4”>
<div class=”funny-boxes float-shadow not-right-column-text-center”>
<span class=”funny-boxes-icon”>
<i class=”fa fa-globe”></i>
</span>
<div class=”funny-boxes-text animated flipInY delayp1” style=”opacity: 1;”>
<h4>Java / Spring</h4>
<p>Web and Stand Alone Java applications using the most relevant Java frameworks of the software Industry.</p>
</div>
</div>
</div>
Como agrupamos cada habilidad (o proyecto) dentro de un div con la clase ‘col-sm-4’ Bootstrap usará una tercera parte de la pantalla, de tal modo que al tener 3 habilidades, las presenta de forma horizontal en una sola línea, recordemos que Boostrap divide la pantalla en 12 columnas.
En el CSS, usamos nuestra clase personalizada llamada ‘funny-boxes’ para darle el color y el borde deseado, así como un cambio de color cuando el apuntador pase por encima de estos elementos.
.funny-boxes:hover > .funny-boxes-icon {
background-color: #3996cc;
}
.funny-boxes > .funny-boxes-icon {
border: 1px solid #3996cc;
color: #3996cc;
}
.funny-boxes > .funny-boxes-text > h4:after {
background-color: #3996cc;
}
Testimonios o Recomendaciones
Esta sección es básica para generar confianza en las personas que nos visitan, pues al ver testimonios o recomendaciones de otros profesionales del medio, se sentirán más cómodos de comenzar proyectos con nosotros por el simple hecho de que ya lo hemos realizado anteriormente con éxito. Para este tipo de apartados podemos usar Boostrap para alinear cada testimonio a la derecha y colapsarlos hacia abajo cuando así se requiera, justo como en la anterior sección. También, mediante HTML, deberemos agrupar correctamente cada testimonio en un con su título, texto, imagen y referencias necesarias. Cada testimonio se agrupa en un div que lleva la clase ‘col-md-4’ para ocupar solo la 3 parte de la pantalla y tener 3 testimonios por fila. La clase ‘clearfix’ nos ayudará a mostrar nuestro contenido en forma de tablas. Para el estilo de los testimonios agregamos algunas clases personalizadas (‘testimonial’).<div class=”col-md-4”>
<div class=”testimonial-item”>
<div class=”testimonial-content”>
<p style=”font-weight:500” class=”testimonial-title”>UNAM Mobile</p>
<blockquote>
<p>Carlos is an enthusiastic of the new web technologies. Always going beyond on his professional development. I have worked with him on many projects and he is very proactive</p>
</blockquote>
</div>
<div class=”testimonial-info clearfix”>
<img width=”110” src=”assets/img/testimonial/testimonial-image-1.jpg” class=”img-circle img-thumbnail”/>
<p style=”font-weight: bold” class=”testimonial-author”>
@ Abner Castro
<em style=”font-weight:bold”>iOS Developer at UNAM Mobile</em>
</p>
</div>
</div>
</div>
En nuestro CSS agregamos las propiedades de nuestras clases personalizadas, en donde simplemente les agregaremos un color de fondo. Cabe mencionar que los tamaños de margen y letra en la clase ‘testimonial-author’ deben ajustarse al tamaño de pantalla, por lo que será necesario agregar brake-points con media queries.
.testimonial-item > .testimonial-content {
background: #3996cc;
}
.testimonial-item > .testimonial-content:after {
border-top-color: #3996cc;
}
.testimonial-item > .testimonial-info .testimonial-author {
color: #fff;
font-size: 16px;
margin-top: 10px;
}
Certificaciones
La parte de certificados le permite a potenciales socios, clientes o empleadores estar seguros (en cierto sentido), que contamos con las habilidades suficientes para realizar las tareas y proyectos propios del perfil con el que nos describimos. Si bien, una certificación no asegura el alto desempeño de un profesional, si habla mucho de la disciplina con la que se trabaja y de la superación que se busca.
Para este tipo de apartados que contienen imágenes más grandes, usamos la clase ‘img-responsive’, justo como en la sección de la portada, con la cual nos aseguraremos que nuestras imágenes no se desborden a pesar del ancho de la pantalla. Al final de esta sección podemos agregar un botón con la clase ‘btn’ en una etiqueta ‘a’ para tener un botón igualmente responsivo. El tema de alinear a la derecha los elementos y colapsarlos de acuerdo al ancho de la pantalla, también se soluciona con las columnas de boostrap.
Para el caso particular de Codesolt, al dar click en cada una de las imágenes se abre un moodle para que el usuario pueda apreciar los certificados con mayor detalle, esta tarea se puede realizar con jQuery o incluso con css puro.
Contacto y Redes sociales
La parte final, la sección en la que culmina el trabajo con nuestro portafolio en línea, conectar con las personas que se han encontrado con nuestra página y crear comunidad, crecer nuestra red profesional, acceder a oportunidades laborales o incluso encontrar el socio correcto para esa Start-up increíble que estamos por iniciar. La parte de Contacto y Redes Sociales es la puerta para poder charlar de forma más directa con las personas que están interesadas en nuestro perfil, también es muy buena opción considerar un formulario de contacto si así se desea.
Para realizar efectivamente esta sección, Bootstrap deberemos usar las columnas también, así como los iconos de Font Awesome y un efecto parallax, que también se usó en la sección de testimonios y en la portada
El efecto parallax (estática durante el scroll) se puede lograr de diferentes formas y complicarse tanto como queramos; pero en general, este efecto en una imagen de fondo de la siguiente forma, agregando las siguientes propiedades a una clase personalizada:
.parallax-effect {
background-attachment:fixed;
background-position: center;
background-repeat: no-repeat;
background-image: url(../img/bg-keep-in-touch.jpg);
background-size: cover;
}
En términos generales así es como puedes usar Boostrap para crear un portafolio en línea efectivo, por su puesto se requerirá cierta personalización en tu CSS específica de acuerdo a tus necesidades, pero dominar Bootstrap te dará una enorme ventaja en términos de la manipulación de CSS y HTML. Podrás pensar de forma estructurada en cuanto a la arquitectura del diseño front-end.
Si te ha gustado este framework o te da curiosidad aprenderlo a detalle, puedes especializarte mucho más con el curso de Platzi de Boostrap y Foundation, en el que se explica a fondo cómo usar estos 2 grandes frameworks front-end para la construcción de sitios web responsivos.
Los ejemplos de código mostrados en este artículo son una base muy general para construir diseños parecidos a los mostrados en las imágenes, se requiere de una personalización a detalle para lograr un diseño que realmente represente tu marca personal.0 Comments
to write your comment
