├── README.md ├── .vscode └── settings.json ├── img ├── NETFLA.png ├── POKEDEX.png ├── MULTIVERSE.png ├── SKANE-GAME.png ├── REPLICAINSTA.png ├── background6.png ├── WIKIREPOSITORIOS.png ├── calculadora-react.png ├── formularioburguer.png └── lading page em bootstrap.png ├── css ├── reset.css ├── section-tittle.css ├── menu.css ├── logo.css ├── projetos.css ├── style.css ├── mobile.css ├── home.css ├── contato.css ├── sobre-mim.css └── tablet.css ├── .github └── workflows │ └── static.yml └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # portifolio -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } -------------------------------------------------------------------------------- /img/NETFLA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/NETFLA.png -------------------------------------------------------------------------------- /img/POKEDEX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/POKEDEX.png -------------------------------------------------------------------------------- /img/MULTIVERSE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/MULTIVERSE.png -------------------------------------------------------------------------------- /img/SKANE-GAME.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/SKANE-GAME.png -------------------------------------------------------------------------------- /img/REPLICAINSTA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/REPLICAINSTA.png -------------------------------------------------------------------------------- /img/background6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/background6.png -------------------------------------------------------------------------------- /img/WIKIREPOSITORIOS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/WIKIREPOSITORIOS.png -------------------------------------------------------------------------------- /img/calculadora-react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/calculadora-react.png -------------------------------------------------------------------------------- /img/formularioburguer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/formularioburguer.png -------------------------------------------------------------------------------- /img/lading page em bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leticialmbarros/portifolio/HEAD/img/lading page em bootstrap.png -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | ul, ul, li { 8 | list-style: none; 9 | } 10 | 11 | a{ 12 | text-decoration: none; 13 | color: inherit; 14 | } -------------------------------------------------------------------------------- /css/section-tittle.css: -------------------------------------------------------------------------------- 1 | .section__tittle { 2 | grid-area: tittle; 3 | font-size: 220px; 4 | text-align: center; 5 | background: linear-gradient(#444, #000); 6 | background-clip: text; 7 | -webkit-background-clip: text; 8 | color: transparent; 9 | } 10 | -------------------------------------------------------------------------------- /css/menu.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | display: flex; 3 | gap: 72px; 4 | font-size: 1.25rem; 5 | } 6 | 7 | .menu li { 8 | border-bottom: 4px solid transparent; 9 | transition: border-color 0.25s; 10 | } 11 | 12 | .menu li:hover { 13 | border-color: var(--primary-color); 14 | } 15 | -------------------------------------------------------------------------------- /css/logo.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | font-size: 1.5rem; 3 | 4 | } 5 | 6 | .logo::before { 7 | content: "<"; 8 | font-size: 2rem; 9 | color: var(--primary-color); 10 | font-weight: 700; 11 | } 12 | 13 | .logo::after { 14 | content: "/>"; 15 | font-size: 2rem; 16 | color: var(--primary-color); 17 | font-weight: 700; 18 | } -------------------------------------------------------------------------------- /css/projetos.css: -------------------------------------------------------------------------------- 1 | .projetos { 2 | width: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | gap: 64px; 6 | align-items: center; 7 | } 8 | 9 | .card-container { 10 | max-width: 1200px; 11 | width: 100%; 12 | display: flex; 13 | flex-wrap: wrap; 14 | justify-content: space-between; 15 | gap: 48px; 16 | } 17 | 18 | .card { 19 | position: relative; 20 | display: block; 21 | overflow: hidden; 22 | border-radius: 5px; 23 | } 24 | 25 | .card::before { 26 | position: absolute; 27 | background-color: #0009; 28 | content: 'Clique aqui para abrir o projeto'; 29 | width: 100%; 30 | height: 100%; 31 | display: grid; 32 | place-content: center; 33 | transform: translateY(100%); 34 | transition: transform 0.6s; 35 | } 36 | 37 | .card:hover::before { 38 | transform: translateY(0%); 39 | } 40 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #b21abd; 3 | --icon-color: #750f42; 4 | } 5 | 6 | html { 7 | scroll-behavior: smooth; 8 | } 9 | 10 | body { 11 | display: grid; 12 | grid-template-areas: 'content'; 13 | font-family: 'Ubuntu', sans-serif; 14 | color: #fff; 15 | background-color: #000; 16 | } 17 | 18 | main { 19 | grid-area: content; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | } 24 | 25 | header { 26 | grid-area: content; 27 | z-index: 777; 28 | max-width: 1200px; 29 | width: 100%; 30 | place-self: start center; 31 | margin-top: 48px; 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | } 36 | 37 | section { 38 | height: 100vh; 39 | } 40 | 41 | footer { 42 | height: 50px; 43 | width: 100%; 44 | background-color: #0005; 45 | grid-area: content; 46 | place-self: end center; 47 | display: grid; 48 | place-content: center; 49 | border-top: 2px solid white; 50 | font-size: 0.75rem; 51 | font-style: italic; 52 | } 53 | 54 | @media (max-width: 3000px) { 55 | .navigation-icon { 56 | visibility: hidden; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /css/mobile.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 640px) { 2 | body { 3 | width: 100%; 4 | } 5 | 6 | header { 7 | max-width: 400px; 8 | width: 100%; 9 | } 10 | 11 | .home { 12 | position: relative; 13 | flex-direction: column; 14 | width: 100%; 15 | height: 1000px; 16 | } 17 | 18 | .profile__text { 19 | font-size: 2rem; 20 | } 21 | 22 | .section__tittle { 23 | font-size: 4.5rem; 24 | } 25 | 26 | .description__tittle { 27 | font-size: 3.5rem; 28 | } 29 | 30 | .skills__tittle { 31 | font-size: 3.5rem; 32 | } 33 | 34 | .sobre-mim { 35 | height: 2100px; 36 | display: flex; 37 | align-items: center; 38 | gap: 124px; 39 | } 40 | 41 | .skills__container { 42 | justify-content: center; 43 | } 44 | 45 | .projetos { 46 | height: 1800px; 47 | display: flex; 48 | } 49 | 50 | .card-container{ 51 | display: flex; 52 | justify-content: center; 53 | 54 | } 55 | 56 | .card-container img { 57 | width: 350px; 58 | } 59 | 60 | h2 { 61 | display: flex; 62 | justify-content: center; 63 | } 64 | 65 | .contatos { 66 | height: 900px; 67 | } 68 | 69 | .social-container { 70 | flex-direction: column; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /css/home.css: -------------------------------------------------------------------------------- 1 | .home { 2 | width: 100%; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | background: rgb(31, 29, 33); 7 | background: linear-gradient(230deg, rgba(82,17,114,1) 0%, rgba(57,56,58,1) 100%); 8 | background-size: cover; 9 | box-shadow: inset 0px -40px 40px #000; 10 | } 11 | 12 | .profile__foto { 13 | filter: grayscale(); 14 | } 15 | 16 | .profile { 17 | display: flex; 18 | align-items: center; 19 | gap: 48px; 20 | } 21 | 22 | .profile__text { 23 | font-size: 1.5rem; 24 | } 25 | 26 | .profile__name { 27 | font-size: 4rem; 28 | color: var(--primary-color); 29 | } 30 | .home { 31 | width: 100%; 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | background-image: url(../img/background6.png); 36 | background-repeat: no-repeat; 37 | background-size: cover; 38 | background-position: center; 39 | box-shadow: inset 0px -40px 40px #000; 40 | } 41 | 42 | .profile__foto { 43 | filter: grayscale(); 44 | } 45 | 46 | .profile { 47 | display: flex; 48 | align-items: center; 49 | gap: 48px; 50 | } 51 | 52 | .profile__text { 53 | font-size: 1.5rem; 54 | ; 55 | } 56 | 57 | .profile__name { 58 | font-size: 4rem; 59 | color: var(--primary-color); 60 | } -------------------------------------------------------------------------------- /css/contato.css: -------------------------------------------------------------------------------- 1 | .contatos { 2 | width: 100%; 3 | max-width: 1200px; 4 | display: grid; 5 | grid-template-areas: 6 | 'tittle tittle tittle' 7 | 'contato social link'; 8 | grid-template-rows: auto 1fr; 9 | grid-template-columns: 1fr 2fr 1fr; 10 | align-items: center; 11 | } 12 | 13 | .contato-container { 14 | grid-area: contato; 15 | display: flex; 16 | flex-direction: column; 17 | gap: 16px; 18 | } 19 | 20 | .contato-container h3 { 21 | font-size: 1.5rem; 22 | } 23 | 24 | .contato-item { 25 | display: flex; 26 | gap: 12px; 27 | } 28 | 29 | .contato-item__icon { 30 | font-size: 1.25rem; 31 | } 32 | 33 | .social-container { 34 | grid-area: social; 35 | display: flex; 36 | justify-content: center; 37 | gap: 32px; 38 | } 39 | 40 | .social:hover { 41 | color: var(--primary-color); 42 | } 43 | 44 | .social { 45 | width: 64px; 46 | height: 64px; 47 | background-color: var(--icon-color); 48 | font-size: 2rem; 49 | display: grid; 50 | place-content: center; 51 | transition: color 0.5s; 52 | } 53 | 54 | .link-container { 55 | grid-area: link; 56 | display: flex; 57 | flex-direction: column; 58 | gap: 16px; 59 | text-align: right; 60 | } 61 | 62 | .link-container h3 { 63 | font-size: 1.5rem; 64 | } 65 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow one concurrent deployment 19 | concurrency: 20 | group: "pages" 21 | cancel-in-progress: true 22 | 23 | jobs: 24 | # Single deploy job since we're just deploying 25 | deploy: 26 | environment: 27 | name: github-pages 28 | url: ${{ steps.deployment.outputs.page_url }} 29 | runs-on: ubuntu-latest 30 | steps: 31 | - name: Checkout 32 | uses: actions/checkout@v3 33 | - name: Setup Pages 34 | uses: actions/configure-pages@v2 35 | - name: Upload artifact 36 | uses: actions/upload-pages-artifact@v1 37 | with: 38 | # Upload entire repository 39 | path: '.' 40 | - name: Deploy to GitHub Pages 41 | id: deployment 42 | uses: actions/deploy-pages@v1 43 | -------------------------------------------------------------------------------- /css/sobre-mim.css: -------------------------------------------------------------------------------- 1 | .sobre-mim { 2 | max-width: 1200px; 3 | width: 100%; 4 | height: 100vh; 5 | display: grid; 6 | grid-template-areas: 7 | 'tittle tittle' 8 | 'description skills'; 9 | grid-template-rows: auto 1fr; 10 | grid-template-columns: 1fr 1fr; 11 | gap: 64px; 12 | } 13 | 14 | .description { 15 | grid-area: description; 16 | display: flex; 17 | flex-direction: column; 18 | gap: 32px; 19 | } 20 | 21 | .description__tittle { 22 | font-size: 48px; 23 | color: var(--primary-color); 24 | text-align: left; 25 | } 26 | 27 | .description__text { 28 | font-size: 1.5rem; 29 | width: 85%; 30 | line-height: 150%; 31 | text-align: left; 32 | justify-content: left; 33 | } 34 | 35 | .skills { 36 | grid-area: skills; 37 | display: flex; 38 | flex-direction: column; 39 | gap: 32px; 40 | } 41 | 42 | .skills__tittle { 43 | font-size: 48px; 44 | color: var(--primary-color); 45 | } 46 | 47 | .skills__container { 48 | display: flex; 49 | flex-wrap: wrap; 50 | gap: 16px; 51 | } 52 | 53 | .skills__icon { 54 | width: 150px; 55 | height: 150px; 56 | background-color: var(--icon-color); 57 | display: flex; 58 | flex-direction: column; 59 | justify-content: center; 60 | align-items: center; 61 | gap: 12px; 62 | } 63 | 64 | .skills__icon i { 65 | font-size: 3rem; 66 | } 67 | 68 | .skills__icon span { 69 | font-weight: 700; 70 | font-size: 1.5rem; 71 | } 72 | -------------------------------------------------------------------------------- /css/tablet.css: -------------------------------------------------------------------------------- 1 | /* TABLET */ 2 | 3 | @media (max-width: 960px) { 4 | nav { 5 | display: none; 6 | } 7 | header { 8 | max-width: 650px; 9 | display: flex; 10 | justify-content: space-between; 11 | } 12 | 13 | body { 14 | max-width: 960px; 15 | width: 100%; 16 | } 17 | 18 | .navigation-icon { 19 | visibility: visible; 20 | font-size: 1.5rem; 21 | } 22 | 23 | .home { 24 | display: flex; 25 | flex-direction: column; 26 | height: 1000px; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | .section__tittle { 32 | font-size: 7rem; 33 | } 34 | 35 | .profile { 36 | display: flex; 37 | flex-direction: column; 38 | text-align: center; 39 | line-height: 60px; 40 | } 41 | 42 | .sobre-mim { 43 | width: 100%; 44 | height: 1400px; 45 | display: flex; 46 | flex-direction: column; 47 | align-items: flex-start; 48 | padding-left: 28.5px; 49 | } 50 | 51 | .skills { 52 | width: 75%; 53 | } 54 | 55 | .skills__container { 56 | gap: 48px; 57 | } 58 | 59 | .description__text { 60 | width: 450px; 61 | } 62 | 63 | .projetos { 64 | max-height: 2800px; 65 | height: 100%; 66 | display: flex; 67 | flex-direction: column; 68 | } 69 | .card-container { 70 | flex-wrap: wrap; 71 | width: 85%; 72 | display: flex; 73 | justify-content: center; 74 | 75 | } 76 | 77 | .card-container img { 78 | width: 600px; 79 | } 80 | .contatos { 81 | display: flex; 82 | flex-direction: column; 83 | height: 800px; 84 | gap: 48px; 85 | } 86 | 87 | .contato-container { 88 | display: flex; 89 | align-items: center; 90 | } 91 | 92 | .link-container { 93 | display: flex; 94 | align-items: center; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Leticia Barros - Portifólio 7 | 8 | 9 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 52 |
53 |
54 |
55 |
56 | 57 |
58 | Olá, meu nome é 59 |

