About/src/components/About.astro

---
import { getCollection, getEntry } from "astro:content";
import type { AboutEntry } from "../types/about";
import "../styles/global.css";

const about: AboutEntry = await getEntry("about", "oliver");
---

<div class="grid justify-center">
    <div
        class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-blue-700 dark:border-gray-500"
    >
        <div class="p-5">
            <a href="#">
                <h5
                    class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
                >
                    {about.data.name}
                </h5>
            </a>
            <div class="grid auto-cols-max grid-flow-col">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    height="24px"
                    viewBox="0 -960 960 960"
                    width="24px"
                    fill="#e8eaed"
                >
                    <path
                        d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"
                    ></path>
                </svg>

                <p class="mb-3 font-normal text-gray-700 dark:text-white">
                    {about.data.location}
                </p>
            </div>

            <p class="mb-3 font-normal text-gray-700 dark:text-white">
                Interests
            </p>

            <span
                class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300"
                >Full stack</span
            >
            <span
                class="bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-red-900 dark:text-red-300"
                >Web</span
            >
            <span
                class="bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-green-900 dark:text-green-300"
                >LLM</span
            >
            <span
                class="bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300"
                >Svelte</span
            >
            <span
                class="bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-indigo-900 dark:text-indigo-300"
                >React</span
            >
            <span
                class="bg-purple-100 text-purple-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-purple-900 dark:text-purple-300"
                >Docker</span
            >
            <span
                class="bg-pink-100 text-pink-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-pink-900 dark:text-pink-300"
                >JVM</span
            >
        </div>
    </div>
</div>