git.stevedylan.dev

src/components/common/ImageCollage.astro +5 −4


interface Props {
	images: (ImageMetadata | string)[];
	alts: string[];
}

const { images } = Astro.props;
const { images, alts } = Astro.props;
---

<div class="image-collage">

		{images.map((img, index) => (
			<div class="collage-item" data-index={index}>
				{typeof img === "string" ? (
					<img src={img} alt={`Image ${index + 1}`} loading="lazy" />
					<img src={img} alt={alts[index]} loading="lazy" />
				) : (
					<Image src={img} alt={`Image ${index + 1}`} loading="lazy" />
					<Image src={img} alt={alts[index]} loading="lazy" />
				)}
			</div>
		))}
	</div>
	<div class="collage-overlay" id="collage-overlay">
		<img src="" alt="" id="expanded-image" />
		<img src="" alt="Expanded image preview" id="expanded-image" />
	</div>
</div>


src/components/common/OutLinkButton.astro +1 −1

---

<a class="flex items-center justify-start gap-2 font-bold" href={link} target="_blank">
	<Image src={image} width={30} height={30} alt={`Link to ${site}`} />
	<Image src={image} width={30} height={30} alt={`${site} logo`} />
	Read this post on {site}
</a>

src/components/layout/Footer.astro +1 −1

		});
	</script>
  <a href="https://blog.kagi.com/small-web-updates">
    <Image inferSize={true} src="https://kagifeedback.org/assets/files/2025-11-27/1764250950-635837-80x15-2.png" alt="kagi small web"/>
    <Image inferSize={true} src="https://kagifeedback.org/assets/files/2025-11-27/1764250950-635837-80x15-2.png" alt="Kagi Small Web badge"/>
  </a>
</footer>

