Skip to main content

AI-Powered Personal Portfolio Landing Page

Your personal portfolio is your professional calling card. With DivZone AI, you can create an AI-powered portfolio that showcases your projects, skills, and experience in a compelling way. This tutorial includes a ready-to-copy prompt and customization tips.

AI-Powered Personal Portfolio Prompt​

Copy this prompt intoDivZone AI chat

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.

Generated Structure​

DivZone's AI delivers a complete portfolio with the following file structure:

-index.html— Homepage with all portfolio sections -styles.css— Dark mode design with CSS variables and animations -script.js— Scroll animations, progress bars, form, and mobile menu

Portfolio CSS snippet​

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;
}
DivZone ad link Logo
AI PlatformTurn Code into Customers.Try it free

JavaScript snippet for animations​

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' });
  });
});

How to customize your portfolio​

Once you've generated your basic portfolio, refine it using these 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).

Why Create Your Portfolio with AI​

  • Time Savings: Go from zero to a functional portfolio in minutes.

  • Professional Design: AI applies modern design and UX patterns.

  • Full Customization: The code is yours; edit it, extend it, and publish it wherever you want.

  • Easy Updates: Return to DivZone whenever you need to add new projects or change the design.

tip

💡Tip: For portfolios with complex animations and premium design, use the GPT-4 or Claude templates fromDivZone AI premium plansYou can also apply a Brand Preset to maintain consistency with your personal brand.

Ready to create your portfolio?Create your portfolio with AI nowor go back toComplete tutorial on AI-powered landing pages.