Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create acmcsuf.com/wave1 page for executive board apps #838

Merged
merged 2 commits into from
Apr 24, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/lib/public/board/data/tiers.json
Original file line number Diff line number Diff line change
@@ -5,24 +5,24 @@
"Treasurer": { "id": 3, "index": 250 },
"Secretary": { "id": 4, "index": 300 },
"Data Analyst": { "id": 5, "index": 350 },
"Special Events Leader": { "id": 6, "index": 400 },
"Special Events Team Lead": { "id": 6, "index": 400 },
"Special Events Officer": { "id": 7, "index": 450 },
"Event Coordinator": { "id": 8, "index": 500 },
"Marketing Leader": { "id": 9, "index": 550 },
"Marketing Team Lead": { "id": 9, "index": 550 },
"Marketing Officer": { "id": 24, "index": 560 },
"Historian": { "id": 10, "index": 600 },
"Algo Leader": { "id": 11, "index": 650 },
"Algo Team Lead": { "id": 11, "index": 650 },
"Algo Officer": { "id": 12, "index": 700 },
"Design Leader": { "id": 13, "index": 750 },
"Design Team Lead": { "id": 13, "index": 750 },
"Design Project Manager": { "id": 14, "index": 800 },
"Design Operations Manager": { "id": 15, "index": 850 },
"Design Officer": { "id": 16, "index": 900 },
"Dev Leader": { "id": 17, "index": 950 },
"Dev Team Lead": { "id": 17, "index": 950 },
"Dev Project Manager": { "id": 18, "index": 1000 },
"Dev Officer": { "id": 19, "index": 1050 },
"AI Leader": { "id": 20, "index": 1100 },
"AI Team Lead": { "id": 20, "index": 1100 },
"AI Officer": { "id": 21, "index": 1150 },
"Game Dev Leader": { "id": 25, "index": 1170 },
"Game Dev Team Lead": { "id": 25, "index": 1170 },
"Game Dev Officer": { "id": 26, "index": 1180 },
"Nodebuds Officer": { "id": 22, "index": 1200 },
"ICC Representative": { "id": 23, "index": 1250 }
3 changes: 2 additions & 1 deletion src/lib/public/links/links.json
Original file line number Diff line number Diff line change
@@ -50,5 +50,6 @@
"http-deck": "https://docs.google.com/presentation/d/1Ixk3qmXzq1IYHOc_jgEUsg4fkay-kYFKOFJShNBw-Lc/edit",
"api-meeting-deck": "https://docs.google.com/presentation/d/1kXMse3folOF6iIxoe87lZ_5ZgvhkWHazsJRtoR5VXws/edit?usp=sharing",
"pm-resources": "https://enormous-guarantee-b83.notion.site/PM-Resources-Public-c75a990ff0a34137be05cde66ce00be4",
"student-pack": "/blog/806"
"student-pack": "/blog/806",
"wave1apply": "https://forms.gle/FMvmhhUb5vkNDbsC8"
}
136 changes: 136 additions & 0 deletions src/routes/(site)/wave1/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<script lang="ts">
import { MetaTags } from 'svelte-meta-tags';
import Block from '$lib/components/block/block.svelte';
import Button from '$lib/components/button/button.svelte';
import Spacing from '$lib/public/legacy/spacing.svelte';
import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
import PositionList from './position-list.svelte';
import { POSITIONS } from './data';
function expandAll() {
const positions = document.querySelectorAll('.position');
positions.forEach((el) => el.setAttribute('open', 'true'));
}
</script>

<svelte:head>
<title>Wave 1 board applications | ACM at CSUF</title>
</svelte:head>

<MetaTags
openGraph={{
title: 'Fall 2023 board applications',
description:
'Listed below are the positions that are open for the Fall 2023/Spring 2024 semester. Please read the descriptions carefully and apply for the position(s) that you are interested in. You may apply for multiple positions, but you may only be selected for one. If you are selected for a position, you will be contacted by the current board member in charge of that position.',
url: 'https://acmcsuf.com/wave1',
type: 'article',
article: {
publishedTime: '2023-24-04T00:00:00.000Z',
modifiedTime: '2023-24-04T00:00:00.000Z',
},
}}
/>

<Spacing --min="175px" --med="200px" --max="200px" />

