feat: coursework page

2 files changed, 188 insertions, 0 deletions

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 211db58..fcb8023 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -2,6 +2,7 @@
   <nav>
     <ul>
       <li><a href="/">Home</a></li>
+      <li><a href="/coursework">Coursework</a></li>
       <li><a href="/projects">Projects</a></li>
       <li><a href="/about">About</a></li>
     </ul>
diff --git a/src/pages/coursework.astro b/src/pages/coursework.astro
new file mode 100644
index 0000000..60e44af
--- /dev/null
+++ b/src/pages/coursework.astro
@@ -0,0 +1,187 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+// Replace the arrays below with your actual coursework data
+const icsCourses = [
+  {
+    title: "I&C SCI 31 -  Introduction to Programming",
+    description:
+      "Introduction to fundamental concepts and techniques for writing software in a high-level programming language. Covers the syntax and semantics of data types, expressions, exceptions, control structures, input/output, methods, classes, and pragmatics of programming.",
+  },
+  {
+    title: "I&C SCI 32 -  Programming with Software Libraries",
+    description:
+      "Construction of programs for problems and computing environments more varied than in I&C SCI 31. Using library modules for applications such as graphics, sound, GUI, database, Web, and network programming. Language features beyond those in I&C SCI 31 are introduced as needed.",
+  },
+  {
+    title: "I&C SCI 33 -  Programming with Software Libraries",
+    description:
+      "Intermediate-level language features and programming concepts for larger, more complex, higher-quality software. Functional programming, name spaces, modules, class protocols, inheritance, iterators, generators, operator overloading, reflection. Analysis of time and space efficiency.",
+  },
+  {
+    title: "I&C SCI 6B - Boolean Logic and Discrete Structures.",
+    description:
+      "Relations and their properties; Boolean algebras, formal languages; finite automata.",
+  },
+];
+
+const in4mtxCourses = [
+  {
+    title: "IN4MATX 43 - Introduction to Software Engineering.",
+    description:
+      "Concepts, methods, and current practice of software engineering. Large-scale software production, software life cycle models, principles and techniques for each stage of development.",
+  },
+];
+---
+
+<Layout title="Pinapelz">
+  <h1>Relevant Coursework</h1>
+  <div class="coursework-container">
+    <div class="course-segment">
+      <h2 class="text-gradient">ICS Courses</h2>
+      <ul>
+        {
+          icsCourses.map((course) => (
+            <li class="course">
+              <h3>{course.title}</h3>
+              <p class="course-description">{course.description}</p>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+
+    <!-- IN4MTX Courses -->
+    <div class="course-segment">
+      <h2 class="text-gradient">IN4MTX Courses</h2>
+      <ul>
+        {
+          in4mtxCourses.map((course) => (
+            <li class="course">
+              <h3>{course.title}</h3>
+              <p class="course-description">{course.description}</p>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+
+  </div>
+</Layout>
+<style>
+  @import url("https://fonts.googleapis.com/css?family=Noto:400,700");
+
+  * {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  body {
+    font-family: "Noto", sans-serif;
+    height: 100%;
+  }
+  main {
+    margin: auto;
+    padding: 1rem;
+    width: 800px;
+    max-width: calc(100% - 2rem);
+    color: white;
+    font-size: 20px;
+    line-height: 1.6;
+  }
+  .astro-a {
+    position: absolute;
+    top: -32px;
+    left: 50%;
+    transform: translatex(-50%);
+    width: 220px;
+    height: auto;
+    z-index: -1;
+  }
+  h1 {
+    font-size: 3.5rem;
+    font-weight: 700;
+    color: white;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  h1:hover {
+    transform: scale(1.1);
+  }
+  .welcome-text-gradient {
+    background-image: var(--accent-gradient-purp);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+    transition: background-position 0.3s ease-in-out;
+  }
+  .text-gradient {
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+    transition: background-position 0.3s ease-in-out;
+  }
+  .slide-out {
+    transform: translateX(-100%);
+    transition: transform 0.5s ease-in-out;
+  }
+
+  .center-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 90vh;
+  }
+
+  .coursework-container {
+    padding: 2rem;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    margin: 2rem auto;
+    max-width: 80%;
+  }
+
+  h2.text-gradient {
+    text-align: center;
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+  }
+
+  ul {
+    list-style-type: none;
+  }
+
+  .course {
+    padding: 0.5rem 0;
+  }
+
+  .course:last-child {
+    border-bottom: none;
+  }
+
+  .course-description {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.8);
+    margin-left: 1rem;
+  }
+
+  .course-segment {
+    margin-bottom: 2rem;
+  }
+
+  .course-segment:last-child {
+    margin-bottom: 0;
+  }
+  h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: white;
+  }
+</style>