Add taxonomy system

src/components/core/CircleIcon/CircleIcon.style.scss

@@ -8,7 +8,6 @@
 
 .size-normal {
   width: 2rem;
-  height: 2rem;
   padding: 0.8rem;
   font-size: 1.6rem;
 }

src/components/core/Navbar/Navbar.astro

@@ -0,0 +1,21 @@
+---
+import { PageLogo } from "../PageLogo";
+import "./Navbar.style.scss";
+---
+
+<div class="navbar">
+  <a href="/">
+    <PageLogo text="Resources" />
+  </a>
+  <div class="navbar__items">
+    <!-- <div>About</div> -->
+    <!-- <div>
+      <a href="/topics">Topics</a>
+    </div> -->
+    <div>
+      <a href="https://github.com/CarletonComputerScienceSociety/resources"
+        >Contribute</a
+      >
+    </div>
+  </div>
+</div>

src/components/core/Navbar/Navbar.style.scss

@@ -0,0 +1,18 @@
+.navbar {
+  max-width: 75rem;
+  padding-left: calc(5% + 9px);
+  padding-right: calc(5% + 9px);
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+
+  a {
+    color: black;
+    text-decoration: none;
+  }
+
+  &__items {
+    display: flex;
+    gap: 3rem;
+  }
+}

src/components/core/Navbar/index.ts

@@ -0,0 +1 @@
+export { default as Navbar } from "./Navbar.astro";

src/components/core/ResourceCard/ResourceCard.astro

@@ -0,0 +1,17 @@
+---
+import { CircleIcon } from "../CircleIcon";
+import "./ResourceCard.style.scss";
+
+const { title, description, icon, colorSet } = Astro.props;
+---
+
+<div class="resource-card">
+  <div class="resource-card__content">
+    <div class="resource-card__heading">
+      <CircleIcon icon={icon} colorSet={colorSet} size="size-normal" />
+      <h3 class="resource-card__title">{title}</h3>
+    </div>
+
+    <p class="resource-card__description">{description}</p>
+  </div>
+</div>

src/components/core/ResourceCard/ResourceCard.style.scss

