Projeto   |    Tecnologias & Ferramentas   |    Layout   |    Tópicos Abordados

Sobre o portfólio:

Um website do meu portfólio pessoal onde contem informações sobre mim, minhas experiências, formações, cursos e habilidades. O projeto foi desenvolvido durante a formação Front-end do Programa One - Oracle Next Education, onde recebemos um design base para seguirmos pelo Figma e cada aluno teria a opção para adaptá-lo ou não. Nesse caso, decidi seguir o design fornecido o mais fielmente possível, já que essa é uma das tarefas diárias de um dev Front-End.

Apresentação do projeto:

- Responsivo para tablet e mobile 🔸

Sobre o desenvolvimento do projeto:

Durante o desenvolvimento pude por em prática e aprimorar minhas habilidades utilizando HTML5 e suas tags semânticas, CSS3 juntamente com um pré-processador SASS e o padrão BEM nas linhas de código e também JavaScript.

💻 Deploy:

• Visite o projeto online: Portifólio

🔖 Layout:

Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.

Elementos principais da página:

[1] Uma sessão introdutória onde me apresento e falo sobre minhas paixões
[2] Conto um pouco sobre min
[3] Habilidades/skills e meus hobbies
[4] Formação acadêmica
[5] Experiência profissional e projetos
[6] Uma sessão de contato/formulário

Além disso, foi proposto um desafio nesse projeto onde precisávamos validar os campos do formulário de contato, validando se há espaços vazios ou se estavam no limite de caracteres definidos, e toda lógica foi implementada com JavaScript. Ademais, também foi feita validações pelo HTML utilizando algumas propriedades do próprio HTML como "required" e o uso do "pattern" para criar uma RegEx.

Tecnologias & Ferramentas:

Tópicos abordados durante projeto:

• JavaScript:

    - Utilização de array de objetos.
    - Capturar o target do elemento html que está sendo clicado.
    - Utilização de arrow function.
    - Captura elementos html da page com querySelector através DOM
    - Manipulação do CSS através do JS/DOM
    - Utilização de funções.
    - Utilização de condicionais if e else.
    - Utilização do metodo forEach() to scroll to section.
    - Manipulação string de acordo com input do usuário.
  

• HTML5:

    - Tags como main, header, section, div, textarea, span, footer, nav, ul button, img, a,  h1, h2, p.
    - Uso padrão de nomeclatura de classes no HTML com metodologia (BEM)
    - Adicionar mais de um nome de classe a um elemento html.
    - Adicionar link de fonte padrão a ser utilizada na aplicação na seção head do index.html.
    - adicionar link de estilos a ser utilizado na aplicação na seção head index.html.
  

• CSS3 e SASS:

    - Variáveis no SASS.
    - Uso de @mixin and @include e reaproveitamenteo do código.
    - Comprenssão dos arquivos para deixar a estilização mais leve.
    - Utilização da propriedade animation.
    - Utilização de @keyframes para efeitos de animção.
    - Utilização do flexbox.
    - Utilização da propriedade transition, transform..
    - Utilização de midia-queries na responsividade para outros dispositivos.
    - Utilização da refatoração dos estilos de cada seção de elementos html separando em arquivos CSS.
    - Utilização do @import para utilizar os estilos css de cada grupo de elementos em um unico arquivo css.
    - Utilização de pastas de midias e fotos (assets).
    - Utilização pseudo-elementos e pseudo-classes.
  

Badge de conclusão do desafio:

Minhas redes e contato: