Merge branch 'main' into feat/1062-workshops-page

src/lib/public/design-gallery/data/entries.json

@@ -0,0 +1,72 @@
+[
+  {
+    "discordUsername": "AJAreYouThere",
+    "day": 7,
+    "year": 2024,
+    "prompt": "Design settings for something.",
+    "imageSrc": "/design_gallery/AJAreYouThere_day7.png"
+  },
+  {
+    "discordUsername": "bergerboyyy",
+    "day": 25,
+    "year": 2024,
+    "prompt": "Create a New Capy Discord Banner.",
+    "imageSrc": "/design_gallery/bergerboyyy_day25.svg"
+  },
+  {
+    "discordUsername": "bergerboyyy",
+    "day": 4,
+    "year": 2024,
+    "prompt": "Design a calculation element or interface.",
+    "imageSrc": "/design_gallery/bergerboyyy_day4.svg"
+  },
+  {
+    "discordUsername": "cheppies",
+    "day": 12,
+    "year": 2024,
+    "prompt": "Design a Poster for a product.",
+    "imageSrc": "/design_gallery/cheppies_day12.png"
+  },
+  {
+    "discordUsername": "cheppies",
+    "day": 9,
+    "year": 2024,
+    "prompt": "Design a music player.",
+    "imageSrc": "/design_gallery/cheppies_day9.png"
+  },
+  {
+    "discordUsername": "demonicgoat",
+    "day": 3,
+    "year": 2024,
+    "prompt": "Design a Landing Page!",
+    "imageSrc": "/design_gallery/demonicgoat_day3.svg"
+  },
+  {
+    "discordUsername": "kroizzont",
+    "day": 3,
+    "year": 2024,
+    "prompt": "Design a Landing Page!",
+    "imageSrc": "/design_gallery/kroizzont_day3.png"
+  },
+  {
+    "discordUsername": "semsema",
+    "day": 14,
+    "year": 2024,
+    "prompt": "Design a Countdown Timer.",
+    "imageSrc": "/design_gallery/semsema_day14.png"
+  },
+  {
+    "discordUsername": "surrealreal_",
+    "day": 12,
+    "year": 2024,
+    "prompt": "Design a Poster for a product.",
+    "imageSrc": "/design_gallery/surrealreal__day12.png"
+  },
+  {
+    "discordUsername": "t_1907",
+    "day": 2,
+    "year": 2024,
+    "prompt": "Design a credit card checkout form.",
+    "imageSrc": "/design_gallery/t_1907_day2.png"
+  }
+]

src/lib/public/design-gallery/data/index.ts

@@ -0,0 +1,4 @@
+import type { DesignGalleryEntry } from '../types';
+import ENTRIES_JSON from './entries.json';
+
+export const ENTRIES = ENTRIES_JSON as DesignGalleryEntry[];

src/lib/public/design-gallery/index.ts

@@ -0,0 +1 @@
+export * from './types';

src/lib/public/design-gallery/types.ts

@@ -0,0 +1,7 @@
+export interface DesignGalleryEntry {
+  discordUsername: string;
+  day: number;
+  year: number;
+  prompt: string;
+  imageSrc: string;
+}

src/lib/public/quiz/responses/data.ts

@@ -3,7 +3,6 @@ import { TeamMatch } from '$lib/public/quiz/questions/types';
 export interface TeamReport {
   blurb: string;
   blurbRecommend: string;
-  recommendations: Array<{ title: string; link: string }>;
   workshopPictures: string[];
 }
 
