implement checkbox filtering + timeline animations

src/assets/css/App.css

@@ -66,6 +66,10 @@ h3, h4 {
   color: #a8a8a8;
 }
 
+strong {
+  color: #ecebeb;
+}
+
 p, li {
   color: rgb(212, 212, 212);
   font-size: 1rem;
@@ -240,6 +244,10 @@ a {
   justify-content: space-between;
 }
 
+.start {
+  justify-content: left;
+}
+
 .onRight {
   position: absolute;
   right: 0;
@@ -430,6 +438,8 @@ a {
   height: 22rem;
   border: .3rem rgba(156, 49, 45, .8) solid;
   background-color: rgba(22, 22, 22, .8);
+  transition: .3s;
+  overflow: hidden;
 }
 
 .projTitle > * {
@@ -706,6 +716,13 @@ a {
   color: #db7e3b;
 }
 
+.timeitem {
+  transition: .4s;
+  overflow-y: clip;
+  height: auto;
+  max-height: 100px;
+}
+
 .timeline-item{
   border-left: solid #AAAAAA 3px;
 }

src/assets/css/checkbox.css

@@ -2,27 +2,38 @@
     display: none;
 }
 
-/* checkbox by Matt Smith */
+.hiddenup {
+    max-height: 0px !important;
+}
+
+.checkbox-wrapper > div {
+    margin-bottom: .5em;
+}
+
+.checkbox-wrapper > div:last-child {
+    margin-bottom: 0;;
+}
+
 .checkbox-wrapper .switch {
-    display: inline-block;
+    display: flex;
-    height: 34px;
     position: relative;
-    width: 60px;
+    cursor: pointer;
+}
+
+.checkbox-wrapper .switch > * {
+    align-self: center;
 }
 
 .checkbox-wrapper .switch input {
     display: none;
 }
 
+
 .checkbox-wrapper .slider {
     background-color: #ccc;
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
     transition: 0.4s;
+    height: 34px;
+    width: 60px;
 }
 
 .checkbox-wrapper .slider:before {
@@ -50,4 +61,8 @@
 
 .checkbox-wrapper .slider.round:before {
     border-radius: 50%;
-}
+}
+
+.checkbox-wrapper strong {
+    margin-left: .5em;
+}

src/componets/TimeItem.js

@@ -4,6 +4,7 @@ export default class TimeItem extends React.Component {
   constructor(props) {
     super(props);
     this.date = props.date;
+    this.classes = props.classes;
     this.item = (
       <>
         <h2>{props.title}</h2>
@@ -15,6 +16,6 @@ export default class TimeItem extends React.Component {
   }
 
   render() {
-    return <><p className="datetext">{this.date}</p><div className="timeline-item">{this.item}</div></>;
+    return <div className={"timeitem " + this.classes}><p className="datetext">{this.date}</p><div className="timeline-item">{this.item}</div></div>;
   }
 }

src/componets/Timeline.js

@@ -4,12 +4,13 @@ export default class Timeline extends React.Component {
   constructor(props) {
     super(props);
     this.items = props.children;
+    this.classes = props.classes;
   }
 
   componentDidMount() {}
 
   render() {
-    return <div className="timeline">
+    return <div className={"timeline " + this.classes}>
         {this.items}
     </div>;
   }

src/pages/AboutMe.js

@@ -5,6 +5,7 @@ import ChessBed from "../componets/ChessBed.js";
 import Skills from "../componets/Skills";
 import Timeline from '../componets/Timeline';
 import TimeItem from "../componets/TimeItem.js";
+import { toggle } from "../scripts/checkbox";
 // import img1 from '../assets/photos/itsa_me.JPG'
 // import img2 from '../assets/photos/me_robot.jpeg'
 // import img3 from "../assets/photos/AcademicTeam.jpg";
@@ -134,9 +135,32 @@ export default function AboutMe() {
         </div> */}
       </div>
       <div className="col">
-        <Timeline>
+      <div className="checkbox-wrapper">
-          <TimeItem date='01/2023' title="Co-op @ Dow Chemical">Bottomtext</TimeItem>
+        <div className="flex start">
-          <TimeItem date='08/2021' title='Started Computer Science BS at RIT'></TimeItem>
+        <label className="switch" htmlFor="pinned">
+          <input type="checkbox" id="pinned" 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>Experience</strong>
+        </label>
+        </div>
+      </div>
+        <Timeline classes="checkbox-client">
+          <TimeItem date='01/2023' title="Co-op @ Dow Chemical" classes="pinned experience">Bottomtext</TimeItem>
+          <TimeItem date='08/2021' title='Started Computer Science BS at RIT' classes="pinned education"></TimeItem>
         </Timeline>
       </div>
     </div>

src/pages/Projects.js

@@ -15,7 +15,7 @@ import vexbutt from "../assets/photos/vexcodeButtons.jpeg";
 
 export default function Projects() {
   return (
-    <div className="foreground">
+    <div className="foreground" onLoad={() => toggle('')}>
       <div data-aos="fade-up">
         <h2 className="concentratedHead">Projects</h2>
         <p>
@@ -29,28 +29,34 @@ export default function Projects() {
         </p>
       </div>
       <div className="checkbox-wrapper">
+        <div className="flex start">
         <label className="switch" htmlFor="pinned">
-          <input type="checkbox" id="pinned" onClick={toggle} />
+          <input type="checkbox" id="pinned" onClick={() => toggle('')} defaultChecked/>
           <div className="slider round"></div>
+          <strong>Pinned</strong>
         </label>
-        Pinned
+        </div>
+        <div className="flex start">
         <label className="switch" htmlFor="programming">
-          <input type="checkbox" id="programming" onClick={toggle} />
+          <input type="checkbox" id="programming" onClick={() => toggle('')} />
           <div className="slider round"></div>
+          <strong>Programming</strong>
         </label>
-        Programming
+        </div>
-        <label className="switch" htmlFor="geospacial" onClick={toggle}>
+        <div className="flex start">
+        <label className="switch" htmlFor="geospacial" onClick={() => toggle('')}>
           <input type="checkbox" id="geospacial" />
           <div className="slider round"></div>
+          <strong>Geospacial</strong>
         </label>
-        Geospacial
+        </div>
       </div>
       <ProjectList classes="checkbox-client">
         <Project
           status="complete"
           title="Lower 48 Alt. Energy Map"
-          classes="pinned geospacial"
           bgi={geovisF}
+          classes="pinned geospacial"
           links={[
             [
               "https://ritarcgis.maps.arcgis.com/apps/dashboards/17d5bda01edc4a2eb6205a4922d889c9",
@@ -73,12 +79,13 @@ export default function Projects() {
             ],
           ]}
         >
-          Collects RIT Gym Occupancy data for analysis, determining busiest
+          Collects RIT Gym Occupancy data, determining busiest workout
           times.
         </Project>
         <Project
           status="complete"
           title="Chesscom Embeds"
+          classes="programming"
           bgi={chessbed}
           links={[
             [
@@ -92,6 +99,7 @@ export default function Projects() {
         <Project
           status="complete"
           title="Resume"
+          classes="programming"
           bgi={resume}
           links={[
             [
@@ -110,6 +118,7 @@ export default function Projects() {
         <Project
           status="WIP"
           title="Digital Portfolio"
+          classes="programming"
           bgi={website}
           links={[
             [
@@ -141,6 +150,7 @@ export default function Projects() {
         <Project
           status="complete"
           title="Humans vs. Zombies Bot"
+          classes="programming"
           links={[
             [
               "https://github.com/asimonson1125/HvZ-bot",
@@ -166,7 +176,7 @@ export default function Projects() {
           to learning about financial management of equities using automated
           solutions developed by students.
         </Project>
-        <Project status="complete" title="Browser Trivia Bot">
+        <Project status="complete" classes="programming" title="Browser Trivia Bot">
           A tampermonkey tool used to automatically answer and submit online
           trivia forms, which can be tailored to different site layouts.
           <br />
@@ -176,6 +186,7 @@ export default function Projects() {
         <Project
           status="complete"
           title="Querist"
+          classes="programming"
           links={[
             [
               "https://github.com/asimonson1125/Querist",
@@ -189,6 +200,7 @@ export default function Projects() {
         <Project
           status="complete"
           title="Acumen"
+          classes="programming"
           links={[
             [
               "https://github.com/asimonson1125/Acumen",
@@ -202,6 +214,7 @@ export default function Projects() {
         <Project
           status="complete"
           title="NationsGame Rolls Sim"
+          classes="programming"
           bgi={yugoslavia}
           links={[
             [
@@ -219,6 +232,7 @@ export default function Projects() {
         <Project
           status="incomplete"
           title="WallCycle"
+          classes="programming"
           links={[
             [
               "https://github.com/asimonson1125/WallCycle",
@@ -231,6 +245,7 @@ export default function Projects() {
         <Project
           status="complete"
           title="VEXcode Button Engine"
+          classes="programming"
           bgi={vexbutt}
           links={[
             [
@@ -244,6 +259,7 @@ export default function Projects() {
         <Project
           status="complete"
           title="WinKeylogger"
+          classes="programming"
           links={[
             [
               "https://github.com/asimonson1125/WinKeylogger",

src/scripts/checkbox.js

@@ -1,4 +1,4 @@
-export function toggle() {
+export function toggle(dir) {
   let toggles = document.querySelectorAll(
     ".checkbox-wrapper input[type=checkbox]"
   );
@@ -8,12 +8,17 @@ export function toggle() {
       allow.push(x.id);
     }
   });
+  if (allow.length === 0) {
+    toggles.forEach(function (x) {
+      allow.push(x.id);
+    });
+  }
   let list = document.querySelectorAll(".checkbox-client > div");
   for (let i = 0; i < list.length; i++) {
-    list[i].classList.add("hidden");
+    list[i].classList.add("hidden" + dir);
     for (let x = 0; x < list[i].classList.length; x++) {
       if (allow.includes(list[i].classList[x])) {
-        list[i].classList.remove("hidden");
+        list[i].classList.remove("hidden" + dir);
         break;
       }
     }