git.stevedylan.dev

chore: Updated images and header b712ec01

Steve · 2024-12-09 10:18 4 file(s) · +20 −2

src/components/DecryptingHeader.astro +4 −0

const { text, className = "" } = Astro.props;
---

<div>

<h1 class:list={[className]} data-decrypting-text data-text={text}>
  {text}
</h1>
<slot />
</div>

<script>
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?";

src/components/blog/Hero.astro +3 −1

---
import { getFormattedDate } from "@/utils";
import type { CollectionEntry } from "astro:content";
import DecryptingHeader from "../DecryptingHeader.astro";

interface Props {
	content: CollectionEntry<"post">;

const postDate = getFormattedDate(content.data.publishDate);
---

<h1 class="title mb-3 sm:mb-1">{content.data.title}</h1>
<DecryptingHeader text={content.data.title} className="title mb-3 sm:mb-1">
<time datetime={datetime}>{postDate}</time>
{
	!!content.data.tags?.length && (

		</div>
	)
}
</DecryptingHeader>
<p class="mt-8">{content.data.description}</p>

src/pages/about.astro +2 −1

		<div class="flex justify-center">
			<Image
				src={aboutImg}
				alt="A cartoon share looking at the 'Astro.build' logo"
				alt="Steve pfp"
				loading="eager"
				class="animate-fade-in"
			/>
		</div>
		<p>Here's some more info about me:</p>

tailwind.config.cjs +11 −0

				accent: "var(--theme-accent)",
				"accent-2": "var(--theme-accent-2)",
			},
			keyframes: {
				fadeIn: {
					from: { opacity: 0 },
					to: {
						opacity: 1,
					},
				},
			},
			animation: {
				"fade-in": "fadeIn 1s ease-in forwards",
			},
			fontFamily: {
				// Add any custom fonts here
				sans: ["Commit Mono", ...fontFamily.sans],

1	1		---
2	2		import { getFormattedDate } from "@/utils";
3	3		import type { CollectionEntry } from "astro:content";
	4	+	import DecryptingHeader from "../DecryptingHeader.astro";
4	5
5	6		interface Props {
6	7		content: CollectionEntry<"post">;

12	13		const postDate = getFormattedDate(content.data.publishDate);
13	14		---
14	15
15		-	<h1 class="title mb-3 sm:mb-1">{content.data.title}</h1>
	16	+	<DecryptingHeader text={content.data.title} className="title mb-3 sm:mb-1">
16	17		<time datetime={datetime}>{postDate}</time>
17	18		{
18	19		!!content.data.tags?.length && (

49	50		</div>
50	51		)
51	52		}
	53	+	</DecryptingHeader>
52	54		<p class="mt-8">{content.data.description}</p>

26	26		accent: "var(--theme-accent)",
27	27		"accent-2": "var(--theme-accent-2)",
28	28		},
	29	+	keyframes: {
	30	+	fadeIn: {
	31	+	from: { opacity: 0 },
	32	+	to: {
	33	+	opacity: 1,
	34	+	},
	35	+	},
	36	+	},
	37	+	animation: {
	38	+	"fade-in": "fadeIn 1s ease-in forwards",
	39	+	},
29	40		fontFamily: {
30	41		// Add any custom fonts here
31	42		sans: ["Commit Mono", ...fontFamily.sans],

7	7		const { text, className = "" } = Astro.props;
8	8		---
9	9
	10	+	<div>
	11	+
10	12		<h1 class:list={[className]} data-decrypting-text data-text={text}>
11	13		{text}
12	14		</h1>
	15	+	<slot />
	16	+	</div>
13	17
14	18		<script>
15	19		const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}\|;:,.<>?";

65	65		<div class="flex justify-center">
66	66		<Image
67	67		src={aboutImg}
68		-	alt="A cartoon share looking at the 'Astro.build' logo"
	68	+	alt="Steve pfp"
69	69		loading="eager"
	70	+	class="animate-fade-in"
70	71		/>
71	72		</div>
72	73		<p>Here's some more info about me:</p>