├── .all-contributorsrc ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug.md │ └── feature.md └── pull_request_template.md ├── .gitignore ├── .prettierignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── commitlint.config.js ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── package-lock.json ├── package.json ├── src ├── components │ ├── UI │ │ ├── button │ │ │ ├── button.js │ │ │ └── button.module.css │ │ ├── card │ │ │ ├── card.js │ │ │ └── card.module.css │ │ ├── carousel │ │ │ ├── carousel.css │ │ │ └── carousel.js │ │ └── personas │ │ │ ├── persona │ │ │ ├── persona.js │ │ │ └── persona.module.css │ │ │ ├── personas.js │ │ │ └── personas.module.css │ ├── author │ │ ├── author.js │ │ └── author.module.css │ ├── blog-section │ │ ├── blog-section.js │ │ └── blog-section.module.css │ ├── cities-section │ │ ├── cities-section.js │ │ └── cities-section.module.css │ ├── community-hero-section │ │ ├── card-section │ │ │ ├── card-section.css │ │ │ └── card-section.js │ │ ├── community-hero-section.css │ │ └── community-hero-section.js │ ├── community-section │ │ ├── community-description │ │ │ ├── community-description.css │ │ │ └── community-description.js │ │ ├── community-section.css │ │ ├── community-section.js │ │ └── photo-slider │ │ │ ├── photo-slider.css │ │ │ └── photo-slider.js │ ├── contributors │ │ ├── contributors.js │ │ └── contributors.module.css │ ├── events-section │ │ ├── Events.js │ │ └── events.module.css │ ├── footer │ │ ├── footer.js │ │ └── footer.module.css │ ├── header │ │ ├── Logo │ │ │ ├── logo.js │ │ │ └── logo.module.css │ │ ├── header.css │ │ └── header.js │ ├── hero-section │ │ ├── city-markers │ │ │ ├── city-markers.css │ │ │ └── city-markers.js │ │ ├── hero-section.css │ │ ├── hero-section.js │ │ └── social-networks │ │ │ ├── social-networks.css │ │ │ └── social-networks.js │ ├── layout │ │ ├── layout.js │ │ └── layout.module.css │ ├── maintainers │ │ ├── maintainers.js │ │ └── maintainers.module.css │ ├── personas-section │ │ ├── personas-section.js │ │ └── personas-section.module.css │ ├── seo.js │ ├── sponsors-section │ │ ├── sponsors-section.js │ │ └── sponsors-section.module.css │ └── subscribe │ │ ├── subscribe.css │ │ └── subscribe.js ├── constants │ ├── cities.js │ ├── eventos.js │ └── slider.js ├── css │ └── style.css ├── data │ ├── authors.json │ ├── contributors.json │ ├── maintainers.json │ └── sponsors.json ├── images │ ├── abduction-illustration.svg │ ├── background │ │ ├── grid.svg │ │ └── path.svg │ ├── cities │ │ ├── ambato.jpg │ │ ├── cuenca.jpg │ │ ├── guayaquil.jpg │ │ ├── latacunga.jpg │ │ ├── loja.jpg │ │ ├── quito.jpg │ │ └── riobamba.jpg │ ├── code-of-conduct.svg │ ├── dog-illustration.svg │ ├── events │ │ ├── event-1.jpg │ │ ├── event-2.jpg │ │ └── event-3.jpg │ ├── icons │ │ ├── chevron-left.svg │ │ ├── chevron-right.svg │ │ ├── email.svg │ │ ├── eventbrite.png │ │ ├── github-small.svg │ │ ├── github.svg │ │ ├── telegram.svg │ │ ├── twitter-small.svg │ │ ├── twitter.svg │ │ └── world.svg │ ├── javascriptecuador.png │ ├── js-ec-pattern.svg │ ├── logo-escudo-ec.svg │ ├── slider │ │ ├── 1era meetup cuenca.jpg │ │ └── segunda meetup.jpg │ └── widgets │ │ ├── brackets.svg │ │ ├── brackets2.svg │ │ ├── circle.svg │ │ ├── js-ecuador-map.svg │ │ ├── lines.svg │ │ ├── square.svg │ │ ├── times-purple.svg │ │ ├── times-yellow.svg │ │ └── triangle.svg ├── pages │ ├── 404.js │ ├── about.js │ ├── blog.js │ ├── blog │ │ └── gatsby-deploy.mdx │ ├── ciudades.js │ ├── code-of-conduct.js │ ├── comunidad.js │ ├── contact.js │ ├── cuentas.js │ ├── eventos.js │ ├── index.js │ └── sponsors.js └── templates │ ├── blog-entry.js │ └── blog-entry.module.css └── tailwind.config.js /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "web", 3 | "projectOwner": "javascriptecuador", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": true, 11 | "commitConvention": "none", 12 | "contributors": [ 13 | { 14 | "login": "rpalaciosg", 15 | "name": "Richard Palacios G", 16 | "avatar_url": "https://avatars0.githubusercontent.com/u/11642622?v=4", 17 | "profile": "https://richardpalaciosg.dev/", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "design" 22 | ] 23 | }, 24 | { 25 | "login": "edzzn", 26 | "name": "Edisson Reinozo", 27 | "avatar_url": "https://avatars3.githubusercontent.com/u/14936466?v=4", 28 | "profile": "http://edzzn.com/", 29 | "contributions": [ 30 | "code" 31 | ] 32 | }, 33 | { 34 | "login": "israteneda", 35 | "name": "Israel Teneda", 36 | "avatar_url": "https://avatars2.githubusercontent.com/u/20668624?v=4", 37 | "profile": "https://github.com/israteneda", 38 | "contributions": [ 39 | "code", 40 | "doc", 41 | "design" 42 | ] 43 | }, 44 | { 45 | "login": "jordanrjcode", 46 | "name": "Jordan Jaramillo", 47 | "avatar_url": "https://avatars2.githubusercontent.com/u/62086742?v=4", 48 | "profile": "https://github.com/jordanrjcode", 49 | "contributions": [ 50 | "doc" 51 | ] 52 | }, 53 | { 54 | "login": "EduardoAyora", 55 | "name": "Eduardo Ayora Ochoa", 56 | "avatar_url": "https://avatars1.githubusercontent.com/u/49033198?v=4", 57 | "profile": "https://github.com/EduardoAyora", 58 | "contributions": [ 59 | "code" 60 | ] 61 | }, 62 | { 63 | "login": "cesardlinx", 64 | "name": "David Padilla", 65 | "avatar_url": "https://avatars3.githubusercontent.com/u/25573926?v=4", 66 | "profile": "https://www.davidpadilla.dev/", 67 | "contributions": [ 68 | "code", 69 | "doc", 70 | "ideas" 71 | ] 72 | }, 73 | { 74 | "login": "FreddieAbad", 75 | "name": "Freddy Abad", 76 | "avatar_url": "https://avatars0.githubusercontent.com/u/38579765?v=4", 77 | "profile": "https://github.com/FreddieAbad", 78 | "contributions": [ 79 | "design" 80 | ] 81 | }, 82 | { 83 | "login": "miguel-rios-r", 84 | "name": "Miguel Rios R", 85 | "avatar_url": "https://avatars3.githubusercontent.com/u/25510181?v=4", 86 | "profile": "https://miguelriosr.com/", 87 | "contributions": [ 88 | "doc" 89 | ] 90 | }, 91 | { 92 | "login": "skcode7", 93 | "name": "Carlos G. Encalada B.", 94 | "avatar_url": "https://avatars2.githubusercontent.com/u/55223838?v=4", 95 | "profile": "http://karlosencalada.dev", 96 | "contributions": [ 97 | "doc", 98 | "code" 99 | ] 100 | }, 101 | { 102 | "login": "albamaister", 103 | "name": "Bryan Alba", 104 | "avatar_url": "https://avatars0.githubusercontent.com/u/20263594?v=4", 105 | "profile": "https://github.com/albamaister", 106 | "contributions": [ 107 | "doc", 108 | "code" 109 | ] 110 | }, 111 | { 112 | "login": "Leninner", 113 | "name": "Lenin Mazabanda", 114 | "avatar_url": "https://avatars.githubusercontent.com/u/67031243?v=4", 115 | "profile": "https://www.linkedin.com/in/leninner/", 116 | "contributions": [ 117 | "code" 118 | ] 119 | }, 120 | { 121 | "login": "thegreatyamori", 122 | "name": "Jerson Morocho", 123 | "avatar_url": "https://avatars.githubusercontent.com/u/20387293?v=4", 124 | "profile": "https://jersonalexander.now.sh/", 125 | "contributions": [ 126 | "code", 127 | "design", 128 | "ideas", 129 | "maintenance" 130 | ] 131 | } 132 | ], 133 | "contributorsPerLine": 7, 134 | "skipCi": true 135 | } 136 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | // https://eslint.org/docs/user-guide/configuring#specifying-environments 3 | "env": { 4 | "browser": true, 5 | "node": true 6 | }, 7 | // https://github.com/babel/babel-eslint 8 | "parser": "babel-eslint", 9 | "rules": { 10 | // https://eslint.org/docs/2.0.0/rules/strict 11 | "strict": 0 12 | }, 13 | "settings": { 14 | "react": { 15 | "version": "detect" 16 | } 17 | } 18 | // }, 19 | // "extends": [ 20 | // // https://eslint.org/docs/rules/ 21 | // "eslint:recommended", 22 | // // https://github.com/yannickcr/eslint-plugin-react#recommended 23 | // "plugin:react/recommended", 24 | // // https://github.com/benmosher/eslint-plugin-import 25 | // "plugin:import/recommended" 26 | // ] 27 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Notificar Bug/Error 3 | about: Templete para reportar errores y que nos ayudará a mejorar 4 | title: "[BUG]" 5 | labels: bug, documentation 6 | assignees: "" 7 | --- 8 | 9 | **Describe el bug/error** 10 | Una descripción clara y concisa de lo que trata el bug/error. 11 | 12 | **Para reproducirlo** 13 | Pasos para reproducir el comportamiento: 14 | 15 | 1. Ir a '...' 16 | 2. Click en '....' 17 | 3. Scroll down a '....' 18 | 4. Ver el error 19 | 20 | **Comportamiento esperado** 21 | Una descripción clara y concisa de lo que se espera que ocurra. 22 | 23 | **Capturas de Pantalla** 24 | Si aplica, agregar capturas de pantalla que ayuden a explicar el problema. 25 | 26 | **Desktop (por favor completa la siguiente información):** 27 | 28 | - OS: [ejem. iOS] 29 | - Navegador [ejem. chrome, safari] 30 | - Versión [ejem. 22] 31 | 32 | **Smartphone (por favor completa la siguiente información):** 33 | 34 | - Dispositivo: [ejem. iPhone6] 35 | - OS: [ejem. iOS8.1] 36 | - Navegador [ejem. safari] 37 | - Versión [ejem. 22] 38 | 39 | **Información adicional** 40 | Agrega cualquier información adicional sobre el problema. 41 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Solicitar Feature 3 | about: Templete para solicitar mejoras o nuevas funcionalidades en el sitio 4 | title: "[NUEVO]" 5 | labels: feature, enhancement 6 | assignees: "" 7 | --- 8 | 9 | **Tarea a realizar** 10 | Descripción de la mejora o funcionalidad solicitada 11 | 12 | **¿Por qué se realizará?** 13 | Razón o motivación para solicitar la mejora 14 | 15 | **Recomendaciones** 16 | Cualquier sugerencia o comentario que facilite el desarrollo. 17 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | **Descripción del cambio**: 2 | 3 | 4 | 5 | **Razón del cambio**: 6 | 7 | 8 | 9 | **Captura**: 10 | 11 | 12 | 13 | **Otros cambios**: 14 | 15 | 16 | 17 | **Link al origen de este PR**: 18 | 19 | 20 | 21 | Closes # 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Based on gatsby-starter-default's .gitignore 2 | # https://github.com/gatsbyjs/gatsby-starter-default/blob/master/.gitignore 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (http://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Typescript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # dotenv environment variable files 58 | .env* 59 | 60 | # gatsby files 61 | .cache/ 62 | public 63 | 64 | # Mac files 65 | .DS_Store 66 | 67 | # Yarn 68 | yarn-error.log 69 | .pnp/ 70 | .pnp.js 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # VSCode 76 | .vscode/ -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Tabla de contenido 2 | 3 | ## [1. ¿Cómo contribuir?](#¿Cómo-contribuir?) 4 | 5 | ## [2. Guías para colaborar](#Guías-para-colaborar) 6 | 7 | - [Trabajar en un Issue](#Trabajar-en-un-Issue) 8 | - [Ramas](#Ramas) 9 | - [Workflow](#Workflow) 10 | - [GitHub](#globe_with_meridians-github) 11 | - [Pre-requisitos](#page_facing_up-Pre-requisitos) 12 | - [Configuración local](#construction_worker-Configuración-local) 13 | - [Levantar ambiente de desarrollo](#hammer-Levantar-ambiente-de-desarrollo) 14 | - [Enviar cambios (commits)](#arrow_up-enviar-cambios-commits) 15 | - [Pull Request](#rocket-Pull-Request) 16 | - [Segundo Pull Request](#muscle-Segundo-Pull-Request) 17 | - [Guía Conventional Commits](#Guía-Conventional-Commits) 18 | - [Explicación de los campos ](#Explicación-de-los-campos) 19 | 20 | # ¿Cómo contribuir? 21 | 22 | Hola👋 a todos. 23 | Las contribuciones a este repositorio son bienvenidas. Si deseas mejorar esta hoja de referencia o traducirla a otros idiomas, ¡considera abrir un nuevo [issue][1]! y lo trataremos juntos. 24 | 25 | Si quieres contribuir debes leer y aceptar nuestro [Código de Conducta][2] 26 | 27 | # Guías para colaborar 28 | 29 | A continuación se detallan los pasos a seguir para configurar el repositorio y levantar el ambiente de desarrollo. 30 | 31 | ## Trabajar en un Issue 32 | 33 | > IMPORTANTE: antes de trabajar en un PR, elija un [issue][4] y discuta los cambios previstos con los mantenedores. Pueden proporcionar información invaluable y orientarlo en la dirección correcta para aprovechar al máximo su contribución. 34 | 35 | ## Ramas 36 | 37 | `master` es la rama principal sobre la que nos desarrollamos y usaremos para desplegar el sitio. Todas las ramas de `issues` deben estar ramificadas directamente desde la rama `master` es importante [crear una nueva rama](#configuración-local) sobre la que se trabajara antes de empezar a realizar cualquier cambio. 38 | 39 | ## Workflow 40 | 41 | ### :globe_with_meridians: GitHub 42 | 43 | - Si te gusta la comunidad antes nos regalas una ⭐ al repositorio, te lo agradecemos. 44 | - Accede al repositorio del proyecto **[web][12]** y realiza un [fork][3] 45 | > Un Fork es hacer una copia del repositorio y a partir de esta copia hacer cambios. El Fork esta en la parte superior derecha de la pagina. 46 | - Copiar la URL del repositorio copiado (**forked**) 47 | - Elegir un [issue][4] en el cual trabajar. Si nadie esta trabajando en el, comenta que tomas el issue para que te sea asignado. 48 | 49 | ### :page_facing_up: Pre-requisitos 50 | 51 | - Instalar [Node.js][5] 52 | - Un editor de código [VS Code][6], [Vim][7], [Atom][8] 53 | 54 | ### :construction_worker: Configuración local 55 | 56 | - Abrir una terminal, navegar al directorio en el que se creará el proyecto y clonar el repositorio fork. 57 | ` git clone https://github.com/[usuario-github]/web.git ` 58 | > Para igualar los cambios del repositorio original [Ver aquí](###-:muscle:-Segundo-Pull-Request) 59 | - Crea una nueva rama cuyo nombre describa el issue en el que se va a trabajar, por ejemplo `arregla-issue-1`. 60 | ``` 61 | git checkout -b tarea-issue-1 62 | ``` 63 | 64 | #### :hammer: Levantar ambiente de desarrollo 65 | 66 | - Instalar [**GatsbyJS**][9] 67 | ``` 68 | npm install -g gatsby-cli 69 | ``` 70 | - Instalar dependencias 71 | 72 | ``` 73 | npm install 74 | ``` 75 | 76 | - Ejecutar el proyecto de forma local 77 | ``` 78 | gatsby develop 79 | ``` 80 | - Hacer los cambios necesarios. Se puede visualizarlos con `status` 81 | ``` 82 | git status 83 | ``` 84 | 85 | ### :arrow_up: Enviar cambios (commits) 86 | 87 | Para este proyecto usaremos [Commit Lint][10] que usa [Conventional Commits][11], esto nos proporcionará un estándar al momento de escribir un commit e identificar el propósito del mismo. 88 | 89 | - Realizar un commit usando las siguientes líneas 90 | 91 | ``` 92 | git add archivos-creados-o-editados 93 | git commit -m "docs(README): Agregada sección de colaboradores" 94 | ``` 95 | 96 | > Al final del documento se encuentra una guía detallada de **Conventional Commits** 97 | 98 | - Una vez hecho el commit, subir la rama (branch) creada al fork. 99 | ``` 100 | git push -u origin tarea-issue-1 101 | ``` 102 | 103 | ### :rocket: Pull Request 104 | 105 | - Dirigirse al repositorio principal en [GitHub][12] 106 | - Se presenta un mensaje sugiriendo crear un [`pull request`][13]. 107 | - Verificar que la rama base a la izquierda sea `master o main` y la rama a comparar a la derecha sea la creada (`tarea-issue-1` en este ejemplo). 108 | - Reemplazar el texto del template indicando los cambios realizados y el `issue` que resuelve, en este caso de ejemplo `close #1`. 109 | 110 | ### :muscle: Segundo Pull Request 111 | 112 | > NOTA: Asegúrate de repetir este proceso antes de tomar una nuevo issue. 113 | 114 | - Antes de tomar un nuevo issue o hacer un Pull Request debe seguir estos pasos para igualar tu Fork con los ultimos cambios del repositorio. 115 | 116 | - Debes cambiarte a la rama master 117 | 118 | ``` 119 | git checkout master 120 | ``` 121 | 122 | - Para comprobar que estas en la rama master ejecutar 123 | 124 | ``` 125 | git branch 126 | ``` 127 | 128 | > Asegurarse de no tener cambios pendientes, esto lo puedes ver haciendo `git status`, en caso de tenerlos hacer commit de los cambios [Guia commit](<###-:arrow_up:-Enviar-cambios-(commits)>) 129 | 130 | - Debemos conectar el repositorio local con el repositorio remoto principal 131 | 132 | ``` 133 | git remote add upstream https://github.com/javascriptecuador/web.git 134 | ``` 135 | 136 | - Para comprobar que se conectó al repositorio principal 137 | 138 | ``` 139 | git remote -v 140 | ``` 141 | 142 | - Traemos los ultimos cambios remotos a nuetro repositorio local 143 | 144 | ``` 145 | git pull upstream master 146 | ``` 147 | 148 | - Subir los cambios al Fork 149 | 150 | ``` 151 | git push origin master 152 | ``` 153 | 154 | > Recuerda cambiarte a la rama issue que creaste 155 | 156 | ``` 157 | git checkout nombre-branch 158 | ``` 159 | 160 | - Ahora puedes seguir los pasos para [enviar tus cambios](<###-:arrow_up:-Enviar-cambios-(commits)>) 161 | 162 | --- 163 | 164 | ## Guía Conventional Commits 165 | 166 | A continuación tenemos una estructura completa de un **Conventional Commit**: 167 | 168 | ``` 169 | [tipo]([ámbito opcional]): [descripción] 170 | 171 | [cuerpo opcional] 172 | 173 | [nota de pie opcional] 174 | ``` 175 | 176 | Aquí tenemos una estructura con solo los campos obligatorios: 177 | 178 | ``` 179 | [tipo]: [descripción] 180 | ``` 181 | 182 | Ejemplos: 183 | 184 | ``` 185 | feat(home): añadir pie alternativo al home 186 | 187 | Implementar una versión alternativa del pie de página 188 | Agregar iconos alternativos en la versión móvil del pie de página 189 | 190 | Soluciona la incidencia #3 191 | ``` 192 | 193 | ``` 194 | feat: cambiar títulos y estilos en la página de inicio 195 | ``` 196 | 197 | ### Explicación de los campos 198 | 199 | **Tipo (obligatorio)** 200 | Los principales tipos de commits son 201 | 202 | - **fix:** corrige un error 203 | - **feat** introduce nuevas funcionalidades 204 | - **docs** completa la documentación del proyecto 205 | 206 | Se permiten otros tipos de commit pero se recomienda los que usan **Angular Convention** 207 | 208 | **Ámbito (opcional)** 209 | Se puede agregar un ámbito al tipo de commit para proveer información contextual adicional. Es opcional y se escribe entre paréntesis. Ejemplo: 210 | 211 | ``` 212 | feat(parser): añadir capacidad de parsear arrays 213 | ``` 214 | 215 | **Descripción (obligatoria)** 216 | Es obligatoria una descripción corta de los cambios realizados en el código. 217 | 218 | **Cuerpo (opcional)** 219 | Puede agregarse después de la descripción, dando información adicional acerca de los cambios en el código. Debe iniciar con una línea en blanco después de la descripción. 220 | 221 | **Nota de pie (opcional)** 222 | Puede agregarse tras una línea en blanco después del cuerpo o después de la descripción en caso de que no haya un cuerpo. Debe contener referencias adicionales a los números de problemas registrados sobre el cambio del código (ejemplo corrige incidencia #154). 223 | 224 | [1]: https://github.com/javascriptecuador/web/issues/new "Nuevo issue" 225 | [2]: https://github.com/javascriptecuador/.github/blob/master/CODE_OF_CONDUCT.md "Código de Conducta JavaScript Ecuador" 226 | [3]: https://help.github.com/articles/fork-a-repo/ "Fork a repo" 227 | [4]: https://github.com/javascriptecuador/web/issues "Listado de issues" 228 | [5]: https://nodejs.org/en/ "Página oficial" 229 | [6]: https://code.visualstudio.com/ "Página oficial" 230 | [7]: https://www.vim.org/ "Página oficial" 231 | [8]: https://atom.io/ "Página oficial" 232 | [9]: https://www.gatsbyjs.com/tutorial/part-zero/ "Documentación oficial" 233 | [10]: https://commitlint.js.org/#/ "Página oficial" 234 | [11]: https://www.conventionalcommits.org/en/v1.0.0/ "Página oficial" 235 | [12]: https://github.com/javascriptecuador/web "Repositorio web - JavaScript Ecuador" 236 | [13]: https://help.github.com/articles/creating-a-pull-request/ "Creating a pull request" 237 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Taylor Bryant 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

