Initial full version

.gitignore

@@ -17,6 +17,7 @@ logs
 .DS_Store
 .fleet
 .idea
+.data
 
 # Local env files
 .env

README.md

@@ -1,4 +1,28 @@
-# Nuxt 3 Minimal Starter
+# Personal blog
+
+This is the source code for my personal website. It's based on the excelent blog by [Guillermo Rauch](https://rauchg.com/) and design to be easy to work on and write for.
+
+## Tech Stack
+
+The blog is built using the Nuxt ecosystem, chosen for its simplicity and flexibility. Nuxt’s ecosystem is designed to ensure easy integration among tools, which reduces configuration overhead and accelerates development. Here’s a breakdown of the main plugins used in this project:
+
+### Nuxt Content
+
+Nuxt Content is a headless CMS that allows for easy management of content files, like blog posts and static pages, directly in Markdown. It discovers Markdown files in the content directory and automatically renders them with customizable styles. This plugin enables easy content creation without needing a traditional database or CMS interface, which simplifies both the tech stack and maintenance efforts. You can find more details [here](https://content.nuxt.com/).
+
+### Nuxt SEO
+
+Nuxt SEO centralizes and simplifies search engine optimization tasks, allowing easy configuration of essential SEO elements. It streamlines the addition of meta tags, OG (Open Graph) images, sitemaps, and `robots.txt` files across the entire site. By automating these SEO aspects, Nuxt SEO enhances discoverability on search engines with minimal setup. More information is available [here](https://nuxtseo.com/).
+
+### Nuxt Tailwind
+
+Nuxt Tailwind is a straightforward integration of the Tailwind CSS framework into Nuxt projects, enabling the use of Tailwind's utility-first CSS classes for rapid, responsive styling. Tailwind is used for all styling. More on Nuxt Tailwind can be found [here](https://tailwindcss.nuxtjs.org/).
+
+### Nuxt Image
+
+Nuxt Image optimizes images across the site by automatically generating responsive, properly sized images based on the device and screen size. This improves performance, particularly on mobile, by reducing load times and optimizing bandwidth usage. Nuxt Image ensures that images are optimized without manual intervention, contributing to a smooth user experience. Learn more about Nuxt Image [here](https://image.nuxt.com/).
+
+## Development and deployment
 
 Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 

app.vue

@@ -1,6 +1,16 @@
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
+  <div class="bg-dark-background min-h-screen text-white font-custom">
+    <div class="container mx-auto pt-6">
+      <AppHeader />
+      <NuxtPage />
+      <AppFooter />
+    </div>
   </div>
 </template>
+<script setup lang="ts">
+useHead({
+  titleTemplate: (titleChunk) => {
+    return titleChunk ? `${titleChunk} | Stefan's Personal Site` : "Stefan's Personal Site";
+  }
+})
+</script>

components/AppFooter.vue

@@ -0,0 +1,9 @@
+<template>
+  <footer class="flex text-xs text-center mt-3 py-12 text-gray-400">
+    <div class="grow text-left">Stefan van der Weide (<a
+        class="border-b  transition-[border-color]  text-white border-gray-500 hover:border-white " target="_blank"
+        href="mailto:[email protected]">Contact</a>)</div>
+    <div><a class="border-b transition-[border-color]  text-white border-gray-500 hover:border-white " target="_blank"
+        href="https://github.com/StefanVDWeide/personal-site">Source</a></div>
+  </footer>
+</template>

components/AppHeader.vue

@@ -0,0 +1,11 @@
+<template>
+  <header class="flex w-11/12 lg:w-full mb-4 md:mb-12 items-center justify-self-center">
+    <NuxtLink to="/" class="text-md md:text-lg whitespace-nowrap font-bold">
+      <span class="pr-2">Stefan van der Weide</span>
+    </NuxtLink>
+    <nav class="font-mono text-xs grow justify-end items-center flex gap-1 md:gap-3">
+      <NuxtLink to="/projects" class="inline-flex">Projects</NuxtLink>
+      <NuxtLink to="/about" class="inline-flex">About</NuxtLink>
+    </nav>
+  </header>
+</template>

components/OgImage/BlogPost.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="h-full w-full flex items-start justify-start bg-dark-background text-white">
+    <div class="flex items-start justify-start h-full">
+      <div class="flex flex-col w-full h-full justify-center px-20">
+        <h3 class="text-2xl font-light">Stefan van der Weide | Reading time: {{ readingMins }} mins</h3>
+        <h1 class="text-8xl font-black">
+          {{ title }}
+        </h1>
+        <h2 class="text-4xl font-light">{{ description }}</h2>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+withDefaults(defineProps<{
+  title?: string
+  description?: string
+  readingMins?: number
+}>(), {
+  title: "title",
+  description: "description",
+  readingMins: 5
+})
+</script>

components/OgImage/GeneralPage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="h-full w-full flex items-start justify-start bg-dark-background text-white">
+    <div class="flex items-start justify-start h-full">
+      <div class="flex flex-col w-full h-full justify-center px-20">
+        <h3 class="text-2xl font-light">Stefan van der Weide</h3>
+        <h1 class="text-8xl font-black">
+          {{ title }}
+        </h1>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+withDefaults(defineProps<{
+  title?: string
+}>(), {
+  title: "title",
+})
+</script>

content/about/about-me.md

@@ -0,0 +1,18 @@
+# About me
+
+I'm a full stack enthousiast currently working as a back end engineer at [Codebeez](https://codebeez.nl/) and doing freelance work under [Studio Terabyte](https://studioterabyte.nl/).
+
+I use 🐍 Python and 💻 Typescript professionally and have a personal interest in 🦀 Rust.
+
+Some projects that I've finished are:
+
+- An alternative frontend for Hacker News → [Modern Orange](https://modernorange.io/)
+- A web app which helps you save, organize and plan you favorite recipes → [EatFeed](https://eatfeed.app/)
+- A website which shows you a random piece of art from the Amsterdam Rijks Museum → [Random Rijks](https://randomrijks.com/)
+
+And some ideas I'm currently working on:
+
+- A semantic search using NLP for art
+- A multiplayer game for the terminal
+
+If you want to know more about me or one of the projects (or if you want to collaborate), reach out at [[email protected]](mailto:[email protected])

content/blog/more-useful-macos-command-line-tools.md

@@ -0,0 +1,123 @@
+---
+title: 'More Useful MacOS Command Line Tools'
+description: 'Explore a curated list of macOS command-line utilities, from package management to JSON parsing, to streamline your development workflow.'
+path: /blog/more-useful-macos-command-line-tools
+date: 2024-11-27
+category: tooling
+ogImage:
+  component: BlogPost
+  props:
+    readingMins: 4
+sitemap:
+  loc: /blog/more-useful-macos-command-line-tools
+---
+
+I recently came across [this](https://weiyen.net/articles/useful-macos-cmd-line-utilities) article by Wei Yen about useful built-in macOS command-line utilities. This made me think about which utilities, both built-in and installed, that I like to use. Here are a few powerful tools I find useful:
+
+---
+
+**Manage Packages with Homebrew**  
+
+First and foremorest, you need a way to install these tools!
+
+Homebrew (`brew`) is an optional but essential package manager for macOS that simplifies the installation of software and libraries. Think of it as an App Store for command-line tools. After installing, you can quickly install, update, or remove software via commands like:
+
+```bash
+brew install jq
+brew update
+brew uninstall afconvert
+```
+
+Homebrew keeps your system clean and organized by managing installations in a centralized location.  
+**Link:** [Homebrew](https://brew.sh)
+
+---
+
+**Spotlight Search from the Terminal**  
+
+With `mdfind`, you can leverage Spotlight’s indexing from the command line. This is handy for finding files without manually going through Finder or launching Spotlight. For example:
+
+```bash
+mdfind "index.vue"
+```
+
+This will output a list of all instances of the `index.vue` file. It’s also scriptable, making it great for automating file retrieval based on keywords or metadata by piping the output in another tool such as grep.
+
+---
+
+**Convert Audio Files with afconvert**  
+
+Need to convert audio files between different formats? `afconvert` is a built-in macOS tool that lets you convert audio files from the terminal. Useful for quick conversions or integrating into a script that processes audio files if you don't want or need to dive into `ffmpeg`.
+
+```bash
+afconvert -f m4af -d aac input.wav output.m4a
+```
+
+---
+
+**API Testing Made Simple with HTTPie**  
+
+`HTTPie` is a user-friendly HTTP client, perfect for testing and interacting with APIs. It presents JSON in a readable format and has intuitive syntax, which makes it an ideal tool for developers:
+
+```bash
+http <https://api.example.com/endpoint>
+http POST <https://api.example.com/endpoint> key=value
+```
+
+It’s perfect for anyone who regularly works with APIs and wants a more human-friendly interface than `curl`.
+**Link:** [HTTPie](https://httpie.io)
+
+---
+
+**Process JSON Data with jq**
+
+Now that you have an easy way to make API calls from the command-line, you need to be able to work with JSON data and for this `jq` is a must-have. This command-line utility parses, filters, and formats JSON output, making it easier to handle API responses or complex data. For example, to filter a specific field:
+
+```bash
+http "<https://api.example.com/data>" | jq '.key'
+```
+
+Even if you don't need to do any data wrangling, it's a great tool to pretty print any json you get back from an API call or reading a file.
+
+**Link:** [jq on GitHub](https://github.com/stedolan/jq)
+
+---
+
+**Strip Directory and Suffix with basename**  
+
+`basename` is a simple utility to extract the filename from a path, often used in scripts to isolate file names or remove extensions:
+
+```bash
+basename /path/to/file.txt
+```
+
+This will output just `file.txt`. It’s especially useful when processing files in a directory and managing output names dynamically.
+
+---
+
+**See the directory structure using tree**
+
+`tree` displays the directory structure of the current directory. This can be useful if you need to know where a file lives exactly.
+
+```bash
+tree -I node_modules
+```
+
+This will output your directory tree but ignore the `node_modules` folder.
+
+---
+
+**Get Simplified Man Pages with tldr**  
+
+After reading about all these tools, you might wonder how to use them efficiently. You can look at the `man` pages but they can be a bit dense, so if you’re looking for concise explanations, the `tldr` pages offer simplified examples for commonly used commands. Install it via `brew`:
+
+```bash
+brew install tldr
+tldr ls
+```
+
+It’s a great resource for quick syntax examples without scrolling through verbose `man` entries.
+
+---
+
+These tools enhance what’s already available in macOS, turning your terminal into a more powerful and flexible work environment.