diff --git a/app/ModelViewer.js b/app/ModelViewer.js index 7fb0e17..f97a9ad 100644 --- 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: '25%', height: '500px' }} + style={{ width: '25vw' ,height: '40vh'}} > ); }; diff --git a/app/components/3box.tsx b/app/components/3box.tsx index 284891e..d96ddb6 100644 --- a/app/components/3box.tsx +++ b/app/components/3box.tsx @@ -12,6 +12,8 @@ const Threebox = () => { { borderRadius: '1rem', mx: '32px', mb: '5vh', - paddingBottom: '2vh', - paddingTop: '2vh', - - + padding: '2vh', }}> { display: 'flex', flexDirection: 'column', mx: '1vw', - paddingTop: '2rem', + paddingTop: ['0rem', '2rem'], borderRadius: '20px', }}> Design a PCB { justifyContent: 'center', display: 'flex', flexDirection: 'column', - paddingTop: '2rem', + paddingTop: ['1rem', '2rem'], mx: '1vw', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' @@ -67,14 +66,14 @@ const Threebox = () => { Design Art @@ -85,21 +84,21 @@ const Threebox = () => { mx: '1vw', flexDirection: 'column', - paddingTop: '2rem' + paddingTop: ['0rem', '2rem'], }}> Create Firmware diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx index a7d5f4f..02a4ec7 100644 --- a/app/components/FAQcard.tsx +++ b/app/components/FAQcard.tsx @@ -1,5 +1,6 @@ +import { kMaxLength } from 'buffer'; import React from 'react'; - +import { Box } from 'theme-ui'; // Define the type for the props interface CardProps { question: string; @@ -9,10 +10,10 @@ interface CardProps { // Create the component const FAQcard: React.FC = ({ question, answer }) => { return ( -
+

{question}

{answer}

-
+ ); }; @@ -24,25 +25,25 @@ const styles = { margin: '16px', backgroundColor: 'rgba(201, 227, 255, 0.73)', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', - height: '16vw', - width: '25vw', + height: ['fill-content', '16vw'], + width: ['60vw', '26vw'], border: '5px solid rgba(39, 114, 193, 0.42)', overflow: 'hidden', }, question: { - fontSize: '1.6rem', + fontSize: 'calc(1.2vw + 1.2vh)', fontWeight: 790, color: '#FFFFFF', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', - paddingLeft: '10px', + paddingLeft: '2%', }, answer: { - fontSize: '0.8rem', + fontSize: 'calc(0.6vw + 0.6vh)', color: '#003180', marginTop: '8px', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', fontWeight: 600, - paddingLeft: '10px' + paddingLeft: '2%' }, }; diff --git a/app/components/footer.tsx b/app/components/footer.tsx index 9017b09..41419b8 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -20,7 +20,7 @@ import { alignItems: 'center', // py: '10px', justifyContent: 'center', - fontSize: '2.7vh', + fontSize: '120%', fontWeight: 700, color: '#90C4FF' }}> diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx index a859622..e6e51ce 100644 --- a/app/components/mdx.tsx +++ b/app/components/mdx.tsx @@ -1,14 +1,17 @@ import { Heading, Text } from 'theme-ui' const components = { h1: (props) => , - h2: (props) => , - h3: (props) => , + h3: (props) => , p: (props) => , - + ol: (props) =>
    , + li: (props) =>
  1. , + } export default components \ No newline at end of file diff --git a/app/components/top.tsx b/app/components/top.tsx index 1de11d4..edcc86d 100644 --- a/app/components/top.tsx +++ b/app/components/top.tsx @@ -19,15 +19,14 @@ import { alignItems: 'center', justifyContent: 'center', gap: '1rem', - paddingRight: '3rem', + paddingRight: ['0rem', '3rem'], width: '100%', - margin: 'auto', + margin: ['auto'], + + mt: ['10vh', '0vh'], + backgroundImage: '../public/background2.png', - mt: '15vh', - textAlign: 'center', - // height: '65vh' - backgroundImage: 'https://cloud-n3hpb6nr4-hack-club-bot.vercel.app/0image.png', - height: '100vh' + height: ['2vh', '90vh'], }} > {typeof window !== 'undefined' && } @@ -56,13 +55,13 @@ import { ml: ['0vw','2vw'], // mt: ['1%','12%'], maxWidth: '100%', - textAlign: 'center' + // textAlign: 'center' }} > Design a PCB holiday decoration this winter, get one shipped! + + diff --git a/app/globals.css b/app/globals.css index f2b01ed..91c013f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -13,10 +13,9 @@ } body { color: #FFFFFF; - background: var(linear-gradient(to bottom right, rgba(70, 181, 255, 1), rgba(227, 244, 255, 1))); + background-color: 'linear-gradient(180deg, rgba(0,153,255,1) 0%, rgba(130,205,255,1) 100%);'; font-family: Arial, Helvetica, sans-serif; height: 100vh; margin: 0; - background-repeat: no-repeat; - background-attachment: fixed; + min-width: none; } diff --git a/app/guide/guideMD.mdx b/app/guide/guideMD.mdx index ffe75be..cf5eda1 100644 --- a/app/guide/guideMD.mdx +++ b/app/guide/guideMD.mdx @@ -1,22 +1,53 @@ -# Hacky Holidays Guide - -## Hacky Holidays is a limited time YSWS event for making your own PCB tree decorations! There are **4** major steps in making a successful decoration: +# **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. Making your Schematic -3. Designing your Schematic -4. Programming your PCB +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! **** + +--- # 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! -Components used for the tutorial: -(1x) MCU +Parts covered in the guide **(THESE MUST BE ON YOUR PCB TO WORK):** + +- Neopixels +- MCU (separate guides for the ESP32 and ch552) +- Batteries + +If you want to add any components **not** on the approved list, ask one of the organizers in #hacky-holidays! + +--- + +# **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! + +First, open up KiCad, and go to File → New Project… and name it whatever you want! Just make sure you name it something you remember so you can come back to it :P + +![image.png](https://cloud-ho0oo25ks-hack-club-bot.vercel.app/0image__67_.png) + +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) + +Now it’s time to branch off…. Click on the link with the microcontroller you plan to use! + +Xiao Esp32C3 + +2nd Microcontroller + +--- + +# **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: -[General Info](https://www.notion.so/General-Info-153a1dc89099809d86c0fda32bbf66a9?pvs=21) +https://learn.adafruit.com/adafruit-neopixel-uberguide/arduino-library-use -[How to wire up your LEDs](https://www.notion.so/How-to-wire-up-your-LEDs-154a1dc890998077b10aecd282861452?pvs=21) +# Submissions & Manufacturing \ No newline at end of file diff --git a/app/guide/page.tsx b/app/guide/page.tsx index d28caaf..1523067 100644 --- a/app/guide/page.tsx +++ b/app/guide/page.tsx @@ -14,14 +14,26 @@ import { Box } from 'theme-ui' // } export default function guide() { return ( + - + }}> + + ); } \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index a4003b6..923fb8c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -17,11 +17,11 @@ import { Heading, Text, } from 'theme-ui'; -import Footer from './components/footer'; +const Footer = dynamic(() => import('./components/footer'), { ssr: false }); import dynamic from 'next/dynamic'; const Top = dynamic(() => import('./components/top'), { ssr: false }); -import FAQcard from './components/FAQcard'; +const FAQcard = dynamic(() => import('./components/FAQcard'), {ssr: false}); const ThreeGrid = dynamic(() => import('./components/3box'), { ssr: false }); // const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }); const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }); @@ -54,7 +54,7 @@ export default function Home() { // flexDirection: 'column', // height:"100%", // alignItems: 'center', - minHeight: ['400vh', '275vh'], + minHeight: ['340vh', '265vh'], // 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 @@ -79,7 +79,7 @@ export default function Home() { // padding:'20px', }}> - + Want a cool christmas decoration? A cool gift for someone you know? Design a unique PCB decoration from scratch and submit it to the project gallery before the 30th! - Once your PR gets approved, you can get your PCB decoration shipped just in time for the holidays!🎄 + }}>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! + Once your PR gets approved, you will get your PCB decoration just in time for the holidays!🎄 At the end, Submissions will be peer-reviewed and voted for the top 3. The top 3 will be re-made, and can be used to give out as gifts!



    + 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!



    FAQ:     - + - + Any more questions? Ask in #hacky-holidays!     + }}>Any more questions? Ask in #hacky-holidays! + +     ); -} +} \ No newline at end of file diff --git a/public/background2.png b/public/background2.png new file mode 100644 index 0000000..4c300f5 Binary files /dev/null and b/public/background2.png differ