Bootstrap

Usando Bootstrap para crear tu página de portafolio

Fernanda Amengual Tatsch

2 de ago. de 2024 • 16 min read

En este tutorial, detallaremos con un ejemplo completo cómo puedes crear una página de portafolio utilizando diversos recursos disponibles en Bootstrap, un framework para desarrollo web basado en HTML, CSS y Javascript. Para seguir los pasos a continuación, te sugerimos tener un conocimiento básico sobre HTML, CSS y Javascript para que puedas entender todas las etapas más fácilmente. También puedes tener a la mano nuestro dicionário de etiquetas HTML, que te ayudará a buscar rápidamente los marcadores.

¿Qué es un portafolio?

El portafolio es, de forma muy general, la vitrina de un profesional. Es en este espacio donde presentará sus ideas puestas en práctica y proyectos ya concluidos para que otras personas, sean reclutadores o no, puedan tener acceso a información sobre sus habilidades y conocimientos. En general, se resume a una sola página, que puede contener objetos estáticos o dinámicos, con archivos en diferentes formatos, ya sean texto, imagen, gif, video, pdfs o animaciones.

Bootstrap

Bootstrap, según la definición del propio sitio oficial de la tecnología, es “un kit de herramientas de front-end poderoso y repleto de recursos”, que posibilita crear soluciones en pocos minutos. Es un framework desarrollado en 2010 por Twitter que combina CSS y Javascript y permite la creación de páginas completas con componentes responsivos. El sitio oficial es https://getbootstrap.com/ y, en las próximas etapas, detallaremos cómo añadir la herramienta a tu proyecto.

Realizando la instalación

Hay algunas posibilidades para descargar y añadir Bootstrap a tu proyecto. En este tutorial, utilizaremos el terminal con npm, el gestor de paquetes de Node.js. Puedes aprender más sobre Node.js y npm haciendo clic en los enlaces referenciados.

Después de instalar el gestor de paquetes, abre el terminal y escribe: npm install bootstrap@5.3.0. Ahora, vamos a la creación del proyecto.

Layout de base

Para orientar el desarrollo de la página y usarlo como inspiración, creamos un layout base. A lo largo del proyecto, detallaremos cada elemento con el código correspondiente, pero puedes tener una idea de cómo quedará al final de la producción de este artículo:

Importante: las imágenes, incluida la de la joven, son del banco de imágenes gratuito Pexels y toda la información contenida en este modelo es ficticia.

Iniciando el proyecto

Para crear nuestro código, utilizaremos el editor Visual Studio Code (VS Code), que puede ser descargado en este link. Crea una carpeta y ábrela en el editor yendo a Archivo y luego Abrir Carpeta. Dentro de la carpeta, crea tres archivos: index.html, style.css e app.js.

index.html

El index.html es el archivo que almacenará todo nuestro código HTML. En este archivo, inserta el siguiente fragmento para iniciar la página. Siendo el <!DOCTYPE html>, el tipo de elemento que informa al navegador la versión del HTML; el <html>, el elemento raíz; el <meta>, los metadados, el <head>, el lugar donde informamos los datos generales sobre el documento; el <title>, que es el título de nuestra página; y el <body>, que es donde estarán todos los elementos en HTML.

<!DOCTYPE html>

<head>

<title>Portfólio</title>

</head>

<body>

</body>

</html>

Ahora, necesitamos hacer el enlace entre los archivos index.html e style.css, que se hará de la siguiente forma, con la conexión hecha dentro del <head>.

<!DOCTYPE html>

<head>

<title>Portfólio</title>

</head>

Necesitamos, aún en nuestro <head> hacer el enlace con Bootstrap. En la propia documentación de Bootstrap, puedes copiar las direcciones para añadir al código, como insertamos a continuación:

<!DOCTYPE html>

<head>

<title>Portfólio</title>

</head>

Repara que no realizamos el enlace con nuestro archivo Javascript. El motivo es muy simple: al insertar el lenguaje de programación en el <head>, el código del lenguaje será renderizado antes de la carga total de la página, lo que puede perjudicar la experiencia del usuario, que podría sentir lentitud en el proceso. Al insertarlo al final de la página, después del <footer>, permitimos que todo el código HTML y CSS se cargue y, posteriormente, la parte lógica de nuestra página.

