Updated other routes

Updated projects, aboutme, research, and skill pages.

Also added icons, and subpages.

package.json

@@ -47,6 +47,8 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/dom": "1.6.12",
+    "@fortawesome/fontawesome-free": "^6.7.1",
+    "devicon": "^2.16.0",
     "highlight.js": "11.10.0"
   }
 }

src/routes/+layout.svelte

@@ -17,6 +17,10 @@
 	import { storeHighlightJs } from '@skeletonlabs/skeleton';
 	import xml from 'highlight.js/lib/languages/xml'; // for HTML
 	import css from 'highlight.js/lib/languages/css';
+	import '@fortawesome/fontawesome-free/css/all.min.css';
+	
+
+
 	import javascript from 'highlight.js/lib/languages/javascript';
 	import typescript from 'highlight.js/lib/languages/typescript';
 
@@ -35,14 +39,14 @@
 	import { page } from '$app/stores';
 
 	const drawerSettings: DrawerSettings = {
-	id: 'example-3',
-	// Provide your property overrides:
-	bgDrawer: 'bg-slate-800 text-white',
-	// bgBackdrop: 'bg-gradient-to-tr from-blue-500/50 via-purple-500/50 to-indigo-500/50',
-	width: 'w-[280px] md:w-[480px]',
-	padding: 'p-4',
-	rounded: 'rounded-xl',
-};
+		id: 'example-3',
+		// Provide your property overrides:
+		bgDrawer: 'bg-slate-800 text-white',
+		// bgBackdrop: 'bg-gradient-to-tr from-blue-500/50 via-purple-500/50 to-indigo-500/50',
+		width: 'w-[280px] md:w-[480px]',
+		padding: 'p-4',
+		rounded: 'rounded-xl',
+	};
 
 	function drawerOpen(): void {
 		drawerStore.open(drawerSettings);
@@ -77,6 +81,7 @@
 	}
   </style>
 
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/devicon.min.css" rel="stylesheet">
 
 <Drawer>
 	<hr />

src/routes/+page.svelte

@@ -2,7 +2,7 @@
 	class="relative min-h-screen bg-gradient-to-tr from-blue-500/50 via-purple-500/50 to-indigo-500/50"
 >
 	<div class="container mx-auto flex justify-center items-center min-h-screen">
-		<div class="space-y-10 text-center flex flex-col items-center">
+		<div class="space-y-10 text-center flex flex-col items-center py-10">
 			<h2 class="h2 max-w-lg mx-auto">Hi, my name is David! 👋</h2>
 
 			<!-- Animated Logo -->
@@ -46,13 +46,6 @@
 </div>
 
 <style lang="postcss">
-	figure {
-		@apply flex relative flex-col;
-	}
-	figure svg,
-	.img-bg {
-		@apply w-64 h-64 md:w-80 md:h-80;
-	}
 	.img-bg {
 		@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
 		animation:
@@ -78,14 +71,4 @@
 			transform: scale(1.5);
 		}
 	}
-
-	.hide-on-small {
-		display: none;
-	}
-
-	@media (min-width: 768px) {
-		.hide-on-small {
-			display: flex;
-		}
-	}
 </style>

src/routes/aboutme/+page.svelte

@@ -2,10 +2,8 @@
 	class="relative min-h-screen bg-gradient-to-tr from-blue-500/50 via-purple-500/50 to-indigo-500/50"
 >
 	<div class="container mx-auto flex justify-center items-center min-h-screen">
-		<div class="space-y-10 text-center flex flex-col items-center">
-
-
-			<h2 class="h2">About Me</h2>
+		<div class="space-y-10 text-center flex flex-col items-center py-10">
+			<h2 class="h2 max-w-lg mx-auto">About Me 👋</h2>
 
 			<!-- Photo -->
 			<!-- <div class="w-32 h-32 rounded-full overflow-hidden shadow-lg">
@@ -19,6 +17,9 @@
 				technologies and contributing to open-source projects.
 			</p>
 
+			<hr class="w-1/2 my-10" />
+
+
 			<!-- Mission -->
 			<h3 class="font-semibold text-lg">My Mission</h3>
 			<p class="text-sm max-w-md mx-auto">
@@ -88,3 +89,33 @@
 		</div>
 	</div>
 </div>
+
+
+
+<style lang="postcss">
+	.img-bg {
+		@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
+		animation:
+			pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
+			glow 5s linear infinite;
+	}
+	@keyframes glow {
+		0% {
+			@apply bg-primary-400/50;
+		}
+		33% {
+			@apply bg-secondary-400/50;
+		}
+		66% {
+			@apply bg-tertiary-400/50;
+		}
+		100% {
+			@apply bg-primary-400/50;
+		}
+	}
+	@keyframes pulse {
+		50% {
+			transform: scale(1.5);
+		}
+	}
+</style>

src/routes/projects/+page.svelte

