Una tarjeta de presentación personal en tu página web es una sección destacada que resume quién eres, qué haces y cómo pueden contactarte. Funciona como una versión digital de una tarjeta de visita tradicional, proporcionando a los visitantes una visión rápida y concisa de tu perfil profesional.
Fundamento y utilidad de la tarjeta de presentación personal
Incorporar una tarjeta de presentación en tu sitio web ofrece múltiples beneficios:
Identidad profesional: Permite a los visitantes conocer tu nombre, profesión y especialidades de manera inmediata.
Credibilidad: Una presentación clara y profesional aumenta la confianza de los usuarios en tus habilidades y servicios.
Accesibilidad: Facilita que potenciales clientes o empleadores encuentren rápidamente información de contacto o enlaces a tus redes sociales.
Cómo y por qué crear una tarjeta de presentación personal
Para diseñar una tarjeta de presentación efectiva utilizando HTML y CSS, sigue estos pasos:
Estructura HTML: Crea un contenedor principal que englobe todos los elementos de la tarjeta. Dentro de este, incluye:
– Imagen de perfil: Una foto profesional que humanice tu presentación.
– Nombre y título profesional: Utiliza etiquetas de encabezado (<h1>, <h2>) para resaltar tu nombre y posición.
– Descripción breve: Un párrafo que resuma tus habilidades, experiencia o valores profesionales.
– Enlaces de contacto: Listas de enlaces a tus redes sociales, correo electrónico o portafolio.Este enfoque modular facilita la organización y el mantenimiento del código.
Estilos CSS: Aplica estilos para mejorar la apariencia y usabilidad de la tarjeta:
– Diseño responsivo: Utiliza unidades relativas y consultas de medios (@media) para asegurar que la tarjeta se adapte a diferentes tamaños de pantalla.
– Tipografía y colores: Elige fuentes legibles y una paleta de colores coherente con tu marca personal.
– Espaciado y alineación: Usa propiedades como margin, padding y text-align para crear una disposición equilibrada y atractiva.
Estos estilos aseguran una experiencia de usuario óptima y una presentación coherente en diversos dispositivos.
Momentos adecuados para incluir una tarjeta de presentación en tu sitio web
Considera integrar una tarjeta de presentación en tu sitio web en las siguientes situaciones:
Página de inicio: Si eres un profesional independiente o tu sitio personal es una herramienta principal de promoción, una tarjeta de presentación en la página principal puede captar rápidamente la atención de los visitantes.
Sección «Sobre mí»: Complementa la información detallada con una tarjeta que resuma tus datos clave, facilitando una lectura rápida.
Portafolio: Al mostrar tus trabajos, una tarjeta de presentación puede proporcionar contexto adicional sobre tu rol y competencias.
Blog profesional: Si gestionas un blog, una tarjeta al final de cada artículo puede reforzar tu identidad y fomentar conexiones.
Incorporar una tarjeta de presentación personal en tu sitio web es una estrategia efectiva para comunicar tu identidad profesional, mejorar la experiencia del usuario y facilitar conexiones valiosas.
Ejemplo práctico de una tarjeta de presentación personal
Como colofón a esta entrada, os comparto uno de los ejemplos que es fácil encontrar en Internet a propósito de esta interfaz para nuestra página web. Aquí tenéis el código fuente por si os es útil en vuestros proyectos personales. Podéis rescatar el contenido original de portal de youtube de jocker code.
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarjeta de presentación personal</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="post">
<div class="img">
<img src="images/ricardosantana.jpg" alt="">
</div>
<div class="info">
<h1 class="titulo">Ricardo Fernandez López</h1>
<div class="fecha">29 de septiembre de 2025</div>
<p class="descripcion">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, praesentium sunt temporibus officia ratione fuga repellendus quisquam ducimus perspiciatis illum? Voluptates, incidunt maiores doloribus blanditiis illo laborum! A, sunt. Ipsa.
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>Código CSS3
/* General */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
img {
width: 100%;
}
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
padding: 0 1.5rem;
}
/* Publicación */
.post {
width: 100%;
max-width: 80rem;
padding: 20px;
background-color: #fff;
box-shadow: 0 1.4rem 8rem rgba(0,0,0,.2);
display: flex;
align-items: center;
border-radius: 2rem;
border: .01rem solid rgb(163, 162, 162);
}
.img {
min-width: 35rem;
max-width: 35rem;
height: 30rem;
transform: translateX(-8rem);
position: relative;
}
.img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 2rem;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #fff;
}
.titulo {
font-size: 2.5rem;
margin: 1rem 0 1rem;
text-transform: uppercase;
color: #4facfe;
}
.fecha {
display: block;
color: rgba (0, 0, 0, .5);
font-size: 1.6rem;
font-weight: 600;
margin: .5rem 0 1rem;
}
.descripcion {
margin-bottom: 3rem;
font-size: 1.4rem;
color: rgba(0,0,0,.7);
}
/* Responsive */
@media screen and ( max-width: 1068px ) {
.post {
max-width: 80rem;
}
.img {
min-width: 30rem;
max-width: 30rem;
}
}
@media screen and ( max-width: 950px ) {
.post {
padding: 2.5rem;
flex-direction: column;
}
.img {
min-width: 100%;
max-width: 100%;
transform: translate(0, -8rem );
object-fit: cover;
}
}Para más contenidos, sigue mi página de linkedin o mi las entradas que, regularmente, publico en el blog de mi página personal.