├── .netlify └── state.json ├── src ├── components │ ├── atoms │ │ ├── ModuloNome │ │ │ ├── styles.css │ │ │ └── index.js │ │ ├── ModuloNumero │ │ │ ├── styles.css │ │ │ └── index.js │ │ ├── TituloSecao │ │ │ ├── styles.css │ │ │ └── index.js │ │ ├── Botao │ │ │ ├── index.js │ │ │ └── styles.css │ │ └── Artigo │ │ │ ├── index.js │ │ │ └── styles.css │ ├── molecules │ │ └── Modulo │ │ │ ├── index.js │ │ │ └── styles.css │ └── organisms │ │ ├── SobreSecao │ │ ├── styles.css │ │ └── index.js │ │ ├── Header │ │ ├── index.js │ │ └── styles.css │ │ ├── ModulosSecao │ │ ├── styles.css │ │ └── index.js │ │ └── ColaboreSecao │ │ ├── styles.css │ │ └── index.js ├── assets │ ├── arrow.png │ ├── loop.png │ ├── mail.png │ ├── calma-img.png │ ├── logo_github.png │ ├── logo_twitter.png │ ├── imagem_compart.png │ └── logo.svg ├── services │ ├── api.js │ └── Repositorios.js ├── App.js ├── index.js ├── App.test.js ├── Pages │ └── Home │ │ └── index.js ├── styles.css └── GeneralTemplate │ ├── index.js │ └── styles.css ├── banner-github.PNG ├── public ├── robots.txt ├── favicon.ico ├── imagem192.png ├── imagem512.png ├── imagem_compart.png ├── manifest.json └── index.html ├── .gitignore ├── package.json ├── LICENSE ├── README.md └── db.json /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "62c6979c-8242-463e-bec1-ae2a59f29f88" 3 | } -------------------------------------------------------------------------------- /src/components/atoms/ModuloNome/styles.css: -------------------------------------------------------------------------------- 1 | h3 { 2 | margin: 20px 0 10px; 3 | } -------------------------------------------------------------------------------- /banner-github.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/banner-github.PNG -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/atoms/ModuloNumero/styles.css: -------------------------------------------------------------------------------- 1 | h4 { 2 | font-size: 16px; 3 | margin: 0; 4 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/imagem192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/public/imagem192.png -------------------------------------------------------------------------------- /public/imagem512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/public/imagem512.png -------------------------------------------------------------------------------- /src/assets/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/src/assets/arrow.png -------------------------------------------------------------------------------- /src/assets/loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/src/assets/loop.png -------------------------------------------------------------------------------- /src/assets/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/src/assets/mail.png -------------------------------------------------------------------------------- /public/imagem_compart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/public/imagem_compart.png -------------------------------------------------------------------------------- /src/assets/calma-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/src/assets/calma-img.png -------------------------------------------------------------------------------- /src/assets/logo_github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/src/assets/logo_github.png -------------------------------------------------------------------------------- /src/assets/logo_twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/src/assets/logo_twitter.png -------------------------------------------------------------------------------- /src/assets/imagem_compart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lorena-rabelo/calma-senhora/HEAD/src/assets/imagem_compart.png -------------------------------------------------------------------------------- /src/services/api.js: -------------------------------------------------------------------------------- 1 | 2 | import axios from 'axios' 3 | 4 | const api = axios.create({ baseURL: 'https://my-json-server.typicode.com/lorena-rabelo/calma-senhora/'}) 5 | 6 | 7 | export default api; -------------------------------------------------------------------------------- /src/services/Repositorios.js: -------------------------------------------------------------------------------- 1 | 2 | import axios from 'axios' 3 | 4 | const Repositorios = axios.create({ baseURL: 'https://my-json-server.typicode.com/lorena-rabelo/repositorios' }) 5 | 6 | export default Repositorios -------------------------------------------------------------------------------- /src/components/atoms/ModuloNome/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './styles.css' 3 | 4 | 5 | const ModuloNome = ({nomeModulo}) => { 6 | return ( 7 |

{nomeModulo}

8 | ) 9 | } 10 | 11 | export default ModuloNome -------------------------------------------------------------------------------- /src/components/atoms/TituloSecao/styles.css: -------------------------------------------------------------------------------- 1 | h2 { 2 | font-size: 36px; 3 | padding: 80px 0 40px 0; 4 | } 5 | 6 | @media screen and (max-width: 375px) { 7 | .tituloSecao { 8 | max-width: 300px; 9 | margin: 0 auto; 10 | } 11 | } -------------------------------------------------------------------------------- /src/components/atoms/ModuloNumero/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './styles.css' 3 | 4 | 5 | const ModuloNumero = ({numero}) => { 6 | return ( 7 |

MÓDULO {numero}

8 | ) 9 | } 10 | 11 | export default ModuloNumero -------------------------------------------------------------------------------- /src/components/atoms/TituloSecao/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './styles.css' 3 | 4 | const TituloSecao = ({ texto }) => { 5 | return ( 6 |

{texto}

7 | ) 8 | } 9 | 10 | export default TituloSecao -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Home from "../src/Pages/Home"; 3 | import "./styles.css"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | -------------------------------------------------------------------------------- /src/components/atoms/Botao/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from "react-scroll"; 3 | import './styles.css' 4 | 5 | const Botao = ({ texto }) => { 6 | return ( 7 | {texto} 8 | ) 9 | } 10 | export default Botao -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/molecules/Modulo/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./styles.css"; 3 | import ModuloNome from "../../atoms/ModuloNome"; 4 | import ModuloNumero from "../../atoms/ModuloNumero"; 5 | 6 | const Modulo = ({ numero, nomeModulo, onClick, id, className }) => { 7 | return ( 8 |
9 | 10 | 11 |
12 | ); 13 | }; 14 | 15 | export default Modulo; 16 | -------------------------------------------------------------------------------- /src/components/atoms/Artigo/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './styles.css' 3 | 4 | const Artigo = ({ sobreLink, link, tag }) => { 5 | return ( 6 |
7 | 8 |
9 |

{tag}

10 |
11 |
12 |

{sobreLink}

13 |
14 | 15 |
16 | ) 17 | } 18 | 19 | 20 | export default Artigo -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "imagem192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "imagem512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/molecules/Modulo/styles.css: -------------------------------------------------------------------------------- 1 | .modulo__container { 2 | max-width: 730px; 3 | border: 2px solid #000; 4 | margin: 20px auto; 5 | transition: color 0.4s; 6 | transition: background-color 0.4s; 7 | text-align: initial; 8 | padding: 20px; 9 | } 10 | 11 | .modulo__container:hover { 12 | cursor: pointer; 13 | color: #fff; 14 | background-color: #000; 15 | transition: background-color 0.4s; 16 | } 17 | 18 | .modulo__container.active { 19 | cursor: pointer; 20 | color: #fff; 21 | background-color: #000; 22 | } 23 | 24 | .ativo { 25 | color: #fff; 26 | background-color: #000; 27 | } 28 | -------------------------------------------------------------------------------- /src/Pages/Home/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import GeneralTemplate from '../../GeneralTemplate' 3 | import SobreSecao from '../../components/organisms/SobreSecao' 4 | import ModulosSecao from '../../components/organisms/ModulosSecao' 5 | import Header from '../../components/organisms/Header' 6 | import ColaboreSecao from '../../../src/components/organisms/ColaboreSecao' 7 | 8 | const Home = () => { 9 | return ( 10 | 11 |
12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export default Home; -------------------------------------------------------------------------------- /src/components/organisms/SobreSecao/styles.css: -------------------------------------------------------------------------------- 1 | .sobreSecao__container { 2 | max-width: 920px; 3 | margin: 0 auto; 4 | } 5 | 6 | .sobreSecao { 7 | padding: 80px 0; 8 | background-color: #EEEFF4; 9 | } 10 | 11 | .sobre-link { 12 | color: #7e459b; 13 | cursor: pointer; 14 | z-index: 10000; 15 | margin: 0; 16 | font-weight: bold; 17 | } 18 | 19 | .sobre-link:hover { 20 | text-decoration: underline; 21 | } 22 | 23 | .sobreSecao__container h2 { 24 | text-align: center; 25 | margin-bottom: 30px; 26 | } 27 | 28 | @media screen and (max-width: 1024px) { 29 | .sobreSecao__container { 30 | max-width: 80%; 31 | } 32 | } 33 | 34 | @media screen and (max-width: 425px) { 35 | .sobreSecao__container { 36 | max-width: 85%; 37 | } 38 | } -------------------------------------------------------------------------------- /src/components/organisms/Header/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './styles.css' 3 | import illustration from '../../../assets/calma-img.png' 4 | import Botao from '../../atoms/Botao' 5 | 6 | const Header = () => { 7 | return ( 8 | <> 9 |
10 |
11 |

Calma, senhora

12 |

Ajudando novas pessoas desenvolvedoras com um roteiro de estudo baseado em um bootcamp estruturado

13 | 14 |
15 |
16 | ilustraçao de uma mulher com megafone em direção ao título do projeto 17 |
18 |
19 | 20 | ) 21 | } 22 | 23 | export default Header -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | body, h1, h2, p, ul, li, a { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | h1 { 8 | font-size: 64px; 9 | } 10 | 11 | h2 { 12 | font-size: 36px; 13 | /* padding: 80px 0 40px 0; */ 14 | } 15 | 16 | h3 { 17 | font-size: 22px; 18 | } 19 | 20 | p { 21 | font-size: 18px; 22 | line-height: 32px; 23 | } 24 | 25 | * { 26 | box-sizing: border-box; 27 | } 28 | 29 | ul { 30 | list-style: none; 31 | } 32 | 33 | a { 34 | color: inherit; 35 | text-decoration: none; 36 | } 37 | 38 | html { 39 | scroll-behavior: smooth; 40 | } 41 | 42 | body { 43 | font-family: 'Montserrat', Arial, Helvetica, sans-serif; 44 | font-size: 10px; 45 | /* background-color: #EEEFF4; */ 46 | background-color: #bd7bb3; 47 | } -------------------------------------------------------------------------------- /src/components/atoms/Artigo/styles.css: -------------------------------------------------------------------------------- 1 | .artigo { 2 | margin: 15px auto 50px; 3 | } 4 | 5 | .artigo__container { 6 | width: 230px; 7 | height: 150px; 8 | background-color: #eee8de; 9 | padding: 15px; 10 | display: flex; 11 | justify-content: center; 12 | } 13 | 14 | .artigo__container:hover { 15 | background-color: transparent; 16 | border: 2px solid black; 17 | transition: background-color 0.2s; 18 | } 19 | 20 | .artigo__tag { 21 | background-color: #ff7676; 22 | width: 120px; 23 | height: 40px; 24 | position: absolute; 25 | margin-top: -25px; 26 | margin-left: 15px; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | transform: rotate(-1deg); 31 | } 32 | 33 | .artigo__tag h3 { 34 | font-size: 18px; 35 | padding-bottom: 10px; 36 | } 37 | 38 | .artigo__texto { 39 | line-height: 28px; 40 | font-size: 16px; 41 | align-self: center; 42 | } 43 | 44 | .artigo__texto:hover { 45 | text-decoration: underline; 46 | } 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calma-senhora", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-axios": "^2.0.3", 11 | "react-dom": "^16.13.1", 12 | "react-router-dom": "^5.2.0", 13 | "react-router-hash-link": "^2.0.0", 14 | "react-scripts": "3.4.1", 15 | "react-scroll": "^1.8.0" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": "react-app" 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/organisms/ModulosSecao/styles.css: -------------------------------------------------------------------------------- 1 | .modulos__secao { 2 | text-align: center; 3 | background-color: #ffc864; 4 | padding: 80px 0; 5 | } 6 | 7 | .modulos__secao--container { 8 | text-align: center; 9 | margin: 60px auto 0 auto; 10 | } 11 | .reposReprograma { 12 | display: flex; 13 | align-content: center; 14 | max-width: 730px; 15 | margin: 0 auto; 16 | } 17 | .reposReprograma--lista { 18 | display: flex; 19 | align-content: center; 20 | flex-wrap: wrap; 21 | line-height: 25px; 22 | } 23 | 24 | .reposReprograma--links { 25 | align-self: center; 26 | margin: 0 15px; 27 | color: #7e459b; 28 | word-wrap: unset; 29 | flex-shrink: 0; 30 | } 31 | .reposReprograma--links:hover { 32 | cursor: pointer; 33 | color: #48255a; 34 | } 35 | 36 | @media screen and (max-width: 768px) { 37 | .modulos__secao--container { 38 | max-width: 80%; 39 | } 40 | } 41 | 42 | .artigos__secao { 43 | max-width: 730px; 44 | display: flex; 45 | margin: 60px auto 0 auto; 46 | justify-content: space-between; 47 | flex-wrap: wrap; 48 | } 49 | -------------------------------------------------------------------------------- /src/components/atoms/Botao/styles.css: -------------------------------------------------------------------------------- 1 | .botao { 2 | border: 3px solid black; 3 | padding: 12px 20px; 4 | position: relative; 5 | background-color: transparent; 6 | z-index: 2; 7 | font-size: 18px; 8 | font-weight: bold; 9 | letter-spacing: 3px; 10 | top:40px 11 | } 12 | 13 | .botao:hover { 14 | cursor: pointer; 15 | } 16 | 17 | .botao:after { 18 | position: absolute; 19 | top: 10px; 20 | left: 10px; 21 | height: 100%; 22 | width: 100%; 23 | background-color: #fbc96e; 24 | content: ""; 25 | z-index: -1; 26 | -webkit-transition: width 0.1s ease-out 0.1s, -webkit-transform 0.1s ease-in; 27 | transition: width 0.1s ease-out 0.1s, -webkit-transform 0.1s ease-in; 28 | transition: transform 0.1s ease-in, width 0.1s ease-out 0.1s; 29 | transition: transform 0.1s ease-in, width 0.1s ease-out 0.1s, -webkit-transform 0.1s ease-in; 30 | } 31 | .botao:hover:after { 32 | -webkit-transform: translate(-10px, -10px); 33 | transform: translate(-10px, -10px); 34 | width: calc(100% - 10px); 35 | } 36 | .botao:active:after { 37 | width: 100%; 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Lorena Rabelo 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 | -------------------------------------------------------------------------------- /src/components/organisms/SobreSecao/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TituloSecao from "../../atoms/TituloSecao"; 3 | import "./styles.css"; 4 | 5 | const SobreSecao = () => { 6 | return ( 7 |
8 |
9 | 10 |

11 | Conseguir uma vaga em cursos gratuitos de programação está cada vez 12 | mais difícil. A grande busca por pessoas programadoras pelas empresas 13 | somando com salários iniciais atrativos, levou ao aumento da procura 14 | por 15 | 16 | bootcamps gratuitos 17 | 18 | . 19 |

20 |

21 | Esse projeto consiste em uma plataforma com materiais de estudo, 22 | seguindo o roteiro da trilha de front-end da 23 | 24 | Reprograma 25 | 26 | , para que alunas do curso consigam um material de apoio direto, 27 | através de vídeos e artigos, e também pessoas que não tenham passado 28 | no processo seletivo (ou não poderiam fazê-lo) tenham acesso ao 29 | conteúdo, priorizando textos e vídeos em português. 30 |

31 |
32 |
33 | ); 34 | }; 35 | 36 | export default SobreSecao; 37 | -------------------------------------------------------------------------------- /src/components/organisms/ColaboreSecao/styles.css: -------------------------------------------------------------------------------- 1 | .ColaboreSecao { 2 | color: #fff; 3 | background-color: #000; 4 | padding: 80px 0; 5 | } 6 | 7 | .ColaboreSecao h2 { 8 | margin: 10px 0; 9 | } 10 | 11 | .colabore__container { 12 | max-width: 80%; 13 | margin: 0 auto; 14 | display: flex; 15 | justify-content: space-between; 16 | } 17 | 18 | .colabore--loop { 19 | margin: -62px 172px 0; 20 | } 21 | 22 | .colabores--icones { 23 | max-width: 60px; 24 | margin: 60px 20px 0; 25 | } 26 | 27 | .github { 28 | margin: 60px 15px 0; 29 | } 30 | 31 | .colabores--icones:hover { 32 | margin-top: 55px; 33 | } 34 | 35 | .colabore__container--arrow-redes { 36 | display: flex; 37 | justify-content: flex-end; 38 | margin-top: 100px; 39 | } 40 | 41 | @media screen and (max-width: 970px) { 42 | .colabore__container--arrow-redes { 43 | margin-left: -100px; 44 | } 45 | } 46 | 47 | @media screen and (max-width: 768px) { 48 | .colabore__container { 49 | flex-direction: column; 50 | text-align: center; 51 | } 52 | .colabore__container--arrow-redes { 53 | display: flex; 54 | justify-content: center; 55 | margin-top: 0px; 56 | margin-left: 0; 57 | } 58 | .colabore--loop { 59 | display: none; 60 | } 61 | .colabore__container--arrow-redes a { 62 | margin: 0 10px; 63 | } 64 | } 65 | 66 | @media screen and (max-width: 425px) { 67 | .colabore__container h2 { 68 | font-size: 32px; 69 | } 70 | .colabores--icones { 71 | max-width: 40px; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/components/organisms/ColaboreSecao/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./styles.css"; 3 | import Loop from "../../../assets/loop.png"; 4 | import Twitter from "../../../assets/logo_twitter.png"; 5 | import Github from "../../../assets/logo_github.png"; 6 | import Mail from "../../../assets/mail.png"; 7 | 8 | const ColaboreSecao = () => { 9 | return ( 10 |
11 |
12 |
13 |

Quer acrescentar algum conteúdo?

14 |

Entre em contato

15 | seta indicando os links de contato 19 |
20 |
21 | 47 |
48 |
49 |
50 | ); 51 | }; 52 | 53 | export default ColaboreSecao; 54 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 20 | 22 | 23 | 24 | 28 | 29 | 30 | Calma, senhora 31 | 32 | 33 | 34 | 35 |
36 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/GeneralTemplate/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Link } from "react-scroll"; 3 | import "./styles.css"; 4 | import logo from "../assets/logo.svg"; 5 | 6 | class GeneralTemplate extends Component { 7 | constructor() { 8 | super(); 9 | this.state = { 10 | menuVisivel: false, 11 | }; 12 | } 13 | 14 | toggleActive = () => { 15 | this.setState({ menuVisivel: !this.state.menuVisivel }); 16 | }; 17 | 18 | render() { 19 | const { children } = this.props; 20 | const { menuVisivel } = this.state; 21 | return ( 22 |
23 | 54 | {children} 55 | 67 |
68 | ); 69 | } 70 | } 71 | 72 | export default GeneralTemplate; 73 | -------------------------------------------------------------------------------- /src/components/organisms/Header/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Krona+One&display=swap"); 2 | .header { 3 | background-color: #bd7bb3; 4 | height: 90vh; 5 | display: flex; 6 | } 7 | 8 | .header__ilustration { 9 | overflow: hidden; 10 | position: absolute; 11 | z-index: 100; 12 | max-height: 120vh; 13 | margin-left: -18vw; 14 | top: 20px; 15 | animation: move 5s linear 2; 16 | } 17 | 18 | @keyframes move { 19 | 0%, 20 | 100% { 21 | transform: translateY(30); 22 | } 23 | 50% { 24 | transform: translateY(30px); 25 | } 26 | } 27 | 28 | .header__text { 29 | position: absolute; 30 | max-width: 400px; 31 | margin-left: 50vw; 32 | margin-top: calc((90vh - 330px) / 2); 33 | } 34 | 35 | h1 { 36 | font-family: "Krona One", sans-serif; 37 | } 38 | 39 | @media screen and (max-width: 1280px) { 40 | .header__ilustration { 41 | margin-left: -28vw; 42 | } 43 | } 44 | 45 | @media screen and (max-width: 1024px) { 46 | .header__ilustration { 47 | max-height: 1000px; 48 | margin-left: -45vw; 49 | margin-top: -200px; 50 | transform: rotate(20deg); 51 | } 52 | .header__text h1 { 53 | font-size: 48px; 54 | } 55 | .nav__container ul { 56 | align-self: center; 57 | } 58 | .header__ilustration { 59 | animation: none; 60 | } 61 | } 62 | 63 | @media screen and (max-width: 768px) { 64 | h1 { 65 | font-size: 48px; 66 | } 67 | .header__text { 68 | text-align: center; 69 | max-width: 400px; 70 | margin-top: calc((90vh - 311px) / 2); 71 | justify-content: center; 72 | justify-self: center; 73 | margin: calc((90vh - 330px) / 2) auto; 74 | } 75 | .header { 76 | justify-content: center; 77 | } 78 | .header__ilustration { 79 | display: none; 80 | } 81 | } 82 | 83 | @media screen and (max-width: 480px) { 84 | .header { 85 | text-align: center; 86 | } 87 | .header__text { 88 | position: relative; 89 | margin: 0 auto; 90 | text-align: center; 91 | max-width: 80%; 92 | margin: calc((90vh - 330px) / 2) auto; 93 | } 94 | .header__text h1 { 95 | font-size: 36px; 96 | } 97 | .header__text p { 98 | margin-top: 20px; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /src/GeneralTemplate/styles.css: -------------------------------------------------------------------------------- 1 | .nav__container { 2 | display: flex; 3 | max-width: 80%; 4 | margin: 0 auto; 5 | justify-content: space-between; 6 | align-content: center; 7 | } 8 | 9 | nav { 10 | background-color: #bd7bb3; 11 | padding-top: 30px; 12 | } 13 | 14 | ul { 15 | display: flex; 16 | color: #fff; 17 | } 18 | 19 | .link { 20 | color: #fff; 21 | font-size: 16px; 22 | font-weight: bold; 23 | cursor: pointer; 24 | margin-right: 30px; 25 | } 26 | 27 | .link:hover { 28 | color: #744a6d; 29 | } 30 | 31 | .footer p { 32 | font-size: 12px; 33 | padding: 10px; 34 | } 35 | 36 | .footer a { 37 | font-size: 12px; 38 | } 39 | .footer a:hover { 40 | color: #744a6d; 41 | } 42 | 43 | footer { 44 | text-align: center; 45 | background-color: #eeeff4; 46 | } 47 | 48 | @media screen and (max-width: 1024px) { 49 | .nav__container ul { 50 | order: -1; 51 | margin-left: 15vw; 52 | } 53 | } 54 | 55 | @media screen and (max-width: 768px) { 56 | .header__ilustration { 57 | max-height: 700px; 58 | margin-left: -400px; 59 | margin-top: -200px; 60 | transform: rotate(35deg); 61 | } 62 | .header__text { 63 | max-width: 300px; 64 | margin-top: calc((90vh - 230px) / 2); 65 | } 66 | .menu-hamburguer { 67 | display: block; 68 | color: #fff; 69 | width: 36px; 70 | height: 36px; 71 | border-top: 4px solid; 72 | margin: 15px 0px 8px 5%; 73 | float: left; 74 | position: absolute; 75 | cursor: pointer; 76 | -webkit-backface-visibility: hidden; 77 | z-index: 2; 78 | order: -1; 79 | } 80 | .menu-hamburguer::after, 81 | .menu-hamburguer::before { 82 | content: ""; 83 | display: block; 84 | height: 4px; 85 | margin-top: 6px; 86 | background: currentColor; 87 | position: relative; 88 | transition: transform 0.2s ease; 89 | } 90 | .menu-hamburguer.active { 91 | border-top-color: transparent; 92 | z-index: 200; 93 | position: absolute; 94 | } 95 | .menu-hamburguer.active::after { 96 | color: rgb(245, 245, 245); 97 | margin-top: 0px; 98 | top: 2px; 99 | transform: rotate(45deg); 100 | } 101 | .menu-hamburguer.active::before { 102 | color: rgb(245, 245, 245); 103 | margin-top: 0px; 104 | top: 6px; 105 | transform: rotate(135deg); 106 | } 107 | .nav.active { 108 | background-color: #85527d; 109 | } 110 | .nav__links { 111 | display: none; 112 | } 113 | .nav__container.active { 114 | padding: 20px 0; 115 | } 116 | .nav__links.active { 117 | display: block; 118 | flex-direction: column; 119 | margin: 60px auto; 120 | } 121 | .nav__links.active a { 122 | font-size: 22px; 123 | } 124 | .nav__links.active li { 125 | margin: 20px auto; 126 | } 127 | .logo { 128 | margin-left: auto; 129 | } 130 | .logo.active { 131 | display: none; 132 | } 133 | } 134 | 135 | @media screen and (max-width: 425px) { 136 | .nav__container { 137 | max-width: 90%; 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /src/components/organisms/ModulosSecao/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Modulo from "../../molecules/Modulo"; 3 | import TituloSecao from "../../atoms/TituloSecao"; 4 | import "./styles.css"; 5 | import Artigo from "../../atoms/Artigo"; 6 | import api from "../../../services/api"; 7 | import Repositorios from "../../../services/Repositorios"; 8 | 9 | class ModulosSecao extends Component { 10 | constructor() { 11 | super(); 12 | this.state = { 13 | modulos: [], 14 | materias: [], 15 | links: [], 16 | display: false, 17 | identificacao: "", 18 | github: [], 19 | repositorios: [], 20 | }; 21 | } 22 | 23 | componentDidMount() { 24 | this.carregaModulos(); 25 | this.carregaRepositorios(); 26 | } 27 | 28 | carregaModulos = async () => { 29 | const response = await api.get(`/modulos`); 30 | this.setState({ modulos: response.data }); 31 | }; 32 | 33 | carregaRepositorios = async () => { 34 | const resposta = await Repositorios.get(`/modulos`); 35 | this.setState({ github: resposta.data }); 36 | }; 37 | 38 | onClick = (materias, id) => { 39 | this.setState({ materias: materias }); 40 | this.obterMaterias(); 41 | this.obterRepositorios(id); 42 | this.setState({ display: !this.state.display, identificacao: id }); 43 | }; 44 | 45 | obterMaterias = () => { 46 | const { materias } = this.state; 47 | let content = [], 48 | teste; 49 | materias.forEach((item) => { 50 | teste = item.artigos; 51 | teste.forEach((item) => content.push(item)); 52 | this.setState({ links: content }); 53 | }); 54 | }; 55 | 56 | obterRepositorios = (id) => { 57 | const { github } = this.state; 58 | github.forEach((item) => { 59 | item.numero === id && this.setState({ repositorios: item.repositorios }); 60 | }); 61 | }; 62 | 63 | render() { 64 | const { modulos, links, display, identificacao, repositorios } = this.state; 65 | 66 | let post = ( 67 |
68 | {links.map((item) => ( 69 | 70 | ))} 71 |
72 | ); 73 | 74 | let reposReprograma = ( 75 |
76 |

Repositórios:

77 |
78 | {repositorios.map((item) => ( 79 |

80 | {item.texto} 81 |

82 | ))} 83 |
84 |
85 | ); 86 | 87 | return ( 88 |
89 | 90 |
91 | {modulos.map(({ id, numero, nome, materias }) => ( 92 | <> 93 | this.onClick(materias, id)} 101 | /> 102 | {display && identificacao === id && reposReprograma} 103 | {display && identificacao === id && post} 104 | 105 | ))} 106 |
107 |
108 | ); 109 | } 110 | } 111 | 112 | export default ModulosSecao; 113 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![Node Version](https://img.shields.io/badge/node-v14.4.0-green) 4 | ![NPM Version](https://img.shields.io/badge/npm-6.14.6-green) 5 | ![React Version](https://img.shields.io/badge/react-%5E16.13.1-blueviolet) 6 | ![React-router-dom](https://img.shields.io/badge/react--router--dom-%5E5.2.0-blueviolet) 7 |

8 | 🚧 Calma, senhora 🚀 Em constante construção... 🚧 9 |

10 |

11 | Sobre • 12 | Layout • 13 | Como executar • 14 | Tecnologia • 15 | Como contibruir • 16 |

17 | 18 | 19 | ## 💻 Sobre 20 | O projeto consiste em uma plataforma com materiais de estudo, seguindo o roteiro da trilha de front-end da Reprograma, para que alunas do curso consigam um material de apoio direto, através de vídeos e artigos, e também pessoas que não tenham passado no processo seletivo (ou não poderiam fazê-lo) tenham acesso ao conteúdo, priorizando textos e vídeos em português. 21 | 22 | --- 23 | 24 | ## 🚀 Como executar o projeto 25 | 26 | ```bash 27 | # Clone este repositório 28 | $ git clone https://github.com/lorena-rabelo/calma-senhora.git 29 | 30 | # Acesse a pasta do projeto no terminal/cmd 31 | $ cd calma-senhora 32 | 33 | # Instale as dependências 34 | $ npm install 35 | 36 | # Execute a aplicação em modo de desenvolvimento 37 | $ npm run start 38 | 39 | # A aplicação será aberta na porta:3000 - acesse http://localhost:3000 40 | ``` 41 | 42 | 43 | ## 🛠 Tecnologia 44 | 45 | - [React](https://pt-br.reactjs.org/) 46 | 47 | --- 48 | 49 | ## 👩‍💻 Contribuidores 50 | 51 | 52 | 53 | 54 | 57 | 58 | 64 |
foto do perfil Natalia Luiza
Natalia Luiza
👨‍🚀
65 | 66 | 67 | ## 🤝 Como contribuir 68 | 69 | 1. Faça um **fork** do projeto. 70 | 2. Crie uma nova branch para as suas alterações: `git checkout -b add-links-seu-nome` 71 | 3. Para adicionar links na trilha de front-end, edite o arquivo db.json, seguindo a organização e estrutura do arquivo. 72 | 4. Salve as alterações e crie uma mensagem de commit contando o que você fez: `git commit -m "links: nome do modulo"` 73 | 4. Envie as suas alterações: `git push origin add-links-seu-nome` 74 | > Caso tenha alguma dúvida confira este [guia de como contribuir no GitHub](https://github.com/firstcontributions/first-contributions) 75 | 76 | --- 77 | 78 | 79 | ## 📝 Licença 80 | 81 | Este projeto está sob a licença [MIT](./LICENSE). 82 | 83 | Feito por Lorena Rabelo 👋🏽 [Entre em contato!](https://www.linkedin.com/in/olalorenarabelo/) 84 | 85 | -------------------------------------------------------------------------------- /db.json: -------------------------------------------------------------------------------- 1 | { 2 | "modulos": [ 3 | { 4 | "id": 1, 5 | "numero": "I", 6 | "nome": "Introdução ao UX | HTML e CSS | GitHub | Web Design Responsivo", 7 | "materias": [ 8 | { 9 | "name": "ux", 10 | "artigos": [ 11 | { 12 | "tag": "UX", 13 | "texto": "Os diferentes tipos e funções dos Protótipos", 14 | "link": "https://brasil.uxdesign.cc/os-diferentes-tipos-e-fun%C3%A7%C3%B5es-dos-prot%C3%B3tipos-54981e35b5a4" 15 | }, 16 | { 17 | "tag": "UX", 18 | "texto": "Um jogo para entender a importância do UX", 19 | "link": "https://userinyerface.com/" 20 | }, 21 | { 22 | "tag": "UX", 23 | "texto": "Apostila | UX e Usabilidade aplicados em mobile e web | Caelum", 24 | "link": "https://www.caelum.com.br/apostila-ux-usabilidade-mobile-web/" 25 | } 26 | ] 27 | }, 28 | { 29 | "name": "html", 30 | "artigos": [ 31 | { 32 | "tag": "HTML", 33 | "texto": "Uma introdução amigável ao desenvolvimento web", 34 | "link": "https://www.internetingishard.com/html-and-css/introduction/" 35 | }, 36 | { 37 | "tag": "HTML", 38 | "texto": "Estruturas básicas da web", 39 | "link": "https://www.internetingishard.com/html-and-css/basic-web-pages/" 40 | }, 41 | { 42 | "tag": "HTML", 43 | "texto": "Apostila | HTML, CSS e JS | Caelum", 44 | "link": "https://www.caelum.com.br/apostila-html-css-javascript/" 45 | } 46 | ] 47 | }, 48 | { 49 | "name": "css", 50 | "artigos": [ 51 | { 52 | "tag": "CSS", 53 | "texto": "6 Dicas de CSS para iniciantes", 54 | "link": "https://medium.com/reprogramabr/6-dicas-de-css-para-iniciantes-5be0c18586f4" 55 | }, 56 | { 57 | "tag": "CSS", 58 | "texto": "Guia do Flexbox | Origamid", 59 | "link": "https://origamid.com/projetos/flexbox-guia-completo/" 60 | }, 61 | { 62 | "tag": "CSS", 63 | "texto": "Um jogo para aprender seletores CSS (em inglês)", 64 | "link": "http://flukeout.github.io/#" 65 | }, 66 | { 67 | "tag": "CSS", 68 | "texto": "Usando Media Queries", 69 | "link": "https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries" 70 | } 71 | ] 72 | }, 73 | { 74 | "name": "git|github", 75 | "artigos": [ 76 | { 77 | "tag": "GIT", 78 | "texto": "Aprenda conceitos de git, não comandos", 79 | "link": "https://dev.to/paulogoncalvesbh/aprenda-conceitos-de-git-nao-comandos-4il3" 80 | }, 81 | { 82 | "tag": "GITHUB", 83 | "texto": "Como fazer um bom README", 84 | "link": "https://blog.rocketseat.com.br/como-fazer-um-bom-readme/" 85 | } 86 | ] 87 | } 88 | ] 89 | }, 90 | { 91 | "id": 2, 92 | "numero": "II", 93 | "nome": "Lógica de Programação | Javascript", 94 | "materias": [ 95 | { 96 | "name": "logica", 97 | "artigos": [ 98 | { 99 | "tag": "LÓGICA", 100 | "texto": "Como elaborar uma boa lógica de programação", 101 | "link": "https://medium.com/reprogramabr/como-elaborar-uma-boa-l%C3%B3gica-de-programa%C3%A7%C3%A3o-632cd4f16dd3" 102 | }, 103 | { 104 | "tag": "LÓGICA", 105 | "texto": "Um jogo que testa os principais conceitos por trás dos códigos", 106 | "link": "http://silentteacher.toxicode.fr/" 107 | } 108 | ] 109 | }, 110 | { 111 | "name": "javascript", 112 | "artigos": [ 113 | { 114 | "tag": "JS", 115 | "texto": "Livro | Você não sabe JavaScript", 116 | "link": "https://github.com/cezaraugusto/You-Dont-Know-JS" 117 | }, 118 | { 119 | "tag": "JS", 120 | "texto": "JavaScript para quem sabe nada de JavaScript", 121 | "link": "https://medium.com/reprogramabr/javascript-pra-quem-sabe-nada-de-javascript-16c0d57a8960" 122 | }, 123 | { 124 | "tag": "JS", 125 | "texto": "Primeiros passos com a ferramenta de depuração do Javascript do Chrome", 126 | "link": "https://medium.com/reprogramabr/primeiros-passos-com-a-ferramenta-de-depura%C3%A7%C3%A3o-do-javascript-do-chrome-92e6ba477a3c" 127 | } 128 | ] 129 | } 130 | ] 131 | }, 132 | { 133 | "id": 3, 134 | "numero": "III", 135 | "nome": "Pré-processadores | Bootstrap | Tecnologias Assistivas | Scrum", 136 | "materias": [ 137 | { 138 | "name": "bootstrap", 139 | "artigos": [ 140 | { 141 | "tag": "BOOTS.", 142 | "texto": "Bootstrap: saiba neste guia para iniciantes o que é, por que e como usá-lo", 143 | "link": "https://rockcontent.com/blog/bootstrap/" 144 | } 145 | ] 146 | }, 147 | { 148 | "name": "scrum", 149 | "artigos": [ 150 | { 151 | "tag": "SCRUM", 152 | "texto": "Método SCRUM — Um resumo de tudo o que você precisa saber", 153 | "link": "https://medium.com/reprogramabr/scrum-um-breve-resumo-f051e1bc06d9" 154 | } 155 | ] 156 | }, 157 | { 158 | "name": "assistivas", 159 | "artigos": [ 160 | { 161 | "tag": "ACESSIB.", 162 | "texto": "Tudo (ou quase tudo) que você deveria ler sobre acessibilidade", 163 | "link": "http://acessibilida.de/?source=post_page---------------------------" 164 | } 165 | ] 166 | } 167 | ] 168 | }, 169 | { 170 | "id": 4, 171 | "numero": "IV", 172 | "nome": "Javascript | React", 173 | "materias": [ 174 | { 175 | "name": "javascript", 176 | "artigos": [ 177 | { 178 | "tag": "JS", 179 | "texto": "Função Arrastar e soltar nativa do HTML5 (drag and drop)", 180 | "link": "https://www.html5rocks.com/pt/tutorials/dnd/basics/" 181 | }, 182 | { 183 | "tag": "JS", 184 | "texto": "Usando foreach(), map(), filter(), reduce()", 185 | "link": "https://talitaoliveira.netlify.app/como-e-quando-usar-foreach-map-filter-reduce/" 186 | }, 187 | { 188 | "tag": "JS", 189 | "texto": "Como usar o Reduce? Convertendo arrays em outros tipos", 190 | "link": "https://www.youtube.com/watch?v=O_bSjsLga48&feature=youtu.be" 191 | }, 192 | { 193 | "tag": "JS", 194 | "texto": "JavaScript antes do framework - 10 dicas", 195 | "link": "https://www.youtube.com/playlist?list=PL9rc_FjKlX39T78CUANwmdta_d1CgUtMt" 196 | } 197 | ] 198 | }, 199 | { 200 | "name": "react", 201 | "artigos": [ 202 | { 203 | "tag": "REACT", 204 | "texto": "React do zero: componentização, propriedades e estado", 205 | "link": "https://blog.rocketseat.com.br/react-do-zero-componentizacao-propriedades-e-estado/" 206 | }, 207 | { 208 | "tag": "REACT", 209 | "texto": "React do zero: ciclo de vida, stateless components e arquitetura flux", 210 | "link": "https://blog.rocketseat.com.br/react-do-zero-ciclo-de-vida-stateless-components-e-arquitetura-flux/" 211 | } 212 | ] 213 | } 214 | ] 215 | } 216 | ] 217 | } -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | --------------------------------------------------------------------------------