Skip to content

Commit

Permalink
Merge pull request #113 from uclaacm/salma/initiative-descriptions
Browse files Browse the repository at this point in the history 
Feat: Initiative Descriptions and Member Page
  • Loading branch information
@Arc-blroth
Arc-blroth authored Sep 21, 2023
2 parents a6a5a7e + a7899eb commit f7df18c
Show file tree
Hide file tree
Showing 14 changed files with 502 additions and 79 deletions.
11 changes: 11 additions & 0 deletions components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ export default function Navbar() {
<Link className={styles.hoverable} href="/about">
<li>About</li>
</Link>
<Link className={styles.hoverable} href="/members">
<li>Members</li>
</Link>
<Link className={styles.hoverable} href="/events">
<li>Events</li>
</Link>
Expand All @@ -44,6 +47,14 @@ export default function Navbar() {
<Link className={styles.hoverable} href="/archive">
<li>Archive</li>
</Link>
<li>
<button
onClick={() => (window.location.href = "/join")}
className={styles.join}
>
<Link href="/join">Join Us</Link>
</button>
</li>
</ul>
</nav>
);
Expand Down
36 changes: 25 additions & 11 deletions data/events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,52 @@ export interface EventType {
name: string;
description: string;
link?: string;
id: string;
icon?: any;
textIcon?: string;
iconAlt?: string;
}

enum EventKind {
CyAc = "Cyber Academy",
PBR = "Psi Beta Rho",
CyLab = "Cyber Lab",
LACTF = "LA CTF",
CyTalks = "Cyber Talks",
Misc = "Miscellaneous",
}

export const eventTypes = [
{
name: EventKind.PBR,
description: "add description here",
link: "https://pbr.uclaacm.com/",
name: EventKind.CyAc,
description: 'Cyber Academy is a weekly track designed to introduce you to the world of cybersecurity and help you expand your knowledge, regardless of your current skill level. Each week, we\'ll explore various cybersecurity topics in 15-20 minute talks and provide you with the opportunity to apply your learning through engaging "capture-the-flag"-style challenges. You\'ll also have the chance to collaborate with your peers in smaller groups to do some hands-on hacking! At Cyber Academy, we strive to open the door to all that cybersecurity has to offer, helping you learn and apply the foundational skills essential for success in this dynamic field.',
id: "cyber-academy",
icon: "cyber-logo-light-inverted.png"
},
{
name: EventKind.CyLab,
description: "add description here",
description: 'ACM Cyber\'s newest offering, Cyber Lab is home to a rotating variety of quarter-long projects, planned to give you the freedom to learn something new and apply what you already know in a practical setting. With help from current officers, alumni mentors, and other members of ACM Cyber, you can create a unique product by the end of the quarter. From building your own operating system, to video game hacking, to adversarial AI, Cyber Lab has it all! Be sure to keep a lookout for our future projects and even submit ideas of your own.',
id: "cyber-lab",
icon: "test-tube.svg"
},
{
name: EventKind.LACTF,
description: "add description here",
link: "https://lac.tf",
name: EventKind.PBR,
description: 'Psi Beta Rho (PBR) is UCLA\'s premier competitive cybersecurity team. We are a group of hackers, programmers, and security enthusiasts who love to learn and compete. Whether we are pwning a binary or attacking a site using cross-site scripting, we like to have fun! We mostly compete in Capture the Flag (CTF) competitions which are cybersecurity competitions where you tackle challenges and gain hands-on experience with solving security problems! If you are interested in getting hands-on experience with exploit development, security research, or just enjoy solving challenges then PBR is for you! We are advised by Dr. Yuan Tian.',
link: "https://pbr.uclaacm.com/",
id: "pbr",
textIcon: "ψβρ"
},
{
name: EventKind.CyTalks,
description: "add description here",
name: EventKind.LACTF,
description: 'Our largest event of the year, LA CTF is an annual cybersecurity competition with speakers, career events, challenges, and prizes, hosted right here at UCLA. Whether you are tackling your first exploit or have professional experience, there will be something just right for you! Participation and planning sessions are open to all.',
id: "lactf",
link: 'https://lac.tf',
icon: "flag.svg"
},
{
name: EventKind.Misc,
description: "add description here",
description: 'Alongside our other events, we also offer socials, member talks, speaker events, career panels, and more! Our club not only helps develop peoples\' careers but also grows the community of hacking enthusiasts!',
id: "misc",
icon: "boba.svg"
},
];

Expand Down
2 changes: 2 additions & 0 deletions next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@ const nextConfig = {
return {
"/": { page: "/" },
"/about": { page: "/about" },
"/members": { page: "/members" },
"/events": { page: "/events" },
"/archive": { page: "/archive" },
"/blog": { page: "/blog" },
"/join": { page: "/join" },
"/404": { page: "/404" },
...(debug
? {
Expand Down
78 changes: 43 additions & 35 deletions pages/about.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import Image from "next/image";

import members, { PersonInfoProps } from "@/data/members";
import { eventTypes, EventType } from "@/data/events";

import styles from "@/styles/About.module.scss";
import CyberSeo from "@/components/CyberSeo";
Expand All @@ -16,8 +14,8 @@ export default function About() {
<div className="content">
<h1>About</h1>
<img
src="/images/cyber-symposium.png"
alt="ACM Cyber x ACM AI Spring 2023 projects symposium."
src="/images/ctf-experts.png"
alt="A talk from two CTF experts."
className={styles.aboutImage}
/>

Expand All @@ -31,46 +29,56 @@ export default function About() {
the students at UCLA!
</p>

<h2>Members</h2>

<div className={styles.officersContainer}>
{members.map((officer: PersonInfoProps, index: number) => (
<PersonInfo
<h2>What We Do</h2>
<p>
ACM Cyber is home to a wide variety of events and projects hosted
throughout the year. Check out our main initiatives below!
</p>
<div className={styles.cyberThings}>
{eventTypes.map((event: EventType, index: number) => (
<EventInfo
key={index}
name={officer.name}
role={officer.role}
bio={officer.bio}
pronouns={officer.pronouns}
photo={officer.photo}
name={event.name}
description={event.description}
id={event.id}
link={event.link}
icon={event.icon}
iconAlt={event.iconAlt}
textIcon={event.textIcon}
/>
))}
</div>
<h2 />
</div>
</div>
</>
);
}

function PersonInfo({ name, role, bio, pronouns, photo }: PersonInfoProps) {
function EventInfo({
name,
description,
link,
id,
icon,
iconAlt,
textIcon,
}: EventType) {
return (
<div className={styles.personInfo}>
<Image
className={styles.personImage}
src={
photo !== ""
? "/images/members/" + photo
: "/images/cyber-logo-light.png"
}
alt={`Profile picture of ${name}`}
width={300}
height={300}
/>
<h3>{name}</h3>
<p>{pronouns}</p>
<p>
<i>{role}</i>
</p>
<p>{bio}</p>
</div>
<span id={id}>
<div className={styles.cyberThing}>
<div className={styles.cyberThingIcon} draggable="true">
{textIcon ? (
<p role="img" aria-label={iconAlt}>
{textIcon}
</p>
) : (
<img src={"/images/" + icon} alt={iconAlt} />
)}
</div>
<h2>{name}</h2>
<p>{description}</p>
</div>
</span>
);
}
18 changes: 13 additions & 5 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Link from "next/link";
import styles from "styles/Home.module.scss";
import CyberSeo from "@/components/CyberSeo";
import CyberWordmark from "@/components/CyberWordmark";
Expand All @@ -7,6 +8,7 @@ import Boba from "@/public/images/boba.svg";
import InstagramLogo from "@/public/images/instagram.svg";
import LinkedinLogo from "@/public/images/linkedin.svg";
import TestTube from "@/public/images/test-tube.svg";
import CyberLogoInverted from "@/public/images/cyber-logo-light-inverted.png";
import TropicalImage from "@/components/TropicalImage";

export default function HomePage() {
Expand Down Expand Up @@ -35,6 +37,12 @@ export default function HomePage() {
</p>
<h1 className={styles.motto}>ACM Cyber has something for you.</h1>
<div className={styles.cyberThings}>
<CyberThing
icon={CyberLogoInverted}
title="Cyber Academy"
description="Learn cybersecurity skills from beginner to advanced topics!"
link="/about#cyber-academy"
/>
<CyberThing
textIcon="ψβρ"
title="Psi Beta Rho (PBR)"
Expand All @@ -43,9 +51,9 @@ export default function HomePage() {
/>
<CyberThing
icon={TestTube}
title="Cyber Labs"
title="Cyber Lab"
description="Hands-on security projects!"
link="/events"
link="/about#cyber-lab"
/>
<CyberThing
icon={Flag}
Expand All @@ -57,7 +65,7 @@ export default function HomePage() {
icon={Boba}
title="And More!"
description="Career panels, talks, socials, and much more!"
link="/events"
link="/about#misc"
/>
</div>
</div>
Expand Down Expand Up @@ -99,7 +107,7 @@ function CyberThing({
}) {
iconAlt = iconAlt ?? title + " Logo";
return (
<a href={link} draggable="false">
<Link href={link} draggable="false">
<div className={styles.cyberThing}>
<div className={styles.cyberThingIcon} draggable="true">
{textIcon ? (
Expand All @@ -113,6 +121,6 @@ function CyberThing({
<h2>{title}</h2>
<p>{description}</p>
</div>
</a>
</Link>
);
}
75 changes: 75 additions & 0 deletions pages/join.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import CyberSeo from "@/components/CyberSeo";
import styles from "@/styles/Join.module.scss";

export default function Join() {
return (
<>
<CyberSeo title="Join Us" description="Join ACM Cyber at UCLA!" />
<div className="page">
<div className="content">
<h1>Join Us</h1>

<img
src="/images/cyber-symposium.png"
alt="AI x Cyber Symposium Spring 2023."
className={styles.joinImg}
/>

<p>
Want to join UCLA's premier cybersecurity club?{" "}
<strong>All experiences welcome!</strong> Our membership form opens
at the start of every quarter. Join our{" "}
<a href="https://discord.com/invite/j9dgf2q">Discord</a> to stay up
to date! All of our events are open to the public, so feel free to
join us at any time!
</p>
<h2>What do I have to do?</h2>
<p>
ACM Cyber is an entirely student-run organization and would not
exist without the contributions from all of our members! If you'd
like to become an active member of ACM Cyber, complete one of the
following requirements.
</p>
<ul>
<li>
<strong>Cyber Academy:</strong> Submit one writeup for a challenge
you've solved by the end of the quarter.
</li>
<li>
<strong>Cyber Lab:</strong> Participate in a project with Cyber
Lab. At the end of the quarter, create a blog post with your
project group about your work and present your creation to the
club!
</li>
<li>
<strong>Psi Beta Rho:</strong> Submit one writeup for a challenge
you've solved by the end of the quarter and attend at least one
CTF on the weekend
</li>
</ul>

<h2>What's in it for me?</h2>
<ul>
<li>
<strong>Community:</strong> Join a community of like-minded peers
enthusiastic about hacking! Your photo and bio will also be added
to our <a href="/members">members page</a>!
</li>
<li>
<strong>Cyber Pals:</strong> Our mentorship/peer program that
groups you with members of the club for social & academic support!
</li>
<li>
<strong>Cyber Summer Research Fellowship (CSRF):</strong> Members
who complete all requirements will be guaranteed a position in
CSRF, our summer research program, where you work on a security &
privacy project advised by a mentor!
</li>
</ul>
<br />
</div>
</div>
</>
);
}
Loading

0 comments on commit f7df18c

Please sign in to comment.