implement checkbox filtering + timeline animations

2026-02-25 05:09:49 -06:00 · 2023-01-08 15:20:21 -06:00
parent 894a2e4053
commit c07ea50491
7 changed files with 108 additions and 29 deletions
--- a/src/assets/css/App.css
+++ b/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;
 }
--- a/src/assets/css/checkbox.css
+++ b/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;
-    height: 34px;
+    display: flex;
    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;
+}
--- a/src/componets/TimeItem.js
+++ b/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>;
  }
 }
--- a/src/componets/Timeline.js
+++ b/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>;
  }
--- a/src/pages/AboutMe.js
+++ b/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>
-          <TimeItem date='01/2023' title="Co-op @ Dow Chemical">Bottomtext</TimeItem>
-          <TimeItem date='08/2021' title='Started Computer Science BS at RIT'></TimeItem>
+      <div className="checkbox-wrapper">
+        <div className="flex start">
+        <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>
--- a/src/pages/Projects.js
+++ b/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
-        <label className="switch" htmlFor="geospacial" onClick={toggle}>
+        </div>
+        <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",
--- a/src/scripts/checkbox.js
+++ b/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;
      }
    }