From 5d5af74a9608658f138b392f771a956064cc7c9e Mon Sep 17 00:00:00 2001
From: OusmBlueNinja <89956790+OusmBlueNinja@users.noreply.github.com>
Date: Mon, 30 Dec 2024 23:23:27 -0600
Subject: [PATCH] YEAA COOL

---
 app/templates/index.html | 963 ++++++++++++++++++++++++++-------------
 1 file changed, 650 insertions(+), 313 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index fe97b2a..378c0df 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -4,215 +4,587 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Spencer Conlon | Portfolio</title>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Font Awesome -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
+    <!-- AOS CSS -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
+    <!-- Particles.js -->
+    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
+    <!-- Custom CSS -->
     <style>
-        body {
-            font-family: 'Roboto', sans-serif;
-            background-color: #f8f9fa;
-            color: #212529;
+        /* Reset and Base Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
+        body {
+            font-family: 'Poppins', sans-serif;
+            background:rgb(19, 19, 19);
+            color: #333;
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        /* Navigation */
+        nav {
+            background-color: rgba(52, 58, 64, 0.9);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            backdrop-filter: blur(10px);
+        }
+
+        nav .nav-link {
+            color: #fff !important;
+            font-weight: 500;
+            transition: color 0.3s;
+        }
+
+        nav .nav-link:hover {
+            color: #007bff !important;
+        }
+
+        /* Header */
         header {
-            background-color: #343a40;
-            color: #fff;
-            text-align: center;
-            padding: 60px 20px;
             position: relative;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            color: #fff;
             overflow: hidden;
         }
 
-        header h1 {
-            font-size: 3rem;
-            font-weight: bold;
-            margin: 0;
-            position: relative;
-            z-index: 10;
-        }
-
-        header p {
-            font-size: 1.2rem;
-            margin-top: 10px;
-            position: relative;
-            z-index: 10;
-        }
-
-        header .abstract-pattern {
+        #particles-js {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(135deg, rgba(0, 123, 255, 0.5), rgba(40, 167, 69, 0.5));
-            clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
             z-index: 1;
-            opacity: 0.8;
         }
 
-        header::after {
-            content: '';
-            position: absolute;
-            top: -50px;
-            left: -50px;
-            width: 300px;
-            height: 300px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 50%;
+        header .content {
+            position: relative;
             z-index: 2;
-            animation: float 6s ease-in-out infinite;
         }
 
-        header::before {
-            content: '';
-            position: absolute;
-            bottom: -50px;
-            right: -50px;
-            width: 400px;
-            height: 400px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 50%;
-            z-index: 2;
-            animation: float 8s ease-in-out infinite;
+        header h1 {
+            font-size: 4rem;
+            font-weight: 700;
+            margin-bottom: 20px;
+            animation: fadeInDown 1s ease-out;
         }
 
-        @keyframes float {
-            0%, 100% {
-                transform: translateY(0);
-            }
-            50% {
-                transform: translateY(15px);
-            }
+        header p {
+            font-size: 1.5rem;
+            font-weight: 300;
+            animation: fadeInUp 1s ease-out;
         }
 
-        nav {
-            background-color: #495057;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+        /* Keyframes for Header Animations */
+        @keyframes fadeInDown {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        nav a {
-            color: #fff;
-            font-weight: bold;
-            text-decoration: none;
-            margin: 0 15px;
-            padding: 10px 15px;
-            transition: background-color 0.3s;
-        }
-
-        nav a:hover {
-            background-color: #343a40;
-            border-radius: 5px;
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
+        /* Section Titles */
         .section-title {
             font-size: 2.5rem;
-            font-weight: bold;
+            font-weight: 700;
             margin-bottom: 40px;
             position: relative;
+            text-align: center;
+            color: #343a40;
         }
 
         .section-title::after {
-            content: "";
-            position: absolute;
-            bottom: -10px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 80px;
+            content: '';
+            width: 60px;
             height: 4px;
             background-color: #007bff;
+            display: block;
+            margin: 10px auto 0;
+            border-radius: 2px;
+        }
+
+        /* Projects */
+        #projects .project {
+            background: #fff;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            overflow: hidden;
+            transition: transform 0.3s, box-shadow 0.3s;
+            position: relative;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #projects .project:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 12px 20px rgba(0,0,0,0.2);
+        }
+
+        #projects .project-image {
+            height: 200px;
+            background-size: cover;
+            background-position: center;
+            transition: transform 0.3s;
+        }
+
+        #projects .project:hover .project-image {
+            transform: scale(1.05);
+        }
+
+        #projects .project-body {
+            padding: 20px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #projects .project-body h3 {
+            font-size: 1.5rem;
+            margin-bottom: 10px;
+            color: #007bff;
+        }
+
+        #projects .btn-primary {
+            background-color: #007bff;
+            border: none;
+            transition: background-color 0.3s;
+            margin-top: auto;
+        }
+
+        #projects .btn-primary:hover {
+            background-color: #0056b3;
+        }
+
+        /* Scrollable Project Details (Modal) */
+        .modal-body {
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+
+        /* Resume */
+        #resume .resume-content {
+            background: #fff;
+            padding: 40px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+
+        #resume .resume-section-title {
+            font-size: 1.75rem;
+            font-weight: 600;
+            color: #007bff;
+            display: flex;
+            align-items: center;
+            margin-top: 30px;
+        }
+
+        #resume .resume-section-title i {
+            margin-right: 10px;
+        }
+
+        #resume .resume-summary {
+            font-style: italic;
+            margin-bottom: 20px;
+            color: #555;
+        }
+
+        #resume .resume-job {
+            margin-bottom: 20px;
+        }
+
+        #resume .resume-dates {
+            font-size: 0.9rem;
+            color: #6c757d;
+        }
+
+        #resume .resume-list {
+            list-style-type: disc;
+            margin-left: 20px;
+            color: #555;
+        }
+
+        /* Contact */
+        #contact .contact-info a {
+            color: #343a40;
+            font-size: 1.5rem;
+            margin: 0 10px;
+            transition: color 0.3s, transform 0.3s;
+        }
+
+        #contact .contact-info a:hover {
+            color: #007bff;
+            transform: scale(1.2);
+        }
+
+        /* Footer */
+        footer {
+            background-color: #343a40;
+            color: #fff;
+            text-align: center;
+            padding: 20px 10px;
+        }
+
+        /* Media Queries */
+        @media (max-width: 768px) {
+            header {
+                padding: 80px 20px;
+            }
+
+            header h1 {
+                font-size: 2.5rem;
+            }
+
+            header p {
+                font-size: 1.2rem;
+            }
+
+            .section-title {
+                font-size: 2rem;
+            }
+
+            #projects .project {
+                margin-bottom: 30px;
+            }
+        }
+
+        /* Additional Abstract Elements */
+        .shape {
+            position: absolute;
+            border-radius: 50%;
+            opacity: 0.3;
+            animation: float 20s infinite;
+        }
+
+        .shape.one {
+            width: 200px;
+            height: 200px;
+            background: rgba(0, 123, 255, 0.3);
+            top: 10%;
+            left: 5%;
+            transform: translate(-50%, -50%);
+            animation-duration: 25s;
+        }
+
+        .shape.two {
+            width: 150px;
+            height: 150px;
+            background: rgba(40, 167, 69, 0.3);
+            bottom: 15%;
+            right: 10%;
+            transform: translate(50%, 50%);
+            animation-duration: 30s;
+        }
+
+        .shape.three {
+            width: 100px;
+            height: 100px;
+            background: rgba(255, 193, 7, 0.3);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            animation-duration: 35s;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(20px); }
         }
     </style>
 </head>
 <body>
