Faça seu portfólio do ZERO [React TS deploy] 🔥Tutorial🔥

E aí devis beleza bora fazer um portfólio do zero utilizando react typescript e matory y e o melhor de tudo eu vou ensinar como você faz o Deploy desse projeto e também coloca ele no ar para você conseguir enviar para recrutadores pra família pras pessoas que você gosta e o melhor de tudo é que eu vou ensinar como você pode ter uma url personalizada Ou seja que nem a minha www.adri.com.br Bora lá e esse aqui é o portfólio que eu desenvolvi essa já é a versão final mas eu vou mostrar para vocês como começar a

fazer isso aqui do zero então só para dar um overview de como ficou o portfólio logo que você entra ele já mostra uma animação dizendo i a software engineer eu achei que ficou muito legal porque tem alguns portfólios que parece que não tem muita vida e também para adicionar um pouco mais de animação eu coloquei esse svg animado aqui atrás que dá uma alegria uma cor pro portfólio Além disso eu quis deixar fácil pros recrutadores então aqui eu já coloco o download do teu currículo e também um botão pra pessoa entrar em contato com você

aqui em cima eu tenho um Nav bar então aqui você vai poder ir pro about para Skills e para projects eu vou com o scroll bar mesmo para mostrar porque tem mais algumas animações que eu coloquei aqui no site Quando você vem para baixo ele já tem essa animação aqui que mostra duas informações que você acha relevante e que você pode colocar eu coloquei experiência e educação como exemplo e aqui você pode escrever um texto Zinho só para se apresentar logo depois eu coloquei um pouco sobre skills porque eu acho que é importante pros recrutadores

eles saberem as Skills que você tem as Skills técnicas então aqui eu coloquei algumas tecnologias eh como exemplo pra pessoa usar e logo depois vai vir a sessão de projetos Eu acho essa parte muito legal principalmente para quem tá iniciando na área porque quando você ainda não tem experiência profissional em uma empresa você pode criar experiência fazendo projetos próprios E é claro fazer esse projeto do portfólio já é uma experiência mas depois que você fizer o projeto do portfólio isso aqui é um incentivo para você fazer mais projetos então aqui eu coloquei mais uma animação

quando você dá scroll os projetos vem e eles se juntam e daí aqui eu coloquei um projeto de exemplo o tempo que você demorou para desenvolver esse projeto uma imagem é importante sempre colocar uma imagem é legal porque mostra o que você fez e daí uma descrição as tecnologias usadas e dois botões um para ver o projeto e outro para ver o código e para deixar mais palpável para vocês eu também coloquei dois projetos que eu fiz quando eu Comecei na carreira lá em 2019 um projeto que eu fiz um labirinto e daí tem toda

uma lógica por trás para você criar esse labirinto do zero então eu criei um algoritmo que cria randomicamente labirintos que tem um caminho ótimo para você chegar na bandeira e também tem outros caminhos que não chega nada e daí aqui eu linkei o projeto se a pessoa clicar vai direto pro site do projeto e ela pode jogar tem três níveis de dificuldade tem até um about me aqui olha que bonitinho e também com coloquei o código que leva pro github e com o projeto que tem tudo certinho aqui é outro projeto que eu fiz com

mais duas pessoas que era para fazer uma blockchain para apostas e que ficou bem legal também só que eu não tenho mais o projeto online eu coloquei só de exemplo mas quando vocês fizerem É bom deixar o projeto atualizado e online justamente para mostrar o que vocês têm estudado e daí chegando aqui mais para baixo eu tenho um footer bem simplesinho que linka o meu github o meu LinkedIn e o meu e-mail e também dizendo aqui que todos os direitos são reservados e que o site foi feito por mim em 2024 essa aqui é a

versão desktop eu vou mostrar como fica na versão mobile então ele é responsivo eu venho aqui ele também escreve tem a animaçãozinha da svg Eu também coloquei um menu aqui bem simplesinho se eu aperto em Skills ele vai direto para Skills e ele também tem as animações de aparecer enquanto você scrolla o mouse então a medida que você vai scroll vai aparecendo as animações vou scrollar de volta só para mostrar aqui ó do about me também aparece essas duas animações e o menuzinho ele vai para onde Você clicou então é basicamente isso o projeto ficou

bem legal ele tá com uma visualização simples mas tem vários conceitos de react de material Y de typescript que eu vou usar nesse projeto então ele é bem completo para você aprender muita coisa e outra coisa que vai ser muito legal que eu já falei na introdução mas eu vou reforçar aqui é que eu vou ensinar como você faz o Deploy E como você coloca esse site no ar com uma url que você escolheu então você pode colocar o teu nome você pode colocar o nome da empresa que você quer criar ou a empresa que

você já tem então vai ficar bem personalizado diferente quando você usa um site que faz esse Deploy Mas sempre fica aquela url que tem um pon nome da empresa.com.br sabe dessa vez não você vai ter o seu nome na URL E aí bora acodar para para para tudo cortando rapidinho aqui pra Adriana do Futuro já fiz o Deploy olha só que chique adrianas sat.com.br a minha URL ficou perfeito eu amei e não vejo a hora de já mandar pra geral para me darem um feedback e também para recrutadores olha só que profissionalismo isso passa agora

volta pra Adriana do passado e para colocar a mão na massa eu tenho alguns pré-requisitos O primeiro é saber um pouquinho de JavaScript HTML e CSS JavaScript porque nesse projeto eu vou colocar typescript que é meio que um super JavaScript e também eu vou utilizar o react que é uma biblioteca de JavaScript então é importante você saber um pouquinho de JavaScript para ter uma base e para conseguir entender o que eu tô fazendo Eu também peço que você tenha uma noção de html CSS nesse projeto eu não vou abordar tanto esse assunto porque eu vou

utilizar material Y que é uma biblioteca de componentes então tem vários componentes que já vem prontos e eu só vou importar eles dessa biblioteca mas se eu quero fazer uma estilização a mais eu preciso entender um pouquinho de HTML e CSS outra coisa que é importante é você ter o node instalado para verificar isso você pode abrir o seu terminal e escrever node tro v e daí ele vai dar a versão do node caso você não tenha o node instalado é só você colocar node na internet vai vir aqui em download e daí você pode

seguir a instalação eu aconselho você usar o LTS que é uma versão mais estável do node e mais confiável então você escolhe aqui se é Windows Mac OS ou se você quer o Source code para instalar depois eu falo para você instalar o vs code que vai ser o editor de código que eu vou usar nesse projeto outra coisa que é importante também é ter o github uma conta no github ele é uma plataforma de hospedagem de código fonte e ele também ajuda no controle de versões eu vou falar um pouquinho também sobre comits semânticos

e vou dar uma pincelada de como você pode ir colocando esse código no github aos poucos então é interessante que você já tenha uma conta no github e por último eu peço que você venha com muita vontade de aprender e comprometimento a gente tá numa era de muita informação e que às vezes é difícil a gente selecionar o que que a gente vai estudar a gente é bombardeado com várias coisas e principalmente para quem tá começando a gente não sabe o que fazer então é importante você ter um foco e decidir fazer algo até o

final então se você realmente quer fazer esse portfólio colocar ele no ar mostrar pro mundo Se comprometa aqui em fazer ele até o final eu sei que demanda esforço provavelmente esse vídeo vai ficar bem longo mas é o esforço que vale a pena e é o esforço que traz o sucesso pra gente e uma coisa que eu acho muito legal desse projeto aqui que eu desenvolvi é que no projeto a gente vai poder expor outros projetos Então quando você terminar você vai ter também a vontade de criar projetos para poder colocar aqui nesse teu site

então leve isso como uma motivação para você aprender algo novo e também para você mostrar o seu trabalho pro mundo então bora começar a primeira coisa que você vai fazer é entrar na página principal do github e tá aqui em new para você criar um novo repositório aqui eu vou colocar o nome como my portfólio Daí você pode colocar como público ou privado e colocar em Create repository aqui ele já vai dar algumas instruções para você e começar um projeto Então por enquanto eu vou deixar desse jeito e eu vou vir aqui no meu terminal

e vou acessar a pasta que eu quero fazer meu projeto no meu computador então vou colocar aqui em projects e para fazer o projeto eu vou utilizar o Vit antigamente as pessoas usavam O cra que é o Create react app para criar aplicações react do zero mas ele foi descontinuado tanto é que se você for na documentação oficial do react ele não está mais lá mas o Vit está e ele é uma das recomendações para você criar uma aplicação do zero então eu vou utilizar ela justamente por ela mostrar uma performance melhor na hora de

buildar ser mais rápido e entre outras vantagens e daí para isso você pode vir aqui na documentação e apertar em get started e aqui você vai vindo para baixo e ele já mostra aqui ó para você criar o seu primeiro projeto é só você colocar npn Create viit latest e aqui ele pede que para você criar você precisa ter o node na versão 18 ou mais instalado então para fazer isso eu vou colocar vou copiar aqui npn Create withit latest vou voltar no meu terminal e daí depois eu vou colocar o nome do meu projeto

que vai ser my portfolio aqui ele vai perguntar se pode instalar eu vou colocar Yes ele pede para escolher o Framework eu vou escolher react e depois a variação eu vou escolher types script e está pronto eu posso colocar aqui ó CD my portfolio e daí eu coloco code ponto para abrir no visual Studio code caso você não saiba como abrir e não esteja configurado com esse code ponto uma forma que você pode fazer é vir nos teus arquivos mesmo então por exemplo eu vou vir aqui no meu arquivo vou vir em projects e aqui

vai tá o meu portfólio eu vou abrir o meu visual Studio code e eu posso pegar arrastar a minha pasta aqui para dentro e ele vai abrir então tem essas duas formas de você abrir o projeto no teu visual Studio code agora aqui dentro do vs code eu vou abrir o meu terminal e eu vou voltar aqui no meu github e aqui ele fala como criar um novo repositório on the Command line com linha de comando Então como que eu crio um novo repositório com linha de comando então eu vou colocar aqui ó Git init

e daí aqui ele fala que inicializou um novo repositório Git vazio eu vou colocar um Git AD readme e vou fazer o meu primeiro commit vou colocar Git AD ponto para dizer que eu vou comitar tudo que tá aqui e daí eu vou comitar vou colocar Git comit menos M abre aspas Pit starts Project Vit Então o meu comit vai falar que eu estou começando o projeto com vite vou até aumentar aqui para ficar um pouco mais fácil para vocês verem e vou copiar essas três últimas linhas porque eu já fiz o commit certo vou

copiar esses três comandos colocar aqui e dar enter se eu voltar aqui no meu github atualizar ele já pegou toda aquele código e colocou no meu github e agora eu vou voltar pro meu vs code vou dar um npn I para instalar todas as dependências que tem nesse projeto e vou startar o projeto eu gosto sempre de olhar aqui no pack de Jon dentro de scripts como que vai startar o projeto então aqui você tem que colocar Dev então npn Run Dev tem alguns lugares que você starta o projeto com npn Start então é sempre

importante você vir aqui no package Jone que script você usa para começar o projeto Então vou rodar o projeto e ele está rodando no local host 5173 então eu venho aqui eu já tenho um projeto criado zero que já tenho um computad mas eu quero limpar as coisas que eu não vou usar Então a primeira coisa vou deletar esse svg eu sempre falo errado esse svg aqui que eu não vou usar eu vou vir dentro da pasta source em assets deletar também o símbolo do react o app.css eu também não vou usar deletei apaguei aqui

também o CSS o Vit e o logo do react essa parte inteira dentro do app eu vou aumentar aqui a janela eu vou deletar também vou colocar só App vou deletar isso aqui e também isso aqui olha só como ficou bem mais clean ao invés de usar função dessa forma eu vou usar Arrow function e também fica mais fácil de utilizar typ script com ela então aqui eu só vou colocar con app igual e uma flechinha é a mesma coisa só que escrito de uma forma diferente eu vou deixar todas padronizadas dessa forma o index

CSS eu também vou deletar porque eu vou começar tudo do zero aqui no meio eu não vou mudar nada mas só para confirmar se tá tudo funcionando bem eu vou voltar aqui no meu Chrome e vou abrir a bem inspecionar ir no console e ó tá dando um erro ele não tá conseguindo achar o arquivo index.css porque eu deletei Então vamos ver onde que ele tá usando esse arquivo index.css Ah tem um Import aqui dentro do Main que realmente não existe mais esse arquivo vamos voltar aqui tá funcionando tá aparecendo o app aqui certinho e

daí quando você clica aqui no source control ele vai mostrar as mudanças que você teve desde a última vez que você comentou então eu tive essas mudanças é exatamente o que eu mudei eu deletei alguns arquivos quando é é de e quando é m de modified e agora eu vou comitar isso para fazer isso eu vou vir aqui vou colocar Git add ponto e daí eu vou escrever a minha mensagem de commit Git commit Men M refactor deletes unused code e agora eu vou colocar Git push se eu vier aqui no meu github e atualizar

ele mostra que já foi o commit vocês podem estar se perguntando Nossa por que que você colocou Fit por que você colocou refactor bem e existe uma padronização de commit que você pode fazer e é bem legal mas eu não vou explicar nesse vídeo porque não é muito tema mas eu tenho um repositório que é só uma colinha de comite semântico onde eu criei um documento baseado em dois outros documentos e criei em português para ficar mais acessível e daí eu falo um pouco sobre isso se vocês tiverem interesse que eu faça só um vídeo

sobre isso me deixa um comentário que daí eu posso priorizar fazer um vídeo sobre isso mas vamos voltar lá agora a gente vai começar a nossa primeira parte do desenvolvimento eu vou pegar o projeto pronto aqui só para mostrar para vocês Que esse projeto ele tem três sections section é uma tag do html se você ver aqui e colocar section HTML Ele explica mais ou menos o que que é uma section como que usa isso aqui é um conceito de html mesmo mas para simplificar isso aqui seria uma section esse Branco seria outra section e

esse terceiro seria outra section então nós temos três sections nesse projeto aqui pelo menos nessa página são três sections Então a primeira que eu vou começar vai ser com essa aqui e em projetos normalmente eu vejo essa primeira section sempre chamada como Hero que é a primeira coisa que o usuário vê quando ele entra então voltando aqui no visual Studio do Code eu vou entrar na minha pasta source e dentro dela eu vou criar uma pasta chamada pages dentro de Pages eu vou criar outra pasta chamada home e home com letra maiúscula porque ela vai

ser um componente e dentro de home eu vou criar um arquivo chamado home. tsx para ficar mais fácil eu vou vir aqui no meu App vou copiar tudo e vou colocar aqui na minha home eu vou selecionar o app e vou apertar control ou comand D para selecionar tudo ao mesmo tempo e escrever home para ver se esse componente tá funcionando eu vou chamar ele aqui dentro de app Então vou escrever home barra e vou importar você pode importar também apertando com o botão esquerdo do mouse aqui então o que que é para aparecer é

para aparecer app e depois aparecer o componente home que tem home escrito vamos voltar no Chrome então tá certo app e home ele tá chamando os dois componentes agora aqui dentro da home eu vou ter três sections então eu vou criar as minhas sections aqui eu vou criar uma pasta escrito sections e dentro dela eu vou criar a section Hero outra pasta chamada about e outra section chamada Project projects Opa about ficou dentro de her Pronto tem as sections e as três sections tudo isso tá dentro de home que tá dentro de Pages Existem várias

formas que você pode construir uma aplicação e organizar as pastas como essa é uma aplicação pequena eu achei melhor organizar dessa forma mas se você quiser se aprofundar mais nisso Existe uma forma que você cria páginas e dentro das páginas você cria componentes existem outra forma que você cria vários componentes daí você só reutiliza mas eu criei uma uma forma de organizar as pastas que eu achei melhor para esse projeto mas não necessariamente vai ser a melhor forma para você usar em outros projetos cada projeto tem a sua peculiaridade certo agora dentro de Hero eu

vou copiar tudo aqui de home dentro de Hero vou criar um arquivo chamado Hero ptsx e vou colocar o home e vou escrever aqui Hero o hero ele vai estar dentro do Home Então vou vir aqui em home vou apagar home e vou escrever Hero vou dar enter e ele já vai adicionar o hero se eu voltar aqui agora vai est app Hero mas aqui dentro do Hero está o home pode ser que tenha ficado meio confuso mas com o tempo essa organização de passas o que tá dentro do q vai ficando mais fácil de

