feat: actualización masiva de eventos de meetups (2023, 2024, 2025) con nuevo diseño, estructura y enlaces de comunidad

Author: pixelead0

docs/meetups/2023/202309-septiembre.md

@@ -1,73 +1,55 @@
 ---
 title: "¡De Jupyter a Web en Minutos!"
-tags:
-
-  - Python
-
-  - Jupyter
-
-  - Web Development
-
-  - Data Analysis
-
-  - Local Development
-
-  - Interactive
-
 ---
 
-# Meetup #PythonCDMX <i class="fab fa-python"></i> - 17 2023
-
-<div class="event-highlight" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 16px; margin: 2rem 0; text-align: center; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);">
-    <h2 style="margin: 0 0 1rem 0; font-size: 2.5rem;">¡De Jupyter a Web en Minutos!</h2>
-    <p style="font-size: 1.2rem; margin: 0; opacity: 0.9;">Redefiniendo el Análisis Local con Python</p>
-</div>
+# Meetup #PythonCDMX <i class="fab fa-python"></i> - Octubre 2023
 
-<div class="meetup-header" style="text-align: center; margin-bottom: 2rem;">
-    <img src="/../../images/meetup/202310-pythoncdmx.jpg" alt="Banner del evento" style="max-width: 100%; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
+<div class="meetup-hero">
+    <h1>✨ ¡De Jupyter a Web en Minutos! ✨</h1>
+    <p class="meetup-subtitle">Redefiniendo el Análisis Local con Python</p>
 </div>
 
 ## Información del Evento
 
-<div class="event-details" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
-    <div class="detail-card" style="background: #f8f9fa; padding: 1.5rem; border-radius: 12px; border-left: 4px solid #28a745; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-        <h3 style="margin: 0 0 0.5rem 0; color: #28a745;"><i class="fas fa-calendar"></i> Fecha</h3>
-        <p style="margin: 0; font-size: 1.1rem; font-weight: 600;">Martes 17 de Octubre, 2023</p>
+<div class="event-details">
+    <div class="detail-card date-card">
+        <h3><i class="fas fa-calendar-alt"></i> Fecha</h3>
+        <p>Martes 17 de Octubre, 2023</p>
     </div>
-    <div class="detail-card" style="background: #f8f9fa; padding: 1.5rem; border-radius: 12px; border-left: 4px solid #007bff; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-        <h3 style="margin: 0 0 0.5rem 0; color: #007bff;"><i class="fas fa-clock"></i> Hora</h3>
-        <p style="margin: 0; font-size: 1.1rem; font-weight: 600;">19:00 - 21:00</p>
+    <div class="detail-card time-card">
+        <h3><i class="fas fa-clock"></i> Hora</h3>
+        <p>19:00 - 21:00</p>
     </div>
-    <div class="detail-card" style="background: #f8f9fa; padding: 1.5rem; border-radius: 12px; border-left: 4px solid #dc3545; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-        <h3 style="margin: 0 0 0.5rem 0; color: #dc3545;"><i class="fas fa-map-marker-alt"></i> Lugar</h3>
-        <p style="margin: 0; font-size: 1.1rem; font-weight: 600;">Wizeline México</p>
+    <div class="detail-card location-card">
+        <h3><i class="fas fa-map-marker-alt"></i> Lugar</h3>
+        <p>Wizeline México</p>
     </div>
-    <div class="detail-card" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; padding: 1.5rem; border-radius: 12px; border-left: 4px solid #28a745; box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);">
-        <h3 style="margin: 0 0 0.5rem 0; color: white;"><i class="fas fa-gift"></i> ¡GRATIS!</h3>
-        <p style="margin: 0; font-size: 1.1rem; font-weight: 600;">Entrada completamente gratuita</p>
+    <div class="detail-card free-card">
+        <h3><i class="fas fa-gift"></i> ¡GRATIS!</h3>
+        <p>Entrada completamente gratuita</p>
     </div>
-    <div class="detail-card" style="background: #f8f9fa; padding: 1.5rem; border-radius: 12px; border-left: 4px solid #ffc107; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-        <h3 style="margin: 0 0 0.5rem 0; color: #ffc107;"><i class="fas fa-ticket-alt"></i> RSVP</h3>
-        <p style="margin: 0; font-size: 1.1rem; font-weight: 600;"><a href="https://www.meetup.com/python-mexico/" style="color: #ffc107; text-decoration: none;">¡Regístrate aquí!</a></p>
+    <div class="detail-card rsvp-card">
+        <h3><i class="fas fa-ticket-alt"></i> RSVP</h3>
+        <p><a href="https://www.meetup.com/python-mexico/" style="color: #ffc107; text-decoration: none;">¡Regístrate aquí!</a></p>
     </div>
 </div>
 
 ---
 
-## <i class="fas fa-microphone"></i> Ponente
+## Ponente
 