De esta forma, lo añadimos justo antes del cierre de la etiqueta <body>, como puedes ver en el código a continuación:

</body>

</html>

Barra de desplazamiento

Antes de avanzar con la creación del contenido completo del <body>, vamos a agregar un elemento muy importante en nuestra página: la barra de desplazamiento. Sin las configuraciones siguientes, solo sería posible desplazar la pantalla utilizando el mouse, arrastrando la barra hacia abajo. Con el siguiente fragmento, esta acción se vuelve más intuitiva.

En el archivo HTML, dentro del <body>, inserta, antes de cualquier otro elemento, una <div>. Solo cierra esta <div> al final de tu código, después de todo el contenido.

<body>

En el archivo CSS, estiliza la etiqueta content con los siguientes atributos:

.content {

overflow: auto;

padding: 10px;

}

.content::-webkit-scrollbar {

width: 10px;

}

.content::-webkit-scrollbar-track {

background: #f1f1f1;

}

.content::-webkit-scrollbar-thumb {

background: #888;

border-radius: 5px;

}

.content::-webkit-scrollbar-thumb:hover {

background: #555;

}

¡Listo! La barra de desplazamiento está funcionando. En el gif que añadiremos al final de este tutorial, podrás observar los efectos de esta configuración. No olvides fijarte en la parte derecha de la página. Nuestro siguiente paso es crear la estructura de nuestra página, añadiendo algunas etiquetas principales dentro del <body>:

<body>

</header>

</section>

</section>

</section>

</section>

</footer>

</body>

Puedes entender más sobre las etiquetas HTML accediendo al Dicionário de Etiquetas HTML publicado aquí mismo en la Comunidad Revelo. Si estás leyendo la versión en español, accede a este link.

Básicamente, separamos en un encabezado, cuatro secciones y un pie de página para que podamos organizar mejor nuestro código. En la próxima etapa, añadiremos las clases e ids para que podamos referenciarlas en el archivo CSS.

<body>

</header>

</section>

</section>

</section>

</section>

</footer>

</body>

En este momento, añadiremos las demás estructuras en nuestro código HTML. Vamos a explicar cada una de ellas a continuación.

Encabezado

En el encabezado, añadiremos el menú principal que, en el caso de nuestra página, contendrá solo el ancla para nuestro formulario de contacto. Para crear el menú, añadiremos la etiqueta <nav con el enlace en la etiqueta <a>. Nota que utilizamos el href para realizar el anclaje con la información ubicada en el pie de página.

<a href="#rodape" class="menu-item" id="contato">CONTATO</a>

</nav>

</header>

Sección sobre mí

En la primera sección de nuestro archivo, añadiremos la información de identificación del creador del portafolio. Nota que añadimos la etiqueta <div>, que es un separador importante para que podamos organizar nuestros contenedores, especialmente cuando utilizamos el modelo Flexbox. Puedes leer más sobre esto en este artículo que publicamos recientemente: https://community.revelo.com.br/aprenda-flexbox-de-uma-maneira-divertida/. En el código a continuación, insertamos el texto con la etiqueta <p> y la imagen con la etiqueta <img>. Puedes notar que hay una etiqueta <br> en medio del texto. Sirve para separar en párrafos nuestra información, dando un espacio entre las frases.

<p id="texto-identificación">Hola, soy <br><strong>Eduarda</strong>.</p>

<p id="texto-complementar">Social media formada para el<br> Universidad Federal dedicada a<br> transforma tu marketing <br>negocio</p>

</div>

</div>

</section>

Sección de servicios

