Hugging Face's logo

Spaces:
Ferman23
/
codecraft-portfolio-pro
Running

App Files Community
codecraft-portfolio-pro / index.html
Ferman23's picture
Ferman23
PERO QUIERO QUE SEA RESPONSIVE Y DEVE TENER ANIMACIONES Y ADEMAS TIENE QUE TENER TECNOLOGIA LEGACY Y CON ANIMACIONES DE MODA LO DE AHORA IMPLEMENTA LOS PRINCIPIOS SOLID Y CON UN BUEN CEO ADEMAS QUIERO QUE IMPLEMENTES UN SOLO BRANDING
626b09b verified
Raw
History Blame Contribute Delete
39.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Anders | Full Stack Developer</title>
 <!-- Branding Meta -->
 <meta name="theme-color" content="#3B82F6">
 <meta name="msapplication-TileColor" content="#3B82F6">
<!-- Favicon -->
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="manifest" href="/site.webmanifest">
<!-- Legacy Support -->
 <!--[if lt IE 9]>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
<!-- Core Libraries -->
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<!-- Modern Animations -->
 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/ScrollTrigger.min.js"></script>
 <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
 <style>
 :root {
 --brand-primary: #3B82F6;
 --brand-secondary: #1E40AF;
 --brand-accent: #93C5FD;
 }
.vanta-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 z-index: -1;
 }
/* Responsive Breakpoints */
 @media (max-width: 640px) {
 .mobile-stack {
 flex-direction: column !important;
 }
 .mobile-full {
 width: 100% !important;
 max-width: 100% !important;
 }
 }
/* Animation Classes */
 .animate-float {
 animation: float 6s ease-in-out infinite;
 }
.animate-fade-in {
 animation: fadeIn 1s ease-in forwards;
 }
.animate-slide-up {
 animation: slideUp 0.8s ease-out forwards;
 }
@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-20px); }
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
@keyframes slideUp {
 from {
opacity: 0;
 transform: translateY(30px);
 }
 to {
opacity: 1;
 transform: translateY(0);
 }
 }
/* Legacy Fallbacks */
 .no-js .js-only {
 display: none;
 }
 .hero-text {
 text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
 }
 .skill-badge {
 transition: all 0.3s ease;
 }
 .skill-badge:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 .timeline-item::before {
 content: '';
 position: absolute;
 left: -38px;
 top: 0;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #3B82F6;
 }
 </style>
</head>
<body class="font-sans antialiased text-gray-800 bg-gray-50">
 <!-- Vanta.js Background -->
 <div id="vanta-bg" class="vanta-bg"></div>
<!-- Navigation with Animation -->
 <nav class="fixed w-full bg-white bg-opacity-90 shadow-sm z-50 transition-all duration-300" id="mainNav">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <span class="text-xl font-bold text-blue-600">Anders.dev</span>
 </div>
 <div class="hidden md:flex items-center space-x-8">
 <a href="#home" class="text-blue-600 font-medium">Inicio</a>
 <a href="#about" class="text-gray-700 hover:text-blue-600 transition">Acerca</a>
 <a href="#skills" class="text-gray-700 hover:text-blue-600 transition">Habilidades</a>
 <a href="#experience" class="text-gray-700 hover:text-blue-600 transition">Experiencia</a>
 <a href="#portfolio" class="text-gray-700 hover:text-blue-600 transition">Portafolio</a>
 <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contacto</a>
 </div>
 <div class="md:hidden flex items-center">
 <button class="text-gray-700">
 <i data-feather="menu"></i>
 </button>
 </div>
 </div>
 </div>
 </nav>
