···

       
27
       
27
       
 
       
    command: |

     

       
28
       
28
       
 
       
      export PATH="$HOME/.nix-profile/bin:$PATH"

     

       
29
       
29
       
 
       


     

       
30
       
30
       
+
       
      rm -rf bun.lock

     

       
30
       
31
       
 
       
      bun install

     

       
31
       
32
       
 
       


     

       
32
       
33
       
 
       
      bun run build

     

···

       
1
       
1
       
 
       
{

     

       
2
       
2
       
 
       
  "lockfileVersion": 1,

     

       
3
       
3
       
+
       
  "configVersion": 1,

     

       
3
       
4
       
 
       
  "workspaces": {

     

       
4
       
5
       
 
       
    "": {

     

       
5
       
6
       
 
       
      "name": "bun-react-template",

     
···

       
7
       
8
       
 
       
        "@radix-ui/react-label": "^2.1.7",

     

       
8
       
9
       
 
       
        "@radix-ui/react-select": "^2.2.6",

     

       
9
       
10
       
 
       
        "@radix-ui/react-slot": "^1.2.3",

     

       
10
       
10
       
-
       
        "atproto-ui": "^0.7.2",

     

       
11
       
11
       
+
       
        "atproto-ui": "0.11.3",

     

       
11
       
12
       
 
       
        "bun-plugin-tailwind": "^0.1.2",

     

       
12
       
13
       
 
       
        "class-variance-authority": "^0.7.1",

     

       
13
       
14
       
 
       
        "clsx": "^2.1.1",

     
···

       
132
       
133
       
 
       


     

       
133
       
134
       
 
       
    "@types/bun": ["@types/bun@1.3.2", "", { "dependencies": { "bun-types": "1.3.2" } }, "sha512-t15P7k5UIgHKkxwnMNkJbWlh/617rkDGEdSsDbu+qNHTaz9SKf7aC8fiIlUdD5RPpH6GEkP0cK7WlvmrEBRtWg=="],

     

       
134
       
135
       
 
       


     

       
135
       
135
       
-
       
    "@types/node": ["@types/node@24.10.0", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A=="],

     

       
136
       
136
       
+
       
    "@types/node": ["@types/node@24.10.1", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ=="],

     

       
136
       
137
       
 
       


     

       
137
       
137
       
-
       
    "@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],

     

       
138
       
138
       
+
       
    "@types/react": ["@types/react@19.2.3", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-k5dJVszUiNr1DSe8Cs+knKR6IrqhqdhpUwzqhkS8ecQTSf3THNtbfIp/umqHMpX2bv+9dkx3fwDv/86LcSfvSg=="],

     

       
138
       
139
       
 
       


     

       
139
       
139
       
-
       
    "@types/react-dom": ["@types/react-dom@19.2.2", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw=="],

     

       
140
       
140
       
+
       
    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],

     

       
140
       
141
       
 
       


     

       
141
       
142
       
 
       
    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],

     

       
142
       
143
       
 
       


     

       
143
       
143
       
-
       
    "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=="],

     

       
144
       
144
       
+
       
    "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=="],

     

       
144
       
145
       
 
       


     

       
145
       
146
       
 
       
    "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=="],

     

       
146
       
147
       
 
       


     
···

       
174
       
175
       
 
       


     

       
175
       
176
       
 
       
    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],

     

       
176
       
177
       
 
       


     

       
177
       
177
       
-
       
    "tailwind-merge": ["tailwind-merge@3.3.1", "", {}, "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="],

     

       
178
       
178
       
+
       
    "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],

     

       
178
       
179
       
 
       


     

       
179
       
180
       
 
       
    "tailwindcss": ["tailwindcss@4.1.17", "", {}, "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q=="],

     

       
180
       
181
       
 
       


     

···

       
12
       
12
       
 
       
    "@radix-ui/react-label": "^2.1.7",

     

       
13
       
13
       
 
       
    "@radix-ui/react-select": "^2.2.6",

     

       
14
       
14
       
 
       
    "@radix-ui/react-slot": "^1.2.3",

     

       
15
       
15
       
-
       
    "atproto-ui": "^0.7.2",

     

       
15
       
15
       
+
       
    "atproto-ui": "0.11.3",

     

       
16
       
16
       
 
       
    "bun-plugin-tailwind": "^0.1.2",

     

       
17
       
17
       
 
       
    "class-variance-authority": "^0.7.1",

     

       
18
       
18
       
 
       
    "clsx": "^2.1.1",

     

···

       
1
       
1
       
 
       
import type { RefObject } from "react"

     

       
2
       
2
       
+
       
import { CurrentlyPlaying, LastPlayed, type AtProtoStyles } from "atproto-ui"

     

       
2
       
3
       
 
       
import { personalInfo, currentRole, skills } from "../../data/portfolio"

     

       
3
       
4
       
 
       


     

       
4
       
5
       
 
       
interface HeaderProps {

     
···

       
26
       
27
       
 
       
        <div className="absolute inset-0 bg-background/70"></div>

     

       
27
       
28
       
 
       
      </div>

     

       
28
       
29
       
 
       


     

       
29
       
29
       
-
       
      <div className="grid lg:grid-cols-5 gap-12 sm:gap-16 w-full relative z-10">

     

       
30
       
30
       
+
       
      <div className="grid lg:grid-cols-5 gap-12 sm:gap-16 w-full relative z-10 items-center">

     

       
30
       
31
       
 
       
        <div className="lg:col-span-3 space-y-6 sm:space-y-8">

     

       
31
       
32
       
 
       
          <div className="space-y-3 sm:space-y-2">

     

       
32
       
33
       
 
       
            <div className="text-sm text-gray-300 font-mono tracking-wider">PORTFOLIO / 2025</div>

     
···

       
37
       
38
       
 
       
            </h1>

     

       
38
       
39
       
 
       
          </div>

     

       
39
       
40
       
 
       


     

       
40
       
40
       
-
       
          <div className="space-y-6 max-w-md">

     

       
41
       
41
       
+
       
          <div className="space-y-6 max-w-md ">

     

       
41
       
42
       
 
       
            <p className="text-lg sm:text-xl text-stone-200 leading-relaxed">

     

       
42
       
43
       
 
       
              {personalInfo.description.map((part, i) => {

     

       
43
       
44
       
 
       
                if (part.url) {

     
···

       
119
       
120
       
 
       


     

       
120
       
121
       
 
       
        <div className="lg:col-span-2 flex flex-col justify-end space-y-6 sm:space-y-8 mt-8 lg:mt-0">

     

       
121
       
122
       
 
       
          <div className="space-y-4">

     

       
122
       
122
       
-
       
            <div className="text-sm text-gray-300 font-mono">CURRENTLY</div>

     

       
123
       
123
       
-
       
            <div className="space-y-2">

     

       
124
       
124
       
-
       
              <div className="text-white">{currentRole.title}</div>

     

       
125
       
125
       
-
       
              <div className="text-sm text-gray-300">{personalInfo.availability.location}</div>

     

       
126
       
126
       
-
       
              <div className="text-gray-300">@ {currentRole.company}</div>

     

       
127
       
127
       
-
       
              <div className="text-xs text-gray-100">{currentRole.period}</div>

     

       
128
       
128
       
-
       
            </div>

     

       
129
       
129
       
-
       
          </div>

     

       
130
       
130
       
-
       


     

       
131
       
131
       
-
       
          <div className="space-y-4">

     

       
132
       
132
       
-
       
            <div className="text-sm text-gray-300 font-mono">FOCUS</div>

     

       
133
       
133
       
-
       
            <div className="flex flex-wrap gap-2">

     

       
134
       
134
       
-
       
              {skills.map((skill) => (

     

       
135
       
135
       
-
       
                <span

     

       
136
       
136
       
-
       
                  key={skill}

     

       
137
       
137
       
-
       
                  className="glass glass-hover px-3 py-1 text-xs rounded-full transition-colors duration-300"

     

       
138
       
138
       
-
       
                >

     

       
139
       
139
       
-
       
                  {skill}

     

       
140
       
140
       
-
       
                </span>

     

       
141
       
141
       
-
       
              ))}

     

       
123
       
123
       
+
       
            <p className="text-sm text-gray-300 font-mono">IM LISTENING TO:</p>

     

       
124
       
124
       
+
       
            <div className="glass rounded-2xl" style={{

     

       
125
       
125
       
+
       
              '--atproto-color-bg': 'transparent',

     

       
126
       
126
       
+
       
              '--atproto-color-border': 'transparent',

     

       
127
       
127
       
+
       
              '--atproto-color-bg-elevated': 'rgba(255, 255, 255, 0.20)',

     

       
128
       
128
       
+
       
              '--atproto-color-text': 'white',

     

       
129
       
129
       
+
       
              '--atproto-color-text-secondary': 'rgba(255, 255, 255, 0.80)',

     

       
130
       
130
       
+
       
            } as AtProtoStyles }>

     

       
131
       
131
       
+
       
              <CurrentlyPlaying did="nekomimi.pet"/>

     

       
142
       
132
       
 
       
            </div>

     

       
143
       
133
       
 
       
          </div>

     

       
144
       
134
       
 
       
        </div>

     

···

       
6
       
6
       
 
       
  return (

     

       
7
       
7
       
 
       
    <div

     

       
8
       
8
       
 
       
      data-slot="card"

     

       
9
       
9
       
-
       
      className={cn("glass glass-hover text-card-foreground flex flex-col gap-6 rounded-xl py-6", className)}

     

       
9
       
9
       
+
       
      className={cn("text-card-foreground flex flex-col gap-6 rounded-xl py-6", className)}

     

       
10
       
10
       
 
       
      {...props}

     

       
11
       
11
       
 
       
    />

     

       
12
       
12
       
 
       
  );

     

···

       
25
       
25
       
 
       
				<filter id="frosted" x="0%" y="0%" width="100%" height="100%">

     

       
26
       
26
       
 
       
					<feTurbulence

     

       
27
       
27
       
 
       
						type="fractalNoise"

     

       
28
       
28
       
-
       
						baseFrequency="0.008 0.008"

     

       
28
       
28
       
+
       
						baseFrequency="0.012 0.012"

     

       
29
       
29
       
 
       
						numOctaves="2"

     

       
30
       
30
       
 
       
						seed="92"

     

       
31
       
31
       
 
       
						result="noise"

     

···

       
130
       
130
       
 
       
		--shadow-color: rgba(255, 255, 255, 0.7);

     

       
131
       
131
       
 
       


     

       
132
       
132
       
 
       
		/* Painted glass */

     

       
133
       
133
       
-
       
		--tint-color:  rgba(255, 255, 255, 0.08);

     

       
134
       
134
       
-
       
		--tint-opacity: 0.4;

     

       
133
       
133
       
+
       
		--tint-color:  rgba(255, 255, 255, 0.28);

     

       
134
       
134
       
+
       
		--tint-opacity: 1;

     

       
135
       
135
       
 
       


     

       
136
       
136
       
 
       
		/* Background frost */

     

       
137
       
137
       
 
       
		--frost-blur: 2px;

     
···

       
162
       
162
       
 
       
		box-shadow:

     

       
163
       
163
       
 
       
			/*0 0 0 2px rgba(255, 255, 255, 0.7),*/

     

       
164
       
164
       
 
       
			0 20px 40px rgba(0, 0, 0, 0.16);

     

       
165
       
165
       
+
       
		transform: scale(1.05); /* Scales to 105% of original size */

     

       
165
       
166
       
 
       
	}

     

       
166
       
167
       
 
       
}