src/components/page/BookCard.astro +1 −1

		{book.cover_url ? (
			<img
				src={book.cover_url}
				alt=""
				alt={`Cover of ${book.title} by ${book.authors}`}
				width="56"
				height="80"
				style="width:56px;height:80px;object-fit:cover;"

src/components/page/LinkCard.astro +1 −1

		{link.favicon_url && (
			<img
				src={link.favicon_url}
				alt=""
				alt={`Favicon for ${domain}`}
				width="16"
				height="16"
				loading="lazy"

src/content/pages/about.mdx +1 −1

My name is Steve and I'm a DX Engineer with a passion for developer tooling that advances an open web. I'm currently working at [Stablecore](https://stablecore.com) as a senior solutions engineer. I'm also working on a host of other [projects](/projects), the latest being [Andromeda](https://andromeda.build). Check out what else I've been up to recently at my [now page](/now)!

<div class="flex justify-center not-prose">
  <Image src={aboutImg} alt="Steve pfp" loading="eager" class="animate-fade-in" />
  <Image src={aboutImg} alt="Profile picture of Steve Simkins" loading="eager" class="animate-fade-in" />
</div>

Here's some more info about me:

src/content/post/when-ai-gives-the-ick.mdx +7 −2

import friend4 from '../../assets/blog-images/friend-4.jpeg'
import friend5 from '../../assets/blog-images/friend-5.jpeg'

![friend-ads](../../assets/blog-images/friend-1.jpeg)
![NYC subway Friend ad with critical handwritten graffiti from passersby](../../assets/blog-images/friend-1.jpeg)

A few days ago OpenAI released Sora, which was not only the latest version of their video generation model, but also a social app. Humans sign up, but the only content is that generated by users through AI. If you're like me, the very thought of an AI-only generated feed might have given you the "ick." It's not the first time either. The debut of Friend (an AI powered "friend" app / pendant you wear around your neck) got even more backlash recently with their NYC subway ads.

Needless to say, people didn't like it.

<ImageCollage images={[friend2, friend3, friend4, friend5]}/>
<ImageCollage images={[friend2, friend3, friend4, friend5]} alts={[
  "NYC subway Friend ad with handwritten graffiti criticizing the product",
  "NYC subway Friend ad defaced with anti-AI commentary",
  "NYC subway Friend ad covered in critical handwritten responses",
  "NYC subway Friend ad with graffiti pushing back on AI companionship"
]}/>


It's these kinds of AI innovations that give us the "ick," but why? There's plenty of AI tools we use all the time without much thought, but sometimes we get the feeling that the tech goes "too far." To understand why, we need to step back and ask a few more questions.

src/pages/404.astro +1 −1

	<h1 class="title mb-6">404 | Oops something went wrong</h1>
	<p class="mb-8">Please use the navigation to find your way back</p>
	<div class="my-4 grid justify-center">
		<Image src="/icon.png" width={256} height={256} alt="logo" loading="eager" />
		<Image src="/icon.png" width={256} height={256} alt="stevedylan.dev site logo" loading="eager" />
	</div>
</PageLayout>

src/pages/blogroll.astro +1 −1

              {feed.favicon_url && (
                <img
                  src={feed.favicon_url}
                  alt=""
                  alt={`Favicon for ${feed.title}`}
                  width="16"
                  height="16"
                  loading="lazy"

src/pages/cellar/[short_id].astro +3 −3

						<div class="w-full">
							<img
								src={`${CELLAR_API_URL}/wines/${wine.short_id}/image`}
								alt={wine.name}
								alt={`Bottle photo of ${wine.name}`}
								class="w-full object-cover rounded wine-image"
								loading="eager"
							/>

						<div class="flex flex-col items-center gap-4 p-3">
							<img
								src={`${CELLAR_API_URL}/api/wines/${wine.short_id}/pentagon.svg`}
								alt="Taste profile"
								alt={`Pentagon chart of taste profile for ${wine.name}`}
								width="250"
								height="250"
								loading="eager"
							/>
							<img
								src={`${CELLAR_API_URL}/api/wines/${wine.short_id}/bars.svg`}
								alt="Appearance and nose"
								alt={`Bar chart of appearance and nose for ${wine.name}`}
								width="250"
								loading="eager"
							/>

src/pages/index.astro +6 −6

            height="100"
            loading="eager"
            width="100"
            alt="sequoia logo"
            alt="Tree icon representing Sequoia"
          /> Sequoia
        </a>:
        <p class="inline-block sm:mt-2">Content publishing CLI for ATProto</p>

            loading="eager"
            height="100"
            width="100"
            alt="bhvr"
            alt="Beaver icon representing bhvr"
          /> bhvr
        </a>:
        <p class="inline-block sm:mt-2">

            loading="lazy"
            src="https://api.iconify.design/ph:cowboy-hat-fill.svg?color=%23888888"
            class="inline-block h-4 w-4"
            alt="cowboy logo"
            alt="Cowboy hat icon representing Cosmic Cowboys"
          /> Cosmic Cowboys
        </a>:
        <p class="inline-block sm:mt-2">

            loading="lazy"
            src="https://api.iconify.design/material-symbols:photo-camera.svg?color=%23888888"
            class="inline-block h-4 w-4"
            alt="camera icon"
            alt="Camera icon representing photography portfolio"
          /> Photos
        </a>:
        <p class="inline-block sm:mt-2">My personal photography portfolio</p>

            loading="lazy"
            src="https://files.stevedylan.dev/stablecore.png"
            class="inline-block h-4 w-4"
            alt="Stablecore Logo"
            alt="Stablecore company logo"
          /> Stablecore
        </a>:
        <p class="inline-block sm:mt-2">

            loading="lazy"
            src="https://files.stevedylan.dev/dino-icon-2.png"
            class="inline-block h-4 w-4"
            alt="Dino Logo"
            alt="Pixel art dinosaur icon"
          /> Dino
        </a>:
        <p class="inline-block sm:mt-2">Just the dino</p>

46	46		{feed.favicon_url && (
47	47		<img
48	48		src={feed.favicon_url}
49		-	alt=""
	49	+	alt={`Favicon for ${feed.title}`}
50	50		width="16"
51	51		height="16"
52	52		loading="lazy"

59	59		height="100"
60	60		loading="eager"
61	61		width="100"
62		-	alt="sequoia logo"
	62	+	alt="Tree icon representing Sequoia"
63	63		/> Sequoia
64	64		</a>:
65	65		<p class="inline-block sm:mt-2">Content publishing CLI for ATProto</p>

76	76		loading="eager"
77	77		height="100"
78	78		width="100"
79		-	alt="bhvr"
	79	+	alt="Beaver icon representing bhvr"
80	80		/> bhvr
81	81		</a>:
82	82		<p class="inline-block sm:mt-2">

96	96		loading="lazy"
97	97		src="https://api.iconify.design/ph:cowboy-hat-fill.svg?color=%23888888"
98	98		class="inline-block h-4 w-4"
99		-	alt="cowboy logo"
	99	+	alt="Cowboy hat icon representing Cosmic Cowboys"
100	100		/> Cosmic Cowboys
101	101		</a>:
102	102		<p class="inline-block sm:mt-2">

115	115		loading="lazy"
116	116		src="https://api.iconify.design/material-symbols:photo-camera.svg?color=%23888888"
117	117		class="inline-block h-4 w-4"
118		-	alt="camera icon"
	118	+	alt="Camera icon representing photography portfolio"
119	119		/> Photos
120	120		</a>:
121	121		<p class="inline-block sm:mt-2">My personal photography portfolio</p>

132	132		loading="lazy"
133	133		src="https://files.stevedylan.dev/stablecore.png"
134	134		class="inline-block h-4 w-4"
135		-	alt="Stablecore Logo"
	135	+	alt="Stablecore company logo"
136	136		/> Stablecore
137	137		</a>:
138	138		<p class="inline-block sm:mt-2">

151	151		loading="lazy"
152	152		src="https://files.stevedylan.dev/dino-icon-2.png"
153	153		class="inline-block h-4 w-4"
154		-	alt="Dino Logo"
	154	+	alt="Pixel art dinosaur icon"
155	155		/> Dino
156	156		</a>:
157	157		<p class="inline-block sm:mt-2">Just the dino</p>

4	4
5	5		interface Props {
6	6		images: (ImageMetadata \| string)[];
	7	+	alts: string[];
7	8		}
8	9
9		-	const { images } = Astro.props;
	10	+	const { images, alts } = Astro.props;
10	11		---
11	12
12	13		<div class="image-collage">

14	15		{images.map((img, index) => (
15	16		<div class="collage-item" data-index={index}>
16	17		{typeof img === "string" ? (
17		-	<img src={img} alt={`Image ${index + 1}`} loading="lazy" />
	18	+	<img src={img} alt={alts[index]} loading="lazy" />
18	19		) : (
19		-	<Image src={img} alt={`Image ${index + 1}`} loading="lazy" />
	20	+	<Image src={img} alt={alts[index]} loading="lazy" />
20	21		)}
21	22		</div>
22	23		))}
23	24		</div>
24	25		<div class="collage-overlay" id="collage-overlay">
25		-	<img src="" alt="" id="expanded-image" />
	26	+	<img src="" alt="Expanded image preview" id="expanded-image" />
26	27		</div>
27	28		</div>
28	29

4	4		---
5	5
6	6		<a class="flex items-center justify-start gap-2 font-bold" href={link} target="_blank">
7		-	<Image src={image} width={30} height={30} alt={`Link to ${site}`} />
	7	+	<Image src={image} width={30} height={30} alt={`${site} logo`} />
8	8		Read this post on {site}
9	9		</a>

26	26		});
27	27		</script>
28	28		<a href="https://blog.kagi.com/small-web-updates">
29		-	<Image inferSize={true} src="https://kagifeedback.org/assets/files/2025-11-27/1764250950-635837-80x15-2.png" alt="kagi small web"/>
	29	+	<Image inferSize={true} src="https://kagifeedback.org/assets/files/2025-11-27/1764250950-635837-80x15-2.png" alt="Kagi Small Web badge"/>
30	30		</a>
31	31		</footer>

16	16		{book.cover_url ? (
17	17		<img
18	18		src={book.cover_url}
19		-	alt=""
	19	+	alt={`Cover of ${book.title} by ${book.authors}`}
20	20		width="56"
21	21		height="80"
22	22		style="width:56px;height:80px;object-fit:cover;"

23	23		{link.favicon_url && (
24	24		<img
25	25		src={link.favicon_url}
26		-	alt=""
	26	+	alt={`Favicon for ${domain}`}
27	27		width="16"
28	28		height="16"
29	29		loading="lazy"

9	9		My name is Steve and I'm a DX Engineer with a passion for developer tooling that advances an open web. I'm currently working at [Stablecore](https://stablecore.com) as a senior solutions engineer. I'm also working on a host of other [projects](/projects), the latest being [Andromeda](https://andromeda.build). Check out what else I've been up to recently at my [now page](/now)!
10	10
11	11		<div class="flex justify-center not-prose">
12		-	<Image src={aboutImg} alt="Steve pfp" loading="eager" class="animate-fade-in" />
	12	+	<Image src={aboutImg} alt="Profile picture of Steve Simkins" loading="eager" class="animate-fade-in" />
13	13		</div>
14	14
15	15		Here's some more info about me:

13	13		import friend4 from '../../assets/blog-images/friend-4.jpeg'
14	14		import friend5 from '../../assets/blog-images/friend-5.jpeg'
15	15
16		-	![friend-ads](../../assets/blog-images/friend-1.jpeg)
	16	+	![NYC subway Friend ad with critical handwritten graffiti from passersby](../../assets/blog-images/friend-1.jpeg)
17	17
18	18		A few days ago OpenAI released Sora, which was not only the latest version of their video generation model, but also a social app. Humans sign up, but the only content is that generated by users through AI. If you're like me, the very thought of an AI-only generated feed might have given you the "ick." It's not the first time either. The debut of Friend (an AI powered "friend" app / pendant you wear around your neck) got even more backlash recently with their NYC subway ads.
19	19
20	20		Needless to say, people didn't like it.
21	21
22		-	<ImageCollage images={[friend2, friend3, friend4, friend5]}/>
	22	+	<ImageCollage images={[friend2, friend3, friend4, friend5]} alts={[
	23	+	"NYC subway Friend ad with handwritten graffiti criticizing the product",
	24	+	"NYC subway Friend ad defaced with anti-AI commentary",
	25	+	"NYC subway Friend ad covered in critical handwritten responses",
	26	+	"NYC subway Friend ad with graffiti pushing back on AI companionship"
	27	+	]}/>
23	28
24	29
25	30		It's these kinds of AI innovations that give us the "ick," but why? There's plenty of AI tools we use all the time without much thought, but sometimes we get the feeling that the tech goes "too far." To understand why, we need to step back and ask a few more questions.

12	12		<h1 class="title mb-6">404 \| Oops something went wrong</h1>
13	13		<p class="mb-8">Please use the navigation to find your way back</p>
14	14		<div class="my-4 grid justify-center">
15		-	<Image src="/icon.png" width={256} height={256} alt="logo" loading="eager" />
	15	+	<Image src="/icon.png" width={256} height={256} alt="stevedylan.dev site logo" loading="eager" />
16	16		</div>
17	17		</PageLayout>

42	42		<div class="w-full">
43	43		<img
44	44		src={`${CELLAR_API_URL}/wines/${wine.short_id}/image`}
45		-	alt={wine.name}
	45	+	alt={`Bottle photo of ${wine.name}`}
46	46		class="w-full object-cover rounded wine-image"
47	47		loading="eager"
48	48		/>

52	52		<div class="flex flex-col items-center gap-4 p-3">
53	53		<img
54	54		src={`${CELLAR_API_URL}/api/wines/${wine.short_id}/pentagon.svg`}
55		-	alt="Taste profile"
	55	+	alt={`Pentagon chart of taste profile for ${wine.name}`}
56	56		width="250"
57	57		height="250"
58	58		loading="eager"
59	59		/>
60	60		<img
61	61		src={`${CELLAR_API_URL}/api/wines/${wine.short_id}/bars.svg`}
62		-	alt="Appearance and nose"
	62	+	alt={`Bar chart of appearance and nose for ${wine.name}`}
63	63		width="250"
64	64		loading="eager"
65	65		/>