basic functionality of navigating projects, with two projects highlighted on the main page.
This commit is contained in:
Josh Ashton
@@ -1,52 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<!-- Required meta tags -->
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CSS only -->
|
|
||||||
<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">
|
|
||||||
|
|
||||||
<title>Josh Ashton</title>
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<a class="nav-link" href="about.html">
|
|
||||||
<li class="nav-item">About</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="nav-link" href="contact.html">
|
|
||||||
<li class="nav-item">Contact</li>
|
|
||||||
</a>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<p>About me</p>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
|
|
||||||
<!-- JavaScript Bundle with Popper -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
|
||||||
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<!-- Required meta tags -->
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CSS only -->
|
|
||||||
<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">
|
|
||||||
|
|
||||||
<title>Josh Ashton</title>
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<a class="nav-link" href="about.html">
|
|
||||||
<li class="nav-item">About</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="nav-link" href="contact.html">
|
|
||||||
<li class="nav-item">Contact</li>
|
|
||||||
</a>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<p>Contact me</p>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
|
|
||||||
<!-- JavaScript Bundle with Popper -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
|
||||||
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
+2
-10
@@ -25,14 +25,6 @@
|
|||||||
<a class="nav-link" href="projects">
|
<a class="nav-link" href="projects">
|
||||||
<li class="nav-item">Projects</li>
|
<li class="nav-item">Projects</li>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="nav-link" href="about.html">
|
|
||||||
<li class="nav-item">About</li>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a class="nav-link" href="contact.html">
|
|
||||||
<li class="nav-item">Contact</li>
|
|
||||||
</a>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
@@ -47,7 +39,7 @@
|
|||||||
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<img class="card-img-top" src="/public_html/img/dnd.png" alt="Card image cap">
|
<img class="card-img-top" src="img/dnd.png" alt="Card image cap">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h2 class="card-title dark-text">DnD Character Builder</h2>
|
<h2 class="card-title dark-text">DnD Character Builder</h2>
|
||||||
<p class="dark-text">Dungeons and Dragons character builder app, developed in Java.</p>
|
<p class="dark-text">Dungeons and Dragons character builder app, developed in Java.</p>
|
||||||
@@ -58,7 +50,7 @@
|
|||||||
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<img class="card-img-top" src="/public_html/img/graph.png" alt="Card image cap">
|
<img class="card-img-top" src="img/graph.png" alt="Card image cap">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h2 class="card-title dark-text">Graph Visualizer</h2>
|
<h2 class="card-title dark-text">Graph Visualizer</h2>
|
||||||
<p class="dark-text">Visual and interactive representation of a graph data structure, developed in Java.</p>
|
<p class="dark-text">Visual and interactive representation of a graph data structure, developed in Java.</p>
|
||||||
|
|||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,42 @@
|
|||||||
/* GENERAL */
|
/* GENERAL */
|
||||||
|
:root {
|
||||||
|
--main-dark-color: #4A245E;
|
||||||
|
--main-offwhite-color: white;
|
||||||
|
--main-midtone-color: #9BC995;
|
||||||
|
--main-accent-color: #673283;
|
||||||
|
--secondary-accent-color: #98B9AB;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin:0;
|
margin:0;
|
||||||
height:100vh;
|
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 */
|
/* TEXT */
|
||||||
@@ -20,7 +55,6 @@ h1 {
|
|||||||
font-size: 8vw;
|
font-size: 8vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 4vw;
|
font-size: 4vw;
|
||||||
}
|
}
|
||||||
@@ -29,27 +63,39 @@ h3 {
|
|||||||
font-size: 3vw;
|
font-size: 3vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
h4 {
|
||||||
font-size: 2vw;
|
font-size: 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
.dark-text {
|
.dark-text {
|
||||||
color: #4A245E;
|
color: var(--main-dark-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-text {
|
.light-text {
|
||||||
color: white;
|
color: var(--main-offwhite-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-text {
|
||||||
|
font-size: 1.5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* NAV-BAR */
|
/* NAV-BAR */
|
||||||
.bg-light {
|
.bg-light {
|
||||||
background-color: white !important;
|
background-color: var(--main-offwhite-color);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
padding-left: .5vw;
|
padding-left: .5vw;
|
||||||
color: #4A245E;
|
color: var(--main-dark-color);
|
||||||
font-size: 2vw;
|
font-size: 2vw;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
@@ -70,7 +116,7 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand:hover {
|
.navbar-brand:hover {
|
||||||
color: #4A245E;
|
color: var(--main-dark-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
@@ -78,37 +124,169 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-link, .nav-link > .nav-item {
|
.nav-link, .nav-link > .nav-item {
|
||||||
color: #4A245E;
|
color: var(--main-dark-color);
|
||||||
font-size: 1.3vw;
|
font-size: 1.3vw;
|
||||||
|
|
||||||
animation: 500ms;
|
animation: 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover, .nav-link:hover > .nav-item {
|
.nav-link:hover, .nav-link:hover > .nav-item {
|
||||||
color: white;
|
color: var(--main-offwhite-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
background-color: #4A245E;
|
background-color: var(--main-dark-color);
|
||||||
}
|
|
||||||
|
|
||||||
/* MISC */
|
|
||||||
|
|
||||||
.custom-container {
|
|
||||||
float: right;
|
|
||||||
|
|
||||||
width: 40% !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar {
|
.bar {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: 5px #4A245E solid;
|
border-top: 5px var(--main-dark-color) solid;
|
||||||
padding-bottom: 1vw;
|
padding-bottom: 1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-text {
|
/*Carousel*/
|
||||||
font-size: 2vw;
|
.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) {
|
@media (max-width: 991px) {
|
||||||
@@ -136,3 +314,4 @@ p {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
@@ -3,72 +3,110 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Projects | Josh Ashton</title>
|
<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="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">
|
<link href="css/style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<a class="navbar-brand" href="/public_html/index.html">Josh Ashton</a>
|
<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">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<ul class="navbar-nav nav-fill w-100">
|
<ul class="navbar-nav nav-fill w-100">
|
||||||
<a class="nav-link" target="_blank" href="1430">
|
<a class="nav-link" href="../projects">
|
||||||
<li class="nav-item">CSIS 1430</li>
|
<li class="nav-item">Projects</li>
|
||||||
</a>
|
</a>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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="panels">
|
||||||
<div class="panel java">
|
|
||||||
<p class="label">DnD Character Builder</p> <!--Project label-->
|
<div class="panel java" id="dnd">
|
||||||
<p>ASDF</p>
|
<h3 class="label">DnD</h3> <!--Project label-->
|
||||||
<p>ASDF</p>
|
<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>
|
||||||
<div class="panel java">
|
|
||||||
<p class="label">Graph Visualizer</p> <!--Project label-->
|
<div class="panel java" id="graph">
|
||||||
<p>ASDF</p>
|
<h3 class="label">Graph</h3> <!--Project label-->
|
||||||
<p>ASDF</p>
|
<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>
|
||||||
<div class="panel java">
|
|
||||||
<p class="label">Chess</p> <!--Project label-->
|
<div class="panel java" id="chess">
|
||||||
<p>ASDF</p>
|
<h3 class="label">Chess</h3> <!--Project label-->
|
||||||
<p>ASDF</p>
|
<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>
|
||||||
<div class="panel java sql">
|
|
||||||
<p class="label">Pokedex</p> <!--Project label-->
|
<div class="panel c# .NET" id="snake">
|
||||||
<p>ASDF</p>
|
<h3 class="label">Snake</h3> <!--Project label-->
|
||||||
<p>ASDF</p>
|
<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>
|
||||||
<div class="panel c#">
|
|
||||||
<p class="label">Snake</p> <!--Project label-->
|
<div class="panel c# .NET" id="contacts">
|
||||||
<p>ASDF</p>
|
<h3 class="label">Contacts</h3> <!--Project label-->
|
||||||
<p>ASDf</p>
|
<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>
|
||||||
<div class="panel c#">
|
|
||||||
<p class="label">Contacts Manager</p> <!--Project label-->
|
<div class="panel html css js javascript" id="canvas">
|
||||||
<p>ASDF</p>
|
<h3 class="label">Canvas</h3> <!--Project label-->
|
||||||
<p>ASDF</p>
|
<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>
|
||||||
<div class="panel html css js">
|
|
||||||
<p class="label">Canvas</p> <!--Project label-->
|
<div class="panel bash" id="scripts">
|
||||||
<p>ASDF</p>
|
<h3 class="label">Scripts</h3> <!--Project label-->
|
||||||
<p>ASDF</p>
|
<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>
|
||||||
<div class="panel bash">
|
|
||||||
<p class="label">Automation Scripts</p> <!--Project label-->
|
<div class="panel c" id="linkedlist-c">
|
||||||
<p>ASDF</p>
|
<h3 class="label">Linked List in C</h3> <!--Project label-->
|
||||||
<p>ASDF</p>
|
<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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|||||||
@@ -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() {
|
function toggleOpen() {
|
||||||
|
let currentOpen = document.querySelector('.open');
|
||||||
|
if(currentOpen !== null && currentOpen !== this) currentOpen.classList.toggle('open');
|
||||||
this.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) {
|
function toggleActive(e) {
|
||||||
console.log(e.propertyName);
|
|
||||||
if (e.propertyName.includes('flex')) {
|
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');
|
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));
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user