这种语言尚未完成。

版画

版式

F或者我在这个网站上使用过的排版 假装变量，它是受到Inter字体和Apple SF Pro的影响而制作的。

图像学

我的图标来自 Central Icon System by Iconists，提供实心和轮廓图标，从而根据我使用它们的大小和环境灵活使用。

摄影

我的大部分照片都是由朋友、同事或我自己拍摄的。致谢 Alice Sopp, Marc Rufeis, and Nils Eller.

模型

我使用的模型来自 Artboard Studio Figma 插件。

用户界面元素

以下是我专门为此网站构建的一些元素：

Buttons


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

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

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

滑块

// 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>)

工具提示

自定义工具提示将鼠标悬停在我上方

// 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>
  )
}

技术堆栈

我使用的技术堆栈可能看起来比您想象的更先进。我遵循的目标之一是使用不拘一格的工具，这使我能够尽可能灵活地构建我的网站。

托管

我的个人网站托管在 Vercel, 它的存储库位于 GitHub.

灵感

我从以下网站中获得了来自优秀人士的启发 Linus Rogge, Samuel Kraft, Eike Drescher, Siddharth Arun, and Daryl Ginn. 关于人工智能克隆，我受到了以下启发： Delphi

伟大的人类

这是一个特殊的部分，旨在表彰我喜欢与之交谈、共事并享受共度时光的特殊人士： Nils Eller, Anton Stallbörger, Linus Rogge, and Nico Tritschler .
显然我还想提到才华横溢的团队 inlang here.

反馈

在 GitHub 上加星标 在 GitHub 上找到我的开源存储库。