Objetivo: Criar um site portfólio pessoal que apresente suas informações profissionais, projetos e um breve perfil sobre você. O site deve ser responsivo, visualmente atraente e interativo.
Requisitos:
- Estrutura do Site:
- Crie um documento HTML5.
- Utilize uma estrutura semântica adequada com as tags
<header>, <main>, <section>, e <footer>.
- Inclua metadados com a tag
<meta> para definir o conjunto de caracteres como UTF-8 e configurar a visualização responsiva.
- Conteúdo do Site:
- Cabeçalho: Deve conter o título principal do seu portfólio.
- Barra Lateral: Implemente uma barra lateral que liste projetos dinamicamente adicionados via JavaScript.
- Informações Pessoais: Crie uma seção que exiba seu nome, email, telefone e uma imagem representativa.
- Portfólio: Adicione uma seção dedicada ao portfólio que será adicionado dinamicamente via JavaScritp, com uma explicação breve que será apresentada com base no click do botão no menu lateral.
- Sobre Mim: Escreva um texto detalhado que descreva suas competências, experiências e interesses pessoais.
- Estilos:
- Use CSS externo para estilizar o site. Defina estilos para o cabeçalho, barra lateral, seções de conteúdo, e texto.
- Garanta que o layout seja responsivo e teste em diferentes tamanhos de tela.
- Interatividade com JavaScript:
- Implemente funcionalidades para adicionar os projetos na barra lateral dinamicamente.
- Adicione interatividade aos botões de projetos para exibir detalhes específicos de cada projeto quando clicados.
- Implemente uma função para esconder a seção de detalhes do projeto quando não estiver em uso.
Instruções Passo a Passo:
- Setup Inicial:
- Crie um arquivo HTML e outro CSS. Link o arquivo CSS no seu documento HTML.
- Prepare a estrutura básica do HTML com as seções mencionadas.
- Preenchendo o Conteúdo:
- No cabeçalho, adicione um
<h1> com o título "Currículo do Desenvolvedor".
- Na barra lateral, prepare um placeholder para inserir os botões de projetos.
- Em Informações Pessoais, inclua elementos para texto e imagem.
- Na seção Portfólio, adicione um parágrafo introdutório.
- Estilizando o Site:
- Defina o estilo do cabeçalho para que seja fixo no topo.
- Estilize a barra lateral para que fique fixa enquanto rola a página.
- Use cores, fontes e espaçamentos que garantam boa legibilidade e apresentação estética.
- Adicionando JavaScript:
- Crie um arquivo script.js para carregar os projetos dinamicamente e exibir os botões criados dinamicamente.
- Crie eventos nos botões para mostrar os detalhes de cada projeto na seção de Portfólio.
Entrega:
- Crie um repositório no git para realizar o envio dos arquivos HTML, CSS e JavaScript. Adicione o link na atividade do Classroom.
Avaliação:
- O projeto será avaliado com base na funcionalidade, uso eficiente de HTML, CSS e JavaScript, além da responsividade do site.
Tela inicial lista informações iniciais