From 1665a13a7f5f77965485f4988d68cfe1b984abb7 Mon Sep 17 00:00:00 2001 From: herbertribeiro19 Date: Wed, 19 Apr 2023 22:04:10 -0300 Subject: [PATCH 1/6] update --- assets/about.svg | 2 +- content.html | 201 +++++++++++++++++++++++++++------------------- style_content.css | 129 ++++++++++++++++++----------- 3 files changed, 200 insertions(+), 132 deletions(-) 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 90e62de..cd9cc74 100644 --- a/content.html +++ b/content.html @@ -1,105 +1,132 @@ - + + - + - - Portfólio Profissional + + Portfólio profissional
+ +
- +
+ +
+ + + + +
+
+ +
+
+ +
+

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. />

- +
-
+

Skills

Veja abaixo as minhas principais habilidades

-
+
nodejs -

Flutter

+

flutter

nodejs @@ -140,41 +167,45 @@

C++

-
+

Projetos

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

-
-
-
+
+
+
Cumply
-
Valhalla
+
+ Valhalla
Cumply
-
Portfólio profissional
+
+ Portfólio profissional +
Login-Page
-
Relogio
-
Calculadora
-
TimeRest
+
+ Relogio
+
Calculadora
+
+ TimeRest
IMC
NLW - eSports
-
Aniversário de namoro
+
Aniversário de namoro +
+
-
-
+

Entre em contato para propostas e orçamentos

@@ -183,7 +214,8 @@

Entre em contato para propostas e orçamentos

-

Site desenvolvido por Herbert Ribeiro, all rights reserved.

+

Site desenvolvido por Herbert + Ribeiro, all rights reserved.

@@ -196,12 +228,13 @@

Entre em contato para propostas e orçamentos

