Snow!

package-lock.json

@@ -5932,6 +5932,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-snowfall": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-1.0.2.tgz",
+      "integrity": "sha512-wmKa7Vhl26Ixo5hBp3lgM9z7o43itLv7LF7IuuD0vZPh3TclfM2wokujQb/gg5Ml2c6r6hyU7WXmvMg63TkhtA=="
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "next": "^9.2.2",
     "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'
@@ -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

src/constants.json

@@ -1,6 +1,6 @@
 {
   "siteUrl": "https://qmining.frylabs.net/",
-  "apiUrl": "https://api.frylabs.net/",
+  "apiUrl": "http://localhost:8080/",
   "mobileWindowWidth": 700,
   "maxQuestionsToRender": 250
 }