entender então agora o que eu vou fazer é deletar esse App daqui e eu vou começar a editar o arquivo do Hero então para isso eu vou começar a escrever o meu código é de CSS e existe uma padronagem que a gente escreve o código CSS e agora pra gente começar a criar o nosso Hero e também fazer as estilizações é importante que a gente instale o matal y que vai ser nossa biblioteca de componentes Então vou mostrar aqui material ui toda vez que eu vou fazer qualquer coisa eu entro na documentação e daí aqui

tem o get started installation e daí eu posso ver aqui ó npn instyle material e Emotion styled vou vir aqui e vou instalar e vamos fazer o nosso primeiro componente estilizá-los e ela parece um pouco complicada mas depois você vai copiar e colar esse código em vários lugares você não precisa decorar isso então eu vou escrever conch styled Hero sempre quando eu vou fazer alguma coisa estilizada eu gosto de escrever styled daí eu coloco Igual styled e vou importar esse Style aqui do matory Y vou Abrir parênteses vou colocar aspas div e fora eu vou

Abrir parênteses parênteses vir com a flechinha pra direita colocar um igual maior que agora vou Abrir parênteses e chave e dar enter vou deixar esse aqui parado um pouco porque existem vários parênteses várias Chaves e fica um pouco confuso mas é dessa forma que eu gosto de escrever os componentes estilizá-los que já tem um Olá aqui com background Preto certo tá funcionando Isso aqui é uma coisinha pequenininha mas já deu para utilizar vários conceitos Então agora eu vou tentar importar aquela minha foto redonda que fica na tela e para fazer isso aqui dentro da pasta

assets eu vou criar uma nova pasta chamado images e dentro da pasta images eu vou colar uma foto chamado avatar.png você pode simplesmente copiar e colar ela aqui sem problemas se eu vier aqui e mostrar a foto para você vocês Ela tem ela tem uma dimensão quadrada pode parecer que não mas ela é uma foto quadrada então as fotos que vocês forem colocar como Avatar eu aconselho que vocês coloquem ela no formato quadrado que depois quando a gente deixar ela redonda ela vai ficar bem centralizada então beleza agora eu vou importar a minha imagem aqui

então eu vou escrever a tag image source e dentro de source eu tenho que importar a imagem para importar a imagem eu vou vir aqui Import vou dar um nome vou dar o nome de Avatar from e daí eu vou tentar chegar na pasta que tá o avatar dois pontos Barra do pontos Barra do pontos barra dois pontos barra assets images e Avatar e daí esse Avatar aqui eu vou colar dentro do source se eu voltar aqui a imagem tá gigantesca eu quero transformar essa imagem em redondinha e eu quero estilizar ela então a forma

que eu vou estilizar é usar essa lógica aqui então eu vou copiar isso aqui vou colar e vou criar uma nova um novo componente chamado styl image aqui eu vou querer estilizar uma tag de imagem Então vou colocar image aqui e aqui eu vou trocar o image por Style image se você salvar e voltar vai est a mesma coisa então o que isso significa que tudo todo o código CSS que eu colocar aqui dentro ele vai estar estilizando a tag Image é como se você adicionasse uma classe mas de uma forma um pouco diferente então

aqui dentro da image eu vou colocar um wif de 30% um border radius de 50% para ficar redonda e vamos ver como ficou ó já ficou bem melhor certo agora eu quero entrar num conceito do material e também se você entender um pouco de CSS você vai entender mais ou menos como funciona outras bibliotecas funcionam mais ou menos assim tipo Bootstrap e mas é que a gente vai criar grids na tela para ajudar a transformar esse site ficar mais responsivo então vou vir aqui de volta no material ui escrever Grid para mostrar para vocês na

documentação como que funciona mas existe um componente chamado Grid e o que ele faz você vai ter uma tag chamada Grid container e depois dentro você vai ter uma tag read item e daí você vai colocando os itens que você quer e o espaço que ele vai tomar na tela se ele for tomar 100% do espaço você tem que usar o XS = a 12 nesse caso o XS significa que é para small screen para telas pequenas depois eu vou dar um overview também Break points que já vem tudo configurado dentro do matory Y que

é muito legal mas só para demonstrar o funcionamento do Grid primeiro quando você coloca que o primeiro item ele ocupa oito significa que ele ocupa oito de 12 e o segundo item ocupa qu 4 é 4 de 12 então você soma oo com 4 vai dar 12 é por isso que aqui só vai ter esses dois itens porque é o total tem que somar 12 então aqui ó oito de tamanho e Quatro de tamanho fica nessa proporção quatro de tamanho e Oito de tamanho fica nessa proporção Então o que eu vou fazer eu vou copiar

esse Grid aqui e vou colar aqui importar o Grid e o item opa Na verdade o item eu vou deletar mas é só pra gente poder ver como que funciona isso aqui tá tudo em preto né mas aqui ó o oito tá ocupando todas ess passao quatro esse aqui e daí o quatro esse aqui e o oito todo aquele ali se a gente olha pro nosso projeto pronto parece que aqui tá ocupando quatro de 12 e aqui oito de 12 assim mais ou menos então o que que eu vou fazer eu vou vir aqui dentro

e vou colocar quatro aqui oito aqui e vou deletar esses dois outros que eu não vou usar e a minha imagem eu vou colocar dentro do primeiro Grid item então se eu voltar aqui minha imagem ficou bem pra esquerda normal mas se eu inspecionar tá vendo que aqui tá ocupando quatro de 12 aqui oito de 12 ele já deu meio que uma ajeitada nas coisas agora um problema que eu tô tendo é que tá tudo muito pra esquerda Normalmente quando você entra em algum site existe meio que um contêiner que deixa tudo alinhado e eu

vou dar um exemplo para isso vou entrar no site do airbnb e eu vou simular Como se eu tivesse numa tela muito grande ó por exemplo uma tela de tablet é mais ou menos 768 pixels daí eu venho para uma tela um pouco maior de laptop daí para uma tela um pouco maior daí agora para uma tela 2500 Mas eu posso tentar aumentar mais ainda vou colocar aqui ó 3.000 tá vendo que tem esse espaço aqui que ele fica em branco se aumentar para quatro se eu aumentar para cinco Então significa que é um momento

ele não vai mais crescer pro lado essa tela porque agora também tem muita gente que tem tela Ultra Wi que ela é bem compridona e para não ficar deformado é o nosso site é importante a gente ter esse contêiner aqui que compõe todas as coisas se a gente vier aqui inspecionar tá vendo que tem essa parte que é laranjinha aqui do lado esse é o nosso container Então se a gente olhar aqui a gente tem um container e também tem um pading e o matal Yi ele já vem com um componente Def que se chama

container então ele mostra aqui que o contêiner ele vai ter o Max with if o maior tamanho de largura que a que a tela vai ter e que depois disso o conteúdo vai ficar ali no meio ele não vai esticar mais pro lado então aqui eu vou criar dentro do Style Hero uma tag contêiner e vou colocar tudo dentro do contêiner Vou importar o contêiner E se eu voltar aqui já existe um espacinho aqui que tá pro lado que antes não existia Ó o meu mui container já tá aqui se eu fizer a mesma coisa

do de aumentando a tela tá vendo que ele sempre vai ficar meio que dentro do contêiner ele não vai sair então eu uso o contêiner para conseguir melhorar bastante a responsividade mesmo se a pessoa acessar o site de uma tela muito grande certo agora vamos colocar o meu nome né ou o nome teu nome E para isso eu vou usar o componente typography escrever aqui Adriana Sat só para mostrar como fica não tá aparecendo porque ele tá em preto e nosso fundo é preto então aqui no color eu posso escrever primary e ele vai ficar

azul por que que vai ficar azul depois mais pra frente eu vou explicar um pouco sobre temas e no tema a gente configura algumas cores que sempre vão ser usadas por padrão a cor que vem no material Y é azul Mas pode ignorar que mais pra frente eu vou explicar sobre isso e agora vou adicionar aa software engineer vou voltar aqui vou copiar e colar o typograph vou escrever a software engineer se eu voltar aqui ainda tá com um tamanho bem pequeno comparado com esse aqui e uma coisa legal do materi Y é que ele

