PT

Portfólio Técnico • Front-end em evolução

Portfólio Tech

Experimentos, componentes e projetos em desenvolvimento front-end, com foco em interfaces educacionais, usabilidade e responsividade.

Componentes Front-end

Criação de componentes reutilizáveis em HTML e CSS, pensados para páginas educacionais e experiências de aprendizagem.

Barras de Progresso Responsivas

Desenvolvimento de barras de progresso com variações para desktop e mobile, utilizando bordas arredondadas, animações de preenchimento e design clean.

  • Implementação com HTML e CSS puro.
  • Uso de keyframes para animação suave.
  • Adaptação total para diferentes larguras de tela.

Botões com Ícones e Estados

Criação de botões com ícones SVG, estados de hover e foco, e ajuste específico de tamanhos para garantir legibilidade em diferentes dispositivos.

  • Ajustes finos via media queries.
  • Personalização de ícones em Elementor.
  • Boas práticas de acessibilidade visual.

Destaques de Texto com Gradiente

Componente de texto com gradiente aplicado via background-clip, preservando legibilidade e evitando cortes de palavras em diferentes resoluções.

  • Uso de linear-gradient e background-clip.
  • Correções para quebras de linha.
  • Aplicação em títulos e frases-chave.

Layouts & Páginas

Estruturas de páginas pensadas para conversão, clareza da informação e experiência amigável em cursos e jornadas educacionais.

Páginas de Captura para Formações

Layouts criados no Elementor com seções para vídeo, benefícios, depoimentos, FAQ e chamadas para ação, sempre com foco em mobile first.

  • Organização da hierarquia de conteúdo.
  • Uso de cores alinhadas à identidade visual.
  • Testes de responsividade em múltiplos dispositivos.

Estruturas para Portfólio Pessoal

Construção de páginas como este portfólio, com seções claras e navegação fluida, integrando seções em português e inglês.

  • Separação de conteúdo por áreas (Edu, Tech).
  • Navegação intuitiva e leve.
  • Foco em leitura confortável.

Seções para Projetos Educacionais

Layouts dedicados a apresentar projetos, estágios e imersões em Big Data, com descrições organizadas e listas de contribuições.

  • Estrutura descritiva com listas.
  • Atenção à escaneabilidade do texto.
  • Uso de cartões para separar temas.

Integrações & Jornadas Digitais

Organização de fluxos simples entre páginas, formulários e plataformas, pensando na jornada completa de estudantes e leads.

Formulários com Campos Personalizados

Definição de campos de captura relevantes (nome, e-mail, curso, objetivo) e estruturação de formulários em páginas de inscrição.

  • Uso de campos obrigatórios estratégicos.
  • Textos de placeholder claros.
  • Organização visual das seções.

Uso de Parâmetros UTM

Apoio na implementação de parâmetros UTM em links para acompanhar campanhas e origem de acessos às páginas.

  • Estruturação de links com utm_source, utm_medium, etc.
  • Boas práticas para nomeação de campanhas.
  • Organização de URLs para análise posterior.

Organização de Links em Ambientes Digitais

Curadoria e organização de links importantes (materiais, vídeos, formulários, repositórios) em uma lógica fácil de navegar.

  • Categorização por tema ou disciplina.
  • Uso de descrições claras para cada link.
  • Facilidade de acesso para estudantes e equipes.

Repositórios & Código

Conforme novos projetos forem sendo desenvolvidos, esta seção pode ser atualizada com links diretos para repositórios específicos.

Por enquanto, você pode acompanhar minha evolução técnica e meus experimentos em:

github.com/Giljared