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

implemented updating carousel

Browse Source
This commit is contained in:
violet
2024-12-05 16:31:10 -07:00
parent d3dca53229
commit 0bb7e1a180
10 changed files with 118 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/portfolio/index.html
-4
View File
@@ -89,10 +89,6 @@
</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>
public/portfolio/projects/css/style.css
+23 -4
View File
@@ -85,6 +85,11 @@ p {
.label-text {
font-size: 1.5vw;
max-width: 80%; /* Limit the width of the description */
text-align: center;
--white-space: nowrap; /* Optional: prevent text from wrapping to multiple lines */
--overflow: hidden; /* Hide overflow text */
--text-overflow: ellipsis;
}
/* NAV-BAR */
@@ -193,7 +198,8 @@ input[type="radio"]:hover + label {
}
.panels {
overflow: hidden;
flex: 1;
--overflow: hidden;
}
.panel {
@@ -222,14 +228,14 @@ input[type="radio"]:hover + label {
}
.panel > *:nth-child(2) {
transform: translateX(1000%);
transform: translateX(-1000%);
}
.panel.open-active > *:nth-child(2) {
transform: translateX(0%);
transform: translateX(12.5%);
}
.panel > *:last-child {
transform: translateX(1000%);
transform: translateX(-1000%);
transition: 800ms;
}
.panel.open-active > *:last-child {
@@ -253,6 +259,16 @@ input[type="radio"]:hover + label {
font-size: 2em;
}
.carousel-wrapper {
flex: 0 0 40%;
padding-top: 5vw;
}
/* Optional: You can adjust the width of the carousel */
.carousel {
width: 100%; /* Ensure the carousel takes up all the space in its wrapper */
}
@media only screen and (max-width: 600px) {
.panel p {
font-size: 0.8em;
@@ -261,6 +277,9 @@ input[type="radio"]:hover + label {
/*Projects display wrapper div*/
.projects-display {
display: flex;
justify-content: space-between;
gap: 3vw;
padding: 5vw;
}
public/portfolio/projects/img/one-ai-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

public/portfolio/projects/img/one-ai-2.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 339 KiB

public/portfolio/projects/img/one-ai-3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

public/portfolio/projects/img/pokedex-1.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

public/portfolio/projects/img/pokedex-2.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

public/portfolio/projects/img/pokedex-3.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

public/portfolio/projects/index.html
+65 -48
View File
@@ -7,61 +7,62 @@
<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>
<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="..">
<li class="nav-item">Projects</li>
</a>
</ul>
</div>
</nav>
<!--Wrapper div, to separate filter options from the rest of the projects.-->
<!-- Wrapper for the panels and carousel -->
<div class="projects-display">
<form class="filter-buttons">
<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="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.-->
<!-- Project panels -->
<div class="panels">
<div class="panel go flutter" id="tbn">
<form class="filter-buttons">
<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="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>
<!-- Project panels (cards) here -->
<div class="panel go flutter" id="one-ai" data-carousel-images='["img/one-ai-1.jpg", "img/one-ai-3.jpg"]'>
<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">
<div class="panel go flutter" id="pokedex" data-carousel-images='["img/pokedex-2.jpeg", "img/pokedex-3.jpeg"]'>
<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>
@@ -99,10 +100,26 @@
</div>
<!-- Carousel placed to the right -->
<div class="carousel-wrapper">
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- Dynamic images will be injected here -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</body>
<footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</footer>
</body>
</html>
public/portfolio/projects/js/script.js
+30 -6
View File
@@ -7,6 +7,15 @@ const panels = [...document.querySelectorAll('.panel')];
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
// Store the reference to the carousel container where images will be displayed
const carouselContainer = document.querySelector('.carousel-inner');
// Add event listeners to the panels (cards)
//const panels = [...document.querySelectorAll('.panel')];
//panels.forEach(panel => panel.addEventListener('click', toggleActive));
// buttons to filter projects
const searchButtons = document.querySelectorAll('.search');
// add event listeners to each button
@@ -41,15 +50,30 @@ 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);
currentActive = document.querySelector('.open-active');
updateCarousel(currentActive);
}
}
/*
* Update the carousel to use the selected project's screenshot folder.
*/
function updateCarousel(e) {
console.log(e.target.id); // TODO: Need to implement.
// Function to update the carousel with the selected project's images
function updateCarousel(panel) {
console.log(panel);
// Get the image URLs from the data attribute of the selected project
const imageUrls = JSON.parse(panel.getAttribute('data-carousel-images'));
// Clear the current carousel content
carouselContainer.innerHTML = '';
// Add new images to the carousel
imageUrls.forEach((url, index) => {
const isActive = index === 0 ? 'active' : ''; // The first image should be active
const carouselItem = `
<div class="carousel-item ${isActive}">
<img src="${url}" class="d-block w-100" alt="...">
</div>
`;
carouselContainer.innerHTML += carouselItem; // Add the new image item to the carousel
});
}
/*