Snow!

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'
@@ -9,6 +12,7 @@ import constants from '../constants.json'
 export default function Layout(props) {
   let href = props.route
   const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [windowSize, setWindowSize] = useState([100, 200])
 
   if (href === '/' || href === '') {
     href = 'index'
@@ -24,10 +28,24 @@ export default function Layout(props) {
 
   useEffect(() => {
     closeSideBar()
+    setWindowSize([window.innerWidth, window.innerHeight])
+    window.addEventListener('resize', () => {
+      setWindowSize([window.innerWidth, window.innerHeight])
+    })
   }, [])
 
   return (
     <div>
+      <div
+        style={{
+          zIndex: 900,
+          position: 'fixed',
+          width: `${windowSize[0]}px`,
+          height: `${windowSize[1]}px`,
+        }}
+      >
+        <Snowfall snowflakeCount={300} />
+      </div>
       <div className="sidebar">
         <div className="headercontainer">
           <span