<Block align={TextAlignment.LEFT}>
<h1 slot="headline" class="size-lg">Wave 1 board applications</h1>
<p slot="text" class="size-sm">
Listed below are the positions that are open for the Fall 2023/Spring 2024 semester (full time
position). Please read the descriptions carefully and apply for the position(s) that you are
interested in. You may apply for multiple positions, but you may only be selected for one. If
you are selected for a position, you will be contacted by the current board member in charge of
that position.
<br />
<br />
Last updated April 24th, 2023
<br />
<br />
<span class="center-btn" on:click={expandAll} on:keypress={expandAll}>
<Button text="Expand all!" />
</span>
</p>
</Block>

<section class="positions-container">
<div class="positions-container-inner">
<PositionList data={POSITIONS} />
</div>
</section>

<Spacing --med="64px" />

<span class="center-btn">
<Button link="/wave1apply" text="Apply now!" />
</span>

<Spacing --med="64px" />

<Block align={TextAlignment.LEFT}>
<h1 id="contact-information" slot="headline" class="size-lg">Contact information</h1>
<div slot="text" class="contact-text">
<p class="size-sm">
<span class="brand-italic"
>Feel free to contact the ACM Executive Board if you have questions.</span
>
</p>

<p class="size-sm">
<span class="brand-em">Karnikaa Velumani (ACM President)</span>
</p>
<ul>
<li>Email: <code>[email protected]</code></li>
<li>Discord: <code>Karbas#0001</code></li>
</ul>

<p class="size-sm">
<span class="brand-em">Ethan Davidson (ACM VP / Webmaster)</span>
</p>
<ul>
<li>Email: <code>[email protected]</code></li>
<li>Discord: <code>EthanThatOneKid#3456</code></li>
</ul>
</div>
</Block>

<Spacing --min="40px" --med="95px" --max="120px" />

<style lang="scss">
.page-body {
width: 100%;
margin: 0 1rem;
}
.center-btn {
display: flex;
justify-content: center;
}
.contact-text ul {
padding: 0 0 0 1rem;
}
.positions-container {
display: flex;
flex-direction: column;
align-items: center;
}
.positions-container-inner {
margin: 0 24px;
width: 100%;
margin: 2rem 2rem 0;
}
@media (min-width: 768px) {
.positions-container {
margin-top: 2rem;
}
.positions-container-inner {
max-width: 64ch;
margin: 0 1rem;
}
}
</style>
215 changes: 215 additions & 0 deletions src/routes/(site)/wave1/data.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
import { li } from '$lib/components/recursive-ul/utils';

import type { ClubPosition } from './position';

/**
* The tools that are used in the club.
*
* @remarks This is a map of tool names to their reasons for being used.
*/
export const TOOLS = {
'Google Drive/Docs': 'To collaborate on presentations, documents, and spreadsheets.',
Discord: 'Internal team communication, assistance for student questions',
Figma: 'Create marketing materials and teaching students how to use it',
GitHub: 'To collaborate on code, manage projects, and teach students how to use it',
'Social media': 'Discord, Instagram, LinkedIn, and YouTube',
'Google Colab/Juptyer Notebook': 'Cloud development environment for Python',
'Unreal/Unity': 'Game development environment',
};

