Bem vindx ao meu portifólio

Vamos jogar?

Jogar

Turbine seu grande ou pequeno negócio

Esse jogo que você acabou de ver foi feito com HTML, CSS e Javascript. Sabe o que dá pra fazer com essas linguagens? Esse site por exemplo. Turbine seu grande ou pequeno negócio, onde mais as pessoas vão te achar se não for na Internet?

 
                                        
    method: "GET",
    headers: {
        Authorization: `Bearer ${userAccessToken}`     
    }
    })
    .then(response => response.json())
    .then(({beats})) => {
    beats.forEach((beat, index) => {
        console.log(`Beat ${index} starts at ${beat.start}`);
    })
    }

Deixe sua marca por aqui

Um pouco

Sobre mim

Currículo Lattes

Quem sou eu?

Victor Hugo de Jesus Oliveira, 16 anos

Motivado a aprender coisas novas das mais diversas áreas do conhecimento.

Sou designer gráfico e programador Front-end, atualmente trabalhando com freelancer.

Cursando o Ensino Médio Técnico em Eletrônica no Instituto Federal da Bahia (IFBA) e aluno da escola de computação gráfica SAGA no curso de Play Game, onde estudo o desenvolvimento de jogos.

Atualmente sou entusiasta em desenvolvimento web, conhecendo as linguagens HTML, CSS, JS e Python.

Download Currículo
victor_hugo

Cursos, participações e certificados

Cursando

Finalizados

Experiência nos aplicativos

Linguagens de marcação e programação

Esses são alguns dos

Meus projetos

Explorar

Destaques

Logomarcas

Luz, câmera e ação!
Esses são alguns dos meus projetos audiovisuais

Alguns dos trabalhos Audiovisuais criados no Premiere, After Effects, Animate, e Character Animator.

Os vídeos também estão disponibilizados no Youtube.

Assistir no Youtube
video_1 play

Ilustrações

Web Design

Impressos

Social Media

Stories

Modelagem 3D

Materiais

Ui/Ux Design

Programação

Clone Cadastro Google

Código HTML

 
                                                        
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Criar sua conta do Google

    <link href="css/style.css" rel="stylesheet">
    <link href="cadastrando.php" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="https://www.google.com/favicon.ico">

</head>
<body>
    <section id="cadastro">
        <img id="img" src="https://res.cloudinary.com/demo/image/fetch/f_auto/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" height="24px" width="75px">
        <h1 id="titulo">Criar sua conta do Google

            <form id="form" name="signup" method="post" action="cadastrando.php">
                <input id="nome_input" type="text" name="nome" value="Nome">
                <input id="sobrenome_input" type="text" name="sobrenome" value="Sobrenome">

            
                <input id="email_input" type="text" name="email" value="Nome de Usuário" />


                <p id="aviso">Você pode usar letras, números e pontos finais


                <input id="senha_input" type="password" name="senha" value="Senha">
                <input id="confirmar_input" type="password" name="confirmar" value="Confirmar" />


                
                <div id=rodape>
                <input id="btn_login" type="submit" value="Faça login em vez disso" />
                <input id="btn_prox" type="submit" value="Próxima" />
                </div>
            </form>

        <div id="simbolo_direita">
        <img id="simbolo" src="https://ssl.gstatic.com/accounts/signup/glif/account.svg" alt="icon">
        <p id="texto_simbolo">Uma única conta. Todo o Google 
 trabalhando para você.

        </div>

    </section>
</body>
</html>

Folha de estilo - CSS

 
                                                        
body {
    background-color: #FFFFFF;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#cadastro {
    width: 630px;
    height: 379px;
    background-color: #FFFFFF;
    border-radius: 7px;
    border-width: 0.75px;
    border-style: solid;
    border-color: #DADCE0;
    padding-left: 35px;
    padding-top: 43px;
    padding-bottom: 43px;
}

#img {
    width: 75px;
    height: 24px;
    padding: 0;
}

#titulo {
    color: #202124;
    padding-top: 16;
    text-align: left;
    font-family: 'Google Sans',arial,sans-serif;
    font-style: light;
    font-size: 24px;
}

#simbolo_direita {
    float: left;
    position: relative;
    top:-350px;
    left: 370px;
}

#simbolo {
    width: 244px;
    height: 244px;
}