-    <header>
-        <div class="abstract-pattern"></div>
-        <h1>Spencer Conlon</h1>
-        <p>Innovative Software Developer & Systems Administrator</p>
+    <!-- Header Section with Particles.js -->
+    <header id="about">
+        <div id="particles-js"></div>
+        <div class="shape one"></div>
+        <div class="shape two"></div>
+        <div class="shape three"></div>
+        <div class="content">
+            <h1 data-aos="fade-down">Spencer Conlon</h1>
+            <p data-aos="fade-up" data-aos-delay="300">Innovative Software Developer & Systems Administrator</p>
+        </div>
     </header>
 
-    
-    
-
-
-    
-
+    <!-- Projects Section -->
     <section id="projects" class="container my-5">
-        <h2 class="section-title text-center">Projects</h2>
-        <div class="row">
-            <div class="col-md-6 mb-4">
+        <h2 class="section-title text-light" data-aos="fade-up">Projects</h2>
+        <div class="row g-4">
+            <!-- Project 1 -->
+            <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="100">
                 <div class="project">
-                    <div class="project-image" style="background-image: url('images/game-engine.png');"></div>
-                    <h3>Custom 3D Game Engine</h3>
-                    <p><strong>Technologies:</strong> C++, Lua</p>
-                    <p>Developed a high-performance 3D game engine with a Lua scripting API for customizable and efficient game development.</p>
-                    <p><a href="https://dock-it.dev/Bit-By-Byte/Tesseract-Engine" target="_blank" class="btn btn-primary">View Source Code</a></p>
+                    <div class="project-image" style="background-image: url('images/game-engine.png');" aria-label="Custom 3D Game Engine"></div>
+                    <div class="project-body">
+                        <h3>Custom 3D Game Engine</h3>
+                        <p><strong>Technologies:</strong> C++, Lua</p>
+                        <p>Developed a high-performance 3D game engine with a Lua scripting API for customizable and efficient game development.</p>
+                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#projectModal1">
+                            Learn More
+                        </button>
+                    </div>
                 </div>
             </div>
