Adding Images, js, and change text

Author: Code-JL

assets/index.html

@@ -25,10 +25,17 @@ <h1>Joseph JP Lavoie</h1>
     <section id="projects">
         <h2>Projects</h2>
         <ul>
-            <li>Bioinformatics Tool: A Python-based tool for genetic data analysis.</li>
+            <li>Kicker Tool: A Python-based tool for looking at currently rostered kickers.</li>
             <li>Portfolio Website: A showcase of my skills built using HTML, CSS, and JavaScript.</li>
         </ul>
     </section>
+    <section id="project gallery">
+        <h2>Gallery</h2>
+        <div class="gallery">
+            <img src="images/project1-placeholder.jpg" alt="Kicker Tool Screenshot" title="Kicker Tool">
+            <img src="images/project2-placeholder.jpg" alt="Portfolio Screenshot" title="Portfolio Website">
+        </div>
+    </section>
     <section id="skills">
         <h2>Skills</h2>
         <ul>

assets/script.js

@@ -0,0 +1,12 @@
+document.querySelectorAll('nav a').forEach(link => {
+    link.addEventListener('click', function (e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href').substring(1);
+        document.getElementById(targetId).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+
+const footer = document.querySelector('footer p');
+footer.innerHTML = `© ${new Date().getFullYear()} Joseph Lavoie`;

assets/styles.css

@@ -1,37 +1,77 @@
+
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Arial', sans-serif;
     margin: 0;
     padding: 0;
     line-height: 1.6;
     color: #333;
+    background: linear-gradient(to bottom, #f0f0f0, #d9d9d9);
 }
 header {
-    background: #333;
+    background: linear-gradient(90deg, #333, #555);
     color: #fff;
-    padding: 10px 20px;
+    padding: 15px 20px;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 nav ul {
     list-style: none;
     padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
 }
 nav ul li {
-    display: inline;
-    margin-right: 10px;
+    margin-right: 15px;
 }
 nav ul li a {
     color: #fff;
     text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+nav ul li a:hover {
+    color: #ffa500;
 }
 section {
-    padding: 20px;
-    margin: 20px 0;
+    padding: 40px 20px;
+    margin: 20px auto;
+    max-width: 900px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 h1, h2 {
     color: #333;
+    text-align: center;
 }
 footer {
     text-align: center;
-    padding: 10px 0;
+    padding: 15px 0;
     background: #333;
     color: #fff;
-} 
+}
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    margin: 10px 0;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+}
+.gallery img {
+    width: 100%;
+    border-radius: 5px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+}
+.gallery img:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+}