# Descrição
Desenvolvido como parte final do curso livre de páginas Web Responsivas, oferecido pelo site freeCodeCamp, completa a lista de 5 projetos propostos que englobam o processo didático do curso. Representa um portfólio online fictício, para exibição de algumas informações profissionais e pessoais, contatos e projetos do autor. Foi construído como uma Single Page, com menu fixo ao topo seguido, respectivamente, das seções de introdução, projetos, contato e rodapé. Seguindo o caso de usuário e as recomendações dos autores do curso, foi implementado utilizando apenas tecnologias básicas da web com um design simples.
Para este projeto utilizei SVGs para acrescentar detalhes ao design, como a logo e ícones. Para manter a propriedade de customização dos SVGs sem “sujar” a marcação da página, utilizei a API de Custom Elements que proporciona a importação do conteúdo do SVG como componente, permitindo a reutilização. Essa API também foi utilizada para criar o check button usado para alternar entre os temas claro e escuro, definidos por um conjunto de classes com cores pré-definidas para textos e fundos.
# Capturas de tela
# Estória de usuário
- Meu portfólio deve ter uma seção de boas-vindas com o id “welcome-section”
- A seção de boas-vindas deve possuir um elemento “h1” que contenha texto
- Meu portfólio deve conter uma seção de projetos com o id “projects”
- A seção de projetos deve conter pelo menos um elemento com a classe “project-title”, que representa um projeto
- A seção de projetos deve conter pelo menos um link que leve a um projeto
- Meu portfólio deve conter uma barra de navegação com o id “navbar”
- A barra de navegação deve conter pelo menos uma âncora que me permita navegar entre diferentes seções da página
- Meu portfólio deve conter uma âncora com o id “profile-link”, que deve levar ao meu perfil do Github ou do FreeCodeCamp em uma nova aba
- Meu portfólio deve utilizar pelo menos uma media query
- A altura da seção de boas-vindas deve ser igual ao da altura do viewport
- A barra de navegação deve sempre estar ao topo da página
# Aprendizados principais
- Cinco seções (menu principal, apresentação, projetos, contato e rodapé)
- Dark mode (com flag persistida localmente, para guardar a preferência do usuário)
- Input checkbox customizado para alternar o Dark mode
- Cards de projetos com imagem, descrição e ações
# Dificuldades
- Incompatibilidade de Custom Elements com navegadores antigos
- Incluir os arquivos SVG inline preservando a propriedade de customização