O Projeto Portfólio Pessoal é um site profissional moderno desenvolvido com HTML5, CSS3 e JavaScript, criado para apresentar informações profissionais, habilidades, projetos e formas de contato de maneira organizada, responsiva e interativa.
Além de apresentar o portfólio, o projeto consome dados da API do GitHub, permitindo que as informações do perfil e dos repositórios sejam carregadas automaticamente, mantendo o conteúdo sempre atualizado.
Para oferecer uma experiência mais agradável ao usuário, foram implementados recursos como Modo Claro/Escuro (Dark Mode), Player de Música, Plano de Fundo Animado com Partículas Interativas, Carrossel de Projetos, Formulário Funcional e diversas animações.
- Estrutura desenvolvida com HTML5 semântico
- Layout moderno e totalmente responsivo
- Integração com a API do GitHub
- Exibição automática das informações do perfil
- Listagem dinâmica dos repositórios
- Carrossel de projetos utilizando Swiper.js
- Sistema de Modo Claro/Escuro (Dark Mode)
- Preferência do tema salva automaticamente no navegador
- Player de música com controle de reprodução
- Plano de fundo com partículas animadas utilizando Canvas API
- Interação das partículas com o movimento do mouse
- Navegação com rolagem suave entre as seções
- Formulário de contato com validação em JavaScript
- Página de confirmação de envio
- Interface moderna e intuitiva
📁 portfolio/
│
├── index.html
├── success.html
│
├── 📁 assets/
│
├── 📁 css/
│ └── styles.css
│
├── 📁 js/
│ └── scripts.js
│
├── 📁 img/
│
├── 📁 icons/
│
├── 📁 audio/
│
└── README.md
- HTML5
- CSS3
- JavaScript (ES6+)
- Flexbox
- CSS Grid
- Media Queries
- Variáveis CSS
- Animações
- Transições
- Gradientes
- Box Shadow
- Responsividade
- Manipulação do DOM
- Eventos
- Local Storage
- Canvas API
- HTML5 Audio API
- Fetch API
- Swiper.js
- GitHub API
- FormSubmit
Durante o desenvolvimento foram utilizados diversos recursos para melhorar a experiência do usuário:
- 🌙 Sistema de tema Claro/Escuro
- 🎵 Música ambiente com botão de reprodução
- ✨ Fundo animado com partículas
- 🖱️ Interação das partículas com o cursor do mouse
- 🎠 Carrossel responsivo de projetos
- 📱 Layout adaptado para Desktop, Tablet e Smartphone
- 🎯 Navegação fluida entre as seções
- 💜 Identidade visual baseada em tons de roxo, cinza e branco
- Visual Studio Code
- Extensão Live Server
git clone https://github.com/jonathanleao19/portifoliocd portfoliocode .Abra o arquivo index.html e selecione:
Open with Live Server
O projeto foi desenvolvido utilizando:
- HTML Semântico
- Organização por componentes
- CSS modularizado
- JavaScript separado por responsabilidades
- Estrutura limpa e de fácil manutenção
- Estrutura semântica
- Acessibilidade
- Organização por seções
- Flexbox
- Grid
- Variáveis CSS
- Responsividade
- Pseudo-classes
- Pseudo-elementos
- Transições
- Animações
- Gradientes
- Sombras
- Scroll personalizado
- Manipulação do DOM
- Eventos
- Validação do formulário
- Integração com GitHub API
- Dark Mode
- Local Storage
- Canvas
- Audio API
- Swiper.js
- Interface moderna
- Código organizado
- Layout responsivo
- Tema Claro/Escuro
- Fundo animado com partículas
- Player de música
- Integração com GitHub
- Carrossel de projetos
- Formulário funcional
- Navegação fluida
- Código limpo e semântico
- Fácil manutenção
O projeto pode ser publicado através do GitHub Pages.
Após a publicação, o acesso poderá ser realizado pelo endereço:
https://SEU-USUARIO.github.io/SEU-REPOSITORIO
Contribuições são sempre bem-vindas.
Caso tenha sugestões de melhorias, correções ou novas funcionalidades, fique à vontade para abrir uma Issue ou enviar um Pull Request.
Jonathan Leão
Desenvolvedor Full Stack em formação pela Generation Brasil, apaixonado por tecnologia, desenvolvimento web e criação de soluções modernas e funcionais.
GitHub:
LinkedIn: