Adicionar palestrante

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 1. Fork este projeto - Clique em  `Fork`
 
-2. Crie uma nova branch para realizar suas alterações no repositório - Com o Git instalado execute o comanado abaixo no terminal. - [caso não tenha o Git, baixe aqui](https://git-scm.com/downloads) - 
+2. Crie uma nova branch para realizar suas alterações no repositório - Com o Git instalado, execute o comando abaixo no terminal. - [caso não tenha o Git, baixe aqui](https://git-scm.com/downloads) - 
     ```sh
     git checkout -b nome-da-branch
     ```
@@ -39,19 +39,19 @@
     }
     ```
 
-    ## Dicas para prenchimento do arquivo `mulheres.json`:
+    ## Dicas para preenchimento do arquivo `mulheres.json`:
 
     - **Como adicionar uma foto?**  
       Para adicionar uma photo ao seu card, crie uma conta e faça upload do seu avatar no Gravatar - [acesse o site através desse link](https://en.gravatar.com/) - ou use a sua conta já existente.
 
     - **Como preencher os campos de redes sociais?**  
-      Em *linkedin*, *github*, *twitter* e *fb*: usar apenas o username da url da rede social.
-      > Exemplo:  
-        https://www.facebook.com/foo.bar >> "foo.bar"  
-        https://br.linkedin.com/in/foob >> "foob"  
+      Em *linkedin*, *github*, *twitter* e *fb*, usar apenas o username da url da rede social.
+      > Exemplo:
+        https://www.facebook.com/foo.bar >> "foo.bar"
+        https://br.linkedin.com/in/foob >> "foob"
 
     - **Como preencher o campo "interests"?**  
-        Evite adicionar muitas tags nesse campo, dependendo da quantidade de caracteres cabem até 7 tags no card da página, mas o ideal seria usar *4* no *máximo*.
+        Evite adicionar muitas tags nesse campo. Dependendo da quantidade de caracteres cabem até 7 tags no card da página, mas o ideal seria usar *4* no *máximo*.
         ````JSON
           /* Exemplo */
           {
@@ -66,7 +66,7 @@
         ````
 
     - **Como preencher os campos que não tenho dados para adicionar?**  
-      Caso exista algum campo onde você não tenha um valor real para ser preenchido, o mesmo pode ser adicionado o valor `null`, veja o exemplo abaixo de uma palestrante que não possui conta no facebook e twitter:
+      Caso exista algum campo onde você não tenha um valor real para ser preenchido, ao mesmo pode ser adicionado o valor `null`. Veja o exemplo abaixo de uma palestrante que não possui conta no facebook e twitter:
       ```json
       {
         "twitter": null,
@@ -84,5 +84,5 @@
     git push origin nome-da-branch
     ```
 
-7. Envie um pull request para o repositório original, após seu pull request ser aceito seus dados estarão disponíveis no site 💜 
+7. Envie um pull request para o repositório original. Após seu pull request ser aceito, seus dados estarão disponíveis no site 💜 
 

README.md

@@ -1,46 +1,73 @@
-# Mulheres Palestrantes
+# Mulheres Palestrantes :woman: :speaker:
 
-http://insideoutproject.xyz/mulheres-palestrantes/
+<p align="center">
+  <img src="https://i.imgsafe.org/75/75fff68554.jpeg"/>
+</p>
 
-## TL;DR
-Listagem de mulheres disponíveis para palestrar em eventos de tecnologia, design, empreendedorismo, entre outros.
-Se você deseja contribuir melhorando o layout ou incluindo você ou outra mulher na lista, basta enviar um pull request :D
+Repositório responsável por listar mulheres disponíveis para realizar palestras em eventos sobre:
 
-## Versão longa
-Dado o ainda pequeno número de mulheres palestrando em eventos (especialmente de tecnologia) aqui no Brasil, uma planilha foi criada a fim de dar mais visibilidade a essas mulheres e incentivar outras a começar.
+* Tecnologia;
+* Web Design;
+* Programação;
+* Empreendorismo;
+* Entre outros temas relacionados a Tecnologia;
 
-Este projeto nasceu da tentativa de organizar os dados dessa planilha de forma mais visual, tornando-os de mais fácil acesso, reduzindo duplicidade e facilitando buscas.
+Querem saber quem são elas?! Bastam acessar o site: **http://insideoutproject.xyz/mulheres-palestrantes/**
 
-Ele foi utilizado no primeiro JS4Girls Rio 2015 para ensino de Git, HTML, CSS e Javascript.
+## Versão Longa: :raising_hand:
 
-Originalmente em http://github.com/darlenedms/mulheres-palestrantes
+Devido ao pequeno número de mulheres palestrando em eventos (em especial de tecnologia) aqui no Brasil, uma planilha foi criada a fim de dar mais visibilidade a essas mulheres e incentivar outras a começar a realizar palestras.
 
-## Como contribuir com o projeto?
-Se você deseja contribuir melhorando o layout ou incluindo você ou outra mulher na lista, basta enviar um pull request. :)
+Este projeto nasceu de uma tentativa de organizar os dados dessa planilha de forma mais visual, tornando-os de mais fácil acesso, reduzindo duplicidade e facilitando buscas.
 
-Para incluir mulheres na lista, basta adicionar uma entrada no arquivo mulheres.json. Os únicos campos obrigatórios são nome e email.
+Ele foi utilizado no primeiro **JS4Girls Rio 2015** para ensino de Git, HTML, CSS e Javascript.
 
-Existe uma explicação mais detalhada no arquivo [CONTRIBUTING.md](./CONTRIBUTING.md)
+Originalmente em **http://github.com/darlenedms/mulheres-palestrantes**
 
-Caso você encontre alguma dificuldade ou não tenha muito conhecimento em git, fique livre para abrir um issue pedindo a inclusão ou tirar dúvidas conosco sobre como fazer.
 
-## Ferramentas e materiais utilizados
+## Como Posso Contribuir com o Projeto?! :star2:
 
-### Gravatar
-https://en.gravatar.com/site/implement/images/
+Se você deseja contribuir melhorando o layout ou incluindo você ou outra mulher na lista, basta enviar um Pull Request. :)
 
-### Templates
-pure.js para template
-http://beebole.com/pure/
+Para incluir mulheres na lista, basta adicionar uma entrada no arquivo **mulheres.json**. Os únicos campos obrigatórios são:
 
-### jQuery para consumir o json
-http://api.jquery.com/jQuery.getJSON/
+* Nome
+* Email
 
-### Dados convertidos da planilha para json utilizando Mr Data Converter
-https://shancarter.github.io/mr-data-converter/
+Existe uma explicação mais detalhada no arquivo **[CONTRIBUTING.md](./CONTRIBUTING.md)**
 
-### URLs do Gravatar geradas seguindo os padrões definidos na documentação
-https://br.gravatar.com/site/implement/images/
+Caso você encontre alguma dificuldade ou não tenha muito conhecimento em git, fique livre para abrir um issue pedindo a inclusão ou tirar dúvidas conosco sobre como fazer. :heart_eyes:
+
+
+## Mas... não sei fazer Pull Request... O que faço?! :loudspeaker:
+
+Não tem problema! Bastam abrir uma Issue **[AQUI](https://github.com/darlenedms/mulheres-palestrantes/issues)** com as seguintes informações sua:
+
+* Nome
+* Interesses
+* Localização
+* Foto de Perfil
+* Linkedin
+* GitHub
+* Facebook
+* Twitter
+* Site
+
+Caso, não tenha algum item da lista, basta colocar: **Não Possuo**. Lembrando que, os únicos campos obrigatórios são: **Nome** e **E-mail**!
+
+E vòilá! Tão pronto, estaremos te incluindo no site! :heartpulse:
+
+## Ferramentas e Recursos Utilizados: :fire:
+
+* [Gravatar](https://en.gravatar.com/site/implement/images/)
+
+* [Templates](http://beebole.com/pure/)
+
+* [jQuery para consumir o json](http://api.jquery.com/jQuery.getJSON/)
+
+* [Dados convertidos da planilha para json utilizando Mr Data Converter](https://shancarter.github.io/mr-data-converter/)
+
+* [URLs do Gravatar geradas seguindo os padrões definidos na documentação](https://br.gravatar.com/site/implement/images/)
+
+* [Bootstrap como framework de css](http://getbootstrap.com/)
 
-### Bootstrap como framework de css
-http://getbootstrap.com/

css/style.css

@@ -5,7 +5,7 @@
     font-family: 'Open Sans', sans-serif;
 }
 
-/* Ckasse oara acessibilidade */
+/* Classe oara acessibilidade */
 .sr-only {
   position: absolute;
   width: 1px;
@@ -23,6 +23,7 @@ body {
 }
 
 header, footer {
+    animation: 3s power-bg infinite alternate;
     background-color: #cc0066;
     color: #fff;
 }
@@ -37,9 +38,31 @@ header h1 {
     text-shadow: 2px 2px #861028;
 }
 
+.logo-css u {
+    color: #fff;
+    text-decoration: none;
+    text-shadow: 2px 2px 10px 2px #edb515;
+}
+
+.logo-css i {
+    color: #edb515;
+}
+
+.logo-css,
+.logo-css u,
+.logo-css i {
+    font-family: 'Codystar', cursive;
+}
+
 .contribute {
     font-size: 0.9em;
-    color: #333;
+    color: #fff;
+    font-weight: 700;
+    text-decoration: none;
+    transition: .3s all;
+}
+.contribute i {
+    font-weight: normal;
 }
 
 .contribute:hover {
@@ -96,18 +119,39 @@ header h1 {
     width: 270px;
     height: 370px;
     vertical-align: top;
-    overflow: hidden;
     position: relative;
+    transition: .3s all;
 }
 
-.card h3 {
+.card:hover {
+    border-radius: 100px 100px .3rem .3rem;
+    animation: none !important;
+    background: #ffdfef;
     color: #cc0066;
-    overflow: hidden;
-    margin: 0.5rem 0;
 }
 
-.card img {
-    border-radius: 50%;
+.card:hover img {
+    transform: scale(1.3) translateY(-15px);
+    box-shadow: 0 0 20px 3px #edb515;
+}
+
+.card:nth-of-type(odd) {
+    animation: 2s power-scale-odd infinite alternate;
+}
+
+.card:nth-of-type(even) {
+    animation: 2s power-scale-even infinite alternate;
+}
+
+.card:hover ul.tags li {
+  background: #cc0066;
+  color: #fff;
+}
+
+.card h1 {
+    color: #cc0066;
+    overflow: hidden;
+    margin: 0.5rem 0;
 }
 
 .card .location {
@@ -117,6 +161,9 @@ header h1 {
 .card .photo {
     height: 80px;
     width: 80px;
+    border-radius: 50%;
+    transition: .5s all;
+    display: block;
 }
 
 footer {
@@ -135,7 +182,17 @@ footer img {
     bottom: 20px;
     width: 235px;
     background: #fff;
-    padding-top: 10px;
+    padding: 10px 0;
+}
+
+.after-tags::after {
+  background: #edb515;
+  content: '';
+  width: 100%;
+  height: 5px;
+  display: block;
+  position: absolute;
+  top: 0;
 }
 
 .social-media img {
@@ -158,17 +215,68 @@ ul.social-media li a {
     color: #333;
 }
 
+ul.social-media i {
+    transition: .3s all;
+}
+
+ul.social-media i:hover {
+    color: #cc0066;
+    transform: scale(1.2);
+}
+
+ul.social-media i.fa-twitter-square:hover {
+    color: #006dbf;
+    text-shadow: 0 1px #fff, 0 2px 10px #006dbf;
+}
+
+ul.social-media i.fa-linkedin-square:hover {
+    color: #0077b5;
+    text-shadow: 0 1px #fff, 0 2px 10px #0077b5;
+}
+
+ul.social-media i.fa-github-square:hover {
+    color: #732a82;
+    text-shadow: 0 1px #fff, 0 2px 10px #732a82;
+}
+
+ul.social-media i.fa-facebook-square:hover {
+    color: #3b5998;
+    text-shadow: 0 1px #fff, 0 2px 10px #3b5998;
+}
+
+ul.social-media i.fa-behance-square:hover {
+    color: #0057ff;
+    text-shadow: 0 1px #fff, 0 2px 10px #0057ff;
+}
+
 ul.social-media li.hidden {
     visibility: hidden;
     display: none;
 }
 
 ul.tags {
-    max-height: 160px;
+    max-height: 120px;
     list-style-type: none;
-    padding: 0;
+    padding: 0 0 10px;
     margin: 0.5rem;
-    overflow: hidden;
+    overflow-y: auto;
+    /*Estilo de scrollbar para Firefox*/
+    scrollbar-width: thin;
+    scrollbar-color: #cc0066 #fff; 
+}
+
+ul.tags::-webkit-scrollbar {
+  width: 5px;
+}
+ul.tags::-webkit-scrollbar-track {
+  background: #EBDCE1;
+  border-left: 0 solid #fff;
+  border-right: 5px solid #fff;
+}
+ul.tags::-webkit-scrollbar-thumb {
+  background: #cc0066;
+  border-left: 0 solid #fff;
+  border-right: 5px solid transparent;
 }
 
 ul.tags li {
@@ -179,6 +287,7 @@ ul.tags li {
     padding: 0.2rem 0.5rem;
     margin: 0.2rem;
     font-size: 0.8rem;
+    transition: .3s all;
 }
 
 .cidade {
@@ -217,3 +326,30 @@ ul.tags li {
         margin-bottom: 0.5rem;
     }
 }
+
+@keyframes power-bg {
+  0% {
+    filter: brightness(1);
+  }
+  100% {
+    filter: brightness(3);
+  }
+}
+
+@keyframes power-scale-odd {
+  0% {
+    transform: scale(1)
+  }
+  100% {
+    transform: scale(1.05)
+  }
+}
+
+@keyframes power-scale-even {
+  0% {
+    transform: scale(1.05)
+  }
+  100% {
+    transform: scale(1)
+  }
+}