Added Most Streaks sidebar to home page to celebrate the resilient folks who bounce back from broken streaks

Why does using the same data object twice within a function not work? e.g.

```
async fetchData() {
this.streakData = await this.$axios.get('/api-endpoint')
this.topStreaks = this.streakData
.sort((a, b) => b.summary.currentStreak - a.summary.currentStreak)
.slice(0, 3)
this.mostStreaks = this.streakData
.sort((a, b) => b.summary.streaks.length - a.summary.streaks.length)
.slice(0, 3)
}
```

Gave up trying to fix this, went with fetching data from the endpoint TWICE to render the data I need! 😩