@@ -15,79 +14,44 @@ export const REPORTS: Record<Exclude<TeamMatch, TeamMatch.TEAMLESS>, TeamReport>
   [TeamMatch.AI]: {
     blurb:
       'acmAI is focused on introducing Artificial Intelligence and Machine Learning in a beginner friendly way. Workshops are project based and are centered around interactivity. We have a keen eye for problem solving and solution-based programming.',
-    blurbRecommend:
-      'AI events are coming soon this semester, in the mean time keep an eye out for those and futher resources listed on this page. Addionally, becoming actively involved in our #ai-chat on the Discord will surely help in the long-run.',
-    recommendations: [],
-    workshopPictures: [],
+    blurbRecommend: 'Check out #🦾ai-resources in our Discord server for more resources.',
+    workshopPictures: ['/assets/ai-workshop.jpg'],
   },
   [TeamMatch.DEV]: {
     blurb:
       'acmDev aims to have weekly meetings to work on projects as a way to improve our members’ skills at working in groups as well as introduce them to new technologies to make their ideas into software.',
-    blurbRecommend:
-      'The Dev hosts weekly project workshops this semester that go over various practices and ideas, more info about those can be found on our socials. However, below will be some resources which the Dev team recommends to kick off your project career.',
-    recommendations: [
-      {
-        title: 'Svelte Basics',
-        link: 'https://svelte.dev/tutorial/basics',
-      },
-    ],
+    blurbRecommend: 'Check out #🌐dev-resources in our Discord server for more resources.',
     workshopPictures: ['/assets/dev-workshop.jpg'],
   },
   [TeamMatch.DESIGN]: {
     blurb:
       'acmDesign is all about exposing you to the elements of UI/UX. We go over good practices to follow when starting a project, interesting frontend tips, and show that anyone can design.',
-    blurbRecommend:
-      "Figma is everyone's friend when it comes to designing, but sometimes it's hard to translate that onto code. That's why it is important to get a really good understanding of HTML, CSS, and Javascript. Below are some recommended resources for your journey.",
-    recommendations: [
-      {
-        title: "Kevin Powell's neat css tricks",
-        link: 'https://www.youtube.com/kepowob',
-      },
-      {
-        title: "The Net Ninja's beginner playlists",
-        link: 'https://www.youtube.com/c/TheNetNinja',
-      },
-      {
-        title: 'W3Schools CSS',
-        link: 'https://www.w3schools.com/w3css/',
-      },
-      {
-        title: 'MDN Resources',
-        link: 'https://developer.mozilla.org/en-US/',
-      },
-    ],
-    workshopPictures: ['/assets/design-workshop.jpg', '/assets/quiz/figma-collage.png'],
+    blurbRecommend: 'Check out #🎨design-resources in our Discord server for more resources.',
+    workshopPictures: ['/assets/design-workshop.jpg'],
   },
   [TeamMatch.ALGO]: {
     blurb:
       "acmAlgo focuses on data structures, algorithms, and technical interview prep. School doesn't give us everything we need and Algo is here to fill in the holes!",
-    blurbRecommend:
-      'Attending our events is half the battle, practice is what takes it to the next level. We recommend practicing on LeetCode and getting a good grip on the famous "The Grind 75" questions.',
-    recommendations: [],
+    blurbRecommend: 'Check out #📑algo-resources in our Discord server for more resources.',
     workshopPictures: ['/assets/algo-workshop.jpg'],
   },
   [TeamMatch.OSS]: {
     blurb:
-      "Our Open Source Software team is all about contributing to open source projects. We're here to help you get started with your first PR and to guide you through the process of contributing to a project.",
+      "acmOSS team is all about contributing to open source projects. We're here to help you get started with your first PR and to guide you through the process of contributing to a project.",
     blurbRecommend:
-      'Get involved in our weekly meetings and start contributing to our projects. Below are some resources to help you get started with open source.',
-    recommendations: [],
-    workshopPictures: [],
+      'Check out #💖announcements under Open Source Software Team in our Discord server for more resources.',
+    workshopPictures: ['/assets/oss-workshop.jpg'],
   },
   [TeamMatch.GAMEDEV]: {
     blurb:
       "acmGameDev is all about creating games and learning about the game development process. We're here to help you get started with game development and to guide you through the process of creating your first game.",
-    blurbRecommend:
-      'Get involved in our weekly meetings and start creating your own games. Below are some resources to help you get started with game development.',
-    recommendations: [],
-    workshopPictures: [],
+    blurbRecommend: 'Check out #🖇gamedev-resources in our Discord server for more resources.',
+    workshopPictures: ['/assets/gamedev-workshop.jpg'],
   },
   [TeamMatch.ICPC]: {
     blurb:
-      'The International Collegiate Programming Contest (ICPC) team is all about competitive programming. We compete in regional and international contests and help our members improve their problem-solving skills.',
-    blurbRecommend:
-      'Get involved in our weekly meetings and start practicing for competitive programming contests. Below are some resources to help you get started with competitive programming.',
-    recommendations: [],
-    workshopPictures: [],
+      'acmICPC (The International Collegiate Programming Contest) team is all about competitive programming. We compete in regional and international contests and help our members improve their problem-solving skills.',
+    blurbRecommend: 'Check out #💪icpc-resources in our Discord server for more resources.',
+    workshopPictures: ['/assets/icpc-workshop.jpg'],
   },
 };