#texto_simbolo {
    text-align: center;
    color: #202124;
    font-family: 'Noto Sans Myanmar UI',arial,sans-serif;
    font-size: 14px;
    position: relative;
    top:-20px;

}

#form {
    width: 350px;
    height: 293px;
    display: block;
    margin: 0;
}

#nome_input {
    width: 141px;
    height: 20px;
    color: #5F6871;
    font-family: roboto,'Noto Sans Myanmar UI',arial,sans-serif;
    margin-right: 15px;
    margin-bottom: 15px;

    border-radius: 5px;
    border-width: 0.75px;
    border-style: solid;
    border-color: #DADCE0;
    padding: 7px 11px;

    text-align: left;
    font-weight: 400;
}

#nome_input:focus {
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: #1A73E8;
}

#sobrenome_input {
    width: 141px;
    height: 20px;
    color: #5F6871;
    font-family: roboto,'Noto Sans Myanmar UI',arial,sans-serif;
    margin-bottom: 15px;

    border-radius: 5px;
    border-width: 0.75px;
    border-style: solid;
    border-color: #DADCE0;
    padding: 7px 11px;

    text-align: left;
    font-weight: 400;
}

#email_input {
    width: 325px;
    height: 20px;
    color: #5F6871;
    font-family: roboto,'Noto Sans Myanmar UI',arial,sans-serif;

    border-radius: 5px;
    border-width: 0.75px;
    border-style: solid;
    border-color: #DADCE0;
    padding: 7px 11px;

    text-align: left;
    font-weight: 400;
}

#aviso {
    color: #202124;
    font-family: 'Noto Sans Myanmar UI',arial,sans-serif;
    font-size: 12px;
    margin-bottom: 15px;
}

#senha_input {
    width: 121px;
    height: 20px;
    color: #5F6871;
    font-family: roboto,'Noto Sans Myanmar UI',arial,sans-serif;
    margin-right: 15px;
    margin-bottom: 15px;

    border-radius: 5px;
    border-width: 0.75px;
    border-style: solid;
    border-color: #DADCE0;
    padding: 7px 11px;

    text-align: left;
    font-weight: 400;
}

#confirmar_input {
    width: 121px;
    height: 20px;
    color: #5F6871;
    font-family: roboto,'Noto Sans Myanmar UI',arial,sans-serif;
    margin-bottom: 15px;

    border-radius: 5px;
    border-width: 0.75px;
    border-style: solid;
    border-color: #DADCE0;
    padding: 7px 11px;

    text-align: left;
    font-weight: 400;
}

#rodape {
    display: flex;
    justify-content: space-between;
}
#btn_prox {
    width: 80px;
    height: 34px;
    background-color: #1A73E8;
    color: white;
    font-family: 'Google Sans',arial,sans-serif;

    border-radius: 5px;
    text-align: center;
    font-weight: 400;
    border: none;
    display: inline-block;
}

#btn_login {
    width: 160px;
    height: 34px;
    background-color:white;
    color: #1A73E8;
    font-family: 'Google Sans',arial,sans-serif;
    

    border-radius: 5px;
    text-align: center;
    font-weight: 400;
    border: none;
    display: inline-block;
}

Código PHP

 
                                                        
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Cadastrando
    </head>
    
    <body>
    <?php
    $host = "localhost:3308";
    $user = "root";
    $pass = "";
    $banco = "cadastro";
    $conexao = mysqli_connect($host, $user, $pass, $banco) or die(mysqli_error());
    if (!$conexao) {
        echo "Error: Unable to connect to MySQL." . PHP_EOL;
        echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
        echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
        exit;
        }
    ?>
    
    <?php
    $nome=$_POST['nome'];
    $sobrenome=$_POST['sobrenome'];
    $email=$_POST['email'];
    $senha=$_POST['senha'];
    $confirmar=$_POST['confirmar'];
    $sql=mysqli_real_query($conexao,"INSERT INTO usuarios(nome, sobrenome, email)  VALUES('$nome', '$sobrenome', '$email')");
    if ($sql) {
        echo "inserido com sucesso" . PHP_EOL;}
    else {echo "erro de sql".PHP_EOL;} ;
    ?>
    
    </body>
</html>

Resultado

Google

Criar sua conta do Google



Você pode usar letras, números e pontos finais

