Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mehassanhmood/storyboard

data-analysis framer-motion javascript react scrollytelling storyboard tailwind-css vite

Last synced: 8 days ago
JSON representation

Host: GitHub
URL: https://github.com/mehassanhmood/storyboard
Owner: mehassanhmood
Created: 2024-11-19T05:06:20.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-11-26T09:01:20.000Z (2 months ago)
Last Synced: 2024-11-26T09:33:31.963Z (2 months ago)
Topics: data-analysis, framer-motion, javascript, react, scrollytelling, storyboard, tailwind-css, vite
Language: Jupyter Notebook
Homepage: https://mehassanhmood.github.io/StoryBoard/
Size: 1.6 MB
Stars: 0
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Inflation Impact and Investment Strategies Project

## Overview
This project addresses the critical topic of **inflation** and its impact on the value of money, investment strategies, and the real estate market. The aim is to educate users on tools to hedge against inflation and make informed financial decisions.

The project is presented using a **scrollytelling approach**, combining engaging narratives with **interactive line chart animations** to deliver insights effectively.

---

## Features
- **Scrollytelling Presentation**: A storytelling approach where users scroll to explore narratives and data visualizations.
- **Interactive Line Charts**: Animated charts showcasing:
- The effect of inflation on the value of a dollar over time.
- The growth of investments in real estate and index funds.
- Comparative analysis of returns from different asset classes.
- **Dynamic Animations**: Smoothly rendered visual transitions as users scroll.
- **Responsive Design**: Accessible across all device sizes and screen resolutions.

---

## Purpose
This project aims to:
1. Highlight the **erosion of money’s value** due to inflation from 2000 to 2024.
2. Provide insights into **investment tools** such as:
- Treasury bonds.
- Real estate.
- Index funds.
3. Educate users on the importance of **financial literacy** in combating inflation.
4. Guide users to understand how different asset classes can hedge against inflation.

---

## Technologies Used
- **React**: For building the interactive user interface.
- **Chart.js**: For rendering animated and customizable line charts.
- **react-chartjs-2**: A React wrapper for Chart.js.
- **Framer Motion**: For smooth scroll animations and element transitions.
- **Tailwind CSS**: For styling and responsive layout design.
- **JSON Data**: For storing and visualizing inflation and investment data.

---

## Setup and Installation

### Prerequisites
- Node.js and npm installed.

### Installation Steps
1. Clone the repository:
```bash
git clone https://github.com/your-repo/inflation-investment-project.git
cd inflation-investment-project
```
2. Install Dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```