Update home page and projects

.vscode/settings.json

@@ -4,8 +4,11 @@
     "astrojs",
     "astrolib",
     "canvaskit",
+    "cvoptimiser",
     "Dealbase",
     "dealflow",
+    "optimise",
+    "optimiser",
     "webmention",
     "webmentions"
   ]

package.json

@@ -12,21 +12,21 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.2",
-    "@astrojs/db": "^0.12.0",
-    "@astrojs/mdx": "^3.1.3",
-    "@astrojs/rss": "^4.0.7",
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/svelte": "^5.7.0",
-    "@astrojs/tailwind": "^5.1.0",
-    "@astrojs/vercel": "^7.7.2",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/db": "^0.14.3",
+    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/rss": "^4.0.9",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/svelte": "^5.7.2",
+    "@astrojs/tailwind": "^5.1.2",
+    "@astrojs/vercel": "^7.8.2",
     "@astrolib/seo": "1.0.0-beta.5",
     "@fontsource-variable/jetbrains-mono": "^5.0.21",
     "@fontsource/ibm-plex-sans": "^5.0.20",
     "@fontsource/oswald": "^5.0.20",
     "@fontsource/permanent-marker": "^5.0.12",
     "@sentry/astro": "^8.24.0",
-    "astro": "^4.13.1",
+    "astro": "^4.16.7",
     "astro-embed": "^0.6.2",
     "astro-expressive-code": "^0.33.5",
     "astro-og-canvas": "^0.4.2",

src/components/AboutCard.astro

@@ -16,19 +16,23 @@ import Link from "./Link.astro"
         >(@bhekanik)</span
       >
     </h1>
-    <p class="font-light mb-4 text-xl"><i>Software Engineer in London</i></p>
-    <p class="mb-4">I'm BK. I enjoy learning things and writing about it.</p>
     <p class="mb-4">
-      If you just want the non-tech stuff that interest me, you can find those
-      on <Link href="https://justreflections.bhekani.com/" target="_blank">
+      Hi, I’m Bhekani Khumalo (BK), a software engineer in London with a passion
+      for exploring and sharing knowledge on technology and beyond.
+    </p>
+    <p class="mb-4">
+      Curious about my thoughts on life, productivity, and more? Subscribe to on <Link
+        href="https://justreflections.bhekani.com/"
+        target="_blank"
+      >
         my newsletter
-      </Link>, and if you want to see the work I'm doing to shine light on the
-      African early stage tech startup ecosystem check out <Link
+      </Link>for insights beyond tech. Explore my work on <Link
         href="https://dealbase.africa/"
         target="_blank"
       >
         dealbase.africa
-      </Link>.
+      </Link>, where I spotlight emerging tech startups across the African
+      continent.
     </p>
 
     <p>

src/components/ProjectCard.astro

@@ -1,24 +1,24 @@
 ---
