- 
+ 
+
DnD Character Builder
Dungeons and Dragons character builder app, developed in Java.
@@ -58,7 +50,7 @@
- 
+ 
Projects | Josh Ashton
-
-
-
-
-
-
-
-
+
Graph Visualizer
Visual and interactive representation of a graph data structure, developed in Java.
diff --git a/public_html/projects/css/override.css b/public_html/projects/css/override.css deleted file mode 100644 index e9bb7ca8..00000000 --- a/public_html/projects/css/override.css +++ /dev/null @@ -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; -} diff --git a/public_html/projects/css/projects.css b/public_html/projects/css/projects.css deleted file mode 100644 index 555c01b1..00000000 --- a/public_html/projects/css/projects.css +++ /dev/null @@ -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; - } -} diff --git a/public_html/projects/css/style.css b/public_html/projects/css/style.css index c7329ef6..debc99d9 100644 --- a/public_html/projects/css/style.css +++ b/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; } } + diff --git a/public_html/projects/img/dnd/dnd1.png b/public_html/projects/img/dnd/dnd1.png new file mode 100644 index 00000000..b2c1d01f Binary files /dev/null and b/public_html/projects/img/dnd/dnd1.png differ diff --git a/public_html/projects/img/graph-visualizer/graph1.png b/public_html/projects/img/graph-visualizer/graph1.png new file mode 100644 index 00000000..1bc54a14 Binary files /dev/null and b/public_html/projects/img/graph-visualizer/graph1.png differ diff --git a/public_html/projects/index.html b/public_html/projects/index.html index 22e6d2b6..618194cf 100644 --- a/public_html/projects/index.html +++ b/public_html/projects/index.html @@ -1,75 +1,113 @@ - - -