more responsive + better snowflakes

Scott170c · Dec 14, 2024 · f643c00 · f643c00
1 parent 5864a87
commit f643c00
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 63 deletions.
diff --git a/app/ModelViewer.js b/app/ModelViewer.js
@@ -7,7 +7,7 @@ const ModelViewer = () => {
         disable-zoom
         camera-orbit="0deg 0deg 105%"
         disable-pan
-        style={{ width: '25vw' ,height: '40vh'}}
+        style={{ width: '25' ,height: '40vh'}}
       ></model-viewer>
     );
   };

diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -13,8 +13,8 @@ import {
             backgroundColor: '#100056',
             height: '8vh',
             width: '100%',
-            position: 'relative',
-            //bottom: '0',
+            position: 'absolute',
+            bottom: '0px',
             display: 'flex',
             //flexDirection: 'column',
             alignItems: 'center',

diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx
@@ -12,6 +12,7 @@ const components = {
     p: (props) => <Text sx={{ fontSize: 2, color: 'text' }} {...props} />,
     ol: (props) => <ol style={{ listStyleType: 'decimal', paddingLeft:'20px', marginLeft:'20px' }} {...props} />,
     li: (props) => <li {...props} />,
+    a: (props) => <a style = {{color:'blue'}}{...props} />,
 
 }
 export default components
diff --git a/app/components/top.tsx b/app/components/top.tsx
@@ -22,8 +22,8 @@ import {
           paddingRight: ['0rem', '3rem'],
           width: '100%',
           margin: ['auto'],
-
-          mt: ['10vh', '0vh'],
+          paddingBottom: '15vh',
+          mt: ['40vh', '5vh'],
           backgroundImage: '../public/background2.png',
 
           height: ['2vh', '90vh'],

diff --git a/app/globals.css b/app/globals.css
@@ -13,9 +13,9 @@
 }
 body {
   color: #FFFFFF;
-  background-color: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);';
+  background: linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);
   font-family: Arial, Helvetica, sans-serif;
-  height: 100vh;
+  height: 100%;
   margin: 0;
   min-width: none;
 }
diff --git a/app/guide/guideMD.mdx b/app/guide/guideMD.mdx
@@ -1,15 +1,17 @@
-
-# **Hacky Holidays Guide**
+<br></br>
+<br></br>
+<br></br>
+# **🎄 Hacky Holidays Guide**
 Hacky Holidays is a limited time YSWS event for making your own PCB tree decorations! There are **3** major steps in making a successful decoration:
 
 1. Choosing your Parts
 2. Designing your PCB
 3. Programming your PCB
 
 ### **** This guide serves as a learning tool to help you get started, If you submit the guide PCB you will not be accepted! ****
-
+<br></br>
 ---
-
+<br></br>
 # Choosing Your Parts
 
 When choosing your parts, think about the function of each component, and try to wither out unneeded components. Unneeded components can reduce your decoration’s battery life!
@@ -21,9 +23,9 @@ Parts covered in the guide **(THESE MUST BE ON YOUR PCB TO WORK):**
 - Batteries
 
 If you want to add any components **not** on the approved list, ask one of the organizers in #hacky-holidays!
-
+<br></br><br></br>
 ---
-
+<br></br>
 # **Designing your PCB**
 
 For this guide, we are going to be using KiCad, so if you are using a different tool your steps might be a bit different! 
@@ -34,20 +36,21 @@ First, open up KiCad, and go to File → New Project… and name it whatever you
 
 Then Click on the **Schematic Editor** Button. It will take you to a blank page where you will start designing your PCB!
 