<!-- Hero Section with GSAP Animations -->
 <section id="home" class="min-h-screen flex items-center pt-16 relative overflow-hidden">
 <!-- Animated Background Elements -->
 <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
 <div class="absolute top-20 left-10 w-16 h-16 rounded-full bg-blue-500 opacity-10 animate-float" style="animation-delay: 0s;"></div>
 <div class="absolute top-1/3 right-20 w-24 h-24 rounded-full bg-blue-400 opacity-10 animate-float" style="animation-delay: 1s;"></div>
 <div class="absolute bottom-20 left-1/4 w-20 h-20 rounded-full bg-blue-300 opacity-10 animate-float" style="animation-delay: 2s;"></div>
 <div class="absolute bottom-1/3 right-1/3 w-12 h-12 rounded-full bg-blue-200 opacity-10 animate-float" style="animation-delay: 3s;"></div>
 </div>
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
 <div class="text-center md:text-left">
 <h1 class="text-4xl md:text-6xl font-bold hero-text text-gray-800 mb-6 animate-fade-in" style="animation-delay: 0.2s;">Hola, soy <span class="text-blue-600">Anders</span></h1>
 <h2 class="text-2xl md:text-3xl font-semibold text-gray-600 mb-8 animate-fade-in" style="animation-delay: 0.4s;">Especialista en Desarrollo Full Stack</h2>
 <p class="text-lg text-gray-600 mb-8 max-w-lg mx-auto md:mx-0 animate-fade-in" style="animation-delay: 0.6s;">
 Convierto desafíos tecnológicos en experiencias intuitivas que generan valor real para los negocios.
 </p>
 <!-- Animated Lottie File -->
 <div class="js-only w-16 h-16 mb-6 animate-slide-up" style="animation-delay: 0.8s;">
 <lottie-player src="https://assets7.lottiefiles.com/packages/lf20_gn0tojb6.json" background="transparent" speed="1" loop autoplay></lottie-player>
 </div>
 <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
 <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition shadow-lg transform hover:scale-105">
 Contactame
 </a>
 <a href="#portfolio" class="border-2 border-blue-600 text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-full font-medium transition shadow-lg transform hover:scale-105">
 Ver Trabajos
 </a>
 </div>
 </div>
 <div class="relative">
 <div class="w-64 h-64 md:w-80 md:h-80 mx-auto bg-white rounded-full shadow-xl overflow-hidden border-4 border-blue-500">
 <img src="http://static.photos/technology/640x360/42" alt="Anders Profile" class="w-full h-full object-cover">
 </div>
 <div class="absolute -bottom-4 -right-4 md:-right-8 bg-white rounded-lg shadow-lg px-4 py-2 text-center">
 <p class="text-2xl font-bold text-blue-600">3+</p>
 <p class="text-gray-600 text-sm">Años de Experiencia</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- About Section -->
 <section id="about" class="py-20 bg-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Acerca de mí</h2>
 <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
 <div class="order-2 md:order-1">
 <h3 class="text-2xl font-bold text-gray-800 mb-6">Anders | Desarrollador de software</h3>
 <p class="text-gray-600 mb-6">
 Desarrollador Full Stack apasionado por crear soluciones tecnológicas innovadoras. Con amplia experiencia en desarrollo web, transformo ideas complejas en aplicaciones intuitivas y de alto rendimiento.
 </p>
 <p class="text-gray-600 mb-8">
 Mi enfoque combina la creatividad técnica con la resolución estratégica de problemas, utilizando las últimas tecnologías para impulsar la eficiencia y la experiencia del usuario.
 </p>
<div class="grid grid-cols-2 gap-4 mb-8">
 <div class="flex items-center">
 <i data-feather="globe" class="text-blue-600 mr-2"></i>
 <span class="text-gray-700">https://webdioner.com</span>
 </div>
 <div class="flex items-center">
 <i data-feather="mail" class="text-blue-600 mr-2"></i>
 <span class="text-gray-700">anderson24website@gmail.com</span>
 </div>
 <div class="flex items-center">
 <i data-feather="award" class="text-blue-600 mr-2"></i>
 <span class="text-gray-700">Ing. Informatica y Sistemas</span>
 </div>
 <div class="flex items-center">
 <i data-feather="phone" class="text-blue-600 mr-2"></i>
 <span class="text-gray-700">51965222612</span>
 </div>
 <div class="flex items-center">
 <i data-feather="map-pin" class="text-blue-600 mr-2"></i>
 <span class="text-gray-700">Tingo Maria - Perú</span>
 </div>
 <div class="flex items-center">
 <i data-feather="check-circle" class="text-blue-600 mr-2"></i>
 <span class="text-gray-700">Freelance: Disponible</span>
 </div>
 </div>