@@ -1,21 +1,109 @@
-<div class="container h-full mx-auto flex justify-center items-center">
-	<div class="space-y-10 text-center flex flex-col items-center">
-		<h2 class="h2">Projects</h2>
-		<!-- Animated Logo -->
-
-
-
-		<!-- / -->
-		<!-- <div class="flex justify-center space-x-2">
-			<a
-				class="btn variant-filled"
-				href="https://david-h-resume.tiiny.site"
-				target="_blank"
-				rel="noreferrer"
-			>
-				See my Resume
-			</a>
-		</div> -->
-
-	</div>
+<div class="container mx-auto px-4 py-12">
+    <!-- Header -->
+    <h2 class="h2 text-center">Projects</h2>
+    <p class="text-center text-lg max-w-lg mx-auto">
+        A showcase of my contributions to cutting-edge applications in AI, NLP, and software development.
+    </p>
+
+    <!-- Projects Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-10">
+        <!-- Project 1: Quimby -->
+        <a href="/projects/quimby" class="block" aria-label="Visit Quimby Project Page" role="link">
+            <div class="bg-gray-800 bg-opacity-80 shadow-lg rounded-lg p-6 text-center hover:bg-gray-700 hover:shadow-xl transition-all duration-300">
+                <h3 class="font-semibold text-lg">Quimby: Legislative NLP</h3>
+                <p class="text-sm mt-2">
+                    Developed NLP pipelines for analyzing legislative data to identify contradictions in legislators' statements and policies.
+                </p>
+                <ul class="list-disc list-inside text-left mt-4">
+                    <li><strong>Tools:</strong> Python, SpaCy, LangChain, MySQL</li>
+                    <li><strong>Impact:</strong> Supported public transparency and accountability in government.</li>
+                </ul>
+            </div>
+        </a>
+
+        <!-- Project 2: Ambiguity Detection -->
+        <a href="/projects/ambiguity-detection" class="block" aria-label="Visit Ambiguity Detection Project Page" role="link">
+            <div class="bg-gray-800 bg-opacity-80 shadow-lg rounded-lg p-6 text-center hover:bg-gray-700 hover:shadow-xl transition-all duration-300">
+                <h3 class="font-semibold text-lg">Ambiguity Detection in NLP</h3>
+                <p class="text-sm mt-2">
+                    Created a model for detecting ambiguous language in legislative texts, improving interpretability for stakeholders.
+                </p>
+                <ul class="list-disc list-inside text-left mt-4">
+                    <li><strong>Tools:</strong> Python, NLTK, Transformer Models</li>
+                    <li><strong>Impact:</strong> Enabled accurate analysis of complex, nuanced language in legal contexts.</li>
+                </ul>
+            </div>
+        </a>
+
+        <!-- Project 3: DisclosureDisco Pipeline -->
+        <a href="/projects/disclosure-disco" class="block" aria-label="Visit DisclosureDisco Project Page" role="link">
+            <div class="bg-gray-800 bg-opacity-80 shadow-lg rounded-lg p-6 text-center hover:bg-gray-700 hover:shadow-xl transition-all duration-300">
+                <h3 class="font-semibold text-lg">DisclosureDisco Pipeline</h3>
+                <p class="text-sm mt-2">
+                    Designed and developed a data pipeline for retrieving public records, parsing information, and uploading to centralized databases.
+                </p>
+                <ul class="list-disc list-inside text-left mt-4">
+                    <li><strong>Tools:</strong> MySQL, REST API, PyPDF, Selenium</li>
+                    <li><strong>Impact:</strong> Promoted government transparency through data accessibility.</li>
+                </ul>
+            </div>
+        </a>
+
+        <!-- Project 4: ISRID3 Ontology -->
+        <a href="projects/isrid" target="_blank" rel="noreferrer" class="block" aria-label="Visit ISRID3 Ontology Website" role="link">
+            <div class="bg-gray-800 bg-opacity-80 shadow-lg rounded-lg p-6 text-center hover:bg-gray-700 hover:shadow-xl transition-all duration-300">
+                <h3 class="font-semibold text-lg">ISRID3 Ontology</h3>
+                <p class="text-sm mt-2">
+                    Cleaned datasets and collaborated with domain experts to create an ontology that aids search-and-rescue efforts.
+                </p>
+                <ul class="list-disc list-inside text-left mt-4">
+                    <li><strong>Tools:</strong> PoolParty, Protégé</li>
+                    <li><strong>Impact:</strong> Enhanced semantic search capabilities for locating missing persons.</li>
+                </ul>
+            </div>
+        </a>
+
+        <!-- Project 5: TastEmotion -->
+        <a href="/projects/tastemotion" class="block" aria-label="Visit TastEmotion Project Page" role="link">
+            <div class="bg-gray-800 bg-opacity-80 shadow-lg rounded-lg p-6 text-center hover:bg-gray-700 hover:shadow-xl transition-all duration-300">
+                <h3 class="font-semibold text-lg">TastEmotion</h3>
+                <p class="text-sm mt-2">
+                    Conducted experiments to collect EEG data on perceived emotions from the five basic tastes.
+                </p>
+                <ul class="list-disc list-inside text-left mt-4">
+                    <li><strong>Tools:</strong> Emotiv Headset</li>
+                    <li><strong>Impact:</strong> Explored affective computing for novel interdisciplinary applications.</li>
+                </ul>
+            </div>
+        </a>
+
+        <!-- Project 6: The Bananalyst -->
+        <a href="/projects/bananalyst" class="block" aria-label="Visit The Bananalyst Project Page" role="link">
+            <div class="bg-gray-800 bg-opacity-80 shadow-lg rounded-lg p-6 text-center hover:bg-gray-700 hover:shadow-xl transition-all duration-300">
+                <h3 class="font-semibold text-lg">The Bananalyst</h3>
+                <p class="text-sm mt-2">
+                    Developed a fully featured movie review website with user-generated data, recommendations, and voting functionality.
+                </p>
+                <ul class="list-disc list-inside text-left mt-4">
+                    <li><strong>Tools:</strong> ReactJS, NodeJS, MongoDB, REST APIs</li>
+                    <li><strong>Impact:</strong> Enhanced user experience through dynamic features and robust data integration.</li>
+                </ul>
+            </div>
+        </a>
+
+        <!-- Project 7: This Website -->
+        <a href="/projects/my-website" class="block" aria-label="Visit About This Site Project Page" role="link">
+            <div class="bg-gray-800 bg-opacity-80 shadow-lg rounded-lg p-6 text-center hover:bg-gray-700 hover:shadow-xl transition-all duration-300">
+                <h3 class="font-semibold text-lg">This Website</h3>
+                <p class="text-sm mt-2">
+                    A personal portfolio showcasing my skills, projects, and research, built with modern web technologies.
+                </p>
+                <ul class="list-disc list-inside text-left mt-4">
+                    <li><strong>Tools:</strong> SvelteKit, TailwindCSS, Skeleton UI</li>
+                    <li><strong>Impact:</strong> Demonstrates technical expertise and serves as a hub for my work.</li>
+                </ul>
+            </div>
+        </a>
+
+    </div>
 </div>

