Added project images, school crest pngs, updated gallary, fixed links.

assets/education.css

@@ -20,6 +20,20 @@ section {
 	width: 50%;
 }
 
+/* School Header Styling */
+.school-header {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.school-crest {
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+}
+
 /* List and Link Styling */
 li a {
 	color: #e7df69; /* Bright yellow text for links */

assets/education.html

@@ -18,7 +18,10 @@ <h1 id="type">Education</h1>
 
         <section>
             <article>
-                <h2>St. Francis Xavier High School</h2>
+                <div class="school-header">
+                    <img src="../images/xavier.png" alt="St. Francis Xavier High School Crest" class="school-crest">
+                    <h2>St. Francis Xavier High School</h2>
+                </div>
                 <p><strong>High School Diploma</strong></p>
                 <p><em>January 2019 - June 2021</em></p>
                 <p>Location: Edmonton, Alberta, Canada</p>
@@ -28,7 +31,10 @@ <h2>St. Francis Xavier High School</h2>
             <hr>
 
             <article>
-                <h2>Cornell College</h2>
+                <div class="school-header">
+                    <img src="../images/cornell.png" alt="Cornell College Crest" class="school-crest">
+                    <h2>Cornell College</h2>
+                </div>
                 <p><strong>Bachelor's Degree</strong></p>
                 <p><em>August 2021 - May 2024</em></p>
                 <p>Location: Mount Vernon, Iowa, United States</p>

assets/home.css

@@ -1,23 +1,36 @@
 /* Gallery Styles */
 .gallery {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-	gap: 20px;
+	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
+	gap: 2rem;
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+.gallery figure {
+	margin: 0;
+	padding: 1rem;
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 8px;
+	text-align: center;
 }
 
 .gallery img {
 	width: 100%;
-	border-radius: 5px;
+	height: auto;
+	border-radius: 4px;
 	border: 2px solid #112c42; /* Dark blue border */
 	transition: transform 0.3s ease, box-shadow 0.3s ease;
 	cursor: pointer;
+	margin-bottom: 1rem;
 }
 
 .gallery img:hover {
 	transform: scale(1.05);
 	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Adds hover emphasis */
 }
 
+
 /* Contact Section Styles */
 section#contact p a img {
 	width: 50px;
@@ -54,3 +67,10 @@ h2 {
 h3 {
 	font-size: 40px;
 }
+
+/* Media query to ensure max 3 columns */
+@media (min-width: 900px) {
+    .gallery {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}

assets/home.html

@@ -21,38 +21,56 @@ <h1 id="type">Joseph JP Lavoie</h1>
 
         <section id="projects">
             <h2>Featured Projects</h2>
-            <ul>
-                <li>
-                    <a href="https://github.com/Code-JL/GUI-Inventory-Manager" target="_blank" class="button">GUI Inventory Manager</a>
-                    Cross-platform inventory management system built with C++ and WxWidgets, supporting Linux, MacOS, and Windows platforms.
-                </li>
-                <li>
-                    <a href="https://github.com/Code-JL/AI-Page-Summary" target="_blank" class="button">AI Page Summary</a>
-                    Browser extension for AI-powered webpage summarization using Hugging Face's BART model.
-                </li>
-                <li>
-                    <a href="https://github.com/Code-JL/NFL-Point-Kicker-Data-Scraper" target="_blank" class="button">NFL-Point-Kicker-Data-Scraper</a>
-                    Python-based automated data collection and analysis tool for NFL game statistics.
-                </li>
-            </ul>
+                <ul>
+                    <li>
+                        <a href="../projects/inventory_manager/about.html" class="button">GUI Inventory Manager</a>
+                        Cross-platform inventory management system built with C++ and WxWidgets, supporting Linux, MacOS, and Windows platforms.
+                    </li>
+                    <li>
+                        <a href="../projects/ai_page_summary/about.html" class="button">AI Page Summary</a>
+                        Browser extension for AI-powered webpage summarization using Hugging Face's BART model.
+                    </li>
+                    <li>
+                        <a href="../projects/kicker_data_scraper/about.html" class="button">NFL-Point-Kicker-Data-Scraper</a>
+                        Python-based automated data collection and analysis tool for NFL game statistics.
+                    </li>
+                </ul>
             <h3>Gallery</h3>
             <div class="gallery">
                 <figure>
-                    <img src="../images/kick-tool.jpg" alt="Screenshot of NFL Point Kicker Data Scraper project" title="Kicker Tool">
-                    <figcaption>Kicker Tool</figcaption>
-                    <a href="../images/kick-tool.jpg" target="_blank" class="button">View Full Image</a>
+                    <img src="../projects/images/kicker_data_scraper0.JPG" alt="Screenshot of NFL Point Kicker Data Scraper interface" title="Kicker Data Scraper">
+                    <figcaption>Kicker Data Scraper</figcaption>
+                    <a href="../projects/images/kicker_data_scraper0.JPG" target="_blank" class="button">View Full Image</a>
                 </figure>
+
                 <figure>
-                    <img src="../images/portfolio-website.jpg" alt="Screenshot of Portfolio Website" title="Portfolio Website">
-                    <figcaption>Portfolio Website</figcaption>
-                    <a href="../images/portfolio-website.jpg" target="_blank" class="button">View Full Image</a>
+                    <img src="../projects/images/invetory_manager_new0.JPG" alt="Screenshot of GUI Inventory Manager application" title="Inventory Manager">
+                    <figcaption>Inventory Manager</figcaption>
+                    <a href="../projects/images/invetory_manager_new0.JPG" target="_blank" class="button">View Full Image</a>
+                </figure>
+
+                <figure>
+                    <img src="../projects/images/ai_page_summary0.JPG" alt="Screenshot of AI Page Summary extension" title="AI Page Summary">
+                    <figcaption>AI Page Summary</figcaption>
+                    <a href="../projects/images/ai_page_summary0.JPG" target="_blank" class="button">View Full Image</a>
+                </figure>
+                <figure>
+                    <img src="../projects/images/dna_sequence_analyzer0.JPG" alt="DNA Sequence Analysis Interface" title="DNA Sequence Analyzer">
+                    <figcaption>DNA Sequence Analyzer</figcaption>
+                    <a href="../projects/images/dna_sequence_analyzer0.JPG" target="_blank" class="button">View Full Image</a>
+                </figure>
+                <figure>
+                    <img src="../projects/images/kicker_predictor0.JPG" alt="Kicker Predictor Analysis Dashboard" title="Kicker Predictor">
+                    <figcaption>Kicker Predictor</figcaption>
+                    <a href="../projects/images/kicker_predictor0.JPG" target="_blank" class="button">View Full Image</a>
                 </figure>
+
                 <figure>
-                    <img src="../images/portfolio-website.jpg" alt="Screenshot of Portfolio Website" title="Portfolio Website">
+                    <img src="../projects/images/portfolio_website0.JPG" alt="Portfolio Website Homepage" title="Portfolio Website">
                     <figcaption>Portfolio Website</figcaption>
-                    <a href="../images/portfolio-website.jpg" target="_blank" class="button">View Full Image</a>
+                    <a href="../projects/images/portfolio_website0.JPG" target="_blank" class="button">View Full Image</a>
                 </figure>
-            </div>
+            </div>          
         </section>
 
         <section id="skills">

assets/projects.html

@@ -19,7 +19,7 @@ <h1 id="type">Projects</h1>
         <section class="project">
             <h2>GUI Inventory Manager</h2>
             <div class="image-container">
-                <img src="../images/inventory-gui.jpg" alt="Screenshot of the GUI Inventory Manager interface" class="project-image">
+                <img src="../projects/images/invetory_manager_new1.JPG" alt="Screenshot of the GUI Inventory Manager interface" class="project-image">
             </div>
             <p><strong>About:</strong> A cross-platform C++ inventory management application built with wxWidgets, supporting Linux, macOS, and Windows platforms.</p>
             <p><strong>Key Features:</strong></p>
@@ -37,7 +37,7 @@ <h2>GUI Inventory Manager</h2>
         <section class="project">
             <h2>AI Page Summary</h2>
             <div class="image-container">
-                <img src="../images/ai-summary.jpg" alt="Screenshot of the AI Page Summary Chrome extension" class="project-image">
+                <img src="../projects/images/ai_page_summary1.JPG" alt="Screenshot of the AI Page Summary Chrome extension" class="project-image">
             </div>
             <p><strong>About:</strong> A Chrome extension using Hugging Face's BART model for intelligent webpage summarization.</p>
             <p><strong>Key Features:</strong></p>
@@ -55,7 +55,7 @@ <h2>AI Page Summary</h2>
         <section class="project">
             <h2>NFL Kicker Predictor</h2>
             <div class="image-container">
-                <img src="../images/kick-tool.jpg" alt="Screenshot of the NFL Kicker Predictor interface" class="project-image">
+                <img src="../projects/images/kicker_predictor0.JPG" alt="Screenshot of the NFL Kicker Predictor interface" class="project-image">
             </div>
             <p><strong>About:</strong> A sophisticated Python application for real-time NFL kicker statistics and performance analysis.</p>
             <p><strong>Key Features:</strong></p>
@@ -73,7 +73,7 @@ <h2>NFL Kicker Predictor</h2>
         <section class="project">
             <h2>DNA Sequence Analyzer</h2>
             <div class="image-container">
-                <img src="../images/dna-analyzer.jpg" alt="Screenshot of the DNA Sequence Analyzer" class="project-image">
+                <img src="../projects/images/dna_sequence_analyzer0.JPG" alt="Screenshot of the DNA Sequence Analyzer" class="project-image">
             </div>
             <p><strong>About:</strong> A Python-based bioinformatics tool for comprehensive DNA sequence analysis and manipulation.</p>
             <p><strong>Key Features:</strong></p>
@@ -91,7 +91,7 @@ <h2>DNA Sequence Analyzer</h2>
         <section class="project">
             <h2>Inventory Manager - Command-line Version</h2>
             <div class="image-container">
-                <img src="../images/inventory-cli.jpg" alt="Screenshot of the Command-line Inventory Manager" class="project-image">
+                <img src="../projects/images/invetory_manager_old1.JPG" alt="Screenshot of the Command-line Inventory Manager" class="project-image">
             </div>
             <p><strong>About:</strong> A robust C++ inventory management system with an intuitive command-line interface and CSV file storage.</p>
             <p><strong>Key Features:</strong></p>
@@ -101,15 +101,14 @@ <h2>Inventory Manager - Command-line Version</h2>
                 <li>Case-insensitive Search</li>
                 <li>Customizable Export Options</li>
             </ul>
-            <a href="../projects/inventory_manager/about.html" target="_blank" class="button">View Project Details</a>
             <a href="https://github.com/Code-JL/Inventory-Manager" target="_blank" class="button">View on GitHub</a>
         </section>
 
         <!-- Portfolio Website -->
         <section class="project">
             <h2>Portfolio Website</h2>
             <div class="image-container">
-                <img src="../images/portfolio-website.jpg" alt="Screenshot of the Portfolio Website" class="project-image">
+                <img src="../projects/images/portfolio_website1.JPG" alt="Screenshot of the Portfolio Website" class="project-image">
             </div>
             <p><strong>About:</strong> A modern, interactive portfolio website featuring Matter.js physics engine animations and responsive design.</p>
             <p><strong>Key Features:</strong></p>
@@ -127,7 +126,7 @@ <h2>Portfolio Website</h2>
         <section class="project">
             <h2>NFL Point Kicker Data Scraper</h2>
             <div class="image-container">
-                <img src="../images/kick-tool.jpg" alt="Screenshot of the NFL Point Kicker Data Scraper" class="project-image">
+                <img src="../projects/images/kicker_data_scraper1.JPG" alt="Screenshot of the NFL Point Kicker Data Scraper" class="project-image">
             </div>
             <p><strong>About:</strong> A Python-based web scraping toolkit for extracting and processing NFL field goal kicking statistics.</p>
             <p><strong>Key Features:</strong></p>