-            <div class="col-md-6 mb-4">
+            <!-- Project 2 -->
+            <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="200">
                 <div class="project">
-                    <div class="project-image" style="background-image: url('images/cpu-emulator.png');"></div>
-
-                    <h3>C Compiler and ASM Assembler</h3>
-                    <p><strong>Technologies:</strong> C, ASM</p>
-                    <p>Created a custom compiler and assembler for low-level software development and optimization.</p>
-                    <p><a href="https://dock-it.dev/GigabiteStudios/Python-Cpu-Emulator" target="_blank" class="btn btn-primary">View Source Code</a></p>
+                    <div class="project-image" style="background-image: url('images/cpu-emulator.png');" aria-label="C Compiler and ASM Assembler"></div>
+                    <div class="project-body">
+                        <h3>C Compiler and ASM Assembler</h3>
+                        <p><strong>Technologies:</strong> C, ASM</p>
+                        <p>Created a custom compiler and assembler for low-level software development and optimization.</p>
+                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#projectModal2">
+                            Learn More
+                        </button>
+                    </div>
                 </div>
             </div>
-            <div class="col-md-6 mb-4">
+            <!-- Project 3 -->
+            <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="300">
                 <div class="project">
-                    <div class="project-image" style="background-image: url('images/net-scanner.png');"></div>
-                    <h3>Network Crawler</h3>
-                    <p><strong>Technologies:</strong> Python</p>
-                    <p>Built a tool to scan local networks, identify devices, gather details, and log in to analyze running software.</p>
-                    <p><a href="https://dock-it.dev/GigabiteStudios/network-crawler" target="_blank" class="btn btn-primary">View Source Code</a></p>
+                    <div class="project-image" style="background-image: url('images/net-scanner.png');" aria-label="Network Crawler"></div>
+                    <div class="project-body">
+                        <h3>Network Crawler</h3>
+                        <p><strong>Technologies:</strong> Python</p>
+                        <p>Built a tool to scan local networks, identify devices, gather details, and log in to analyze running software.</p>
+                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#projectModal3">
+                            Learn More
+                        </button>
+                    </div>
                 </div>
             </div>
-            <div class="col-md-6 mb-4">
+            <!-- Project 4 -->
+            <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="400">
                 <div class="project">