Usar meu endereço de e-mail atual em vez disso



Use oito ou mais caracteres com uma combinação de
letras, números e símbolos

icon

Uma única conta. Todo o Google
trabalhando para você.
Jogos - Python

Index jogos

Index jogos

 
                                                        
import forca
import adivinhacao

print("***************************************")
print("***********Escolha seu jogo!***********")
print("***************************************")

print("Qual o nível de dificuldade?")
print("(1) Adivinhação (2) Forca")

jogo = int(input("Defina o jogo: "))

if(jogo == 1):
    print('Jogando Forca!')
    adivinhacao.jogar()
elif(jogo == 2):
    print('Jogando Adivinhação!')
    forca.jogar()

Jogo adivinhação

Jogo adivinhação

 
                                                        
import random

def jogar():

    print("***************************************")
    print("***Bem vindo ao jogo de Adivinhação!***")
    print("***************************************")

    numero_secreto = random.randrange(1, 101)
    total_de_tentativas = 0
    pontos = 1000
    rodada = 1

    print("Qual o nível de dificuldade?")
    print("(1) Fácil (2) Médio (3) Difícil")

    nivel = int(input("Defina o nível: "))

    if(nivel == 1):
        total_de_tentativas = 20
    elif(nivel == 2):
        total_de_tentativas = 10
    else:
        total_de_tentativas = 5

    while(rodada <= total_de_tentativas):
        print("Tentativa {} de {}".format(rodada, total_de_tentativas))

        chute_str = input("Digite um número entre 1 e 100: ")
        chute = int(chute_str)
        print("Você digitou ", chute)

        if(chute < 1 or chute > 100):
            print("Você deve digitar um número entre 1 e 100!")
            continue

        acertou = chute == numero_secreto
        maior = chute > numero_secreto
        menor = chute < numero_secreto

        if(acertou):
            print("Você acertou e fez {} pontos!".format(pontos))
            break
        else:
            pontos_perdidos = abs(numero_secreto - chute)
            pontos = pontos - pontos_perdidos
            if(maior):
                print("O seu chute foi maior que o número secreto")
                if (rodada == total_de_tentativas):
                    print("O número secreto era {}. Você fez {}".format(
                        numero_secreto, pontos))
            elif(menor):
                print("Você errou! O seu chute foi menor do que o número secreto.")
                if (rodada == total_de_tentativas):
                    print("O número secreto era {}. Você fez {}".format(
                        numero_secreto, pontos))
        rodada = rodada + 1

    print("Fim do jogo")

if(__name__ == '__main__'):
    jogar()

Jogo da Forca

Jogo da Forca

 
                                                        
import random

def jogar():

    print("***************************************")
    print("******Bem vindo ao jogo da Forca!******")
    print("***************************************")

    arquivo = open('palavras.txt', 'r')
    palavras = []

    for linha in arquivo:
        linha = linha.strip()
        palavras.append(linha)

    arquivo.close()

    numero = random.randrange(0, len(palavras))
    palavra_secreta = palavras[numero].upper()

    letras_acertadas = ['_'for letra in palavra_secreta]
    letras_faltando = str(letras_acertadas.count('_'))
    print( 'Ainda faltam acertar {} letras'.format(letras_faltando))

    enforcou = False
    acertou = False
    erros = 0

    print(letras_acertadas)

    while (not acertou and not enforcou):
    
        chute = input("Qual letra? ")
        chute = chute.strip().upper()

        if(chute in palavra_secreta):
            index = 0
            for letra in palavra_secreta:
                if (chute.upper() == letra.upper()):
                    letras_acertadas[index] = letra
                index += 1
        else:
            erros += 1
            print("Ops, você errou! Faltam {} tentativas.".format(6-erros))
            desenha_forca(erros)

        enforcou = erros == len(palavra_secreta)-2
        acertou = '_' not in letras_acertadas
        print(letras_acertadas)

    if(acertou):
        print('Você acertou')
        imprime_mensagem_vencedor()
    else:
        imprime_mensagem_perdedor(palavra_secreta)

    print('Fim de jogo!')

