Merge pull request #46 from jjpaulo2/main

Feature - Voluntários do evento + correção do modal de local do evento

assets/css/custom.css

@@ -339,4 +339,18 @@ figcaption {
     object-fit: cover;
     height: 100px;
     width: 100px;
+}
+
+.voluntario-item {
+    width: 100%;
+    max-width: 450px;
+    text-align: center;
+    padding: 30px !important;
+    margin: none;
+}
+
+.voluntario-foto {
+    width: 150px !important;
+    height: 150px !important;
+    object-fit: cover;
 }

assets/js/volunteers.js

@@ -0,0 +1,45 @@
+const VOLUNTEERS_FILE = 'volunteers.json';
+const VOLUNTEERS_DIV_ID = 'voluntarios-grid';
+
+async function getVolunteers() {
+    const data = await fetch(VOLUNTEERS_FILE);
+    const json_data = await data.json();
+    return json_data.sort(() => Math.random() - 0.5);
+}
+
+function getSocialButton(name, link) {
+    return `<a href="${link}" class="uk-margin-remove-vertical uk-margin-small-left" uk-icon="icon: ${name}; ratio: 1.3" target="_blank"></a>`
+}
+
+function getVolunteerSocialButtons(obj) {
+    let socials = [];
+    for (let network in obj.social) {
+        socials.push(getSocialButton(network, obj.social[network]));
+    }
+    return socials.join('');
+}
+
+function getVolunteerCard(obj) {
+    return `
+        <div class="voluntario-item">
+            <img src="${obj.foto}" class="uk-border-circle voluntario-foto">
+            <h3>${obj.nome}</h3>
+            <div>${getVolunteerSocialButtons(obj)}</div>
+            <p>${obj.bio}</p>
+        </div>
+    `;
+}
+
+function renderVolunteerCard(element, obj) {
+    element.innerHTML += getVolunteerCard(obj);
+}
+
+
+document.addEventListener("readystatechange", async () => {
+    if (document.readyState === "complete") {
+        let volunteers_div = document.getElementById(VOLUNTEERS_DIV_ID);
+        for (let volunteer of await getVolunteers()) {
+            renderVolunteerCard(volunteers_div, volunteer);
+        }
+    }
+});

index.html

@@ -31,17 +31,20 @@
     <script src="assets/js/uikit-icons.min.js"></script>
 
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-2MBT06C1Q2"></script>
-    <!-- <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-2MBT06C1Q2');
-    </script> -->
+    <script src="assets/js/volunteers.js"></script>
     <script>
         document.addEventListener("readystatechange", () => {
-            const modal = document.getElementById("modal-group-1");
-            UIkit.modal(modal).show();
-        })
+            if (document.readyState === "complete") {
+
+                const modal = document.getElementById("modal-group-1");
+                const modal_exibido = localStorage.getItem("modal-exibido");
+
+                if (!modal_exibido) {
+                    UIkit.modal(modal).show();
+                    localStorage.setItem("modal-exibido", true);
+                }
+            }
+        });
     </script>
 </head>
 
@@ -51,6 +54,7 @@
             <ul class="uk-navbar-nav uk-visible@s">
                 <li><a class="uk-navbar-item" href="/">Inicio</a></li>
                 <li><a class="uk-navbar-item" href="#sobre">Sobre</a></li>
+                <li><a class="uk-navbar-item" href="#voluntarios">Voluntários</a></li>
                 <li><a class="uk-navbar-item" href="#local">Local</a></li>
                 <!-- <li><a class="uk-navbar-item" href="#patrocinio">Patrocínio</a></li> -->
                 <li><a class="uk-navbar-item" href="#patrocinadoras">Patrocinadoras</a></li>
@@ -131,6 +135,19 @@ <h1>SOBRE O EVENTO</h1>
         </div>
     </div>
 
+    <div class="scroll-smooth uk-margin-large-top" id="voluntarios">
+
+        <div>
+            <h2 class="uk-text-center">VOLUNTÁRIOS</h3>
+        </div>
+
+        <div class="uk-margin-auto uk-flex-center" id="voluntarios-grid" uk-grid>
+        </div>
+
+        <img src="assets/images/DIV-COBRAS-PYTHON-NORDESTE-2024.svg" class="hr uk-margin uk-container" />
+
+    </div>
+
     <div class="scroll-smooth uk-margin-bottom" id="patrocinadoras">
         <div>
             <h2 class="uk-text-center">CONFIRA AS NOSSAS PATROCINADORAS!</h3>

volunteers.json

