Este repositório contém o código de um site de portfólio pessoal de Livancli Silvestre, desenvolvedor front-end. O site foi projetado para mostrar as habilidades, experiência e projetos da Livancli. Abaixo está uma visão geral da estrutura e recursos do código:
- Estrutura HTML
- Estilos CSS
- Funcionalidade JavaScript
- Design Responsivo
O arquivo HTML ( index.html) está estruturado da seguinte forma:
- Seção Cabeçalho: Contém o menu de navegação, logotipo e mensagem de boas-vindas com o nome e profissão da Livancli.
- Seção Sobre: Fornece informações sobre a formação, habilidades, experiência e educação de Livancli. Inclui guias para Hard Skills, Soft Skills e Educação.
- Seção de Serviços: Descreve os serviços oferecidos pela Livancli, incluindo Web Design, UI/UX Design e desenvolvimento Front-end.
- Seção Portfólio: Apresenta alguns projetos da Livancli com imagens, descrições e links para páginas externas.
- Seção de contato: inclui informações de contato, links de mídia social e um formulário de contato para os usuários entrarem em contato com a Livancli.
O arquivo CSS ( style.css) define o estilo de todo o site. Os principais estilos incluem:
- Design responsivo: consultas de mídia são usadas para garantir um layout visualmente atraente e funcional em vários tamanhos de tela.
- Estilos de navegação: Barra de navegação elegante com efeitos de foco nos itens de menu.
- Estilo de seção: Diferentes imagens e estilos de fundo para cada seção, criando uma experiência visualmente envolvente.
- Estilos de guias: as guias na seção "Sobre" têm um design elegante com uma transição suave entre as guias ativas e inativas.
- Vitrine do projeto: a seção do portfólio inclui um layout de grade com efeitos de foco nas imagens do projeto.
O arquivo JavaScript ( script.js) adiciona interatividade ao site. As principais funcionalidades incluem:
- Troca de guias: permite que os usuários alternem entre diferentes guias (Hard Skills, Soft Skills, Education) na seção "Sobre".
- Menu móvel: implementa um menu móvel responsivo com animação deslizante para telas menores.
- Integração com o Planilhas Google: envia os dados do formulário de contato para um Planilhas Google usando o Google Apps Script, fornecendo um back-end simples para envios de formulários.
- Mensagem de sucesso: exibe uma mensagem de sucesso após o envio bem-sucedido do formulário.
O site foi projetado para ser responsivo, garantindo uma experiência de usuário perfeita em dispositivos de todos os tamanhos. As consultas de mídia são usadas para ajustar o layout e o estilo de telas menores, como smartphones e tablets.
Sinta-se à vontade para explorar o código e usá-lo como modelo para o site do seu próprio portfólio. Se você tiver alguma dúvida ou sugestão de melhorias, entre em contato com Livancli Silvestre.
Observação: certifique-se de substituir o conteúdo do espaço reservado, como imagens e informações de contato, por seus próprios detalhes.