Added Security Resources

src/components/Resources/container/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { CompProResources, OsuEecsResources, WebDevResources } from "../render";
+import { CompProResources, OsuEecsResources, WebDevResources, SecResources} from "../render";
 import type { ResourceMap } from "../types.ts";
 
 export default function ResourcesContainer({ resources }: { resources: ResourceMap }) {
@@ -24,6 +24,10 @@ export default function ResourcesContainer({ resources }: { resources: ResourceM
  resources={resources.webDev}
  handleCardClick={handleCardClick}
  />
+ <SecResources
+ resources={resources.cyberSec}
+ handleCardClick={handleCardClick}
+ />
  </div>
  );
 }

src/components/Resources/data.ts

@@ -1,4 +1,4 @@
-import type { CompetitiveProgrammingResource, OsuResource, WebDevelopmentResource } from "../../types";
+import type { CompetitiveProgrammingResource, OsuResource, WebDevelopmentResource,SecurityResource } from "../../types";
 
 const compProResources: CompetitiveProgrammingResource[] = [
  {
@@ -158,10 +158,50 @@ const eecsOsuResources: OsuResource[] = [
  }
 ];
 
+const SecurityResources: SecurityResource[] = [
+ {
+ title: "OSUSEC website",
+ text: "OSU's security club website",
+ link: "https://osusec.org/"
+ },
+ {
+ title: "OSUSEC CTF League",
+ text: "Weekly beginner friendly CTF challenges hosted by OSUSEC",
+ link: "https://osusec.org/ctf-league/"
+ },
+ {
+ title: "PicoCTF", 
+ text: "CTF challenges hosted by Carngie Mellon University", 
+ link: "https://picoctf.org/"
+ },
+ {
+ title: "Pwn College", 
+ text: "Free online education platform hosted by ASU to practice and learn Cyber Security", 
+ link:"https://pwn.college/", 
+ },
+ {
+ title:"OhShINT Gitbook", 
+ text: "Free online Gitbook all about OSINT (Open Source Intelligence)",
+ link: "https://ohshint.gitbook.io/oh-shint-its-a-blog/osint/osint-wtf" 
+ },
+ {
+ title: "Intro to Binary Exploitation (“Nightmare”)", 
+ text: "Free online course introducing concepts such as reverse engineering, heap exploitation, and much more", 
+ link: "https://guyinatuxedo.github.io/" 
+ }, 
+ {
+ title: "Cryptohack", 
+ text: "Free online platform for learning cryptography with various challenges",
+ link: "https://cryptohack.org/"
+ }
+
+] 
+
 const resourceMap = {
  compPro: compProResources,
  webDev: webDevResources,
  eecsOsu: eecsOsuResources,
+ cyberSec: SecurityResources,
 };
 
 export default resourceMap;

src/components/Resources/render/index.tsx

@@ -5,6 +5,7 @@ import {
  type CompetitiveProgrammingResource,
  type OsuResource,
  type WebDevelopmentResource,
+ type SecurityResource,
 } from "../../../types";
 import type { ResourcesProps } from "../types.ts";
 
@@ -222,4 +223,73 @@ export const WebDevResources = ({
  )}
  </div>
  );
+
 };
+export const SecResources = ({
+ resources,
+ handleCardClick,
+}: ResourcesProps<SecurityResource[]>) => {
+ const [parent] = useAutoAnimate();
+ const [selectedTag, setSelectedTag] = useState<string | null>(null);
+ const handleTagClick = (tag: string | null) => {
+ setSelectedTag(tag);
+ };
+ const allTags = Array.from(
+ new Set(resources.flatMap((resource) => resource.tags || []))
+ );
+ const [displayLimit, setDisplayLimit] = useState(3);
+ return (
+ <div className="resources__inner">
+ <h1 className="resources__title">Cyber Security</h1>
+ <span className="resources__subtitle">
+ Enchance your cyber <b>security</b> skills.
+ </span>
+ <div className="divider"></div>
+ {/* No tags for the SEC Resources. */}
+ <div className="resources__grid" ref={parent}>
+ {resources
+ .filter(
+ (resource) =>
+ selectedTag === null ||
+ (resource.tags && resource.tags.includes(selectedTag))
+ )
+ .slice(0, displayLimit)
+ .map((resource: SecurityResource, index) => (
+ <div
+ className="resources__card"
+ key={index}
+ onClick={() => handleCardClick(resource.link)}
+ >
+ <div className="resources__card__inner">
+ <div className="resources__card__text">
+ <h2 className="resource__card__text__title">
+ {resource.title}
+ </h2>
+ <p className="resource__card__text__description">
+ {resource.text}
+ </p>
+ {/* 
+ We can possibly add these tags back in the future.
+ <div className="resource__card__text__tags">
+ {resource?.tags?.map((tag, index) => (
+ <span className="resource__card__text__tag" key={index}>
+ {tag}
+ </span>
+ ))}
+ </div> */}
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ {resources.length > displayLimit && resources.length > 3 && (
+ <div
+ className="resources__button"
+ onClick={() => setDisplayLimit(displayLimit + 3)}
+ >
+ <button className="loadmore__button">Load More</button>
+ </div>
+ )}
+ </div>
+ );
+};

src/types.ts

@@ -17,6 +17,10 @@ export interface OsuResource extends Resource {
  type?: string;
 }
 
+export interface SecurityResource extends Resource {
+ type?: string; 
+}
+
 export interface Event {
  date: string;
  time: string;