Create sections for software, hardware, algorithms

src/components/articles/overview.vue

@@ -0,0 +1,64 @@
+<template>
+	<div>
+		<h1>{{ props.title }}</h1>
+
+		<div class="row pt-5" v-for="article in props.articles" :key="article.path">
+			<div class="col-5 col-lg-4 col-xl-3">
+				<NuxtLink v-if="article.img" :to="article.path">
+					<img class="img-fluid" :src="getPublicPath(article.img)" :alt="article.title" loading="lazy"
+						:title="article.title">
+				</NuxtLink>
+			</div>
+			<div class="col-7 col-lg-8 col-xl-9">
+				<NuxtLink v-if="article.img" :to="article.path">
+					<h4 class="mb-0"><strong>{{ article.title }}</strong></h4>
+				</NuxtLink>
+				<p><i><small>{{ prettyDate(article.date) }}</small></i></p>
+				<p>{{ article.description }}</p>
+				<template v-if="article.tags">
+					<p>Tags: <code>{{ article.tags.join(", ") }}</code></p>
+				</template>
+			</div>
+		</div>
+
+		<template v-if="isDev">
+			<br>
+			<div v-for="article in props.articles" :key="article.id">
+				<pre>{{ article }}</pre>
+			</div>
+		</template>
+	</div>
+</template>
+
+<style scoped>
+a {
+	text-decoration: none !important;
+}
+
+a h4 {
+	color: var(--bs-body-color);
+}
+
+a h4:hover {
+	color: var(--bs-link-hover-color);
+}
+
+code {
+	color: var(--bs-link-color);
+}
+</style>
+
+<script setup lang="ts">
+import type { ContentCollectionItem } from "@nuxt/content"
+
+const props = withDefaults(
+	defineProps<{
+		title?: string,
+		articles: ContentCollectionItem[] | null
+	}>(),
+	{
+		title: "Articles",
+		articles: null
+	}
+);
+</script>

src/components/shared/nav-menu.vue

@@ -9,8 +9,10 @@
 			<div class="collapse navbar-collapse" id="navbarText">
 				<!-- Left aligned nav items -->
 				<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll">
-					<li class="nav-item"><NuxtLink to="/articles" class="nav-link">Articles</NuxtLink></li>
-					<li class="nav-item"><NuxtLink to="/todos" class="nav-link">Todos</NuxtLink></li>
+					<li class="nav-item"><NuxtLink to="/software-projects" class="nav-link">Software Projects</NuxtLink></li>
+					<li class="nav-item"><NuxtLink to="/hardware-projects" class="nav-link">Hardware Projects</NuxtLink></li>
+					<li class="nav-item"><NuxtLink to="/algorithms" class="nav-link">Algorithms</NuxtLink></li>
+					<li class="nav-item"><NuxtLink to="/about-me" class="nav-link">About Me</NuxtLink></li>
 				</ul>
 				<!-- Right aligned nav items -->
 				<ul class="navbar-nav">