-                    <div class="project-image" style="background-image: url('images/wictra-website.png');"></div>
-                    <h3>WICTRA Website</h3>
-                    <p><strong>Technologies:</strong> HTML, CSS, JavaScript, PHP</p>
-                    <p>
-                        Developed a secure website featuring advanced bot protection, a user management system, forms, ticketing system,
-                        jobs board, and content library.
-                    </p>
-                    <p><a href="https://dock-it.dev/Wictra" target="_blank" class="btn btn-primary">View Source Code</a></p>
+                    <div class="project-image" style="background-image: url('images/wictra-website.png');" aria-label="WICTRA Website"></div>
+                    <div class="project-body">
+                        <h3>WICTRA Website</h3>
+                        <p><strong>Technologies:</strong> HTML, CSS, JavaScript, PHP</p>
+                        <p>Developed a secure website featuring advanced bot protection, a user management system, forms, ticketing system, jobs board, and content library.</p>
+                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#projectModal4">
+                            Learn More
+                        </button>
+                    </div>
                 </div>
             </div>
-            <div class="col-md-6 mb-4">
+            <!-- Project 5 -->
+            <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="500">
                 <div class="project">
-                    <div class="project-image" style="background-image: url('images/dll-extractor.png');"></div>
-                    <h3>Dynamic DLL Tool</h3>
-                    <p><strong>Technologies:</strong> C++</p>
-                    <p>Created a utility to identify and package required DLLs for an executable, simplifying application distribution.</p>
-                    <p><a href="/Bit-By-Byte/DLL-Extractor" target="_blank" class="btn btn-primary">View Source Code</a></p>
+                    <div class="project-image" style="background-image: url('images/dll-extractor.png');" aria-label="Dynamic DLL Tool"></div>
+                    <div class="project-body">
+                        <h3>Dynamic DLL Tool</h3>
+                        <p><strong>Technologies:</strong> C++</p>
+                        <p>Created a utility to identify and package required DLLs for an executable, simplifying application distribution.</p>
+                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#projectModal5">
+                            Learn More
+                        </button>
+                    </div>
                 </div>
             </div>
-            <div class="col-md-6 mb-4">
+            <!-- Project 6 -->
+            <div class="col-md-6 col-lg-4" data-aos="zoom-in" data-aos-delay="600">
                 <div class="project">
