diff --git a/src/components/ProjectList.astro b/src/components/ProjectList.astro
index 8a8806b8..a7dc98bf 100644
--- a/src/components/ProjectList.astro
+++ b/src/components/ProjectList.astro
@@ -26,6 +26,10 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))]
+
+ No projects match your search.
+
+
{projectList.map((item) => (
project.tags || []))]
const searchInput = document.getElementById('search');
const tagSelector = document.getElementById('tag-selector');
const projectListContainer = document.getElementById('project-list');
+ const noResultsMessage = document.getElementById('no-project-results');
+
+ const initialSearchValue = new URLSearchParams(window.location.search).get('q')?.trim() || '';
+ if (initialSearchValue) {
+ searchValue = initialSearchValue;
+ searchInput.value = initialSearchValue;
+ }
// Filter projects function
function filterProjects() {
@@ -92,6 +103,7 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))]
}
filteredProjects = filtered;
+ noResultsMessage.hidden = filteredProjects.length > 0;
// Hide/show cards instead of re-rendering
projectList.forEach(project => {
@@ -185,6 +197,13 @@ const allTags = [...new Set(projectList.flatMap(project => project.tags || []))]
break-inside: avoid;
}
+ .no-project-results {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 1rem;
+ margin: 0 auto 2rem;
+ padding: 0 1rem;
+ }
+
@media (max-width: 768px) {
#container {