Skip to content

Narrando a história da Amazônia por intermédio da web, usando React.

Notifications You must be signed in to change notification settings

kleytoncarv/Historia_da_Amazonia

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 

Repository files navigation

📘 Amazônia - História e Parallax Experience

Este projeto React oferece uma experiência imersiva que combina elementos de design parallax com um conteúdo detalhado sobre a história da Amazônia. Com um design atrativo e interativo, os usuários podem explorar fatos históricos, desde a origem da floresta até as questões contemporâneas de preservação.

⚙️ Funcionalidades

Efeito Parallax: Elementos visuais dinâmicos que se movem em diferentes velocidades de acordo com o scroll do usuário, proporcionando uma sensação de profundidade. Conteúdo Informativo: Seções detalhadas que exploram a história, os habitantes indígenas, e a relevância ambiental e global da Amazônia. Navegação Simples: Menu de navegação com links diretos para diferentes seções do projeto.

Responsividade: Projeto otimizado para diferentes dispositivos e tamanhos de tela. Estrutura de Componentes

Header: Componente de cabeçalho com uma navegação simples e um título que destaca o tema "Amazônia".

ParallaxSection: Implementa o efeito parallax usando imagens e referências do React para criar uma animação com o scroll.

ContentSection: Apresenta um conteúdo detalhado sobre a história da Amazônia, dividido em tópicos históricos e curiosidades.

App: Componente principal que integra os outros componentes e estrutura a página.

⚛️ Tecnologias Utilizadas

React.js: Biblioteca principal para a construção do projeto. JavaScript (ES6): Para lógica de interação e manipulação de estados. HTML & CSS: Para a estruturação e estilização dos componentes. Imagens e Assets: Arquivos visuais como hill1.png, tree.png, e outros elementos gráficos para compor a seção parallax.

🛠️ Estrutura de Pastas

      src/
  |   
  │
  ├── components/
  │   ├── Header.jsx
  │   ├── ParallaxSection.jsx
  │   └── ContentSection.jsx
  │
  ├── assets/
  │   ├── hill1.png
  │   ├── hill2.png
  │   ├── tree.png
  │   └── ...
  │
  ├── App.js
  └── App.css

✨Estilização e Animações

As animações parallax são geradas através de manipulações diretas de style nos elementos referenciados, aplicando deslocamentos com base no scroll da página.

📝Fontes e Referências

Instituto Nacional de Pesquisas Espaciais (INPE) Fundação Nacional do Índio (FUNAI) World Wildlife Fund (WWF)

📩 Contato

Desenvolvido por Kleyton Carvalho – Entre em contato para mais informações ou sugestões.

About

Narrando a história da Amazônia por intermédio da web, usando React.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published