-<div class="speaker-section" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 16px; margin: 2rem 0; display: flex; align-items: center; gap: 2rem; box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);">
-    <div class="speaker-photo" style="flex-shrink: 0;">
-        <img src="/../../images/ponentes/ponentePythonCDMX.jpg" alt="Gustavo Vera" style="width: 150px; height: 150px; border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 16px rgba(0,0,0,0.2); object-fit: cover;">
+<div class="speaker-section">
+    <div class="speaker-photo">
+        <img src="/../../images/ponentes/ponentePythonCDMX.jpg" alt="Gustavo Vera">
     </div>
     <div class="speaker-info">
-        <h2 style="margin: 0 0 0.5rem 0; font-size: 2rem;">Gustavo Vera</h2>
-        <p style="margin: 0 0 1rem 0; font-size: 1.1rem; opacity: 0.9;">Python Developer</p>
-        <p style="margin: 0 0 1rem 0; line-height: 1.6;">Desarrollador Python con experiencia en análisis de datos y desarrollo web.</p>
+        <h2>Gustavo Vera</h2>
+        <p class="speaker-role">Python Developer</p>
+        <p class="speaker-bio">Desarrollador Python con experiencia en análisis de datos y desarrollo web.</p>
         <div class="speaker-links">
-
-
-
+            
+            
+            
         </div>
     </div>
 </div>
@@ -76,104 +58,62 @@ tags:
 
 ## Descripción de la Charla
 
-<div class="talk-description" style="background: #f8f9fa; padding: 2rem; border-radius: 16px; margin: 2rem 0; border-left: 6px solid #28a745;">
-    <h3 style="margin: 0 0 1rem 0; color: #28a745;"><i class="fas fa-rocket"></i> Redefiniendo el Análisis Local con Python: ¡De Jupyter a Web en Minutos!</h3>
-    <p style="line-height: 1.8; font-size: 1.1rem; margin-bottom: 1.5rem;">Descubre cómo aprovechar al máximo el potente hardware de tu laptop para realizar análisis de datos avanzados de forma eficiente, todo desde la comodidad de un Jupyter Notebook. Pero eso no es todo: aprenderás cómo convertir tu análisis en un servicio web interactivo en cuestión de minutos. No es magia, es Python. ¡Únete y redefine lo que creías posible en análisis de datos local!</p>
-    <div class="tech-stack" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0;">
-
-        <div style="background: white; padding: 1rem; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-            <h4 style="margin: 0 0 0.5rem 0; color: #F37626;">📓 Jupyter</h4>
-            <p style="margin: 0; font-size: 0.9rem;">Notebooks interactivos</p>
-        </div>
-
-        <div style="background: white; padding: 1rem; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-            <h4 style="margin: 0 0 0.5rem 0; color: #28a745;">🌐 Web Development</h4>
-            <p style="margin: 0; font-size: 0.9rem;">Desarrollo web</p>
-        </div>
-
-        <div style="background: white; padding: 1rem; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-            <h4 style="margin: 0 0 0.5rem 0; color: #007bff;">📊 Data Analysis</h4>
-            <p style="margin: 0; font-size: 0.9rem;">Análisis de datos</p>
-        </div>
-
-        <div style="background: white; padding: 1rem; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
-            <h4 style="margin: 0 0 0.5rem 0; color: #6c757d;">💻 Local Development</h4>
-            <p style="margin: 0; font-size: 0.9rem;">Desarrollo local</p>
-        </div>
-
-    </div>
-    <p style="line-height: 1.8; font-size: 1.1rem; margin-top: 1.5rem;">Python permite transformar análisis de datos locales en servicios web interactivos de manera rápida y eficiente.</p>
+<div class="talk-description">
+    <h3><i class="fas fa-rocket"></i> Redefiniendo el Análisis Local con Python: ¡De Jupyter a Web en Minutos!</h3>
+    <p>¿Tienes esa gran idea, pero no sabes cómo organizar tu ambiente virtual, tu código y todas las herramientas de desarrollo?</p>
+    <p>En esta charla exploraremos las mejores prácticas para configurar un entorno de desarrollo Python profesional:</p>
+    <ul style="line-height: 1.8; font-size: 1.1rem; margin: 1.5rem 0; padding-left: 2rem;">
+        
+    </ul>
+    <p style="line-height: 1.8; font-size: 1.1rem; margin-top: 1.5rem; font-style: italic; color: #666;">
+        <i class="fas fa-info-circle"></i> Python permite transformar análisis de datos locales en servicios web interactivos de manera rápida y eficiente.
+    </p>
 </div>
 
 ---
 
+## ¡Mira la charla completa!
 