- + - - + + + \ No newline at end of file diff --git a/style_content.css b/style_content.css index eb0bec9..4623b11 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,18 @@ 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: 90vh; +} + +header{ + background-color: #322c8e; + border-radius: 0px 0px 20px 20px; + box-shadow: 0px 0px 20px 4px #; } aside { @@ -56,7 +65,7 @@ aside { } #barra-menu{ - background: #3cc47c; + background: #322c8e; height: 100vh; width: 0px; transition: 0.3s all; @@ -115,9 +124,9 @@ 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{ @@ -137,8 +146,8 @@ aside { .main-title h2 { font-size: 50px; - color: #3cc47c; - font-family: "Be Vietnam Pro"; + color: #322c8e; + font-family: "Source Code Pro"; font-weight: bold; letter-spacing: 2px; } @@ -179,12 +188,12 @@ aside { margin-top: 50px; padding: 8px 5px; 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 #322c8e; } .main-title button:hover{ @@ -193,13 +202,32 @@ aside { 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-color: #322c8e; +} + +.menu-home li a{ + color: white; } .downscroll{ @@ -309,31 +337,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 +377,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 +394,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; @@ -397,9 +433,9 @@ aside { /* SERVICOS - PAGE 3 */ .c-servicos{ - background-color: #000000; + background-color: #10101a; width: 100%; - padding: 50px; + padding: 150px; overflow: hidden; } @@ -423,18 +459,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,14 +480,13 @@ 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; } @@ -476,7 +511,7 @@ aside { .c-projetos{ width: 100%; - background-color: #42a470; + background-color: #10101a; padding: 85px; overflow: hidden; } @@ -486,7 +521,7 @@ aside { font-size: 70px; padding-top: 2%; font-weight: bold; - color:#000000; + color:#ffffff; } .c-projetos p{ @@ -639,7 +674,7 @@ aside { .c-rodape h1{ text-align: center; color: #ffffff; - font-weight: lighter; + font-weight: bold; padding-bottom: 20px; } @@ -650,7 +685,7 @@ aside { } .c-rodape strong{ - color: #3cc47c; + color: #322c8e; } .c-rodape form input{ @@ -667,13 +702,13 @@ aside { } #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; @@ -701,7 +736,7 @@ aside { .c-icon2 span:hover { transition: 0.2s; transform: 0.5s; - color: #3cc47c; + color: #322c8e; } .c-rodape form input{ @@ -709,7 +744,7 @@ aside { } .c-rodape form input:hover{ - transform: scale(1.1); + box-shadow: 4px 4px 2px 4px #322c8e; transition: 1s; } From 23c4b5895b241c42a11c4cc3f482c447a3d1ffb1 Mon Sep 17 00:00:00 2001 From: herbertribeiro19 Date: Wed, 19 Apr 2023 22:24:16 -0300 Subject: [PATCH 2/6] update_new --- style_content.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/style_content.css b/style_content.css index 4623b11..96ca93d 100644 --- a/style_content.css +++ b/style_content.css @@ -25,7 +25,7 @@ body::-webkit-scrollbar{ background-position: center; background-size: cover; width: 100%; - height: 90vh; + height: 80vh; } header{ @@ -86,9 +86,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: #10101a; } .c-icon{ @@ -223,7 +223,11 @@ aside { } .menu-home ul li:hover{ - background-color: #322c8e; + background: #322c8e; + border: none; + padding: 10px; + border-radius: 20px 0px 20px 0px; + transform: scale(1.1); } .menu-home li a{ From fd254d8fbfed8cee365f4ed297da2994014ab6d4 Mon Sep 17 00:00:00 2001 From: herbertribeiro19 Date: Wed, 19 Apr 2023 22:51:50 -0300 Subject: [PATCH 3/6] update3 --- style_content.css | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/style_content.css b/style_content.css index 96ca93d..c767b5f 100644 --- a/style_content.css +++ b/style_content.css @@ -31,7 +31,8 @@ body::-webkit-scrollbar{ header{ background-color: #322c8e; border-radius: 0px 0px 20px 20px; - box-shadow: 0px 0px 20px 4px #; + box-shadow: 0px 0px 10px 4px rgb(191, 191, 191); + margin-bottom: 8px; } aside { @@ -88,7 +89,7 @@ aside { border: none; padding: 10px; border-radius: 20px 0px 20px 0px; - background: #10101a; + background: #1e1d1f; } .c-icon{ @@ -130,7 +131,7 @@ aside { } .main-title h1::after{ - content: '_'; + content: ';'; opacity: 1; animation: pisca .9s infinite; } @@ -145,7 +146,7 @@ aside { } .main-title h2 { - font-size: 50px; + font-size: 55px; color: #322c8e; font-family: "Source Code Pro"; font-weight: bold; @@ -153,9 +154,9 @@ aside { } .main-title h2::after { - content: '_'; - opacity: 2; - animation: pisca2 .7s infinite; + content: ';'; + opacity: 1; + animation: pisca2 .8s infinite; } @keyframes pisca2 { @@ -172,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; } @@ -186,18 +187,18 @@ aside { border: none; width: 15%; margin-top: 50px; - padding: 8px 5px; + padding: 10px; font-size: 20px; background-color: #322c8e; border-radius: 20px 0px 20px 0px; color: #000000; cursor: pointer; transition: 1.0s; - box-shadow: 4px 4px 8px #322c8e; + 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; } @@ -228,6 +229,7 @@ aside { 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{ From e2d689a40a80ba5b54de8d0b7ffd4e1467b74d83 Mon Sep 17 00:00:00 2001 From: herbertribeiro19 Date: Thu, 20 Apr 2023 07:56:04 -0300 Subject: [PATCH 4/6] update --- content.html | 122 +++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 98 insertions(+), 24 deletions(-) diff --git a/content.html b/content.html index cd9cc74..e1727ae 100644 --- a/content.html +++ b/content.html @@ -174,31 +174,105 @@

Projetos

-
Cumply
-
- Valhalla
-
Cumply
-
- Portfólio profissional +
+
+
+ GOW + +
+
-
Login-Page
-
- Relogio
-
Calculadora
-
- TimeRest
-
IMC
-
NLW - eSports
-
Aniversário de namoro +
+
+
+ Cumply + +
+
+
+
+
+
+ Valhalla + +
+
+
+
+
+
+ Portfólio profissional + +
+
+
+
+
+
+ Login-Page + +
+
+
+
+
+
+ Relogio + +
+
+
+
+
+
+ Calculadora + +
+
+
+
+
+
+ TimeRest + +
+
+
+
+
+
+ IMC + +
+
+
+
+
+
+ NLW - eSports + +
+
+
+
+
+
+ Aniversário de namoro + +
+
From d259e4a58d58912f28c51c04abfecb84b543b35c Mon Sep 17 00:00:00 2001 From: herbertribeiro19 Date: Thu, 20 Apr 2023 19:57:37 -0300 Subject: [PATCH 5/6] =?UTF-8?q?atualiza=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style_content.css | 77 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 55 insertions(+), 22 deletions(-) diff --git a/style_content.css b/style_content.css index c767b5f..b792cf9 100644 --- a/style_content.css +++ b/style_content.css @@ -31,7 +31,7 @@ body::-webkit-scrollbar{ header{ background-color: #322c8e; border-radius: 0px 0px 20px 20px; - box-shadow: 0px 0px 10px 4px rgb(191, 191, 191); + /* box-shadow: 0px 0px 10px 4px rgb(191, 191, 191); */ margin-bottom: 8px; } @@ -272,28 +272,34 @@ aside { } @media screen and (max-width: 414px) { + header{ + margin-left: 2px; + margin-right: 2px; + } + + .menu-home ul{ + display: none; + } + .main-title h1{ - font-size:30px; + font-size:26px; margin-top: 60%; margin-right: 3%; } .main-title h2{ - font-size: 26px; - margin-top: 40px; - margin-right: 3%; - } - .main-title h5{ - font-size: 16px; + font-size: 20px; margin-top: 40px; margin-right: 3%; } + .main-title button{ padding: 14px; - font-size: 22px; - width: 150px; + font-size: 14px; + width: 130px; margin-top: 70px; margin-left: 15%; } + #barra-menu ul li a{ color: #ffffff; text-decoration: none; @@ -496,11 +502,6 @@ aside { margin-top: 15px; } -.card:hover{ - transform: scale(1.1); - transition-duration: 1s; -} - @media screen and (max-width: 414px) { .c-servicos h1 { font-size: 60px; @@ -576,6 +577,40 @@ aside { border-radius: 20px; } +.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; + opacity: 0; + transition: all .3s ease; + box-shadow: 4px 10px 4px #322c8e; +} + +a { + color: #322c8e; +} + + +.card-character:hover .image button { + opacity: 1; + bottom: 5rem; +} + /* @media (min-width: 1200px) { .img-projetos img { width: 700px; @@ -672,7 +707,7 @@ aside { .c-rodape{ width: 100%; - background-color: #000000; + background-color: #10101a; padding: 50px; overflow: hidden; } @@ -696,7 +731,7 @@ aside { .c-rodape form input{ font-size: 13px; - border-radius: 16px; + border-radius: 20px 0px 20px 0px; display: inline-block; margin-left: 25%; width: 50%; @@ -719,6 +754,8 @@ aside { margin-bottom: 40px; justify-content: center; margin: auto; + cursor: pointer; + box-shadow: 4px 4px 10px rgb(191, 191, 191); } .c-icon2 { @@ -745,12 +782,8 @@ aside { color: #322c8e; } -.c-rodape form input{ - -} - .c-rodape form input:hover{ - box-shadow: 4px 4px 2px 4px #322c8e; + box-shadow: 4px 4px 10px #322c8e; transition: 1s; } From a0b46ba5cf779c8c34189402110fed8e56299296 Mon Sep 17 00:00:00 2001 From: herbertribeiro19 Date: Thu, 20 Apr 2023 21:25:35 -0300 Subject: [PATCH 6/6] nova identidade --- style_content.css | 132 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 109 insertions(+), 23 deletions(-) diff --git a/style_content.css b/style_content.css index b792cf9..92d2cea 100644 --- a/style_content.css +++ b/style_content.css @@ -261,20 +261,50 @@ 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: 2px; - margin-right: 2px; + margin-left: 4px; + margin-right: 4px; } .menu-home ul{ @@ -282,14 +312,14 @@ aside { } .main-title h1{ - font-size:26px; + font-size:28px; margin-top: 60%; - margin-right: 3%; + margin-right: 4%; } .main-title h2{ - font-size: 20px; + font-size: 22px; margin-top: 40px; - margin-right: 3%; + margin-right: 4%; } .main-title button{ @@ -297,7 +327,7 @@ aside { font-size: 14px; width: 130px; margin-top: 70px; - margin-left: 15%; + margin-left: 18%; } #barra-menu ul li a{ @@ -423,22 +453,56 @@ 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; } } @@ -504,13 +568,21 @@ aside { @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; } } @@ -683,15 +755,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: 220px; } @@ -701,10 +775,22 @@ a { cursor: pointer; border-radius: 10px; } + + .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; + } } /* RODAPE - PAGE 5 */ - .c-rodape{ width: 100%; background-color: #10101a;