Welcome

Howdy.

I'm Daniel Kelch, a software developer. I figured it was time to give this whole personal website slash blog slash portfolio slash photo dump thing a shot.

Who knows if I'll keep up with it, but I want to see how far it goes.

A bit of technical information, this site is built with Next.js (opens in a new tab), a React framework. I'm using MDX (opens in a new tab) for the content (specifically with Nextra (opens in a new tab)). The site is hosted on Vercel (opens in a new tab).

It's my first time using MDX, and it's pretty neat. It's GitHub flavored markdown with the ability to include React components, like this counter!

Nextra also adds some nice features like automatic dark mode, syntax highlighting, and a few other things.

Like, check out this sweet code block of the counter above (which you can copy!):

import { useState } from "react";
 
export const Counter = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div
      style={{
        backgroundColor: "#737170",
        display: "flex",
        alignContent: "center",
        justifyContent: "center",
        padding: "10px",
        borderRadius: "5px",
        gap: "10px",
      }}
    >
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

And inline highlighting like const [count, setCount] = useState(0) can really improve legibility.

The code block highlighting can also select lines, so I can call out antipatterns in my code, like:

import { useState } from "react";
 
export const Counter = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div
      style={{
        backgroundColor: "#737170",
        display: "flex",
        alignContent: "center",
        justifyContent: "center",
        padding: "10px",
        borderRadius: "5px",
        gap: "10px",
      }}
    >
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

There's a ton of other built-in features that I'm excited about, like Npm2Yarn, Mermaid, LaTeX, and built-in components.

So far, the main downside is that Nextra doesn't support the App router, so we're using the good 'ol pages directory. It's not a huge deal, but maybe it will incentivize me to contribute to the project.

Anyways, thanks for stopping by. See you around!