<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mí - Jahir</title>
    <link rel="stylesheet" href="abt.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="icon" type="image/ico" href="https://res.cloudinary.com/dr9van0op/image/upload/v1747099147/ico_irivqn.webp">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
    <script src="js.js" defer></script>
</head>
<body>
    <main class="about-container">
        <header class="about-header">
            <h1>Más información</h1>
            <nav class="about-nav">
                <a class="contact" href="index.html" aria-label="Ir a la página de inicio">Inicio</a>
            </nav>
        </header>

        <section class="about-grid">
            <!-- Columna izquierda -->
            <div>
                <section class="about-section" id="projects">
                    <h2>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                            <polyline points="2 17 12 22 22 17"></polyline>
                            <polyline points="2 12 12 17 22 12"></polyline>
                        </svg>
                        Proyectos en desarrollo
                    </h2>
                    <article class="project-card">
                        <h3>Iso_py <span class="project-status status-dev">En desarrollo</span></h3>
                        <p>ISO personalizada con un kernel optimizado para funcionar como sistema único, con un script de Python como sistema principal.</p>
                        <div class="skills-container">
                            <span class="skill-tag">Python</span>
                            <span class="skill-tag">Linux</span>
                            <span class="skill-tag">Kernel</span>
                        </div>
                    </article>
                    <article class="project-card">
                        <h3>Servidor de Respaldo <span class="project-status status-plan">Planeación</span></h3>
                        <p>Servidor privado y automatizado donde respaldo proyectos y esta misma página web, con sistemas de alertas y monitoreo.</p>
                        <div class="skills-container">
                            <span class="skill-tag">Shell</span>
                            <span class="skill-tag">Automatización</span>
                            <span class="skill-tag">Cloud</span>
                        </div>
                    </article>
                    <article class="project-card">
                        <h3>Portfolio Interactivo <span class="project-status status-dev">En desarrollo</span></h3>
                        <p>Versión mejorada de mi portfolio con animaciones interactivas y visualización de proyectos en tiempo real.</p>
                        <div class="skills-container">
                            <span class="skill-tag">HTML5</span>
                            <span class="skill-tag">CSS3</span>
                            <span class="skill-tag">JavaScript</span>
                        </div>
                    </article>
                </section>

                <section class="old-portfolio">
                    <a class="contact" href="./old/index_old.html" aria-label="Abrir portafolio web 2024">Portafolio web 2024</a>
                    <a class="contact" href="./old2/index_old.html" aria-label="Abrir portafolio web 2025">Portafolio web 2025</a>
                    <p>Elementary OS - Windows 11</p>
                </section>
            </div>

            <!-- Columna derecha -->
            <div>
                <section class="about-section" id="contact">
                    <h2>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                            <polyline points="22,6 12,13 2,6"></polyline>
                        </svg>
                        Contacto
                    </h2>
                    <p>📩 "Si te interesa que colabore en un proyecto ¡contáctame!"</p>
                    <div class="contact-methods">
                        <div class="contact-card">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                                <polyline points="22,6 12,13 2,6"></polyline>
                            </svg>
                            <h4>Email</h4>
                            <a href="mailto:uagdahse@anonaddy.me" aria-label="Enviar correo electrónico">Contactar por email</a>
                        </div>
                        <div class="contact-card">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                            </svg>
                            <h4>WhatsApp</h4>
                            <a href="https://wa.me/525650023267?text=Hola,%20me%20interesa%20tu%20trabajo" target="_blank" aria-label="Enviar mensaje por WhatsApp">Enviar mensaje</a>
                        </div>
                        <div class="contact-card">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                                <rect x="2" y="9" width="4" height="12"></rect>
                                <circle cx="4" cy="4" r="2"></circle>
                            </svg>
                            <h4>LinkedIn</h4>
                            <a href="https://linkedin.com/in/jahir-jimenez-425929353" target="_blank" aria-label="Ver perfil de LinkedIn">Ver perfil</a>
                        </div>
                        <div class="contact-card">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
                            </svg>
                            <h4>GitHub</h4>
                            <a href="https://github.com/JahirWH" target="_blank" aria-label="Ver repositorios en GitHub">Ver repositorios</a>
                        </div>
                    </div>
                </section>

                <section class="about-section">
                     <h3>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="16" x2="12" y2="12"></line>
                            <line x1="12" y1="8" x2="12.01" y2="8"></line>
                        </svg>
                        Información del sitio
                    </h3>
                    <div class="site-info">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <h5>Acerca de esta web</h5>
                            <button onclick="toggleSiteInfo()" class="toggle-info">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="6 9 12 15 18 9"></polyline>
                                </svg>
                            </button>
                        </div>
                        
                        <p style="display: block;" id="siteInfo1">Esta web ha sido creada específicamente como un portafolio para mostrar mis proyectos y habilidades adquiridas a lo largo de los años. Desarrollada desde cero por Jahir Jiménez.</p>
                        <p id="siteInfo2" style="display: none;">Aunque el diseño no es mi fuerte, creo que un estilo simple y minimalista siempre es una buena opción. Este enfoque permite que el contenido destaque y la experiencia del usuario sea más fluida.</p>

                        <h4>Características técnicas</h4>
                        <div class="tech-features">
                            <div class="feature-item">
                                <div class="feature-icon">📷⚡</div>
                                <p>Optimización de imágenes</p>
                            </div>
                            <div class="feature-item">
                                <div class="feature-icon">📱💻</div>
                                <p>Diseño responsive</p>
                            </div>
                            <div class="feature-item">
                                <div class="feature-icon">🖥️✅</div>
                                <p>Indentación del código</p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </main>

    <script>
        function toggleSiteInfo() {
            let info1 = document.getElementById('siteInfo1');
            let info2 = document.getElementById('siteInfo2');

            if (info1.style.display === 'block') {
                info1.style.display = 'none';
                info2.style.display = 'block';
            } else {
                info1.style.display = 'block';
                info2.style.display = 'none';
            }
        }

        // Your existing email function
        function enviarCorreo() {
            // Using your existing function or you can modify it
            // For example:
            window.location.href = "mailto:tu-email@ejemplo.com";
        }
    </script>

    <footer>
        <p>&copy; 2025 Jahir Jiménez. Todos los derechos reservados.</p>
    </footer>
</body>
</html>