-import { Image } from "astro:assets";
-import type { CollectionEntry } from "astro:content";
+import { Image } from "astro:assets"
+import type { CollectionEntry } from "astro:content"
 
 type Props = {
-  projects: CollectionEntry<"projects">;
-};
+  projects: CollectionEntry<"projects">
+}
 
 const {
   projects: {
-    data: { title, image, url, tech },
+    data: { title, image, url, tech, description },
   },
-} = Astro.props;
+} = Astro.props
 ---
 
 <div class="card grid p-4">
   {
     image && (
       <div class="image overflow-hidden w-full">
         <Image
-          class="object-cover w-full h-full"
+          class="object-cover w-full h-full aspect-video"
           src={image}
           width="600"
           height="300"
@@ -35,8 +35,9 @@ const {
     <a
       href={url}
       target="_blank"
-      class="text-sm hover:text-[hsl(var(--muted-foreground))]">{url}</a
+      class="text-sm mb-4 hover:text-[hsl(var(--muted-foreground))]">{url}</a
     >
+    <p class="text-sm mb-2 text-gray-900 dark:text-gray-400">{description}</p>
     <!-- <div class="text-sm flex gap-2">
       <time
         class="text-[hsl(var(--muted-foreground))]"
@@ -52,10 +53,10 @@ const {
         {endDate ? format(new Date(endDate), "MMMM dd, yyyy") : "Present"}
       </time>
     </div> -->
-    <div class="flex flex-wrap gap-4">
+    <div class="flex flex-wrap">
       {
         tech.map((tag: string) => (
-          <span class="text-sm hover:text-[hsl(var(--muted-foreground))]">
+          <span class="text-sm hover:text-[hsl(var(--muted-foreground))] mb-0 mr-2 text-gray-500 dark:text-gray-400">
             {tag}
           </span>
         ))

src/components/ProjectDescription.astro

@@ -0,0 +1,17 @@
+---
+import type { CollectionEntry } from "astro:content"
+
+type Props = {
+  description: CollectionEntry<"projects">["data"]["description"]
+}
+
+const { description } = Astro.props
+---
+
+{
+  description && (
+    <p class="mb-1 font-thin text-[hsl(var(--muted-foreground))]">
+      <em>{description}</em>
+    </p>
+  )
+}

src/components/ProjectListItem.astro

@@ -0,0 +1,35 @@
+---
+import type { CollectionEntry } from "astro:content"
+import { format } from "date-fns"
+import Link from "./Link.astro"
+import ProjectDescription from "./ProjectDescription.astro"
+import TagsList from "./TagsList.astro"
+
+type Props = {
+  project: CollectionEntry<"projects">
+}
+
+const { project: project } = Astro.props
+
+const url = project.data.url
+const title = project.data.title
+const date = project.data.startDate
+const tech = project.data.tech
+---
+
+<li>
+  <div>
+    <Link href={url}>
+      {title}
+    </Link>
+
+    <time
+      class="ml-2 text-sm whitespace-nowrap text-[hsl(var(--muted-foreground))]"
+      >{format(date, "MMMM dd, yyyy")}
+    </time>
+  </div>
+
+  <ProjectDescription description={project.data.description} />
+
+  <TagsList tags={tech} />
+</li>

src/components/RecentPosts.astro

@@ -1,8 +1,9 @@
 ---
+import type { CollectionEntry } from "astro:content"
 import { getCollection } from "astro:content"
 import PostListItem from "./PostListItem.astro"
 
-const allPosts = await getCollection("posts")
+const allPosts = (await getCollection("posts")) as CollectionEntry<"posts">[]
 
 interface Props {
   limit?: number

src/components/RecentProjects.astro

@@ -0,0 +1,40 @@
+---
+import type { CollectionEntry } from "astro:content"
+import { getCollection } from "astro:content"
+import ProjectListItem from "./ProjectListItem.astro"
+
+const allProjects = (await getCollection(
+  "projects",
+)) as CollectionEntry<"projects">[]
+
+interface Props {
+  limit?: number
+}
+
+const { limit = 3 } = Astro.props
+---
+
+<div class="my-12">
+  <h2 class="text-2xl mb-4 mt-2">Currently Building</h2>
+
+  <ul class="flex flex-col gap-2">
+    {
+      allProjects
+        .filter((project) => project.data.published)
+        .sort(
+          (a, b) =>
+            new Date(b.data.startDate).getTime() -
+            new Date(a.data.startDate).getTime(),
+        )
+        .slice(0, limit)
+        .map((project) => <ProjectListItem project={project} />)
+    }
+  </ul>
+
+  <a
+    class="mt-2 flex h-6 rounded-lg leading-7 text-gray-600 transition-all dark:text-gray-400 dark:hover:text-gray-600"
+    href="/projects/"
+  >
+    See all projects →
+  </a>
+</div>

src/content/projects/cv-optimiser.json

@@ -0,0 +1,16 @@
+{
+	"title": "CV Optimiser",
+	"description": "A tool to optimise your CV for specific job descriptions using AI.",
+	"url": "https://www.cvoptimiser.com",
+	"image": "../_images/cvoptimiser.jpeg",
+	"startDate": "2024-10-01",
+	"published": true,
+	"tech": [
+		"Next.js",
+		"Postgresql",
+		"Drizzle ORM",
+		"AWS",
+		"Tailwind",
+		"Vercel"
+	]
+}

src/content/projects/interview-optimiser.json

@@ -0,0 +1,16 @@
+{
+	"title": "Interview Optimiser",
+	"description": "An app providing realistic interview practice and comprehensive performance reports.",
+	"url": "https://www.interviewoptimiser.com",
+	"image": "../_images/interview-optimiser.png",
+	"startDate": "2024-10-18",
+	"published": true,
+	"tech": [
+		"Next.js",
+		"Postgresql",
+		"Drizzle ORM",
+		"AWS",
+		"Tailwind",
+		"Vercel"
+	]
+}

src/layouts/BaseLayout.astro

@@ -176,9 +176,10 @@ const { pageTitle, description, title, imageUrl } = Astro.props
   <body>
     <Header />
     <h1
-      class="page-header text-center text-5xl p-8 border-b-[1px] border-[hsl(var(--muted))] uppercase"
+      class="flex flex-col gap-2 page-header text-center text-5xl p-8 border-b-[1px] border-[hsl(var(--muted))] uppercase"
     >
       {title ?? pageTitle}
+      <span class="text-sm lowercase">{description}</span>
     </h1>
     <slot />
     <Footer />

src/pages/index.astro

@@ -13,6 +13,40 @@ const pageTitle = "Bhekani Khumalo"
   <MainContainer>
     <AboutCard />
 
+    <div class="my-12">
+      <h2 class="text-2xl mb-4 mt-2">Currently Building</h2>
+
+      <ul class="flex flex-col gap-2">
+        <li>
+          <div>
+            <Link href="https://www.cvoptimiser.com">CV Optimiser </Link>
+
+            <p class="mb-2">
+              A tool to optimise your CV for specic job descriptions using AI.
+            </p>
+          </div>
+        </li>
+        <li>
+          <div>
+            <Link href="https://www.interviewoptimiser.com"
+              >Interview Optimiser
+            </Link>
+
+            <p class="mb-2">
+              An app providing realistic mock interviews and comprehensive
+              performance reports.
+            </p>
+          </div>
+        </li>
+      </ul>
+      <a
+        class="mt-2 flex h-6 rounded-lg leading-7 text-gray-600 transition-all dark:text-gray-400 dark:hover:text-gray-600"
+        href="/projects/"
+      >
+        See all projects →
+      </a>
+    </div>
+
     <RecentPosts />
 
     <p class="w-full mb-8 font-bold">

src/pages/posts/index.astro

@@ -7,24 +7,32 @@ import BaseLayout from "../../layouts/BaseLayout.astro"
 
 const allPosts = await getCollection("posts")
 const sortedPosts = allPosts.sort(
-  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+  (a: CollectionEntry<"posts">, b: CollectionEntry<"posts">) =>
+    b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
 )
 // const firstPost = sortedPosts.shift()
 
-const yearToPosts = sortedPosts.reduce<
-  Record<number, CollectionEntry<"posts">[]>
->((acc, post) => {
-  const year = new Date(post.data.pubDate).getFullYear()
-  if (!acc[year]) {
-    acc[year] = []
-  }
-  acc[year].push(post)
-  return acc
-}, {})
+const yearToPosts = sortedPosts.reduce(
+  (
+    acc: Record<number, CollectionEntry<"posts">[]>,
+    post: CollectionEntry<"posts">,
+  ) => {
+    const year = new Date(post.data.pubDate).getFullYear()
+    if (!acc[year]) {
+      acc[year] = []
+    }
+    acc[year].push(post)
+    return acc
+  },
+  {},
+) as Record<number, CollectionEntry<"posts">[]>
 const pageTitle = "Posts"
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<BaseLayout
+  pageTitle={pageTitle}
+  description="Longer form articles that aim to explore topics in more depth, but which are published less frequently."
+>
   <MainContainer>
     <div class="w-full flex justify-center mb-8 font-bold">
       <a