export const POSITIONS: ClubPosition<keyof typeof TOOLS>[] = [
{
title: 'President',
teamColor: 'var(--acm-general-rgb)',
qualifications: [
li("Must have a deep commitment to the organization's mission and goals"),
li('Strong leadership, communication, and organizational skills'),
li('Committed to promoting diversity and inclusion within the organization'),
],
requirements: [li('Must be a member of ACM for at least one semester')],
tools: [
'Google Drive/Docs',
'Discord',
'Figma',
'GitHub',
'Social media',
'Google Colab/Juptyer Notebook',
],
responsibilities: [
li(
'Official spokesperson of the organization, representing the policies, views and opinions of the organization in its relations with the campus and community at large'
),
li(
'Works with the Computer Science Department to plan, create, and advertise programs that benefit the student population'
),
li('Collaborates with board members to establish new programs or to maintain existing ones'),
li('Provides resources and support to fellow board members'),
li('Meets with club advisors regularly to discuss the state of the organization'),
],
},
{
title: 'Vice President',
teamColor: 'var(--acm-general-rgb)',
qualifications: [
li('Retain similar intentions as the President and provide the backend support'),
li('Must be approachable, positive, empathetic, and flexible'),
li("Be familiar with the President's responsibilities and be able to step in if needed"),
],
tools: [
'Google Drive/Docs',
'Discord',
'Figma',
'GitHub',
'Social media',
'Google Colab/Juptyer Notebook',
],
responsibilities: [
li('Presides at the organization’s meetings in the absence of the President'),
li('Collaborates with the President to carry out tasks'),
li('Organizes at least one board meeting a month'),
li('Assist in reaching out other organizations to do collaborations'),
li('Oversees all ACM teams and workshops'),
li('Check Discord messages and respond to the important discussion in regards to ACM daily'),
],
},
{
title: 'Treasurer',
teamColor: 'var(--acm-general-rgb)',
qualifications: [
li('Strong organizational skills'),
li(
'Expertise and understanding of financial management, financial reporting, and budgeting.'
),
li('Flexible schedule and availability to attend weekly ECS-ICC meetings'),
],
tools: ['Google Drive/Docs', 'Discord'],
responsibilities: [
li('Handle all financial affairs and budgeting of the organization'),
li(
"Maintain ASI Agency Accounts in the organization's name, which requires signatures of the Treasurer, President, and Advisor"
),
li('Manage club equipment and t-shirts'),
li('Submit Financial Annual Report'),
li('Lead fundraising effort and attaining professional sponsorship'),
li('Manage sponsorship packet and disbursement'),
li('Attend weekly ECS-ICC meetings and request funding for events if necessary'),
],
},
{
title: 'AI Team Lead',
teamColor: 'var(--acm-ai-rgb)',
qualifications: [
li('Interest in artificial intelligence'),
li('Interest in public speaking/leading events'),
li('Passion for guiding AI related student projects'),
li('Strong leadership, communication, and organizational skills'),
],
tools: ['Google Drive/Docs', 'Discord', 'Google Colab/Juptyer Notebook', 'GitHub'],
responsibilities: [
li(
'Create biweekly/weekly workshop presentations prior to events that effectively teach students artificial intelligence'
),
li('Recruit members to set up and maintain infrastructure for the AI Team'),
li('Check Discord messages and respond to the important discussion in regards to AI daily'),
li('Attend all necessary ACM Executive Board Meetings'),
],
},
{
title: 'Algo Team Lead',
teamColor: 'var(--acm-algo-rgb)',
qualifications: [
li('Passion for algorithms'),
li('Productive time management'),
li('Interest in public speaking and leading events'),
li('Strong leadership, communication, and organizational skills'),
],
tools: ['Google Drive/Docs', 'Discord'],
responsibilities: [
li(
'Create biweekly/weekly workshop presentations prior to events that effectively teach students algorithms/data structures'
),
li('Recruit members to set up and maintain infrastructure for the Algo Team'),
li('Check Discord messages and respond to the important discussion in regards to Algo daily'),
li('Attend all necessary ACM Executive Board Meetings'),
],
},
{
title: 'Design Team Lead',
teamColor: 'var(--acm-design-rgb)',
qualifications: [
li('Open mind to suggest new ideas in the field of design'),
li('Interest in learning and teaching common apps (ex. Figma)'),
li('Interest in programming to create basic front-end applications'),
li('Strong leadership, communication, and organizational skills'),
],
tools: ['Google Drive/Docs', 'Discord', 'Figma'],
responsibilities: [
li(
'Create biweekly/weekly workshop presentations prior to events that effectively teach students design'
),
li('Recruit members to set up and maintain infrastructure for the Design Team'),
li(
'Check Discord messages and respond to the important discussion in regards to Design daily'
),
li('Attend all necessary ACM Executive Board Meetings'),
],
},
{
title: 'Dev Team Lead',
teamColor: 'var(--acm-dev-rgb)',
qualifications: [
li('Passion for helping students develop projects'),
li('Strong leadership, communication, and organizational skills'),
li('Flexibility with skills to assist students in a variety of projects'),
],
tools: ['Google Drive/Docs', 'Discord', 'GitHub'],
responsibilities: [
li(
'Create biweekly/weekly workshop presentations prior to events that effectively teach students common development tools'
),
li('Oversee and manage multiple projects and teams'),
li('Recruit members to set up and maintain infrastructure for the Dev Team'),
li('Check Discord messages and respond to the important discussion in regards to Dev daily'),
li('Attend all necessary ACM Executive Board Meetings'),
],
},
{
title: 'Game Dev Team Lead',
teamColor: 'var(--acm-gamedev-rgb)',
qualifications: [
li('Passion and interest in game development'),
li('Strong leadership, communication, and organizational skills'),
li('Flexibility with skills to assist students in a variety of projects'),
],
tools: ['Google Drive/Docs', 'Discord', 'GitHub', 'Unreal/Unity'],
responsibilities: [
li(
'Create biweekly/weekly workshop presentations prior to events that effectively teach students game development'
),
li('Recruit members to set up and maintain infrastructure for the Game Dev Team'),
li(
'Check Discord messages and respond to the important discussion in regards to Game Dev daily'
),
li('Attend all necessary ACM Executive Board Meetings'),
],
},
{
title: 'Marketing Team Lead',
teamColor: 'var(--acm-marketing-rgb)',
qualifications: [
li('Interest in exploring business and marketing'),
li('Substantial awareness or usage of multiple social media platforms'),
li('Represent and advocate diversity within the club'),
li('Strong management and organizational skills'),
],
tools: ['Google Drive/Docs', 'Discord', 'Figma', 'Social media'],
responsibilities: [
li(
'Assist in designing flyers for marketing to be printed and posted on all forms of social media'
),
li('Suggest and direct new ideas for the diversification of our club'),
li('Oversee and manage all social media platforms'),
li('Delegate tasks to other board members of the Marketing Team'),
],
},
];
13 changes: 13 additions & 0 deletions src/routes/(site)/wave1/position-list.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script lang="ts">
import Position from './position.svelte';
import type { ClubPosition } from './position';
import type { TOOLS } from './data';
export let data: ClubPosition<keyof typeof TOOLS>[];
</script>

