Merged master

package.json

@@ -17,6 +17,7 @@
     "next": "^10.0.3",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-snowfall": "^1.0.2",
     "unfetch": "^4.1.0"
   }
 }

src/components/layout.js

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
+
+const Snowfall = dynamic(() => import('react-snowfall'), { ssr: false })
 
 import tabs from '../data/tabs.json'
 import constants from '../constants.json'
@@ -11,6 +14,7 @@ export default function Layout(props) {
   let href = props.route
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [userId, setUserId] = useState(null)
+  const [windowSize, setWindowSize] = useState([100, 200])
 
   if (href === '/' || href === '') {
     href = 'index'
@@ -42,10 +46,26 @@ export default function Layout(props) {
 
   useEffect(() => {
     closeSideBar()
+    setWindowSize([window.innerWidth, window.innerHeight])
+    window.addEventListener('resize', () => {
+      setWindowSize([window.innerWidth, window.innerHeight])
+    })
   }, [])
+  const snowflakeCount = (windowSize[0] + windowSize[1]) / 8
 
   return (
     <div>
+      <div
+        style={{
+          pointerEvents: 'none',
+          zIndex: 900,
+          position: 'fixed',
+          width: `${windowSize[0]}px`,
+          height: `${windowSize[1]}px`,
+        }}
+      >
+        <Snowfall snowflakeCount={snowflakeCount} />
+      </div>
       <div className="sidebar">
         <div className="headercontainer">
           <span