diff --git a/assets/about.svg b/assets/about.svg index 89f7527..c794d5d 100644 --- a/assets/about.svg +++ b/assets/about.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/content.html b/content.html index d7cf66d..9076da4 100644 --- a/content.html +++ b/content.html @@ -1,5 +1,8 @@ - + + + + @@ -10,7 +13,10 @@ + Portfólio profissional + Portfólio Profissional + @@ -25,88 +31,115 @@
- - + +
+ +
+

I'm Herbert Ribeiro

Mobile and FrontEnd Developer

-
+
-
-
+ +
+
+ Sobre
-
+

Sobre mim

Desenvolvedor & Designer

-

Olá, sou Herbert Ribeiro, estudante do curso de Sistemas de Informação -
na Universidade Federal de Viçosa (UFV) e técnico em informática -
pelo Instituto Federal Baiano. Apaixonado por tecnologia desde criança, -
fiz a escolha de me desenvolver ainda mais na área de Tecnologia -
da Informação. Atualmente venho aprimorando meus conhecimentos -
nas linguagens Dart e Flutter para desenvolvimento mobile. Também -
possuo conhecimentos nas ferramentas de desenvolvimento Front-End. -
Além das ferramentas Figma e photoshop para design de interfaces. -
Como profissional da área, minhas principais características -
são: comprometimento, foco e determinação. + +

+ < Olá, sou Herbert Ribeiro, estudante do curso de Sistemas de Informação
na Universidade Federal de + Viçosa (UFV) e técnico em informática +
pelo Instituto Federal Baiano. Apaixonado por tecnologia desde criança, +
fiz a escolha de me desenvolver ainda mais na área de Tecnologia +
da Informação. Atualmente venho aprimorando meus conhecimentos +
nas linguagens Dart e Flutter para desenvolvimento mobile. Também +
possuo conhecimentos nas ferramentas de desenvolvimento Front-End. +
Além das ferramentas Figma e photoshop para design de interfaces. +
Como profissional da área, minhas principais características +
são: comprometimento, foco e determinação. />

+ target="_blank">Meu Currículo
-
+

Skills

Veja abaixo as minhas principais habilidades

-
+
+ + nodejs -

Flutter

+

flutter

nodejs @@ -147,7 +180,7 @@

C++

-
+

Projetos

Abaixo será possível visualizar alguns projetos desenvolvidos por mim

@@ -259,7 +292,7 @@

Projetos

-
+

Entre em contato para propostas e orçamentos