já vem default o tamanho configurado de H1 H2 H3 e como esse aqui é o título eu vou colocar aqui um Variant H1 e depois eu coloco um Variant H2 e quando eu volto aqui no meu browser já tá bem mais parecido pelo menos o tamanho tá bem mais parecido com o que deve ser agora eu quero que essa section ocupe a tela inteira e para fazer isso existe uma propriedade do CSS que que eu posso colocar height ig a 100 VH 100 VH significa que vai ocupar 100% a altura da tela e olha só

deu certinho então eu vou colocar aqui no meu código também dentro do styled Hero porque eu quero que esse componente aqui tenha uma altura de 100 VH e tá funcionando agora eu vou ajustar o tamanho da imagem ela tá 30% isso significa que ela vai ocupar 30% do tamanho da div olha o tamanho da nossa div mas a gente quer que ela ocupe 100% do tamanho então eu vou voltar aqui para 100% e ela vai ocupar tudo e se eu fechar aqui o meu inspector ele já vai mostrar que já tá ficando com uma carinha

um pouco melhor né E tá faltando aqui no design são esses dois botões Então vamos adicionar dois botões aqui embaixo do typography Button O primeiro é download CV e o segundo é contact me certo já adicionou dois botões aqui e eu também quero que tenha o Icone Zinho e o legal do mai Y é que ele já fornece vários ícones então se você vier aqui no site e procurar por Icon você vai ter vários ícones eu vou colocar um de download vou pegar esse ícone você copia a importação vem aqui cola a importação e daí

vai copiar o nome do componente e você pode colocar ele como um componente aqui dentro Ah e outra coisa que é importante você precisa instalar e esses componentes no teu projeto então você pode vir aqui e instalar é por isso que tá dando erro aqui no meu projeto porque eu não tenho essa biblioteca instalada Então vou copiar aquele comando e instalar aqui certo foi instalado vou voltar aqui e atualizar e tá funcionando olha só já apareceu o item de download e o próximo item é um item de e-mail então vou procurar aqui Um item de

e-mail vou copiar aqui voltar colar copiar o nome do do componente vir aqui e colar esse componente e olha só como ficou só que eu quero que isso aqui Fique Centralizado ao meio e não está e o texto também não está acho que no texto dá para dar mais um uma melhorada eu posso colocar aqui um text align Center e aqui no de baixo também posso colocar um Tex Aline Center olha só ele alinhou pro centro agora esses botões aqui eu quero que eles fiquem alinhados para o centro mas eu também quero que quando eu

venha no celular ele se adapte se vocês forem olhar agora o celular tá todo quebrado então para falar a verdade eu vou pegar isso aqui e já transformar numa visão de celular e o legal do materi Y é que ele tem Break points então se você vier aqui ele já tem por default alguns Break points que já vem certinho e você não precisa fazer essa configuração no seu projeto e uma coisa que eu não expliquei mas vou explicar agora é que quando você tem esse XS Você está se referindo ao Break Point Extra small daí

tem o SM que é small o md medium LG large e XL Extra large então agora a gente pode configurar algumas coisas esse aqui tá usando do Extra small Mas eu também posso dizer como que o Grid vai se comportar para telas de médio port para ficar mais simplificado esse projeto eu só vou usar o xs e o md esses vão ser os points para mudar o nosso Design da tela Então vamos lá eu tinha falado sobre o Grid para vocês e que tem o XS que vai ocupar 4 de 12 e 8 de 12

mas a gente também pode colocar aqui um MD Então vou colocar só um exemplo do MD também sendo 4 de 12 e o md aqui embaixo sendo 8 de 12 só que agora o XS a invés de ser 4 eu vou colocar 12 e eu vou colocar 12 ainda não salvei o meu projeto eu vou voltar aqui só para mostrar como tá agora esse aqui é uma tela XS eu vou salvar e vou voltar só ajustando aqui na tela eu vou colocar na visão de iPhone Então já dá para ver melhor como que tá ficando

né quando tá no desktop e quando tá no celular então aqui no celular ele ocupa 12 de 12 e 12 de 12 e aqui ele tá ocupando 4 de 12 e 8 de 12 é legal que você consegue colocar isso aqui para todos os Break points mas só para simplificar eu vou usar o xs e o md nesse projeto a mesma lógica eu quero usar agora para essa parte dos botões então a aqui nos botões eu vou criar um novo Grid do tipo container e dentro um Grid do tipo item vou copiar e colar vou

criar dois vou abrir aqui os grids e vou colar meus botões dentro esse primeiro botão e esse segundo botão e quando eu venho aqui na minha tela de celular um botão tá do lado do outro mas na verdade eu quero que um fique embaixo do outro e o que eu posso fazer aqui é colocar que eu quero que esse botão ocupe 12 em XSX esse botão ocupe 12 em xs e esse 12 em xs e quando ele tiver no desktop pense que a gente agora vai estar falando só sobre o contêiner que ele tá que

é esse aqui então dentro dessa distância eu quero que ele ocupa um espaço Então eu quero que esse ocupe um espaço e esse ocupe outro espaço aqui eu posso colocar um espaço maior mas aqui eu quero que ocupe 12 12 para um ficar embaixo do outro então aqui no Grid XS eu quero que ocupe 12 e no outro também no XS eu quero que ocupe 12 ó tá um do lado do outro vou salvar e vou voltar com um embaixo do E se eu colocar agora um desktop ficou um embaixo do outro porque ele Está

ocupando 12 de 12 12 de 12 Então como ele ocupa tudo ele não tem espaço para se ajeitar e ele vai para baixo mas na a partir da tela de médio PTE eu quero que ele ocupe 6 E6 a metade do tamanho Beleza Aqui tá ocupando seis e seis Os dois estão na mesma linha e aqui um está embaixo do outro mas eu quero que eles fiquem no meio da tela e uma coisa que é muito legal do material Y que eu consigo usar display Flex em alguns componentes então eu vou pegar aqui no Grid

item e colocar um display Flex e um justify content Center Então olha só como vai ficar esse botão aqui na div ele já tá no meio e esse aqui ele ainda tá alinhado na aonde ele começa né esse aqui já tá no meio esse aqui ainda não vou copiar esse pedaço de código e colocar no Grid item de baixo também e pronto os dois estão aqui E esse aqui um tá embaixo do outro agora Olhando como que eu gostaria que ficasse vamos comparar aqui primeiro que essa letra tá muito grande né mas o design do

meu botão é um pouquinho diferente e quando eu venho na tela de desktop eu tenho a impressão que os botões estão um pouquinho mais perto um do outro eu posso fazer para deixar o botão mais perto é diminuir o espaço que eles ocupam Então vou colocar aqui quatro ao inv vez de seis ele ficou mais perto mas eles ficaram mais pra esquerda Ó tem aqui vai ocupar quatro de espaço quatro de espaço e Quatro de espaço totalizando 12 eu quero que essa div inteira aqui a grandona também alinha pelo Centro que seria essa aqui então

também tenho que vir aqui no Grid container colocar um display Flex e um justify content Center pronto a linou no meio vamos ver como que tá no celular tá funcionando certo ainda também e continuando sobre o assunto de break points tem um componente que é o contêiner ele também aceita um Max wif e aqui dentro o Max wif pode ser LG MD SM XL e XS Eu testei alguns aqui e o LG foi o que melhor se adaptou então a tela sempre vai ter no máximo tamanho de LG Se eu tentar diminuir aqui ó e

diminuindo esse tamanho aqui sempre vai se manter constante que é o do meu contêiner então ele tem o Max wif aqui que é de 1200 vou voltar pro celular e agora eu quero fazer uns ajustes finos Por exemplo essa fonte tá um tamanho estranho é tá tudo em azul eu quero tirar essa borda branca que tem aqui do lado que é super feia tá me incomodando e O legal é que eu consigo fazer tudo isso configurando o materi Y por exemplo esse B que tem uma margem de o8 pixel quando você cria um projeto do

zero ele vem meio que defold ele vem padrão de fábrica com algum CSS que às vezes é Inconveniente pra gente e o Mati Y Já pensou nisso e ele tem esse CSS baseline que é um componente que tira esses csss que normalmente a gente não usa e daí você precisa fazer um Global reset para isso ele fala para você importar o CSS baseline no seu projeto então eu vou vir aqui no meu Main e vou copiar o CSS baseline e importar vou salvar se eu voltar aqui ó ele já se ajustou eu não tenho mais