@@ -0,0 +1,91 @@
+[
+    {
+        "nome": "\u00cdtalo Epif\u00e2nio",
+        "bio": "Programador e divagador profissional. Cientista da computa\u00e7\u00e3o pela UFRN. Machine Learning Engineer na Shape Digital. Entusiasta de comunidades de tecnologia, veganismo e de basquete.",
+        "social": {
+            "instagram": "https://instagram.com/itepifanio",
+            "github": "https://github.com/itepifanio"
+        },
+        "foto": "assets/images/voluntarios/Ítalo Epifânio.jpg"
+    },
+    {
+        "nome": "Elayni Franco ",
+        "bio": "PyLady, membro PUG-PB, e cientista de dados em hor\u00e1rio comercial.",
+        "social": {
+            "instagram": "https://instagram.com/francoelayni",
+            "linkedin": "https://linkedin.com.br/elaynifranco"
+        },
+        "foto": "assets/images/voluntarios/Elayni Franco.jpg"
+    },
+    {
+        "nome": "Allythy",
+        "bio": "Desenvolvedor Web, organizo h\u00e1 6 anos eventos de tecnologia, como Python Nordeste 2024, PHPeste 2022, FLISol, Debian Day e meetups do GruPy-RN. Essa jornada com eventos e Software Livre me levou a palestrar na DebConf, Python Brasil e Campus Party.",
+        "social": {
+            "linkedin": "https://linkedin.com/in/allythy"
+        },
+        "foto": "assets/images/voluntarios/Allythy.jpg"
+    },
+    {
+        "nome": "Matheus Eug\u00eanio de Moura",
+        "bio": "Sou bacharelando em Tecnologia da Informa\u00e7\u00e3o pela Universidade Federal do Rio Grande do Norte (UFRN) e tamb\u00e9m atuo como desenvolver front-end a mais de 2 anos. Minha primeira Python Nordeste foi em Aracaju, em 2022. Fiz parte da organiza\u00e7\u00e3o de alguns eventos de tecnologia locais, como o PotiDay JS, Python Day 2022 e Meetup, pelo Grupy-RN. Nas minhas horas vagas, gosto de ouvir musica e jogar videogame.",
+        "social": {
+            "instagram": "https://instagram.com/mouramths",
+            "linkedin": "https://www.linkedin.com/in/matheus-moura-1921771b9/",
+            "github": "https://github.com/matheusmouraa"
+        },
+        "foto": "assets/images/voluntarios/Matheus Moura.jpeg"
+    },
+    {
+        "nome": "Higor Monteiro",
+        "bio": "Soft engeniee que programa pra pagar seus boletos e tem como hob atividades bra\u00e7ais\u2692\ufe0f\ud83e\ude9c\ud83d\udc68\ud83c\udffe\u200d\ud83c\udfed",
+        "social": {},
+        "foto": "assets/images/voluntarios/Higor Monteiro.jpg"
+    },
+    {
+        "nome": "Davi Carvalho",
+        "bio": "Davi \u00e9 estudante de Tecnologia da Informa\u00e7\u00e3o na UFRN e possui forma\u00e7\u00e3o de t\u00e9cnico em inform\u00e1tica pelo IFRN. Seu primeiro contato com programa\u00e7\u00e3o foi em 2011, com a linguagem Superlogo. Participou do projeto Ted Sa\u00fade, um assistente virtual para promo\u00e7\u00e3o da sa\u00fade, de 2014 a 2016. Entre 2017 e 2019. Atualmente, \u00e9 desenvolvedor FullStack em uma empresa de contabilidade digital.",
+        "social": {
+            "linkedin": "https://www.linkedin.com/in/davicfg"
+        },
+        "foto": "assets/images/voluntarios/Davi Carvalho.jpg"
+    },
+    {
+        "nome": "\u00c1lvaro Ferreira Pires de Paiva",
+        "bio": "SiteOps Engineer na TripAdvisor e contribuidor open-source nas horas vagas.",
+        "social": {
+            "github": "https://github.com/alvarofpp"
+        },
+        "foto": "assets/images/voluntarios/Álvaro Ferreira Pires de Paiva.jpg"
+    },
+    {
+        "nome": "Emilly Horta",
+        "bio": "Bacharel em Sistemas de Informa\u00e7\u00e3o, Desenvolvedora Front-end, Organiza a pyladies Parna\u00edba e \u00e9 m\u00e3e de pet :) ",
+        "social": {
+            "instagram": "https://instagram.com/euemillyhortadeva",
+            "github": "https://github.com/Emilly-horta"
+        },
+        "foto": "assets/images/voluntarios/Emilly Horta.jpg"
+    },
+    {
+        "nome": "Patr\u00edcia Silva",
+        "bio": "Bacharela em Ci\u00eancia da Computa\u00e7\u00e3o, tecnologa em Marketing, Mediadora de Conflitos, Educadora Social. Entusiasta por tecnoligia e educa\u00e7\u00e3o. Amante de um bom caf\u00e9 e excelente papo.",
+        "social": {},
+        "foto": "assets/images/voluntarios/Patrícia Silva.jpeg"
+    },
+    {
+        "nome": "D\u00e9bora Azevedo",
+        "bio": "Cofundadora PyLadies Brasil e ex membra do board of directors da PSF.",
+        "social": {},
+        "foto": "assets/images/voluntarios/Débora Azevedo.jpg"
+    },
+    {
+        "nome": "João Paulo Carvalho",
+        "bio": "Piauiense, pythonista e gamer. Co-organizador do GruPy Blumenau.",
+        "social": {
+            "github": "https://github.com/jjpaulo2",
+            "linkedin": "https://www.linkedin.com/in/jjpaulo2",
+            "instagram": "https://instagram.com/jjpaulo2"
+        },
+        "foto": "assets/images/voluntarios/João Paulo Carvalho.png"
+    }
+]