-![image (3).png](https://prod-files-secure.s3.us-west-2.amazonaws.com/51907c75-c258-4bc2-9858-58c3dcad7100/4c6c1b0e-1052-4e21-b6f9-44eefa94f9ae/b38b9519-5210-4b7c-9046-fbd9882d3ce7.png)
+![image (3).png](https://cloud-2i0fso8w6-hack-club-bot.vercel.app/0image__3___2_.png)
 
 Now it’s time to branch off…. Click on the link with the microcontroller you plan to use!
 
 Xiao Esp32C3
 
 2nd Microcontroller
-
+<br></br><br></br>
 ---
-
+<br></br>
 # **Programming your PCB**
 
 To program your PCB, use the Arduino IDE and the Neopixels library! Here is a helpful resource to help you get started:
 
 https://learn.adafruit.com/adafruit-neopixel-uberguide/arduino-library-use
 
-# Submissions & Manufacturing
+# Submissions & Manufacturing
+<br></br>
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,3 +1,4 @@
+
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
@@ -10,6 +11,7 @@ import {
   Heading,
   Text,
 } from 'theme-ui';
+import Footer from './components/footer';
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",

diff --git a/app/page.tsx b/app/page.tsx
@@ -3,6 +3,7 @@
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { keyframes } from '@emotion/react';
+import Snowfall from 'react-snowfall';
 // import '@google/model-viewer';
 // import Script from 'next/script';
 import { useEffect } from 'react';
@@ -35,27 +36,29 @@ const fall = (  rotationDirection: number) => keyframes`
   }
 `;
 
-const faqItems = {question: 'What is Next.js?', answer: 'Next.js is a React framework for production.' };
-
 export default function Home() {
   useEffect(() => {
     if (typeof window !== 'undefined') {
       import('@google/model-viewer');
     }
   }, []);
   return (
-  <Box>
+  <Box sx={{position: 'relative'}}>
     <link rel="icon" href = "https://assets.hackclub.com/icon-rounded.svg"></link>
-  <Grid gap = {0} sx={{
-    background: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);', 
+    <Snowfall speed={[0.5, 3]} radius={[2.0, 4.0]} snowflakeCount={100} wind={[-0.1, 0.1]} style={{position:'fixed', top:"0"}}/>
+  <Box  sx={{
+    //background: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);', 
     // background: 'linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))',
-    // // height: 'auto',
     // display: 'block',
     // display: 'flex',
     // flexDirection: 'column',
     // height:"100%",
+    // display: 'flex',
+    // flexDirection: 'column',
     // alignItems: 'center',
-    minHeight: ['340vh', '265vh'],
+
+    // alignItems: 'center',
+    minHeight: ['265vh' ,'260vh', '230vh'],
     // background: 'linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))', 
     // display: 'grid',
     // gridTemplateRows: 'auto auto 1fr auto', // Allows more explicit control
@@ -83,17 +86,15 @@ export default function Home() {
         <Box //grid1
         sx={{
           position: 'absolute',
-          top: -10,
+          top: [-380, -50],
           left: 0,
         }}>
           <a href="https://hackclub.com" target="_blank">
-          <Button  >
             <Image src="https://assets.hackclub.com/flag-orpheus-top.svg" sx ={{
               height:"10vh"
             }}></Image>
 
 
-          </Button>
 
           </a>
 
@@ -103,30 +104,7 @@ export default function Home() {
 
 
 
-        {Array.from({ length: 50 }).map((_, index) => {
-          const randomRotationDirection = Math.random() > 0.5 ? 1 : -1;
-          const randomSpeed = Math.random() * 10 + 5;
-          return(
-          <Text
-          key={index}
-          sx={{
-            position: 'absolute',
-            top: '-10%',
-            zIndex: 0,
-            left: `${Math.random() * 90}vw`,
-            animation: `${fall(randomRotationDirection)} ${randomSpeed}s linear infinite`,
-            color: 'white',
-            fontSize: `${Math.random() * 20 + 10}px`,
-            animationDelay: `${Math.random() * 10}s`,
-            transform: `rotate(${randomRotationDirection * 360}deg)`,
-
-
-
-          }}
-          >
-            ❄
-          </Text>)
-        })}
+
 
             <Top />
 
@@ -143,15 +121,16 @@ export default function Home() {
             width: '100%',
             // margin: 'auto',
             height:['auto', '100vh'],
-
             // textAlign: 'center'
           }}>
+            <br></br>
               <Heading as="h3"   sx={{ 
                     fontFamily: 'var(--font-inter)', 
-                    fontSize: ['0.9rem', '1.9rem'], 
-                    fontWeight:800,
+                    fontSize: ['0.8rem', '1.2rem'], 
+                    fontWeight:700,
                     paddingLeft: '6vw',
                     paddingRight: '6vw',
+                    paddingTop: '12vh',
                     textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
                     color: 'white'
                   }}>Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it via PR to OnBoard before the 30th!
@@ -164,8 +143,8 @@ export default function Home() {
                     paddingLeft: '4vw',
                     paddingRight: '4vw',
                     fontFamily: 'var(--font-inter)', 
-                    fontSize: ['0.8rem', '1.9rem'], 
-                    fontWeight:800,
+                    fontSize: ['0.8rem', '1.2rem'], 
+                    fontWeight:700,
                     textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
                     color: 'white'
                   }}>At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be given out as gifts!<br></br><br></br> 
@@ -182,14 +161,15 @@ export default function Home() {
                 sx={{ 
                   fontFamily: 'var(--font-inter)', 
                   fontSize: ['0.9rem', '1.9rem'], 
-                  fontWeight:800,
+                  fontWeight:700,
                   textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                  color: 'white'
+                  color: 'white',
+                  paddingBottom: '4vh',
                 }}>Any more questions? Ask in <a style={{color: 'rgba(90, 142, 248, 1)'}} href="https://hackclub.slack.com/archives/C083SK3G5D3">#hacky-holidays</a>!
           </Heading>
-        </Box>
-    </Grid>
-    <Footer></Footer>
+          </Box>
+          </Box>
+          <Footer></Footer>
     </Box>
   );
 }
diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -4,12 +4,12 @@ import { Heading, Text } from 'theme-ui'
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...components,
-    h1: (props) => <Heading as="h1" sx={{ fontSize: 5, color: 'black' ,      fontFamily: 'var(--font-inter)', 
+    h1: (props) => <Heading as="h1" sx={{ fontSize: 6, color: 'black' ,      fontFamily: 'var(--font-inter)', 
     }} {...props} />,
     h2: (props) => <Heading as="h2" sx={{ fontSize: 4, color: 'black',       fontFamily: 'var(--font-inter)', 
     }} {...props} />,
     h3: (props) => <Heading as="h3" sx={{ fontSize: 3, color: 'black' }} {...props} />,
-    p: (props) => <Text sx={{ fontSize: 2, color: 'text' }} {...props} />,
+    p: (props) => <Text sx={{ fontSize: 4, color: 'text', paddingRight: '100vw'}} {...props} />,
     // Add more custom components as needed
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "next": "^15.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-snowfall": "^2.2.0",
     "theme-ui": "^0.17.1",
     "three": "^0.170.0"
   },

diff --git a/yarn.lock b/yarn.lock
@@ -3372,11 +3372,23 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-snowfall@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.2.0.tgz"
+  integrity sha512-dRk7vEHq/ZUOG+JHk2k/hH3HmliOWGXr4rKRDeW4mjWuHeI1r5h0Lc1r2jnTtUS1im702d6tCmNGymlNTdhXYg==
+  dependencies:
+    react-fast-compare "^3.2.2"
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"