aquela parte branca brc aqui no meu Body não tenho mais aquela margem Então essa é a primeira parte a segunda coisa que eu quero fazer é adicionar essa responsive meta tag ela ajuda a renderizar melhor a nossa aplicação dependendo do device que o usuário Está acessando então eu venho aqui no meu index HTML eu vou colar aqui a gente já tem uma meta tag bem parecida mas eu vou deixar aqui a gente pega do material e deletar a outra e pronto agora por último eu quero configurar o tema famoso tema o que que é o

tema quando você você coloca o material a dentro do teu projeto Você tem os componentes que você usa tem os ícones que você usa mas você também pode criar um tema e o tema ele fornece para você uma palheta de cores tipografia que é a fonte o tamanho das fontes e várias coisas espaçamento Break points Z index Transitions e components tem várias coisas e com o tema é legal que a gente pode criar um Dark mode e um Light mode você criar um tema com algumas cores e um tema com outras cores e pode ir

trocando mas agora para começar eu vou fazer o básico do do tema e pra gente conseguir configurar o tema dentro da nossa aplicação primeiro a gente tem que criar um tema Então vou vir aqui e copiar esse exemplo aqui ó que é Create them vou vir na minha pasta source e criar um novo arquivo chamado theme.ts vou colar aqui vou importar o Create team aqui no final vou colocar um Export default team e nas cores eu já separei algumas cores que eu gosto mas você pode colocar outras cores eu separei um cinza escuro aqui e

um verde e meu tema está criado mas eu preciso fazer algo para todos os meus componentes conseguirem utilizar o tema e é por isso que eu tenho um team provider eu posso copiar também esse team provider eu vou vir aqui no meu Main e vou colocar o team provider aqui ó vou importar ele e o team Vou importar o arquivo que eu acabei de criar como o CSS baseline e o app estão dentro do team provider tudo que tiver dentro do app vai conseguir pegar as características desse tema agora se eu voltar aqui na minha

aplicação Olha só as minhas letras que estavam azul que era a cor padrão do material Y agora elas estão cinzas por quê Porque a minha cor principal eu coloquei como cinza outra coisa que eu quero mudar também é a fonte então eu também pode posso adicionar aqui um typography E daí um Font Family e aqui dentro eu vou colocar uma fonte diferente que é essa nem sei falar o nome disso aqui sej sej o quando eu venho aqui a fonte já tá um pouco diferente se eu comentar a fonte volta não sei se vocês conseguiram

ver essa troca coloquei essa fonte só para mostrar mas aqui eu vou usar que eu mais gosto é a helvetica noi também não sei se eu tô falando certo vai ficar essa fonte ela é um pouco mais fininha eu gosto dela então Toda vez que você usar esse componente typography ele vai pegar essa fonte do teu tema mas caso você queira usar outras fontes eu vou deixar aqui ó uma colinha com várias fontes e daí é só você descomentar ou comentar a fonte que você quer como eu vou comitar tudo isso vocês podem pegar no

meu projeto depois escolher a fonte que vocês mais gostam para esse projeto eu vou deixar a RV canoi mesmo e agora um último ajuste que eu quero fazer em relação ao tema é que existe uma propriedade dentro do tema que você pode criar fontes responsivas de acordo com o tamanho do device que você tá acessando o site então por exemplo se eu venho aqui eu vejo que o meu H1 ele tá com o tamanho do Font size de seis R se eu deixo o mouse aqui tá falando ó 96 pixels tá a fonte se eu

venho no desktop também tá 96 e também tá 6 R mas eu quero que ele mude de tamanho de acordo com o device que eu tô se eu vier nesse projeto vocês vão ver que aqui ó meu H1 tá com o tamanho de 3.6 R ou 56 E se eu vier aqui ele tá com tamanho de 85 ou 5.35 então a fonte ela muda de acordo com o tamanho do device e para fazer isso é bem simples é só aqui na última linha antes de você exportar o tema você coloca esse team igual responsive Font

responsive Font sizes então eu importo aqui e aqui ao invés de ser con eu vou colocar um let porque eu estou mudando o valor então agora se eu venho aqui ó ele está com o valor de 85 pixels e agora diminuiu ficou para 56 ficou bem mais responsivo e as coisas parecem que estão ficando mais parecidas né olha só tá começando a pegar jeito e perfeito agora a gente já tem nosso tema instalado e configurado e também o matal ui eu acabei não comit na ordem eu vou fazer uma coisa que não é tão boa

de fazer mas eu vou fazer só para ficar organizado aqui quando a gente instalou o material y o Style components e tudo mais eu vou adicionar esses dois arquivos na staged area eo significa que agora quando eu comitar apenas esses dois arquivos vão subir pro remoto e esses dois arquivos foi quando eu instalei o material ui e o icons material ui então eu vou colocar aqui ó Git commit Men M sh installs material ui Emotion and icons material lip Lips e Git push certo então aqui já veio o que eu instalei eu quero também fazer

um comit só com a instalação a configuração do tema e dessas coisas do CSS baseline e tudo mais eu lembro que foi o arquivo aqui do Index que no app não foi no Main que eu coloquei o CSS baseline e o team provider o arquivo de tema e é isso então seria esses três arquivos então eu posso colocar um Git comit Men M bit confix material u team cssb Line daí agora eu dou um Git Push perfeito por que que eu fiz nessa ordem inversa justamente porque eu queria que vocês vissem como que funciona sem

o tema como funciona com o tema e agora que a gente fez isso eu quero mostrar algumas coisas sobre como a gente pode usar o tema então por exemplo aqui no typography o Color tá primary eu posso colocar secondary e olha só o que vai acontecer ele vai pegar minha cor secundária que é aquele Verde mas aqui eu quero fazer um projeto bem dinâmico e que se adapte a vários tipos de portfólios diferentes Então a primeira coisa aqui dentro do Style Hero olha só que legal quando a gente tem o tema instalado a gente pode

pode importar o tema dentro do nossos componentes então eu posso abrir umas Chaves aqui e escrever team E aí aqui a invés de usar background color Black eu posso importar o tema eu ponho ponto e ele já vai falando para mim o que que tem de opção vou colocar palet ponto primary pon Main e olha só ao invés de estar com preto ele já colocou uma cor um pouquinho mais cinza um cinza meio escuro só para melhorar a visão da gente enquanto a gente trabalha aqui e e dá para ver as mudanças que estão acontecendo

eu vou ajustar a tela para ficar um pouquinho melhor pra gente ver o que tá acontecendo Então se eu voltar aqui ó antes estava do Black e daí depois que eu importei o tema .pet p primary p Main ficou esse cinz Zinho e outra coisa que é legal é que existe uma propriedade você coloca o ponto aqui existe uma propriedade chamado cont contrast Text e o que que esse contrast text é ele vai pegar a cor de contraste do primary e daí ele vai decidir entre branco ou preto se a cor for muito escura o

contrast text Vai ser branco e se a cor for mais clara o contrast text vai ser preto no caso aqui ele tá sendo Branco porque a minha cor primary é aquele cinza escuro e para dar certo eu falei que eu queria deixar esse projeto bem dinâmico eu vou usar esse primary contact text vou só voltar aqui para copiar e vou voltar agora pro m para colocar aqui como a cor do meu typograph então eu vou colocar aqui ó e daí ele vai pegar branco então ele sempre vai se ajeitar a cor que vai ser o

fundo porque tem algumas cores assim que norm norment a gente vai usar preto ou branco ou cores bem mais neutras não vai ficar usando colorido em tudo então eu gosto de usar dessa forma porque daí fica meio padronizado e agora em relação ao botão eu vou colocar aqui color secondary só pra gente conseguir ver o botão melhor e ele também tem algumas variants que tem o contained que daí o botão ele fica com a cor né inteira tem o outlined que fica só em volta e tem o text que é só o texto eu vou

ser bem sincera aqui eu criei um botão novo e eu eu queria que ele fosse Branco infelizmente com o primary contrast text não dá para usar aqui no botão ele só usa para fazer um contraste de texto ele não funciona aqui então eu vou fazer uma gambi arra Zinha eu vou criar um botão do zero e vai ser legal porque agora a gente vai praticar um pouquinho mais de typescript para poder criar esse botão então eu vou melhorar aqui a visão da tela vou aumentar um pouco aqui o meu vs code e diminuir um pouco

