Este é um projeto de um site de portfólio de página única, criado para ser um modelo base em workshops de desenvolvimento web.
O projeto foi desenvolvido em duas versões para atender a diferentes objetivos de ensino:
portfolio.html: Utilizando HTML e Tailwind CSS. Ideal para ensinar sobre frameworks CSS utilitários e desenvolvimento rápido.
portfolio_css.html: Utilizando HTML e CSS puro. Perfeito para ensinar os fundamentos do CSS, como Flexbox, Grid e Media Queries para responsividade.
HTML5: Para a estrutura semântica do conteúdo.
CSS3: Para a estilização (na versão de CSS puro).
Tailwind CSS: Framework CSS utilitário (na versão com Tailwind).
Google Fonts: Para a tipografia.
Você não precisa de nenhuma ferramenta complexa para rodar este projeto, apenas um navegador de internet!
- Clonando o Repositório
Primeiro, clone este repositório para a sua máquina local usando o seguinte comando no seu terminal:
git clone "link SSH do repositório"
- Executando o Projeto
Após clonar o repositório, siga os passos abaixo:
Navegue até a pasta do projeto que você acabou de clonar:
cd nome-do-repositorio
Abra um dos arquivos HTML diretamente no seu navegador de preferência (Google Chrome, Firefox, etc.):
Para a versão com Tailwind CSS, abra o arquivo portfolio.html.
Para a versão com CSS puro, abra o arquivo portfolio_css.html.
Pronto! O site já estará funcionando localmente. 🎨 Como Customizar
Personalizar o portfólio é muito fácil. Abra o arquivo HTML de sua escolha em um editor de código (como o VS Code) e siga as dicas abaixo:
Alterar Textos: Procure por textos como [Seu Nome] e substitua-os com suas informações pessoais.
Mudar a Foto de Perfil: Na seção "Sobre Mim", encontre a tag <img> e troque o valor do atributo src pelo caminho da sua foto. A imagem de placeholder usada é do placehold.co.
Adicionar Projetos: Copie e cole um dos blocos de "Card de Projeto" e altere as informações e a imagem para adicionar mais projetos ao seu portfólio.
Mudar as Cores (Versão CSS puro): No topo do arquivo portfolio_css.html, dentro da tag <style>, você encontrará as variáveis de cor (ex: --cor-principal). Altere seus valores para mudar o tema do site inteiro de uma vez!
Mudar as Cores (Versão Tailwind): Altere as classes de cor diretamente no HTML (ex: mude bg-indigo-600 para bg-blue-600).