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.
<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.
<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.
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.
.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