a minha tela porque a gente quer ver esse botão aqui é isso que a gente quer trabalhar agora então a primeira coisa que eu vou fazer é aqui nas minhas pastas na pasta source eu vou criar uma nova pasta chamada components por que que eu vou criar aqui essa pasta components porque vai ser um componente que eu vou usar entre aplicação inteira Então eu vou deixar na sorce para dizer que ele é um componente um pouco mais Universal e daí aqui dentro eu vou criar uma pasta chamada styled Button e um arquivo chamado styled Button

também ptsx vou vir na home copiar a estrutura só e colar aqui no Style Button deletar esse Import mudar aqui por sty Button e aqui dentro a gente vai começar a criar o nosso botão estilizado para isso eu vou pegar vou fechar algumas coisas tem muita coisa aberta vou abrir de volta a parte de hero e vou só copiar esse código aqui ó do componente estilizado com CSS para não ter que escrever do zero fica mais fácil aqui eu vou colocar o nome de styled Button também vou importar o stylet e aqui eu vou escrever

Button porque eu quero importar um componente Button e fazer as modificações em cima dele e aqui eu vou importar o Style Button com um texto texto Beleza agora aqui dentro do Hero embaixo do botão de download eu vou importar o Style Button bem aqui tá nossa Style Button olha como ele tá feioso coitado a gente vai ter que fazer as mudanças aqui então a primeira mudança que eu vou fazer vai ser colocar aqui o background color é transparent depois eu vou colocar um border radios de três pixels só para ele ficar um pouquinho mais arredondado

Ele já mudou algumas coisas tá vendo eu vou colocar um pading de C pixels 15 pixels só para ele ficar um pouco maior um IDF de 100% para ele ocupar 100% do espaço que ele tem disponível aqui antes do Border ros eu vou escrever um border só um pixel Solid White só para ver como ele fica faltou a vírgula e já tá começando a ficar um pouco mais parecido com esse aqui né ó se a gente comparar começando a ficar mais parecido só que a letra tá muito pequena ainda mas aqui é ruim você escrever

a cor né então eu quero usar aquela cor de contraste do do texto que tá dentro do tema então aqui eu importo o te aqui aqui eu vou colocar as aspas um pixel Solid daí cifrão abre e fecha Chaves pin pon palet pon primary pon cont contrast text beleza certo Deu certo a cor que vai dentro do botão color também vai ser essa daqui do Contract Contract ah test text falei tudo errado outra coisa que é importante é quando a gente dá o Hover ele fica com a corzinha verde que é a nossa secondary e

daí para paraa fazer o Hover eu posso só colocar aspas simples e Comercial dois pontos Hover e daí agora dois pontos fora e aqui eu vou colocar o background color de quando tá com Hover então background color vai ser team ppte psary PM faltou uma vírgula aqui em cima e daí outra coisa que é legal é que na palheta ele tem o Main que é a cor principal só que dentro da secondary Olha só você tem o cont contrast text o Dark o light e o Main o Main é a cor que você colocou lá

e daí o light é uma cor um pouquinho mais clara da variação dessa cor e o Dark um pouquinho mais escura ó vou colocar o Dark para vocês verem como fica fica um verde um pouco mais escura e o light fica um verde um pouquinho mais claro eu acho que o verde mais claro fica um pouco mais bonito mas vai da do gosto de do que você tá fazendo mas eu vou deixar aqui com o light para mim perfeito agora eu quero não quero que tenha esse texto que tá aqui dentro vou até tirar ele

daqui que eu quero é passar o que tá aqui ó eu vou tirar essa parte do outro botão e vou colocar aqui dentro e ele já dá um um erro ele fala olha Children não tem propriedade Children nesse elemento Então eu preciso que esse botão ele aceite uma prop Children o que que é Children é tudo que tiver entre tags desse componente então isso aqui tudo é o Children então tudo que tá ali dentro ele vai ser renderizado então eu quero passar o Children e eu quero que o Children Apareça aqui ó beleza já tá

aparecendo tão vendo só que eu tô tendo um erro de typescript quando tem esse TS aqui significa um erro de Type script porque eu não disse Qual que é o tipo desse children então para isso eu tenho que criar uma interface Style stylet Button props e daí aqui eu vou colocar o Children e ele é do Type react node e eu tenho que importar esse react node que vem do react e para eu poder falar que esse Children é do tipo react node que eu posso fazer aqui é primeiro falar que esse componente é um

react.fc que é react function e daí colocar aqui entre esse maior q menor q o sty Button props tudo que tiver aqui significa que é a tipagem do que tá sendo passado como argumento ficou meio confuso né mas qualquer coisa volta um pouquinho Esse vídeo é bastante conteúdo assim denso Mas você vai acabar sempre fazendo igual e daí vai ficar assim natural para você eu sei que a primeira vez parece meio estranho mas deu certo eu tô conseguindo passar o download CV se eu voltar aqui e colocar tipo Adriana ele escreve aqui Fechou então eu

vou deletar esse botton secondary porque eu não vou usar mais e meu styled Button eu vou trocar esse aqui por Style Button lá em cima eu vou deletar o Button que eu tava usando antes para não ficar com Import ruim e já tá começando a criar uma forma melhor né mas o texto que tá dentro do botão ainda tá meio estranho e como que eu faço para esse texto ficar melhor eu posso colocar um display in Line Flex daí um align itens Center e um justify content Center e olha só já ficou bem melhor outra

coisa que eu quero melhorar é que eu acho que o ícone e o texto tá muito perto eu também posso colocar um GAP que é uma distância né entre os dois de 10 pixels e já ficou um pouco mais afastado olha só tá dando certo hein daí agora no Hero aqui dentro Eu só coloquei o texto eu não coloquei ele dentro de nada e eu quero manter uma padronização Então esse texto aqui eu vou dar um cont contrl x e eu vou colocar ele dentro de um typograph Olha só como ficou o download CV Ficou

bem melhor ficou com o tamanho padronizado que tem que ter uma tag p a mesma coisa eu vou fazer aqui nesse outro no Contact me eu vou colocar um typograph perfeito Estamos quase lá hein Agora eu eu gostaria que tivesse um espaçamento Entre esses dois e se eu aumentar a tela eles também estão grudados isso é algo que eu posso fazer com o Grid container no Grid container uma propriedade que eu posso dar o espaçamento entre os itens que estão dentro desse Grid container é o spacing então eu vou colocar aqui um spacing de três

e ó já deu um espaçamento comparando os dois o que tá faltando é deixar isso aqui alinhado no meio né Se a gente for dar uma olhada aqui a gente vai ter é essa div aqui que é onde tem o background color que é o nosso styled Hero que tem o nosso background color aqui e daí depois a gente vai ter o mui container tá vendo que o mui container ele não tá ocupando toda a tela é só essa pedacinho então a gente pode colocar um display Flex aqui ó nesse Style Hero Então posso colocar

ó um display Flex e agora Um align item Center e o align item Center alinha na vertical e pronto ele já veio aqui um pouco para baixo e agora vamos só conferir como que ficou no celular no celular também está funcionando bem e vamos fazer alguns ajustes finos Primeira coisa eu quero diminuir um pouco esse espaço aqui aqui eu quero que seja um pouco menor e aqui um pouco maior então para fazer isso eu vou vir nesse Grid grandão aqui né que eu tenho esses dois do item e do item que são esses dois grids

aqui então aqui eu vou colocar cinco e aqui eu vou colocar sete ele já deu uma ajeitada a foto ficou um pouco maior aqui também mudou um pouco o espaço e para ajeitar isso eu vou colocar a foto como 80% ela vai ficar um pouco Menorzinha e colocar uma borda na foto também a né border vou colocar com aspas um pixel Solid e daí eu vou chamar o tema né aqui eu vou abrir Chaves te vou chamar o tema aqui palet p primary PC contrast text aí já colocou uma bordinha na foto tá quase lá