En la próxima sección, presentaremos un componente de Bootstrap llamado popover, que permite insertar información adicional cuando hacemos clic en un elemento. En nuestro caso, lo utilizamos solo con elementos textuales, pero es posible insertar imágenes y otros contenidos dentro del popover fácilmente. Puedes leer más sobre todas las posibilidades de uso en esta documentación de Bootstrap.

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="Marcando la diferencia" data-bs-placement="bottom" data-bs-content="Realizo toda la planificación estratégica de tu negocio en base a resultados." data-bs-custom-class="custom-popover">PLANIFICACIÓN</button>

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="Escribiendo la historia" data-bs-placement="bottom" data-bs-content="Desarrollo textos concisos y efectivos para promocionar tu marca en prensa y redes sociales" data-bs-custom-class="custom-popover">ESCRIBIENDO</button>

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="Creando recuerdos" data-bs-placement="bottom" data-bs-content="Tus clientes te recordarán asociando tu marca a un souvenir. Desarrollo diseños personalizados con toda la identidad visual de tu negocio" data-bs-custom-class="custom-popover">CREACIÓN</button>

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="Organizando la rutina" data-bs-placement="bottom"data-bs-content="Tu empresa necesita un calendario editorial bien definido. Además de planificar, creo una tabla con todo el contenido planificado para el mes, que estará disponible para tu validación" data-bs-custom-class="custom-popover">CRONOGRAMA</button>

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="El momento más esperado" data-bs-placement="bottom" data-bs-content="Mi trabajo está enfocado a resultados, por ello, desarrollo informes completos para que puedas monitorear los efectos de mi trabajo en tu negocio" data-bs-custom-class="custom-popover">RESULTADO</button>

</div>

</section>

Nota que la estructura de un componente de Bootstrap es muy simple, teniendo el type, que identifica el tipo de elemento; la class, que es la etiqueta que utilizaremos para estilizar con el CSS; el data-bs-toggle se utiliza para controlar el comportamiento del componente.

En este caso, mostrar u ocultar el popover; el data-bs-title, que almacena la información del título del componente; el data-bs-placement, que indica la posición en la que el popover debe expandirse; el data-bs-content almacena el contenido que deberá ser mostrado en el componente debajo del título; y el data-bs-custom-class sirve, como su propio nombre indica, para crear una clase personalizada para el componente, de modo que sea posible alterar algunos atributos que ya están predefinidos.

Grandes proyectos

A continuación, añadimos el título de la próxima sección, que presentará nuestros casos de éxito:

<div class="titulo-cases"><p id="texto-titulo-cases">GRANDES <strong>CASES</strong></p></div>

Sección de servicios

En este espacio, utilizamos un nuevo componente de Bootstrap llamado card. Puedes encontrar más detalles en esta página de la documentación oficial. En el código a continuación, nota que la estructura del componente ya es conocida, con <div> para separar los elementos, <img> para añadir imágenes y <p>para añadir textos, además de las clases ya comprendidas anteriormente. Sin embargo, hay un detalle. Observa que hay un elemento adicional, que es style="width: 18rem;". Este fragmento solo añade una estilización del CSS dentro del HTML, añadiendo la etiqueta <style> y, posteriormente, el tipo de personalización deseada. En este caso, está definiendo el ancho del elemento.

<p class="card-text">Identidad visual creada para tienda de ropa dirigida a público femenino</p>

</div>

<p class="card-text">Planificación, creación y posicionamiento de marca en redes sociales estratégicas</p>

</div>

<p class="card-text">Creación de acción virtual exclusiva para cadena de cines con el objetivo de captar nuevos clientes</p>

</div>

</section>

Sección de conocimientos y habilidades

En esta sección, añadimos un elemento simple con solo contenido textual, que será personalizado en nuestra hoja de estilo para que quede exactamente en el modelo del layout presentado anteriormente.

<div class="titulo-conocimientos"><p>CONOCIMIENTOS Y HABILIDADES</p></div>

<p class="texto-conocimientos">FIGMA</p>

<p class="texto-conocimientos">PHOTOSHOP</p>

<p class="texto-conocimientos">ILLUSTRATOR</p>

</div>

<p class="texto-conhecimentos">INDESIGN</p>

<p class="texto-conhecimentos">PREMIERE</p>

<p class="texto-conhecimentos">ADOBE XD</p>

</div>

<p class="texto-habilidades">DESIGN GRÁFICO</p>

<p class="texto-habilidades">REVISIÓN</p>

<p class="texto-habilidades">EDITORIAL</p>

</div>

<p class="texto-habilidades">INBOUND MARKETING</p>

<p class="texto-habilidades">MEDIOS DE COMUNICACIÓN</p>