def desenha_forca(erros):
    print("  _______     ")
    print(" |/      |    ")

    if(erros == 1):
        print(" |      (_)   ")
        print(" |            ")
        print(" |            ")
        print(" |            ")

    if(erros == 2):
        print(" |      (_)   ")
        print(" |      \     ")
        print(" |            ")
        print(" |            ")

    if(erros == 3):
        print(" |      (_)   ")
        print(" |      \|    ")
        print(" |            ")
        print(" |            ")

    if(erros == 4):
        print(" |      (_)   ")
        print(" |      \|/   ")
        print(" |            ")
        print(" |            ")

    if(erros == 5):
        print(" |      (_)   ")
        print(" |      \|/   ")
        print(" |       |    ")
        print(" |            ")

    if(erros == 6):
        print(" |      (_)   ")
        print(" |      \|/   ")
        print(" |       |    ")
        print(" |      /     ")

    if (erros == 7):
        print(" |      (_)   ")
        print(" |      \|/   ")
        print(" |       |    ")
        print(" |      / \   ")

    print(" |            ")
    print("_|___         ")
    print()

def imprime_mensagem_perdedor(palavra_secreta):
    print("Puxa, você foi enforcado!")
    print("A palavra era {}".format(palavra_secreta))
    print("    _______________         ")
    print("   /               \       ")
    print("  /                 \      ")
    print("//                   \/\  ")
    print("\|   XXXX     XXXX   | /   ")
    print(" |   XXXX     XXXX   |/     ")
    print(" |   XXX       XXX   |      ")
    print(" |                   |      ")
    print(" \__      XXX      __/     ")
    print("   |\     XXX     /|       ")
    print("   | |           | |        ")
    print("   | I I I I I I I |        ")
    print("   |  I I I I I I  |        ")
    print("   \_             _/       ")
    print("     \_         _/         ")
    print("       \_______/           ")

def imprime_mensagem_vencedor():
    print("Parabéns, você ganhou!")
    print("       ___________      ")
    print("      '._==_==_=_.'     ")
    print("      .-\\:      /-.    ")
    print("     | (|:.     |) |    ")
    print("      '-|:.     |-'     ")
    print("        \\::.    /      ")
    print("         '::. .'        ")
    print("           ) (          ")
    print("         _.' '._        ")
    print("        '-------'       ")

if(__name__ == '__main__'):
    jogar()
Flappy Bird - JavaScript

Código HTML

 
                                                        
<div id="game">
    <div id="block"></div>
    <div id="hole"></div>
    <div id="character"></div>
    <p id="pontuacao-txt">Sua pontuação</p>
    <p id="pontuacao"> 0 </p>
</div>

Folha de estilo - CSS

 
                                                        
#game {
    width: 100%;
    height: 80vh;
    margin: auto;
    overflow: hidden;
    
    background-position: bottom;
    background-size: auto 100%;
    position: absolute;
    top: 0;
}

#block {
    width: 93px;
    height: 80vh;
    background-image: url(../img/pagina-inicial/pipe.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    left: 200vh;
    animation: block 4s infinite linear;
    margin: 0;
}

@keyframes block{
    0%{left:200vh}
    100%{left:-50px}
}

#hole {
    width: 93px;
    height: 150px;
    background-color: #0257ff;
    position: relative;
    left: 200vh;
    top: -80vh;
    animation: block 4s infinite linear;
    margin: 0;
}

#character {
    width: 36px;
    height: 26px;
    background-image: url(../img/pagina-inicial/yellowbird-upflap.png);
    background-size: cover;
    position: absolute;
    top: 100px;
    border-radius: 50%;
}

#pontuacao-txt {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--inverted-color);
    margin-bottom: 6px;
    position: absolute;
    top: 55px;
    right: 45px;
    z-index: 10000;
}

#pontuacao {
    position: absolute;
    top: 90px;
    right: 45px;
    z-index: 10001;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--inverted-color);
    margin-bottom: 12px;
}

Código JavaScript

 
                                                        
function Jogar() {
    var block = document.getElementById("block");
    var hole = document.getElementById("hole");
    var character = document.getElementById("character");
    var jumping = 0;
    var counter = 0;
    
    hole.addEventListener('animationiteration', () => {
        var random = -((Math.random()*300)+150);
        hole.style.top = random + "px";
        counter++;
    });
    setInterval(function(){
        var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
        if(jumping==0){
            character.style.top = (characterTop+3)+"px";
        }
        var blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
        var holeTop = parseInt(window.getComputedStyle(hole).getPropertyValue("top"));
        var cTop = -(577-characterTop);
        if((characterTop>551)||((blockLeft<20)&&(blockLeft>-50)&&((cTop<holeTop)||(cTop>holeTop+124)))){
            character.style.top = 100 + "px";
            counter=0;
            return
        }
        document.getElementById('pontuacao').innerText = counter;
        document.getElementById('btn-jogar').innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">Pausar`;
        
    },10);

}