JavaScript Ecuador

2 |
3 | 4 | [![Netlify Status](https://api.netlify.com/api/v1/badges/2490fe9d-899a-4fce-93ea-5ecbd7df5499/deploy-status)](https://app.netlify.com/sites/javascriptecuador/deploys) [![Technoly](https://img.shields.io/badge/Main%20Tech-Gatsby-blueviolet)](https://www.gatsbyjs.com/) [![Framework](https://img.shields.io/badge/Framework-React%20JS-blue)](https://es.reactjs.org/) [![Contribuiting](https://img.shields.io/badge/How%20to-Contribute-yellow)](https://github.com/javascriptecuador/web/blob/master/CONTRIBUTING.md) [![Prototype](https://img.shields.io/badge/Prototype-Figma-orange)](https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1) [![Telegram](https://img.shields.io/badge/Channel-Telegram-informational)](https://t.me/javascriptecuador) 5 | 6 |
7 | Bienvenido a la comunidad oficial de JavaScript en Ecuador, en donde podrás contribuir, aprender, enseñar y compartir con personas realmente apasionadas por JavaScript y las tecnologías a su alrededor. 8 | 9 | En JavaScript Ecuador creemos en que todos tenemos algo que aportar, por lo que abrimos espacios a todos quienes tengan ideas, iniciativas y/o quieran contribuir a los proyectos desarrollados y mantenidos por la comunidad. 10 | 11 | No importa el grado de experiencia que tengas o las tecnologías con las que trabajes. Pasa a saludar en el canal de la comunidad en [Telegram](https://t.me/javascriptecuador) estaremos encantados de que formes parte :smile:. 12 | 13 | ## ¿Cómo contribuir? 14 | 15 | Este es nuestro primer repositorio público al que puedes contribuir, conoce más sobre cómo hacerlo en nuestra **[GUÍA DE CONTRIBUCIÓN](https://github.com/javascriptecuador/web/blob/master/CONTRIBUTING.md)**. 16 | 17 | En este proyecto se construye el sitio web oficial de la comunidad, así como el blog en el que muy pronto también podrás hacer tus entradas y en el que informaremos de todo lo que esté pasando alrededor de JavaScript y la comuniad, como tutoriales, debates, etc. **[Puedes revisar el prototipo del sitio en Figma](https://www.figma.com/file/w2VP8mKwNivTOGqsdvGMVe/Prototipo-Web-Ecuador.js?node-id=0%3A1)** 18 | 19 | ## Tecnología 20 | 21 | El sitio esta desarrollado con el generador de sitios estáticos [Gatsby](https://www.gatsbyjs.com/) junto con [Tailwindcss](https://tailwindcss.com/), si has trabajado con React seguro se te hará muy similar hacerlo con este framework, o aqui lo puedes aprender. 22 | 23 | ## Contribuidores ✨ 24 | 25 | Este repositorio es posible gracias a estos excelentes desarrolladores ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |

Richard Palacios G
💻 📖 🎨
Edisson Reinozo
💻
Israel Teneda
💻 📖 🎨
Jordan Jaramillo
📖
Eduardo Ayora Ochoa
💻
David Padilla
💻 📖 🤔
Freddy Abad
🎨

Miguel Rios R
📖
Carlos G. Encalada B.
📖 💻
Bryan Alba
📖 💻
Lenin Mazabanda
💻
Jerson Morocho
💻 🎨 🤔 🚧
48 | 49 | 50 | 51 | 52 | 53 | 54 | Este proyecto sigue la espicificación [all-contributors](https://github.com/all-contributors/all-contributors). Contribuciones de cualquier tipo son bienvenidas! 55 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["@commitlint/config-conventional"], 3 | }; 4 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import "./src/css/style.css"; 2 | import "typeface-roboto"; 3 | import "typeface-open-sans"; 4 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | const resolveConfig = require("tailwindcss/resolveConfig"); 2 | const tailwindConfig = require("./tailwind.config.js"); 3 | 4 | const fullConfig = resolveConfig(tailwindConfig); 5 | 6 | module.exports = { 7 | siteMetadata: { 8 | title: `JavaScript Ecuador`, 9 | description: `Web de la Comunidad JavaScript Ecuador`, 10 | author: ``, 11 | generator: `Gatsby`, 12 | keywords: `gatsby, react, graphql, javascript, ecuador`, 13 | }, 14 | plugins: [ 15 | `gatsby-plugin-eslint`, 16 | `gatsby-plugin-react-helmet`, 17 | { 18 | resolve: `gatsby-plugin-manifest`, 19 | options: { 20 | name: `gatsby-starter-tailwind`, 21 | short_name: `starter`, 22 | start_url: `/`, 23 | background_color: fullConfig.theme.colors.white, 24 | theme_color: fullConfig.theme.colors.teal["400"], 25 | display: `minimal-ui`, 26 | icon: `src/images/javascriptecuador.png`, 27 | }, 28 | }, 29 | `gatsby-plugin-styled-components`, 30 | `gatsby-transformer-json`, 31 | { 32 | resolve: `gatsby-source-filesystem`, 33 | options: { 34 | name: `data`, 35 | path: `${__dirname}/src/data/`, 36 | }, 37 | }, 38 | { 39 | resolve: `gatsby-source-filesystem`, 40 | options: { 41 | name: `blog-entries`, 42 | path: `${__dirname}/src/pages/blog`, 43 | }, 44 | }, 45 | { 46 | resolve: `gatsby-plugin-mdx`, 47 | options: { 48 | extensions: [`.mdx`, `.md`], 49 | defaultLayouts: { 50 | default: require.resolve("./src/templates/blog-entry.js"), 51 | }, 52 | }, 53 | }, 54 | { 55 | resolve: `gatsby-plugin-postcss`, 56 | options: { 57 | postCssPlugins: [ 58 | require(`tailwindcss`)(tailwindConfig), 59 | require(`autoprefixer`), 60 | ...(process.env.NODE_ENV === `production` 61 | ? [require(`cssnano`)] 62 | : []), 63 | ], 64 | }, 65 | }, 66 | `gatsby-plugin-offline`, 67 | ], 68 | }; 69 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | exports.onCreateNode = ({ node }) => {}; 2 | 3 | exports.createSchemaCustomization = ({ actions }) => { 4 | const { createTypes } = actions; 5 | const typeDefs = ` 6 | type Mdx implements Node { 7 | frontmatter: Frontmatter 8 | } 9 | 10 | type Frontmatter { 11 | author: AuthorsJson @link(by: "github") 12 | } 13 | `; 14 | createTypes(typeDefs); 15 | }; 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-ecuador", 3 | "description": "Sitio de la comunidad Javascript Ecuador", 4 | "version": "1.0.0", 5 | "author": "Javascript Ecuador ", 6 | "dependencies": { 7 | "@mdx-js/mdx": "^1.6.18", 8 | "@mdx-js/react": "^1.6.18", 9 | "babel-plugin-styled-components": "^1.11.1", 10 | "babel-polyfill": "^6.26.0", 11 | "babel-preset-env": "^1.7.0", 12 | "babel-preset-gatsby": "^0.5.14", 13 | "gatsby": "^2.24.85", 14 | "gatsby-legacy-polyfills": "0.0.5", 15 | "gatsby-plugin-manifest": "2.4.31", 16 | "gatsby-plugin-mdx": "^1.2.42", 17 | "gatsby-plugin-offline": "3.2.27", 18 | "gatsby-plugin-postcss": "2.3.11", 19 | "gatsby-plugin-react-helmet": "3.3.11", 20 | "gatsby-plugin-sharp": "2.6.36", 21 | "gatsby-plugin-styled-components": "^3.3.14", 22 | "gatsby-source-filesystem": "^2.3.31", 23 | "gatsby-transformer-json": "^2.4.14", 24 | "prop-types": "15.7.2", 25 | "react": "16.13.1", 26 | "react-dom": "16.13.1", 27 | "react-helmet": "6.1.0", 28 | "react-slick": "^0.27.11", 29 | "styled-components": "^5.2.0", 30 | "typeface-open-sans": "^1.1.13", 31 | "typeface-roboto": "^1.1.13" 32 | }, 33 | "keywords": [ 34 | "ecuador", 35 | "gatsby", 36 | "javascript", 37 | "tailwind", 38 | "tailwindcss", 39 | "purgecss", 40 | "ecuador.js" 41 | ], 42 | "license": "MIT", 43 | "scripts": { 44 | "contributors": "all-contributors", 45 | "analyze:lint": "eslint --ext .jsx --ext .js .", 46 | "analyze:prettier": "prettier --list-different \"**/*.{css,js,jsx,json,md}\"", 47 | "analyze": "npm run analyze:lint && npm run analyze:prettier", 48 | "fix:lint": "eslint --ext .jsx --ext .js . --fix", 49 | "fix:prettier": "prettier --write \"**/*.{css,js,jsx,json,md}\"", 50 | "fix": "npm run fix:lint && npm run fix:prettier", 51 | "build": "gatsby build", 52 | "develop": "gatsby develop", 53 | "dev": "npm run develop", 54 | "start": "npm run develop", 55 | "serve": "gatsby serve", 56 | "clean": "gatsby clean", 57 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 58 | }, 59 | "devDependencies": { 60 | "@commitlint/cli": "^11.0.0", 61 | "@commitlint/config-conventional": "^11.0.0", 62 | "@tailwindcss/custom-forms": "0.2.1", 63 | "all-contributors-cli": "^6.19.0", 64 | "autoprefixer": "9.8.6", 65 | "babel-eslint": "10.1.0", 66 | "cssnano": "4.1.10", 67 | "eslint": "7.9.0", 68 | "eslint-loader": "4.0.2", 69 | "eslint-plugin-import": "^2.25.3", 70 | "eslint-plugin-react": "7.21.2", 71 | "gatsby-plugin-eslint": "2.0.8", 72 | "husky": "^4.3.0", 73 | "prettier": "2.1.2", 74 | "tailwindcss": "1.8.10" 75 | }, 76 | "repository": { 77 | "type": "git", 78 | "url": "https://github.com/javascriptecuador/web" 79 | }, 80 | "bugs": { 81 | "url": "https://github.com/javascriptecuador/web/issues" 82 | }, 83 | "husky": { 84 | "hooks": { 85 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/components/UI/button/button.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import styles from "./button.module.css"; 4 | 5 | const Button = ({ type, children }) => { 6 | let typeStyles = ""; 7 | if (type === "primary") { 8 | typeStyles = styles.buttonPrimary; 9 | } else if (type === "secondary") { 10 | typeStyles = styles.buttonSecondary; 11 | } else if (type === "tertiary") { 12 | typeStyles = styles.buttonTertiary; 13 | } 14 | 15 | return ( 16 | 17 | ); 18 | }; 19 | 20 | Button.propTypes = { 21 | type: PropTypes.oneOf(["primary", "secondary", "tertiary"]).isRequired, 22 | }; 23 | 24 | export default Button; 25 | -------------------------------------------------------------------------------- /src/components/UI/button/button.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles For the Button Component 3 | */ 4 | .button { 5 | display: inline-block; 6 | font-family: "Open Sans", sans-serif; 7 | font-weight: 700; 8 | text-align: center; 9 | border: 1px solid transparent; 10 | padding: 0.375rem 0.75rem; 11 | font-size: 12px; 12 | line-height: 1.5; 13 | border-radius: 5px; 14 | transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 15 | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 16 | } 17 | 18 | .button--primary { 19 | color: #737373; 20 | background-color: #f7e018; 21 | border-color: #f7e018; 22 | } 23 | 24 | .button--primary:hover { 25 | color: #f7e018; 26 | background-color: transparent; 27 | } 28 | 29 | .button--secondary { 30 | color: #f7e018; 31 | background-color: transparent; 32 | border-color: #f7e018; 33 | } 34 | 35 | .button--secondary:hover { 36 | color: #737373; 37 | background-color: #f7e018; 38 | border-color: #f7e018; 39 | } 40 | 41 | .button--tertiary { 42 | color: #fff; 43 | background-color: #27ae60; 44 | border-radius: 10px; 45 | } 46 | 47 | .button--tertiary:hover { 48 | background-color: #2dca6f; 49 | } 50 | -------------------------------------------------------------------------------- /src/components/UI/card/card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import styles from "./card.module.css"; 4 | import { Link } from "gatsby"; 5 | 6 | const Card = ({ 7 | imgURL, 8 | topic, 9 | dateTime, 10 | descriptionTitle, 11 | description, 12 | link, 13 | readMoreColor, 14 | topicFontSize, 15 | viewportHeight, 16 | textSpacing, 17 | lineHeight, 18 | }) => ( 19 |
20 |
21 |
25 | 26 |
27 |
28 |
29 |
37 | {topic} 38 |
39 |

40 | {dateTime} 41 |

42 |
46 |

47 | 48 | {descriptionTitle}: 49 | 50 | {description}{" "} 51 | 56 | Leer más 57 | 58 |

59 |
60 |
61 |
62 | ); 63 | 64 | Card.propTypes = { 65 | imgURL: PropTypes.string, 66 | topic: PropTypes.string, 67 | dateTime: PropTypes.string, 68 | descriptionTitle: PropTypes.string, 69 | description: PropTypes.string, 70 | link: PropTypes.string, 71 | readMoreColor: PropTypes.string, 72 | viewportHeight: PropTypes.string, 73 | textSpacing: PropTypes.string, 74 | lineHeight: PropTypes.string, 75 | }; 76 | 77 | Card.defaultProps = { 78 | date: null, 79 | descriptionTitle: "Descripción", 80 | readMoreColor: "#27ae60", 81 | topicFontSize: "2rem", 82 | viewportHeight: "136.13px", 83 | textSpacing: "0.5em", 84 | lineHeight: "auto", 85 | }; 86 | 87 | export default Card; 88 | -------------------------------------------------------------------------------- /src/components/UI/card/card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | min-width: 290px; 3 | max-width: 300px; 4 | height: 425px; 5 | border-radius: 10px; 6 | background: #e0e0e0; 7 | overflow: hidden; 8 | margin-right: 2em; 9 | user-select: none; 10 | } 11 | 12 | .card__header { 13 | width: 100%; 14 | padding: 24px 24px 15px; 15 | } 16 | 17 | .card__img--viewport { 18 | width: 100%; 19 | height: 136.13px; 20 | overflow: hidden; 21 | border-radius: 15px; 22 | } 23 | 24 | .card__img { 25 | width: 100%; 26 | display: block; 27 | } 28 | 29 | .card__body { 30 | padding: 0 24px 24px 24px; 31 | } 32 | 33 | .card__topic { 34 | font-weight: bold; 35 | font-family: "Roboto", sans-serif; 36 | } 37 | 38 | .card__date { 39 | color: #666363; 40 | font-weight: bold; 41 | } 42 | 43 | .card__description--title { 44 | margin-right: 0.5em; 45 | } 46 | 47 | .card__description { 48 | overflow: hidden; 49 | max-height: 140px; 50 | } 51 | 52 | .card__description--text { 53 | overflow: hidden; 54 | text-overflow: ellipsis; 55 | line-height: 1.1; 56 | font-family: "Roboto", sans-serif; 57 | } 58 | 59 | .card__readmore { 60 | margin-left: 0.3em; 61 | } 62 | 63 | .card__description--text a { 64 | font-weight: bold; 65 | } 66 | -------------------------------------------------------------------------------- /src/components/UI/carousel/carousel.css: -------------------------------------------------------------------------------- 1 | .carousel { 2 | width: 100%; 3 | overflow: hidden; 4 | position: relative; 5 | background: transparent; 6 | } 7 | 8 | .carousel button { 9 | position: absolute; 10 | height: 100%; 11 | text-align: center; 12 | padding: 0 2em; 13 | z-index: 10; 14 | } 15 | 16 | .carousel .left-arrow { 17 | top: 0; 18 | background-image: linear-gradient( 19 | to left, 20 | rgba(0, 0, 0, 0), 21 | rgba(0, 0, 0, 0.5) 22 | ); 23 | } 24 | 25 | .carousel .left-arrow:focus { 26 | outline: none; 27 | } 28 | 29 | .carousel .right-arrow { 30 | top: 0; 31 | right: 0; 32 | background-image: linear-gradient( 33 | to right, 34 | rgba(0, 0, 0, 0), 35 | rgba(0, 0, 0, 0.5) 36 | ); 37 | } 38 | 39 | .carousel .right-arrow:focus { 40 | outline: none; 41 | } 42 | 43 | .carousel-slide { 44 | width: 100%; 45 | display: flex; 46 | background: transparent; 47 | transition: all 0.3s ease-in-out; 48 | } 49 | -------------------------------------------------------------------------------- /src/components/UI/carousel/carousel.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect } from "react"; 2 | import "./carousel.css"; 3 | import leftArrow from "../../../images/icons/chevron-left.svg"; 4 | import rightArrow from "../../../images/icons/chevron-right.svg"; 5 | 6 | const Carousel = ({ children }) => { 7 | const [counter, setCounter] = useState(0); 8 | const [width, setwidth] = useState(0); 9 | const carouselRef = useRef(null); 10 | const cardWidth = 291; 11 | // Card width plus margin 12 | const cardWidthTotal = cardWidth + 32; 13 | 14 | /** 15 | * Methods to move the carousel 16 | */ 17 | const goToLeft = () => { 18 | setCounter((prevCount) => prevCount - 1); 19 | }; 20 | const goToRight = () => { 21 | setCounter((prevCount) => prevCount + 1); 22 | }; 23 | 24 | let offset = -counter * cardWidthTotal; 25 | let slideStyle = { transform: `translateX(${offset}px)` }; 26 | 27 | let leftButton = ( 28 | 31 | ); 32 | 33 | if (counter === 0) { 34 | leftButton = null; 35 | } 36 | 37 | let rightButton = ( 38 | 41 | ); 42 | 43 | useEffect(() => { 44 | setwidth(carouselRef.current.offsetWidth); 45 | window.addEventListener("resize", handleResize); 46 | return () => { 47 | window.removeEventListener("resize", handleResize); 48 | }; 49 | }, [carouselRef, width, cardWidth]); 50 | 51 | const handleResize = () => { 52 | setwidth(carouselRef.current.offsetWidth); 53 | }; 54 | 55 | const totalCards = children.length; 56 | const minCards = 57 | Math.floor(width / cardWidth) >= 1 ? Math.floor(width / cardWidth) : 1; 58 | const cardsShown = minCards + counter; 59 | 60 | // If all cards were shown, don't display next button 61 | if (cardsShown >= totalCards) { 62 | rightButton = null; 63 | } 64 | 65 | return ( 66 |
67 | {leftButton} 68 |
69 | {children} 70 |
71 | {rightButton} 72 |
73 | ); 74 | }; 75 | 76 | export default Carousel; 77 | -------------------------------------------------------------------------------- /src/components/UI/personas/persona/persona.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./persona.module.css"; 3 | import PropTypes from "prop-types"; 4 | import emailImg from "../../../../images/icons/email.svg"; 5 | import githubImg from "../../../../images/icons/github-small.svg"; 6 | import twitterImg from "../../../../images/icons/twitter-small.svg"; 7 | import websiteImg from "../../../../images/icons/world.svg"; 8 | 9 | const Persona = ({ 10 | photo, 11 | name, 12 | rol, 13 | description, 14 | github, 15 | website, 16 | email, 17 | twitter, 18 | }) => { 19 | let githubIcon = null; 20 | if (github) { 21 | githubIcon = ( 22 | 23 | 24 | 25 | ); 26 | } 27 | 28 | let websiteIcon = null; 29 | if (website) { 30 | websiteIcon = ( 31 | 32 | 33 | 34 | ); 35 | } 36 | 37 | let emailIcon = null; 38 | if (email) { 39 | emailIcon = ( 40 | 41 | 42 | 43 | ); 44 | } 45 | 46 | let twitterIcon = null; 47 | if (twitter) { 48 | twitterIcon = ( 49 | 50 | 51 | 52 | ); 53 | } 54 | 55 | return ( 56 |
57 |
58 |
59 | {name} 60 |
61 |
62 |

{name}

63 | {rol} 64 |

{description}

65 |
66 |
67 | {githubIcon} 68 | {websiteIcon} 69 | {emailIcon} 70 | {twitterIcon} 71 |
72 |
73 |
74 | ); 75 | }; 76 | 77 | Persona.propTypes = { 78 | photo: PropTypes.string.isRequired, 79 | name: PropTypes.string.isRequired, 80 | rol: PropTypes.string.isRequired, 81 | description: PropTypes.string.isRequired, 82 | // URL 83 | github: PropTypes.string, 84 | // URL 85 | website: PropTypes.string, 86 | // URL 87 | email: PropTypes.string, 88 | // URL 89 | twitter: PropTypes.string, 90 | }; 91 | 92 | export default Persona; 93 | -------------------------------------------------------------------------------- /src/components/UI/personas/persona/persona.module.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --scale-factor: 0.9; 3 | } 4 | 5 | .persona { 6 | position: relative; 7 | } 8 | 9 | .persona__photo { 10 | width: calc(170px * var(--scale-factor)); 11 | height: calc(170px * var(--scale-factor)); 12 | background-color: #333333; 13 | position: absolute; 14 | top: calc(-120px * var(--scale-factor)); 15 | left: calc(65px * var(--scale-factor)); 16 | border: 15px solid #333333; 17 | border-radius: 50%; 18 | overflow: hidden; 19 | } 20 | 21 | .persona__photo img { 22 | transition: transform 300ms ease-in-out; 23 | cursor: pointer; 24 | } 25 | 26 | .persona__photo img:hover { 27 | transform: scale(1.2); 28 | } 29 | 30 | .persona__photo img { 31 | width: 100%; 32 | display: block; 33 | } 34 | 35 | .persona__body { 36 | width: calc(300px * var(--scale-factor)); 37 | height: calc(210px * var(--scale-factor)); 38 | background: #e5e5e5; 39 | border-radius: 15px; 40 | position: relative; 41 | } 42 | 43 | .persona__text { 44 | width: 100%; 45 | height: 100%; 46 | padding: 2.8em 1em 2em; 47 | } 48 | 49 | .persona__name { 50 | font-family: "Roboto", sans-serif; 51 | font-weight: 700; 52 | font-size: calc(25px * var(--scale-factor)); 53 | text-align: center; 54 | white-space: nowrap; 55 | } 56 | 57 | .persona__rol { 58 | font-family: "Roboto", sans-serif; 59 | color: #656262; 60 | font-weight: 400; 61 | font-size: calc(16px * var(--scale-factor)); 62 | display: block; 63 | width: 100%; 64 | text-align: center; 65 | } 66 | 67 | .persona__description { 68 | font-family: "Roboto", sans-serif; 69 | font-weight: 400; 70 | font-size: calc(12px * var(--scale-factor)); 71 | line-height: calc(14px * var(--scale-factor)); 72 | text-align: justify; 73 | } 74 | 75 | .persona__footer { 76 | width: 180px; 77 | left: calc(50% - 90px); 78 | position: absolute; 79 | bottom: calc((-43px / 2) * var(--scale-factor)); 80 | display: flex; 81 | justify-content: space-around; 82 | } 83 | 84 | .persona__icon { 85 | width: calc(40px * var(--scale-factor)); 86 | display: block; 87 | transition: transform 30ms cubic-bezier(0.42, 0, 0.65, 2.07); 88 | } 89 | 90 | .persona__icon:hover { 91 | transform: translateY(-4px); 92 | } 93 | -------------------------------------------------------------------------------- /src/components/UI/personas/personas.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Persona from "./persona/persona"; 3 | import styles from "./personas.module.css"; 4 | import PropTypes from "prop-types"; 5 | 6 | const Personas = ({ listPersonas }) => { 7 | let personas = null; 8 | if (listPersonas && listPersonas.length > 0) { 9 | personas = listPersonas.map((person) => ( 10 | 21 | )); 22 | } 23 | return
{personas}
; 24 | }; 25 | 26 | Personas.prototype = { 27 | listPersonas: PropTypes.arrayOf(PropTypes.object).isRequired, 28 | }; 29 | 30 | export default Personas; 31 | -------------------------------------------------------------------------------- /src/components/UI/personas/personas.module.css: -------------------------------------------------------------------------------- 1 | .personas { 2 | box-sizing: border-box; 3 | padding: 9em 0 1em; 4 | /* CSS Grid */ 5 | display: grid; 6 | grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 7 | column-gap: 3rem; 8 | row-gap: 12em; 9 | justify-items: center; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/author/author.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./author.module.css"; 3 | import githubImg from "../../images/icons/github-small.svg"; 4 | import emailImg from "../../images/icons/email.svg"; 5 | import PropTypes from "prop-types"; 6 | 7 | const Author = ({ name, photo, date, github, email }) => { 8 | let githubIcon = null; 9 | if (github) { 10 | githubIcon = ( 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | let emailIcon = null; 18 | if (email) { 19 | emailIcon = ( 20 | 21 | 22 | 23 | ); 24 | } 25 | return ( 26 |
27 |
28 | {name} 29 |
30 |
31 |

{name}

32 |

{date}

33 |
34 | {githubIcon} 35 | {emailIcon} 36 |
37 |
38 |
39 | ); 40 | }; 41 | 42 | Author.propTypes = { 43 | name: PropTypes.string, 44 | photo: PropTypes.string, 45 | date: PropTypes.string, 46 | github: PropTypes.string, 47 | email: PropTypes.string, 48 | }; 49 | 50 | export default Author; 51 | -------------------------------------------------------------------------------- /src/components/author/author.module.css: -------------------------------------------------------------------------------- 1 | .author { 2 | display: flex; 3 | margin: 3em 0; 4 | } 5 | 6 | .author__image { 7 | width: 4.5em; 8 | height: 4.5em; 9 | border-radius: 50%; 10 | overflow: hidden; 11 | margin: 0 1em; 12 | } 13 | 14 | .author__image img { 15 | display: block; 16 | width: 100%; 17 | } 18 | 19 | .author__info { 20 | width: 50%; 21 | } 22 | 23 | .author__name { 24 | font-size: 1rem; 25 | font-weight: bold; 26 | } 27 | 28 | .author__date { 29 | font-size: 0.8rem; 30 | color: #737373; 31 | } 32 | 33 | .author__icon { 34 | width: 24px; 35 | height: 24px; 36 | display: inline-block; 37 | } 38 | 39 | .author__icon:first-child { 40 | margin-right: 5px; 41 | } 42 | -------------------------------------------------------------------------------- /src/components/blog-section/blog-section.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./blog-section.module.css"; 3 | 4 | const BlogSection = () =>
; 5 | 6 | export default BlogSection; 7 | -------------------------------------------------------------------------------- /src/components/blog-section/blog-section.module.css: -------------------------------------------------------------------------------- 1 | .blogSection { 2 | height: 923px; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/cities-section/cities-section.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "../UI/card/card"; 3 | import Carousel from "../UI/carousel/carousel"; 4 | import bracketsWidget from "../../images/widgets/brackets.svg"; 5 | import timesYellowWidget from "../../images/widgets/times-yellow.svg"; 6 | import timesPurpleWidget from "../../images/widgets/times-purple.svg"; 7 | import styles from "./cities-section.module.css"; 8 | import cities from "../../constants/cities"; 9 | 10 | const CitiesSection = () => { 11 | return ( 12 |
13 | 17 |

Ciudades

18 | 19 | {cities.map(({ imgURL, topic, description, link }) => ( 20 | 27 | ))} 28 | 29 | 33 | 37 |
38 | ); 39 | }; 40 | 41 | export default CitiesSection; 42 | -------------------------------------------------------------------------------- /src/components/cities-section/cities-section.module.css: -------------------------------------------------------------------------------- 1 | .cities { 2 | background: #fff; 3 | height: 840px; 4 | padding-top: 10em; 5 | position: relative; 6 | } 7 | 8 | .cities__title { 9 | margin-bottom: 1em; 10 | } 11 | 12 | /* Widgets */ 13 | 14 | .widget__bracket { 15 | bottom: 38.5em; 16 | right: 13em; 17 | } 18 | 19 | .widget__times--yellow { 20 | bottom: 25em; 21 | left: 22.4em; 22 | z-index: 0; 23 | } 24 | 25 | .widget__times--purple { 26 | bottom: 2em; 27 | right: 31em; 28 | } 29 | -------------------------------------------------------------------------------- /src/components/community-hero-section/card-section/card-section.css: -------------------------------------------------------------------------------- 1 | .card-section { 2 | width: 100%; 3 | height: 15vw; 4 | border-radius: 1vw; 5 | background: #ffffff; 6 | overflow: hidden; 7 | user-select: none; 8 | margin-top: 1vw; 9 | padding: 1.7vw 1.7vw 1.7vw 1.7vw; 10 | } 11 | 12 | .section-evento { 13 | float: left; 14 | width: 68%; 15 | height: 13vw; 16 | background: #ffffff; 17 | border-radius: 1vw; 18 | } 19 | 20 | .topic-description { 21 | font-weight: bold; 22 | margin-bottom: 0.5em; 23 | font-family: "Roboto", sans-serif; 24 | font-size: 1.5vw; 25 | } 26 | 27 | .description-section { 28 | overflow: hidden; 29 | height: 5.5vw; 30 | margin-top: 0.5em; 31 | margin-bottom: 0.5em; 32 | font-size: 1vw; 33 | text-align: justify; 34 | font-family: sans-serif; 35 | } 36 | 37 | .topic-example { 38 | font-weight: bold; 39 | margin-top: 0.5em; 40 | margin-left: 0.5em; 41 | font-family: "Roboto", sans-serif; 42 | font-size: 1.5vw; 43 | } 44 | 45 | .description-example { 46 | overflow: hidden; 47 | height: 8vw; 48 | margin-top: 0.5em; 49 | margin-right: 0.5em; 50 | margin-left: 0.5em; 51 | margin-bottom: 0.5em; 52 | text-overflow: ellipsis; 53 | line-height: 1; 54 | font-family: sans-serif; 55 | font-size: 1vw; 56 | text-align: justify; 57 | } 58 | 59 | .section-example { 60 | float: right; 61 | width: 30%; 62 | height: 12vw; 63 | background: #c0bfbf; 64 | border-radius: 1vw; 65 | } 66 | 67 | @media all and (max-width: 60em) { 68 | .card-section { 69 | height: 70vw; 70 | } 71 | .section-evento { 72 | height: 67vw; 73 | padding: 0.5vw 0.5vw 0.5vw 0.5vw; 74 | } 75 | .topic-description { 76 | font-size: 4.5vw; 77 | height: 7vw; 78 | margin-bottom: 0em; 79 | } 80 | .description-section { 81 | font-size: 3vw; 82 | height: 45vw; 83 | margin-top: 0em; 84 | } 85 | .section-example { 86 | height: 67vw; 87 | } 88 | .topic-example { 89 | font-size: 4vw; 90 | } 91 | .description-example { 92 | height: 55vw; 93 | font-size: 3vw; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/components/community-hero-section/card-section/card-section.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./card-section.css"; 3 | import Button from "../../UI/button/button"; 4 | import PropTypes from "prop-types"; 5 | 6 | const HeroSection = ({ title, description, txtButton, descriptionExample }) => { 7 | return ( 8 |
9 |
10 |
{title}
11 |
{description}
12 | 13 |
14 |
15 |
Ejemplo
16 |
{descriptionExample}
17 |
18 |
19 | ); 20 | }; 21 | 22 | HeroSection.propTypes = { 23 | title: PropTypes.string, 24 | description: PropTypes.string, 25 | txtButton: PropTypes.string, 26 | descriptionExample: PropTypes.string, 27 | }; 28 | 29 | export default HeroSection; 30 | -------------------------------------------------------------------------------- /src/components/community-hero-section/community-hero-section.css: -------------------------------------------------------------------------------- 1 | .community-hero-section { 2 | background-color: #f2f2f2; 3 | padding-top: 1.4vw; 4 | padding-bottom: 3vw; 5 | } 6 | 7 | .section__title { 8 | text-align: left; 9 | font-size: 3vw; 10 | font-weight: bold; 11 | font-family: "Roboto", sans-serif; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/community-hero-section/community-hero-section.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./community-hero-section.css"; 3 | import CardSection from "./card-section/card-section"; 4 | 5 | const communityHeroSection = () => { 6 | const cards = [ 7 | { 8 | title: "Organizar un Meetup", 9 | description: 10 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.", 11 | txtButton: "Llenar formulario para organizar un Meetup", 12 | descriptionExample: 13 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.", 14 | }, 15 | { 16 | title: "Impartir una charla", 17 | description: 18 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.", 19 | txtButton: "Llenar formulario para impartir charla", 20 | descriptionExample: 21 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.", 22 | }, 23 | { 24 | title: "Escribir / Traducir un Artículo", 25 | description: 26 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.", 27 | txtButton: "Llenar formulario para escribir un artículo", 28 | descriptionExample: 29 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.", 30 | }, 31 | ]; 32 | return ( 33 |
34 |
35 |

¿Cómo ayudar?

36 | {cards.map((card, idx) => ( 37 | 44 | ))} 45 |
46 |
47 | ); 48 | }; 49 | 50 | export default communityHeroSection; 51 | -------------------------------------------------------------------------------- /src/components/community-section/community-description/community-description.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles For the Community Description 3 | */ 4 | .community-description { 5 | font-weight: 300; 6 | font-size: 18px; 7 | line-height: 28px; 8 | font-feature-settings: "ss06" on, "ss07" on; 9 | color: #252525; 10 | font-family: "Roboto", sans-serif; 11 | } 12 | 13 | .community-description p { 14 | margin-bottom: 0.7em; 15 | } 16 | -------------------------------------------------------------------------------- /src/components/community-section/community-description/community-description.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./community-description.css"; 3 | 4 | const CommunityDescription = () => ( 5 |
6 |

7 | Somos una comunidad de interesados en la tecnología cuyo fin es el de 8 | fortalecer y articular el ecosistema tecnológico en nuestro país Ecuador. 9 |

10 |

11 | Constantemente organizamos meetups-talleres y conferencias relacionadas 12 | con JavaScript y el mundo del desarrollo de software. 13 |

14 |

15 | El contenido del grupo es propuesto por los miembros de la comunidad, si 16 | tienes alguna charla, conferencia o experiencia que quieras compartir 17 | puedes enviar tu propuesta aquí. 18 |

19 |
20 | ); 21 | 22 | export default CommunityDescription; 23 | -------------------------------------------------------------------------------- /src/components/community-section/community-section.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles For the Community Section 3 | */ 4 | .community-section { 5 | background-color: #f2f2f2; 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: space-between; 9 | height: auto; 10 | position: relative; 11 | } 12 | 13 | @media only screen and (min-width: 800px) { 14 | .community-section { 15 | flex-direction: row; 16 | height: 840px; 17 | } 18 | } 19 | 20 | .community-section .section-block { 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: center; 24 | } 25 | 26 | .section-block.slider { 27 | width: 100%; 28 | padding-right: 0; 29 | background-image: url("../../images/background/grid.svg"); 30 | background-repeat: no-repeat; 31 | background-position: 90% 40%; 32 | padding-top: 5em; 33 | padding-bottom: 0; 34 | } 35 | 36 | @media only screen and (min-width: 500px) { 37 | .section-block.slider { 38 | padding-bottom: 10em; 39 | padding-right: 0; 40 | } 41 | } 42 | 43 | @media only screen and (min-width: 800px) { 44 | .section-block.slider { 45 | width: 60%; 46 | padding-top: 0; 47 | padding-bottom: 0; 48 | padding-right: 10%; 49 | } 50 | } 51 | 52 | .section-block.info { 53 | width: 100%; 54 | } 55 | 56 | @media only screen and (min-width: 800px) { 57 | .section-block.info { 58 | width: 40%; 59 | } 60 | } 61 | 62 | .section-block .call-to-action { 63 | margin-top: 1em; 64 | display: flex; 65 | flex-direction: column; 66 | justify-content: space-between; 67 | } 68 | 69 | .call-to-action button { 70 | margin-bottom: 1em; 71 | } 72 | 73 | @media only screen and (min-width: 1256px) { 74 | .section-block .call-to-action { 75 | flex-direction: row; 76 | } 77 | 78 | .call-to-action button { 79 | margin-bottom: 0; 80 | } 81 | } 82 | 83 | .section-block .heading { 84 | font-weight: 700; 85 | background-color: rgba(247, 224, 24, 0.81); 86 | height: 51px; 87 | line-height: 51px; 88 | text-align: center; 89 | margin-bottom: 1em; 90 | } 91 | 92 | .section-block .headings { 93 | list-style-type: disc; 94 | } 95 | 96 | /* Headings */ 97 | .heading-item-title { 98 | font-size: 24px; 99 | margin-left: 1em; 100 | padding-right: 1em; 101 | font-family: "Roboto", sans-serif; 102 | list-style: none; 103 | } 104 | 105 | .heading-item-subtitle { 106 | font-size: 12px; 107 | padding-left: 2em; 108 | margin-left: 1.7em; 109 | list-style: none; 110 | } 111 | 112 | .heading.title { 113 | transform: rotate(3deg); 114 | font-size: 36px; 115 | } 116 | 117 | .heading.subtitle { 118 | transform: rotate(-3deg); 119 | font-size: 24px; 120 | } 121 | 122 | /* Widgets */ 123 | .widget { 124 | position: absolute; 125 | z-index: 500; 126 | display: none; 127 | } 128 | 129 | @media only screen and (min-width: 560px) { 130 | .widget { 131 | display: block; 132 | } 133 | } 134 | 135 | .widget.circle { 136 | top: -85px; 137 | right: 13%; 138 | } 139 | 140 | .widget.square { 141 | bottom: -7em; 142 | } 143 | -------------------------------------------------------------------------------- /src/components/community-section/community-section.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Button from "../UI/button/button"; 3 | import CommunityDescription from "./community-description/community-description"; 4 | import PhotoSlider from "./photo-slider/photo-slider"; 5 | import circleWidget from "../../images/widgets/circle.svg"; 6 | import squareWidget from "../../images/widgets/square.svg"; 7 | import photos from "../../constants/slider"; 8 | import "./community-section.css"; 9 | 10 | const CommunitySection = () => ( 11 |
12 |
13 | 14 |
15 |
16 |
    17 |
  • 18 |

    Comunidad

    19 |
    • 20 |
  • 21 |

    Javascript del Ecuador

    22 |
    • 23 |
24 | 25 |
26 | 27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 | ); 35 | 36 | export default CommunitySection; 37 | -------------------------------------------------------------------------------- /src/components/community-section/photo-slider/photo-slider.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles for the Photo Slider 3 | */ 4 | .photo-slider { 5 | width: 100%; 6 | max-width: 670px; 7 | height: 386px; 8 | box-sizing: border-box; 9 | border-radius: 20px; 10 | position: relative; 11 | } 12 | 13 | .photo-slider .slick-list { 14 | border-radius: 1em; 15 | } 16 | 17 | /* Slider Dots */ 18 | .slick-dots { 19 | display: flex !important; 20 | list-style: none; 21 | justify-content: flex-start; 22 | padding: 0; 23 | } 24 | 25 | .slick-dots li { 26 | border-radius: 10em; 27 | width: 11.36%; 28 | height: 15.65px; 29 | margin: 0 0.4em; 30 | } 31 | 32 | .slick-dots li.slick-active button { 33 | background: #27ae60; 34 | } 35 | 36 | .slick-dots li button:hover { 37 | cursor: pointer; 38 | } 39 | 40 | .slick-dots li:not(.slick-active) button:hover { 41 | background: #dadada; 42 | } 43 | 44 | .slick-dots li button { 45 | border: none; 46 | border-radius: 10em; 47 | background: #c4c4c4; 48 | width: 100%; 49 | height: 15.65px; 50 | } 51 | 52 | /* Slick Slider Styles*/ 53 | .slick-slider { 54 | position: relative; 55 | display: block; 56 | box-sizing: border-box; 57 | 58 | -webkit-user-select: none; 59 | -moz-user-select: none; 60 | -ms-user-select: none; 61 | user-select: none; 62 | 63 | -webkit-touch-callout: none; 64 | -khtml-user-select: none; 65 | -ms-touch-action: pan-y; 66 | touch-action: pan-y; 67 | 68 | -webkit-tap-highlight-color: transparent; 69 | } 70 | 71 | /* List of photos */ 72 | .slick-list { 73 | position: relative; 74 | 75 | display: block; 76 | overflow: hidden; 77 | 78 | margin: 0; 79 | padding: 0; 80 | } 81 | .slick-list:focus { 82 | outline: none; 83 | } 84 | .slick-list.dragging { 85 | cursor: pointer; 86 | cursor: hand; 87 | } 88 | 89 | .slick-slider .slick-track, 90 | .slick-slider .slick-list { 91 | transform: translate3d(0, 0, 0); 92 | } 93 | 94 | .slick-track { 95 | position: relative; 96 | top: 0; 97 | left: 0; 98 | 99 | display: block; 100 | margin-left: auto; 101 | margin-right: auto; 102 | } 103 | .slick-track:before, 104 | .slick-track:after { 105 | display: table; 106 | 107 | content: ""; 108 | } 109 | .slick-track:after { 110 | clear: both; 111 | } 112 | .slick-loading .slick-track { 113 | visibility: hidden; 114 | } 115 | 116 | .slick-slide { 117 | display: none; 118 | float: left; 119 | 120 | height: 100%; 121 | min-height: 1px; 122 | } 123 | [dir="rtl"] .slick-slide { 124 | float: right; 125 | } 126 | .slick-slide img { 127 | display: block; 128 | } 129 | .slick-slide.slick-loading img { 130 | display: none; 131 | } 132 | .slick-slide.dragging img { 133 | pointer-events: none; 134 | } 135 | .slick-initialized .slick-slide { 136 | display: block; 137 | } 138 | .slick-loading .slick-slide { 139 | visibility: hidden; 140 | } 141 | .slick-vertical .slick-slide { 142 | display: block; 143 | 144 | height: auto; 145 | 146 | border: 1px solid transparent; 147 | } 148 | .slick-arrow.slick-hidden { 149 | display: none; 150 | } 151 | -------------------------------------------------------------------------------- /src/components/community-section/photo-slider/photo-slider.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import Slider from "react-slick"; 4 | import "./photo-slider.css"; 5 | 6 | const PhotoSlider = ({ photos }) => { 7 | const settings = { 8 | dots: true, 9 | infinite: true, 10 | speed: 500, 11 | slidesToShow: 1, 12 | slidesToScroll: 1, 13 | arrows: false, 14 | autoplay: true, 15 | customPaging: () => , 16 | }; 17 | return ( 18 |
19 | 20 | {photos.map((photo, idx) => ( 21 | {photo.name} 22 | ))} 23 | 24 |
25 | ); 26 | }; 27 | 28 | PhotoSlider.propTypes = { 29 | photos: PropTypes.arrayOf( 30 | PropTypes.shape({ 31 | name: PropTypes.string, 32 | photoURL: PropTypes.string, 33 | }) 34 | ), 35 | }; 36 | 37 | export default PhotoSlider; 38 | -------------------------------------------------------------------------------- /src/components/contributors/contributors.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./contributors.module.css"; 3 | import PersonasSection from "../personas-section/personas-section"; 4 | import Button from "../UI/button/button"; 5 | import { useStaticQuery, graphql } from "gatsby"; 6 | 7 | const Contributors = () => { 8 | const data = useStaticQuery(graphql` 9 | query getContributors { 10 | allContributorsJson { 11 | edges { 12 | node { 13 | id 14 | photo 15 | name 16 | rol 17 | description 18 | email 19 | github 20 | twitter 21 | website 22 | } 23 | } 24 | } 25 | } 26 | `); 27 | const title = "Contribuidores"; 28 | const description = 29 | "Personas que han contribuido con su conocimiento en nuestra comunidad."; 30 | return ( 31 |
32 | 37 |
38 | 39 |
40 |
41 | ); 42 | }; 43 | 44 | export default Contributors; 45 | -------------------------------------------------------------------------------- /src/components/contributors/contributors.module.css: -------------------------------------------------------------------------------- 1 | .contributors { 2 | background-color: #f2f2f2; 3 | } 4 | 5 | .contributors__add { 6 | padding: 5em 5%; 7 | display: flex; 8 | justify-content: flex-end; 9 | font-size: 14px; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/events-section/Events.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./events.module.css"; 3 | import Carousel from "../UI/carousel/carousel"; 4 | import Card from "../UI/card/card"; 5 | import eventos from "../../constants/eventos"; 6 | import triangle from "../../images/widgets/triangle.svg"; 7 | import bracketsWidget from "../../images/widgets/brackets2.svg"; 8 | 9 | const Events = () => { 10 | return ( 11 |
12 |

Eventos

13 | 14 | {eventos.map( 15 | ({ id, imagen, titulo, fechaHora, disertantes, resumen, url }) => ( 16 | 30 | ) 31 | )} 32 | 33 | 37 | 41 |
42 | ); 43 | }; 44 | 45 | export default Events; 46 | -------------------------------------------------------------------------------- /src/components/events-section/events.module.css: -------------------------------------------------------------------------------- 1 | .events { 2 | background: #f2f2f2; 3 | height: 840px; 4 | padding-top: 10em; 5 | position: relative; 6 | } 7 | 8 | .events__title { 9 | margin-bottom: 1em; 10 | padding-right: 1em; 11 | text-align: right; 12 | font-size: 50px; 13 | font-weight: bold; 14 | font-family: "Roboto", sans-serif; 15 | } 16 | 17 | /* Widgets */ 18 | 19 | .events__triangle { 20 | top: 2em; 21 | left: 12em; 22 | display: none; 23 | } 24 | 25 | @media only screen and (min-width: 567px) { 26 | .events__triangle { 27 | display: block; 28 | } 29 | } 30 | 31 | .events__bracket { 32 | bottom: -0.6em; 33 | right: 15em; 34 | display: none; 35 | } 36 | 37 | @media only screen and (min-width: 567px) { 38 | .events__bracket { 39 | display: block; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/footer/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "gatsby"; 3 | import styles from "./footer.module.css"; 4 | import escudo from "../../images/logo-escudo-ec.svg"; 5 | //import SocialNetworks from './social-networks'; 6 | 7 | const Footer = () => ( 8 |
9 |
10 |
11 |

RECURSOS

12 |
    13 |
  • Acerca de
    • 14 | 15 |
  • Blog
    • {" "} 16 | 17 | 18 |
  • Cuentas
    • 19 | 20 |
21 |
22 |
23 |

AYUDA

24 |
    25 |
  • Organizar un Meetup
    • 26 |
  • Dar una Charla/Taller
    • 27 |
  • Publicar un Post
    • 28 |
  • Informar un problema
    • 29 | 30 |
  • Código de Conducta
    • 31 | 32 |
33 |
34 | 35 |
36 |

COMUNIDAD

37 |
    38 | 39 |
  • Eventos
    • 40 | 41 |
  • ¿Cómo ayudar?
    • 42 |
  • Quiero ser Patrocinador
    • 43 |
  • Registrar mi ciudad
    • 44 |
  • Descargo de responsabilidad
    • 45 |
46 |
47 | 48 |
49 |

Ecuador.js

50 | Escudo del Ecuador 51 | {/* */} 52 |
53 |
54 | 55 |

56 | ¿Encontraste un error?{" "} 57 | 58 | 62 | Repórtalo{" "} 63 | 64 | 65 |

66 | 67 |

2019 - 2021 Ecuador.js

68 |

All rights reserved

69 |
70 | ); 71 | 72 | export default Footer; 73 | -------------------------------------------------------------------------------- /src/components/footer/footer.module.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: #fef6dd; 3 | color: #000; 4 | background-image: url("../../images/widgets/lines.svg"); 5 | height: 500px; 6 | padding: 5em 10em 0 10em; 7 | position: relative; 8 | } 9 | 10 | .footer__title { 11 | font-size: 14px; 12 | padding-bottom: 2em; 13 | font-weight: 700; 14 | } 15 | 16 | .footer h1 { 17 | font-size: 64px; 18 | font-weight: 700; 19 | } 20 | 21 | .footer h2 { 22 | font-size: 25px; 23 | font-weight: 700; 24 | text-align: center; 25 | } 26 | 27 | .footer h3 { 28 | font-size: 18px; 29 | font-weight: 400; 30 | text-align: center; 31 | } 32 | 33 | .footer p { 34 | text-align: center; 35 | padding-bottom: 1em; 36 | } 37 | 38 | .footer span { 39 | text-decoration: underline; 40 | } 41 | 42 | .footer img { 43 | top: 9.5em; 44 | right: 6%; 45 | position: absolute; 46 | } 47 | 48 | .flex { 49 | display: flex; 50 | justify-content: space-between; 51 | padding-bottom: 5em; 52 | } 53 | 54 | .col { 55 | width: 25%; 56 | } 57 | 58 | .col li { 59 | font-size: 14px; 60 | line-height: 24px; 61 | } 62 | 63 | @media only screen and (max-width: 800px) { 64 | .footer { 65 | height: 550px; 66 | padding: 3em 10em 0 2em; 67 | } 68 | 69 | .footer h1 { 70 | font-size: 54px; 71 | padding-left: 2em; 72 | } 73 | 74 | .footer img { 75 | top: 7.5em; 76 | right: 4em; 77 | position: absolute; 78 | } 79 | 80 | .flex { 81 | padding-bottom: 3em; 82 | } 83 | 84 | .col { 85 | width: 50%; 86 | } 87 | } 88 | 89 | @media only screen and (max-width: 400px) { 90 | .footer { 91 | height: 810px; 92 | padding: 1em 0 0 2em; 93 | } 94 | 95 | .footer__title { 96 | font-size: 14px; 97 | padding-top: 2em; 98 | padding-bottom: 0.5em; 99 | font-weight: 700; 100 | } 101 | 102 | .footer h1 { 103 | font-size: 34px; 104 | padding-top: 1.5em; 105 | } 106 | 107 | .footer img { 108 | top: 36.5em; 109 | right: 16%; 110 | position: absolute; 111 | } 112 | 113 | .footer p { 114 | padding: 4.5em 0 1em 0; 115 | } 116 | 117 | .flex { 118 | display: inline; 119 | padding-bottom: 3em; 120 | } 121 | 122 | .col { 123 | width: 100%; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/components/header/Logo/logo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import escudo from "../../../images/logo-escudo-ec.svg"; 3 | import styles from "./logo.module.css"; 4 | 5 | const Logo = () => ( 6 |
7 |