<a href="#" class="inline-flex items-center text-blue-600 font-medium">
 Descargar CV <i data-feather="download" class="ml-2"></i>
 </a>
 </div>
 <div class="order-1 md:order-2">
 <div class="bg-gray-100 rounded-xl p-2 shadow-lg">
 <img src="http://static.photos/technology/1024x576/45" alt="About Anders" class="w-full h-auto rounded-lg">
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Skills Section -->
 <section id="skills" class="py-20 bg-gray-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Mis Habilidades</h2>
 <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
 </div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">JavaScript</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">PHP</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">HTML/CSS</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">Angular</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">Laravel</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">C# .NET</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">React</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">Flutter</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">UI/UX</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">APIs</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">Backend</h3>
 </div>
 <div class="skill-badge bg-white rounded-lg shadow-md p-6 text-center hover:shadow-xl">
 <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
 <i data-feather="code" class="text-blue-600 w-8 h-8"></i>
 </div>
 <h3 class="font-bold text-gray-800">Frontend</h3>
 </div>
 </div>
 </div>
 </section>
<!-- Experience & Education Section -->
 <section id="experience" class="py-20 bg-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Experiencia & Educación</h2>
 <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
 </div>
<div class="flex flex-col md:flex-row gap-12">
 <!-- Experience -->
 <div class="flex-1">
 <h3 class="text-2xl font-bold text-gray-800 mb-8 flex items-center">
 <i data-feather="briefcase" class="text-blue-600 mr-3"></i> Experiencia
 </h3>
<div class="relative border-l-2 border-blue-200 pl-8 space-y-8">
 <!-- Item 1 -->
 <div class="relative timeline-item">
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition">
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold text-lg text-gray-800">Aplicación móvil para gestión de vehículos</h4>
 <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">2024 - 2025</span>
 </div>
 <p class="text-gray-600">
 Diseño y desarrollo de una aplicación móvil para la gestión de vehículos, que ofrece funcionalidades como el seguimiento de flotas, la programación del mantenimiento y análisis en tiempo real.
 </p>
 </div>
 </div>
<!-- Item 2 -->
 <div class="relative timeline-item">
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition">
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold text-lg text-gray-800">Sistema para gestión de líneas de crédito</h4>
 <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">2024</span>
 </div>
 <p class="text-gray-600">
 Diseño e implantación de un sistema de gestión de líneas de crédito que permite una tramitación eficaz de los préstamos y una evaluación automatizada de los riesgos.
 </p>
 </div>
 </div>
<!-- Item 3 -->
 <div class="relative timeline-item">
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition">
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold text-lg text-gray-800">Desarrollo de software comercial</h4>
 <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">2023</span>
 </div>
 <p class="text-gray-600">
 Desarrollo y mantenimiento de soluciones de software comerciales, optimizando las operaciones empresariales mediante aplicaciones eficientes y escalables.
 </p>
 </div>
 </div>
<!-- Item 4 -->
 <div class="relative timeline-item">
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition">
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold text-lg text-gray-800">Sistema de ventas</h4>
 <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">2022</span>
 </div>
 <p class="text-gray-600">
 Desarrollo de sistema de ventas para agilizar las transacciones, la gestión de inventarios y el seguimiento de las relaciones con los clientes.
 </p>
 </div>
 </div>
 </div>
 </div>
<!-- Education -->
 <div class="flex-1">
 <h3 class="text-2xl font-bold text-gray-800 mb-8 flex items-center">
 <i data-feather="book" class="text-blue-600 mr-3"></i> Educación
 </h3>
<div class="relative border-l-2 border-blue-200 pl-8 space-y-8">
 <!-- Item 1 -->
 <div class="relative timeline-item">
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition">
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold text-lg text-gray-800">Patrones de arquitectura de software</h4>
 <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">2023 - 2024</span>
 </div>
 <p class="text-gray-600">
 Estudio de patrones de arquitectura de software para el desarrollo de software. Explorado y analizado varios patrones de arquitectura de software.
 </p>
 </div>
 </div>