-## Video del Meetup
-<div class="video-section" style="text-align: center; margin: 2rem 0;">
-    <div style="background: #f8f9fa; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);">
-        <h3 style="margin: 0 0 1rem 0; color: #dc3545;"><i class="fas fa-tv"></i> ¡Mira la charla completa!</h3>
-        <div style="position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 1rem;">
+<div class="video-section">
+    <div class="video-container">
+        <div class="video-wrapper">
             <iframe
                 src="https://www.youtube.com/embed/vhlPmOgrvUA"
-                title="Meetup PythonCDMX 17 2023"
-                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px;"
+                title="Meetup PythonCDMX Octubre 2023"
                 frameborder="0"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 allowfullscreen>
-            </iframe>
+            ></iframe>
         </div>
-        <a href="https://www.youtube.com/watch?v=vhlPmOgrvUA" style="background: #dc3545; color: white; padding: 0.75rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; display: inline-block; transition: all 0.3s ease;"><i class="fab fa-youtube"></i> Ver en YouTube</a>
-    </div>
-</div>
----
-
-
-## Temas y Tecnologías
-<div class="tags-section" style="margin: 2rem 0;">
-    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;">
-
-        <a href="/tags/python/" style="background: #3776AB; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-decoration: none; transition: all 0.3s ease;">🐍 Python</a>
-
-        <a href="/tags/jupyter/" style="background: #F37626; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-decoration: none; transition: all 0.3s ease;">📓 Jupyter</a>
-
-        <a href="/tags/web-development/" style="background: #28a745; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-decoration: none; transition: all 0.3s ease;">🌐 Web Development</a>
-
-        <a href="/tags/data-analysis/" style="background: #007bff; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-decoration: none; transition: all 0.3s ease;">📊 Data Analysis</a>
-
-        <a href="/tags/local-development/" style="background: #6c757d; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-decoration: none; transition: all 0.3s ease;">💻 Local Development</a>
-
-        <a href="/tags/interactive/" style="background: #ffc107; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; text-decoration: none; transition: all 0.3s ease;">🎯 Interactive</a>
-
+        <a href="https://www.youtube.com/watch?v=vhlPmOgrvUA" class="youtube-btn">
+            <i class="fab fa-youtube"></i> Ver en YouTube
+        </a>
     </div>
 </div>
 
 ---
 
-## Networking
-<div class="networking-section" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; padding: 2rem; border-radius: 16px; margin: 2rem 0; text-align: center; box-shadow: 0 8px 32px rgba(40, 167, 69, 0.3);">
-    <h3 style="margin: 0 0 1rem 0; font-size: 1.5rem;"><i class="fas fa-comments"></i> ¡Conecta con la comunidad!</h3>
-    <p style="margin: 0; font-size: 1.1rem; line-height: 1.6;">
-        Después de la charla habrá un tiempo de networking donde podrás platicar con programadores de diferentes niveles e intereses.
-        ¡Es la oportunidad perfecta para hacer conexiones profesionales y aprender de otros desarrolladores!
-    </p>
-</div>
-
----
+### Unete a #PythonCDMX
 
-## Enlaces de la Comunidad
-<div class="community-links" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0;">
-    <a href="https://t.me/PythonCDMX" style="background: #0088cc; color: white; padding: 1rem; border-radius: 12px; text-decoration: none; text-align: center; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
+<div class="community-links">
+    <a href="https://t.me/PythonCDMX" class="community-link telegram">
         <i class="fab fa-telegram"></i> Telegram
     </a>
-    <a href="https://www.meetup.com/python-mexico" style="background: #e51937; color: white; padding: 1rem; border-radius: 12px; text-decoration: none; text-align: center; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
+    <a href="https://www.meetup.com/python-mexico" class="community-link meetup">
         <i class="fab fa-meetup"></i> Meetup
     </a>
-    <a href="https://www.youtube.com/@PythonMexico" style="background: #ff0000; color: white; padding: 1rem; border-radius: 12px; text-decoration: none; text-align: center; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
+    <a href="https://www.youtube.com/@PythonMexico" class="community-link youtube">
         <i class="fab fa-youtube"></i> YouTube
     </a>
-    <a href="https://github.com/PythonMexico/pythonCDMX" style="background: #333; color: white; padding: 1rem; border-radius: 12px; text-decoration: none; text-align: center; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
+    <a href="https://github.com/PythonMexico/pythonCDMX" class="community-link github">
         <i class="fab fa-github"></i> GitHub
     </a>
+    <a href="https://www.instagram.com/pythoncdmx" class="community-link instagram">
+        <i class="fab fa-instagram"></i> Instagram
+    </a>
+    <a href="https://www.linkedin.com/company/pythoncdmx" class="community-link linkedin">
+        <i class="fab fa-linkedin"></i> LinkedIn
+    </a>
 </div>
 
 ---
@@ -182,4 +122,4 @@ tags:
     <p style="margin: 0; color: #6c757d; font-style: italic;">
         *Última actualización: Generado automáticamente*
     </p>
-</div>
+</div>