at://did:plc:bgdy4yvsnhbormiqwvu7rhvx/com.atprofile.beta.profile/self

{
  "$type": "com.atprofile.beta.profile",
  "content": "<style>\n  :root {\n    --white: #fafafa;\n    --black: #212121;\n    --french-pass: #b8e6fe;\n    --outer-space: #21292e;\n    --orient: #00598a;\n    --twilight-blue: #f8fdff;\n    --base: var(--white);\n    --base-content: var(--black);\n    --primary: var(--french-pass);\n    --primary-content: var(--outer-space);\n    --cursor: var(--white);\n\n    @media (prefers-color-scheme: dark) {\n      & {\n        --base: var(--black);\n        --base-content: var(--white);\n        --primary: var(--orient);\n        --primary-content: var(--twilight-blue);\n      }\n    }\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n    cursor: none;\n  }\n\n  body {\n    background-color: var(--primary);\n    color: var(--primary-content);\n    margin: 0;\n  }\n\n  main {\n    display: grid;\n    place-items: center;\n    min-height: 100dvh;\n    margin: 0 1rem;\n\n    @media screen and (min-width: calc(600px + 2rem + 1px)) {\n      margin: 0 auto;\n    }\n  }\n\n  #cursor {\n    height: 100px;\n    width: 100px;\n    pointer-events: none;\n    position: fixed;\n    background: var(--cursor);\n    border-radius: 100%;\n    box-shadow:\n      0 0 10px var(--cursor),\n      0 0 20px var(--cursor),\n      0 0 30px var(--cursor),\n      0 0 40px var(--cursor),\n      0 0 70px var(--cursor),\n      0 0 80px var(--cursor),\n      0 0 100px var(--cursor),\n      0 0 150px var(--cursor);\n    z-index: 100;\n  }\n\n  #cloud {\n    position: relative;\n    background-color: var(--white);\n    color: var(--black);\n    width: 100%;\n    max-width: 600px;\n    border-radius: 100px;\n    padding: 25px 50px;\n    box-shadow: 10px 10px color-mix(in srgb, var(--black), transparent 80%);\n\n    &::after,\n    &::before {\n      content: '';\n      position: absolute;\n      background: inherit;\n      border-radius: 100%;\n      z-index: -1;\n    }\n\n    &::after {\n      width: 30%;\n      aspect-ratio: 1;\n      top: -35%;\n      left: 15%;\n    }\n\n    &::before {\n      width: 45%;\n      aspect-ratio: 1;\n      top: -50%;\n      left: 40%;\n    }\n\n    @media screen and (min-width: 550px) {\n      &::after {\n        width: 28%;\n        top: -45%;\n      }\n\n      &::before {\n        width: 45%;\n        top: -75%;\n      }\n    }\n\n    .content {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0.5rem 0;\n      color: var(--black);\n      text-decoration: none;\n      transition: color 250ms;\n\n      .avatar {\n        width: 100px;\n        height: auto;\n        display: block;\n        border-radius: 100%;\n        border: 5px solid transparent;\n        margin-right: 1rem;\n        transition: border-color 250ms;\n      }\n\n      &:hover {\n        color: var(--primary);\n\n        .avatar {\n          border-color: var(--primary);\n        }\n      }\n\n      .text {\n        flex: 1;\n        max-height: 100px;\n        overflow: auto;\n\n        @media screen and (min-width: 768px) {\n          max-height: 120px;\n        }\n      }\n\n      .title {\n        margin: 0;\n      }\n\n      .description {\n        white-space: pre-line;\n      }\n    }\n  }\n</style>\n\n<div id=\"app\">\n  <div ref=\"cursor\" id=\"cursor\" :style=\"{top: `${cursorTop}px`, left: `${cursorLeft}px`}\"></div>\n  <main>\n    <div id=\"cloud\">\n      <a :href=\"`https://bsky.app/profile/${profile.did}`\" class=\"content\">\n        <img class=\"avatar\" :src=\"profile.avatar\" />\n        <div class=\"text\">\n          <h1 class=\"title\">\n            {{ profile.displayName || profile.handle}}\n            <template v-if=\"status.length\">- {{status[0].value.status}}</template>\n          </h1>\n          <div v-if=\"profile.description\" class=\"description\">{{profile.description}}</div>\n        </div>\n      </a>\n    </div>\n  </main>\n</div>\n\n<script type=\"module\">\n  import {\n    createApp,\n    ref,\n    useTemplateRef,\n    onMounted,\n    onUnmounted,\n  } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js'\n\n  createApp({\n    setup() {\n      const cursor = useTemplateRef('cursor')\n      const cursorTop = ref(0)\n      const cursorLeft = ref(0)\n\n      const setPosition = (event) => {\n        const radius = cursor.value?.offsetHeight / 2\n\n        cursorTop.value = event.clientY - radius\n        cursorLeft.value = event.clientX - radius\n      }\n\n      onMounted(() => {\n        document.addEventListener('mousemove', setPosition)\n      })\n\n      onUnmounted(() => {\n        document.removeEventListener('mousemove', setPosition)\n      })\n\n      return {\n        ...window.context,\n        cursorTop,\n        cursorLeft,\n      }\n    },\n  }).mount('#app')\n</script>\n",
  "context": [
    {
      "name": "status",
      "rkey": "",
      "$type": "com.atprofile.beta.profile#contextItem",
      "limit": 1,
      "collection": "xyz.statusphere.status"
    }
  ],
  "createdAt": "2025-09-24T20:03:21.330Z",
  "newlinesToLinebreaks": false
}