Colophon

Typography

For the typography on this website I've used Pretendard Variable, which was made with the influence of the Inter typeface and Apple SF Pro.

Iconography

My icons are from Central Icon System by Iconists, offering both solid and outlined icons resulting in flexible usage based on size and surroundings I used them in.

Photography

Most of my photos where made from friends, colleagues or myself. Credits to Alice Sopp, Marc Rufeis, and Nils Eller.

Mockups

The mockups I've used are from the Artboard Studio Figma plugin.

UI Elements

Here are some of the elements I've build especially for this site:

Buttons


<Button type="primary" class="mr-4">Primary</Button>

<Button type="secondary" class="mr-4">Secondary</Button>

<Button type="text">Text</Button>

Slider

// The component
import Flicking from "@egjs/preact-flicking"
import "@egjs/preact-flicking/dist/flicking.css"
// ...

export default function Slider(props: {
  autoPlay?: boolean
  buttons?: boolean
  children: JSX.Element[] | Element[]
}) {
  // ...
  return (<div class="w-full relative md:block flex flex-wrap gap-y-12 gap-x-4">
      <Flicking
        ref={slider}
        hideBeforeInit
        align="next"
        circular={true}
        panelsPerView={panelsNumber}
        moveType="snap"
        preventDefaultOnDrag
        plugins={plugins}
        cameraClass="cursor-grab active:cursor-grabbing"
      >
        {props.children}
      </Flicking>
      <Button
        rounded
        type="secondary"
        function={() => {
          slider.current?.prev()
        }}
        class="md:absolute z-10 -translate-y-1/2 top-1/2 left-0 md:-left-8 md:shadow-xl shadow-black/5 hover:pl-4 hover:pr-6"
      >
        <ArrowLeft />
      </Button>
      <Button
        rounded
        type="secondary"
        function={() => {
          slider.current?.next()
        }}
        class="md:absolute z-10 -translate-y-1/2 top-1/2 right-0 md:-right-8 md:shadow-xl shadow-black/5 hover:pl-6 hover:pr-4"
      >
        <ArrowRight />
      </Button>
    </div>)

Tooltip

Custom TooltipHover over me

// Fetch the letters from endpoint
import { JSX } from "preact/jsx-runtime"

export default function Tooltip(props: {
  children: string | JSX.Element | Element
  position: "top" | "left" | "right" | "bottom"
  class?: string
}) {
  return (
    <span
      class={
        "opacity-0 font-normal group-hover:opacity-100 delay-75 scale-90 group-hover:scale-100 pointer-events-none transition-all duration-300 ease-out absolute text-sm px-2 py-1 rounded-full bg-black z-[99] text-white dark:bg-white dark:text-black " +
        (props.position === "top"
          ? "-top-5 group-hover:-top-6 left-[50%] translate-x-[-50%]"
          : "") +
        (props.position === "bottom"
          ? "-bottom-5 group-hover:-bottom-6 left-[50%] translate-x-[-50%]"
          : "") +
        (props.position === "left"
          ? "left-5 group-hover:-left-6 top-[50%] translate-y-[-50%]"
          : "") +
        (props.position === "right"
          ? "right-5 group-hover:-right-6 top-[50%] translate-y-[-50%]"
          : "") +
        props.class
      }
    >
      <span
        class={
          "w-2.5 h-2.5 rounded-sm bg-black absolute scale-75 group-hover:scale-100 transition-transform duration-300 z-30 transform rotate-45 dark:bg-white " +
          (props.position === "top"
            ? "-bottom-1 left-[50%] translate-x-[-50%]"
            : "") +
          (props.position === "bottom"
            ? "-top-1 left-[50%] translate-x-[-50%]"
            : "") +
          (props.position === "left"
            ? "-right-0.5 top-[50%] translate-y-[-50%]"
            : "") +
          (props.position === "right"
            ? "-left-0.5 top-[50%] translate-y-[-50%]"
            : "")
        }
      />
      <span class="z-50 relative truncate">{props.children}</span>
    </span>
  )
}

Tech Stack

The tech stack I've used might seem more advanced than you'd probably expect. One goal I followed was to use unopinionated tooling which allowed me to build my site as flexible as possible.

Hosting

My personal site is hosted on Vercel, the repository for it on GitHub.

Inspiration

I got inspired by the following sites from awesome people Linus Rogge, Samuel Kraft, Eike Drescher, Siddharth Arun, and Daryl Ginn. Regarding the AI clone, I got inspired by Delphi

Great humans

This is a special section for giving credit to special people I like talking to, working with and enjoying time together: Nils Eller, Anton Stallbörger, Linus Rogge, and Nico Tritschler .
Obviously I also want to mention the talented team at inlang here.

Feedback

Star on GitHub Find my open-source repository on GitHub.