Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <!-- Open Graph --> | |
| <meta property="og:image" content="https://huggingface.co/spaces/sebauyanet/me/blob/main/IMG_0973-1-Verde-BAJA.jpg" /> | |
| <meta property="og:image:width" content="1200" /> | |
| <meta property="og:image:height" content="627" /> | |
| <!-- Twitter --> | |
| <meta name="twitter:card" content="summary_large_image" /> | |
| <meta name="twitter:image" content="https://huggingface.co/spaces/sebauyanet/me/blob/main/IMG_0973-1-Verde-BAJA.jpg" /> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sebastián Auyanet | Consultor & Estrategista</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS */ | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| overflow: hidden; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Left pane */ | |
| .left-pane { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 50vw; | |
| height: 100vh; | |
| background: url('https://huggingface.co/spaces/sebauyanet/mi-p-gina-personal/resolve/main/IMG_0903-1-Azul-ALTA.jpg') center/contain no-repeat ; | |
| background-position: center center ; | |
| background-color: #000 ; | |
| z-index: 0; | |
| } | |
| /* Mobile photo - MODIFIED FOR TOP QUARTER CROP */ | |
| .mobile-photo { | |
| display: none; | |
| width: 100; | |
| height: 280px; | |
| background: url('https://huggingface.co/spaces/sebauyanet/mi-p-gina-personal/resolve/main/IMG_0903-1-Azul-ALTA.jpg') no-repeat; | |
| background-size: cover; | |
| background-position: center 15%; /* Changed from 25% to 15% to focus higher */ | |
| object-fit: cover; | |
| object-position: center top; | |
| margin-bottom: 1rem; | |
| } | |
| /* Navigation */ | |
| #inline-nav { | |
| margin-top: 2rem; | |
| font-size: 1rem; | |
| color: #333; | |
| } | |
| #inline-nav .nav-link { | |
| text-decoration: none; | |
| color: #333; | |
| margin: 0 0.5rem; | |
| cursor: pointer; | |
| transition: color .2s; | |
| } | |
| #inline-nav .nav-link:hover { | |
| color: #8FA31F; | |
| } | |
| /* Panels */ | |
| .panel { | |
| position: absolute; | |
| top: 0; | |
| left: 50vw; | |
| width: 50vw; | |
| height: 100vh; | |
| padding: 2rem; | |
| box-sizing: border-box; | |
| background: #fff; | |
| overflow: auto; | |
| z-index: 1; | |
| } | |
| .panel-content { | |
| margin-top: 3rem; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| /* Footer buttons */ | |
| #bottom-buttons { | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 75%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 1rem; | |
| z-index: 10; | |
| } | |
| .btn { | |
| padding: 0.6rem 1.5rem; | |
| border-radius: 4px; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .btn.linkedin { | |
| background-color: #8FA31F; | |
| color: white; | |
| border: 2px solid #8FA31F; | |
| } | |
| .btn.linkedin:hover { | |
| background-color: #7a8f1a; | |
| border-color: #7a8f1a; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .btn.contacto { | |
| background-color: white; | |
| color: #8FA31F; | |
| border: 2px solid #8FA31F; | |
| } | |
| .btn.contacto:hover { | |
| background-color: #8FA31F; | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Back to home button */ | |
| .back-home-btn { | |
| margin-top: 2rem; | |
| padding: 0.5rem 1rem; | |
| background-color: #8FA31F; | |
| color: white; | |
| border-radius: 4px; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: background-color 0.2s; | |
| } | |
| .back-home-btn:hover { | |
| background-color: #7a8f1a; | |
| } | |
| /* Language toggle */ | |
| .language-toggle { | |
| position: fixed; | |
| top: 2rem; | |
| right: 2rem; | |
| display: flex; | |
| gap: 0.5rem; | |
| z-index: 10; | |
| } | |
| .language-btn { | |
| padding: 0.25rem 0.5rem; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| font-size: 0.85rem; | |
| } | |
| .language-active { | |
| background-color: #8FA31F; | |
| color: white; | |
| } | |
| .language-inactive { | |
| background-color: #f3f4f6; | |
| color: #6b7280; | |
| } | |
| /* Content transitions */ | |
| .content-container { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| } | |
| .content-container.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Language content */ | |
| .english-content { | |
| display: none; | |
| } | |
| .spanish-content { | |
| display: block; | |
| } | |
| .portuguese-content { | |
| display: none; | |
| } | |
| /* Color classes */ | |
| .tendril-text { | |
| color: #8FA31F; | |
| } | |
| /* Client buttons */ | |
| .client-buttons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .client-btn { | |
| padding: 0.5rem 1rem; | |
| background-color: white; | |
| color: #333; | |
| border: 1px solid #8FA31F; | |
| border-radius: 4px; | |
| font-size: 0.9rem; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .client-btn:hover { | |
| background-color: #8FA31F; | |
| color: white; | |
| border-color: #8FA31F; | |
| transform: translateY(-2px); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .client-group-title { | |
| font-weight: 600; | |
| margin-top: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| color: #333; | |
| } | |
| /* Updated Modal styles */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 100; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.3s ease, visibility 0.3s ease; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| padding: 2rem; | |
| border-radius: 12px; | |
| width: 90%; | |
| max-width: 500px; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); | |
| transform: translateY(20px); | |
| opacity: 0; | |
| transition: transform 0.3s ease, opacity 0.3s ease; | |
| margin: 1rem; | |
| } | |
| .modal-overlay.active .modal-content { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .modal-title { | |
| color: #8FA31F; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .modal-text { | |
| color: #333; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.6; | |
| } | |
| .modal-link { | |
| color: #8FA31F; | |
| text-decoration: none; | |
| font-weight: 500; | |
| display: inline-block; | |
| margin-bottom: 1.5rem; | |
| transition: color 0.2s; | |
| } | |
| .modal-link:hover { | |
| color: #7a8f1a; | |
| text-decoration: underline; | |
| } | |
| .modal-close-btn { | |
| background-color: #8FA31F; | |
| color: white; | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: background-color 0.2s; | |
| width: 100%; | |
| max-width: 200px; | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| .modal-close-btn:hover { | |
| background-color: #7a8f1a; | |
| } | |
| .modal-link-container { | |
| text-align: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .left-pane { | |
| display: none; | |
| } | |
| .mobile-photo { | |
| display: block; | |
| height: 280px; | |
| /* Adjusted for top quarter focus */ | |
| background-position: center 10% ; /* Changed from 25% to 10% */ | |
| object-position: center top; | |
| } | |
| .panel { | |
| left: 0; | |
| width: 100vw; | |
| height: auto; | |
| position: relative; | |
| padding-top: 1rem; | |
| } | |
| body, html { | |
| overflow: auto; | |
| } | |
| #bottom-buttons { | |
| position: static; | |
| margin: 2rem auto; | |
| transform: none; | |
| justify-content: center; | |
| left: 50%; | |
| } | |
| .language-toggle { | |
| position: static; | |
| margin: 1rem 0; | |
| justify-content: center; | |
| } | |
| .back-home-btn { | |
| position: static; | |
| margin-bottom: 1rem; | |
| display: inline-flex; | |
| } | |
| .panel-content { | |
| margin-top: 1.5rem; | |
| } | |
| .modal-content { | |
| padding: 1.5rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white"> | |
| <!-- YAML Front Matter --> | |
| <script type="text/yaml"> | |
| --- | |
| title: "Sebastián Auyanet | Consultor & Estrategista" | |
| thumbnail: "https://huggingface.co/spaces/sebauyanet/me/blob/main/IMG_0973-1-Verde-BAJA.jpg" | |
| --- | |
| </script> | |
| <!-- Fixed left image pane --> | |
| <div class="left-pane"></div> | |
| <!-- Mobile photo (hidden on desktop) --> | |
| <div class="mobile-photo"></div> | |
| <!-- Language toggle --> | |
| <div class="language-toggle"> | |
| <div id="language-btn-es" class="language-btn language-active">ES</div> | |
| <div id="language-btn-en" class="language-btn language-inactive">EN</div> | |
| <div id="language-btn-po" class="language-btn language-inactive">PO</div> | |
| </div> | |
| <!-- Home Section --> | |
| <section id="home" class="panel"> | |
| <div class="content-container active"> | |
| <div class="panel-content"> | |
| <h1 class="text-4xl md:text-5xl font-light mb-4 leading-tight spanish-content"> | |
| <span class="tendril-text font-medium">Sebastián Auyanet</span> es un estratega y consultor que trabaja en la intersección entre participación de audiencias, desarrollo de medios, negocios y tecnología. | |
| </h1> | |
| <h1 class="text-4xl md:text-5xl font-light mb-4 leading-tight english-content"> | |
| <span class="tendril-text font-medium">Sebastián Auyanet</span> is a consultant / strategist / writer at the intersection of audience engagement, media development, business and tech. | |
| </h1> | |
| <h1 class="text-4xl md:text-5xl font-light mb-4 leading-tight portuguese-content"> | |
| <span class="tendril-text font-medium">Sebastián Auyanet</span> é um consultor / estrategista / escritor na interseção entre engajamento de audiência, desenvolvimento de mídia, negócios e tecnologia. | |
| </h1> | |
| <!-- Inline navigation --> | |
| <div id="inline-nav"> | |
| <span class="spanish-content"> | |
| <a class="nav-link" data-target="home">Inicio</a> · | |
| <a class="nav-link" data-target="quien-soy">Quién soy</a> · | |
| <a class="nav-link" data-target="que-hago">Qué hago</a> · | |
| <a class="nav-link" data-target="servicios">Servicios</a> · | |
| <a class="nav-link" data-target="clientes">Clientes</a> | |
| </span> | |
| <span class="english-content"> | |
| <a class="nav-link" data-target="home">Home</a> · | |
| <a class="nav-link" data-target="quien-soy">About</a> · | |
| <a class="nav-link" data-target="que-hago">What I Do</a> · | |
| <a class="nav-link" data-target="servicios">Services</a> · | |
| <a class="nav-link" data-target="clientes">Clients</a> | |
| </span> | |
| <span class="portuguese-content"> | |
| <a class="nav-link" data-target="home">Início</a> · | |
| <a class="nav-link" data-target="quien-soy">Sobre mim</a> · | |
| <a class="nav-link" data-target="que-hago">O que faço</a> · | |
| <a class="nav-link" data-target="servicios">Serviços</a> · | |
| <a class="nav-link" data-target="clientes">Clientes</a> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer buttons - Only on home page --> | |
| <div id="bottom-buttons"> | |
| <a class="btn linkedin" href="https://www.linkedin.com/in/sebasti%C3%A1n-auyanet-torres/" target="_blank"> | |
| <i class="fab fa-linkedin mr-2"></i> LinkedIn | |
| </a> | |
| <a class="btn contacto" href="mailto:sebastian.auyanet@gmail.com"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span class="spanish-content">Contáctame</span> | |
| <span class="english-content">Contact me</span> | |
| <span class="portuguese-content">Contate-me</span> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="quien-soy" class="panel hidden"> | |
| <div class="content-container"> | |
| <div class="panel-content"> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 spanish-content">¡Hola!</h2> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 english-content">Hello!</h2> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 portuguese-content">Olá!</h2> | |
| <div class="space-y-6 text-gray-700 leading-relaxed spanish-content"> | |
| <p>Soy un consultor estratégico con 20 años diseñando soluciones para organizaciones y productos de diversos sectores —medios masivos, digitales, ONGs, cooperaciones internacionales and emprendimientos comerciales— en Latinoamérica, EE. UU. y Europa.</p> | |
| <p>He ayudado a incubar y acelerar a más de 40 medios en las Américas and Europe, con implementaciones exitosas de modelos de negocio y procesos de descubrimiento de audiencias en casi todos los casos. También he participado en capacitaciones y talleres para cientos de periodistas en distintas partes del mundo.</p> | |
| <p>Varios de mis clientes han sido beneficiarios de programas financiados por Google News Initiative, Meta, SembraMedia, el Centro Internacional para Periodistas (ICFJ), Luminate, el Media Development Investment Fund, el Departamento de Estado de los Estados Unidos y otras instituciones.</p> | |
| <p>Puedo aportar a organizaciones y empresas de cualquier escala:</p> | |
| <ul class="list-disc pl-5 space-y-3"> | |
| <li><strong>Desarrollo de audiencias</strong>: antes de crear o vender cualquier producto digital o físico, hay que encontrar dónde está tu público. Lo mapeamos y lo aterrizamos en bases de datos. Después, trabajamos en el vínculo con ellos a través de canales digitales y presenciales.</li> | |
| <li><strong>Desarrollo de modelos de negocio</strong>: ayudo a aterrizar la propuesta de valor de un negocio en un canvas que contemple toda la operación, diseño y optimizo programas de suscripciones and membresía y ayudo a implementar otras estrategias comerciales con metodologías ágiles.</li> | |
| <li><strong>Metodologías de medición</strong>: desde 2013 trabajo con métricas tanto cualitativas como cuantitativas. Te ayudo a articular indicadores clave de performance (KPI) y a armar dashboards numéricos y trackers de impacto.</li> | |
| <li><strong>Incorporación de tecnología</strong>: un área que disfruto mucho de mi trabajo es la de ayudar a las organizaciones a descubrir cómo las nuevas herramientas pueden jugar a su favor. Mi trabajo como Project Manager en proyectos de este tipo me ha dado mucha experiencia, pero también me gusta probar cosas por mi cuenta (de hecho, creé este sitio yo mismo tras aprender a enviarle prompts a una Inteligencia Artificial, podemos hablar sobre esto <a href="mailto:sebastian.auyanet@gmail.com" class="tendril-text">en una llamada</a> si te da curiosidad).</li> | |
| <li><strong>Formación y capacitación</strong>: lidero talleres y sesiones formativas para fortalecer las habilidades de equipos de comunicación y gestión en distintos contextos.</li> | |
| <li><strong>Contenido y distribución</strong>: creo y adapto contenidos (texto, audiovisual, podcasts) a cada formato and plataforma, garantizando que el mensaje conecte con la audiencia adecuada.</li> | |
| </ul> | |
| <p>Trabajo con un enfoque empático, escuchando en profundidad las necesidades de cada cliente y comprometiéndome con proyectos a largo plazo para lograr un impacto real y sostenible, sin importar el sector ni la escala.</p> | |
| </div> | |
| <div class="space-y-6 text-gray-700 leading-relaxed english-content"> | |
| <p>I'm a strategic consultant with 20 years of experience designing solutions for organizations and products across various sectors—traditional and digital media, NGOs, international cooperations, and commercial ventures—in Latin America, the U.S., and Europe.</p> | |
| <p>I've helped incubate and accelerate over 40 media outlets throughout the Americas and Europe, successfully implementing business models and audience-discovery processes in nearly every case. I've also led training sessions and workshops for hundreds of journalists around the world.</p> | |
| <p>Several of my clients have benefited from programs funded by the Google News Initiative, Meta, SembraMedia, the International Center for Journalists (ICFJ), Luminate, the Media Development Investment Fund, the U.S. Department of State, and other institutions.</p> | |
| <p>I can contribute to organizations and companies of any size:</p> | |
| <ul class="list-disc pl-5 space-y-3"> | |
| <li><strong>Audience Development</strong>: before creating or selling any digital or physical product, we need to find where your audience is. We map it and land it in databases. Then, we work on connecting with them through digital and in-person channels.</li> | |
| <li><strong>Business Model Development</strong>: I help ground a business's value proposition in a comprehensive operational canvas, design and optimize subscription and membership programs, and implement other commercial strategies using agile methodologies.</li> | |
| <li><strong>Measurement Methodologies</strong>: Since 2013 I've worked with both qualitative and quantitative metrics. I help you define key performance indicators (KPIs) and build numerical dashboards and impact trackers.</li> | |
| <li><strong>Technology Integration</strong>: One aspect of my work I particularly enjoy is helping organizations discover how new tools can work in their favor. My experience as a Project Manager on projects of this kind has given me deep expertise, but I also love experimenting on my own (in fact, I built this site myself by learning to send prompts to an Artificial Intelligence; we can discuss this in a <a href="mailto:sebastian.auyanet@gmail.com" class="tendril-text">call</a> if you're curious).</li> | |
| <li><strong>Training & Capacity Building</strong>: leading workshops and training sessions to strengthen the skills of communication and management teams in diverse contexts.</li> | |
| <li><strong>Content & Distribution</strong>: creating and adapting content (text, video, podcasts) for each format and platform, ensuring the message reaches the right audience.</li> | |
| </ul> | |
| <p>I work with an empathetic approach, deeply listening to each client's needs and committing to long-term projects to achieve real, sustainable impact—regardless of sector or scale.</p> | |
| </div> | |
| <div class="space-y-6 text-gray-700 leading-relaxed portuguese-content"> | |
| <p>Sou um consultor estratégico com 20 anos de experiência projetando soluções para organizações e produtos de diversos setores —mídia tradicional e digital, ONGs, cooperações internacionais e empreendimentos comerciais— na América Latina, EUA e Europa.</p> | |
| <p>Ajudei a incubar e acelerar mais de 40 veículos de comunicação nas Américas e Europa, implementando com sucesso modelos de negócios e processos de descoberta de audiência na maioria dos casos. Também conduzi sessões de treinamento e workshops para centenas de jornalistas em diferentes partes do mundo.</p> | |
| <p>Vários dos meus clientes foram beneficiados por programas financiados pela Google News Initiative, Meta, SembraMedia, International Center for Journalists (ICFJ), Luminate, Media Development Investment Fund, Departamento de Estado dos EUA e outras instituições.</p> | |
| <p>Posso contribuir com organizações e empresas de qualquer tamanho:</p> | |
| <ul class="list-disc pl-5 space-y-3"> | |
| <li><strong>Desenvolvimento de Audiência</strong>: antes de criar ou vender qualquer produto digital ou físico, precisamos encontrar onde está seu público. Mapeamos e consolidamos em bancos de dados. Depois, trabalhamos na conexão com eles através de canais digitais e presenciais.</li> | |
| <li><strong>Desenvolvimento de Modelos de Negócio</strong>: ajudo a fundamentar a proposta de valor de um negócio em um canvas operacional abrangente, projeto e otimizo programas de assinatura e membros e implemento outras estratégias comerciais usando metodologias ágeis.</li> | |
| <li><strong>Metodologias de Medição</strong>: Desde 2013 trabalho com métricas tanto qualitativas quanto quantitativas. Ajudo você a definir indicadores-chave de performance (KPIs) e construir painéis numéricos e rastreadores de impacto.</li> | |
| <li><strong>Integração Tecnológica</strong>: Um aspecto do meu trabalho que particularmente aprecio é ajudar organizações a descobrir como novas ferramentas podem funcionar a seu favor. Minha experiência como Gerente de Projetos me deu ampla expertise, mas também adoro experimentar por conta própria (na verdade, criei este site sozinho aprendendo a enviar prompts para uma Inteligência Artificial; podemos discutir isso em uma <a href="mailto:sebastian.auyanet@gmail.com" class="tendril-text">chamada</a> se você estiver curioso).</li> | |
| <li><strong>Treinamento & Capacitação</strong>: liderando workshops e sessões de treinamento para fortalecer as habilidades de equipes de comunicação e gestão em diversos contextos.</li> | |
| <li><strong>Conteúdo & Distribuição</strong>: criando e adaptando conteúdo (texto, vídeo, podcasts) para cada formato e plataforma, garantindo que a mensagem alcance o público certo.</li> | |
| </ul> | |
| <p>Trabalho com uma abordagem empática, ouvindo profundamente as necessidades de cada cliente e me comprometendo com projetos de longo prazo para alcançar impacto real e sustentável — independentemente do setor ou escala.</p> | |
| </div> | |
| <a href="#" class="back-home-btn" data-target="home"> | |
| <i class="fas fa-arrow-left"></i> | |
| <span class="spanish-content">Volver al inicio</span> | |
| <span class="english-content">Back to home</span> | |
| <span class="portuguese-content">Voltar ao início</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Section --> | |
| <section id="que-hago", class="panel hidden"> | |
| <div class="content-container"> | |
| <div class="panel-content"> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 spanish-content">Qué hago</h2> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 english-content">What I do</h2> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 portuguese-content">O que faço</h2> | |
| <div class="space-y-6 text-gray-700 leading-relaxed spanish-content"> | |
| <p>Desde 2017 ayudo a medios, ONG, cooperaciones y emprendimientos comerciales en las Américas a mapear sus audiencias o clientelas, a optimizar sus procesos de trabajo internos y con ellos a contribuir a lograr una mejor sustentabilidad económica.</p> | |
| <p>Hago esto tanto vía aceleradoras e incubadoras (en organizaciones como SembraMedia, ICFJ, The Membership Puzzle Project – MDIF) y en proyectos por contratación directa.</p> | |
| <p>Trabajé en NowThis News (Estados Unidos) desde 2018. NowThis fue líder mundial en contenido informativo en redes sociales desde 2012; allí coordiné y publiqué contenidos audiovisuales en español y luego asumí el puesto de Estratega de Audiencias, Impacto y Experimentación.</p> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-green-700 shadow-sm"> | |
| <p class="font-medium mb-2">Trabajo mano a mano con mis clientes, combinando:</p> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li><span class="font-medium">Visión estratégica:</span> diseño de sistemas de comunicación basados en confianza, cercanía y ubicuidad.</li> | |
| <li><span class="font-medium">Intervención práctica:</span> apoyo en definición de productos, optimización de procesos and transformación digital. Entendiendo que muchas veces estos procesos necesitan de más que asesoría, también puedo intervenir o colaborar en la ejecución de cualquier proyecto y asumir otra posición si eso beneficia el proceso.</li> | |
| <li><span class="font-medium">Perspectiva multicultural:</span> mi experiencia en el mercado de EE. UU. y Latinoamérica me permite adaptarme a realidades diversas, informadas por contextos ampliamente variables.</li> | |
| </ul> | |
| </div> | |
| <p>Mi particular interés por los procesos que priorizan la escucha viene de la última etapa de mis 11 años en medios de mi país, Uruguay, donde transicioné de roles más tradicionales a la jefatura de redes sociales del diario El Observador, siendo uno de los primeros periodistas del medio en hacerlo.</p> | |
| <p>Eso se profundizó con mis estudios de Maestría (MA in Engagement Journalism, Craig Newmark School of Journalism, 2017) and in the Certificación de Management en Productos de Información (News Product Management Certification, News Product Alliance y CUNY, 2024).</p> | |
| <p>Más allá del uso de la tecnología para optimizar procesos, también colaboro con expertos en recursos humanos, SEO, UX and branding para que el acompañamiento sea integral and 100% orientado a resultados.</p> | |
| </div> | |
| <div class="space-y-6 text-gray-700 leading-relaxed english-content"> | |
| <p>Since 2017, I've helped media outlets, NGOs, cooperatives and commercial ventures across the Americas map their audiences or customer bases, optimize their internal work processes, and thereby contribute to achieving better economic sustainability.</p> | |
| <p>I do this both through accelerators and incubators (in organizations like SembraMedia, ICFJ, The Membership Puzzle Project – MDIF) and through direct contracting projects.</p> | |
| <p>I worked at NowThis News (USA) from 2018 onward. NowThis has been the world's leading social-news brand since 2012; there I coordinated and published Spanish-language video content, later taking on the position of Audience Strategy, Impact and Experimentation Strategist.</p> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-green-700 shadow-sm"> | |
| <p class="font-medium mb-2">I partner closely with clients to deliver:</p> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li><span class="font-medium">Strategic vision:</span> crafting communication systems built on trust, proximity and ubiquity.</li> | |
| <li><span class="font-medium">Hands-on execution:</span> defining products, optimizing workflows and driving digital transformation. Understanding that these processes often require more than just advice, I can also intervene or collaborate in the execution of any project and assume another position if that benefits the process.</li> | |
| <li><span class="font-medium">Multicultural adaptability:</span> experience in both the U.S. and Latin American markets allows me to tailor solutions to widely varying contexts.</li> | |
| </ul> | |
| </div> | |
| <p>My particular interest in processes that prioritize listening comes from the final stage of my 11 years in media in my home country, Uruguay, where I transitioned from more traditional roles to heading social media for the newspaper El Observador, being one of the first journalists at the outlet to do so.</p> | |
| <p>This deepened with my Master's studies (MA in Engagement Journalism, Craig Newmark School of Journalism, 2017) and my certification in Information Product Management (News Product Management Certification, News Product Alliance and CUNY, 2024).</p> | |
| <p>Beyond using technology to optimize processes, I also collaborate with experts in human resources, SEO, UX and branding to ensure comprehensive, 100% results-oriented support.</p> | |
| </div> | |
| <div class="space-y-6 text-gray-700 leading-relaxed portuguese-content"> | |
| <p>Desde 2017, ajudo veículos de comunicação, ONGs, cooperativas e empreendimentos comerciais nas Américas a mapear suas audiências ou bases de clientes, otimizar seus processos internos de trabalho e, com isso, contribuir para alcançar uma melhor sustentabilidade econômica.</p> | |
| <p>Faço isso tanto por meio de aceleradoras e incubadoras (em organizações como SembraMedia, ICFJ, The Membership Puzzle Project – MDIF) quanto por meio de projetos de contratação direta.</p> | |
| <p>Trabalhei na NowThis News (EUA) a partir de 2018. NowThis foi a principal marca de notícias em redes sociais desde 2012; lá coordenei e publiquei conteúdo audiovisual em espanhol e depois assumi a posição de Estrategista de Audiência, Impacto e Experimentação.</p> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-green-700 shadow-sm"> | |
| <p class="font-medium mb-2">Trabalho em parceria com meus clientes para oferecer:</p> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li><span class="font-medium">Visão estratégica:</span> criação de sistemas de comunicação baseados em confiança, proximidade e ubiquidade.</li> | |
| <li><span class="font-medium">Execução prática:</span> apoio na definição de produtos, otimização de processos e transformação digital. Entendendo que muitas vezes esses processos precisam de mais do que apenas consultoria, também posso intervir ou colaborar na execução de qualquer projeto e assumir outra posição se isso beneficiar o processo.</li> | |
| <li><span class="font-medium">Adaptabilidade multicultural:</span> experiência nos mercados dos EUA e América Latina me permite adaptar soluções a contextos amplamente variáveis.</li> | |
| </ul> | |
| </div> | |
| <p>Meu interesse particular por processos que priorizam a escuta vem da fase final dos meus 11 anos em mídia no meu país natal, Uruguai, onde fiz a transição de funções mais tradicionales para chefiar as redes sociais do jornal El Observador, sendo um dos primeiro jornalistas do veículo a fazê-lo.</p> | |
| <p>Isso se aprofundou com meus estudos de Mestrado (MA in Engagement Journalism, Craig Newmark School of Journalism, 2017) e minha certificação em Gestão de Produtos de Informação (News Product Management Certification, News Product Alliance e CUNY, 2024).</p> | |
| <p>Além de usar tecnologia para otimizar processos, também colaboro com especialistas em recursos humanos, SEO, UX e branding para garantir um suporte abrangente e 100% orientado a resultados.</p> | |
| </div> | |
| <a href="#" class="back-home-btn" data-target="home"> | |
| <i class="fas fa-arrow-left"></i> | |
| <span class="spanish-content">Volver al inicio</span> | |
| <span class="english-content">Back to home</span> | |
| <span class="portuguese-content">Voltar ao início</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="servicios" class="panel hidden"> | |
| <div class="content-container"> | |
| <div class="panel-content"> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 spanish-content">Servicios</h2> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 english-content">Services</h2> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 portuguese-content">Serviços</h2> | |
| <div class="space-y-8 text-gray-700 spanish-content"> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-green-700 shadow-sm"> | |
| <h3 class="text-xl md:text-2xl tendril-text font-medium mb-4">Si sos un medio de comunicación o una marca, puedo ayudarte con:</h3> | |
| <ul class="list-disc pl-5 space-y-3 leading-relaxed"> | |
| <li>Investigación de audiencia y user research para entender a tus lectores, clientes, prospectos o seguidores</li> | |
| <li>Diseño e implementación de programas de membresía o suscripción</li> | |
| <li>Diseño de producto y experiencias (customer journeys, prototipos) centrados en tu público</li> | |
| <li>Estrategia de contenidos, planificación de distribución y entrenamiento de portavoces para reforzar la voz de tu marca</li> | |
| <li>Transformación digital: definición de modelos de negocio (tradicionales o alternativos), integración de IA y adopción de metodologías ágiles</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-blue-500 shadow-sm"> | |
| <h3 class="text-xl md:text-2xl tendril-text font-medium mb-4">Si sos una organización, un fondo o una filantropía, puedo ayudarte con:</h3> | |
| <ul class="list-disc pl-5 space-y-3 leading-relaxed"> | |
| <li>Diagnóstico de comunidades and mapeo de stakeholders clave</li> | |
| <li>Diseño de programas de incubación, aceleración o investigación</li> | |
| <li>Facilitación de talleres, diseño de programas educativos y de formación, y dinámicas de co-creación para involucrar a tu audiencia</li> | |
| <li>Diseño de productos de información y rutas de participación ciudadana</li> | |
| <li>Medición de impacto: definición de KPIs cuantitativos y metodologías cualitativas</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-purple-500 shadow-sm"> | |
| <p class="leading-relaxed">Si lo que tenés en mente no está en esta lista, no dudes en <a href="mailto:sebastian.auyanet@gmail.com" class="tendril-text font-medium">ponerte en contacto</a>.</p> | |
| </div> | |
| </div> | |
| <div class="space-y-8 text-gray-700 english-content"> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-green-700 shadow-sm"> | |
| <h3 class="text-xl md:text-2xl tendril-text font-medium mb-4">If you are a media outlet or a brand, I can help you with:</h3> | |
| <ul class="list-disc pl-5 space-y-3 leading-relaxed"> | |
| <li>Research your audience and conduct user research to understand your readers, customers, prospects, or followers</li> | |
| <li>Design and implement membership or subscription programs</li> | |
| <li>Design products and experiences (customer journeys, prototypes) centered on your audience</li> | |
| <li>Content strategy, distribution planning, and spokesperson training to strengthen your brand voice</li> | |
| <li>Digital transformation: define business models (traditional or alternative), integrate AI, and adopt agile methodologies</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-blue-500 shadow-sm"> | |
| <h3 class="text-xl md:text-2xl tendril-text font-medium mb-4">If you are an organization, a fund or a philanthropy, I can help you with:</h3> | |
| <ul class="list-disc pl-5 space-y-3 leading-relaxed"> | |
| <li>Community diagnostics and stakeholder mapping</li> | |
| <li>Design of incubation, acceleration or research programs</li> | |
| <li>Facilitation of workshops, educational program design and training, and co-creation dynamics to engage your audience</li> | |
| <li>Design of information products and civic engagement pathways</li> | |
| <li>Impact measurement: definition of quantitative KPIs and qualitative methodologies</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-purple-500 shadow-sm"> | |
| <p class="leading-relaxed">If what you have in mind is not listed here, please feel free to <a href="mailto:sebastian.auyanet@gmail.com" class="tendril-text font-medium">get in touch</a> with any inquiries you might have.</p> | |
| </div> | |
| </div> | |
| <div class="space-y-8 text-gray-700 portuguese-content"> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-green-700 shadow-sm"> | |
| <h3 class="text-xl md:text-2xl tendril-text font-medium mb-4">Se você é um veículo de comunicação ou uma marca, posso te ajudar com:</h3> | |
| <ul class="list-disc pl-5 space-y-3 leading-relaxed"> | |
| <li>Pesquisa de audiência and user research para entender seus leitores, clientes, prospects ou seguidores</li> | |
| <li>Design e implementação de programas de associação ou assinatura</li> | |
| <li>Design de produtos e experiencias (jornadas do cliente, protótipos) centrados no seu público</li> | |
| <li>Estratégia de conteúdo, planejamento de distribuição e treinamento de porta-vozes para fortalecer a voz da sua marca</li> | |
| <li>Transformação digital: definição de modelos de negócios (tradicionais ou alternativos), integração de IA e adoção de metodologias ágeis</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-blue-500 shadow-sm"> | |
| <h3 class="text-xl md:text-2xl tendril-text font-medium mb-4">Se você é uma organización, um fundo ou uma filantropia, posso te ajudar com:</h3> | |
| <ul class="list-disc pl-5 space-y-3 leading-relaxed"> | |
| <li>Diagnóstico de comunidades e mapeamento de stakeholders-chave</li> | |
| <li>Design de programas de incubação, aceleração ou pesquisa</li> | |
| <li>Facilitação de workshops, design de programas educacionais e de treinamento, e dinâmicas de cocriação para engajar sua audiência</li> | |
| <li>Design de produtos de informação e rotas de participação cidadã</li> | |
| <li>Medição de impacto: definição de KPIs quantitativos e metodologias qualitativas</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg border-l-4 border-purple-500 shadow-sm"> | |
| <p class="leading-relaxed">Se o que você tem em mente não está listado aqui, sinta-se à vontade para <a href="mailto:sebastian.auyanet@gmail.com" class="tendril-text font-medium">entrar em contato</a> com qualquer dúvida que possa tenha.</p> | |
| </div> | |
| </div> | |
| <a href="#" class="back-home-btn" data-target="home"> | |
| <i class="fas fa-arrow-left"></i> | |
| <span class="spanish-content">Volver al inicio</span> | |
| <span class="english-content">Back to home</span> | |
| <span class="portuguese-content">Voltar ao início</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section id="clientes", class="panel hidden"> | |
| <div class="content-container"> | |
| <div class="panel-content"> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 spanish-content">Clientes</h2> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 english-content">Clients</h2> | |
| <h2 class="text-3xl md:text-4xl tendril-text font-medium mb-8 portuguese-content">Clientes</h2> | |
| <div class="space-y-6 text-gray-700 spanish-content"> | |
| <p class="leading-relaxed">Trabajo cerca de mis clientes y me aseguro de que mis recomendaciones sean accionables en cada paso del proceso. Estimo que muchos impactos significativos no están tras un simple número y por eso hay que diseñar nuevas formas de medir los buenos procesos.</p> | |
| <p class="leading-relaxed">He ayudado a implementar y entregar con éxito más de 50 iniciativas de diversificación de modelos de negocio y asistido a varias redacciones a crear herramientas de mapeo de audiencias, procesos de gestión e implementaciones técnicas de productos de insights y contenido para diversas organizaciones internacionales. He trabajado en una amplia variedad de escenarios, desde entregas para programas regionales hasta compromisos directos contratados por redacciones u ONGs, aplicando estrategias de producto tanto para proyectos de cara a la audiencia como internos. Estos son algunos de los clientes con los que he trabajado en los últimos años:</p> | |
| <div class="space-y-4"> | |
| <p class="client-group-title">Organizaciones:</p> | |
| <div class="client-buttons"> | |
| <div class="client-btn" data-client="sembramedia">SembraMedia</div> | |
| <div class="client-btn" data-client="gni">Google News Initiative</div> | |
| <div class="client-btn" data-client="mdif">Media Development Investment Fund</div> | |
| <div class="client-btn" data-client="icfj">International Center for Journalists</div> | |
| <div class="client-btn" data-client="iwpr">Institute for War and Peace</div> | |
| <div class="client-btn" data-client="meta">Meta Journalism Project</div> | |
| <div class="client-btn" data-client="luminate">Luminate</div> | |
| <div class="client-btn" data-client="rosalux">Fundación Rosa Luxembourg</div> | |
| </div> | |
| <p class="client-group-title">Proyectos de Medios:</p> | |
| <div class="client-buttons"> | |
| <div class="client-btn" data-client="elsurti">El Surti 🇵🇾</div> | |
| <div class="client-btn" data-client="anfibia">Revista Anfibia 🇦🇷</div> | |
| <div class="client-btn" data-client="ladiaria">La Diaria 🇺🇾</div> | |
| <div class="client-btn" data-client="lupa">Agencia Lupa 🇧🇷</div> | |
| <div class="client-btn" data-client="ponte">Ponte Jornalismo 🇧🇷</div> | |
| <div class="client-btn" data-client="voxeurop">VoxEurop 🇫🇷/🇪🇺</div> | |
| <div class="client-btn" data-client="sinantena">Sin Antena 🇵🇾</div> | |
| <div class="client-btn" data-client="pdeb">Periodismo de Barrio 🇨🇺</div> | |
| <div class="client-btn" data-client="verificado">Verificado.com.mx 🇲🇽</div> | |
| <div class="client-btn" data-client="laverdad">La Verdad 🇲🇽</div> | |
| <div class="client-btn" data-client="conexion">Conexión Migrante 🇲🇽</div> | |
| <div class="client-btn" data-client="runrun">Runrun.es 🇻🇪</div> | |
| <div class="client-btn" data-client="lavida">La Vida de Nos 🇻🇪</div> | |
| <div class="client-btn" data-client="muywaso">Muy Waso 🇧🇴</div> | |
| <div class="client-btn" data-client="asuntos">Asuntos Centrales 🇧🇴</div> | |
| <div class="client-btn" data-client="quorum">Quórum 🇬🇹</div> | |
| <div class="client-btn" data-client="ojo">Ojo Con Mi Pisto 🇬🇹</div> | |
| <div class="client-btn" data-client="wambra">Wambra 🇪🇨</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6 text-gray-700 english-content"> | |
| <p class="leading-relaxed">I work closely with my clients and ensure my recommendations are actionable at every step of the process. I'm convinced that many significant impacts aren't behind a simple number, which is why we need to design new ways to measure good processes.</p> | |
| <p class="leading-relaxed">I successfully helped implement and deliver more than 50 business model diversification initiatives and helped several newsrooms to create audience mapping tools, management processes and technical product implementations on insights and content for several international organizations. I have worked with a vast array of scenarios, from delivering for regional programs to direct engagements hired by newsrooms or NGOs to applying product strategies both for audience-facing or internal projects. These are some of the clients I have worked with in the last years:</p> | |
| <div class="space-y-4"> | |
| <p class="client-group-title">Organizations:</p> | |
| <div class="client-buttons"> | |
| <div class="client-btn" data-client="sembramedia">SembraMedia</div> | |
| <div class="client-btn" data-client="gni">Google News Initiative</div> | |
| <div class="client-btn" data-client="mdif">Media Development Investment Fund</div> | |
| <div class="client-btn" data-client="icfj">International Center for Journalists</div> | |
| <div class="client-btn" data-client="iwpr">Institute for War and Peace</div> | |
| <div class="client-btn" data-client="meta">Meta Journalism Project</div> | |
| <div class="client-btn" data-client="luminate">Luminate</div> | |
| <div class="client-btn" data-client="rosalux">Fundación Rosa Luxembourg</div> | |
| </div> | |
| <p class="client-group-title">Media Projects:</p> | |
| <div class="client-buttons"> | |
| <div class="client-btn" data-client="elsurti">El Surti 🇵🇾</div> | |
| <div class="client-btn" data-client="anfibia">Revista Anfibia 🇦🇷</div> | |
| <div class="client-btn" data-client="ladiaria">La Diaria 🇺🇾</div> | |
| <div class="client-btn" data-client="lupa">Agencia Lupa 🇧🇷</div> | |
| <div class="client-btn" data-client="ponte">Ponte Jornalismo 🇧🇷</div> | |
| <div class="client-btn" data-client="voxeurop">VoxEurop 🇫🇷/🇪🇺</div> | |
| <div class="client-btn" data-client="sinantena">Sin Antena 🇵🇾</div> | |
| <div class="client-btn" data-client="pdeb">Periodismo de Barrio 🇨🇺</div> | |
| <div class="client-btn" data-client="verificado">Verificado.com.mx 🇲🇽</div> | |
| <div class="client-btn" data-client="laverdad">La Verdad 🇲🇽</div> | |
| <div class="client-btn" data-client="conexion">Conexión Migrante 🇲🇽</div> | |
| <div class="client-btn" data-client="runrun">Runrun.es 🇻🇪</div> | |
| <div class="client-btn" data-client="lavida">La Vida de Nos 🇻🇪</div> | |
| <div class="client-btn" data-client="muywaso">Muy Waso 🇧🇴</div> | |
| <div class="client-btn" data-client="asuntos">Asuntos Centrales 🇧🇴</div> | |
| <div class="client-btn" data-client="quorum">Quórum 🇬🇹</div> | |
| <div class="client-btn" data-client="ojo">Ojo Con Mi Pisto 🇬🇹</div> | |
| <div class="client-btn" data-client="wambra">Wambra 🇪🇨</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-6 text-gray-700 portuguese-content"> | |
| <p class="leading-relaxed">Trabalho próximo aos meus clientes e garanto que minhas recomendações sejam acionáveis em cada etapa do processo. Acredito que muitos impactos significativos não estão por trás de um simples número, e por isso precisamos projetar novas formas de medir bons processos.</p> | |
| <p class="leading-relaxed">Ajudei com sucesso a implementar e entregar mais de 50 iniciativas de diversificação de modelos de negócios e auxiliei várias redações a criar ferramentas de mapeamento de audiência, processos de gestão e implementações técnicas de produtos de insights e conteúdo para diversas organizações internacional. Trabalhei com uma ampla variedade de cenários, desde entregas para programas regionais até compromissos diretos contratados por redações ou ONGs, aplicando estratégias de produto tanto para projetos voltados ao público quanto internos. Estes são alguns dos clientes com os quais trabalhei nos últimos anos:</p> | |
| <div class="space-y-4"> | |
| <p class="client-group-title">Organizações:</p> | |
| <div class="client-buttons"> | |
| <div class="client-btn" data-client="sembramedia">SembraMedia</div> | |
| <div class="client-btn" data-client="gni">Google News Initiative</div> | |
| <div class="client-btn" data-client="mdif">Media Development Investment Fund</div> | |
| <div class="client-btn" data-client="icfj">International Center for Journalists</div> | |
| <div class="client-btn" data-client="iwpr">Institute for War and Peace</div> | |
| <div class="client-btn" data-client="meta">Meta Journalism Project</div> | |
| <div class="client-btn" data-client="luminate">Luminate</div> | |
| <div class="client-btn" data-client="rosalux">Fundación Rosa Luxembourg</div> | |
| </div> | |
| <p class="client-group-title">Projetos de Mídia:</p> | |
| <div class="client-buttons"> | |
| <div class="client-btn" data-client="elsurti">El Surti 🇵🇾</div> | |
| <div class="client-btn" data-client="anfibia">Revista Anfibia 🇦🇷</div> | |
| <div class="client-btn" data-client="ladiaria">La Diaria 🇺🇾</div> | |
| <div class="client-btn" data-client="lupa">Agencia Lupa 🇧🇷</div> | |
| <div class="client-btn" data-client="ponte">Ponte Jornalismo 🇧🇷</div> | |
| <div class="client-btn" data-client="voxeurop">VoxEurop 🇫🇷/🇪🇺</div> | |
| <div class="client-btn" data-client="sinantena">Sin Antena 🇵🇾</div> | |
| <div class="client-btn" data-client="pdeb">Periodismo de Barrio 🇨🇺</div> | |
| <div class="client-btn" data-client="verificado">Verificado.com.mx 🇲🇽</div> | |
| <div class="client-btn" data-client="laverdad">La Verdad 🇲🇽</div> | |
| <div class="client-btn" data-client="conexion">Conexión Migrante 🇲🇽</div> | |
| <div class="client-btn" data-client="runrun">Runrun.es 🇻🇪</div> | |
| <div class="client-btn" data-client="lavida">La Vida de Nos 🇻🇪</div> | |
| <div class="client-btn" data-client="muywaso">Muy Waso 🇧🇴</div> | |
| <div class="client-btn" data-client="asuntos">Asuntos Centrales 🇧🇴</div> | |
| <div class="client-btn" data-client="quorum">Quórum 🇬🇹</div> | |
| <div class="client-btn" data-client="ojo">Ojo Con Mi Pisto 🇬🇹</div> | |
| <div class="client-btn" data-client="wambra">Wambra 🇪🇨</div> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="back-home-btn" data-target="home"> | |
| <i class="fas fa-arrow-left"></i> | |
| <span class="spanish-content">Volver al inicio</span> | |
| <span class="english-content">Back to home</span> | |
| <span class="portuguese-content">Voltar ao início</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Modal Template --> | |
| <div class="modal-overlay" id="client-modal"> | |
| <div class="modal-content"> | |
| <h3 class="modal-title" id="modal-client-title">Client Name</h3> | |
| <p class="modal-text" id="modal-client-text">Client description goes here.</p> | |
| <div class="modal-link-container"> | |
| <a href="#" target="_blank" class="modal-link" id="modal-client-link">www.example.com</a> | |
| </div> | |
| <button class="modal-close-btn" id="modal-close-btn"> | |
| <span class="spanish-content">Regresar</span> | |
| <span class="english-content">Back</span> | |
| <span class="portuguese-content">Voltar</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Client Data --> | |
| <script> | |
| const clientData = { | |
| "sembramedia": { | |
| "es": { | |
| "title": "SembraMedia", | |
| "text": "Ex Embajador y Coordinador de Programas y actual miembro del advisory board y consultor. Trabajé en los programas SembraTec, SembraMex, Velocidad, Amuna y GNi Startups Lab", | |
| "link": "https://www.sembramedia.org", | |
| "linkText": "www.sembramedia.org" | |
| }, | |
| "en": { | |
| "title": "SembraMedia", | |
| "text": "Former Ambassador and Program Coordinator and current advisory board member and consultant. I worked on the SembraTec, SembraMex, Velocidad, Amuna and GNi Startups Lab programs", | |
| "link": "https://www.sembramedia.org", | |
| "linkText": "www.sembramedia.org" | |
| }, | |
| "po": { | |
| "title": "SembraMedia", | |
| "text": "Ex-Embaixador e Coordenador de Programas e atual membro do advisory board e consultor. Trabalhei nos programas SembraTec, SembraMex, Velocidad, Amuna e GNi Startups Lab", | |
| "link": "https://www.sembramedia.org", | |
| "linkText": "www.sembramedia.org" | |
| } | |
| }, | |
| "gni": { | |
| "es": { | |
| "title": "Google News Initiative", | |
| "text": "Consultor para el programa Startups Lab en América Latina, ayudando a medios emergentes a desarrollar sus modelos de negocio y estrategias de audiencia. Trabajé tanto en procesos de incubación como de aceleración.", | |
| "link": "https://newsinitiative.withgoogle.com", | |
| "linkText": "newsinitiative.withgoogle.com" | |
| }, | |
| "en": { | |
| "title": "Google News Initiative", | |
| "text": "Consultant for incubators and accelerators for the Startups Lab program in Latin America, helping emerging media develop their business models and audience strategies.", | |
| "link": "https://newsinitiative.withgoogle.com", | |
| "linkText": "newsinitiative.withgoogle.com" | |
| }, | |
| "po": { | |
| "title": "Google News Initiative", | |
| "text": "Consultor para o programa Startups Lab na América Latina, ajudando veículos emergentes a desenvolver seus modelos de negócio e estratégias de audiência.", | |
| "link": "https://newsinitiative.withgoogle.com", | |
| "linkText": "newsinitiative.withgoogle.com" | |
| } | |
| }, | |
| "mdif": { | |
| "es": { | |
| "title": "Media Development Investment Fund", | |
| "text": "Fui parte del programa the Membership Puzzle Project, dedicado a fortalecer procesos de membresía para Agencia Lupa (🇧🇷), CIPER (🇨🇱) y Red/Acción (🇦🇷)", | |
| "link": "https://www.mdif.org", | |
| "linkText": "www.mdif.org" | |
| }, | |
| "en": { | |
| "title": "Media Development Investment Fund", | |
| "text": "I was part of The Membership Puzzle Project program, dedicated to strengthening membership processes for Agência Lupa (🇧🇷), CIPER (🇨🇱), and Red/Acción (🇦🇷)", | |
| "link": "https://www.mdif.org", | |
| "linkText": "www.mdif.org" | |
| }, | |
| "po": { | |
| "title": "Media Development Investment Fund", | |
| "text": "Fiz parte do programa The Membership Puzzle Project, dedicado a fortalecer processos de adesão para a Agência Lupa (🇧🇷), CIPER (🇨🇱) e Red/Acción (🇦🇷).", | |
| "link": "https://www.mdif.org", | |
| "linkText": "www.mdif.org" | |
| } | |
| }, | |
| "icfj": { | |
| "es": { | |
| "title": "International Center for Journalists", | |
| "text": "Mentor y capacitador para programas de desarrollo de medios y periodismo en América Latina.", | |
| "link": "https://www.icfj.org", | |
| "linkText": "www.icfj.org" | |
| }, | |
| "en": { | |
| "title": "International Center for Journalists", | |
| "text": "Mentor and trainer for media development and journalism programs in Latin America.", | |
| "link": "https://www.icfj.org", | |
| "linkText": "www.icfj.org" | |
| }, | |
| "po": { | |
| "title": "International Center for Journalists", | |
| "text": "Mentor e instrutor para programas de desenvolvimento de mídia e jornalismo na América Latina.", | |
| "link": "https://www.icfj.org", | |
| "linkText": "www.icfj.org" | |
| } | |
| }, | |
| "elsurti": { | |
| "es": { | |
| "title": "El Surti 🇵🇾", | |
| "text": "Consultoría estratégica para el desarrollo de su modelo de membresía y estrategia de audiencia.", | |
| "link": "https://elsurti.com", | |
| "linkText": "elsurti.com" | |
| }, | |
| "en": { | |
| "title": "El Surti 🇵🇾", | |
| "text": "Strategic consulting for the development of their membership model and audience strategy.", | |
| "link": "https://elsurti.com", | |
| "linkText": "elsurti.com" | |
| }, | |
| "po": { | |
| "title": "El Surti 🇵🇾", | |
| "text": "Consultoria estratégica para o desenvolvimento de seu modelo de membros e estratégia de audiência.", | |
| "link": "https://elsurti.com", | |
| "linkText": "elsurti.com" | |
| } | |
| } | |
| // Add more clients as needed following the same structure | |
| }; | |
| </script> | |
| <script> | |
| // Navigation functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const links = document.querySelectorAll('#inline-nav .nav-link, .back-home-btn'); | |
| const panels = document.querySelectorAll('.panel'); | |
| // Show home panel by default | |
| document.getElementById('home').classList.remove('hidden'); | |
| links.forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const target = link.getAttribute('data-target'); | |
| // Hide all panels | |
| panels.forEach(p => p.classList.add('hidden')); | |
| // Show target panel | |
| document.getElementById(target).classList.remove('hidden'); | |
| // Activate content animations | |
| document.querySelectorAll('.content-container').forEach(container => { | |
| container.classList.remove('active'); | |
| }); | |
| setTimeout(() => { | |
| document.querySelector(`#${target} .content-container`).classList.add('active'); | |
| }, 10); | |
| // Scroll to top of panel | |
| document.getElementById(target).scrollTo(0, 0); | |
| }); | |
| }); | |
| // Language toggle functionality | |
| const btnEs = document.getElementById('language-btn-es'); | |
| const btnEn = document.getElementById('language-btn-en'); | |
| const btnPo = document.getElementById('language-btn-po'); | |
| if (btnEs && btnEn && btnPo) { | |
| btnEs.addEventListener('click', function() { | |
| // Switch to Spanish | |
| this.classList.remove('language-inactive'); | |
| this.classList.add('language-active'); | |
| btnEn.classList.remove('language-active'); | |
| btnEn.classList.add('language-inactive'); | |
| btnPo.classList.remove('language-active'); | |
| btnPo.classList.add('language-inactive'); | |
| // Show Spanish content, hide others | |
| document.querySelectorAll('.spanish-content').forEach(el => { | |
| el.style.display = 'block'; | |
| }); | |
| document.querySelectorAll('.english-content').forEach(el => { | |
| el.style.display = 'none'; | |
| }); | |
| document.querySelectorAll('.portuguese-content').forEach(el => { | |
| el.style.display = 'none'; | |
| }); | |
| }); | |
| btnEn.addEventListener('click', function() { | |
| // Switch to English | |
| this.classList.remove('language-inactive'); | |
| this.classList.add('language-active'); | |
| btnEs.classList.remove('language-active'); | |
| btnEs.classList.add('language-inactive'); | |
| btnPo.classList.remove('language-active'); | |
| btnPo.classList.add('language-inactive'); | |
| // Show English content, hide others | |
| document.querySelectorAll('.english-content').forEach(el => { | |
| el.style.display = 'block'; | |
| }); | |
| document.querySelectorAll('.spanish-content').forEach(el => { | |
| el.style.display = 'none'; | |
| }); | |
| document.querySelectorAll('.portuguese-content').forEach(el => { | |
| el.style.display = 'none'; | |
| }); | |
| }); | |
| btnPo.addEventListener('click', function() { | |
| // Switch to Portuguese | |
| this.classList.remove('language-inactive'); | |
| this.classList.add('language-active'); | |
| btnEs.classList.remove('language-active'); | |
| btnEs.classList.add('language-inactive'); | |
| btnEn.classList.remove('language-active'); | |
| btnEn.classList.add('language-inactive'); | |
| // Show Portuguese content, hide others | |
| document.querySelectorAll('.portuguese-content').forEach(el => { | |
| el.style.display = 'block'; | |
| }); | |
| document.querySelectorAll('.spanish-content').forEach(el => { | |
| el.style.display = 'none'; | |
| }); | |
| document.querySelectorAll('.english-content').forEach(el => { | |
| el.style.display = 'none'; | |
| }); | |
| }); | |
| } | |
| // Client modal functionality | |
| const clientButtons = document.querySelectorAll('.client-btn'); | |
| const clientModal = document.getElementById('client-modal'); | |
| const modalTitle = document.getElementById('modal-client-title'); | |
| const modalText = document.getElementById('modal-client-text'); | |
| const modalLink = document.getElementById('modal-client-link'); | |
| const modalCloseBtn = document.getElementById('modal-close-btn'); | |
| clientButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const clientId = this.getAttribute('data-client'); | |
| // Determine current language | |
| let currentLang = 'es'; | |
| if (document.querySelector('.english-content').style.display === 'block') { | |
| currentLang = 'en'; | |
| } else if (document.querySelector('.portuguese-content').style.display === 'block') { | |
| currentLang = 'po'; | |
| } | |
| // Get client data for current language | |
| const client = clientData[clientId][currentLang]; | |
| // Populate modal | |
| modalTitle.textContent = client.title; | |
| modalText.textContent = client.text; | |
| modalLink.href = client.link; | |
| modalLink.textContent = client.linkText; | |
| // Show modal | |
| clientModal.classList.add('active'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| // Close modal | |
| modalCloseBtn.addEventListener('click', function() { | |
| clientModal.classList.remove('active'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Close modal when clicking outside | |
| clientModal.addEventListener('click', function(e) { | |
| if (e.target === clientModal) { | |
| clientModal.classList.remove('active'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| // Activate initial content animation | |
| setTimeout(() => { | |
| document.querySelector('.content-container').classList.add('active'); | |
| }, 100); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sebauyanet/mi-nueva-p-gina-personal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sebauyanet/me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |