diff --git a/app/hackathons/page.tsx b/app/hackathons/page.tsx index 55fc95a..8bf8ab5 100644 --- a/app/hackathons/page.tsx +++ b/app/hackathons/page.tsx @@ -1,17 +1,105 @@ import { Content } from "@/components/content"; import { Navbar } from "@/components/navbar"; import type { Metadata } from "next"; +import { Timeline } from "./timeline" +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; +import { Grain, Heading } from "@/components/utils"; +import { Button } from "@/components/ui/button"; +import NextLink from "next/link"; export const metadata: Metadata = { title: "Hackathons", }; + export default function Hackathons() { + const FAQS = [ + { + question: "What is a hackathon?", + answer: "A hackathon is like a super cool tech event where folks team up to create awesome stuff! Picture this: you and your friends, or even new buddies, get together for a day or weekend to come up with fun and creative tech projects. It could be making a game, a website, or even inventing a cool gadget. You brainstorm, build, and then show off your project to others. It's all about having a blast, being creative, and learning cool tech skills along the way. Hackathons are like a tech party where you bring your wildest ideas to life!" + }, + { + question: "How much does it cost?", + answer: "Participating in the Hackathon is absolutely free. We don't have any registration fees or costs because we're committed to ensuring that everyone, no matter their financial situation, can have a chance to code and learn." + }, + { + question: "Do I need experience to join?", + answer: "Absolutely not! Our hackathon is super beginner-friendly. We're thrilled to have participants of all skill levels, whether you're just starting or already a coding pro. We know that everyone has to begin somewhere, and our aim is to create a friendly and inclusive atmosphere for everyone. We've got workshops to help you kickstart your coding journey and boost your skills during the hackathon." + }, + { + question: "Do I need a team?", + answer: "Feel free to go solo or team up with others—it's totally up to you! You have the choice to work on your own or join forces with fellow participants." + }, + { + question: "Who will be judging?", + answer: "The hack.place() members will be the judges of your work." + }, + { + question: "Is this an online event?", + answer: "You can fully participate in this hackathon online.!" + }, + { + question: "What is the theme?", + answer: "Suprise!" + }, + ] return ( <> - - Coming soon + +

EquiHacks S1

+

Welcome to our first Hackathon

+ +
+ + + + + + + +
+ + + + +
+ About the Hackathon +

EquiHacks is a fun hackathon just for middle and high school students. You can create apps, software, and hardware projects and show them to judges who will decide if they're good. You can work with friends or by yourself to learn new things. Plus, there are workshops and talks to help you learn and work together with others. It's a great way to have fun and get better at making things with technology!

+
+ + + +
+ Timeline +
+ + + + +

Infomation about the prizes and sponors will be released soon!

+ + + + + FAQ + + + {FAQS && + FAQS.map((FAQ, i) => ( + + + {FAQ.question} + + + {FAQ.answer} + + + )) + } + ); diff --git a/app/hackathons/timeline.tsx b/app/hackathons/timeline.tsx index f0856fa..f9c5e24 100644 --- a/app/hackathons/timeline.tsx +++ b/app/hackathons/timeline.tsx @@ -2,9 +2,11 @@ import { useState, type HTMLAttributes } from "react"; +import { useRef, type PropsWithChildren, type MouseEventHandler } from "react"; import { cn } from "@/lib/utils"; import { stages } from "@/lib/siteConfig"; import { type LucideIcon } from "lucide-react"; +import { CardItem } from "@/components/card"; interface TimelineIconProps extends HTMLAttributes { selected: boolean; @@ -38,13 +40,78 @@ interface TimelineStageProps { } const TimelineStage = ({ stageIndex }: TimelineStageProps) => { + const ref1 = useRef(null); + const ref2 = useRef(null); + const ref3 = useRef(null); + const ref4 = useRef(null); + + const correctRef = (i:number) => { + if(i==0){ + return ref1 + } + if(i==1){ + return ref2 + } + if(i==2){ + return ref3 + } + if(i==3){ + return ref4 + } + } + + const onMouseMove: MouseEventHandler = (e) => { + [ref1, ref2, ref3, ref4].forEach( + (ref) => { + const card = ref.current; + if (!card) return; + + const rect = card.getBoundingClientRect(), + x = e.clientX - rect.left, + y = e.clientY - rect.top; + + card.style.setProperty("--mouse-x", `${x}px`); + card.style.setProperty("--mouse-y", `${y}px`); + } + ); + }; + + + const stage = stages[stageIndex]; return (
-

- - {stage.name} +

+
+

{stage.name}

+ +
+
+ {stage.events.map((event, i)=>( +
+ +
+
+
+

{event.eventName}

+
+
+

{event.endTime == "00" ? event.startTime : event.startTime == "00" ? event.endTime :event.startTime + "-" + event.endTime}

+
+
+
+

{event.description}

+
+
+ + +
+ ))} +
+ + +

); diff --git a/app/workshops/page.tsx b/app/workshops/page.tsx index d90e36f..139e6cb 100644 --- a/app/workshops/page.tsx +++ b/app/workshops/page.tsx @@ -32,25 +32,22 @@ export default function Workshop() { Want to learn more about Coding! + + +

hack.place() is happy to present a few workshops to {" "} increase your knowledge {" "} of this world

-
- -
- - - -

- Workshops -

+ diff --git a/app/workshops/workshop.tsx b/app/workshops/workshop.tsx index 1715733..1f6726a 100644 --- a/app/workshops/workshop.tsx +++ b/app/workshops/workshop.tsx @@ -1,198 +1,138 @@ "use client"; import { useRef, type PropsWithChildren, type MouseEventHandler } from "react"; - +import NextLink from "next/link"; import { Link } from "@/components/link"; import { Hover } from "@/components/utils"; import { CardItem } from "@/components/card"; +import { Github } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; interface CostItemProps { - name: string; - strikethroughCost?: string; - actualCost: string; - label?: string; + name: string; + gitLink: string; + label?: string; } const CostItem = ({ - name, - strikethroughCost, - actualCost, - label, - children, + name, + label, + gitLink, }: PropsWithChildren) => { - return ( -
-

{name}

-

- - {strikethroughCost && ( - <> - - {strikethroughCost} - {" "} - - )} - {actualCost} - {" "} - - {label} - -

- -

- {children} -

-
- ); + return ( +
+
+

{name}

+ + + +
+
+

{label}

+
+
+ ); }; export const WorkshopsList = () => { - const ref1 = useRef(null); - const ref2 = useRef(null); - const ref3 = useRef(null); - const ref4 = useRef(null); - const ref5 = useRef(null); - const ref6 = useRef(null); - const ref7 = useRef(null); - const ref8 = useRef(null); - const ref9 = useRef(null); - - const onMouseMove: MouseEventHandler = (e) => { - [ref1, ref2, ref3, ref4, ref5, ref6, ref7, ref8, ref9].forEach( - (ref) => { - const card = ref.current; - if (!card) return; - - const rect = card.getBoundingClientRect(), - x = e.clientX - rect.left, - y = e.clientY - rect.top; - - card.style.setProperty("--mouse-x", `${x}px`); - card.style.setProperty("--mouse-y", `${y}px`); - } - ); - }; - - return ( -
- - - - (thanks to{" "} - - ) - - - - - - (not including email) - - - - - - (thanks to{" "} - - ) - - - - - - (limited Hobby tier) - - - - - - (limited Free tier) - - - - - - (limited Starter tier) - - - - - - (thanks to{" "} - - ) - - - - - - (estimated 960-2760 clicks) - - - - - - (sponsor's prizes + bought ourselves) - - -
- ); + const ref1 = useRef(null); + const ref2 = useRef(null); + const ref3 = useRef(null); + const ref4 = useRef(null); + const ref5 = useRef(null); + const ref6 = useRef(null); + const ref7 = useRef(null); + const ref8 = useRef(null); + const ref9 = useRef(null); + //IF YOU WANT TO ADD WORKSHOPS, ADD THEM TO THIS BELOW, AND COPY PASTE THE LINE ABOVE IF THERE ARE NO REFS LEFT + const workshops = [ + { + title: "Intro to Web Development", + friendlyName: "Weather App", + descr: "This code accompanies the Intro to Web Development workshop for hack.place(). For a step-by-step guide on how to create this app, please reference the accompanying presentation.", + gitLink: "https://github.com/hackplace-org/weather-app", + ref: ref1 + }, + { + title: "Intro to HTML/CSS/JS", + friendlyName: "Calculator App", + descr: "This code accompanies the Intro to HTML/CSS/JS workshop for hack.place(). For a step-by-step guide on how to create this app, please reference the accompanying presentation.", + gitLink: "https://github.com/hackplace-org/calculator-app", + ref: ref2 + }, + { + title: "Intro to Chrome Extensions", + friendlyName: "Color Palette Generator", + descr: "This code accompanies the Intro to Chrome Extensions workshop for hack.place(). For a step-by-step guide on how to create this app, please reference the accompanying presentation.", + gitLink: "https://github.com/hackplace-org/color-palette-generator", + ref: ref3 + }, + { + title: "Object-Oriented Python", + friendlyName: "Discord Bot", + descr: "This code accompanies the Object-Oriented Python workshop for hack.place(). For a step-by-step guide on how to create this app, please reference the accompanying presentation.", + gitLink: "https://github.com/hackplace-org/discord-bot", + ref: ref4 + }, + { + title: "Intro to React Native", + friendlyName: "Image Filter App", + descr: "This code accompanies the Intro to React Native workshop for hack.place(). For a step-by-step guide on how to create this project, please reference the accompanying presentation.", + gitLink: "https://github.com/hackplace-org/image-filter-app", + ref: ref5 + }, + { + title: "Minecraft Modding", + friendlyName: "Magic Mod", + descr: "This code accompanies the Minecraft Modding workshop for hack.place(). For a step-by-step guide on how to create this project, please reference the accompanying presentation.", + gitLink: "https://github.com/hackplace-org/magic-mod", + ref: ref6 + }, + ] + + const onMouseMove: MouseEventHandler = (e) => { + [ref1, ref2, ref3, ref4, ref5, ref6, ref7, ref8, ref9].forEach( + (ref) => { + const card = ref.current; + if (!card) return; + + const rect = card.getBoundingClientRect(), + x = e.clientX - rect.left, + y = e.clientY - rect.top; + + card.style.setProperty("--mouse-x", `${x}px`); + card.style.setProperty("--mouse-y", `${y}px`); + } + ); + }; + + return ( +
+ {workshops.map((workshop, i) => ( + + + + + + )) + + } + +
+ ); }; \ No newline at end of file diff --git a/lib/siteConfig.tsx b/lib/siteConfig.tsx index a10460d..969a98d 100644 --- a/lib/siteConfig.tsx +++ b/lib/siteConfig.tsx @@ -1,3 +1,4 @@ +import { Description } from "@radix-ui/react-toast"; import { Home, ClipboardCheck, @@ -215,26 +216,94 @@ export const days = [ export const stages = [ { id: "sunrise", - name: "Opening Ceremony", + name: "October 20th", start: new Date("Fri Sep 22 2023 18:30:00 GMT-0400"), Icon: Sunrise, + events:[ + { + startTime: "5:00", + endTime: "6:00", + eventName: "Opening Ceremony", + description: "This ceremony will reveal the theme of the hackathon and the rules" + }, + { + startTime: "6:00", + endTime: "00", + eventName: "Start of the Hackathon", + description: "This will be the offical start of the hackathon and project may began from this date" + }, + ] }, { id: "tv", - name: "Judging Period", + name: "October 21st", start: new Date("Sun Sep 24 2023 20:00:00 GMT-0400"), Icon: Tv, + events:[ + { + startTime: "12:00 PM", + endTime: "4:00 PM", + eventName: "Workshops", + description: "Final times and workshops are still being decided" + }, + ] }, { id: "clipboardlist", - name: "Public Voting Ends", + name: "October 22nd", start: new Date("Mon Sep 25 2023 18:30:00 GMT-0400"), Icon: ClipboardList, + events:[ + { + startTime: "12:00 PM", + endTime: "4:00 PM", + eventName: "Workshops", + description: "Final times and workshops are still being decided" + }, + { + startTime: "00", + endTime: "6:00 PM", + eventName: "Hackathon End and Judging Start", + description: "All projects must be submited on Devpost by this time" + }, + ] }, { id: "sunset", - name: "Closing Ceremony", + name: "October 23rd", start: new Date("Mon Sep 25 2023 20:00:00 GMT-0400"), Icon: Sunset, + events:[ + { + startTime: "00", + endTime: "3:00 PM", + eventName: "Juding Ends", + description: "The Judging period has ended and results are finalized" + }, + { + startTime: "4:30 PM", + endTime: "5:15 PM", + eventName: "Project Expos", + description: "People can present their projects for everyone to see" + }, + { + startTime: "5:15 PM", + endTime: "6:00 PM", + eventName: "Closing Ceremony", + description: "This ceremony will end the hackathon and give out the prizes to the winners" + }, + { + startTime: "6:00 PM", + endTime: "6:45 PM", + eventName: "EquiTalks", + description: "In this event, speakers from various backgrounds talking about their contributions to the advancement of STEM" + }, + { + startTime: "6:45 PM", + endTime: "7:30 PM", + eventName: "Monmouth Event", + description: "A special treat for our Monmouth County participants!" + }, + ] }, ] as const;