src/routes/projects/isrid/+page.svelte

@@ -0,0 +1,50 @@
+<div class="container mx-auto px-4 py-12">
+    <!-- Header -->
+    <h2 class="h2 text-center">ISRID3 Ontology</h2>
+    <p class="text-center text-lg max-w-lg mx-auto">
+        Leveraging AI and machine learning to enhance search-and-rescue (S&R) operations by improving data integration and prioritization.
+    </p>
+
+    <!-- Project Summary -->
+    <div class="mt-10">
+        <h3 class="font-semibold text-lg">Abstract</h3>
+        <p class="text-sm mt-2">
+            Building on the work initially conducted during the SURP 2021 project and extended through 2021–2023, this initiative focuses on leveraging computer technology to enhance the search-and-rescue (S&R) process for locating missing persons. Traditionally, paper-based S&R forms are manually completed, collected, and reviewed, introducing inefficiencies and potential errors. This project digitized approximately 30 S&R forms, including the complex Lost Person Questionnaire, and developed infrastructure to collect, process, and analyze this data.
+        </p>
+        <p class="text-sm mt-4">
+            By integrating Artificial Intelligence and Machine Learning, this project aims to combine ongoing search efforts, historical mission data with similar profiles, and general knowledge like terrain and travel routes. The goal is to identify high-priority areas for S&R missions, enhancing the effectiveness of search coordinators and reducing reliance on manual processes.
+        </p>
+    </div>
+
+    <!-- Tools and Contributions -->
+    <div class="mt-10">
+        <h3 class="font-semibold text-lg">Tools & Technologies</h3>
+        <ul class="list-disc list-inside text-sm mt-4">
+            <li><strong>Semantic Tools:</strong> PoolParty Semantic Suite, Protégé</li>
+            <li><strong>Data Integration:</strong> Digitized S&R forms and centralized data processing infrastructure</li>
+            <li><strong>AI/ML Techniques:</strong> Pattern recognition, profile matching, terrain modeling</li>
+        </ul>
+    </div>
+
+    <!-- Impact Section -->
+    <div class="mt-10">
+        <h3 class="font-semibold text-lg">Impact</h3>
+        <p class="text-sm mt-2">
+            The ISRID3 Ontology project enhances search-and-rescue efforts by addressing inefficiencies in the manual processing of S&R data. Through AI/ML integration, this project:
+        </p>
+        <ul class="list-disc list-inside text-sm mt-4">
+            <li>Reduced time required for data collection and analysis</li>
+            <li>Improved accuracy and prioritization of search areas</li>
+            <li>Minimized human error and loss of critical information</li>
+            <li>Enabled scalable integration with historical and ongoing mission data</li>
+        </ul>
+    </div>
+
+    <!-- Links Section -->
+    <div class="mt-10">
+        <h3 class="font-semibold text-lg">Learn More</h3>
+        <p class="text-sm mt-2">
+            Explore more about this project in the <a href="https://digitalcommons.calpoly.edu/ceng_surp/26/" target="_blank" rel="noreferrer" class="text-blue-400 underline">California Polytechnic State University SURP Repository</a>.
+        </p>
+    </div>
+</div>