Portafolio personal

Tu portafolio es tu mejor herramienta de ventas como desarrollador, diseñador, fotógrafo o freelancer. Esta plantilla tiene un estilo moderno "de desarrollador" (oscuro, acentos en degradado, detalles monoespaciados) con tema claro opcional, efecto de máquina de escribir, proyectos filtrables, contadores animados y línea de tiempo de experiencia.

Vista previa

Portafolio de Sofía Ramírez

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Secciones

Sección	Detalle
Header	Transparente al inicio y con fondo difuminado al hacer scroll. Resalta el enlace de la sección visible. Botón de tema claro/oscuro que se recuerda.
Hero	Saludo, nombre con degradado, rol con efecto de escritura, bio corta, botones y redes sociales con iconos SVG. Foto con forma orgánica animada y etiqueta "Disponible para proyectos".
Sobre mí	Historia breve, tecnologías como chips de color y cuatro cifras con contador animado al aparecer.
Proyectos	Tarjetas con imagen, descripción orientada a resultados, tecnologías y enlaces. Filtro por tipo.
Experiencia	Línea de tiempo vertical con puntos de color.
Contacto	Llamada a la acción, correo con botón Copiar y enlace mailto:.

Personalización

Datos personales

1. Cambia nombre, title, meta description y bio.
2. Edita los roles del efecto de escritura:

const roles = ['Desarrolladora Front-end', 'Especialista en React', 'Amante del buen diseño', 'Freelancer'];

3. Actualiza los enlaces de GitHub, LinkedIn y Dribbble (o cambia los iconos: Simple Icons tiene SVG de casi cualquier marca).
4. Ajusta las cifras con el atributo data-contar="48".

Colores

:root {
  --acento: #22d3ee;     /* cian: enlaces, números, bordes al pasar el mouse */
  --acento-2: #a78bfa;   /* violeta: segundo color del degradado */
  --fondo: #0b0f19;
  --superficie: #111827; /* tarjetas */
}
[data-tema="claro"] { /* versión clara de las mismas variables */ }

Combinaciones que funcionan: verde #34d399 + azul #60a5fa; naranja #fb923c + rosa #f472b6; amarillo #facc15 + verde #4ade80.

Proyectos

Cada proyecto es un article con data-tipo (para el filtro). Duplica uno y cambia imagen, textos y etiquetas:

<article class="proyecto revelar" data-tipo="web">
  <div class="imagen"><img src="img/proyecto-hotel.webp" alt="Sitio de hotel boutique" loading="lazy"></div>
  <div class="cuerpo">
    <h3>Hotel Casa Azul</h3>
    <p>Landing bilingüe para hotel boutique con motor de reservas integrado.</p>
    <div class="tags"><span>HTML</span><span>JavaScript</span></div>
    <div class="enlaces-proy"><a href="https://...">Ver sitio ↗</a></div>
  </div>
</article>

Para añadir una categoría nueva, crea un botón button class="filtro" data-filtro="branding" y usa data-tipo="branding" en los proyectos correspondientes.

Describe resultados, no tareas

"Hice una tienda en Next.js" dice poco. "E-commerce para tostador de café: ventas en línea +240 % el primer año" vende. Si puedes, enlaza un caso de estudio con el problema, la solución y los resultados.

Capturas de tus proyectos

• Tamaño recomendado 1280×800 (proporción 16:10), en WebP.
• Usa mockups de navegador o celular para que se vean profesionales (Shots.so o Screely).

CV descargable

Guarda tu CV como cv-sofia-ramirez.pdf junto al HTML y cambia el enlace del menú por href="cv-sofia-ramirez.pdf" download.

Formulario de contacto sin servidor

Si prefieres un formulario en lugar de sólo el correo, servicios como Formspree o Web3Forms reciben el envío y te lo reenvían por correo:

<form action="https://formspree.io/f/TU_ID" method="POST">
  <input name="nombre" required placeholder="Tu nombre">
  <input name="email" type="email" required placeholder="Tu correo">
  <textarea name="mensaje" required placeholder="Cuéntame de tu proyecto"></textarea>
  <button class="btn btn-primario">Enviar</button>
</form>

Publicarlo gratis

1. Sube la carpeta a un repositorio de GitHub.
2. Activa GitHub Pages (Settings → Pages) o conéctalo a Netlify / Vercel.
3. Compra un dominio con tu nombre (sofia.dev, sofiaramirez.mx): da mucha más seriedad.

Accesibilidad

El efecto de escritura y las animaciones se desactivan si el usuario tiene activado "reducir movimiento" en su sistema (prefers-reduced-motion). Mantén esa regla si agregas más animaciones.