-                    <div class="project-image" style="background-image: url('images/gcml.png');"></div>
-                    <h3>GCML: C/C++ Utility Macros</h3>
-                    <p><strong>Technologies:</strong> C, C++</p>
-                    <p>A comprehensive library of macros for debugging, logging, memory management, and bit manipulation, enhancing workflow efficiency.</p>
-                    <p><a href="https://dock-it.dev/GigabiteStudios/gcml" target="_blank" class="btn btn-primary">View Source Code</a></p>
+                    <div class="project-image" style="background-image: url('images/gcml.png');" aria-label="GCML: C/C++ Utility Macros"></div>
+                    <div class="project-body">
+                        <h3>GCML: C/C++ Utility Macros</h3>
+                        <p><strong>Technologies:</strong> C, C++</p>
+                        <p>A comprehensive library of macros for debugging, logging, memory management, and bit manipulation, enhancing workflow efficiency.</p>
+                        <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#projectModal6">
+                            Learn More
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <section id="resume" class="container my-5">
-        <h2 class="section-title text-center">Resume</h2>
+    <!-- Project Modals -->
+    <!-- Project Modal 1 -->
+    <div class="modal fade" id="projectModal1" tabindex="-1" aria-labelledby="projectModalLabel1" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="projectModalLabel1">Custom 3D Game Engine</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <img src="images/game-engine.png" alt="Custom 3D Game Engine" class="img-fluid mb-3">
+            <p><strong>Technologies:</strong> C++, Lua</p>
+            <p>Developed a high-performance 3D game engine that supports real-time rendering, physics simulation, and an integrated Lua scripting API. This engine allows for customizable and efficient game development, providing tools for asset management, scene editing, and debugging. Key features include dynamic lighting, advanced shader support, and cross-platform compatibility.</p>
+            <p><strong>Highlights:</strong></p>
+            <ul>
+                <li>Implemented a modular architecture for easy extensibility.</li>
+                <li>Optimized rendering pipeline for enhanced performance.</li>
+                <li>Integrated Lua scripting for flexible game logic customization.</li>
+                <li>Supported multiple platforms including Windows, macOS, and Linux.</li>
+            </ul>
+            <a href="https://dock-it.dev/Bit-By-Byte/Tesseract-Engine" target="_blank" class="btn btn-primary">View Source Code</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Project Modal 2 -->
+    <div class="modal fade" id="projectModal2" tabindex="-1" aria-labelledby="projectModalLabel2" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="projectModalLabel2">C Compiler and ASM Assembler</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <img src="images/cpu-emulator.png" alt="C Compiler and ASM Assembler" class="img-fluid mb-3">
+            <p><strong>Technologies:</strong> C, ASM</p>
+            <p>Designed and implemented a custom C compiler and ASM assembler tailored for low-level software development. This toolchain optimizes code for performance and resource management, enabling developers to write efficient system-level applications.</p>
+            <p><strong>Highlights:</strong></p>
+            <ul>
+                <li>Implemented lexical analysis, parsing, and code generation modules.</li>
+                <li>Optimized assembly output for various CPU architectures.</li>
+                <li>Supported advanced features like inline assembly and macro definitions.</li>
+                <li>Ensured compatibility with existing development workflows and tools.</li>
+            </ul>
+            <a href="https://dock-it.dev/GigabiteStudios/Python-Cpu-Emulator" target="_blank" class="btn btn-primary">View Source Code</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Project Modal 3 -->
+    <div class="modal fade" id="projectModal3" tabindex="-1" aria-labelledby="projectModalLabel3" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="projectModalLabel3">Network Crawler</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <img src="images/net-scanner.png" alt="Network Crawler" class="img-fluid mb-3">
+            <p><strong>Technologies:</strong> Python</p>
+            <p>Developed a comprehensive network crawler designed to scan local networks, identify connected devices, and gather detailed information about each device. This tool aids in network management, security analysis, and software auditing.</p>
+            <p><strong>Highlights:</strong></p>
+            <ul>
+                <li>Implemented device discovery using ARP and ICMP protocols.</li>
+                <li>Collected device-specific information such as IP, MAC addresses, and open ports.</li>
+                <li>Integrated login capabilities to analyze running software and services.</li>
+                <li>Provided detailed logs and reports for network analysis and security assessments.</li>
+            </ul>
+            <a href="https://dock-it.dev/GigabiteStudios/network-crawler" target="_blank" class="btn btn-primary">View Source Code</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Project Modal 4 -->
+    <div class="modal fade" id="projectModal4" tabindex="-1" aria-labelledby="projectModalLabel4" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="projectModalLabel4">WICTRA Website</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <img src="images/wictra-website.png" alt="WICTRA Website" class="img-fluid mb-3">
+            <p><strong>Technologies:</strong> HTML, CSS, JavaScript, PHP</p>
+            <p>Developed a secure and feature-rich website for the Wisconsin Cyber Threat Response Alliance (WICTRA). The site includes advanced bot protection mechanisms, user management, dynamic forms, a ticketing system, jobs board, and a content library.</p>
+            <p><strong>Highlights:</strong></p>
+            <ul>
+                <li>Implemented CAPTCHA, 2FA, and JavaScript challenges for enhanced security.</li>
+                <li>Developed a robust user management system with role-based access control.</li>
+                <li>Designed and integrated dynamic forms and a ticketing system for efficient issue tracking.</li>
+                <li>Created a jobs board and content library to manage and display organizational resources.</li>
+            </ul>
+            <a href="https://dock-it.dev/Wictra" target="_blank" class="btn btn-primary">View Source Code</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Project Modal 5 -->
+    <div class="modal fade" id="projectModal5" tabindex="-1" aria-labelledby="projectModalLabel5" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="projectModalLabel5">Dynamic DLL Tool</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <img src="images/dll-extractor.png" alt="Dynamic DLL Tool" class="img-fluid mb-3">
+            <p><strong>Technologies:</strong> C++</p>
+            <p>Created a utility tool designed to identify and package the necessary DLLs required by an executable. This simplifies the distribution process by ensuring that all dependencies are included, reducing runtime errors and improving application stability.</p>
+            <p><strong>Highlights:</strong></p>
+            <ul>
+                <li>Implemented dependency scanning to detect required DLLs.</li>
+                <li>Automated the packaging process for efficient distribution.</li>
+                <li>Ensured compatibility across different Windows environments.</li>
+                <li>Provided detailed logs and reports for debugging and verification.</li>
+            </ul>
+            <a href="/Bit-By-Byte/DLL-Extractor" target="_blank" class="btn btn-primary">View Source Code</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Project Modal 6 -->
+    <div class="modal fade" id="projectModal6" tabindex="-1" aria-labelledby="projectModalLabel6" aria-hidden="true">
+      <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="projectModalLabel6">GCML: C/C++ Utility Macros</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <img src="images/gcml.png" alt="GCML: C/C++ Utility Macros" class="img-fluid mb-3">
+            <p><strong>Technologies:</strong> C, C++</p>
+            <p>Developed GCML, a comprehensive library of macros designed to streamline development workflows in C and C++. This library includes macros for debugging, logging, memory management, and bit manipulation, significantly enhancing coding efficiency and reducing boilerplate code.</p>
+            <p><strong>Highlights:</strong></p>
+            <ul>
+                <li>Created macros for easy logging and debugging to accelerate development cycles.</li>
+                <li>Implemented memory management macros to prevent leaks and optimize usage.</li>
+                <li>Developed bit manipulation macros for efficient data processing.</li>
+                <li>Ensured compatibility and ease of integration with existing projects.</li>
+            </ul>
+            <a href="https://dock-it.dev/GigabiteStudios/gcml" target="_blank" class="btn btn-primary">View Source Code</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Resume Section -->
+    <section id="resume" class="container my-5" data-aos="fade-up">
+        <h2 class="section-title text-light">Resume</h2>
         <div class="resume-content">
             <div class="text-center mb-4">
                 <h3>Spencer Conlon</h3>
                 <p>Ripon, WI 54971 | <a href="tel:+19208916655">+1 (920) 891-6655</a> | <a href="mailto:spencer.conlon3@gmail.com">spencer.conlon3@gmail.com</a></p>
             </div>