agora eu quero criar essa animaçãozinha que tem aqui atrás e essa animaçãozinha eu peguei um svg pronto eu não criei isso aqui do zero Então eu só vou copiar aqui o meu animated background e colar dentro de component então o que que ele é ele é um componente que que retorna um svg animado é apenas isso é você pode pegar esse código olhando aqui no github fica mais fácil e vou dar uma dica para vocês Caso vocês queiram uma animação diferente vocês podem no site code entra aqui e procura por animated background e daí aqui

vai ter vários tipos de ol Nossa olha só que legal essa aqui da hora demais e o mouse vai acompanhando Aqui tem vários tipos de animações e vocês podem achar alguma que combina mais com que vocês estão querendo olha essa aqui é bem bonitinha também achei uma gracinha tem várias animações e daí às vezes só a forma que você importa a animação é diferente da forma que eu fiz mas olha essa aqui também super legal e tá usando só CSS da hora né então fica a dica mas eu vou fazer com essa animação aqui porque

ficou legal com o meu design então para utilizar essa animação eu vou voltar aqui no meu Hero e aqui nesse primeiro Grid que só tem a minha imagem eu vou precisar criar um Box um box também é um componente do e o legal do box é que você pode colocar várias coisas também aqui no box ele pode te ajudar a criar o IDF pode te ajudar a falar posição falar se tem margem se tem pading display Flex um monte de coisa e daí nesse caso eu vou criar o box para dizer que a position desse

Box é relative e daí dentro do box eu vou criar dois Box um com a position Absolute e aqui eu vou importar o meu animated Ground e ainda não tá aparecendo a animação porque falta fazer alguns ajustes o primeiro eu tenho que colocar um wif eu vou colocar um wif aqui de 100% vou colocar um top de menos 100 e um Wi de zero pronto a animação apareceu aqui vocês estão vendo vou deixar ela um pouquinho maior 150 tá ocupando melhor a tela vamos ver como ficou no celular deu certo também bem e eu também

quero deixar a imagem com o position Absolut Então vou criar outro Box aqui vou colocar um position absoluto vou fechar e vou pegar minha imagem e colocar dentro ó minha imagem já ficou na frente da animação e eu quero colocar um text Aline Center eu quero que a imagem fique no meio se a gente for olhar tá quase lá seria só algumas modificações uma coisa que tá dando diferença é que a gente tem esse Nav bar aqui em cima e eu vou criar rapidão um componente Nav bar aqui dentro tem a source components vou criar

aqui um Nav bar depois um nave bar. tsx vim no Home copiar colar aqui colocar nave bar e aqui escrever nave bar vou pegar e importar esse componente aqui na minha página na verdade na minha página home né então vou colocar o nove bar Então já vai ter um nove bar aqui em cima e o material a tem uma coisa chamada app bar que a gente vai poder usar então a gente vê aqui a gente usa um app bar e um to bar dentro mas eu vou colocar só o app bar aqui PR ficar simplificado

Então dentro do Nav bar eu vou importar esse App bar e vou colocar bem assim na mão rapidão esse about e importar o app bar Olha só como já ficou um pouquinho diferente aqui na position eu vou colocar Absolute que daí ele faz essa esse efeito aqui com a sombra que eu gosto e também tem outro componente que eu gosto que se chama o menu item a gente pode usar aqui fica legal que daí eu vou colocar aqui o about Skills e Project então ele já ficou assim só que ficou um embaixo do outro eu

quero só ajeitar isso aqui né para ficar bonitinho então eu vou criar um componente de estilização aqui dentro e vou colocar aqui um stylet toolbar porque tem um componente da do material que é o tubar que ele é usado dentro do app bar se vocês vierem aqui no exemplo ele tem o app bar e dentro tem o toolbar que é para deixar as coisas um pouco mais organizadas então eu vou importar aqui ó o Style toolbar e eu vou deletar o que tinha dentro né porque eu copiei de outro lugar ó ele já ficou um

pouquinho mais ajeitado só que eu quero fazer um display Flex para conseguir ajustar aonde vai ficar cada cada coisinha né e aqui eu vou colocar cada elemento e aqui no justify content eu vou colocar o Space evenly E olha como ele fica tá um pouco diferente Ah aqui eu escrevi projects bão s tá quase a mesma coisa aqui eu tenho um menu que ele vira um Burguer quando a gente diminuir a tela mas eu não vou fazer porque vai ficar muito comprido a gente tem que ajeitar essa parte aqui que quebrou do mobile mas a

gente está chegando lá hein ai gente só uma correção aqui aqui não é Absolute aqui é relative daí quando a gente muda pro pro mobile ele fica certinho é isso aqui que tava faltando e pra gente finalizar essa parte e já ter meio que um mvpzinn de dois e ele já vai dar esse espaçamento aqui que eu queria e agora entre os botões eu vou colocar um pading top de três Opa três aqui e daí ele já vai dar esse espaçamento também para mim olha só tá quase lá mas antes de passar para o próximo

passo eu quero comitar as coisas que eu fiz então a gente teve a gente criou o componente Hero a gente pegou na home criou o nove bar e o hero a gente criou o sty Button a gente criou o nove bar bastante coisa então coisas que não dependem de nada por exemplo o Style Button eu posso fazer um commit só dele posso vir aqui Git commit menos M Fit creates stylet Button component daí eu vou pegar e adicionar também o nov bar o nov bar meio que não depende de ninguém também eu vou só deletar

esse team aqui do Nav bar para parar de dar erro Então vou adicionar o nov bar aqui no meu Stage Changes e vou criar um Git commit Men M Fit creates eu vou colocar inits Nav bar Nav bar component eu vou colocar desktop também porque a gente tá fazendo só um desktop e eu coloquei elits porque foi iniciado só a gente não criou e terminou e finalizou e daí a gente tem o nosso animated background também dá para comitar só ele creat animated background comp e agora a gente vai ter o nosso Hero esse aqui

eu vou adicionar tudo então posso colocar Git AD ponto para adicionar todos os as Changes que eu fiz e daí eu vou colocar um Git commit Men M FIT creates Ah Hero component ui e aqui eu só criei a interface né Ainda não coloquei as ações e tudo mais então vou deixar só como Hero component ui e vou dar um Git push Opa Git push para mandar tudo pro meu repositório se eu vier aqui vai tá tudo bonitinho ah gente uma coisa Não se preocupem em fazer isso aqui bonitinho às vezes se comita o que

não deveria e tudo mais é Desencana disso mais importante você aprender a fazer esse projeto se você conseguir fazer o Git arrumadinho também legal mas se não conseguir não tem problema certo então vamos criar ação de quando a gente clica no botão do e-mail vou até trazer para cá vou colocar na visão de celular que acho que vai ficar um pouco mais fácil ah inclusive na visão de celular aqui faltou fazer um ajuste né que ficou muito para cima Então o que a gente pode fazer uma coisa que é legal do tema também é que

a gente pode estilizar de acordo com o tamanho da tela então por exemplo aqui no Style home eu vou copiar isso aqui mas se vocês quiserem escrever é assim assim que se escreve então tudo que tiver aqui dentro Eu vou até colocar um background color de head só para mostrar para vocês tinha escrito errado background color então quando ele tá assim nessa visão de celular ele fica vermelho e se eu colocar MD e blue ele vai ficar azul então na visão assim é a partir do MD ele fica azul e no celular ele fica vermelho

então tudo que eu colocar aqui vai ser menor ou igual a mobile e tudo que eu colocar aqui vai ser maior ou igual a mobile certo então a primeira coisa que eu quero colocar aqui é ajustar a minha o meu pading né meu pading top então meu pading top eu vou colocar aqui 100 pixels ó já ficou bem melhor ficou bem parecido Na verdade eu acho que na visão celular já tá bom não e nessa visão aqui de opa na visão de desktop aqui eu sinto que a imagem tá um pouquinho para baixo em relação

a e daí tem uma coisa esse pading top ele é aplicado tanto no celular mas ele é aplicado também é em coisas maiores se eu não especificar ele também vai ser aplicado aqui em mayork mobile então eu vou também aplicar um pading top aqui só para vocês verem se eu comentar esses dois pading ele sobe um pouquinho a imagem sobe um pouquito então aqui eu posso colocar um pad em top de zero só para ficar um pouco mais organizado e o que eu posso fazer também é diminuir um pouco essa imagem Então vou colocar aqui

