all repos — website @ f523dff007457274989fc265deeea3b2109d3f0d

My official website.

src/pages/index.astro (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 
---
import BlogCard from '@/components/BlogCard.astro'
import Container from '@/components/Container.astro'
import Link from '@/components/Link.astro'
import { buttonVariants } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { SITE } from '@/consts'
import Layout from '@/layouts/Layout.astro'
import { getCollection } from 'astro:content'

const blog = (await getCollection('blog'))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, SITE.NUM_POSTS_ON_HOMEPAGE)
---

<Layout title="Home" description={SITE.DESCRIPTION}>
  <Container class="flex flex-col gap-y-6">
    <section>
      <Card>
        <CardHeader>
          <CardTitle className="text-3xl">Hey, I'm Michael Kinder. 👋</CardTitle
          >
        </CardHeader>
        <CardContent>
          <p class="mb-2 text-sm text-muted-foreground">
            I'm a gay geek fueled by coffee and a passion for all things tech,
            with a healthy dose of rural charm.
          </p>
          <p class="mb-2 text-sm text-muted-foreground">
            This is my digital playground where I whip up code concoctions,
            document my caffeine-fueled brainstorms, and showcase projects that
            might just change the world (or not).
          </p>
          <p class="text-sm text-muted-foreground">
            If you dig a little geeky fun with a side of country realness, pull
            up a chair and stay awhile.
          </p>
        </CardContent>
      </Card>
    </section>
    <section class="flex flex-col gap-y-4">
      <h2 class="text-2xl font-bold">Latest posts</h2>
      <ul class="not-prose flex flex-col gap-y-4">
        {
          blog.map((post) => (
            <li>
              <BlogCard entry={post} />
            </li>
          ))
        }
      </ul>
      <div class="flex justify-center">
        <Link
          href="/blog"
          class={buttonVariants({ variant: 'ghost' }) + ' group'}
        >
          See all posts <span
            class="ml-1.5 transition-transform group-hover:translate-x-1"
            >&rarr;</span
          >
        </Link>
      </div>
    </section>
  </Container>
</Layout>