-    
+
             <h4 class="resume-section-title">
                 <i class="fas fa-user"></i> Summary
             </h4>
             <p class="resume-summary">Innovative software developer and systems administrator with expertise in creating advanced tools, systems, and high-performance applications. Notable projects include a custom 3D game engine with a Lua scripting API, a C compiler, an ASM assembler, and a CPU emulator. Adept at building secure, scalable web solutions, designing efficient development tools, and solving complex technical challenges. Committed to delivering fast, optimized solutions and streamlining workflows.</p>
-    
+
             <h4 class="resume-section-title">
                 <i class="fas fa-briefcase"></i> Work Experience
             </h4>
@@ -234,12 +606,12 @@
                     </ul>
                 </div>
             </div>
-    
+
             <h4 class="resume-section-title">
                 <i class="fas fa-graduation-cap"></i> Education
             </h4>
             <p>Junior High School Education | Ripon High School – Ripon, WI<br><span class="resume-dates">September 2022 – Present</span></p>
-    
+
             <h4 class="resume-section-title">
                 <i class="fas fa-project-diagram"></i> Key Projects
             </h4>
@@ -250,7 +622,7 @@
                 <li><strong>Dynamic DLL Tool:</strong> Utility to identify and package required DLLs for distribution.</li>
                 <li><strong>Network Crawler:</strong> Tool for scanning local networks and analyzing running software.</li>
             </ul>
-    
+
             <h4 class="resume-section-title">
                 <i class="fas fa-tools"></i> Skills
             </h4>
@@ -260,196 +632,161 @@
                 <li>Cybersecurity Tools and Protocols, Git, MySQL</li>
                 <li>Embedded Software (2 years), Leadership, Multi-OS Deployment Expertise</li>
             </ul>
-    
+
             <h4 class="resume-section-title">
                 <i class="fas fa-trophy"></i> Awards
             </h4>
             <p>BSA Arrow of Light | <span class="resume-dates">2019</span></p>
