-
);
}
diff --git a/src/app/components/workshop-card/workshop-card.scss b/src/app/components/workshop-card/workshop-card.scss
index 72ef407..d1a4207 100644
--- a/src/app/components/workshop-card/workshop-card.scss
+++ b/src/app/components/workshop-card/workshop-card.scss
@@ -2,61 +2,119 @@
.workshop-card {
border-radius: 20px;
- padding: 20px;
width: 85vw;
+ max-width: 67vw;
margin: 20px auto;
- background-color: #42384473;
+ background-image: linear-gradient(rgba(50, 38, 96), rgb(137, 143, 247));
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
- color: #f6d4d4;
- text-align: left;
+ color: #ffffff;
+ display: flex;
+ flex-direction: row;
- .workshop-card-header {
- display: flex;
- justify-content: space-between;
+ .workshop-card-left,
+ .workshop-card-right {
+ padding: 20px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ flex: 1 1 0px;
+ }
+
+ .workshop-card-title {
+ font-size: 1.6em;
+ margin-bottom: 25px;
+ }
+
+ .workshop-card-description {
+ font-size: 0.95em;
+ }
+
+ #hosted-by {
+ font-size: large;
+ margin-top: 25px;
+ margin-bottom: 3px;
+ color: #ee99a0;
+ }
- .right {
- text-align: right;
+ #host-name {
+ font-size: large;
+ margin-top: 3px;
+ }
+
+ a {
+ text-decoration: none;
+ background-color: #322660;
+ display: block;
+ margin-bottom: 6px;
+ width: max-content;
+ padding: 10px;
+ border-radius: 20px;
+ font-size: small;
+ color: #ffffff;
+ }
+
+ #prerequisites-title {
+ margin-bottom: 6px;
+ font-size: medium;
+ }
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ width: 95vw;
+ max-width: 95vw;
+
+ .workshop-card-left,
+ .workshop-card-right {
+ flex: none;
+ width: 100%;
+ padding: 15px;
}
- h4 {
- color: white;
- margin-bottom: 0;
+ .workshop-card-title {
+ font-size: 1.4em;
+ margin-bottom: 20px;
+ }
+
+ .workshop-card-description {
+ font-size: 0.9em;
+ }
+
+ #hosted-by,
+ #host-name {
+ font-size: medium;
}
- }
- .pink-buttons {
a {
- display: inline-flex;
- font-size: 14px;
- border: 1px;
- border-style: solid;
- border-radius: 25px;
- border-color: #f6d4d4;
- width: fit-content;
- margin: 5px;
- padding: 8px;
- text-decoration: none;
- }
-
- p {
- display: inline-flex;
- font-size: 14px;
- font-weight: bold;
- border: 1px;
- border-style: solid;
- border-radius: 25px;
- border-color: #f6d4d4;
- width: fit-content;
- margin: 5px;
padding: 8px;
+ font-size: 0.85em;
+ }
+
+ #prerequisites-title {
+ font-size: small;
}
}
- .workshop-card-prereqs {
- margin-top: 0.75em;
+ @media (max-width: 480px) {
+ .workshop-card-title {
+ font-size: 1.2em;
+ margin-bottom: 15px;
+ }
+
+ .workshop-card-description {
+ font-size: 0.85em;
+ }
+
+ #hosted-by,
+ #host-name {
+ font-size: small;
+ }
+
+ a {
+ padding: 6px;
+ font-size: 0.75em;
+ }
- h5 {
- color: white;
+ #prerequisites-title {
+ font-size: small;
}
}
}
diff --git a/src/app/data/workshops-info.js b/src/app/data/workshops-info.js
index 4e6d088..fd9f5b0 100644
--- a/src/app/data/workshops-info.js
+++ b/src/app/data/workshops-info.js
@@ -1,91 +1,90 @@
let workshopsData = [
- {
- title: "Hackathon 101: How to Get Started",
- description:
- "This workshop is all about demystifying and guiding first-time hackers on good hacking practices and the general flow of a hackathon. We will start out with how to get started, team role division, how to brainstorm project ideas, user interviews, how to decide on what technology nodes to use. Then, we show the general milestone timeline of a project. Then, to finish off, we will go over how to show-off your projects on resume or verbally with a recruiter.",
- host: {
- name: "WICS (Women in Information and Computer Sciences)",
- link: "https://wics.ics.uci.edu/",
- },
- },
- {
- title: "Become a Git God",
- description:
- "Scared by merge conflicts? Losing your files in git hell? Come learn how to use git confidently using more advanced commands and best practices.",
- host: {
- name: "ACM",
- link: "https://acm-uci.org/",
- },
- },
- {
- title: "Intro to Brand Design",
- description:
- "Creating a new project from scratch and want to make it look cohesive? Join Design at UCI as we host a beginner-friendly workshop on the basics of brand design. Learn how to build a brand identity that fits your product's concept, how to simplify the process of prototyping and design through a style guide that ✨ just makes sense ✨, and how to use visual elements to make your project stand out against the competition!",
- host: {
- name: "Design at UCI",
- link: "https://designatuci.com/",
- },
- },
- {
- title: "Firebase: The Perfect All-in-One Toolchain",
- description:
- "Firebase is one of the best tools for hackers like you who want to integrate services into your application as quickly as possible! We'll be journeying through several of Firebase's features, including authentication, file storage, and databases, and tying them all together in one simple React web application.",
- host: {
- name: "Hack at UCI",
- link: "https://hack.ics.uci.edu/",
- },
- prereqs: [
- {
- description: "Download NodeJS",
- link: "https://nodejs.org/en/download/",
- },
- ],
- },
- {
- title: "Intro To Unity and Game Development",
- description:
- "An introduction to the Unity Engine (a game development software). The workshop will cover a quick overview of everything you need to know to make a game including setting up a git repository for unity, the basics of implementing stuff like movement, level design, input, audio, animations, menus, and more. The workshop will teach people everything they need to know to make a simple game.",
- host: {
- name: "Video Game Development Club",
- link: "https://sites.google.com/uci.edu/vgdcuci/home",
- },
- prereqs: [
- {
- description: "Download Unity",
- link: "https://unity.com/download",
- },
- ],
- },
- {
- title: "Scaling to Zero: Building Serverless Discord Bots",
- description:
- 'Unleash the power of serverless during our "Scaling to Zero" workshop! Learn what serverless is, its pros and cons, and unleash your creativity during our hands-on demo. Don\'t forget to bring your laptop, GitHub account, and Discord account to create your own pham bot!',
- host: {
- name: "ICS Student Council",
- link: "https://studentcouncil.ics.uci.edu/",
- },
- prereqs: [
- {
- description: "Register for a GitHub Account",
- link: "https://github.com/",
- },
- ],
- },
- {
- title: "Pre-trained Models in your Project",
- description:
- "This workshop provides an introduction to pre-trained models and demonstrates their usage in projects through Flask. You will gain an understanding of pre-trained models’ benefits and learn how to load them into memory. The workshop focuses on using Flask, a lightweight web framework, and covers the setup of a Flask application for handling model inference requests. You will learn about handling input data, forwarding it to pre-trained models for inference, and obtaining predictions or outputs. By the end, you will have the knowledge to integrate pre-trained models effectively using Flask, empowering your projects with advanced AI capabilities.",
- host: {
- name: "Commit the Change",
- link: "https://ctc-uci.com/",
- },
- prereqs: [
- {
- description: "Download Flask",
- link: "https://pypi.org/project/Flask/",
- },
- ],
- },
+ {
+ title: "Product and UI/UX Design for Hackathons",
+ description:
+ 'This workshop will offer an introduction to rapid product development and ideation including design thinking, ui/ux design, and product evaluation. These are design strategies that I\'ve learned from attending 15 hackathons and processes that will optimize your design process. Design is one of the most important elements of a hackathon that adds polish and the "wow factor" to your hackathon project, in conjunction with the overall idea and impact. This workshop will provide you with beginner and programmer-friendly guides to level up your design and overall project.',
+ host: {
+ name: "Design@UCI",
+ link: "https://designatuci.com/",
+ },
+ },
+ {
+ title: "Intro to SQL",
+ description:
+ "We will provide an introduction to SQL that covers the most vital database operations through verbal and visual explanations and an accompanying live coding demo that attendees can follow along with.",
+ host: {
+ name: "Data@UCI",
+ link: "https://www.dataatuci.com/",
+ },
+ prereqs: [
+ {
+ description: "Download MongoDB",
+ link: "https://www.mongodb.com/docs/manual/installation/",
+ },
+ ],
+ },
+ {
+ title: "Solo to Social",
+ description:
+ "Do you have friends? Do you like multiplayer applications? Learn how to build realtime multiplayer experiences for the web!",
+ host: {
+ name: "ICSSC",
+ link: "https://studentcouncil.ics.uci.edu/",
+ },
+ },
+ {
+ title: "Intro to Git Basics",
+ description:
+ "In this workshop we will introduce the basics of Git and version control.",
+ host: {
+ name: "WICS",
+ link: "https://wics.ics.uci.edu/",
+ },
+ },
+ {
+ title: "Intro to Web Dev",
+ description:
+ "Learn how to create a web app by going through the frontend and backend fundamentals in a live coding demo.",
+ host: {
+ name: "Ryan Yang",
+ },
+ },
+ {
+ title: "Into to Sveltekit",
+ description:
+ "Looking for ways to go beyond React and supercharge your website? Take a dive into SvelteKit, a web development framework that provides many of the functionalities of other frameworks but in a simpler and more intuitive format!",
+ host: {
+ name: "ACM@UCI",
+ link: "https://www.acm-uci.org/",
+ },
+ },
+ {
+ title: "Intro to FastAPI",
+ description:
+ "FastAPI is a powerful tool for building APIs with Python! Come learn how to integrate FastAPI into your Hackathon project and get a working backend implemented.",
+ host: {
+ name: "Hack@UCI",
+ link: "https://hack.ics.uci.edu/",
+ },
+ },
+ {
+ title: "Intro to Application Security: Protecting Your Projects Workshop",
+ description:
+ "Cybersecurity is a complex issue that usually requires consulting with experts and is managed by dedicated teams, but software developers should still be equipped with the knowledge to at least make sure their code and configurations are secure against trivial attacks. In this workshop, members from Cyber@UCI will teach you the fundamentals of application security and contextualize it in common hackathon projects so that you can at least discuss the security and privacy implications in your projects with mentors and judges. We also showcase different tools you can use to scan for security vulnerabilities in your code.",
+ host: {
+ name: "Cyber@UCI",
+ link: "https://cyberuci.com/",
+ },
+ },
+ {
+ title: "API 101",
+ description:
+ "Want to level up your program? Use postman! We‘ll teach you how to easily integrate APIs without the hassle of confusing code!",
+ host: {
+ name: "Postman",
+ link: "https://www.postman.com/",
+ },
+ },
];
export { workshopsData };
diff --git a/src/app/views/workshops/Workshops.jsx b/src/app/views/workshops/Workshops.jsx
index caeecd4..cf5f03e 100644
--- a/src/app/views/workshops/Workshops.jsx
+++ b/src/app/views/workshops/Workshops.jsx
@@ -1,24 +1,28 @@
import { Link } from "react-router-dom";
-import "./Workshops.scss";
+import { WorkshopCard, Footer } from "src/app/components";
+import { workshopsData } from "src/app/data/workshops-info.js";
+import workshopsTitle from "/assets/images/titles/vh-workshops-title.png";
-// import { WorkshopCard, Footer } from "./app/components";
-import { WorkshopCard, Footer } from "../../components";
-// import { workshopsData } from "./assets/data/workshops-info.js";
-import { workshopsData } from "../../data/workshops-info.js";
+import "./Workshops.scss";
-function Workshops() {
+const Workshops = () => {
return (
-
- {title}
-- Hosted by{" "} - - {host.name} - -
-
- {recap &&
- renderButtons(
- Object.entries(recap).map((pair) => {
- const [key, val] = pair;
- return { description: key, link: val };
- })
- )}
-
+
+
+ {title}
+Hosted by
+{host.name}
+ {/* recap??? */} + {recap && + renderButtons( + Object.entries(recap).map((pair) => { + const [key, val] = pair; + return { description: key, link: val }; + }) + )} + {prereqs && ( +
+
+ )}
+ Prequisites:
+ {renderButtons(prereqs)} +
+
- {description}
- {prereqs && (
- {description}
-
- )}
Prequisites:
- {renderButtons(prereqs)} -
-
);
-}
+};
export default Workshops;
diff --git a/src/app/views/workshops/Workshops.scss b/src/app/views/workshops/Workshops.scss
index 716b540..3dac9a5 100644
--- a/src/app/views/workshops/Workshops.scss
+++ b/src/app/views/workshops/Workshops.scss
@@ -1,4 +1,4 @@
-@import "../../../globals/vh-styles.scss";
+@import "src/globals/vh-styles.scss";
.workshops {
min-height: 100vh;
@@ -11,4 +11,22 @@
h2 {
margin-top: 2em;
}
+
+ h5 {
+ font-size: 1.1em;
+ }
+
+ #workshops_header {
+ text-align: center;
+ color: $darkerPurple;
+
+ #title-img {
+ width: 50%;
+ margin-top: 50px;
+
+ @media screen and (max-width: $break-small) {
+ margin-top: 75px;
+ }
+ }
+ }
}
Workshops
-- For time and location info, check the{" "} - Schedule page! -
- {workshopsData.map((workshop) => WorkshopCard(workshop))} +
+ 
+
+
+ {workshopsData.map((workshop) => (
+