src/routes/(site)/design-gallery/+page.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import Block from '$lib/components/block/block.svelte';
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+  import { ENTRIES } from '$lib/public/design-gallery/data';
+</script>
+
+<svelte:head>
+  <title>Design Gallery | ACM at CSUF</title>
+</svelte:head>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+<Block>
+  <h1 slot="headline" class="size-xl acm-heavier">Design Gallery | Summer 2024</h1>
+
+  <p slot="text" class="size-md">
+    The Summer Design Challenge, hosted by our Design Team, allows for fellow members to practice
+    and show off their design skills using Figma while enjoying their summer vacation. Here are ten
+    professional designs. You can check out more designs in our Discord server in the #🎨design-chat
+    channel.
+  </p>
+</Block>
+
+<ul>
+  {#each ENTRIES as { day, imageSrc, discordUsername, prompt }}
+    <li>
+      <img src={imageSrc} alt="Design by @{discordUsername} day {day}" />
+      <h2>Day {day} by <span class="acm-pink">@{discordUsername}</span></h2>
+      <p class="size-md">Prompt: {prompt}</p>
+    </li>
+  {/each}
+</ul>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<style>
+  ul {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ul > li {
+    margin: 15px;
+    text-align: center;
+    width: min(600px, 80vw);
+  }
+
+  img {
+    width: 100%;
+    height: 40vh;
+    object-fit: contain;
+  }
+
+  @media (max-width: 768px) {
+    li * {
+      font-size: 18px; /* Smaller font size for mobile */
+    }
+    img {
+      height: 100%;
+    }
+  }
+
+  img:hover {
+    opacity: 0.5;
+  }
+
+  h1 {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  h2 {
+    text-align: center;
+    margin-bottom: 0.5rem;
+  }
+
+  p {
+    text-align: center;
+    margin-bottom: 2rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+</style>

src/routes/(site)/quiz/more-info.svelte

@@ -20,43 +20,17 @@
   {:else}
     <h1>{team.title} <span>Team</span></h1>
     <p>{report.blurb}</p>
-    {#if team.title === 'AI'}
-      <div>
-        <h2 class="large-screen-display">Stay Tuned for Events</h2>
-        <h2 class="mobile-screen-display">Coming Soon</h2>
-        <img src={team.logoSrc} alt="img" />
-      </div>
-    {:else}
-      <h2 class="large-screen-display">Previous Projects and Workshops</h2>
-      <h2 class="mobile-screen-display">Previous Events</h2>
-      <div class="image-layout">
-        {#each report.workshopPictures as picture (picture)}
-          <img src={picture} alt={picture} class="team-pictures" />
-        {/each}
-      </div>
-    {/if}
+    <div class="image-layout">
+      {#each report.workshopPictures as picture (picture)}
+        <img src={picture} alt={picture} class="team-pictures" />
+      {/each}
+    </div>
     <h2>Get Started Now</h2>
     <h4>{report.blurbRecommend}</h4>
-    <ul>
-      {#each report.recommendations as recommendation (recommendation)}
-        <li>
-          <a href={recommendation.link} target="_blank" rel="noopener noreferrer"
-            >{recommendation.title}</a
-          >
-        </li>
-      {/each}
-    </ul>
   {/if}
 </section>
 
 <style lang="scss">
-  .large-screen-display {
-    display: block;
-  }
-  .mobile-screen-display {
-    display: none;
-  }
-
   .container {
     --quiz-bg: rgba(102, 102, 102, 0.274);
     width: 450px;
@@ -70,7 +44,7 @@
   }
 
   h1 {
-    font-size: 64px;
+    font-size: 50px;
     color: var(--team-color);
   }
 
@@ -128,23 +102,7 @@
     border: var(--team-color) 3px solid;
   }
 
-  ul {
-    list-style: none;
-    font-style: italic;
-    font-weight: 600;
-  }
-
-  a {
-    color: var(--team-color);
-  }
-
   @media screen and (max-width: 740px) {
-    .large-screen-display {
-      display: none;
-    }
-    .mobile-screen-display {
-      display: block;
-    }
     .container {
       width: 325px;
     }

src/routes/(site)/sitemap/data.ts

@@ -66,6 +66,11 @@ const siteMap: SiteMap = {
       title: 'Genuary',
       link: 'genuary',
     },
+    {
+      id: 'designgallery',
+      title: 'Design Gallery',
+      link: 'design-gallery',
+    },
   ],
   'Productivity pages': [
     {