O Projeto Portfólio Pessoal é um site profissional moderno, desenvolvido com HTML, CSS e JavaScript, com o objetivo de apresentar informações sobre a pessoa desenvolvedora, seus projetos e formas de contato de maneira clara, interativa e responsiva.
O projeto consome dados dinâmicos da API do GitHub, permitindo que informações como perfil e repositórios sejam carregadas automaticamente, mantendo o conteúdo sempre atualizado.
- Estrutura de páginas desenvolvida com HTML semântico
- Estilização moderna com CSS, utilizando:
- Variáveis CSS
- Animações
- Layout responsivo (desktop, tablet e mobile)
- Integração com a API do GitHub para:
- Exibição dinâmica das informações do perfil
- Listagem automática dos repositórios
- Exibição dos projetos em carrossel interativo utilizando Swiper.js
- Formulário de contato com validação no frontend, garantindo o correto preenchimento dos campos
- Página dedicada de confirmação de envio do formulário
- Navegação fluida com menu fixo e rolagem suave
- Interface intuitiva e organizada, focada na experiência do usuário
portfolio/
│
├── index.html # Página principal do portfólio
├── success.html # Página de confirmação de envio do formulário
│
├── assets/
│ ├── css/
│ │ └── styles.css # Estilos e responsividade
│ ├── js/
│ │ └── scripts.js # Integração com GitHub, carrossel e validações
│ ├── img/ # Imagens e ilustrações
│ └── icons/ # Ícones das linguagens e redes sociais
│
└── README.md
- HTML5: Estruturação semântica do conteúdo
- CSS3: Estilização, layout responsivo e animações
- JavaScript (ES6+): Interatividade, consumo de APIs e validações
- Swiper.js: Carrossel de projetos responsivo
- Fom Submit: Serviço de envio de e-mails via formulário HTML
- GitHub API: Fonte dinâmica de dados do perfil e repositórios
Para executar o projeto em ambiente local, siga os passos abaixo.
- Visual Studio Code (ou outro editor de sua preferência)
- Extensão Live Server instalada no VS Code
-
Clone o repositório:
git clone https://github.com/outwake/portfolio.git
-
Acesse a pasta do projeto:
cd seu-repositorio -
Abra o projeto no Visual Studio Code:
code . -
Abra o arquivo
index.html, clique com o botão direito e selecione "Open with Live Server".
O site será aberto no navegador e todas as alterações poderão ser visualizadas em tempo real.
Este site está disponível publicamente através do GitHub Pages. Você pode acessar a versão online pelo link abaixo:
🔗 https://outwake.github.io/portfolio/
Contribuições são bem-vindas. Caso tenha sugestões de melhorias, correções ou novas funcionalidades, sinta-se à vontade para abrir uma issue ou enviar um pull request.