Dinosaurs

Step into the Mesozoic. A rich, interactive encyclopedia of prehistoric life — built to explore, compare, and play.
mesoris.com

What's Inside

Encyclopedia Deep profiles for dozens of dinosaurs — diet, size, era, habitat, and fascinating facts. Every creature gets its own detailed page with rich visuals.	Timeline Travel through the Triassic, Jurassic, and Cretaceous periods. See how life evolved across 180 million years.
Compare Mode Put two dinosaurs side by side. Compare mass, length, era, and more — who was the real apex predator?	Science Hub Dig into articles on paleontology, fossil formation, extinction theories, and the latest discoveries. Includes myth-busting facts and kids-friendly versions.
Quiz Test your knowledge across 30 questions spanning three difficulty levels. Full multi-language support with explanations for every answer.	Puzzle Assemble dinosaur images from shuffled pieces. Three difficulty levels to match your skill.
Excavation Uncover fossils buried beneath the dirt. Carefully brush away layers to reveal what's hidden — become a paleontologist.	Multi-Language Routing Locale-prefixed URLs (/en/..., /ru/..., /es/...) with automatic browser language detection. Six languages across every corner of the app.

i18n & Accessibility

• 6 languages: English, Russian, Spanish, German, French, Italian — every dinosaur profile, article, quiz question, and game is fully translated
• Locale-prefixed routing with automatic browser language detection and manual switcher
• RTL-friendly layout engine
• Keyboard-navigable components
• Semantic HTML with ARIA labels
• Respects prefers-reduced-motion and prefers-color-scheme

Tech Stack

Layer	Technology
Framework	Vue 3 · Composition API · <script setup>
Language	TypeScript 5.7 (strict mode)
Bundler	Vite 6
Styling	Tailwind CSS 4 · CSS custom properties · design tokens
Routing	Vue Router 4 (locale-prefixed routes)
State	Pinia 2
i18n	vue-i18n 10
Animation	GSAP · CSS keyframes
Icons	Lucide · custom SVG sprite
Markdown	marked · DOMPurify
DX	vue-tsc · hot reload · @ path alias

Getting Started

# 1. Clone
git clone git@github.com:bigdevwhale/dinosaurs.git
cd dinosaurs

# 2. Install
npm install

# 3. Dev server (http://localhost:5173)
npm run dev

# 4. Production build
npm run build

# 5. Preview build locally
npm run preview

Open CLAW Agent — Coming Soon

We're building an Open CLAW agent (Continuous Learning About the World) that will:

• Crawl paleontology news sources, academic journals, and museum announcements daily
• Filter, rank, and summarize the most significant discoveries
• Push fresh, curated stories directly into the app's Science Hub — so the encyclopedia stays alive and current

No more static data. The Mesozoic is still being uncovered — and the app will grow with it.

Project Structure

src/
├── assets/styles/       # Design tokens, typography, animations
├── components/
│   ├── encyclopedia/    # Dino-specific components
│   ├── layout/          # Shell, nav, footer, SEO, language switcher
│   └── ui/              # Generic design system
├── composables/         # useMediaQuery, useParallax, useScrollAnimation…
├── data/                # Dinosaur profiles, articles, quiz questions, myths, eras, games
├── i18n/                # i18n initialization
├── locales/             # en/ ru/ es/ de/ fr/ it/ translation files
├── router/              # Vue Router with locale-prefixed routes
├── stores/              # Pinia stores
├── types/               # TypeScript interfaces
└── views/               # Page-level components (15 views)

License

MIT — explore, fork, learn, and build your own thing.