jashton/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added content and squashed animation bug

Browse Source
This commit is contained in:
violet
2024-12-05 15:18:16 -07:00
parent 4fd2054990
commit 47bf0a308a
4 changed files with 60 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/portfolio/index.html
+26
View File
@@ -37,6 +37,7 @@
<div class="row custom-container cards">
<h3 class="light-text">Featured Projects</h3>
<div class="row">
<div class="col">
<div class="card">
<img class="card-img-top" src="img/dnd.png" alt="Card image cap">
@@ -58,6 +59,31 @@
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<img class="card-img-top" src="img/dnd.png" alt="Card image cap">
<div class="card-body">
<h2 class="card-title dark-text">DnD Character Builder</h2>
<p class="dark-text">Dungeons and Dragons character builder app, developed in Java.</p>
<a target="_blank" href="https://github.com/quaxlyqueen/dnd" class="btn btn-primary">View Code on Github</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img class="card-img-top" src="img/graph.png" alt="Card image cap">
<div class="card-body">
<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>
<a target="_blank" href="https://github.com/quaxlyqueen/2420-graph-visualizer" class="btn btn-primary">View Code on Github</a>
</div>
</div>
</div>
</div>
</div>
</body>
public/portfolio/projects/css/style.css
+7 -5
View File
@@ -202,10 +202,10 @@ input[type="radio"]:hover + label {
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 500ms,
flex 500ms,
padding 500ms,
max-height 750ms;
font-size: 2.5em;
background-position: center;
display: flex;
@@ -225,14 +225,16 @@ input[type="radio"]:hover + label {
transform: translateX(1000%);
}
.panel.open-active > *:nth-child(2) {
transform: translateX(0);
transform: translateX(0%);
}
.panel > *:last-child {
transform: translateX(1000%);
transition: 800ms;
}
.panel.open-active > *:last-child {
transform: translateX(50%);
transition: 800ms;
}
.panel h3 {
public/portfolio/projects/index.html
+26 -33
View File
@@ -25,9 +25,6 @@
<!--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>
@@ -37,73 +34,69 @@
<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="java" />
<label for="java">Java</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="go" />
<label for="go">Go</label>
<input type="radio" class="search btn btn-primary" name="filter" id="flutter" />
<label for="flutter">Flutter</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 go flutter" id="tbn">
<h3 class="label">One AI</h3>
<h4 class="label-text">End-to-end self-hosted AI solution using Ollama, a Go backend, and Flutter frontend.</h4>
<button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/one-ai" target="_blank">View Code on Github</a></button>
</div>
<div class="panel go flutter" id="pokedex">
<h3 class="label">Pokedex</h3>
<h4 class="label-text">End-to-end self-hosted Pokedex using PokeAPI, a Go backend, and Flutter frontend.</h4>
<button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/pokedex" target="_blank">View Code on Github</a></button>
</div>
<div class="panel java" id="dnd">
<h3 class="label">DnD</h3> <!--Project label-->
<h4 class="label-text">ASDF</h4>
<h3 class="label">D&D</h3> <!--Project label-->
<h4 class="label-text">Java application for creating Dungeons and Dragons characters.</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>
<h4 class="label-text">A graph algorithm visualizer.</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>
<h4 class="label-text">A simple chess application with move validation.</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>
<h4 class="label-text">A CLI snake game with random obstacle generation.</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>
<h4 class="label-text">A CLI contacts application for consolidating, merging, and exporting contacts between different formats.</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>
</div>
public/portfolio/projects/js/script.js
+1 -1
View File
@@ -41,7 +41,7 @@ function toggleActive(e) {
let currentActive = document.querySelector('.open-active');
if(currentActive !== null && currentActive !== this) currentActive.classList.toggle('open-active');
this.classList.toggle('open-active');
updateCarousel(e);
//updateCarousel(e);
}
}