Saltar al contenido principal

Landing page de portfolio personal con IA

Tu portfolio personal es tu carta de presentación profesional. Con DivZone AI podés crear un portfolio con inteligencia artificial que muestre tus proyectos, habilidades y experiencia de forma impactante. Este tutorial incluye un prompt listo para copiar y consejos de personalización.

Prompt para crear un portfolio personal con IA​

Copiá este prompt en el chat de DivZone AI:

Crea un portfolio personal para un desarrollador web full-stack llamado "Carlos Méndez". Incluye: navbar con logo "CM" y links, hero section con foto de perfil placeholder, título "Desarrollador Full-Stack & Diseñador UX" y botones de contacto y descarga de CV, sección "Sobre mí" con breve biografía profesional, sección de habilidades técnicas con barras de progreso animadas (HTML, CSS, JavaScript, React, Node.js, Python, MongoDB, Figma), sección de proyectos destacados con 4 cards que muestren título, descripción, tecnologías usadas y link a demo, sección de experiencia laboral en timeline vertical con 3 posiciones, sección de contacto con formulario, y footer con links a GitHub, LinkedIn y email. Usa diseño dark mode con fondo #0f172a, acentos en cian (#06b6d4), tipografía moderna, animaciones de scroll y diseño responsive.

Estructura generada​

La IA de DivZone te entrega un portfolio completo con la siguiente estructura de archivos:

  • index.html — Página principal con todas las secciones del portfolio
  • styles.css — Diseño dark mode con variables CSS y animaciones
  • script.js — Animaciones de scroll, barras de progreso, formulario y menú mobile

Fragmento del CSS del portfolio​

styles.css
:root {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --accent: #06b6d4;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.profile-image {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 4px solid var(--accent);
  margin-bottom: 2rem;
  object-fit: cover;
}

.skills-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.skills-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 1.5s ease-in-out;
}
Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Fragmento del JavaScript para animaciones​

script.js
// Animación de barras de progreso al hacer scroll
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const bars = entry.target.querySelectorAll('.skills-bar-fill');
      bars.forEach(bar => {
        const width = bar.getAttribute('data-width');
        bar.style.width = width + '%';
      });
    }
  });
}, { threshold: 0.3 });

document.querySelectorAll('.skills-section').forEach(section => {
  observer.observe(section);
});

// Smooth scroll para navegación
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    target.scrollIntoView({ behavior: 'smooth' });
  });
});

Cómo personalizar tu portfolio​

Una vez generado el portfolio base, refiná con estos prompts:

Cambiá el nombre a tu nombre real y actualizá las habilidades a: Diseño UX/UI, WordPress, Shopify, SEO, Google Analytics, Email Marketing.
Agregá una sección de "Testimonios" con 3 cards de clientes y una sección de "Blog" con 3 artículos recientes en grid.
Modificá la paleta de colores a un tema claro con fondo blanco, texto oscuro y acentos en verde (#10b981). Cambiá el layout del hero a dos columnas (texto a la izquierda, foto a la derecha).

Por qué crear tu portfolio con IA​

  • Ahorro de tiempo: Pasar de cero a un portfolio funcional en minutos.
  • Diseño profesional: La IA aplica patrones modernos de diseño y UX.
  • Personalización total: El código es tuyo; editalo, extendelo y publicalo donde quieras.
  • Actualización fácil: Volvé a DivZone cuando necesites agregar nuevos proyectos o cambiar el diseño.
tip

💡Consejo: Para portfolios con animaciones complejas y diseño premium, usá los modelos GPT-4 o Claude desde los planes premium de DivZone AI. También podés aplicar un Brand Preset para mantener consistencia con tu marca personal.

¿Listo para crear tu portfolio? Creá tu portfolio con IA ahora o volvé al tutorial completo de landing pages con IA.