Skip to content

Commit 40706c8

Browse files
Kyle-UndefinedKyle-Undefined
committed
cleaned up css, html, and other tweaks
1 parent 973adc1 commit 40706c8

12 files changed

Lines changed: 74 additions & 80 deletions

File tree

‎astro.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ export default defineConfig({
2828
"public/favicon.svg",
2929
],
3030
},
31-
name: "Kyle Undefined.dev",
32-
short_name: "Kyle Undefined",
31+
name: "kyleundefined.dev",
32+
short_name: "KyleUndefined",
3333
icons: {
3434
favicons: true,
3535
android: true,

‎src/components/Footer.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
const today = new Date();
33
---
44

5-
<footer class="py-8 mt-12 border-t border-slate-200 dark:border-blog-border">
6-
<div class="max-w-4xl mx-auto px-4 text-center text-slate-500 dark:text-blog-text">
5+
<footer class="py-8 mt-12 border-t border-blog-border">
6+
<div class="max-w-4xl mx-auto px-4 text-center text-blog-text">
77
<p class="text-sm">
88
&copy; {today.getFullYear()} Kyle Undefined. All rights reserved.
99
</p>

‎src/components/Header.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
---
22
33
---
4-
<header class="fixed w-full top-0 z-50 transition-all duration-300 backdrop-blur-md bg-white/70 dark:bg-blog-code-bg/70 border-b border-slate-200/50 dark:border-blog-border/50">
4+
<header class="fixed w-full top-0 z-50 transition-all duration-300 backdrop-blur-md bg-blog-code-bg/70 border-b border-blog-border/50">
55
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
6-
<a href="/" class="text-xl font-bold bg-clip-text text-transparent dark:text-blog-text flip-animate">
6+
<a href="/" class="text-xl font-bold bg-clip-text text-blog-text flip-animate">
77
Kyle Undefined<span data-hover=".dev">.dev</span>
88
</a>
99

1010
<nav class="sm:flex gap-6">
11-
<a href="/blog" class="text-sm font-medium text-slate-600 dark:text-blog-text hover:text-blue-600 dark:hover:text-blog-accent transition-colors">
11+
<a href="/blog" class="text-sm font-medium text-blog-text hover:text-blog-accent transition-colors">
1212
Blog
1313
</a>
1414
<span>|</span>
15-
<a href="/projects" class="text-sm font-medium text-slate-600 dark:text-blog-text hover:text-blue-600 dark:hover:text-blog-accent transition-colors">
15+
<a href="/projects" class="text-sm font-medium text-blog-text hover:text-blog-accent transition-colors">
1616
Projects
1717
</a>
1818
</nav>
1919

2020
<div class="flex items-center gap-4">
21-
<a href="/rss.xml" target="_blank" rel="noopener noreferrer" class="text-slate-500 hover:text-slate-900 dark:text-blog-text dark:hover:text-blog-accent transition-colors">
21+
<a href="/rss.xml" target="_blank" rel="noopener noreferrer" class="text-blog-text hover:text-blog-accent transition-colors">
2222
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rss-icon lucide-rss">
2323
<title>RSS</title>
2424
<path d="M4 11a9 9 0 0 1 9 9"/>
2525
<path d="M4 4a16 16 0 0 1 16 16"/>
2626
<circle cx="5" cy="19" r="1"/>
2727
</svg>
2828
</a>
29-
<a href="https://github.com/kyle-undefined" target="_blank" rel="noopener noreferrer" class="text-slate-500 hover:text-slate-900 dark:text-blog-text dark:hover:text-blog-accent transition-colors">
29+
<a href="https://github.com/kyle-undefined" target="_blank" rel="noopener noreferrer" class="text-blog-text hover:text-blog-accent transition-colors">
3030
<span class="sr-only">GitHub</span>
31-
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-5 h-5 text-slate-400 hover:text-blog-accent dark:hover:text-blog-accent">
31+
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-5 h-5 hover:text-blog-accent">
3232
<title>GitHub</title>
3333
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
3434
</svg>

‎src/components/PostCard.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ const { post } = Astro.props;
99
const { title, description, pubDate } = post.data;
1010
---
1111

12-
<a href={`/blog/${post.slug}`} class="group flex flex-col h-full bg-white dark:bg-blog-code-bg rounded-2xl overflow-hidden shadow-sm hover:shadow-md duration-300 border border-slate-200 dark:border-blog-border hover:border-blue-500 dark:hover:border-blog-accent transition-all duration-300">
13-
<div class="aspect-video w-full overflow-hidden bg-slate-100 dark:bg-[#202020] relative post-hero content-center">
14-
<h3 class="text-2xl font-bold text-slate-900 dark:text-blog-accent mb-2 group-hover:text-blue-600 dark:group-hover:text-blog-code transition-colors text-center">
12+
<a href={`/blog/${post.slug}`} class="group flex flex-col h-full bg-blog-code-bg rounded-2xl overflow-hidden shadow-sm hover:shadow-md duration-300 border border-blog-border hover:border-blog-accent transition-all duration-300">
13+
<div class="aspect-video w-full overflow-hidden bg-[#202020] relative post-hero content-center">
14+
<h3 class="text-2xl font-bold text-blog-accent mb-2 group-hover:text-blog-code transition-colors text-center">
1515
{title}
1616
</h3>
1717
</div>
1818

1919
<div class="p-6 flex flex-col flex-grow">
20-
<div class="text-sm text-slate-500 dark:text-blog-text mb-2">
20+
<div class="text-sm text-blog-text mb-2">
2121
<time datetime={pubDate.toISOString()}>
2222
{pubDate.toLocaleDateString('en-us', {
2323
year: 'numeric',
@@ -26,7 +26,7 @@ const { title, description, pubDate } = post.data;
2626
})}
2727
</time>
2828
</div>
29-
<p class="text-slate-600 dark:text-blog-text text-sm line-clamp-3">
29+
<p class="text-blog-text text-sm line-clamp-3">
3030
{description}
3131
</p>
3232
</div>

‎src/components/ProjectCard.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,39 @@ const { project } = Astro.props;
99
---
1010

1111
<div
12-
class="group block p-6 bg-white dark:bg-blog-code-bg rounded-2xl border border-slate-200 dark:border-blog-border hover:border-blue-500 dark:hover:border-blog-accent transition-all duration-300 shadow-sm hover:shadow-md">
12+
class="group block p-6 bg-blog-code-bg rounded-2xl border border-blog-border hover:border-blog-accent transition-all duration-300 shadow-sm hover:shadow-md">
1313
<div class="flex items-center justify-between mb-4">
14-
<h3 class="text-xl font-bold text-slate-900 dark:text-blog-accent group-hover:text-blue-600 dark:group-hover:text-blog-code transition-colors duration-300">
14+
<h3 class="text-xl font-bold text-blog-accent group-hover:text-blog-code transition-colors duration-300">
1515
{project.data.title}
1616
</h3>
1717
<div class="flex items-center gap-2">
1818
{ project.data.repo ? (
1919
<a href={project.data.repo} target="_blank" rel="noopener noreferrer" aria-label="GitHub">
20-
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-5 h-5 text-slate-400 hover:text-blog-proj-link dark:hover:text-blog-proj-link">
20+
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-5 h-5 text-blog-text hover:text-blog-proj-link transition-colors">
2121
<title>GitHub</title>
2222
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
2323
</svg>
2424
</a>
2525
) : null}
2626
{ project.data.link ? (
2727
<a href={project.data.link} target="_blank" rel="noopener noreferrer" aria-label="Demo">
28-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link-icon lucide-external-link w-5 h-5 text-slate-400 hover:text-blog-proj-link dark:hover:text-blog-proj-link">
28+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link-icon lucide-external-link w-5 h-5 text-blog-text hover:text-blog-proj-link transition-colors">
2929
<title>Demo</title>
3030
<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
3131
</svg>
3232
</a>
3333
) : null}
3434
</div>
3535
</div>
36-
<p class="text-slate-600 dark:text-blog-text mb-6">
36+
<p class="text-blog-text mb-6">
3737
{project.data.description}
3838
</p>
39-
<p class="text-slate-600 dark:text-blog-text mb-6 text-xs">
39+
<p class="text-blog-text mb-6 text-xs">
4040
Git init: {project.data.pubDate.toLocaleDateString()}
4141
</p>
4242
<div class="flex flex-wrap gap-2">
4343
{project.data.tags && project.data.tags.map((tag) => (
44-
<span class="px-3 py-1 text-xs font-medium text-blue-600 dark:text-blog-code bg-blue-50 dark:bg-blog-code-bg/50 border dark:border-blog-code/20 rounded-full">
44+
<span class="px-3 py-1 text-xs font-medium text-blog-code bg-blog-code-bg/50 border border-blog-code/20 rounded-full">
4545
{tag}
4646
</span>
4747
))}

‎src/layouts/Layout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ interface Props {
99
description?: string;
1010
}
1111
12-
const { title, description = "Kyle Undefined.dev, just a dude who enjoys writing code & learning;" } = Astro.props;
12+
const { title, description = "Just a dude who enjoys writing code & learning;" } = Astro.props;
1313
---
1414

1515
<!doctype html>
16-
<html lang="en" class="scroll-smooth dark">
16+
<html lang="en" class="scroll-smooth">
1717
<head>
1818
<meta charset="utf-8" />
1919
<meta name="description" content={description} />

‎src/pages/404.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@ import Layout from '../layouts/Layout.astro';
44
---
55

66
<PostHogLayout>
7-
<Layout title='404 | Kyle Undefined'>
7+
<Layout title='404 | KyleUndefined.dev' description='404 Page'>
88
<section class="py-12 md:py-10">
99
<div class="space-y-6">
1010
<h1 class="text-4xl md:text-6xl font-bold tracking-tighter">
11-
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-violet-600 dark:from-blog-accent dark:to-blog-code">Uh-oh</span>...
11+
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blog-accent to-blog-code">Uh-oh</span>...
1212
</h1>
13-
<p class="text-xl md:text-2xl text-slate-600 dark:text-blog-text max-w-2xl">
13+
<p class="text-xl md:text-2xl text-blog-text max-w-2xl">
1414
Looks like I don't provide what you're looking for.
1515
</p>
16-
<p class="text-xl md:text-2xl text-slate-600 dark:text-blog-text max-w-2xl">
16+
<p class="text-xl md:text-2xl text-blog-text max-w-2xl">
1717
I'm not here to stop your journey, you'll find it.
1818
</p>
19-
<p class="text-xl md:text-2xl text-slate-600 dark:text-blog-text max-w-2xl">
19+
<p class="text-xl md:text-2xl text-blog-text max-w-2xl">
2020
Go on out there, friend, I believe in you.
2121
</p>
22-
<p class="text-xl md:text-2xl text-slate-600 dark:text-blog-text max-w-2xl">
22+
<p class="text-xl md:text-2xl text-blog-text max-w-2xl">
2323
May your path be bug free...
2424
</p>
25-
<p class="text-xl md:text-2xl text-slate-600 dark:text-blog-text max-w-2xl">
25+
<p class="text-xl md:text-2xl text-blog-text max-w-2xl">
2626
And full of child like wonder.
2727
</p>
2828
;)

