Skip to content

Commit

Permalink
Jakob/update schedule (#419)
Browse files Browse the repository at this point in the history 
* Updated schedule

* Katelyn q&a blurb better

* Updated prizes and application deadline

* Updated workshop page

* Finished rest of updating

* More fixes and no buttons for nulls
  • Loading branch information
@jakobreinwald
jakobreinwald authored Mar 1, 2024
1 parent 1eb1684 commit a1536e8
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 116 deletions.
30 changes: 18 additions & 12 deletions src/components/WorkshopPage/Workshop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,15 @@ function Workshop({ title, youtube, author, description, readme, slides }) {
{description}
</Typography>
<Box component="span" display="flex" justifyContent="space-around">
<Button variant='text' disableElevation color="secondary" component='a'
href={youtube} target='_blank' rel='noreferrer noopener'
className={classes.button}>
<YouTubeIcon color="secondary" className={classes.icon} />
Video
</Button>
{
youtube !== null &&
<Button variant='text' disableElevation color="secondary" component='a'
href={youtube} target='_blank' rel='noreferrer noopener'
className={classes.button}>
<YouTubeIcon color="secondary" className={classes.icon} />
Video
</Button>
}
{
readme !== null &&
<Button variant='text' disableElevation color="secondary" component='a'
Expand All @@ -70,12 +73,15 @@ function Workshop({ title, youtube, author, description, readme, slides }) {
README
</Button>
}
<Button variant='text' disableElevation color="secondary" component='a'
href={slides} target='_blank' rel='noreferrer noopener'
className={classes.button}>
<SlideshowIcon color="secondary" className={classes.icon} />
Slides
</Button>
{
slides !== null &&
<Button variant='text' disableElevation color="secondary" component='a'
href={slides} target='_blank' rel='noreferrer noopener'
className={classes.button}>
<SlideshowIcon color="secondary" className={classes.icon} />
Slides
</Button>
}
</Box>
</Grid>);
}
Expand Down
189 changes: 85 additions & 104 deletions src/components/WorkshopPage/WorkshopPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import ComingSoon from '../ComingSoon/ComingSoon';
// import { Button } from '@material-ui/core';
// import StickyBox from 'react-sticky-box';
// import Divider from '@mui/material/Divider';
const workshopsAvailable = false;
const workshopsAvailable = true;
const useStyles = makeStyles(theme => ({
itemType: {
fontWeight: 'medium',
Expand Down Expand Up @@ -71,57 +71,48 @@ const workshops = [
elements: [
{
title: 'Intro to HTML, CSS, and JS',
author: 'Shiyu Ye',
description: `This workshop will take you on a fun and interactive
journey through the three amigos of web development: HTML, CSS, and
JavaScript. We will go over how to use HTML to structure your web
pages, CSS to style them up with colors, fonts, and layouts, and
JavaScript to add some fun little tricks. As a practice, we will
be creating a personal website for Anya from Spy x Family! Hope to
spy you there, fam ;)`,
youtube: 'https://youtu.be/bU1C5UoKlSU',
readme: 'https://github.com/uclaacm/hothX-workshops/tree/main/intro-to-html-css-js',
slides: 'https://docs.google.com/presentation/d/1mpto8de9naxHfKPpK9p8updtKn-Z2wSzQV-Ravq6I58/edit?usp=sharing'
author: 'Hannah Kendall',
description: `This workshop covers the basics of Web Development - HTML, CSS, and JavaScript!
Together, they make up the structure (HTML), the style (CSS), and the functionality (JS) of a
web application. Keep reading or watch the workshop to learn how to utilize these tools to
make a super cool web application of your own!`,
youtube: 'https://youtu.be/fSvbqxaAWqE?si=mBKZSfSBflfU0Jsm',
readme: 'https://github.com/uclaacm/hothXI-workshops/tree/main/intro-to-html-css-js',
slides: 'https://docs.google.com/presentation/d/1Z6rnFfiFMpTCIxXbZz9fndr4hMB4XVyQbtid2ET0BSk/edit?usp=drive_link'
},
{
title: 'Intro to Web APIs',
author: 'Abigail Tran',
description: `Sick of waiting all year for your Spotify Wrapped? Learn
how to build your own version of Receiptify or Spotify Pie using spotify
APIs! In this workshop, we will learn all about using Web APIs to integrate
existing software systems (like Twitter, Venmo, Spotify, Google Maps) within
your OWN project! So wrap up your Spotify playlist, and queue up this workshop
on APIs!`,
youtube: 'https://youtu.be/U2MOLOC6GAI',
readme: 'https://github.com/uclaacm/hothX-workshops/tree/main/intro-to-apis',
slides: 'https://docs.google.com/presentation/d/1iQU02GAt75Y2JhRN6iniuJFAt_tKBy1xE2whg-1DJs0/edit?usp=sharing'
author: 'Kaylin Chung',
description: `Hello! Welcome to HOTH XI's Intro to Web APIs workshop. This is a guide to introduce you
to the foundations of Web APIs that will allow you to integrate them into any fullstack project. We
will be covering the client-server model, HTTP requests & responses, and how we can leverage external
servers to retrieve data and services for an app. Keep reading to learn more!`,
youtube: 'https://youtu.be/ZIamyNtujBY?si=r0v5ojIThiKzzcsQ',
readme: 'https://github.com/uclaacm/hothXI-workshops/tree/main/intro-to-webapis',
slides: 'https://docs.google.com/presentation/d/1CpiERteBZsqKqRjnYgGruBO2aZnonjRWibSqnthcRws/edit?usp=drive_link'
},
{
title: 'Intro to Servers',
author: 'Andy Lewis',
description: `This intro to servers workshop covers the basics of the client-server
model and touches on relevant topics like hardware and software servers, HTTP,
and JSON. During the accompanying demo, you will learn how to create a simple
server and its API using JavaScript, Node.js, and Express. The server features
a simulated user database with user manipulation using GET, POST, and DELETE
requests, which we will test using the API tester, Postman! Stay posted for this
workshop and take your express ticket to server expertise!`,
youtube: 'https://youtu.be/pdE3bA_S4q8',
readme: 'https://github.com/uclaacm/hothX-workshops/tree/main/intro-to-servers',
slides: 'https://docs.google.com/presentation/d/1RRLdpQPd8cEvC-9tqNKD9qUO08CcmGYJo30rTwJiQkU/edit?usp=sharing'
author: 'Samuel Perrott',
description: `In this workshop, you will learn server-side programming in the context of full stack
applications! Topics covered include HTTP, CRUD, and REST APIs. The second half of the workshop
will include a hands-on demo building your own REST API using Flask and connecting it with a React
frontend. By the end of the workshop you will become a server savant savvy with tools such as Postman.
Viewers are recommended to have a strong foundation in JavaScript and Python.`,
youtube: 'https://youtu.be/1w60BwDG6hs?si=vSZTMTo7ntuUlmO4',
readme: 'https://github.com/uclaacm/hothXI-workshops/tree/main/intro-to-servers',
slides: 'https://docs.google.com/presentation/d/1ZvL1TrNetVCnJHxDT0ffca0QwEP678LnVAGC846DtZ4/edit?usp=drive_link'
},
{
title: 'Intro to React.js',
author: 'Brooke Jiang',
description: `In this workshop, we cover the basics of React with a simple demo
of creating a grocery list. We will introduce React, explain why we want to use it, make
our first component, and allow it to display different information using props and
array.map()! Furthermore, we will learn the basics of State and useState, and how React magic
lets the user interact with the site. Shop no longer for ways to create your ideal website
and state tuned for this introduction to React!`,
youtube: 'https://youtu.be/1GNq5ez2Lxg',
readme: 'https://github.com/uclaacm/hothX-workshops/tree/main/intro-to-react',
slides: 'https://docs.google.com/presentation/d/1dAx-azdKEiOLCANUMoKRm1PP2Cme5SfXaAM-xh6Ozdg/edit?usp=sharing'
author: 'Kayla Kamakawa',
description: `Hello! Welcome to the Intro to React JS workshop for HOTH XI! Here we
will be introducing frontend web development using React. In this workshop we will utilize
HTML, CSS, and JavaScript, so I would recommend watching the workshop on those if you are not already
familiar with them!`,
youtube: 'https://youtu.be/JZrRLf5Gmqg?si=CZOJhja-tA5qpo0M',
readme: 'https://github.com/uclaacm/hothXI-workshops/tree/main/intro-to-react',
slides: 'https://docs.google.com/presentation/d/1VsaDQLJS2ShCG8dLjvUt0BP7f9Zrq0oIPf73wCQtbNM/edit?usp=drive_link'
}
]
},
Expand All @@ -131,14 +122,13 @@ const workshops = [
elements: [
{
title: 'Intro to React Native',
author: 'James Wu',
description: `Ever wanted to make your own mobile app? Let's explore React Native—a cross
platform development tool that's behind Instagram, Facebook, Discord, and many other
iconic names. In this workshop, we'll learn how to create our own app from scratch,
going over views, components, functionality, and more so that you can be a native of React! `,
youtube: 'https://youtu.be/TYvmyMJc3PQ',
readme: 'https://github.com/uclaacm/hoth9-workshops/tree/main/intro-to-react-native',
slides: 'https://docs.google.com/presentation/d/1hPfBtJzcgahXPLuJlQ6y0HcmpqrflBbZPpmL5e1vTQE/edit?usp=sharing'
author: 'Max Lee',
description: `Hello and welcome to our Intro to React Native workshop! We'll be covering the
basics of React Native in a way that I hope is simple to understand and impactful enough to teach
some key features of app development. Happy hacking!`,
youtube: 'https://youtu.be/ulqijuEyi5Y?si=aZfrltAPnZMBoCbW',
readme: 'https://github.com/uclaacm/hothXI-workshops/tree/main/intro-to-react-native',
slides: 'https://docs.google.com/presentation/d/1_7WB4HkKUErKpaTbwc2Z7R__20CiRZ8BXlc5oo7FcLw/edit?usp=drive_link'
}
]
},
Expand All @@ -148,76 +138,67 @@ const workshops = [
elements: [
{
title: 'Hackathon 101',
author: 'Anan Wang',
author: 'Aazel Tan',
description: `This workshop video explains the basics of hackathons, which are events where
people work together to create technology projects. You'll learn what to expect and how to make
the most out of your experience. By the end of the video, you'll have a better understanding of
what hackathons are all about and how to get started with attending one. Happy hacking, handy
hackers!`,
youtube: 'https://youtu.be/p8ssQybQsd8',
youtube: 'https://www.youtube.com/watch?v=Plz5kfY8JLs&list=PLPO7_kXilXFYCo6UngcitrjAHnRXyBmwi',
readme: null,
slides: 'https://docs.google.com/presentation/d/1oln-vrDxRUNNjYx9DT616e8QW2x6HYdkriyty0N8Rkc/edit?usp=sharing'
slides: 'https://docs.google.com/presentation/d/1omzpuEm3yUB92c0uwrMp79aXWa74Ft99jgSNZoUOb7I/edit?usp=drive_link'
},
{
title: 'Intro to Git',
author: 'Jenna Wang',
description: `Git is a distributed version control system; it brings a local copy of the
complete repository to every team member’s computer, facilitating collaboration and easy
tracking of changes made to code. The benefits of using Git include the flexibility to
work offline, reliable backup copies, fast merging and flexible branching, rapid feedback,
fewer merge conflicts, and available support. We’ll be going over how to install and
configure Git and how to use various Git commands to switch branches, commit, push, and
pull code, so let's 'git gud' at git!`,
youtube: 'https://youtu.be/BefzoplcCzs',
readme: 'https://github.com/uclaacm/hothX-workshops/tree/main/intro-to-git',
slides: 'https://docs.google.com/presentation/d/1kzZsZGdJ4h_GscDhjbLPs4L3j0XPIpE1-F_w2_zc6N4/edit?usp=sharing'
author: 'Lillian Gonick',
description: `Hello everyone! Welcome to the Intro to Git workshop README! In this workshop, we will
be covering the version control system: Git. Together, we will walk through installing git, creating
our first repository, and merging two branches!`,
youtube: 'https://youtu.be/Gw2AGGJKnbg?si=0b5FhNxT__V_2Svk',
readme: 'https://github.com/uclaacm/hothXI-workshops/tree/main/intro-to-git',
slides: 'https://docs.google.com/presentation/d/1fU0VoWGm95IsHadN5STolL6PO74Et_sfQFq7WQ5_d24/edit?usp=drive_link'
},
{
title: 'Intro to Databases',
author: 'Satyen Subramaniam',
description: `All good projects need a strong foundation - a base for their data. Join us in this
workshop where we'll run through the use cases of databases, the structure of popular types of
databases, and how to choose a database. We'll also do a full demo using Google Firebase - a
beginner friendly non-relational database - and connect it to a custom website using React, all
completely from scratch! Get ready cus this workshop is gonna be absolutely fire (and make your
websites hella based) :)`,
youtube: 'https://youtu.be/l6D8X0L_L_g',
readme: 'https://github.com/uclaacm/hothX-workshops/tree/main/intro-to-databases',
slides: 'https://docs.google.com/presentation/d/1LE2CYSIvGKSbGdGuZuMC1hOnxjmKgP3uwH0-LPEWSFw/edit?usp=sharing'
author: 'Sneha Agarwal',
description: `Hi! Welcome to HOTHXI's Database workshop, in this workshop we'll be covering
the basics of what a database is and walkthrough how to set up, retrieve information, and
add information to our database! Before starting this workshop I recommend checking out
the React JS or React Native workshops if you're not familar with them.`,
youtube: 'https://youtu.be/09dT8CcrgTw?si=TVP-hXHPBUk_xX1x',
readme: 'https://github.com/uclaacm/hothXI-workshops/tree/main/intro-to-databases',
slides: 'https://docs.google.com/presentation/d/1rkeQNLEeXlpSXsoHmFdx77FY4HgK-rTUSqRSs7JOe5E/edit?usp=drive_link'
},
{
title: 'Intro to Deep Learning',
author: 'Leon Lenk, Maxine Wu, & Jordan Lin (ACM AI)',
description: `Shoutout to the folks over at ACM AI for putting this together! They created this workshop
so serve as an introduction to deep learning, including a notebook linked on the readme to show you
actual deep learning code and take you through a hands-on of how you can build this code yourself!
In the process of building this model, they go over Big Data, avoiding bias and unintended patterns,
understanding our data, making the network, and training`,
youtube: 'https://youtu.be/RggC7sb1_cE?si=4FLeRtfCLOgZezhU',
readme: 'https://bit.ly/acm_ai_24w_intro_dl',
slides: null
},
{
title: 'Intro to Game Development',
author: 'Austin Law (ACM Game Studio)',
description: `It’s gamer time! In this workshop, we cover some general tips to game development.
Whether you want to make an action RPG or a visual novel, it's important to keep in mind where
to start, how to scale properly, and how to work with a team. Then, we briefly dive into Unity
and the Unity Editor, and follow a condensed version of Unity's Roll-A-Ball tutorial. So grab
your headsets and watch this workshop cus it’s time to up your game dev game!`,
youtube: 'https://youtu.be/WkqycKI6vdc',
description: `Shoutout to Austin Law from ACM Game Studio for putting this workshop together
for us! In this section, he talks about game development, some tips to success, and lastly,
a short introduction to using the Unity game engine`,
youtube: 'https://youtu.be/WkqycKI6vdc?si=ub0ytPWJGkXAhkj8',
readme: null,
slides: 'https://docs.google.com/presentation/d/1s545_VhUktrxMzpx6k6hi_kOUbsRiJP0evhJ1x9ai38/edit?usp=sharing'
},
{
title: 'Intro to UI/UX Design',
author: 'Caitlyn Chen and Sara Kuchimpos (Creative Labs)',
description: `We will cover the higher level goals of UI/UX, how to think about
design, and common design mistakes. Along the way, we'll drops some tips and
tricks to make your design absolutely bomb and give you guys some extra resources
to reference.`,
youtube: 'https://youtu.be/TxWxpsna2Us',
readme: null,
slides: 'https://www.figma.com/file/9wDd7hY9OvRRETh8Gt91fF/HOTH-Workshop?node-id=29%3A32'
},
{
title: 'Intro to Machine Learning',
author: 'Caden Davis, Jason Jewik, and Nisha McNealis (ACM AI)',
description: `This workshop is an introduction to Machine Learning
presented to you by ACM AI. We'll briefly introduce what Machine Learning is,
the theory behind it, and how you can apply it to your own hackathon project.`,
youtube: 'https://youtu.be/byTbOGoAbRI',
readme: null,
slides: 'https://docs.google.com/presentation/d/15iGiw78UcoYgqZZR7BHfVzRGgzhXFz8Imok-OwMTWXQ/edit?usp=sharing'
}
// {
// title: 'Intro to UI/UX Design',
// author: 'Caitlyn Chen and Sara Kuchimpos (Creative Labs)',
// description: ``,
// youtube: 'https://youtu.be/TxWxpsna2Us',
// readme: null,
// slides: 'https://www.figma.com/file/9wDd7hY9OvRRETh8Gt91fF/HOTH-Workshop?node-id=29%3A32'
// }
]
}
];
Expand All @@ -242,7 +223,7 @@ function WorkshopPage() {
container
className={classes.itemElements}
spacing={8}
justify={isSmall ? 'center' : 'flex-start'}
justifyContent={isSmall ? 'center' : 'flex-start'}
>
{item.elements.map(element => <Workshop key={element.title} {...element} />)}
</Grid>
Expand Down Expand Up @@ -279,7 +260,7 @@ function WorkshopPage() {
</Typography>
{!workshopsAvailable ?
<ComingSoon alignment='left' /> :
{ workshopCards }
<>{workshopCards}</>
}
</Container>
</div>
Expand Down

0 comments on commit a1536e8

Please sign in to comment.