<!-- Item 2 -->
 <div class="relative timeline-item">
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition">
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold text-lg text-gray-800">Certificación en desarrollo de software</h4>
 <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">2023</span>
 </div>
 <p class="text-gray-600">
 Formación en desarrollo de software con especialización en .NET Core, Angular (TypeScript) y Flutter.
 </p>
 </div>
 </div>
<!-- Item 3 -->
 <div class="relative timeline-item">
 <div class="bg-gray-50 p-6 rounded-lg shadow-sm hover:shadow-md transition">
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold text-lg text-gray-800">Estudios universitarios</h4>
 <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">2017 - 2023</span>
 </div>
 <p class="text-gray-600">
 Estudios universitarios de Ingeniería en Informática y Sistemas.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Portfolio Section -->
 <section id="portfolio" class="py-20 bg-gray-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Mi Portafolio</h2>
 <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
 </div>
<!-- Filter Buttons -->
 <div class="flex justify-center mb-12 flex-wrap gap-3">
 <button class="px-4 py-2 bg-blue-600 text-white rounded-full font-medium">Todos</button>
 <button class="px-4 py-2 bg-white hover:bg-gray-100 rounded-full font-medium">Web</button>
 <button class="px-4 py-2 bg-white hover:bg-gray-100 rounded-full font-medium">Móvil</button>
 <button class="px-4 py-2 bg-white hover:bg-gray-100 rounded-full font-medium">UI/UX</button>
 <button class="px-4 py-2 bg-white hover:bg-gray-100 rounded-full font-medium">Backend</button>
 </div>
<!-- Portfolio Grid -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Item 1 -->
 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition transform hover:-translate-y-2">
 <div class="h-48 overflow-hidden">
 <img src="http://static.photos/technology/1024x576/1" alt="Project 1" class="w-full h-full object-cover">
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">Sistema de Gestión de Vehículos</h3>
 <p class="text-gray-600 mb-4">Aplicación móvil para seguimiento y mantenimiento de flotas vehiculares.</p>
 <span class="inline-block bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Móvil</span>
 </div>
 </div>
<!-- Item 2 -->
 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition transform hover:-translate-y-2">
 <div class="h-48 overflow-hidden">
 <img src="http://static.photos/finance/1024x576/2" alt="Project 2" class="w-full h-full object-cover">
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">Sistema de Créditos</h3>
 <p class="text-gray-600 mb-4">Plataforma web para gestión automatizada de líneas de crédito.</p>
 <span class="inline-block bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Web</span>
 </div>
 </div>
<!-- Item 3 -->
 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition transform hover:-translate-y-2">
 <div class="h-48 overflow-hidden">
 <img src="http://static.photos/retail/1024x576/3" alt="Project 3" class="w-full h-full object-cover">
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">Sistema de Ventas</h3>
 <p class="text-gray-600 mb-4">Solución integral para gestión de ventas e inventarios.</p>
 <span class="inline-block bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Web</span>
 <span class="inline-block bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full ml-2">Backend</span>
 </div>
 </div>
 </div>
<div class="text-center mt-12">
 <button class="px-6 py-3 border-2 border-blue-600 text-blue-600 hover:bg-blue-50 rounded-full font-medium transition shadow-lg">
 Ver Más Proyectos
 </button>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-20 bg-blue-600 text-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">Contáctame</h2>
 <div class="w-20 h-1 bg-white mx-auto"></div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
 <div>
 <h3 class="text-2xl font-bold mb-6">Ponte en contacto</h3>
 <p class="mb-8 opacity-90">
 ¿Tienes un proyecto en mente o necesitas ayuda con tu desarrollo? No dudes en contactarme, estaré encantado de ayudarte.
 </p>
<div class="space-y-4">
 <div class="flex items-center">
 <i data-feather="mail" class="mr-4"></i>
 <span>anderson24website@gmail.com</span>
 </div>
 <div class="flex items-center">
 <i data-feather="phone" class="mr-4"></i>
 <span>+51 965222612</span>
 </div>
 <div class="flex items-center">
 <i data-feather="map-pin" class="mr-4"></i>
 <span>Tingo Maria, Perú</span>
 </div>
 </div>