{#each data as position}
<Position data={position} />
{:else}
<p>There are no open positions at this time.</p>
{/each}
119 changes: 119 additions & 0 deletions src/routes/(site)/wave1/position.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<script lang="ts">
import RecursiveUL from '$lib/components/recursive-ul/recursive-ul.svelte';
import type { ClubPosition } from './position';
import { TOOLS } from './data';
export let data: ClubPosition<keyof typeof TOOLS>;
const id = data.title.replaceAll(/\s/g, '-').toLowerCase();
const formattedTools = data.tools.map((name) => ({
html: `<span class="headers">${name}:</span> ${TOOLS[name]}`,
}));
</script>

<details {id} style:--highlights={data.teamColor} class="position">
<summary class="position__summary">
<h2 class="headers">{data.title}</h2>
</summary>

<div class="position__body">
<div class="position__qualifications">
<h3 class="headers">Qualifications</h3>
<RecursiveUL data={data.qualifications} />
</div>

<div class="position__requirements">
{#if data.requirements}
<h3 class="headers">Requirements</h3>
<RecursiveUL data={data.requirements} />
{/if}
</div>

<p class="position__tools">
<span class="headers position__tools__title">Tools:</span>
<span class="position__tools__text"
>We used following tools to plan and keep up with the workload</span
>
<RecursiveUL data={formattedTools} />
</p>

<div class="position__responsibilities">
<h3 class="headers">Responsibilities</h3>
<RecursiveUL data={data.responsibilities} />
</div>
</div>
</details>

<style lang="scss">
.position {
scroll-padding-top: 1rem;
margin: 1rem 0;
box-shadow: 0 6px 18px rgba(var(--highlights, --acm-general-rgb), 0.25);
transition: all 0.15s ease-in-out;
border-radius: 30px;
border: 2px solid var(--acm-dark);
& :global(ul) {
padding-left: 1.5rem;
margin-left: 0;
}
&:hover {
box-shadow: 0 6px 18px rgba(var(--highlights, --acm-general-rgb), 0.65);
}
&[open] {
box-shadow: 0 6px 24px rgba(var(--highlights, --acm-general-rgb), 0.75);
border: 2px solid rgb(var(--highlights, --acm-general-rgb));
}
&:hover h2,
&[open] h2 {
color: rgb(var(--highlights, --acm-general-rgb));
}
&__summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
cursor: pointer;
/**
* [START HACK] Remove the default marker from the <details> element.
* @see https://stackoverflow.com/a/66814239
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget
*/
list-style: none;
&::marker, /* Latest Chrome, Edge, Firefox */
&::-webkit-details-marker /* Safari */ {
display: none;
}
/* [END HACK] */
}
&__body {
padding: 1rem;
}
&__requirements {
margin-bottom: 1rem;
}
&__tools {
margin-bottom: 1rem;
&__title {
margin-bottom: 1rem;
}
&__text {
margin-bottom: 0.5rem;
}
}
&__responsibilities {
margin-bottom: 1rem;
}
}
</style>
11 changes: 11 additions & 0 deletions src/routes/(site)/wave1/position.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import type { ListItem } from '$lib/components/recursive-ul/types';
import type { TIERS } from '$lib/public/board/data';

export interface ClubPosition<ToolNames extends string = string> {
title: keyof typeof TIERS;
teamColor: string;
qualifications: ListItem[];
requirements?: ListItem[];
tools: ToolNames[];
responsibilities: ListItem[];
}