diff --git a/app/components/3box.tsx b/app/components/3box.tsx index 8461815..562ed8f 100644 --- a/app/components/3box.tsx +++ b/app/components/3box.tsx @@ -1,109 +1,127 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; +import { Box, Image, Grid, Heading, Text } from 'theme-ui'; const Threebox = () => { - return( - - - Design a PCB - - - - - Design Art - - - - Create Firmware - - - - ) + return ( + + + Design a PCB + + Create your own PCB design and bring it to life! + + + Design Art + + Create stunning art for your PCB design! + + + Create Firmware + + Develop firmware to control your PCB! + + + ) } export default Threebox; \ No newline at end of file diff --git a/app/components/FAQcard.tsx b/app/components/FAQcard.tsx index 02a4ec7..9c57ec2 100644 --- a/app/components/FAQcard.tsx +++ b/app/components/FAQcard.tsx @@ -1,23 +1,20 @@ -import { kMaxLength } from 'buffer'; import React from 'react'; -import { Box } from 'theme-ui'; -// Define the type for the props +import { Box, Heading, Text } from 'theme-ui'; + interface CardProps { question: string; answer: string; } -// Create the component const FAQcard: React.FC = ({ question, answer }) => { return ( -

{question}

-

{answer}

+ {question} + {answer}
); }; -// Inline styles for the component const styles = { card: { borderRadius: '20px', @@ -25,25 +22,24 @@ const styles = { margin: '16px', backgroundColor: 'rgba(201, 227, 255, 0.73)', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', - height: ['fill-content', '16vw'], - width: ['60vw', '26vw'], + width: ['90vw', '60vw', '26vw'], border: '5px solid rgba(39, 114, 193, 0.42)', overflow: 'hidden', }, question: { - fontSize: 'calc(1.2vw + 1.2vh)', + fontSize: ['1.2rem', 'calc(1.2vw + 1.2vh)'], fontWeight: 790, color: '#FFFFFF', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', paddingLeft: '2%', }, answer: { - fontSize: 'calc(0.6vw + 0.6vh)', + fontSize: ['1rem', 'calc(0.6vw + 0.6vh)'], color: '#003180', - marginTop: '8px', + marginTop: '15px', textShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', fontWeight: 600, - paddingLeft: '2%' + paddingLeft: '2%', }, }; diff --git a/app/components/SideBar.tsx b/app/components/SideBar.tsx new file mode 100644 index 0000000..e4e859a --- /dev/null +++ b/app/components/SideBar.tsx @@ -0,0 +1,129 @@ +import { Box } from 'theme-ui'; +import Link from 'next/link'; + +const SideBar = () => { + return ( + + + + ); +}; + +export default SideBar; \ No newline at end of file diff --git a/app/components/dropdown.tsx b/app/components/dropdown.tsx index 6e8cd1f..ba42682 100644 --- a/app/components/dropdown.tsx +++ b/app/components/dropdown.tsx @@ -1,76 +1,42 @@ -/** @jsxImportSource theme-ui */ -import { useState } from 'react'; +import React, { useState } from 'react'; -const FAQItem = ({ question, answer }) => { +interface DropdownProps { + label: string; + options: string[]; +} + +const Dropdown: React.FC = ({ label, options }) => { const [isOpen, setIsOpen] = useState(false); return ( -
- + {isOpen && ( -

- {answer} -

+
+
+ {options.map((option, index) => ( + + ))} +
+
)}
); }; -const FAQ = ({ items }) => { - return ( -
- {items.map((item, index) => ( - - ))} -
- ); -}; - -export default FAQ; +export default Dropdown; diff --git a/app/components/footer.tsx b/app/components/footer.tsx index afca7d9..a091229 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -1,31 +1,27 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; +import { Box, Text } from 'theme-ui'; - const footer = ()=> { - return ( -
- Made with ❤️ by @bright li & @Scott -
- ) +const Footer = () => { + return ( + + Made with ❤️ by @bright li & @Scott + + ); } -export default footer; \ No newline at end of file + +export default Footer; \ No newline at end of file diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx index 640c043..1cb4bd2 100644 --- a/app/components/mdx.tsx +++ b/app/components/mdx.tsx @@ -1,18 +1,33 @@ import { Heading, Text } from 'theme-ui' + const components = { - h1: (props) => , - h2: (props) => , - h3: (props) => , - p: (props) => , - ol: (props) =>
    , - li: (props) =>
  1. , - a: (props) => , - + h1: (props) => , + h2: (props) => , + h3: (props) => , + p: (props) => , + ol: (props) =>
      , + li: (props) =>
    1. , + a: (props) => , } + export default components \ No newline at end of file diff --git a/app/components/middle.tsx b/app/components/middle.tsx index e69de29..0320d8e 100644 --- a/app/components/middle.tsx +++ b/app/components/middle.tsx @@ -0,0 +1,50 @@ +import { + Box, + Heading, + Text, + } from 'theme-ui'; + + const Middle = () => { + return ( + + + 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! + + + Frequently Asked Questions + + + ); + } + + export default Middle; \ No newline at end of file diff --git a/app/components/top.tsx b/app/components/top.tsx index ce10216..2b0bc6e 100644 --- a/app/components/top.tsx +++ b/app/components/top.tsx @@ -1,106 +1,79 @@ -import { - Box, - Button, - Image, - Grid, - Heading, - Text, - } from 'theme-ui'; - import dynamic from 'next/dynamic'; +import { Box, Button, Heading } from 'theme-ui'; +import dynamic from 'next/dynamic'; - const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); +const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false }); - const tipitytopity = ()=> { - return ( - { + return ( + + {typeof window !== 'undefined' && } + - - {typeof window !== 'undefined' && } - {/* - Example PCB! */} - + - - Hacky Holidays! - - - Design a PCB holiday decoration this winter, get one shipped! - - - - - - - - - - - ) + + + + ); } + export default tipitytopity; \ No newline at end of file diff --git a/app/guide/guideMD.mdx b/app/guide/guideMD.mdx index cb2fb1e..f72594b 100644 --- a/app/guide/guideMD.mdx +++ b/app/guide/guideMD.mdx @@ -1,56 +1,68 @@ -

      -

      -

      -# **🎄 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: +# 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! **** -

      +### **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! +## Choosing Your Parts + +When choosing your parts, think about the function of each component, and try to eliminate unneeded components. Unneeded components can reduce your decoration’s battery life! -Parts covered in the guide **(THESE MUST BE ON YOUR PCB TO WORK):** +Parts covered in the guide: -- Neopixels -- MCU (separate guides for the ESP32 and ch552) -- Batteries +- Neopixels (4 pin) +- Xiao ESP32C3 +- Battery Holder +- Resistors/Diodes 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 +## Designing Your PCB -![image.png](https://cloud-ho0oo25ks-hack-club-bot.vercel.app/0image__67_.png) +For this guide, we are going to be using KiCad. If you are using a different tool, your steps might be a bit different! -Then Click on the **Schematic Editor** Button. It will take you to a blank page where you will start designing your PCB! +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! -![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) +![KiCad New Project](https://prod-files-secure.s3.us-west-2.amazonaws.com/51907c75-c258-4bc2-9858-58c3dcad7100/b3897a23-5653-4616-953d-ac8a225d7be7/image.png) -Now it’s time to branch off…. Click on the link with the microcontroller you plan to use! +Then click on the **Schematic Editor** button. It will take you to a blank page where you will start designing your PCB! -Xiao Esp32C3 +![Schematic Editor](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) -2nd Microcontroller -



      --- -

      -# **Programming your PCB** + +## 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 +[Adafruit Neopixel Uberguide](https://learn.adafruit.com/adafruit-neopixel-uberguide/arduino-library-use) + +To simulate your code, you can use [Wokwi](https://wokwi.com/projects/new/esp32-c3). + +--- + +## Submissions & Manufacturing + +Once you are ready to submit, create a PR in **OnBoard** with the Hacky-Holidays tag and submit your PR to this form! + +PRs must include multiple things: + +1. Schematic of your Board +2. Link to Wokwi with the board working + +Once your PR gets approved and you are ready to order, we will order the PCB for you and ship it to your address! + +--- + +## Additional Resources -# Submissions & Manufacturing -

      \ No newline at end of file +- [General Info](https://www.notion.so/General-Info-153a1dc89099809d86c0fda32bbf66a9?pvs=21) +- [How to wire up your LEDs](https://www.notion.so/How-to-wire-up-your-LEDs-154a1dc890998077b10aecd282861452?pvs=21) \ No newline at end of file diff --git a/app/guide/page.tsx b/app/guide/page.tsx index 6724798..4be9fd0 100644 --- a/app/guide/page.tsx +++ b/app/guide/page.tsx @@ -1,40 +1,151 @@ "use client"; -import { keyframes } from '@emotion/react' -import GuideMD from './guideMD.mdx' -import { MDXProvider } from '@mdx-js/react' -import components from '../components/mdx' -const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } }) -import { Box } from 'theme-ui' -// const components = { -// h1: (props) => , -// h2: (props) => , -// h3: (props) => , -// p: (props) => , -// // Add more custom components as needed -// } +import { keyframes } from '@emotion/react'; +import GuideMD from './guideMD.mdx'; +import { MDXProvider } from '@mdx-js/react'; +import components from '../components/mdx'; +import { Box } from 'theme-ui'; +import Image from 'next/image'; +import SideBar from "../components/SideBar"; +import Link from 'next/link'; + +const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } }); + export default function guide() { return ( - - - - - - + + {/* Header */} + + + + + + HACKY HOLIDAYS + + + + + + Orpheus Flag + + + + + + + + + + + + + + + + + {/* Sidebar */} + + + + + {/* Main Content */} + + + + + + - -); + ); } \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index a6de8a1..750dab1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,33 +1,18 @@ "use client"; - /* 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'; -// import { tipitytopity } from './components/top' -// import Image from "next/image"; -import { - Box, - Button, - Container, - Image, - Grid, - Heading, - Text, -} from 'theme-ui'; -const Footer = dynamic(() => import('./components/footer'), { ssr: false }); - +import { Box, Image, Heading, Grid } from 'theme-ui'; import dynamic from 'next/dynamic'; + +const Footer = dynamic(() => import('./components/footer'), { ssr: false }); const Top = dynamic(() => import('./components/top'), { ssr: false }); -const FAQcard = dynamic(() => import('./components/FAQcard'), {ssr: false}); +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 }); -const fall = ( rotationDirection: number) => keyframes` +const fall = (rotationDirection: number) => keyframes` from { transform: translateY(-10%) rotate(0deg); } @@ -42,83 +27,39 @@ export default function Home() { import('@google/model-viewer'); } }, []); - return ( - - - - - - + return ( + + + + + - - - - - - - - - - - - - - + - +======= + height: ['auto', '100vh'], + mt: '4vh', +}}> +

      + 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 given out as gifts! + + Frequently Asked Questions + + + + +>>>>>>> 80b35b8ff8856a00997af22c810cf8cf3bb4b2b5 - Any more questions? Ask in #hacky-holidays! + + Any more questions? Ask in #hacky-holidays! -
      -
      -
      +
      +
      +