LaureateLens is an elegant web application designed to illuminate the achievements of Nobel Prize laureates through an intuitive and visually engaging interface.
- Elegant Entry Animation: A sophisticated welcome animation introduces users to the site
- Responsive Design: Seamlessly adapts to all device sizes
- Dark/Light Mode: Toggle between carefully crafted dark and light themes
- Nobel Prize Data Visualization: Interactive charts and visualizations of Nobel Prize data
- Laureate Exploration: Browse and discover Nobel Prize laureates with detailed information
- Modern UI: Built with Material-UI components enhanced with custom animations and styling
- Frontend Framework: React with TypeScript
- Styling & Animations:
- Material-UI (MUI) for component library
- CSS Modules for component-specific styling
- Custom keyframe animations for overlay effects
- Tailwind CSS for utility classes
- Routing: React Router for navigation
- Data Visualization: Recharts for charts
- Maps: React Simple Maps for geographical data visualization
- Typography:
- Headers: Playfair Display for elegant headings
- Body: Crimson Text for readable content
- UI Elements: System font stack for crisp interface elements
- Color Palette:
- Primary Blue: #003087
- Gold Accent: #C19B6C
- Light Gold: #D4B88C
- Light Blue: #4B9FE1
- Dark Mode Blue: #63B8FF
- Animations:
- Smooth entry animations with cubic-bezier
- Staggered text reveal effects
- Interactive hover states on cards
- Seamless theme transitions
- Clone the repository
git clone [repository-url]- Install dependencies
npm install- Start the development server
npm run dev- Build:
npm run build - Lint:
npm run lint - Preview:
npm run preview
src/
├── components/ # React components
├── hooks/ # Custom React hooks
├── services/ # API and data services
├── utils/ # Utility functions
├── styles/ # Global styles
└── assets/ # Static assets
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.