uns 75 mas é praticamente isso eu vou aproveitar as mudanças que eu fiz aqui e eu vou mudar só tirar aqui o background color Blue e e o outro né É saiu o background e vou colocar um Git AD aqui Git comit menos M Fix porque eu tô consertando uma coisa é Hero component e e agora Git push fechou lhes agora finalmente vamos pra parte da ação né Eu quero que quando eu clique nesse botão download aqui aconteça alguma coisa no momento ó uma coisa que é interessante também você sempre tentar deixar o console limpo

não tem nenhum erro aqui se eu atualiza o aplicação não tem nenhum erro mas toda vez que eu apertar em download Eu quero que tenha alguma animação que aconteça uma ação né Falei errado desculpa então aqui no Style Button eu posso colocar um on Click e ele tá falando aqui não tem on click no styl Button por quê Porque no sty Button eu só falei que ele ia receber uma propriedade Children eu não coloquei One click Então vamos colocar o One click aqui e ele é do tipo é uma função que retorna void não retorna

nada então eu coloco One click aqui vou colocar aqui também e vou colocar dentro do botão on Click igual a on Click Certo agora eu vou voltar aqui ele tá aceitando mas ele quer que tenha nos dois Style buttons Tá certo então aqui eu vou colocar um só um console. log de down download e vou copiar esse on clique e vou colar aqui De contact vamos ver quando eu aperto em download aparece download Quando aperto em contact aparece contact o botão tá funcionando o Style Button também Então a primeira coisa eu vou já comitar aqui

do Style Button Git commit Men M Fit adds on Click at styl gente gente não precisa fazer comite para tudo que vocês fazem mas eu gosto de fazer assim porque depois quando você precisa procurar alguma coisa e você precisa achar no histórico fica muito mais fácil e outra coisa que acontece muito comigo é eu precisava fazer uma coisa que eu já fiz mas eu não lembro exatamente como que eu fiz e daí tem um comite perfeitinho exatamente as coisas que eu mudei então ó é maravilhoso eu acabei de reparar que a aula tá super comprida

eu vou precisar cortar essa aula e fazer uma parte dois trê quatro porque ainda falta bastante coisa e tem muita coisa que eu quero ensinar eu ainda quero falar como fazer essa animaçãozinha aqui como fazer as ações do download do contato como mandar o e-mail fazer essas animações da tela chegar assim uma de lado da outra bem de qualquer forma eu vou fazer assim eu vou comentar aqui esse Grid container que tem os botões só para a gente conseguir ter um mvpzinn e colocar o site no ar e daí depois a gente vai continuando até

terminar o portfólio inteiro Combinado então eu comentei aqui se eu voltar aqui a tela vai est funcionando ó só vai tá sem os botões é realmente só o começo e eu quero ensinar para vocês como que a gente vai fazer o Deploy e como a gente vai colocar esse site no ar tendo uma url que você customizou a URL que você quer e eu tenho o prazer em anunciar que quem está patrocinando esse vídeo é host Gear eles que me convidaram para fazer esse portfólio em react e eles têm preços muito bons para você fazer

hospedagem de site comprar domínio ter e-mail um monte de coisa e aqui entre os planos de hospedagem o mais popular e o que tem o melhor custo benefício é esse Business aqui falar algumas coisas que ele tem ele tem e-mail grátis Então você consegue ter o e-mail por exemplo o meu é info @adrian sate.com eu tenho o domínio Adriana satat então eu posso usar no meu e-mail fica uma forma muito mais profissional do que usar um provedor qualquer Você tem o SSL ilimitado Grátis Isso significa que eles eles dão o certificado de segurança para você

você também consegue o domínio grátis coisa que não tem por exemplo no single tem no Premium mas não tem no single e agora nesse aqui que é o business ele também tem o CDN grátis coisa que não tem no Premium o CDN ajuda a distribuir o seu site melhor pelo mundo e ele fica mais rápido eles até falam aqui que a velocidade do site aumenta em até 40% porque eles armazenam o conteúdo do site em cash Além disso tudo eles também tem a parte de hospedagem WordPress gerenciada criador de sites descomplicados segurança e o que

eu mais gosto é serviço e suporte serviço e suporte deles é incrível toda vez que a gente tá fazendo essa parte de site tem muita coisinhas e muitos detalhezinhos e o suporte deles nunca me deixou na mão então eu super recomendo e eu vou fazer aqui o passo a passo e colocar esse site no ar para mostrar para vocês como que a gente pode buildar esse site fazer o Deploy comprar o domínio e pô ele no ar Fechou então vamos aproveitar que eles estão com um preço bem bom dá para economizar 72 se você faz

esse plano eu vou adicionar o carrinho aqui e aqui no carrinho você pode escolher o período eu vou deixar no que já tá selecionado você pode criar uma conta ou fazer login como eu já tenho conta eu vou logar aqui e dep depois de fazer login você seleciona a forma de pagamento completa aqui e não se esqueça de colocar o cupom de desconto que é Sat para garantir mais desconto ainda então Olha só o tanto de desconto que você consegue aplicando esse cupom é só você finalizar o pagamento depois de pago você vai cair nessa

página aqui vou colocar criador de sites da Host Gear criar sites em branco e daí aqui eu vou colocar Adriana Sat ele vai me dar as opções de domínios que eu posso comprar e tem vários domínios que estão incluso nesse pacote que você comprou então eu vou comprar o adrianas sat.com.br e olha só ele mostra que tá available e tá grátis pro primeiro ano vou para o próximo agora eu posso selecionar os detalhes eu vou colocar aqui a pessoal e aqui eu tenho que inserir os detalhes de contato e agora depois que eu completei aquele

formulário ele registra o meu domínio e ele pergunta onde está o público alvo isso ajuda para saber em qual data center vai ser selecionado eu vou colocar aqui no Brasil e vou para o próximo e agora que terminou a configuração Eu tenho esse painel inteiro que eu posso fazer várias coisas o domínio ainda está sendo registrado eu posso criar um e-mail grátis eu posso ter backups diários eu posso ter várias coisas e agora vamos voltar para o nosso código porque eu vou buildar ele e para buildar é bem simples você pode vir aqui no Packet

Jon porque é uma colinha e daí tem os scripts e o build então você pode colocar npn Run build aqui nos arquivos eu vou até diminuir você vai ver que tem três pastas por enquanto e quando eu coloco Esse comando ele não budou porque deu alguns erros Então vamos ver os erros que deram Style Button em Hero Style Button não tá sendo usado Ah eu comentei aquele código dos botões mas faltou comentar aqui também então vamos buildar de volta ah agora tá funcionando e olha só lembra que eu falei que tinha três pastas agora ele

abriu esse aqui que é o dist e aqui no dish ele tem esse index pbl bljs que é um código gigantesco que tem tudo que a gente fez toda essa lógica agora que a gente tem essa pasta vamos voltar lá pra host game então aqui no HOST game se você vê o domínio já tá ativo se você clicar aqui no no link do teu site ele já vai est funcionando ó o site tá aqui e agora a gente vai fazer o upload desses arquivos do build dentro da Hoster para isso você vai vir aqui em

gerenciador de arquivos vai entrar em Public pode deletar esse arquivo que tá aqui não tem problema e daí você vai abrir a sua pasta que tem o portfólio eu vou abrir pelo terminal aqui então eu vou entrar na pasta dis que é onde ele colocou tudo que ele budou vou selecionar e vou jogar aqui dentro de Public ele vai fazer o upload agora agora eu posso vir aqui entrar no site e tcharan deu certo vocês viram que a imagem demorou um pouco para carregar então na próxima aula eu vou falar como melhorar isso e nosso

site já tá no ar se vocês quiserem entrar tá aqui ó perfeitinho pronto para você mandar paraa geral e na próxima aula o que que eu vou fazer eu quero separar em aulas menores para vocês conseguirem ir acompanhando mas a próxima eu vou fazer as duas funções para fazer o download do seu currículo e também fazer um botão que você clica e abre para você entrar em contato ó se você aperta aqui já abre o e-mail com o subject e também com uma mensagenzinha e depois tem várias coisas ainda que eu tô para ensinar essa

parte aqui do typing e daí eu vou usar um pouco de use effect use state algumas coisas de react um pouquinho de lógica que vai ser bem legal então já se inscreve e comenta aqui no vídeo O que que você gostaria que eu ensinasse e eu te vejo na próxima falou