<p class="texto-habilidades">EDICIÓN DE VIDEO
</p>

</div>

</section>

Pie de página

El <footer>, o simplemente pie de página, posee las entradas de datos a partir de los inputs, los placeholders, que son las palabras que aparecen dentro del input para indicar lo que necesita ser llenado, y los textos complementarios.

<p id="titulo-rodape">Curtiu?</p>

<p id="texto-rodape-contato">Póngase en contacto utilizando el formulario o correo electrónico a continuación<br> y hablemos!</p>

<p id="texto-rodape">eduarda@meuportfolio.com</p>

</div>

<button type="submit" class="btn-form">Enviar</button>

</form>

</footer>

style.css

En la próxima etapa de nuestro proyecto, añadiremos a la hoja de estilo las clases e ids que incluimos anteriormente en nuestro código HTML para personalizar nuestra página.

Como utilizamos una fuente externa, necesitamos importarla en nuestro proyecto. La fuente elegida fue Montserrat, de Google Fonts.

@import url('<https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap>');

Ahora, vamos a "resetear" las configuraciones que, por defecto, ya incorpora nuestra página, además de añadir nuestra fuente principal que será utilizada en todo el proyecto.

margin:0;

padding:0;

box-sizing: border-box;

text-decoration: none;

font-family: 'Montserrat', sans-serif;

}

Menú

La estilización del menú, que es muy simple y posee solo un enlace anclado en el pie de página, quedó de la siguiente manera:

.menu-item{

display: flex;

justify-content: right;

padding: 24px;

color: #254E70;

text-decoration: none;

padding-right: 5%;

font-weight: bold;

}

Sección principal

En este fragmento, personalizamos la primera sección de nuestro proyecto.

.textos-principal{

display: flex;

flex-direction: column;

color:#254E70;

}

#texto-identificación{

background-color: #254E70;

color: #ffffff;

font-size: 35px;

border: 1px #254E70 solid;

padding: 10px 40px 10px 20px;

border-radius: 40px;

width: 270px;

}

#imagem-menina{

width: 24%;

}

Sección de servicios

La sección de servicios fue personalizada de la siguiente manera:

.servicos{

display: flex;

margin-top: 5%;

text-align: center;

gap: 30px;

place-content: center;

}

.btn-danger{

background-color: #C33C54;

padding: 25px;

border: none;

border-radius: 35px;

color: #ffffff;

}

.custom-popover, .popover-body{

color: #254E70;;

}

Sección de proyectos

Los títulos y las tarjetas son personalizados en el código a continuación:

.titulo-cases{

color: #C33C54;

font-size: 20px;

text-align: center;

}

.titulo-cases {

margin-top: 5%;

}

.cartoes{

display: flex;

place-content: center;

gap: 2%;

color: #254E70;

border-color: #254E70;

}

Sección de conocimientos y habilidades

Este fragmento del código contiene la estilización de los elementos textuales añadidos en la sección de conocimientos y habilidades. Nota que todo fue posicionado, alineado, bordeado y coloreado con el uso del CSS.

.titulo-conocimientos{

color: #C33C54;

font-size: 20px;

text-align: center;

margin-top: 1%;

}

.itens-conocimientos{

margin-top: 2%;

display: flex;

gap: 13px;

justify-content: center;

}

.elementos-conocimientos-columna-uno, .elementos-conocimientos-columna-dos, .elementos-conocimientos-columna-tres, .elementos-conocimientos-columna-cuatro{

display: flex;

flex-direction: column;

}

.texto-conocimientos, .texto-habilidades{

border: 1px solid;

padding: 10px;

border-radius: 30px;

text-align: center;

}

.texto-conocimientos{

color:#254E70;

border-color: #254E70;

}

.texto-habilidades{

border-color: #C33C54;

color:#C33C54

}

Pie de página

Ahora, estilizaremos el pie de página de nuestra página, que está compuesto por texto y un componente de formulario:

#rodape{

display: flex;

gap: 110px;

padding: 120px 0 150px 0;

place-content: center;

}

#inputText, #inputEmail, #inputSubject, #inputTextArea{

background-color: #254E70;

border: none;

padding: 0 0 5px 0;

