glass

.tangled/workflows/deploy.yml

···
     command: |
       export PATH="$HOME/.nix-profile/bin:$PATH"
 
+      rm -rf bun.lock
       bun install
 
       bun run build

bun.lock

···
 {
   "lockfileVersion": 1,
+  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "bun-react-template",
···
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.2.3",
-        "atproto-ui": "^0.7.2",
+        "atproto-ui": "0.11.3",
         "bun-plugin-tailwind": "^0.1.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
···
 
     "@types/bun": ["@types/bun@1.3.2", "", { "dependencies": { "bun-types": "1.3.2" } }, "sha512-t15P7k5UIgHKkxwnMNkJbWlh/617rkDGEdSsDbu+qNHTaz9SKf7aC8fiIlUdD5RPpH6GEkP0cK7WlvmrEBRtWg=="],
 
-    "@types/node": ["@types/node@24.10.0", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A=="],
+    "@types/node": ["@types/node@24.10.1", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ=="],
 
-    "@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],
+    "@types/react": ["@types/react@19.2.3", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-k5dJVszUiNr1DSe8Cs+knKR6IrqhqdhpUwzqhkS8ecQTSf3THNtbfIp/umqHMpX2bv+9dkx3fwDv/86LcSfvSg=="],
 
-    "@types/react-dom": ["@types/react-dom@19.2.2", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw=="],
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
 
-    "atproto-ui": ["atproto-ui@0.7.2", "", { "dependencies": { "@atcute/atproto": "^3.1.7", "@atcute/bluesky": "^3.2.3", "@atcute/client": "^4.0.3", "@atcute/identity-resolver": "^1.1.3", "@atcute/tangled": "^1.0.6" }, "peerDependencies": { "react": "^18.2.0 || ^19.0.0", "react-dom": "^18.2.0 || ^19.0.0" }, "optionalPeers": ["react-dom"] }, "sha512-bVHjur5Wh5g+47p8Zaq7iZkd5zpqw5A8xg0z5rsDWkmRvqO8E3kZbL9Svco0qWQM/jg4akG/97Vn1XecATovzg=="],
+    "atproto-ui": ["atproto-ui@0.11.3", "", { "dependencies": { "@atcute/atproto": "^3.1.7", "@atcute/bluesky": "^3.2.3", "@atcute/client": "^4.0.3", "@atcute/identity-resolver": "^1.1.3", "@atcute/tangled": "^1.0.10" }, "peerDependencies": { "react": "^18.2.0 || ^19.0.0", "react-dom": "^18.2.0 || ^19.0.0" }, "optionalPeers": ["react-dom"] }, "sha512-NIBsORuo9lpCpr1SNKcKhNvqOVpsEy9IoHqFe1CM9gNTArpQL1hUcoP1Cou9a1O5qzCul9kaiu5xBHnB81I/WQ=="],
 
     "bun": ["bun@1.3.2", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "1.3.2", "@oven/bun-darwin-x64": "1.3.2", "@oven/bun-darwin-x64-baseline": "1.3.2", "@oven/bun-linux-aarch64": "1.3.2", "@oven/bun-linux-aarch64-musl": "1.3.2", "@oven/bun-linux-x64": "1.3.2", "@oven/bun-linux-x64-baseline": "1.3.2", "@oven/bun-linux-x64-musl": "1.3.2", "@oven/bun-linux-x64-musl-baseline": "1.3.2", "@oven/bun-windows-x64": "1.3.2", "@oven/bun-windows-x64-baseline": "1.3.2" }, "os": [ "linux", "win32", "darwin", ], "cpu": [ "x64", "arm64", ], "bin": { "bun": "bin/bun.exe", "bunx": "bin/bunx.exe" } }, "sha512-x75mPJiEfhO1j4Tfc65+PtW6ZyrAB6yTZInydnjDZXF9u9PRAnr6OK3v0Q9dpDl0dxRHkXlYvJ8tteJxc8t4Sw=="],
 
···
 
     "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
-    "tailwind-merge": ["tailwind-merge@3.3.1", "", {}, "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="],
+    "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
 
     "tailwindcss": ["tailwindcss@4.1.17", "", {}, "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q=="],
 

package.json

···
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
-    "atproto-ui": "^0.7.2",
+    "atproto-ui": "0.11.3",
     "bun-plugin-tailwind": "^0.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

src/components/sections/Header.tsx

···
 import type { RefObject } from "react"
+import { CurrentlyPlaying, LastPlayed, type AtProtoStyles } from "atproto-ui"
 import { personalInfo, currentRole, skills } from "../../data/portfolio"
 
 interface HeaderProps {
···
         <div className="absolute inset-0 bg-background/70"></div>
       </div>
 
-      <div className="grid lg:grid-cols-5 gap-12 sm:gap-16 w-full relative z-10">
+      <div className="grid lg:grid-cols-5 gap-12 sm:gap-16 w-full relative z-10 items-center">
         <div className="lg:col-span-3 space-y-6 sm:space-y-8">
           <div className="space-y-3 sm:space-y-2">
             <div className="text-sm text-gray-300 font-mono tracking-wider">PORTFOLIO / 2025</div>
···
             </h1>
           </div>
 
-          <div className="space-y-6 max-w-md">
+          <div className="space-y-6 max-w-md ">
             <p className="text-lg sm:text-xl text-stone-200 leading-relaxed">
               {personalInfo.description.map((part, i) => {
                 if (part.url) {
···
 
         <div className="lg:col-span-2 flex flex-col justify-end space-y-6 sm:space-y-8 mt-8 lg:mt-0">
           <div className="space-y-4">
-            <div className="text-sm text-gray-300 font-mono">CURRENTLY</div>
-            <div className="space-y-2">
-              <div className="text-white">{currentRole.title}</div>
-              <div className="text-sm text-gray-300">{personalInfo.availability.location}</div>
-              <div className="text-gray-300">@ {currentRole.company}</div>
-              <div className="text-xs text-gray-100">{currentRole.period}</div>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div className="text-sm text-gray-300 font-mono">FOCUS</div>
-            <div className="flex flex-wrap gap-2">
-              {skills.map((skill) => (
-                <span
-                  key={skill}
-                  className="glass glass-hover px-3 py-1 text-xs rounded-full transition-colors duration-300"
-                >
-                  {skill}
-                </span>
-              ))}
+            <p className="text-sm text-gray-300 font-mono">IM LISTENING TO:</p>
+            <div className="glass rounded-2xl" style={{
+              '--atproto-color-bg': 'transparent',
+              '--atproto-color-border': 'transparent',
+              '--atproto-color-bg-elevated': 'rgba(255, 255, 255, 0.20)',
+              '--atproto-color-text': 'white',
+              '--atproto-color-text-secondary': 'rgba(255, 255, 255, 0.80)',
+            } as AtProtoStyles }>
+              <CurrentlyPlaying did="nekomimi.pet"/>
             </div>
           </div>
         </div>

src/components/ui/card.tsx

···
   return (
     <div
       data-slot="card"
-      className={cn("glass glass-hover text-card-foreground flex flex-col gap-6 rounded-xl py-6", className)}
+      className={cn("text-card-foreground flex flex-col gap-6 rounded-xl py-6", className)}
       {...props}
     />
   );

src/index.html

···
 				<filter id="frosted" x="0%" y="0%" width="100%" height="100%">
 					<feTurbulence
 						type="fractalNoise"
-						baseFrequency="0.008 0.008"
+						baseFrequency="0.012 0.012"
 						numOctaves="2"
 						seed="92"
 						result="noise"

styles/globals.css

···
 		--shadow-color: rgba(255, 255, 255, 0.7);
 
 		/* Painted glass */
-		--tint-color:  rgba(255, 255, 255, 0.08);
-		--tint-opacity: 0.4;
+		--tint-color:  rgba(255, 255, 255, 0.28);
+		--tint-opacity: 1;
 
 		/* Background frost */
 		--frost-blur: 2px;
···
 		box-shadow:
 			/*0 0 0 2px rgba(255, 255, 255, 0.7),*/
 			0 20px 40px rgba(0, 0, 0, 0.16);
+		transform: scale(1.05); /* Scales to 105% of original size */
 	}
 }