function jump(){
    jumping = 1;
    let jumpCount = 0;
    var jumpInterval = setInterval(function(){
        var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
        if((characterTop>6)&&(jumpCount<15)){
            character.style.top = (characterTop-5)+"px";
        }
        if(jumpCount>20){
            clearInterval(jumpInterval);
            jumping=0;
            jumpCount=0;
        }
        jumpCount++;
    },10);
}
fim

Se interessou?

Fale comigo

Whatsapp E-mail
Esse campo não é obrigatório

Obrigado, em breve retornarei com uma resposta ; )

Trabalhando com o

Scratch e o Lego Mindstorms

Ler conteúdo

First Lego League e o Mindstorms

Conheci o universo da robótica através do campeonato First Lego League (FLL), no qual participei com a equipe Tecgold, do Sesi Reitor Miguel Calmon. Lá tive o primeiro contato com o EV3 e a programação no lego Mindstorms. Além de ser um aplicativo muito bom para entender lógica de programação e atuadores, tem uma fácil interface gráfica. No sofware, já tive experiência de criação de programações como seguidor de linha para a Olimpíada Brasileira de Robótica (OBR), My Block movimentar robô por centímetro, Plano Cartesiano, e muitos outros que ajudaram no meu aprendizado. Em 2018, na temporada Into Orbirt, a equipe Tecgold ganhou 2º lugar em programação na Etapa Regional Bahia. E a equipe Tecnomaniacos, na qual também fazia parte, passou para etapa nacional da OBR.

mindstorm

Desenvolvimento de jogos e o Scratch

Desenvolvo jogos utilizando o Scratch, uma plataforma gratuita do Instituto de Tecnologia de Massachusetts (MIT), ele é uma replica do Flappy Bird, fujo objetivo é bater as asas do pássaro desviando de obstáculos e pontuar o máximo de pontos possíveis.

Por que você precisa

De um designer?

Explorar

Saiba a importância desse profissional para você ou seu negócio.

Nesse artigo, vou te mostrar exemplos práticos porque você ou sua empresa precisam de um designer gráfico, esse é o profissional responsável pela criação visual de projetos, protótipos, propagandas, dentre outras artes.

Ele pode agregar valor a sua marca e promover ainda mais o seu negócio de forma que as pessoas se sintam atraídas por uma identidade visual elegante e chamativa. Abaixo, vamos ver alguns exemplos práticos que vão te convencer a contratar um artista digital.

mindstorm

Fonte: https://www.facebook.com/pao_caseiro_da_luh-112110910280313/

mindstorm

Fonte: https://www.dmais1.com.br/post/vende-se-pão-quentinho

O produto é o mesmo, a propaganda é quase a mesma, mas está claro que quem irá atrair maiores clientes é aquele que se apresenta da melhor forma. Do mesmo jeito que você veste a melhor roupa para ir a um evento importante, seu produto tem que estar bem apresentado para seus clientes, não é mesmo?!

mindstorm

Fonte: https://www.youtube.com/watch?v=WII2IEXxRno / https://www.santopaogourmet.com.br/

E qual dessas logomarcas mais de atraiu? Claro que se você não estiver com fome e se sentir atraído pelo pão, escolherá a da direita. Uma boa marca, deixa seu negócio marcado (por mais redundante que seja), para além disso, ela precisa se modernizar quando necessário, vamos ver mais um exemplo.

mindstorm

Fonte: https://blog.welancer.com/logos-famosas-criativa/

Por fim, fica uma cena da série Bequadro ? que retrata bem a falta que faz um designer profissional nas suas artes.

Agora que você entendeu a importância desse profissional, que tal contratar um hoje mesmo? Não perca a chance de alavancar seu negócio utilizando o poderoso recurso da identidade visual.

Esses são alguns dos

Meus projetos

Explorar

Esses são alguns dos

Meus projetos

Explorar

Por trás

Do projeto

Ler conteúdo