Leticia Barros

60 | sou Desenvolvedora Frontend 61 |
62 |
63 |
64 |
65 |

Sobre Mim

66 |
67 |

Quem sou?

68 |

69 | De São Luis - MA e tenho 27 anos, estou em transição de carreira, sou formada em Direito e 70 | em breve estarei formada em Análise e Desenvolvimento de Sistemas pela ANHANGUERA. 71 | Sou apaixonada por tecnologia e games mas principalmente desenvolvimento. 72 | Atualmente Desenvolvedora Front-End porém estudando tecnologias de linguagens do Back-End, para futuramente me tornar Full-Stack. 73 | Também estou imersa nos estudos das tecnologias DevOps. 74 |

75 |
76 | 77 |
78 |

Skills:

79 |
    80 | 81 |
  • 82 | 83 | HTML 84 |
    • 85 | 86 |
  • 87 | 88 | CSS 89 |
    • 90 | 91 |
  • 92 | 93 | JAVASCRIPT 94 |
    • 95 | 96 |
  • 97 | 98 | GITHUB 99 |
    • 100 | 101 |
  • 102 | 103 | REACT.JS 104 |
    • 105 | 106 |
  • 107 | 108 | NODE.JS 109 |
    • 110 | 111 |
  • 112 | 113 | LINUX 114 |
    • 115 | 116 |
  • 117 | 118 | DOCKER 119 |
    • 120 | 121 |
  • 122 | 123 | AWS 124 |
    • 125 |
126 |
127 |
128 | 129 |
130 |
131 |
132 |
133 | 134 |
135 |

Projetos:

136 |
137 | 138 | 139 | netfla 140 | 141 | 142 | 143 | pokedex 144 | 145 | 146 | 147 | multiverse 148 | 149 | 150 | 151 | formulario 152 | 153 | 154 | 155 | ladinpage bootstrap 156 | 157 | 158 | 159 | ladinpage bootstrap 160 | 161 | 162 | 163 | wiki repositorio 164 | 165 | 166 | 167 | Snake Game- javascript 168 | 169 | 170 | 171 | calculadora-react 172 | 173 |
174 |
175 | 176 |




















177 | 178 |
179 |

Contatos

180 | 197 | 198 |
199 |
200 | 203 | 204 | 205 | --------------------------------------------------------------------------------