https://joshaaronmiller.com/portfolio.html

1<!DOCTYPE html>
2<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3<meta name="viewport" content="width=device-width, initial-scale=1">
4<html lang = "en-US">
5   <link rel = "stylesheet"
6      type = "text/css"
7      href = "styles.css?v=9" />
8   <title>Josh Aaron Miller | Portfolio </title>
9   <div class="padding">
10      <a class="buttonlink" href="http://joshaaronmiller.com">Home</a>
11      <br><br>
12      <head>
13      <h1 style="font-family:SketchBlock">Portfolio</h1>
14      </head>
15      <body>
16         <div class="carousel-container">
17            <div class="carousel-track" id="carouselTrack">
18               <!-- Slides will be injected here -->
19            </div>
20            <div class="carousel-buttons">
21               <button class="buttonlink" style="font-family:SketchBlock" onclick="moveSlide(-1)">⬅ Previous</button>
22               <button class="buttonlink" style="font-family:SketchBlock" onclick="moveSlide(1)">Next ➡</button>
23            </div>
24         </div>
25         

25<script src="js/projects.js"></script>

25
26         

26<script>
27            const track = document.getElementById('carouselTrack');
28            let currentIndex = 0;
29            
30            function renderSlides() {
31              projects.forEach((project, index) => {
32                const slide = document.createElement('div');
33                slide.className = 'carousel-slide';
34                const mediaHTML = project.image
35                ? `<img src="${project.image}" alt="${project.alt || project.title}">`
36                : (project.embed || '');
37                slide.innerHTML = `
38                <div class="text">
39                  <h2>${project.title}</h2>
40                  ${project.description}
41                </div>
42                <div class="image">
43                  ${mediaHTML}
44                </div>
45              `;
46                track.appendChild(slide);
47              });
48            }
49            
50            function moveSlide(direction) {
51              const totalSlides = projects.length;
52              currentIndex = (currentIndex + direction + totalSlides) % totalSlides;
53              const offset = -currentIndex * 100;
54              track.style.transform = `translateX(${offset}%)`;
55            }
56            
57            renderSlides();
58         </script>

58
59   </div>
60</html>