basic functionality of navigating projects, with two projects highlighted on the main page.

public_html/projects/css/override.css

@@ -1,37 +0,0 @@
-.navbar {
-    border: none;
-}
-
-.bg-dark {
-    background-color: #4A245E;
-}
-
-.navbar-inverse .navbar-nav > li > a {
-    color: white;
-    transition: color 300ms;
-}
-
-.nav-item {
-    transition: background-color 300ms;
-}
-
-.nav-item:hover {
-    background-color: white;
-}
-
-.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
-    color: #4A245E;
-    background-color: transparent;
-}
-
-.navbar-inverse .navbar-nav > .active > a,
-    .navbar-inverse .navbar-nav > .active > a:hover,
-    .navbar-inverse .navbar-nav > .active > a:focus {
-
-    background-color: white;
-    color: #4A245E;
-}
-
-.card-text {
-    font-size: 2vw;
-}

public_html/projects/css/projects.css

@@ -1,62 +0,0 @@
-html {
-  font-size: 20px;
-  font-weight: 200;
-}
-
-.panels {
-  overflow: hidden;
-  float: right;
-
-  width: 40% !important;
-}
-
-.panel {
-  background: #6B0F9C;
-  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
-  color: white;
-  transition:
-    font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
-    flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
-    background 0.2s;
-  font-size: 20px;
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  flex-direction: column;
-}
-
-.panel > * {
-  margin: 0;
-  width: 100%;
-  transition: transform 250ms;
-  flex: 1 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.panel > *:nth-child(2) { transform: translateX(100%);}
-.panel.open-active > *:nth-child(2) { transform: translateX(0);}
-.panel > *:last-child { transform: translateX(100%); }
-.panel.open-active > *:last-child { transform: translateX(0); }
-
-.panel p {
-  font-family: Lato, sans-serif;
-  color: white;
-  font-size: 0.8em;
-}
-
-.panel p:nth-child(1) {
-  font-size: 1em;
-}
-
-.panel.open {
-  flex: 5;
-  font-size: 2em;
-}
-
-@media only screen and (max-width: 600px) {
-  .panel p {
-    font-size: 0.8em;
-  }
-}

public_html/projects/css/style.css

@@ -1,7 +1,42 @@
 /* GENERAL */
+:root {
+  --main-dark-color: #4A245E;
+  --main-offwhite-color: white;
+  --main-midtone-color: #9BC995;
+  --main-accent-color: #673283;
+  --secondary-accent-color: #98B9AB;
+}
+
 body {
     margin:0;
     height:100vh;
+    background:
+            linear-gradient(
+                    135deg,
+                    hsl(279deg 33% 47%) 0%,
+                    hsl(279deg 40% 33%) 39%,
+                    hsl(279deg 62% 19%) 61%,
+                    hsl(279deg 94% 7%) 100%
+            );
+    background-size:300% 100%,cover;
+    animation:change 4s linear infinite;
+    animation-direction: alternate;
+    background-attachment: fixed;
+}
+
+@keyframes change {
+    from {
+        background-position: right,center;
+    }
+}
+
+html {
+  font-size: 20px;
+  font-weight: 200;
+}
+
+body {
+  background-color: var(--main-dark-color);
 }
 
 /* TEXT */
@@ -20,7 +55,6 @@ h1 {
     font-size: 8vw;
 }
 
-
 h2 {
     font-size: 4vw;
 }
@@ -29,27 +63,39 @@ h3 {
     font-size: 3vw;
 }
 
-p {
+h4 {
     font-size: 2vw;
 }
 
+p {
+    font-size: 1vw;
+}
+
 .dark-text {
-    color: #4A245E;
+  color: var(--main-dark-color);
 }
 
 .light-text {
-    color: white;
+  color: var(--main-offwhite-color);
+}
+
+.label {
+  font-size: 2vw;
+}
+
+.label-text {
+  font-size: 1.5vw;
 }
 
 /* NAV-BAR */
 .bg-light {
-    background-color: white !important;
-    padding: 0;
+  background-color: var(--main-offwhite-color);
+  padding: 0;
 }
 
 .navbar-brand {
     padding-left: .5vw;
-    color: #4A245E;
+    color: var(--main-dark-color);
     font-size: 2vw;
     font-weight: bold;
 
@@ -70,7 +116,7 @@ p {
 }
 
 .navbar-brand:hover {
-    color: #4A245E;
+    color: var(--main-dark-color);
 }
 
 .nav-link {
@@ -78,37 +124,169 @@ p {
 }
 
 .nav-link, .nav-link > .nav-item {
-    color: #4A245E;
+    color: var(--main-dark-color);
     font-size: 1.3vw;
 
     animation: 500ms;
 }
 
 .nav-link:hover, .nav-link:hover > .nav-item {
-    color: white;
+    color: var(--main-offwhite-color);
 }
 
 .nav-link:hover {
-    background-color: #4A245E;
-}
-
-/* MISC */
-
-.custom-container {
-    float: right;
-
-    width: 40% !important;
+    background-color: var(--main-dark-color);
 }
 
 .bar {
     display: block;
     width: 100%;
-    border-top: 5px #4A245E solid;
+    border-top: 5px var(--main-dark-color) solid;
     padding-bottom: 1vw;
 }
 
-.card-text {
-    font-size: 2vw;
+/*Carousel*/
+.carousel {
+  float:left;
+  margin-top: 5vw;
+  width: 55% !important;
+}
+
+/*Project panels selection*/
+input {
+  padding: 1em;
+  margin: .5em;
+  font-size: 1.2em;
+}
+
+.search {
+  padding: 1vw;
+  background-color: var(--main-dark-color);
+  color: white;
+}
+
+label, label {
+  display: inline-block;
+  border: 2px solid var(--main-offwhite-color);
+  border-radius: 5px;
+  text-align: center;
+  padding: .5em;
+  margin: 0 2em 1em 2em;
+
+  transition: 500ms;
+}
+
+input[type="radio"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
+}
+
+input[type="radio"]:checked + label {
+  background-color: var(--main-offwhite-color);
+  color: var(--main-dark-color);
+}
+
+input[type="radio"]:hover + label {
+  background-color: var(--main-offwhite-color);
+  color: var(--main-dark-color);
+}
+
+.panels {
+  overflow: hidden;
+}
+
+.panel {
+  max-height: 6.5vw;
+  background: var(--main-dark-color);
+  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.05);
+  color: white;
+  transition:
+    font-size 1s,
+    flex 1s,
+    padding 1s,
+    max-height 2s;
+  font-size: 2.5em;
+  background-position: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel > * {
+  width: 100%;
+  transition: transform 800ms;
+  flex: 1 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.panel > *:nth-child(2) {
+  transform: translateX(1000%);
+}
+.panel.open-active > *:nth-child(2) {
+  transform: translateX(0);
+}
+
+.panel > *:last-child {
+  transform: translateX(1000%);
+}
+.panel.open-active > *:last-child {
+  transform: translateX(50%);
+}
+
+.panel h3 {
+  font-family: Lato, sans-serif;
+  color: var(--main-offwhite-color);
+  font-size: 1.3em;
+  padding-top: 1vw;
+}
+
+.panel.open-active {
+  max-height: 20vw;
+}
+
+.panel.open {
+  flex: 5;
+  font-size: 2em;
+}
+
+@media only screen and (max-width: 600px) {
+  .panel p {
+    font-size: 0.8em;
+  }
+}
+
+/*Projects display wrapper div*/
+.projects-display {
+  padding: 5vw;
+}
+
+/*Buttons*/
+.btn {
+  padding: 0.5vw;
+  background-color: var(--main-dark-color);
+  border: 2px solid var(--main-offwhite-color);
+  transition: background-color 300ms;
+  width: 50%;
+  margin-bottom: 1vw;
+}
+
+.btn:hover {
+  background-color: #673283;
+  border: 2px solid var(--main-offwhite-color);
+}
+
+.btn > a {
+  text-decoration: none;
+  color: var(--main-offwhite-color);
+}
+
+/* MISC */
+.custom-container {
+    float: right;
+
+    width: 40% !important;
 }
 
 @media (max-width: 991px) {
@@ -136,3 +314,4 @@ p {
         font-weight: bold;
     }
 }
+

public_html/projects/index.html

@@ -1,75 +1,113 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Projects | Josh Ashton</title>
-  <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-  <link href="css/projects.css" rel="stylesheet">
-  <link href="css/style.css" rel="stylesheet">
-</head>
-<body>
-  <!-- Navigation -->
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-      <a class="navbar-brand" href="/public_html/index.html">Josh Ashton</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarNav">
-          <ul class="navbar-nav nav-fill w-100">
-              <a class="nav-link" target="_blank" href="1430">
-                  <li class="nav-item">CSIS 1430</li>
-              </a>
-          </ul>
+  <head>
+    <meta charset="UTF-8">
+    <title>Projects | Josh Ashton</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+  <body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand" href="index.html">Josh Ashton</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav nav-fill w-100">
+                <a class="nav-link" href="../projects">
+                    <li class="nav-item">Projects</li>
+                </a>
+            </ul>
+        </div>
+    </nav>
+
+    <!--Wrapper div, to separate filter options from the rest of the projects.-->
+    <div class="projects-display">
+      <form class="filter-buttons">
+          <input type="radio" class="search btn btn-primary" name="filter" id="java" />
+          <label for="java">Java</label>
+
+          <input type="radio" class="search btn btn-primary" name="filter" id="html" />
+          <label for="html">HTML</label>
+
+          <input type="radio" class="search btn btn-primary" name="filter" id="css" />
+          <label for="css">CSS</label>
+
+          <input type="radio" class="search btn btn-primary" name="filter" id="javascript" />
+          <label for="javascript">JavaScript</label>
+
+          <input type="radio" class="search btn btn-primary" name="filter" id="c" />
+          <label for="c">C</label>
+
+          <input type="radio" class="search btn btn-primary" name="filter" id="c#" />
+          <label for="c#">C#</label>
+
+          <input type="radio" class="search btn btn-primary" name="filter" id="bash" />
+          <label for="bash">Bash</label>
+      </form>
+
+      <!--Selectable projects that dynamically resize to fit more information.-->
+      <div class="panels">
+
+        <div class="panel java" id="dnd">
+          <h3 class="label">DnD</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/dnd" target="_blank">View Code on Github</a></button>
+        </div>
+
+        <div class="panel java" id="graph">
+          <h3 class="label">Graph</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/2420-graph-visualizer" target="_blank">View Code on Github</a></button>
+        </div>
+
+        <div class="panel java" id="chess">
+          <h3 class="label">Chess</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/2420-chess" target="_blank">View Code on Github</a></button>
+        </div>
+
+        <div class="panel c# .NET" id="snake">
+          <h3 class="label">Snake</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/2410-snake" target="_blank">View Code on Github</a></button>
+        </div>
+
+        <div class="panel c# .NET" id="contacts">
+          <h3 class="label">Contacts</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/2410-contacts" target="_blank">View Code on Github</a></button>
+        </div>
+
+        <div class="panel html css js javascript" id="canvas">
+          <h3 class="label">Canvas</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/dnd" target="_blank">View Code on Github</a></button>
+        </div>
+
+        <div class="panel bash" id="scripts">
+          <h3 class="label">Scripts</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/scripts" target="_blank">View Code on Github</a></button>
+        </div>
+
+        <div class="panel c" id="linkedlist-c">
+          <h3 class="label">Linked List in C</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/learningC" target="_blank">View Code on Github</a></button>
+        </div>
+
+        <div class="panel html css javascript" id="1430">
+          <h3 class="label">CSIS 1430</h3> <!--Project label-->
+          <h4 class="label-text">ASDF</h4>
+          <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/1430" target="_blank">View Code on Github</a></button>
+        </div>
+
       </div>
-  </nav>
 
-
-  <div class="panels">
-    <div class="panel java">
-      <p class="label">DnD Character Builder</p> <!--Project label-->
-      <p>ASDF</p>
-      <p>ASDF</p>
     </div>
-    <div class="panel java">
-      <p class="label">Graph Visualizer</p> <!--Project label-->
-      <p>ASDF</p>
-      <p>ASDF</p>
-    </div>
-    <div class="panel java">
-      <p class="label">Chess</p> <!--Project label-->
-      <p>ASDF</p>
-      <p>ASDF</p>
-    </div>
-    <div class="panel java sql">
-      <p class="label">Pokedex</p> <!--Project label-->
-      <p>ASDF</p>
-      <p>ASDF</p>
-    </div>
-    <div class="panel c#">
-      <p class="label">Snake</p> <!--Project label-->
-      <p>ASDF</p>
-      <p>ASDf</p>
-    </div>
-    <div class="panel c#">
-      <p class="label">Contacts Manager</p> <!--Project label-->
-      <p>ASDF</p>
-      <p>ASDF</p>
-    </div>
-    <div class="panel html css js">
-      <p class="label">Canvas</p> <!--Project label-->
-      <p>ASDF</p>
-      <p>ASDF</p>
-    </div>
-    <div class="panel bash">
-      <p class="label">Automation Scripts</p> <!--Project label-->
-      <p>ASDF</p>
-      <p>ASDF</p>
-    </div>
-
-  </div>
-
-</body>
+  </body>
 
   <footer>
     <script src="js/script.js"></script>

public_html/projects/js/script.js

@@ -1,15 +1,104 @@
-const panels = document.querySelectorAll('.panel');
+// the .panels div which contains each panel
+const panelContainer = document.querySelector('.panels');
 
+// each panel inside of the .panels div. this is the original copy of each panel
+const panels = [...document.querySelectorAll('.panel')];
+    // add event listeners to each panel
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+
+// buttons to filter projects
+const searchButtons = document.querySelectorAll('.search');
+  // add event listeners to each button
+  searchButtons.forEach(button => {
+    if(!button.classList.contains('input-box'))
+      button.addEventListener('click', displayMatches)
+  });
+
+// the search box to filter projects
+const searchInput = document.querySelector('.input-box');
+    // add event listeners to the search box
+    searchInput.addEventListener('change', displayMatches);
+    searchInput.addEventListener('keyup', displayMatches);
+    
+
+ /*
+  * If there is currently an open panel, toggle it.
+  * Toggle the newly selected panel to open.
+  */
 function toggleOpen() {
+  let currentOpen = document.querySelector('.open');
+  if(currentOpen !== null && currentOpen !== this) currentOpen.classList.toggle('open');
   this.classList.toggle('open');
 }
 
+ /*
+  * If there is currently an active panel, toggle it.
+  * Toggle the newly selected panel to be active.
+  */
 function toggleActive(e) {
-  console.log(e.propertyName);
   if (e.propertyName.includes('flex')) {
+    let currentActive = document.querySelector('.open-active');
+    if(currentActive !== null && currentActive !== this) currentActive.classList.toggle('open-active');
     this.classList.toggle('open-active');
+    updateCarousel(e);
   }
 }
 
-panels.forEach(panel => panel.addEventListener('click', toggleOpen));
-panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+/*
+ * Update the carousel to use the selected project's screenshot folder.
+ */
+function updateCarousel(e) {
+  console.log(e.target.id); // TODO: Need to implement.
+}
+
+ /* 
+  * Find matches based upon a letter or combination of letters.
+  * Matches are found only within the class list of each project panel.
+  */
+function findMatches(wordToMatch, isInputBox) {
+  // if the search string is empty, return the original panels
+  if(wordToMatch === "") return panels;
+
+  let results = [];
+
+  // for each of the projects
+  panels.forEach(project => {
+
+    // iterate through the class list of that project
+    project.classList.forEach(clazz => {
+
+      // if the class has a match and the class is not the panel, add it to the array
+      if ((clazz !== 'panel' && clazz == wordToMatch.toLowerCase()) && !isInputBox) results.push(project);
+      if ((clazz !== 'panel' && clazz.includes(wordToMatch.toLowerCase())) && isInputBox) results.push(project);
+    });
+
+    // reset each project to it's default state (unopened)
+    if(project.classList.contains('open')) project.classList.toggle('open');
+    if(project.classList.contains('open-active')) project.classList.toggle('open-active');
+  });
+  return results;
+}
+
+ /*
+  * Set the .panels inner HTML equal to the outer HTML of each project match. 
+  */
+function displayMatches(projects) {
+  // THIS NEEDS TO BE MOVED TO A GENERAL INPUT MANAGER
+  // TODO: Projects is a parameter, to allow for reset button (see below)
+  // get the array of matches
+  //if(matchArray.length === 0) matchArray = panels; -> if the array of matches has none, then reset
+  if(!this.classList.contains('input-box')) 
+    projects = findMatches(this.id, false);
+  else projects = findMatches(this.value, true);
+
+  //projects.forEach(project => console.log(project));
+
+  // set the inner html of the panels div to the combined HTML of each matched project.
+  panelContainer.innerHTML = projects.map(project => project.outerHTML).join('\n');
+  
+  let newPanels = [...document.querySelectorAll('.panel')];
+  // add event listeners to each panel
+  newPanels.forEach(panel => panel.addEventListener('click', toggleOpen));
+  newPanels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+}