<div class="flex space-x-4 mt-8">
 <a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition">
 <i data-feather="facebook"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition">
 <i data-feather="twitter"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition">
 <i data-feather="linkedin"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30 transition">
 <i data-feather="github"></i>
 </a>
 </div>
 </div>
<div>
 <form class="space-y-6">
 <div>
 <label for="name" class="block mb-2">Nombre</label>
 <input type="text" id="name" class="w-full px-4 py-3 bg-white bg-opacity-10 border border-white border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent" placeholder="Tu nombre">
 </div>
 <div>
 <label for="email" class="block mb-2">Email</label>
 <input type="email" id="email" class="w-full px-4 py-3 bg-white bg-opacity-10 border border-white border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent" placeholder="tu@email.com">
 </div>
 <div>
 <label for="message" class="block mb-2">Mensaje</label>
 <textarea id="message" rows="5" class="w-full px-4 py-3 bg-white bg-opacity-10 border border-white border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent" placeholder="Tu mensaje"></textarea>
 </div>
 <button type="submit" class="w-full bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition shadow-lg">
 Enviar Mensaje
 </button>
 </form>
 </div>
 </div>
 </div>
 </section>
<!-- Footer with Branding -->
 <footer class="bg-gray-900 text-white py-12 border-t-4 border-blue-600">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-6 md:mb-0">
 <div class="flex items-center">
 <svg class="w-8 h-8 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="var(--brand-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M12 8V16" stroke="var(--brand-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M8 12H16" stroke="var(--brand-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 <span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">Anders.dev</span>
 </div>
 <p class="mt-2 text-gray-400">Transformando ideas en soluciones digitales</p>
 </div>
 <div class="flex flex-col items-center md:items-end">
 <p class="text-gray-400">© 2024 Todos los derechos reservados</p>
 <p class="text-gray-400 mt-1 flex items-center">
 Hecho con
<svg class="w-5 h-5 mx-1 text-red-500" fill="currentColor" viewBox="0 0 20 20">
 <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
 </svg>
 por Anders
 </p>
 </div>
 </div>
 </div>
 </footer>
<script>
 // Initialize Vanta.js
 if (typeof VANTA !== 'undefined') {
 VANTA.NET({
 el: "#vanta-bg",
 mouseControls: true,
 touchControls: true,
 gyroControls: false,
 minHeight: 200.00,
 minWidth: 200.00,
 scale: 1.00,
 scaleMobile: 1.00,
 color: 0x3b82f6,
 backgroundColor: 0xf8fafc,
 points: 10.00,
 maxDistance: 22.00,
 spacing: 18.00
 });
 }
// Initialize Feather Icons
 document.addEventListener('DOMContentLoaded', function() {
 if (typeof feather !== 'undefined') {
 feather.replace();
 }
// GSAP Animations
 if (typeof gsap !== 'undefined') {
 // Section animations
 gsap.utils.toArray('section').forEach((section, i) => {
 ScrollTrigger.create({
 trigger: section,
 start: "top 70%",
 onEnter: () => section.classList.add('animate-slide-up')
 });
 });
// Navigation scroll effect
 ScrollTrigger.create({
 start: 100,
 onUpdate: (self) => {
 const nav = document.getElementById('mainNav');
 if (self.direction === -1 && self.scroll() > 100) {
 nav.classList.add('shadow-lg', 'bg-opacity-100');
 } else {
 nav.classList.remove('shadow-lg', 'bg-opacity-100');
 }
 }
 });
 }
// Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function(e) {
 e.preventDefault();
 const target = document.querySelector(this.getAttribute('href'));
 if (target) {
 if (typeof gsap !== 'undefined') {
 gsap.to(window, {
 duration: 0.8,
 scrollTo: target,
 ease: "power2.inOut"
 });
 } else {
 target.scrollIntoView({
 behavior: 'smooth'
 });
 }
 }
 });
 });
 });
// CEO Analytics (example)
 function trackCEOAnalytics(event) {
 if (typeof ceoAnalytics !== 'undefined') {
 ceoAnalytics.track(event);
 } else {
 console.log('CEO Analytics:', event);
 }
 }
// Track page view
 trackCEOAnalytics('page_view');
 </script>
</body>
</html>