‎src/pages/blog/[...slug].astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const { Content } = await post.render();
2020
<Layout title={post.data.title} description={post.data.description}>
2121
<article class="py-10 max-w-3xl mx-auto">
2222
<div class="mb-10 text-center">
23-
<div class="mb-4 text-slate-500 dark:text-blog-text">
23+
<div class="mb-4 text-blog-text">
2424
<time datetime={post.data.pubDate.toISOString()}>
2525
{post.data.pubDate.toLocaleDateString('en-us', {
2626
year: 'numeric',
@@ -30,14 +30,14 @@ const { Content } = await post.render();
3030
</time>
3131
</div>
3232

33-
<h1 class="text-3xl md:text-5xl font-bold mb-6 text-slate-900 dark:text-blog-accent leading-tight">
33+
<h1 class="text-3xl md:text-5xl font-bold mb-6 text-blog-accent leading-tight">
3434
{post.data.title}
3535
</h1>
3636
</div>
3737

38-
<div class="prose prose-slate dark:prose-invert prose-lg max-w-none
38+
<div class="prose prose-invert prose-lg max-w-none
3939
prose-headings:font-bold prose-headings:tracking-tight
40-
prose-a:text-blue-600 dark:prose-a:text-blog-link prose-a:no-underline hover:prose-a:no-underline
40+
prose-a:text-blog-link prose-a:no-underline hover:prose-a:no-underline
4141
prose-img:rounded-xl prose-img:shadow-md">
4242
<Content />
4343
</div>

‎src/pages/blog/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ const posts = (await getCollection('blog')).sort(
1212
<PostHogLayout>
1313
<Layout title="Blog | Kyle Undefined" description="Bloggin what's on the noggin.">
1414
<section class="py-12">
15-
<h1 class="text-4xl font-bold mb-8 text-slate-900 dark:text-blog-accent">Blog</h1>
15+
<h1 class="text-4xl font-bold mb-8 text-blog-accent">Blog</h1>
1616

1717
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
1818
{posts.length > 0 ? (
1919
posts.map((post) => (
2020
<PostCard post={post} />
2121
))
2222
) : (
23-
<div class="col-span-full text-center py-20 bg-slate-50 dark:bg-blog-code-bg rounded-2xl border border-dashed border-slate-300 dark:border-blog-border">
24-
<p class="text-slate-500 text-lg dark:text-blog-text">Coming soon...</p>
23+
<div class="col-span-full text-center py-20 bg-blog-code-bg rounded-2xl border border-dashed border-blog-border">
24+
<p class="text-slate-500 text-blog-text">Coming soon...</p>
2525
</div>
2626
)}
2727
</div>

‎src/pages/index.astro‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,29 @@ const projectsSlice = projects.slice(0, 4);
1515
---
1616

1717
<PostHogLayout>
18-
<Layout title="Home | Kyle Undefined">
18+
<Layout title="Home | KyleUndefined.dev">
1919
<section class="py-12 md:py-10">
2020
<div class="space-y-6">
2121
<h1 class="text-4xl md:text-6xl font-bold tracking-tighter">
22-
Heyo, I'm <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-violet-600 dark:from-blog-accent dark:to-blog-code">Kyle</span>...
22+
Heyo, I'm <span class="bg-clip-text text-transparent bg-gradient-to-r from-blog-accent to-blog-code">Kyle</span>...
2323
</h1>
24-
<p class="text-xl md:text-2xl text-slate-600 dark:text-blog-text">
24+
<p class="text-xl md:text-2xl text-blog-text">
2525
Just a dude who enjoys writing code & learning;
2626
</p>
27-
<p class="text-xl md:text-2xl text-slate-600 dark:text-blog-text">
27+
<p class="text-xl md:text-2xl text-blog-text">
2828
I'm a self taught Dev/Eng who started out writing Runescape bots back in highschool. Then in '08 I got my first crack at the industry doing web, but moved to software and back-end, except for a few projects here and there.
2929
</p>
30-
<p class="text-xl md:text-2xl text-slate-600 dark:text-blog-text">
31-
I love the craft, there's always some new tech to enjoy, and things are constantly evolving, kind of like myself, which is why I'm <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-violet-600 dark:from-blog-accent dark:to-blog-code">undefined</span>.
30+
<p class="text-xl md:text-2xl text-blog-text">
31+
I love the craft, there's always some new tech to enjoy, and things are constantly evolving, kind of like myself, which is why I'm <span class="bg-clip-text text-transparent bg-gradient-to-r from-blog-accent to-blog-code">undefined</span>.
3232
</p>
3333
</div>
3434
</section>
3535

36-
<section class="py-12 border-t border-slate-200 dark:border-blog-border">
36+
<section class="py-12 border-t border-blog-border">
3737
<div class="flex items-center justify-between mb-8">
38-
<h2 class="text-2xl font-bold text-slate-900 dark:text-blog-accent">Latest Posts</h2>
38+
<h2 class="text-2xl font-bold text-blog-accent">Latest Posts</h2>
3939
{posts.length > 3 ? (
40-
<a href="/blog" class="text-blue-600 dark:text-blog-link flip-animate">View <span data-hover="all">all</span></a>
40+
<a href="/blog" class="text-blog-link flip-animate">View <span data-hover="all">all</span></a>
4141
) : null}
4242
</div>
4343

@@ -52,11 +52,11 @@ const projectsSlice = projects.slice(0, 4);
5252
</div>
5353
</section>
5454

55-
<section class="py-12 border-t border-slate-200 dark:border-blog-border">
55+
<section class="py-12 border-t border-blog-border">
5656
<div class="flex items-center justify-between mb-8">
57-
<h2 class="text-2xl font-bold text-slate-900 dark:text-blog-accent">Featured Projects</h2>
57+
<h2 class="text-2xl font-bold text-blog-accent">Featured Projects</h2>
5858
{projects.length > 4 ? (
59-
<a href="/projects" class="text-blue-600 dark:text-blog-link flip-animate">View <span data-hover="all">all</span></a>
59+
<a href="/projects" class="text-blog-link flip-animate">View <span data-hover="all">all</span></a>
6060
) : null}
6161
</div>
6262

0 commit comments

Comments
 (0)