8 | 9 | Logo de Javascript Ecuador 10 | 11 | Ecuador.js 12 |

13 |
14 | ); 15 | 16 | export default Logo; 17 | -------------------------------------------------------------------------------- /src/components/header/Logo/logo.module.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | height: 80px; 3 | margin: 0; 4 | padding: 0; 5 | flex-basis: 20%; 6 | background-size: 150em; 7 | } 8 | 9 | .logo h1 { 10 | margin: 0; 11 | display: inline-flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .shield { 18 | transform: scale(0.9); 19 | } 20 | 21 | .legend { 22 | font-family: "Roboto", sans-serif; 23 | font-weight: bold; 24 | font-size: 1.5em; 25 | font-size: clamp(18px, 1vw, 28px); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/header/header.css: -------------------------------------------------------------------------------- 1 | header { 2 | background-color: transparent; 3 | } 4 | 5 | .nav-wrap { 6 | display: flex; 7 | flex-wrap: wrap; 8 | align-items: center; 9 | justify-content: space-between; 10 | overflow: hidden; 11 | max-width: 76rem; 12 | padding: 1rem; 13 | margin-left: auto; 14 | margin-right: auto; 15 | } 16 | 17 | .nav__logo-image--sm { 18 | display: flex; 19 | align-items: center; 20 | justify-content: space-around; 21 | } 22 | 23 | .nav__logo-title--sm { 24 | display: flex; 25 | align-items: center; 26 | margin-left: 0.5rem; 27 | --text-opacity: 1; 28 | color: #000; 29 | color: rgba(0, 0, 0, var(--text-opacity)); 30 | text-decoration: none; 31 | 32 | font-size: 1rem; 33 | font-weight: 700; 34 | font-family: "Open Sans", sans-serif, system-ui, -apple-system, 35 | BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 36 | sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 37 | "Noto Color Emoji"; 38 | } 39 | 40 | .nav__logo { 41 | display: none; 42 | } 43 | 44 | .nav__btn { 45 | align-items: center; 46 | display: block; 47 | padding-left: 0.5rem; 48 | padding-right: 0.5rem; 49 | padding-top: 0.5rem; 50 | padding-bottom: 0.5rem; 51 | --text-opacity: 1; 52 | color: #000; 53 | color: rgba(0, 0, 0, var(--text-opacity)); 54 | border-width: 1px; 55 | --border-opacity: 1; 56 | border-color: #000; 57 | border-color: rgba(0, 0, 0, var(--border-opacity)); 58 | border-radius: 0.25rem; 59 | } 60 | 61 | .nav__btn svg { 62 | width: 0.75rem; 63 | height: 0.75rem; 64 | fill: currentColor; 65 | } 66 | 67 | .navbar { 68 | justify-content: center; 69 | width: 100%; 70 | height: 0; 71 | font-size: 0.75rem; 72 | font-weight: 700; 73 | font-family: "Open Sans", sans-serif, system-ui, -apple-system, 74 | BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", 75 | sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 76 | "Noto Color Emoji"; 77 | transition: height 300ms ease-in-out; 78 | } 79 | 80 | .navbar.expanded { 81 | height: 275px; 82 | } 83 | 84 | .nav__item { 85 | display: block; 86 | padding-top: 1rem; 87 | --text-opacity: 1; 88 | color: #000; 89 | color: rgba(0, 0, 0, var(--text-opacity)); 90 | text-decoration: none; 91 | position: relative; 92 | box-sizing: border-box; 93 | } 94 | 95 | .nav__item::after { 96 | content: ""; 97 | position: absolute; 98 | display: block; 99 | height: 5px; 100 | background-color: #f7e018; 101 | width: 0; 102 | bottom: -5px; 103 | transition: all 250ms ease-in-out; 104 | } 105 | 106 | .nav__item:hover::after { 107 | width: 100%; 108 | } 109 | 110 | .nav__item.active::after { 111 | width: 100%; 112 | } 113 | 114 | /*MD*/ 115 | @media (min-width: 992px) { 116 | .nav-wrap { 117 | justify-content: center; 118 | overflow: visible; 119 | } 120 | 121 | .nav__logo-image--sm { 122 | display: none; 123 | } 124 | .nav__logo { 125 | display: inline-flex; 126 | justify-content: center; 127 | align-items: center; 128 | text-align: center; 129 | margin: 0 0.8rem 0 0.8rem; 130 | flex-basis: 100%; 131 | order: 0; 132 | } 133 | .nav__logo-title--sm { 134 | display: none; 135 | } 136 | 137 | .nav__btn { 138 | display: none; 139 | } 140 | 141 | .navbar { 142 | display: inline-flex; 143 | flex-wrap: wrap; 144 | min-height: 100px; 145 | height: 180px; 146 | width: 100vh; 147 | display: flex; 148 | align-items: center; 149 | width: auto; 150 | justify-content: center; 151 | } 152 | 153 | .navbar.expanded { 154 | height: 180px; 155 | } 156 | 157 | .nav__item { 158 | display: inline-flex; 159 | margin-top: 0; 160 | padding-top: 0; 161 | align-items: center; 162 | justify-content: center; 163 | height: 80px; 164 | width: 120px; 165 | align-items: center; 166 | text-align: center; 167 | order: 1; 168 | } 169 | 170 | .nav__item::after { 171 | bottom: 0; 172 | width: 100%; 173 | transform: scaleX(0); 174 | } 175 | 176 | .nav__item:hover::after { 177 | transform: scaleX(1); 178 | } 179 | 180 | .nav__item.active::after { 181 | transform: scale(1); 182 | } 183 | } 184 | 185 | /* LG */ 186 | @media (min-width: 1100px) { 187 | .nav-wrap { 188 | justify-content: center; 189 | } 190 | .nav__logo-image--sm { 191 | display: none; 192 | } 193 | 194 | .nav__logo { 195 | display: inline-flex; 196 | justify-content: center; 197 | align-items: center; 198 | margin: 0 0.8rem 0 0.8rem; 199 | order: 1; 200 | flex-basis: 0; 201 | } 202 | .nav__logo-title--sm { 203 | display: none; 204 | } 205 | 206 | .nav__btn { 207 | display: none; 208 | } 209 | 210 | .navbar { 211 | display: flex; 212 | flex-wrap: wrap; 213 | height: 100px; 214 | width: 100vh; 215 | display: flex; 216 | align-items: center; 217 | width: auto; 218 | } 219 | 220 | .navbar.expanded { 221 | height: 100px; 222 | } 223 | 224 | .nav__item { 225 | display: inline-flex; 226 | margin-top: 0; 227 | align-items: center; 228 | justify-content: center; 229 | height: 80px; 230 | width: 120px; 231 | align-items: center; 232 | text-align: center; 233 | } 234 | } 235 | -------------------------------------------------------------------------------- /src/components/header/header.js: -------------------------------------------------------------------------------- 1 | import { Link } from "gatsby"; 2 | import React, { useState } from "react"; 3 | import "./header.css"; 4 | import escudo from "../../images/logo-escudo-ec.svg"; 5 | import Logo from "./Logo/logo"; 6 | 7 | const Header = () => { 8 | const [isExpanded, toggleExpansion] = useState(false); 9 | let expanededClass = ""; 10 | if (isExpanded) { 11 | expanededClass = "expanded"; 12 | } 13 | 14 | return ( 15 |
16 |
17 | 18 | Logo 19 |

Ecuador.js

20 | 21 | 34 | 35 | 110 |
111 |
112 | ); 113 | }; 114 | 115 | export default Header; 116 | -------------------------------------------------------------------------------- /src/components/hero-section/city-markers/city-markers.css: -------------------------------------------------------------------------------- 1 | .markers { 2 | position: absolute; 3 | top: 4.2em; 4 | left: 13em; 5 | z-index: 600; 6 | width: 128.44px; 7 | } 8 | 9 | .markers .marker { 10 | opacity: 0; 11 | } 12 | 13 | .markers .marker:nth-child(1) { 14 | animation: marker-showup 300ms ease-in-out 600ms forwards; 15 | } 16 | .markers .marker:nth-child(2) { 17 | animation: marker-showup 300ms ease-in-out 800ms forwards; 18 | } 19 | .markers .marker:nth-child(3) { 20 | animation: marker-showup 300ms ease-in-out 1000ms forwards; 21 | } 22 | .markers .marker:nth-child(4) { 23 | animation: marker-showup 300ms ease-in-out 1200ms forwards; 24 | } 25 | .markers .marker:nth-child(5) { 26 | animation: marker-showup 300ms ease-in-out 1400ms forwards; 27 | } 28 | .markers .marker:nth-child(6) { 29 | animation: marker-showup 300ms ease-in-out 1600ms forwards; 30 | } 31 | .markers .marker:nth-child(7) { 32 | animation: marker-showup 300ms ease-in-out 1800ms forwards; 33 | } 34 | 35 | @keyframes marker-showup { 36 | 0% { 37 | opacity: 0; 38 | transform: scaleY(0); 39 | } 40 | 100% { 41 | opacity: 1; 42 | transform: scaleY(1); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/hero-section/city-markers/city-markers.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "gatsby"; 3 | import "./city-markers.css"; 4 | 5 | const CityMarkers = () => ( 6 | 14 | {/* Loja */} 15 | 16 | 22 | 28 | 29 | {/* Cuenca */} 30 | 31 | 37 | 43 | 44 | {/* Riobamba */} 45 | 46 | 52 | 58 | 59 | {/* Guayaquil */} 60 | 61 | 67 | 73 | 74 | {/* Ambato */} 75 | 76 | 82 | 88 | 89 | {/* Latacunga */} 90 | 91 | 97 | 103 | 104 | {/* Quito */} 105 | 106 | 112 | 118 | 119 | 120 | ); 121 | 122 | export default CityMarkers; 123 | -------------------------------------------------------------------------------- /src/components/hero-section/hero-section.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles For the Hero Section 3 | */ 4 | .hero-section { 5 | padding-top: 5em; 6 | position: relative; 7 | display: flex; 8 | justify-content: space-between; 9 | } 10 | 11 | @media only screen and (min-width: 800px) { 12 | .hero-section { 13 | padding-bottom: 0.5em; 14 | } 15 | } 16 | 17 | @media only screen and (min-width: 1059px) { 18 | .hero-section { 19 | padding-bottom: 1em; 20 | } 21 | } 22 | 23 | @media only screen and (min-width: 1296px) { 24 | .hero-section { 25 | padding-bottom: 7em; 26 | } 27 | } 28 | 29 | .hero-text { 30 | width: 100%; 31 | padding-bottom: 2em; 32 | animation: show-up 300ms ease-in-out forwards; 33 | } 34 | 35 | @media (min-width: 1059px) { 36 | .hero-text { 37 | width: 45%; 38 | padding-bottom: 0; 39 | } 40 | } 41 | 42 | @media (min-width: 1190px) { 43 | .hero-text { 44 | padding-bottom: 2em; 45 | } 46 | } 47 | 48 | .hero-title { 49 | font-weight: bold; 50 | font-size: 36px; 51 | line-height: 48px; 52 | letter-spacing: 1px; 53 | color: #091133; 54 | margin-bottom: 0.6em; 55 | font-family: "Roboto", sans-serif; 56 | } 57 | 58 | .hero-subtitle { 59 | font-weight: 700; 60 | font-size: 20px; 61 | line-height: 28px; 62 | letter-spacing: 1px; 63 | color: #4e4e4e; 64 | margin-bottom: 1.5em; 65 | font-family: "Roboto", sans-serif; 66 | background-color: transparent; 67 | } 68 | 69 | /* Ecuador Map */ 70 | .map-container { 71 | position: relative; 72 | display: none; 73 | animation: scale-up 600ms ease-in-out forwards; 74 | } 75 | 76 | .ec-map { 77 | top: 0px; 78 | right: 3%; 79 | position: absolute; 80 | z-index: 500; 81 | width: 100%; 82 | } 83 | 84 | @media only screen and (min-width: 1059px) { 85 | .map-container { 86 | min-width: 35em; 87 | display: block; 88 | } 89 | } 90 | 91 | @keyframes scale-up { 92 | 0% { 93 | transform: scale(0); 94 | } 95 | 90% { 96 | transform: scale(1.1); 97 | } 98 | 100% { 99 | transform: scale(1); 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/components/hero-section/hero-section.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import CommunityDescription from "../community-section/community-description/community-description"; 3 | import PropTypes from "prop-types"; 4 | import "./hero-section.css"; 5 | import SocialNetworks from "./social-networks/social-networks"; 6 | import mapWidget from "../../images/widgets/js-ecuador-map.svg"; 7 | import CityMarkers from "./city-markers/city-markers"; 8 | 9 | const HeroSection = ({ title, subtitle }) => ( 10 |
11 |
12 |

{title}

13 |

{subtitle}

14 | 15 | 16 |
17 |
18 | 19 | 20 |
21 |
22 | ); 23 | 24 | HeroSection.propTypes = { 25 | title: PropTypes.string, 26 | subtitle: PropTypes.string, 27 | }; 28 | 29 | export default HeroSection; 30 | -------------------------------------------------------------------------------- /src/components/hero-section/social-networks/social-networks.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles For the Social Networks Component 3 | */ 4 | .social-networks { 5 | font-weight: 300; 6 | font-size: 14px; 7 | line-height: 16px; 8 | text-align: justify; 9 | margin-top: 3em; 10 | margin-bottom: 0; 11 | } 12 | 13 | @media only screen and (min-width: 800px) { 14 | .social-networks { 15 | margin-top: 0; 16 | margin-bottom: 2em; 17 | } 18 | } 19 | 20 | @media only screen and (min-width: 1190px) { 21 | .social-networks { 22 | margin-top: 3em; 23 | margin-bottom: 0; 24 | } 25 | } 26 | 27 | .social-networks div { 28 | margin-top: 1.5em; 29 | max-width: 100%; 30 | display: flex; 31 | } 32 | 33 | .social-networks a { 34 | margin-right: 2em; 35 | } 36 | -------------------------------------------------------------------------------- /src/components/hero-section/social-networks/social-networks.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import githubSVG from "../../../images/icons/github.svg"; 3 | import telegramSVG from "../../../images/icons/telegram.svg"; 4 | import twitterSVG from "../../../images/icons/twitter.svg"; 5 | import eventbriteSVG from "../../../images/icons/eventbrite.png"; 6 | import "./social-networks.css"; 7 | 8 | const SocialNetworks = () => ( 9 |
10 | Siguenos en: 11 |
12 | 13 | imagen github 14 | 15 | 16 | imagen telegram 17 | 18 | 19 | imagen twitter 20 | 21 | 25 | imagen eventBrite 26 | 27 |
28 |
29 | ); 30 | 31 | export default SocialNetworks; 32 | -------------------------------------------------------------------------------- /src/components/layout/layout.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | import React from "react"; 3 | import Footer from "../footer/footer"; 4 | import Header from "../header/header"; 5 | import styles from "./layout.module.css"; 6 | import pathImg from "../../images/background/path.svg"; 7 | import BlogSection from "../blog-section/blog-section"; 8 | import Subscribe from "../subscribe/subscribe"; 9 | 10 | const Layout = ({ isHome, children }) => { 11 | let background = ""; 12 | let blogSection = null; 13 | 14 | if (isHome) { 15 | background = pathImg; 16 | blogSection = ; 17 | } 18 | 19 | return ( 20 |
24 |
25 |
{children}
26 | 27 | {/* Comment this section until it will be implemented */} 28 | {/* {blogSection} */} 29 |
30 |
31 | ); 32 | }; 33 | 34 | Layout.propTypes = { 35 | isHome: PropTypes.bool, // Indicates whether it is the Homepage or not 36 | children: PropTypes.node.isRequired, 37 | }; 38 | 39 | Layout.defaultProps = { 40 | isHome: false, 41 | }; 42 | 43 | export default Layout; 44 | -------------------------------------------------------------------------------- /src/components/layout/layout.module.css: -------------------------------------------------------------------------------- 1 | /* Componente Layout */ 2 | 3 | .layout { 4 | display: flex; 5 | min-height: 100vh; 6 | flex-direction: column; 7 | background-repeat: no-repeat; 8 | background-position: right top; 9 | } 10 | 11 | @media only screen and (max-width: 992px) { 12 | .layout { 13 | background-size: 200%; 14 | } 15 | } 16 | 17 | .mainContent { 18 | flex: 1; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/maintainers/maintainers.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PersonasSection from "../personas-section/personas-section"; 3 | import styles from "./maintainers.module.css"; 4 | import { useStaticQuery, graphql } from "gatsby"; 5 | 6 | const Maintainers = () => { 7 | const title = "Mantenedores"; 8 | const description = 9 | "Este es el grupo de mantenedores que hacen posible los eventos"; 10 | const data = useStaticQuery(graphql` 11 | query getMaintainers { 12 | allMaintainersJson { 13 | edges { 14 | node { 15 | description 16 | email 17 | github 18 | id 19 | name 20 | photo 21 | rol 22 | twitter 23 | website 24 | } 25 | } 26 | } 27 | } 28 | `); 29 | return ( 30 |
31 | 36 |
37 | ); 38 | }; 39 | 40 | export default Maintainers; 41 | -------------------------------------------------------------------------------- /src/components/maintainers/maintainers.module.css: -------------------------------------------------------------------------------- 1 | .maintainers { 2 | background-color: #fff; 3 | padding-bottom: 8em; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/personas-section/personas-section.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./personas-section.module.css"; 3 | import PropTypes from "prop-types"; 4 | import Personas from "../UI/personas/personas"; 5 | 6 | const PersonasSection = ({ title, description, personas }) => ( 7 |
8 |
9 |

{title}

10 |

{description}

11 | 12 |
13 |
14 | ); 15 | 16 | PersonasSection.propTypes = { 17 | title: PropTypes.string, 18 | description: PropTypes.string, 19 | personas: PropTypes.arrayOf(PropTypes.object), 20 | }; 21 | 22 | export default PersonasSection; 23 | -------------------------------------------------------------------------------- /src/components/personas-section/personas-section.module.css: -------------------------------------------------------------------------------- 1 | .section { 2 | width: 100%; 3 | padding: 5em 0 0; 4 | } 5 | 6 | .section__title { 7 | text-align: center; 8 | font-size: 50px; 9 | font-weight: bold; 10 | font-family: "Roboto", sans-serif; 11 | } 12 | 13 | .section__description { 14 | text-align: center; 15 | font-size: 14px; 16 | font-family: "Roboto", sans-serif; 17 | } 18 | -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | import { useStaticQuery, graphql } from "gatsby"; 2 | import PropTypes from "prop-types"; 3 | import React from "react"; 4 | import { Helmet } from "react-helmet"; 5 | 6 | function SEO({ description, lang, meta, keywords, title }) { 7 | const { site } = useStaticQuery(graphql` 8 | query DefaultSEOQuery { 9 | site { 10 | siteMetadata { 11 | title 12 | description 13 | author 14 | } 15 | } 16 | } 17 | `); 18 | 19 | const metaDescription = description || site.siteMetadata.description; 20 | 21 | return ( 22 | 0 62 | ? { 63 | name: `keywords`, 64 | content: keywords.join(`, `), 65 | } 66 | : [] 67 | ) 68 | .concat(meta)} 69 | title={title} 70 | titleTemplate={`%s | ${site.siteMetadata.title}`} 71 | /> 72 | ); 73 | } 74 | 75 | SEO.defaultProps = { 76 | lang: `en`, 77 | keywords: [], 78 | meta: [], 79 | }; 80 | 81 | SEO.propTypes = { 82 | description: PropTypes.string, 83 | keywords: PropTypes.arrayOf(PropTypes.string), 84 | lang: PropTypes.string, 85 | meta: PropTypes.array, 86 | title: PropTypes.string.isRequired, 87 | }; 88 | 89 | export default SEO; 90 | -------------------------------------------------------------------------------- /src/components/sponsors-section/sponsors-section.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./sponsors-section.module.css"; 3 | import { useStaticQuery, graphql } from "gatsby"; 4 | import PersonasSection from "../personas-section/personas-section"; 5 | 6 | const SponsorsSection = () => { 7 | const title = "Sponsors"; 8 | const description = 9 | "Estos son nuestros sponsors que hacen posible los eventos"; 10 | const data = useStaticQuery(graphql` 11 | query getSponsors { 12 | allSponsorsJson { 13 | edges { 14 | node { 15 | description 16 | email 17 | github 18 | id 19 | name 20 | photo 21 | rol 22 | twitter 23 | website 24 | } 25 | } 26 | } 27 | } 28 | `); 29 | return ( 30 |
31 | 36 |
37 | ); 38 | }; 39 | 40 | export default SponsorsSection; 41 | -------------------------------------------------------------------------------- /src/components/sponsors-section/sponsors-section.module.css: -------------------------------------------------------------------------------- 1 | .sponsors { 2 | background-color: #f3f3f3; 3 | padding-bottom: 8em; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/subscribe/subscribe.css: -------------------------------------------------------------------------------- 1 | .subscribe { 2 | background: #ffbe00 url(../../images/js-ec-pattern.svg); 3 | background-size: 150em; 4 | 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: space-around; 8 | align-items: center; 9 | padding-top: 6rem; 10 | padding-bottom: 6rem; 11 | } 12 | 13 | .subscribe p { 14 | --text-opacity: 1; 15 | color: #fff; 16 | color: rgba(255, 255, 255, var(--text-opacity)); 17 | font-size: 1.5rem; 18 | text-align: center; 19 | font-weight: 700; 20 | } 21 | 22 | .subscribe form { 23 | display: flex; 24 | flex-direction: column; 25 | } 26 | 27 | .subscribe input { 28 | margin-top: 1.25rem; 29 | margin-bottom: 1.25rem; 30 | padding: 0.5rem; 31 | 32 | --text-opacity: 1; 33 | color: #000; 34 | color: rgba(0, 0, 0, var(--text-opacity)); 35 | text-align: center; 36 | 37 | --placeholder-opacity: 1; 38 | color: #4a5568; 39 | color: rgba(74, 85, 104, var(--placeholder-opacity)); 40 | border-radius: 0.25rem; 41 | } 42 | 43 | .subscribe button { 44 | background-color: transparent; 45 | 46 | --text-opacity: 1; 47 | color: #fff; 48 | color: rgba(255, 255, 255, var(--text-opacity)); 49 | 50 | border-width: 2px; 51 | --border-opacity: 1; 52 | border-color: #fff; 53 | border-color: rgba(255, 255, 255, var(--border-opacity)); 54 | 55 | padding: 0.5rem; 56 | border-radius: 0.25rem; 57 | } 58 | 59 | .subscribe button:focus { 60 | outline: 0; 61 | outline: 2px solid transparent; 62 | outline-offset: 2px; 63 | } 64 | 65 | .subscribe button:hover { 66 | --bg-opacity: 1; 67 | background-color: #fff; 68 | background-color: rgba(255, 255, 255, var(--bg-opacity)); 69 | 70 | --text-opacity: 1; 71 | color: #000; 72 | color: rgba(0, 0, 0, var(--text-opacity)); 73 | } 74 | 75 | @media (min-width: 1024px) { 76 | .subscribe { 77 | flex-direction: row; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/subscribe/subscribe.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styles from "./subscribe.css"; 3 | 4 | const Subscribe = () => { 5 | return ( 6 |
7 |

8 | Entérate de todos los eventos y
publicaciones 9 |

10 | 11 |
{ 13 | e.preventDefault(); 14 | }} 15 | > 16 | 17 | 18 |
19 |
20 | ); 21 | }; 22 | 23 | export default Subscribe; 24 | -------------------------------------------------------------------------------- /src/constants/cities.js: -------------------------------------------------------------------------------- 1 | import ambatoImg from "../images/cities/ambato.jpg"; 2 | import cuencaImg from "../images/cities/cuenca.jpg"; 3 | import guayaquilImg from "../images/cities/guayaquil.jpg"; 4 | import latacungaImg from "../images/cities/latacunga.jpg"; 5 | import lojaImg from "../images/cities/loja.jpg"; 6 | import quitoImg from "../images/cities/quito.jpg"; 7 | import riobambaImg from "../images/cities/riobamba.jpg"; 8 | 9 | const cities = [ 10 | { 11 | imgURL: quitoImg, 12 | topic: "Quito.js", 13 | description: 14 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.", 15 | link: "#", 16 | }, 17 | { 18 | imgURL: guayaquilImg, 19 | topic: "Guayaquil.js", 20 | description: 21 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.", 22 | link: "#", 23 | }, 24 | { 25 | imgURL: cuencaImg, 26 | topic: "Cuenca.js", 27 | description: 28 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.", 29 | link: "#", 30 | }, 31 | { 32 | imgURL: lojaImg, 33 | topic: "Loja.js", 34 | description: 35 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.", 36 | link: "#", 37 | }, 38 | { 39 | imgURL: riobambaImg, 40 | topic: "Riobamba.js", 41 | description: 42 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.", 43 | link: "#", 44 | }, 45 | { 46 | imgURL: ambatoImg, 47 | topic: "Ambato.js", 48 | description: 49 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.", 50 | link: "#", 51 | }, 52 | { 53 | imgURL: latacungaImg, 54 | topic: "Latacunga.js", 55 | description: 56 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit exercitationem repellat molestias quod repudiandae quo atque, nobis saepe ducimus, consectetur voluptates pariatur animi.", 57 | link: "#", 58 | }, 59 | ]; 60 | 61 | export default cities; 62 | -------------------------------------------------------------------------------- /src/constants/eventos.js: -------------------------------------------------------------------------------- 1 | import imgEvent1 from "../images/events/event-1.jpg"; 2 | import imgEvent2 from "../images/events/event-2.jpg"; 3 | import imgEvent3 from "../images/events/event-3.jpg"; 4 | import imgEvent4 from "../images/events/event-1.jpg"; 5 | import imgEvent5 from "../images/events/event-2.jpg"; 6 | 7 | export default [ 8 | { 9 | id: 1, 10 | imagen: imgEvent1, 11 | titulo: "Trabajo Remoto", 12 | fechaHora: "enero 16 - 17:00", 13 | disertantes: "Crysfel Villa, Freddy Santacruz", 14 | resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`, 15 | url: "#", 16 | }, 17 | { 18 | id: 2, 19 | imagen: imgEvent2, 20 | titulo: "Metodologías", 21 | fechaHora: "enero 16 - 17:00", 22 | disertantes: "Crysfel Villa, Freddy Santacruz", 23 | resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`, 24 | url: "#", 25 | }, 26 | { 27 | id: 3, 28 | imagen: imgEvent3, 29 | titulo: "GraphQL", 30 | fechaHora: "enero 16 - 17:00", 31 | disertantes: "Crysfel Villa, Freddy Santacruz", 32 | resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`, 33 | url: "#", 34 | }, 35 | { 36 | id: 4, 37 | imagen: imgEvent4, 38 | titulo: "GraphQL 2", 39 | fechaHora: "enero 16 - 17:00", 40 | disertantes: "Crysfel Villa, Freddy Santacruz", 41 | resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`, 42 | url: "#", 43 | }, 44 | { 45 | id: 5, 46 | imagen: imgEvent5, 47 | titulo: "Gatsby", 48 | fechaHora: "enero 16 - 17:00", 49 | disertantes: "Crysfel Villa, Freddy Santacruz", 50 | resumen: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia maiores repudiandae!`, 51 | url: "#", 52 | }, 53 | ]; 54 | -------------------------------------------------------------------------------- /src/constants/slider.js: -------------------------------------------------------------------------------- 1 | import photo1 from "../images/slider/1era meetup cuenca.jpg"; 2 | import photo2 from "../images/slider/segunda meetup.jpg"; 3 | 4 | const photos = [ 5 | { 6 | name: "1era meetup", 7 | photoURL: photo1, 8 | }, 9 | { 10 | name: "2da meetup - Trabajo remoto mitos y realidades", 11 | photoURL: photo2, 12 | }, 13 | { 14 | name: "photo3", 15 | photoURL: 16 | "https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68", 17 | }, 18 | { 19 | name: "photo4", 20 | photoURL: 21 | "https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w", 22 | }, 23 | { 24 | name: "photo5", 25 | photoURL: 26 | "https://i.picsum.photos/id/864/598/386.jpg?hmac=DOo0-DGwCVWdAnQAN_IHDZ2kKK_t10AGle49ztEbyYM", 27 | }, 28 | ]; 29 | 30 | export default photos; 31 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | /*! purgecss start ignore */ 2 | @tailwind base; 3 | @tailwind components; 4 | 5 | h1 { 6 | @apply text-5xl; 7 | } 8 | 9 | h2 { 10 | @apply text-4xl; 11 | } 12 | 13 | h3 { 14 | @apply text-3xl; 15 | } 16 | 17 | h4 { 18 | @apply text-2xl; 19 | } 20 | 21 | /* Fixes ol styling for markdown */ 22 | ol { 23 | @apply list-decimal my-3 ml-6 font-medium text-2xl; 24 | } 25 | 26 | /*! purgecss end ignore */ 27 | @tailwind utilities; 28 | 29 | body { 30 | font-family: "Roboto", sans-serif; 31 | } 32 | 33 | /* Contenedor con padding */ 34 | 35 | .ec-container { 36 | padding-left: 5%; 37 | padding-right: 5%; 38 | } 39 | 40 | .section-title { 41 | font-size: 50px; 42 | font-weight: bold; 43 | font-family: "Roboto", sans-serif; 44 | } 45 | 46 | .small-widget { 47 | display: none; 48 | position: absolute; 49 | z-index: 500; 50 | } 51 | 52 | @media only screen and (min-width: 560px) { 53 | .small-widget { 54 | display: block; 55 | } 56 | } 57 | 58 | @keyframes show-up { 59 | 0% { 60 | opacity: 0; 61 | transform: translateY(10px); 62 | } 63 | 100% { 64 | opacity: 1; 65 | transform: translateY(0px); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/data/authors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "rol": "Co-Organizador", 4 | "name": "Richard Palacios G", 5 | "photo": "https://avatars0.githubusercontent.com/u/11642622?v=4", 6 | "github": "https://richardpalaciosg.dev/", 7 | "website": "https://richardpalaciosg.dev/", 8 | "email": "https://richardpalaciosg.dev/", 9 | "twitter": "https://richardpalaciosg.dev/", 10 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 11 | }, 12 | { 13 | "rol": "Co-Organizador", 14 | "name": "Israel Teneda", 15 | "photo": "https://avatars2.githubusercontent.com/u/20668624?v=4", 16 | "github": "https://github.com/israteneda", 17 | "website": "https://github.com/israteneda", 18 | "email": "https://github.com/israteneda", 19 | "twitter": "https://github.com/israteneda", 20 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 21 | }, 22 | { 23 | "rol": "Co-Organizador", 24 | "name": "Edisson Reinozo", 25 | "photo": "https://avatars3.githubusercontent.com/u/14936466?v=4", 26 | "github": "https://github.com/edzzn", 27 | "website": "http://edzzn.com/", 28 | "email": "http://edzzn.com/", 29 | "twitter": "http://edzzn.com/", 30 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 31 | }, 32 | { 33 | "rol": "Co-Organizador", 34 | "name": "Jordan Jaramillo", 35 | "photo": "https://avatars2.githubusercontent.com/u/62086742?v=4", 36 | "github": "https://github.com/jordanrjcode", 37 | "website": "https://github.com/jordanrjcode", 38 | "email": "https://github.com/jordanrjcode", 39 | "twitter": "https://github.com/jordanrjcode", 40 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 41 | } 42 | ] 43 | -------------------------------------------------------------------------------- /src/data/contributors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "rol": "Co-Organizador", 4 | "name": "Richard Palacios G", 5 | "photo": "https://avatars0.githubusercontent.com/u/11642622?v=4", 6 | "github": "https://richardpalaciosg.dev/", 7 | "website": "https://richardpalaciosg.dev/", 8 | "email": "https://richardpalaciosg.dev/", 9 | "twitter": "https://richardpalaciosg.dev/", 10 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 11 | }, 12 | { 13 | "rol": "Co-Organizador", 14 | "name": "Edisson Reinozo", 15 | "photo": "https://avatars3.githubusercontent.com/u/14936466?v=4", 16 | "github": "http://edzzn.com/", 17 | "website": "http://edzzn.com/", 18 | "email": "http://edzzn.com/", 19 | "twitter": "http://edzzn.com/", 20 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 21 | }, 22 | { 23 | "rol": "Co-Organizador", 24 | "name": "Israel Teneda", 25 | "photo": "https://avatars2.githubusercontent.com/u/20668624?v=4", 26 | "github": "https://github.com/israteneda", 27 | "website": "https://github.com/israteneda", 28 | "email": "https://github.com/israteneda", 29 | "twitter": "https://github.com/israteneda", 30 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 31 | }, 32 | { 33 | "rol": "Co-Organizador", 34 | "name": "Jordan Jaramillo", 35 | "photo": "https://avatars2.githubusercontent.com/u/62086742?v=4", 36 | "github": "https://github.com/jordanrjcode", 37 | "website": "https://github.com/jordanrjcode", 38 | "email": "https://github.com/jordanrjcode", 39 | "twitter": "https://github.com/jordanrjcode", 40 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 41 | }, 42 | { 43 | "rol": "Co-Organizador", 44 | "name": "Eduardo Ayora Ochoa", 45 | "photo": "https://avatars1.githubusercontent.com/u/49033198?v=4", 46 | "github": "https://github.com/EduardoAyora", 47 | "website": "https://github.com/EduardoAyora", 48 | "email": "https://github.com/EduardoAyora", 49 | "twitter": "https://github.com/EduardoAyora", 50 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 51 | }, 52 | { 53 | "rol": "Co-Organizador", 54 | "name": "David Padilla", 55 | "photo": "https://avatars3.githubusercontent.com/u/25573926?v=4", 56 | "github": "https://www.davidpadilla.dev/", 57 | "website": "https://www.davidpadilla.dev/", 58 | "email": "https://www.davidpadilla.dev/", 59 | "twitter": "https://www.davidpadilla.dev/", 60 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 61 | }, 62 | { 63 | "rol": "Co-Organizador", 64 | "name": "Freddy Abad", 65 | "photo": "https://avatars0.githubusercontent.com/u/38579765?v=4", 66 | "github": "https://github.com/FreddieAbad", 67 | "website": "https://github.com/FreddieAbad", 68 | "email": "https://github.com/FreddieAbad", 69 | "twitter": "https://github.com/FreddieAbad", 70 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 71 | }, 72 | { 73 | "rol": "Co-Organizador", 74 | "name": "Miguel Rios R", 75 | "photo": "https://avatars3.githubusercontent.com/u/25510181?v=4", 76 | "github": "https://miguelriosr.com/", 77 | "website": "https://miguelriosr.com/", 78 | "email": "https://miguelriosr.com/", 79 | "twitter": "https://miguelriosr.com/", 80 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 81 | }, 82 | { 83 | "rol": "Co-Organizador", 84 | "name": "Carlos G. Encalada B.", 85 | "photo": "https://avatars2.githubusercontent.com/u/55223838?v=4", 86 | "github": "https://github.com/skcode7", 87 | "website": "http://karlosencalada.dev", 88 | "email": "mailto:admin@karlosencalada.dev", 89 | "twitter": "https://twitter.com/karlosrocker", 90 | "description": "Desarrollador Low Code, consultor de ERPs, entusiasta de GNU-Linux y usuario de Jamstack" 91 | }, 92 | { 93 | "rol": "Co-Organizador", 94 | "name": "Bryan Alba", 95 | "photo": "https://avatars0.githubusercontent.com/u/20263594?v=4", 96 | "github": "https://github.com/albamaister", 97 | "website": "https://albamaister.github.io/curriculum/", 98 | "email": "https://albamaister.github.io/curriculum/", 99 | "twitter": "https://twitter.com/albamaister", 100 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 101 | } 102 | ] 103 | -------------------------------------------------------------------------------- /src/data/maintainers.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "rol": "Co-Organizador", 4 | "name": "Richard Palacios G", 5 | "photo": "https://avatars0.githubusercontent.com/u/11642622?v=4", 6 | "github": "https://richardpalaciosg.dev/", 7 | "website": "https://richardpalaciosg.dev/", 8 | "email": "https://richardpalaciosg.dev/", 9 | "twitter": "https://richardpalaciosg.dev/", 10 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 11 | }, 12 | { 13 | "rol": "Co-Organizador", 14 | "name": "Israel Teneda", 15 | "photo": "https://avatars2.githubusercontent.com/u/20668624?v=4", 16 | "github": "https://github.com/israteneda", 17 | "website": "https://github.com/israteneda", 18 | "email": "https://github.com/israteneda", 19 | "twitter": "https://github.com/israteneda", 20 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 21 | }, 22 | { 23 | "rol": "Co-Organizador", 24 | "name": "Edisson Reinozo", 25 | "photo": "https://avatars3.githubusercontent.com/u/14936466?v=4", 26 | "github": "http://edzzn.com/", 27 | "website": "http://edzzn.com/", 28 | "email": "http://edzzn.com/", 29 | "twitter": "http://edzzn.com/", 30 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 31 | }, 32 | { 33 | "rol": "Co-Organizador", 34 | "name": "Jordan Jaramillo", 35 | "photo": "https://avatars2.githubusercontent.com/u/62086742?v=4", 36 | "github": "https://github.com/jordanrjcode", 37 | "website": "https://github.com/jordanrjcode", 38 | "email": "https://github.com/jordanrjcode", 39 | "twitter": "https://github.com/jordanrjcode", 40 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 41 | } 42 | ] 43 | -------------------------------------------------------------------------------- /src/data/sponsors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "rol": "Tech/Business", 4 | "name": "Google for Startups", 5 | "photo": "https://yt3.ggpht.com/a/AATXAJyYudfggOrGzERrHeb4Q0xTBvygabSRtjjiA5_FVg=s900-c-k-c0xffffffff-no-rj-mo", 6 | "github": "#", 7 | "website": "#", 8 | "email": "#", 9 | "twitter": "#", 10 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 11 | }, 12 | { 13 | "rol": "Tech/Teaching", 14 | "name": "UDACITY", 15 | "photo": "https://media-exp1.licdn.com/dms/image/C560BAQGSBVNHbqKIdA/company-logo_200_200/0?e=2159024400&v=beta&t=5RZMctpOLPnRWkh4nOtdCCx17fB52xWFKp3EjDGDsdI", 16 | "github": "#", 17 | "website": "#", 18 | "email": "#", 19 | "twitter": "#", 20 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 21 | }, 22 | { 23 | "rol": "Tech/Teaching", 24 | "name": "Udemy", 25 | "photo": "https://lh3.googleusercontent.com/3bJYxTz2wadBVS21234Cl5l_Aksm04whiYa4KaWB8boywSfd1YN3LstlSGsA7oUpWZrx", 26 | "github": "#", 27 | "website": "#", 28 | "email": "#", 29 | "twitter": "#", 30 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 31 | }, 32 | { 33 | "rol": "Tech", 34 | "name": "ThoughtWorks", 35 | "photo": "https://pbs.twimg.com/profile_images/900223659176058883/9c8H_9fb_400x400.jpg", 36 | "github": "#", 37 | "website": "#", 38 | "email": "#", 39 | "twitter": "#", 40 | "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. " 41 | } 42 | ] 43 | -------------------------------------------------------------------------------- /src/images/abduction-illustration.svg: -------------------------------------------------------------------------------- 1 | taken -------------------------------------------------------------------------------- /src/images/background/grid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/images/background/path.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/cities/ambato.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/cities/ambato.jpg -------------------------------------------------------------------------------- /src/images/cities/cuenca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/cities/cuenca.jpg -------------------------------------------------------------------------------- /src/images/cities/guayaquil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/cities/guayaquil.jpg -------------------------------------------------------------------------------- /src/images/cities/latacunga.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/cities/latacunga.jpg -------------------------------------------------------------------------------- /src/images/cities/loja.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/cities/loja.jpg -------------------------------------------------------------------------------- /src/images/cities/quito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/cities/quito.jpg -------------------------------------------------------------------------------- /src/images/cities/riobamba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/cities/riobamba.jpg -------------------------------------------------------------------------------- /src/images/events/event-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/events/event-1.jpg -------------------------------------------------------------------------------- /src/images/events/event-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/events/event-2.jpg -------------------------------------------------------------------------------- /src/images/events/event-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/events/event-3.jpg -------------------------------------------------------------------------------- /src/images/icons/chevron-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/icons/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/icons/eventbrite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/icons/eventbrite.png -------------------------------------------------------------------------------- /src/images/icons/github-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/images/icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/icons/telegram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/images/icons/twitter-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/icons/world.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/javascriptecuador.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/javascriptecuador.png -------------------------------------------------------------------------------- /src/images/logo-escudo-ec.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/slider/1era meetup cuenca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/slider/1era meetup cuenca.jpg -------------------------------------------------------------------------------- /src/images/slider/segunda meetup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javascriptecuador/web/332196a3d320067c52a5925e9864acefc62c4b6b/src/images/slider/segunda meetup.jpg -------------------------------------------------------------------------------- /src/images/widgets/brackets.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/widgets/brackets2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/images/widgets/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/images/widgets/lines.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/widgets/square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/widgets/times-purple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/widgets/times-yellow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/images/widgets/triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Layout from "../components/layout/layout"; 4 | import SEO from "../components/seo"; 5 | import abductionIllustration from "../images/abduction-illustration.svg"; 6 | 7 | function NotFoundPage() { 8 | return ( 9 | 10 | 11 |
12 | Ghost getting abducted by aliens 17 |

18 | Looks like this page is a ghost that got abducted by aliens... 19 |

20 |
21 | 22 | ); 23 | } 24 | 25 | export default NotFoundPage; 26 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Layout from "../components/layout/layout"; 4 | import SEO from "../components/seo"; 5 | import dogIllustration from "../images/dog-illustration.svg"; 6 | 7 | function AboutPage() { 8 | return ( 9 | 10 | 14 | 15 |
16 |
17 |
18 | The point is... to live one's life in the full complexity of 19 | what one is, which is something much darker, more contradictory, 20 | more of a maelstrom of impulses and passions, of cruelty, ecstacy, 21 | and madness, than is apparent to the civilized being who glides on 22 | the surface and fits smoothly into the world. 23 |
24 | 25 | 26 | – Thomas Nagel 27 | 28 |
29 | 30 |
31 | A dog relaxing 32 |
33 |
34 | 35 | ); 36 | } 37 | 38 | export default AboutPage; 39 | -------------------------------------------------------------------------------- /src/pages/blog.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Layout from "../components/layout/layout"; 4 | import SEO from "../components/seo"; 5 | 6 | import { StaticQuery, graphql, Link } from "gatsby"; 7 | 8 | function BlogPage(articulos) { 9 | return ( 10 | 11 | 12 |
13 |

Lista de blogs:

14 | 15 |
    16 | {articulos.map((articulo) => ( 17 |
  • 18 | {articulo.title} 19 |
    • 20 | ))} 21 |
22 |
23 | 24 | ); 25 | } 26 | 27 | function renderBlogPage() { 28 | return ( 29 | { 47 | const articulosFormateados = data.articulos.edges.map((articulo) => { 48 | return { 49 | ...articulo.node.frontmatter, 50 | slug: articulo.node.slug, 51 | id: articulo.node.id, 52 | }; 53 | }); 54 | return BlogPage(articulosFormateados); 55 | }} 56 | /> 57 | ); 58 | } 59 | 60 | export default renderBlogPage; 61 | -------------------------------------------------------------------------------- /src/pages/blog/gatsby-deploy.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploy de un sitio de Gatsby en Netlify 3 | date: "2020-10-05" 4 | updated: "2020-10-05" 5 | description: Como realizar el deploy de un sitio construido con Gatsby a Netlify 6 | author: "https://github.com/edzzn" 7 | --- 8 | 9 | Esta es la guía base para realizar el deploy de una página construida con el framework Gatsby, 10 | en este caso se realizará el deploy de la página de la comunidad de JavaScript Ecuador. 11 | 12 | Una vez tenemos el sitio alojado en un repositorio de GitHub tenemos que conectarlo con la plataforma 13 | [Netlify](https://www.netlify.com/). 14 | 15 | 1. Añadir el repostiorio desde GitHub 16 | 17 | ![](https://cdn.netlify.com/3803d207cbf97389f0d37ab7ee65580ee52c217f/a6a2f/img/blog/new_site_button.png) 18 | 19 | 2. Conectar el repositorio 20 | 21 | Hacer clic en el botón que lleva a la pantalla donde Netlify se conecta al repositorio de GitHub. 22 | 23 | ![](https://cdn.netlify.com/6cc161f3ced8f060296bc8aeacd7fb39e5159274/743e1/img/blog/create_link_repo.png) 24 | 25 | Cuando se realiza un push a GitHub, Netlify realiza la actualización de la página automáticamente 26 | 27 | 3. Autorizar a Netlify 28 | 29 | ![](https://cloud.githubusercontent.com/assets/6520639/9803635/71760370-57d9-11e5-8bdb-850aa176a22c.png) 30 | 31 | Hacer clic en el botón Autorizar aplicación para permitir que Netlify y GitHub se comuniquen entre sí. 32 | 33 | 4. Elegir repositorio 34 | 35 | ![](https://cdn.netlify.com/cd1582720ed9ca7c74d47fcb3a5330ef4e210633/813a3/img/blog/choose_repo.png) 36 | 37 | Ahora que se ha conectado Netlify y GitHub, aparece una lista de los repositorios de Git. Seleccionar el que se desea deployar. 38 | 39 | 5. Configurar ajustes del sitio 40 | 41 | Aquí se configura las opciones para implementar el sitio. 42 | 43 | ![](https://cdn.netlify.com/ca977361e618e38b818f045fc0fcbf856ec1124b/7dc39/img/blog/deploy_settings.png) 44 | 45 | 6. Construir en el sitio 46 | 47 | Ahora es el momento de sentarse y relajarse, tomar algo frío para beber, rascar al perro detrás de las orejas o levantarse y 48 | caminar. (Probablemente haya estado frente a la computadora durante demasiado tiempo hoy, ¿verdad?) Netlify hace el resto, y se puede ver el progreso. 49 | 50 | ![](https://cdn.netlify.com/99909c899353de90f7262b21efcc4dcf6aff963d/73df2/img/blog/deploy_progress.png) 51 | 52 | 7. Realizar cambios 53 | 54 | Cuando se realiza cambios en el sitio, estos se reflejan automáticamente de forma local, pero ¿qué pasa con la versión alojada de Netlify? 55 | Cada vez que se confirma y envía cambios a GitHub, se activa una nueva compilación en Netlify, y tan pronto como finaliza la compilación, 56 | los cambios también están disponibles en Internet. 57 | 58 | 8. Listo 59 | 60 | Espera, ¿pensaste que habría más? ¡No! Netlify lo ha hecho, incluido darle un nombre temporal al sitio. 61 | El sitio estará activo para que lo vea el público y si se desea se puede agregar un dominio personalizado. 62 | 63 | Tomado de A Step-by-Step Guide: Gatsby on Netlify -------------------------------------------------------------------------------- /src/pages/ciudades.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Layout from "../components/layout/layout"; 3 | import SEO from "../components/seo"; 4 | 5 | const Ciudades = () => ( 6 | 7 | 11 |
Pagina Ciudades
12 | 13 | ); 14 | 15 | export default Ciudades; 16 | -------------------------------------------------------------------------------- /src/pages/code-of-conduct.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import codeConductImg from "../images/code-of-conduct.svg"; 3 | import Layout from "../components/layout/layout"; 4 | const codeConduct = () => { 5 | return ( 6 |
7 | 8 |

Code of conduct

9 | 10 |

11 | Este Código de Conducta establece estándares de comportamiento para 12 | todas las personas que se involucren en los espacios de participación 13 | que estén alojados y/o asociados con la comunidad Javascript Ecuador, 14 | ya sean presenciales o virtuales. Estas normas aplican a todo tipo de 15 | participante, incluyendo, pero no limitado a, administradores, 16 | moderadores de los foros y miembros de la comunidad; incluyendo a los 17 | visitantes poco frecuentes. 18 |

19 |
20 |
21 |

22 | Nuestro Compromiso 23 |

24 |

25 | Todos los involucrados en la comunidad de Javascript Ecuador 26 | buscamos crear y fomentar una comunidad abierta y acogedora, 27 | nosotros como contribuyentes y administradores nos comprometemos a 28 | hacer de la participación en este proyecto y nuestra comunidad una 29 | experiencia libre de acoso para todos, independientemente de la 30 | edad, dimensión corporal, discapacidad, etnia, identidad y 31 | expresión de género, nivel de experiencia, nacionalidad, 32 | apariencia física, raza, religión, identidad u orientación sexual. 33 | La comunidad Javascript Ecuador celebra la diversidad de su 34 | comunidad. Para la organización es de crucial importancia que 35 | estos espacios de participación presenciales y virtuales sean 36 | ámbitos inclusivos, seguros y libres de discriminación y/o 37 | violencia de cualquier tipo. 38 |

39 |
40 |
41 |

42 | Nuestros Estándares 43 |

44 |

45 | Ejemplos de comportamiento que contribuyen a crear un ambiente 46 | positivo: 47 |

48 |
    49 |
  • Uso de lenguaje amable e inclusivo
    • 50 |
  • Respeto a diferentes puntos de vista y experiencias
    • 51 |
  • Aceptación de críticas constructivas
    • 52 |
  • Enfocarse en lo que es mejor para la comunidad
    • 53 |
  • Mostrar empatía a otros miembros de la comunidad
    • 54 |
  • 55 | Contribuir al debate con comentarios razonables e informados 56 |
    • 57 |
  • 58 | Obrar de manera justa y de buena fe en las interacciones con 59 | otros participantes/miembros de la comunidad 60 |
    • 61 |
62 |

Ejemplos de comportamiento inaceptable por participantes:

63 |
    64 |
  • 65 | Uso de lenguaje o imágenes sexuales y atención sexual no deseada 66 |
    • 67 |
  • 68 | Comentarios insultantes o despectivos (trolling) y ataques 69 | personales o político 70 |
    • 71 |
  • Acoso público o privado
    • 72 |
  • 73 | No ser respetuoso con los límites razonables de comunicación, 74 | como "déjame en paz", "vete" o "No estoy discutiendo/hablando 75 | esto contigo". 76 |
    • 77 |
  • 78 | Actos discriminatorio, incluyendo pero no limitado a 79 | discriminación por condición de género, tamaño corporal, origen 80 | étnico, nacionalidad, origen social, edad, estado civil, 81 | orientación sexual, ideología, opiniones políticas, religión, 82 | habilidad mental o física, u otras. 83 |
    • 84 |
  • 85 | Publicación de información privada de terceros sin su 86 | consentimiento, como direcciones físicas o electrónicas 87 |
    • 88 |
  • 89 | Otros tipos de conducta que pudieran considerarse inapropiadas 90 | en un entorno profesional. 91 |
    • 92 |
93 |
94 |
95 |

96 | Nuestras responsabilidades 97 |

98 |

99 | Los administradores del proyecto son responsables de clarificar 100 | los estándares de comportamiento aceptable y se espera que tomen 101 | medidas correctivas y apropiadas en respuesta a situaciones de 102 | conducta inaceptable. Los administradores del proyecto tienen el 103 | derecho y la responsabilidad de eliminar, editar o rechazar 104 | comentarios, commits, código, ediciones de documentación, issues, 105 | y otras contribuciones que no estén alineadas con este Código de 106 | Conducta, o de prohibir temporal o permanentemente a cualquier 107 | colaborador cuyo comportamiento sea inapropiado, amenazante, 108 | ofensivo o perjudicial. 109 |

110 |
111 |
112 |

113 | Alcance 114 |

115 |

116 | Este código de conducta aplica tanto a espacios del proyecto como 117 | a espacios públicos donde un individuo esté en representación del 118 | proyecto o comunidad. Ejemplos de esto incluye el uso de la cuenta 119 | oficial de correo electrónico, publicaciones a través de las redes 120 | sociales oficiales, o presentaciones con personas designadas en 121 | eventos online u offline. La representación del proyecto puede ser 122 | clarificada explicitamente por los administradores del proyecto. 123 |

124 |
125 |
126 |

127 | Aplicación 128 |

129 |

130 | Las conductas inaceptables listadas anteriormente no serán 131 | toleradas por parte de ningún miembro de la comunidad, 132 | independientemente de su función en la comunidad. Ejemplos de 133 | abuso, acoso u otro tipo de comportamiento inaceptable puede ser 134 | reportado al equipo del proyecto en 135 | javascriptecuador"arroba"gmail.com. Todas las quejas serán 136 | revisadas e investigadas, generando un resultado apropiado a las 137 | circunstancias. El equipo del proyecto está obligado a mantener 138 | confidencialidad de la persona que reportó el incidente. Detalles 139 | específicos acerca de las políticas de aplicación pueden ser 140 | publicadas por separado. Administradores que no sigan o que no 141 | hagan cumplir este Código de Conducta pueden ser eliminados de 142 | forma temporal o permanente del equipo administrador. 143 |

144 |
145 | 172 |
173 | 174 |
175 | ); 176 | }; 177 | 178 | export default codeConduct; 179 | -------------------------------------------------------------------------------- /src/pages/comunidad.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Layout from "../components/layout/layout"; 3 | import Maintainers from "../components/maintainers/maintainers"; 4 | import SEO from "../components/seo"; 5 | 6 | const ComunidadPage = () => ( 7 | 8 | 12 | {/* */} 13 | 14 | {/* */} 15 | 16 | ); 17 | 18 | export default ComunidadPage; 19 | -------------------------------------------------------------------------------- /src/pages/contact.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Layout from "../components/layout/layout"; 4 | import SEO from "../components/seo"; 5 | 6 | function ContactPage() { 7 | return ( 8 | 9 | 13 |
14 |
15 |

16 | Here is an example of a form built using the official Tailwind CSS 17 | Custom Forms plugin.{` `} 18 | 24 | Read the docs 25 | 26 | . 27 |

28 | 29 | 35 | 36 | 42 | 43 | 49 | 50 | 56 | 57 | 63 | 64 |