diff --git a/style_content.css b/style_content.css index 26dcd4d..3aaa17a 100644 --- a/style_content.css +++ b/style_content.css @@ -1,4 +1,6 @@ -@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;700&family=Inter:wght@400;900&family=Noto+Sans:wght@400;700&display=swap'); +/* @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;700&family=Inter:wght@400;900&family=Noto+Sans:wght@400;700&display=swap'); */ + + @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,700&display=swap'); * { margin: 0; @@ -6,7 +8,8 @@ box-sizing: border-box; text-decoration: none; list-style: none; - font-family: 'Be Vietnam Pro', sans-serif; + /* font-family: 'Be Vietnam Pro', sans-serif; */ + font-family: 'Source Code Pro', sans-serif; } /* Retirar rolagem da scrollbar */ @@ -17,12 +20,19 @@ body::-webkit-scrollbar{ /* INICIO - PAGE 1 */ .section-1-bg{ - background: black; + background: #10101a; background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; - height: 100vh; + height: 80vh; +} + +header{ + background-color: #322c8e; + border-radius: 0px 0px 20px 20px; + /* box-shadow: 0px 0px 10px 4px rgb(191, 191, 191); */ + margin-bottom: 8px; } aside { @@ -56,7 +66,7 @@ aside { } #barra-menu{ - background: #3cc47c; + background: #322c8e; height: 100vh; width: 0px; transition: 0.3s all; @@ -77,9 +87,9 @@ aside { #barra-menu ul li a:hover{ border: none; - padding: 8px; - border-radius: 15px; - background: #000000; + padding: 10px; + border-radius: 20px 0px 20px 0px; + background: #1e1d1f; } .c-icon{ @@ -115,13 +125,13 @@ aside { font-size: 70px; color: #ffffff; margin-top: 15%; - font-family: "Be Vietnam Pro"; + font-family: "Source Code Pro"; + letter-spacing: 1px; font-weight: bold; - letter-spacing: 2px; } .main-title h1::after{ - content: '_'; + content: ';'; opacity: 1; animation: pisca .9s infinite; } @@ -136,17 +146,17 @@ aside { } .main-title h2 { - font-size: 50px; - color: #3cc47c; - font-family: "Be Vietnam Pro"; + font-size: 55px; + color: #322c8e; + font-family: "Source Code Pro"; font-weight: bold; letter-spacing: 2px; } .main-title h2::after { - content: '_'; - opacity: 2; - animation: pisca2 .7s infinite; + content: ';'; + opacity: 1; + animation: pisca2 .8s infinite; } @keyframes pisca2 { @@ -163,7 +173,7 @@ aside { margin-top: 20px; font-size: 15px; color: #ffffff; - font-family: "Be Vietnam Pro"; + font-family: "Source Code Pro"; letter-spacing: 2px; font-weight: 200; } @@ -177,29 +187,53 @@ aside { border: none; width: 15%; margin-top: 50px; - padding: 8px 5px; + padding: 10px; font-size: 20px; - background-color: #3cc47c; - border-radius: 50px; + background-color: #322c8e; + border-radius: 20px 0px 20px 0px; color: #000000; cursor: pointer; transition: 1.0s; - box-shadow: 4px 4px 8px #529a74; + box-shadow: 4px 4px 8px rgb(191, 191, 191); } .main-title button:hover{ - border: solid 0.5px #FEE5AC; + border: solid 0.5px rgb(191, 191, 191); transition: 1.0s; background: transparent; } -.numeros{ +.menu-home{ + padding-top: 20px; +} + +.menu-home ul{ display: flex; - margin-top: 35px; - color: #FEE5CA; - gap: 40px; - cursor: pointer; - transition: 1.0s; + justify-content: center; + /* margin-left: 17%; */ + align-items:start; + flex-direction: row; + align-content: space-between; + gap: 60px; +} + +.menu-home ul li{ + border-radius: 10px 0px 10px 0px; + padding: 10px; + transition: .6s; +} + +.menu-home ul li:hover{ + background: #322c8e; + border: none; + padding: 10px; + border-radius: 20px 0px 20px 0px; + transform: scale(1.1); + box-shadow: 4px 4px 6px rgb(191, 191, 191); +} + +.menu-home li a{ + color: white; } .downscroll{ @@ -227,39 +261,75 @@ aside { } } -@media screen and (max-width: 1069px) { - .downscroll{ - display:flex; - align-items: center; +@media screen and (min-width: 900px) { + .menu-home ul{ + display: none; + } + + .main-title h1{ + font-size:40px; + margin-top: 16%; + margin-right: 4%; + } + .main-title h2{ + font-size: 30px; + margin-top: 40px; + margin-right: 4%; + } + + .main-title button{ + padding: 14px; + font-size: 14px; + } + + #barra-menu ul li a{ + color: #ffffff; + text-decoration: none; + font-size: 18px; + width: 100%; + font-weight: 400; + transition: 0.3s; + } + .c-icon{ + margin-top: 12%; + display: flex; justify-content: center; - margin-top: 5.0rem; - transition: 0.9s all; + text-align: center; + gap: 15px; + overflow: hidden; + cursor: pointer; } } @media screen and (max-width: 414px) { + header{ + margin-left: 4px; + margin-right: 4px; + } + + .menu-home ul{ + display: none; + } + .main-title h1{ - font-size:30px; + font-size:28px; margin-top: 60%; - margin-right: 3%; + margin-right: 4%; } .main-title h2{ - font-size: 26px; - margin-top: 40px; - margin-right: 3%; - } - .main-title h5{ - font-size: 16px; + font-size: 22px; margin-top: 40px; - margin-right: 3%; + margin-right: 4%; } + .main-title button{ padding: 14px; - font-size: 22px; - width: 150px; + font-size: 14px; + width: 130px; margin-top: 70px; - margin-left: 15%; + margin-left: 18%; } + #barra-menu ul li a{ color: #ffffff; text-decoration: none; @@ -309,31 +379,39 @@ aside { /* ABOUT ME - PAGE 2 */ .c-sobre{ - background-color: #42a470; + background-color: #10101a; display: flex; justify-content: space-around; - padding: 150px 0px; + padding: 100px 0px; width: 100%; flex-wrap: wrap; overflow: hidden; } .image{ - width: 400px; + border-radius: 0px 20px 0px 20px; + width: 600px; height: auto; cursor: pointer; box-shadow: 0px 0px 40px black; - } +} + +.sobre-mim{ + background-color: rgb(191, 191, 191); + border-radius: 40px 0px 40px 0px; + padding: 70px; + box-shadow: 4px 8px 10px #322c8e, 4px 4px 2px; +} .sobre-mim h1{ - color: #000000; + color: #322c8e; text-align: center; font-size: 55px; font-weight: bold; } .sobre-mim h4{ - color: #000000; + color: #1e1d1f; text-align: center; font-size: 25px; margin-top: 30px; @@ -341,15 +419,15 @@ aside { } .sobre-mim span { - color: #ffffff; + color: #322c8e; } .sobre-mim p { - color: #ffffff; + color: #1e1d1f; text-align: center; font-size: 15px; margin-top: 25px; - font-weight: normal; + font-weight: 600; } .sobre-mim button a{ @@ -358,10 +436,10 @@ aside { .sobre-mim button{ border: none; - background-color: #000000; + background-color: #1e1d1f; margin-top: 30px; margin-left: 28%; - border-radius: 50px; + border-radius: 20px 0px 20px 0px; padding: 14px 14px; margin-left: 35%; font-size: 20px; @@ -375,31 +453,65 @@ aside { transition: 0.8s; } +@media screen and (min-width: 900px) { + .image { + width: 600px; + margin-bottom: 30px; + } + +} + @media screen and (max-width: 414px) { + .c-sobre{ + background-color: #10101a; + display: flex; + justify-content: space-around; + width: 100%; + flex-wrap: wrap; + overflow: hidden; + } + .image { - width: 315px; + width: 215px; height: auto; + margin-bottom: 30px; } + + .sobre-mim{ + padding-bottom: 30px; + padding-top: 2px; + margin-left: 10px; + border-radius: 500px 200px 500px 200px; + } + .sobre-mim h1{ - margin-top: 45px; + font-size: 50px; + margin-top: 36px; + } + + .sobre-mim h4{ + font-size: 16px; } .sobre-mim p{ - font-size: 11px; + font-size: 8px; width: 500px; padding: 15px; text-align: center; } .sobre-mim button { - margin-left: 34%; + margin-left: 38%; + font-size: 10px; + margin-top: 10px; + padding: 10px; } } /* SERVICOS - PAGE 3 */ .c-servicos{ - background-color: #000000; + background-color: #10101a; width: 100%; - padding: 50px; + padding: 150px; overflow: hidden; } @@ -423,18 +535,18 @@ aside { margin-top: 4%; text-align: center; flex-wrap: wrap; - gap: 50px; + gap: 80px; } .card{ - background-color: #3cc47c; + background-color: rgb(191, 191, 191); padding: 50px; - box-shadow: 4px 4px 8px rgb(65, 53, 53), 4px 4px 2px; + box-shadow: 4px 4px 10px #322c8e, 4px 4px 10px; margin-top: 35px; cursor: pointer; transition: 0.3s all; margin-bottom: 24px; - border-radius: 10px; + border-radius: 20px 0px 20px 0px; } .card img{ @@ -444,31 +556,33 @@ aside { .card h3{ font-size: 20px; - font-weight: 700; - color: #000000; + font-weight: 600; + color: #1e1d1f; } .card h4{ font-size: 20px; - font-weight: lighter; - color: #ffffff; + color: ; margin-top: 15px; } -.card:hover{ - transform: scale(1.1); - transition-duration: 1s; -} - @media screen and (max-width: 414px) { .c-servicos h1 { - font-size: 60px; + font-size: 40px; + margin-left: -20%; } + + .c-servicos p{ + font-size: 12px; + margin-bottom: 20px; + } + .c-card{ - gap: 5px; + gap: 10px; } .card { - margin-top: 15px; + margin-top: 50px; + padding: 30px; } } @@ -476,7 +590,7 @@ aside { .c-projetos{ width: 100%; - background-color: #42a470; + background-color: #10101a; padding: 85px; overflow: hidden; } @@ -486,7 +600,7 @@ aside { font-size: 70px; padding-top: 2%; font-weight: bold; - color:#000000; + color:#ffffff; } .c-projetos p{ @@ -533,24 +647,55 @@ aside { transition: all .3s ease; } -.card-character .image{ - /* position: relative; */ - display: flex; + +.card:hover{ + transform: scale(1.1); + transition-duration: 1s; +} + +.card-character .image button { + position: absolute; + padding: 1rem; + background-color: rgb(191, 191, 191); + border-radius: 20px 0px 20px 0px; + cursor: pointer; + border: none; + font-weight: 700; + font-size: 18px; + line-height: 1rem; + bottom: 0; + margin-left: 37%; + align-items: center; justify-content: center; - width: 1000px; - height: 600px; - overflow: hidden; - margin-bottom: 2.4rem; - border-radius: 15px 2px 15px 2px; - transition: all .7s ease-in; + opacity: 0; + transition: all .3s ease; + box-shadow: 4px 10px 4px #322c8e; } -.card-character .image img { - width: 1000px; - height: 600px; - object-fit: fill; - border-radius: 15px 2px 15px 2px; + +a { + color: #322c8e; } + +.card-character:hover .image button { + opacity: 1; + bottom: 5rem; +} + + /* @media (min-width: 1200px) { + .img-projetos img { + width: 700px; + } + + .swiper-projetos { + width: 1100px; + cursor: pointer; + border-radius: 10px; + } + } */ + + + .card-character .image button { position: absolute; padding: 1rem 2rem; @@ -686,15 +831,17 @@ a { @media (max-width: 414px) { .c-projetos h1{ - font-size: 60px; + font-size: 40px; + margin-left: 8%; } .c-projetos p{ - font-size: 15px; + font-size: 12px; text-align: center; margin-top: 35px; color: #ffffff; } + .img-projetos img { width: 250px; } @@ -705,34 +852,26 @@ a { border-radius: 10px; } - .card-character .image{ - /* position: relative; */ - width: 230px; - height: 150px; - } - .card-character .image img { - width: 230px; - height: 150px; - } - .card-character .image button { - position: absolute; - padding: 10px 10px; - font-size: 12px; - line-height: 15px; + .card-character .image button{ + align-items: end; + justify-content: end; + padding: 8px; + font-weight: 700; + font-size: 8px; + line-height: 10px; + bottom: 0; + margin-left: 24%; + opacity: 0; transition: all .3s ease; } - .card-character:hover .image button { - bottom: 1rem; - } } /* RODAPE - PAGE 5 */ - .c-rodape{ width: 100%; - background-color: #000000; + background-color: #10101a; padding: 50px; overflow: hidden; } @@ -740,7 +879,7 @@ a { .c-rodape h1{ text-align: center; color: #ffffff; - font-weight: lighter; + font-weight: bold; padding-bottom: 20px; } @@ -751,12 +890,12 @@ a { } .c-rodape strong{ - color: #3cc47c; + color: #322c8e; } .c-rodape form input{ font-size: 13px; - border-radius: 16px; + border-radius: 20px 0px 20px 0px; display: inline-block; margin-left: 25%; width: 50%; @@ -768,17 +907,19 @@ a { } #btnsubmit{ - border-radius: 10px; + border-radius: 10px 0px 10px 0px; display: flex; font-size: 20px; border: none; width: 108px; padding: 4px; - background-color: #3cc47c; + background-color: #322c8e; color: #ffffff; margin-bottom: 40px; justify-content: center; margin: auto; + cursor: pointer; + box-shadow: 4px 4px 10px rgb(191, 191, 191); } .c-icon2 { @@ -802,15 +943,11 @@ a { .c-icon2 span:hover { transition: 0.2s; transform: 0.5s; - color: #3cc47c; -} - -.c-rodape form input{ - + color: #322c8e; } .c-rodape form input:hover{ - transform: scale(1.1); + box-shadow: 4px 4px 10px #322c8e; transition: 1s; }