-    
+
             <h4 class="resume-section-title">
                 <i class="fas fa-certificate"></i> Certifications and Licenses
             </h4>
             <p>Driver’s License</p>
         </div>
-    
-        <style>
-            @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
-    
-            .resume-content {
-                background: #f8f9fa;
-                padding: 30px;
-                border-radius: 16px;
-                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-                font-size: 1rem;
-                line-height: 1.8;
-                color: #343a40;
-            }
-    
-            .resume-section-title {
-                margin-top: 30px;
-                font-size: 1.5rem;
-                color: #007bff;
-                display: flex;
-                align-items: center;
-            }
-    
-            .resume-section-title i {
-                margin-right: 10px;
-            }
-    
-            .resume-summary {
-                margin-bottom: 20px;
-                font-style: italic;
-            }
-    
-            .resume-work {
-                margin-top: 10px;
-            }
-    
-            .resume-job {
-                margin-bottom: 20px;
-            }
-    
-            .resume-dates {
-                display: block;
-                font-size: 0.9rem;
-                color: #6c757d;
-            }
-    
-            .resume-list {
-                margin-top: 10px;
-                padding-left: 20px;
-                list-style-type: disc;
-            }
-        </style>
     </section>
-    
-    
-    
-    
-    <section id="contact" class="container text-center my-5">
+
+    <!-- Contact Section -->
+    <section id="contact" class="container text-center my-5" data-aos="fade-up">
         <h2 class="section-title">Contact</h2>
         <p><strong>Email:</strong> <a href="mailto:spencer.conlon3@gmail.com">spencer.conlon3@gmail.com</a></p>
-        <p><strong>Phone:</strong> +1 (920) 891-6655</p>
+        <p><strong>Phone:</strong> <a href="tel:+19208916655">+1 (920) 891-6655</a></p>
         <p><strong>Location:</strong> Ripon, WI</p>
-        <div class="contact-info">
-            <a href="https://dock-it.dev/GigabiteStudios" class="btn btn-outline-dark mx-2">Git</a>
-            <a href="https://www.linkedin.com/in/spencer-conlon-059293344/" class="btn btn-outline-dark mx-2">LinkedIn</a>
-            <a href="#" class="btn btn-outline-dark mx-2">Resume</a>
+        <div class="contact-info mt-4">
+            <a href="https://dock-it.dev/GigabiteStudios" target="_blank" aria-label="GitHub" class="btn btn-outline-dark"><i class="fab fa-github"></i></a>
+            <a href="https://www.linkedin.com/in/spencer-conlon-059293344/" target="_blank" aria-label="LinkedIn" class="btn btn-outline-dark"><i class="fab fa-linkedin-in"></i></a>
+            <a href="#" target="_blank" aria-label="Resume" class="btn btn-outline-dark"><i class="fas fa-file-alt"></i></a>
         </div>
     </section>