@@ -0,0 +1,38 @@
+.resource-card {
+  background-color: white;
+  margin-bottom: 1rem;
+  width: 20rem;
+
+  @media (max-width: 525px) {
+    width: 100%;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__heading {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: left;
+    margin-bottom: 1rem;
+  }
+
+  &__title {
+    margin: auto 0;
+    font-size: 1.4rem;
+    font-weight: bold;
+  }
+
+  &__description {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #a9a9a9;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}

src/components/core/ResourceCard/index.ts

@@ -0,0 +1 @@
+export { default as ResourceCard } from "./ResourceCard.astro";

src/components/core/index.ts

@@ -1,4 +1,6 @@
 export { CircleIcon } from "./CircleIcon";
 export { Footer } from "./Footer";
+export { Navbar } from "./Navbar";
 export { PageLogo } from "./PageLogo";
+export { ResourceCard } from "./ResourceCard";
 export { TopicCard } from "./TopicCard";

src/components/resources/Header/Header.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from "astro:content";
+import { Orbit } from "./Orbit";
 import { Search } from "./Search";
 import "./Header.style.scss";
 const resourcePages = await getCollection("resources");
@@ -21,14 +22,16 @@ const resourcePages = await getCollection("resources");
       </div>
     </div>
     <div class="header__right">
-      <div class="header__animation">
+      <Orbit />
+      <!-- <div class="header__animation">
         <lottie-player
           src="/lottie/puzzle.json"
           background="transparent"
           speed="1"
           loop
           autoplay></lottie-player>
-      </div>
+        
+      </div> -->
       <!-- <div class="header__students">
         <div class="header__students__container__left">
           <div class="header__students__circle circle-one"></div>

src/components/resources/Header/Header.style.scss

@@ -88,6 +88,7 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    width: 34rem;
     height: 100%;
 
     @media (max-width: 1100px) {

src/components/resources/Header/Orbit/Orbit.astro

@@ -0,0 +1,39 @@
+---
+import { Icon } from "astro-icon";
+import "./Orbit.style.scss";
+---
+
+<div class="orbit">
+  <ul class="orbit-wrap">
+    <li class="orbit-center"></li>
+
+    <li>
+      <ul class="ring-0">
+        <li class="o-icon academics">
+          <i class="orbit-icon m-icon fa fa-graduation-cap"></i>
+        </li>
+        <li class="o-icon careers">
+          <i class="orbit-icon m-icon fa fa-briefcase"></i>
+        </li>
+        <li class="o-icon student-life">
+          <i class="orbit-icon m-icon fa fa-home"></i>
+        </li>
+        <li class="o-icon courses">
+          <i class="orbit-icon m-icon fa fa-book"></i>
+        </li>
+      </ul>
+    </li>
+
+    <li>
+      <ul class="ring-1">
+        <li class="o-icon self-learning">
+          <i class="orbit-icon m-icon fa fa-seedling"></i>
+        </li>
+        <li class="o-icon faqs">
+          <i class="orbit-icon m-icon fa fa-lightbulb"></i>
+        </li>
+        <li class="o-icon tbd"><i class="orbit-icon m-icon fa fa-code"></i></li>
+      </ul>
+    </li>
+  </ul>
+</div>

src/components/resources/Header/Orbit/Orbit.style.scss

@@ -0,0 +1,196 @@
+$orbitItemSize: 1.35em;
+$map: (
+  ring-0: 4,
+  ring-1: 3,
+  ring-2: 6,
+  ring-3: 8,
+);
+$lastRing: 2;
+
+.orbit {
+  width: 33vw;
+  display: flex;
+  margin-right: 2vw;
+  justify-content: center;
+  align-items: center;
+}
+
+.orbit-icon {
+  width: $orbitItemSize !important;
+  height: $orbitItemSize !important;
+}
+
+.orbit-wrap {
+  list-style: none;
+  font-size: 1.3em;
+
+  > li {
+    position: absolute;
+    transform: translate(-50%, -50%);
+  }
+}
+
+ul[class^="ring"] {
+  @extend %ring;
+  transition: all 300ms ease-in-out;
+  li {
+    @extend %orbiting-object;
+    transition: all 300ms ease-in-out;
+  }
+}
+
+@mixin orbit-item($numItems, $numRing) {
+  @for $s from 1 through $numItems {
+    // Spread items over the ring
+    $deg: 380deg / $numItems;
+
+    .ring-#{$numRing} > *:nth-of-type(#{$s}) {
+      //PUTS ITEMS ON RINGS
+      transform: rotate($s * $deg)
+        translate(9.5em - ($numRing * 2.5))
+        rotate(-$s * $deg);
+    }
+  }
+}
+
+// Render rings
+@for $i from 0 through $lastRing {
+  .ring-#{$i} {
+    // decrease each ring in size
+    width: 19em - ($i * 5);
+    height: 19em - ($i * 5);
+    animation: clockwiseRotate 35s - ($i * 5) linear infinite;
+
+    i {
+      animation: counterClockwiseRotate 35s - ($i * 5) linear infinite;
+    }
+
+    .m-icon {
+      animation: counterClockwiseRotate 35s - ($i * 5) linear infinite;
+    }
+  }
+
+  @include orbit-item(map-get($map, ring-#{$i}), $i);
+}
+
+%ring {
+  border: solid 1px #000000;
+  position: relative;
+  padding: 0;
+  border-radius: 50%;
+  list-style: none;
+  box-sizing: content-box;
+}
+
+%orbiting-object {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $orbitItemSize;
+  height: $orbitItemSize;
+  margin: -$orbitItemSize / 2;
+}
+
+/*
+  center;
+*/
+.orbit-center {
+  z-index: 5;
+  font-size: 2em;
+  width: 5.1em;
+  height: 5.1em;
+  line-height: 1.8em;
+  text-align: center;
+  background: white;
+  border-radius: 50%;
+  border: 1px solid #000000 !important;
+  background-image: url(/images/computer.png);
+  background-size: contain;
+  background-size: cover;
+  z-index: 0;
+
+  &:hover .orbit-center__icon {
+    transform: rotateZ(0deg);
+  }
+}
+.orbit-center__icon {
+  transform: rotateZ(-360deg);
+  transition: all 500ms ease-in-out;
+}
+
+/* 
+animations 
+*/
+@keyframes clockwiseRotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes counterClockwiseRotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .orbit-wrap {
+    font-size: 1em;
+  }
+
+  .orbit {
+    margin-right: 8vw;
+  }
+}
+
+.student-life {
+  background-color: #ffdddd;
+  color: rgb(255, 72, 72);
+}
+
+.faqs {
+  background-color: #fffddd;
+  color: #fdc11a;
+}
+
+.careers {
+  background-color: #ddf8ff;
+  color: #42c4fc;
+}
+
+.academics {
+  background-color: #ddfff4;
+  color: #00c29f;
+}
+
+.tbd {
+  background-color: #dddddd;
+  color: #4b4b4b;
+}
+
+.self-learning {
+  background-color: #ffddcc;
+  color: #ff8c00;
+}
+
+.courses {
+  background-color: #f5ddff;
+  color: #a64dff;
+}
+
+.o-icon {
+  // width: 3.0rem;
+  // height: 3.0rem;
+  padding: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}

src/components/resources/Header/Orbit/index.ts

@@ -0,0 +1 @@
+export { default as Orbit } from "./Orbit.astro";

src/content/resources/articles/computer-science-related-breath-electives.md

@@ -4,6 +4,7 @@ title: Computer Science Related Breadth Electives
 date: 2023-09-02T00:00:00.000Z
 draft: false
 slug: articles/computer-science-related-breadth-electives
+topic: courses
 ---
 
 The following page is a list of breadth elective suggestions for computer science students as well as the rational for how they are related.