Feature: About page (title, description, and image) (#12)

* About page draft

* Fix requested changes

* Fix lint error and add newline

* Change page classNames to match CSS classes

* Change CSS classNames to use camelCase

* Rename group_photo for about page and update alt text

---------

Co-authored-by: Brian-Magnuson <92892499+Brian-Magnuson@users.noreply.github.com>

next.config.js

@@ -1,6 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: "export",
+    images: {
+        // Next JS Image Optimization does not work on static site generation 
+        // See: https://nextjs.org/docs/pages/building-your-application/optimizing/images
+        unoptimized: true
+    }
 };
 
 module.exports = nextConfig;

src/app/about/About.module.css

@@ -0,0 +1,22 @@
+.about {
+    text-align: center;
+}
+
+/* CSS Modules recommends camelCase
+See: https://github.com/css-modules/css-modules#naming */
+.imageContainer {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+}
+
+.title {
+    margin-bottom: 5rem;
+    font-size: 3rem;
+}
+
+
+.description {
+    margin: 0 auto;
+    max-width: 1000px;
+}

src/app/about/page.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import styles from "./About.module.css";
+
+export default function About() {
+  return (
+    <main className={styles.about}>
+      <h1 className={styles.title}>About</h1>
+      <div className={styles.descriptionContainer}>
+        <p className={styles.description}>
+          We are an organization that helps students learn and apply software
+          engineering principles to real-world applications. We host weekly
+          workshops on topics like software design to help bridge the gap
+          between what students need to know for industry and what they&apos;re
+          taught in classes. These concepts help with building complex software
+          systems and better prepare members for team projects, internships, and
+          careers in software development.
+        </p>
+      </div>
+
+      <div className={styles.imageContainer}>
+        <Image
+          src="fall_2022_planning_meeting.jpg"
+          alt="SSD members (about 30) at our Fall 2022 planning meeting in CISE."
+          height={600}
+          width={600}
+        />
+      </div>
+    </main>
+  );
+}