-    
-    <style>
-        body {
-            font-family: 'Poppins', sans-serif;
-            background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
-            color: #343a40;
+
+    <!-- Footer -->
+    <footer>
+        <p>&copy; 2024 Spencer Conlon. All rights reserved.</p>
+    </footer>
+
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- AOS JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
+    <!-- Initialize AOS -->
+    <script>
+        AOS.init({
+            duration: 1000,
+            once: true,
+        });
+    </script>
+    <!-- Initialize Particles.js -->
+    <script>
+        particlesJS("particles-js",
+        {
+            "particles": {
+                "number": {
+                    "value": 80,
+                    "density": {
+                        "enable": true,
+                        "value_area": 800
+                    }
+                },
+                "color": {
+                    "value": "#ffffff"
+                },
+                "shape": {
+                    "type": "circle",
+                    "stroke": {
+                        "width": 0,
+                        "color": "#000000"
+                    },
+                    "polygon": {
+                        "nb_sides": 5
+                    },
+                    "image": {
+                        "src": "img/github.svg",
+                        "width": 100,
+                        "height": 100
+                    }
+                },
+                "opacity": {
+                    "value": 0.5,
+                    "random": false,
+                    "anim": {
+                        "enable": false,
+                        "speed": 1,
+                        "opacity_min": 0.1,
+                        "sync": false
+                    }
+                },
+                "size": {
+                    "value": 3,
+                    "random": true,
+                    "anim": {
+                        "enable": false,
+                        "speed": 40,
+                        "size_min": 0.1,
+                        "sync": false
+                    }
+                },
+                "line_linked": {
+                    "enable": true,
+                    "distance": 150,
+                    "color": "#ffffff",
+                    "opacity": 0.4,
+                    "width": 1
+                },
+                "move": {
+                    "enable": true,
+                    "speed": 6,
+                    "direction": "none",
+                    "random": false,
+                    "straight": false,
+                    "out_mode": "out",
+                    "attract": {
+                        "enable": false,
+                        "rotateX": 600,
+                        "rotateY": 1200
+                    }
+                }
+            },
+            "interactivity": {
+                "detect_on": "canvas",
+                "events": {
+                    "onhover": {
+                        "enable": true,
+                        "mode": "repulse"
+                    },
+                    "onclick": {
+                        "enable": true,
+                        "mode": "push"
+                    },
+                    "resize": true
+                },
+                "modes": {
+                    "grab": {
+                        "distance": 400,
+                        "line_linked": {
+                            "opacity": 1
+                        }
+                    },
+                    "bubble": {
+                        "distance": 400,
+                        "size": 40,
+                        "duration": 2,
+                        "opacity": 8,
+                        "speed": 3
+                    },
+                    "repulse": {
+                        "distance": 200,
+                        "duration": 0.4
+                    },
+                    "push": {
+                        "particles_nb": 4
+                    },
+                    "remove": {
+                        "particles_nb": 2
+                    }
+                }
+            },
+            "retina_detect": true
         }
-    
-        .section-title {
-            font-size: 3rem;
-            font-weight: 800;
-            margin-bottom: 3rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            position: relative;
-        }
-    
-        .section-title::after {
-            content: '';
-            width: 60px;
-            height: 4px;
-            background-color: #007bff;
-            display: block;
-            margin: 10px auto 0;
-        }
-    
-        .project {
-            background: rgba(255, 255, 255, 0.85);
-            border-radius: 16px;
-            padding: 20px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-            transition: transform 0.5s, box-shadow 0.5s;
-            position: relative;
-            overflow: hidden;
-        }
-    
-        .project:hover {
-            transform: translateY(-15px);
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
-        }
-    
-        .project-image {
-            background-size: cover;
-            background-position: center;
-            height: 250px;
-            border-radius: 12px;
-            margin-bottom: 20px;
-            transition: transform 0.3s;
-        }
-    
-        .project:hover .project-image {
-            transform: scale(1.1);
-        }
-    
-        .project-placeholder {
-            height: 250px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: 2px dashed #ccc;
-            border-radius: 12px;
-            margin-bottom: 20px;
-            font-style: italic;
-            color: #999;
-            background-color: #f8f9fa;
-        }
-    
-        .btn {
-            padding: 12px 25px;
-            border-radius: 30px;
-            font-weight: 600;
-            text-transform: uppercase;
-            transition: background-color 0.4s, transform 0.3s;
-        }
-    
-        .btn-primary {
-            background-color: #007bff;
-            color: #fff;
-            border: none;
-        }
-    
-        .btn-primary:hover {
-            background-color: #0056b3;
-            transform: translateY(-3px);
-        }
-    
-        .btn-outline-dark {
-            color: #343a40;
-            border: 2px solid #343a40;
-        }
-    
-        .btn-outline-dark:hover {
-            background-color: #343a40;
-            color: #fff;
-        }
-    
-        .contact-info a {
-            display: inline-block;
-            margin: 0 10px;
-            font-size: 1.2rem;
-            transition: transform 0.3s;
-        }
-    
-        .contact-info a:hover {
-            transform: scale(1.1);
-        }
-    </style>
-        
-    <nav class="text-center py-3">
-        <a href="#about">About Me</a>
-        <a href="#projects">Projects</a>
-        <a href="#contact">Contact</a>
-    </nav>
+        );
+    </script>
 </body>
 </html>