unique page metadata

public/index.html

@@ -9,6 +9,8 @@
       name="Simonson - Portfolio"
       content="Digital portfolio of Andrew Simonson"
     />
+    <!-- <meta property="og:title" content="__OG_TITLE__" />
+    <meta property="og:description" content="__OG_DESCRIPTION__" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/pages/AboutMe.js

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 // import MyCarousel from "../componets/Carousel.js";
 import ChessBed from "../componets/ChessBed.js";
 // import HexGrid from "../componets/HexGrid";
 import Skills from "../componets/Skills";
-import Timeline from '../componets/Timeline';
+import Timeline from "../componets/Timeline";
 import TimeItem from "../componets/TimeItem.js";
 import { toggle } from "../scripts/checkbox";
 // import img1 from '../assets/photos/itsa_me.JPG'
@@ -15,8 +15,17 @@ import { toggle } from "../scripts/checkbox";
 // import img7 from "../assets/photos/WeThePeople_NationalsSetup.jpg";
 
 export default function AboutMe() {
+  useEffect(() => {
+    // This will run when the page first loads and whenever the title changes
+    document.title = "Andrew Simonson - About Me";
+  }, []);
+
   return (
-    <div className="foreground" onLoad={() => toggle('up')}>
+    <div className="foreground" onLoad={() => toggle("up")}>
+      <meta
+        name="description"
+        content="About Andrew Simonson - learn all about me and the stuff I do, it's real great."
+      />
       <div className="col">
         <div id="aboutMe" data-aos="fade-up">
           <h2 className="concentratedHead">About Me</h2>
@@ -135,44 +144,119 @@ export default function AboutMe() {
         </div> */}
       </div>
       <div className="col">
-      <div className="checkbox-wrapper">
+        <div className="checkbox-wrapper">
-        <div className="flex start">
+          <div className="flex start">
-        <label className="switch" htmlFor="pinned">
+            <label className="switch" htmlFor="pinned">
-          <input type="checkbox" id="pinned" onClick={() => toggle('up')} defaultChecked/>
+              <input
-          <div className="slider round"></div>
+                type="checkbox"
-          <strong>Pinned</strong>
+                id="pinned"
-        </label>
+                onClick={() => toggle("up")}
+                defaultChecked
+              />
+              <div className="slider round"></div>
+              <strong>Pinned</strong>
+            </label>
+          </div>
+          <div className="flex start">
+            <label className="switch" htmlFor="education">
+              <input
+                type="checkbox"
+                id="education"
+                onClick={() => toggle("up")}
+              />
+              <div className="slider round"></div>
+              <strong>Education</strong>
+            </label>
+          </div>
+          <div className="flex start">
+            <label
+              className="switch"
+              htmlFor="experience"
+              onClick={() => toggle("up")}
+            >
+              <input type="checkbox" id="experience" />
+              <div className="slider round"></div>
+              <strong>Work Experience</strong>
+            </label>
+          </div>
+          <div className="flex start">
+            <label
+              className="switch"
+              htmlFor="technical"
+              onClick={() => toggle("up")}
+            >
+              <input type="checkbox" id="technical" />
+              <div className="slider round"></div>
+              <strong>Technical</strong>
+            </label>
+          </div>
         </div>
-        <div className="flex start">
-        <label className="switch" htmlFor="education">
-          <input type="checkbox" id="education" onClick={() => toggle('up')} />
-          <div className="slider round"></div>
-          <strong>Education</strong>
-        </label>
-        </div>
-        <div className="flex start">
-        <label className="switch" htmlFor="experience" onClick={() => toggle('up')}>
-          <input type="checkbox" id="experience" />
-          <div className="slider round"></div>
-          <strong>Work Experience</strong>
-        </label>
-        </div>
-        <div className="flex start">
-        <label className="switch" htmlFor="technical" onClick={() => toggle('up')}>
-          <input type="checkbox" id="technical" />
-          <div className="slider round"></div>
-          <strong>Technical</strong>
-        </label>
-        </div>
-      </div>
         <Timeline classes="checkbox-client">
-          <TimeItem date='01/2023 - 05/2023' title="Co-op @ Dow Chemical" classes="pinned experience technical">Spring 2023 Semester Co-op under Dow Chemical's Global Reactive Chemicals team in Analytical Sciences.  Responsibilities included management of chemical compatability data and tool creation for parsing, generating, and submitting reports.</TimeItem>
+          <TimeItem
-          <TimeItem date='08/26/2021' title='Started Portfolio'>I started building this website on this day.  I wish I could say I was farther along than I am.</TimeItem>
+            date="01/2023 - 05/2023"
-          <TimeItem date='08/2021 - 05/2025' title='Rochester Institute of Technology' classes="pinned education technical">Studying in Rochester Institute of Technology's Computer Science BS program with a minor in International Relations.</TimeItem>
+            title="Co-op @ Dow Chemical"
-          <TimeItem date='04/2021 - 08/2021' title="Pretzel & Pizza Creations" classes="experience">Worked part-time as a chef, managing active ingredient supply and fulfilling orders.  I personally recommend the stuffed pretzels.</TimeItem>
+            classes="pinned experience technical"
-          <TimeItem date='08/2020 - 12/2020' title="Election Official" classes='experience'>Trained in voter registry operations and provisional voting by the Washington County Board of Elections for the 2020 US Presidential Election.</TimeItem>
+          >
-          <TimeItem date='09/2016 - 06/2021' title='Boonsboro High School' classes='education'>Graduated high school with highest honors.<br />Member of National Honor Society, Academic Team County Champions.  Participated in Physics Olympics, Robotics Club, and scored at state championships in <a href='https://www.athletic.net/athlete/10265585/track-and-field/high-school'>Cross Country and Track and Field (4x800, 800)</a>. </TimeItem>
+            Spring 2023 Semester Co-op under Dow Chemical's Global Reactive
-          <TimeItem date='10/2015 - 04/2021' title="Vex Robotics Team Lead/Club President" classes='technical'>Led 5 teams through middle and high school to VEX Robotics Competitions, elevating Boonsboro from county group-stage elimination to its first state championship participation.  Reorganized club and set up its first interface with the community + sponsors</TimeItem>
+            Chemicals team in Analytical Sciences. Responsibilities included
+            management of chemical compatability data and tool creation for
+            parsing, generating, and submitting reports.
+          </TimeItem>
+          <TimeItem date="08/26/2021" title="Started Portfolio">
+            I started building this website on this day. I wish I could say I
+            was farther along than I am.
+          </TimeItem>
+          <TimeItem
+            date="08/2021 - 05/2025"
+            title="Rochester Institute of Technology"
+            classes="pinned education technical"
+          >
+            Studying in Rochester Institute of Technology's Computer Science BS
+            program with a minor in International Relations.
+          </TimeItem>
+          <TimeItem
+            date="04/2021 - 08/2021"
+            title="Pretzel & Pizza Creations"
+            classes="experience"
+          >
+            Worked part-time as a chef, managing active ingredient supply and
+            fulfilling orders. I personally recommend the stuffed pretzels.
+          </TimeItem>
+          <TimeItem
+            date="08/2020 - 12/2020"
+            title="Election Official"
+            classes="experience"
+          >
+            Trained in voter registry operations and provisional voting by the
+            Washington County Board of Elections for the 2020 US Presidential
+            Election.
+          </TimeItem>
+          <TimeItem
+            date="09/2016 - 06/2021"
+            title="Boonsboro High School"
+            classes="education"
+          >
+            Graduated high school with highest honors.
+            <br />
+            Member of National Honor Society, Academic Team County Champions.
+            Participated in Physics Olympics, Robotics Club, and scored at state
+            championships in{" "}
+            <a href="https://www.athletic.net/athlete/10265585/track-and-field/high-school">
+              Cross Country and Track and Field (4x800, 800)
+            </a>
+            .{" "}
+          </TimeItem>
+          <TimeItem
+            date="10/2015 - 04/2021"
+            title="Vex Robotics Team Lead/Club President"
+            classes="technical"
+          >
+            Led 5 teams through middle and high school to VEX Robotics
+            Competitions, elevating Boonsboro from county group-stage
+            elimination to its first state championship participation.
+            Reorganized club and set up its first interface with the community +
+            sponsors
+          </TimeItem>
         </Timeline>
       </div>
     </div>

src/pages/Home.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ChessBed from "../componets/ChessBed.js";
 
 export default function Home() {
@@ -6,11 +6,21 @@ export default function Home() {
     width: "350px",
     height: "165px",
     border: "none",
-    display: "block"
+    display: "block",
   };
 
+  useEffect(() => {
+    // This will run when the page first loads and whenever the title changes
+    document.title = "Andrew Simonson - Portfolio Home";
+  }, []);
+
   return (
     <div id="home">
+      <meta
+        name="description"
+        content="Andrew Simonson's Portfolio Website - Homepage"
+      />
+
       <div className="homeground">
         <div className="relative">
           <div className="flex">

src/pages/Projects.js

@@ -1,3 +1,4 @@
+import React, { useEffect } from "react";
 import ProjectList from "../componets/ProjectList";
 import Project from "../componets/Project";
 import { toggle } from "../scripts/checkbox";
@@ -14,8 +15,17 @@ import yugoslavia from "../assets/photos/ceoOfYugo.png";
 import vexbutt from "../assets/photos/vexcodeButtons.jpeg";
 
 export default function Projects() {
+  useEffect(() => {
+    // This will run when the page first loads and whenever the title changes
+    document.title = "Andrew Simonson - Projects";
+  }, []);
+
   return (
     <div className="foreground" onLoad={() => toggle('')}>
+      <meta
+        name="description"
+        content="Recent projects by Andrew Simonson on his lovely portfolio website :)"
+      />
       <div data-aos="fade-up">
         <h2 className="concentratedHead">Projects</h2>
         <p>