🦕 Paleopaedia - Encyclopedia of Prehistoric Life An interactive encyclopedia dedicated to exploring prehistoric creatures across 4 billion years of Earth's history. Browse fascinating animals and dinosaurs organized by geological era and period. Live Demo: paleopaedia.netlify.app 📚 About Paleopaedia is a passion project celebrating the incredible diversity of prehistoric life. Explore creatures from the earliest single-celled organisms to the last dinosaurs, organized by the geological timescale. Each creature includes:
📖 Detailed descriptions and facts 🎨 Images from Wikimedia Commons 📊 Scientific classification ⏰ Time period and era information 📏 Physical measurements (length, weight) 🗺️ Geographic distribution 🍖 Diet and lifestyle information
Perfect for dinosaur enthusiasts, students, and anyone curious about Earth's ancient past! ✨ Features
Timeline Navigation - Explore 11 geological periods from the Cambrian to the Quaternary Era Organization - Grouped by Paleozoic, Mesozoic, and Cenozoic eras Creature Search - Quickly find prehistoric animals by name Detailed Pages - Comprehensive information for each creature with scientific data Responsive Design - Works on desktop, tablet, and mobile devices Creature Counts - Visual indicators showing how many creatures exist in each period
🌍 Geological Periods Covered Cenozoic Era (Age of Mammals)
Quaternary (2.6 Ma - Present) Neogene (23 - 2.6 Ma) Paleogene (66 - 23 Ma)
Mesozoic Era (Age of Reptiles)
Cretaceous (145 - 66 Ma) Jurassic (201 - 145 Ma) Triassic (252 - 201 Ma)
Paleozoic Era (Ancient Life)
Permian (299 - 252 Ma) Carboniferous (359 - 299 Ma) Devonian (419 - 359 Ma) Silurian (443 - 419 Ma) Ordovician (485 - 443 Ma) Cambrian (538 - 485 Ma)
Ma = millions of years ago 🛠️ Tech Stack
HTML5 - Semantic markup CSS3 - Custom styling with CSS variables Vanilla JavaScript - No frameworks, lightweight and fast Static Hosting - Deployed on Netlify
📁 Project Structure paleopaedia/ ├── index.html # Home page with geological timescale ├── period.html # Period/era detail page ├── creature.html # Individual creature detail page ├── css/ │ └── styles.css # All styling and responsive design ├── js/ │ ├── periods.js # Period data and definitions │ ├── data.js # Creature database │ └── app.js # Application logic and navigation ├── README.md # This file ├── .gitignore # Git ignore file └── LICENSE # MIT License 🚀 Getting Started Prerequisites
A modern web browser (Chrome, Firefox, Safari, Edge) No server or build tools required!
Installation
Clone the repository
bash git clone https://github.com/yourusername/paleopaedia.git cd paleopaedia
Open locally
Simply open index.html in your web browser, or Use a local server (recommended):
bash # Python 3 python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000
# Node.js (http-server)
npx http-server
Visit http://localhost:8000
Deploy to Netlify (or GitHub Pages)
Connect your GitHub repo to Netlify Netlify will auto-deploy on every push Set build command to: (leave empty - static site) Set publish directory to: / (root)
📖 How to Use
Browse by Era - Click any period card on the home page View Creatures - Browse all creatures from that period Learn Details - Click a creature to see full information Search - Use the search box to find specific creatures Navigate - Use breadcrumbs to return to previous pages
🧬 Adding New Creatures To add a new prehistoric creature:
Open js/data.js Add a new entry to the creatures array:
javascript { id: "stegosaurus", name: "Stegosaurus", period: "jurassic", era: "mesozoic", scientificName: "Stegosaurus", intro: "A large herbivorous dinosaur with distinctive back plates.", description: "Stegosaurus was a large herbivore... [full description]", image: "https://upload.wikimedia.org/wikipedia/...", imageCaption: "Stegosaurus reconstruction", characteristics: { diet: "Herbivore", length: "7-9 meters", weight: "2.7 metric tons", lived: "150-145 million years ago", location: "North America" }, classification: { kingdom: "Animalia", phylum: "Chordata", class: "Reptilia", order: "Ornithischia", family: "Stegosauridae", genus: "Stegosaurus" } }
Commit and push to GitHub
🎨 Customization Colors Edit the CSS color variables in css/styles.css: css:root { --sand: #D4A574; --dark-green: #2D5A3D; /* ... more colors ... */ } Adding New Periods
Update js/periods.js with period definitions Add HTML cards to index.html Add color schemes to css/styles.css
🤝 Contributing Contributions are welcome! Ways to help:
🦖 Add more creatures - Research and add prehistoric animals to the database 🐛 Report bugs - Find issues? Let us know! 💡 Suggest features - Have ideas for improvements? 📸 Find better images - Discover higher quality images from Wikimedia Commons ✍️ Improve descriptions - Enhance creature facts and information
📝 License This project is licensed under the MIT License - see the LICENSE file for details. Note: Images are sourced from Wikimedia Commons and are used according to their respective licenses (primarily CC-BY-SA and public domain). 📚 Data Sources
Wikimedia Commons - Images and media Wikipedia - Creature information USGS - Geological timescale data Paleontological research publications
🎓 Educational Value Paleopaedia is perfect for:
🏫 Science class projects 📚 Learning about prehistoric life 🔬 Understanding evolutionary history 🎨 Creative research and exploration
🌟 Future Enhancements Potential features for future versions:
Interactive timeline slider Creature comparison tool 3D model viewer (when possible) Quiz and trivia game Family tree/evolutionary connections Mobile app version Dark mode Multi-language support
👨👩👧 About the Creator Built with ❤️ by a father and son who love dinosaurs and prehistoric animals! 📧 Contact & Feedback Have suggestions? Found an error? Want to contribute?
Open an Issue Submit a Pull Request