font-weight: bold;

}

.form{

display: flex;

flex-direction: column;

gap: 5px;

width: 350px;

}

#titulo-rodape{

font-size: 20px;

font-weight: bold;

color: #254E70;

}

#texto-rodape-contato{

font-style: italic;

color: #254E70;

}

#texto-rodape-titulo-email{

font-weight: bold;

color: #254E70;

}

#texto-rodape{

color: #254E70;

margin-top: -20px;

}

::placeholder{

color: #ffffff;

font-size: 12px;

padding: 10px;

}

.btn-form{

background-color:#C33C54;

width: 120px;

margin-left: auto;

border-radius: 80px;

border: none;

color: #ffffff;

font-weight: bold;

}

Responsividad

Necesitamos pensar en la responsividad de nuestro código, es decir, la página debe adaptarse a ciertos tamaños de pantalla y dispositivos. Para esto, utilizamos las media queries (@media), que permiten añadir estilizaciones específicas bajo ciertas condiciones.

Para dispositivos con un ancho de pantalla de, como máximo, 600px, las estilizaciones serán las siguientes:

@media (max-width: 600px){

.textos-principal{

display: flex;

flex-direction: column;

color:#254E70;

font-size: 11px;

padding-left: 10px;

}

#texto-identificación{

background-color: #254E70;

color: #ffffff;

font-size: 20px;

border: 1px #254E70 solid;

padding: 10px 40px 10px 20px;

border-radius: 40px;

width: 200px;

}

#imagen-niña{

width: 30%;

}

.servicios{

display: flex;

margin-top: 5%;

text-align: center;

place-content: center;

gap: 1%;

}

.btn-danger{

background-color: #C33C54;

padding: 10px;

border: none;

border-radius: 35px;

color: #ffffff;

width: 100px;

font-size: 9px;

}

.texto-conocimientos, .texto-habilidades{

border: 1px solid;

padding: 7px;

border-radius: 30px;

text-align: center;

font-size: 9px;

}

#rodape{

display: flex;

gap: 20px;

padding: 60px 40px 60px 40px;

place-content: center;

font-size: 12px;

}

Revisa cómo quedó:

Para dispositivos más grandes, con un ancho de pantalla de hasta 1000px, las estilizaciones quedaron de la siguiente manera:

@media (min-width: 600px) and (max-width: 1000px){

.textos-principal{

display: flex;

flex-direction: column;

color:#254E70;

font-size: 15px;

padding-left: 10px;

}

#texto-identificación{

background-color: #254E70;

color: #ffffff;

font-size: 30px;

border: 1px #254E70 solid;

padding: 10px 40px 10px 20px;

border-radius: 40px;

width: 250px;

}

#imagen-niña{

width: 40%;

}

.servicios{

display: flex;

margin-top: 5%;

text-align: center;

place-content: center;

gap: 1%;

}

.btn-danger{

background-color: #C33C54;

padding: 20px;

border: none;

border-radius: 35px;

color: #ffffff;

width: 150px;

font-size: 9px;

}

.texto-conocimientos, .texto-habilidades{

border: 1px solid;

padding: 7px;

border-radius: 30px;

text-align: center;

font-size: 15px;

}

#rodape{

display: flex;

gap: 20px;

padding: 60px 40px 60px 40px;

place-content: center;

font-size: 12px;

}

Revisa el resultado:

app.js

Para que nuestro popover funcione, necesitamos añadir algunos comandos en Javascript. Estos están descritos en la propia documentación del componente y puedes revisarlos a continuación:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')

const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

En este fragmento, obtenemos los datos de nuestro componente por el atributo data-bs-toggle con el método document.querySelectorAll() e inicializamos un nuevo objeto Popover para cada uno de estos elementos usando la biblioteca de Bootstrap, almacenándolos en la constante llamada popoverList.

¡Finalizamos nuestro tutorial!

En este artículo, aprendiste cómo crear una página de portafolio para presentar tus conocimientos y habilidades, además de casos de éxito y servicios utilizando algunos componentes de Bootstrap.

💡

Las opiniones y comentarios emitidos en este artículo son propiedad única de su autor y no necesariamente representan el punto de vista de Listopro.

Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.