diff options
| -rw-r--r-- | app/blog/page.tsx | 23 | ||||
| -rw-r--r-- | app/page.tsx | 3 | ||||
| -rw-r--r-- | components/header.tsx | 6 | ||||
| -rw-r--r-- | components/post-card.tsx | 9 |
4 files changed, 11 insertions, 30 deletions
diff --git a/app/blog/page.tsx b/app/blog/page.tsx index abc3394..0c8acbb 100644 --- a/app/blog/page.tsx +++ b/app/blog/page.tsx @@ -1,5 +1,5 @@ - -import { format, parseISO } from 'date-fns' +import { PostCard } from "components/post-card" +import { format, parseISO, compareDesc } from 'date-fns' import { allPosts } from 'contentlayer/generated' import Link from 'next/link' @@ -10,25 +10,10 @@ export default function BlogPage() { <div className="max-w-2xl mx-auto py-12"> <h1 className="text-3xl font-bold mb-8">Blog</h1> <div className="space-y-8"> - {posts.map((post) => ( - <article key={post._id} className="group relative flex flex-col items-start"> - <h2 className="text-xl font-semibold tracking-tight"> - <Link href={post.url} className="hover:underline"> - {post.title} - </Link> - </h2> - <time dateTime={post.date} className="text-sm text-muted-foreground mb-2"> - {format(parseISO(post.date), 'LLLL d, yyyy')} - </time> - </article> + {posts.map((post, idx) => ( + <PostCard key={idx} {...post} /> ))} </div> </div> ) } - -function compareDesc(a: Date, b: Date) { - if (a > b) return -1 - if (a < b) return 1 - return 0 -} diff --git a/app/page.tsx b/app/page.tsx index 057842d..51dfeda 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,4 +1,3 @@ - import { ToolsGrid } from "@/components/tools-grid"; import { ProjectsGrid } from "@/components/projects-grid"; import { PostCard } from "@/components/post-card"; @@ -19,7 +18,7 @@ export default function Home() { <div className="pointer-events-auto"> <h2 className="text-2xl font-bold mix-blend-luminosity text-foreground">Hi, I'm Leander.</h2> <p className="text-muted-foreground/60 max-w-lg mx-auto"> - Passionate about hardware & software, pursuing computer science studies. Currently building 3D-printing projects and exploring homelabing. + Interested in hardware & software, pursuing computer science studies. Currently building 3D-printing projects and exploring homelabing. </p> </div> </section> diff --git a/components/header.tsx b/components/header.tsx index afc2a99..f447677 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -16,12 +16,6 @@ export function Header() { > Blog </Link> - <Link - href="/projects" - className="text-muted-foreground hover:text-foreground transition-colors" - > - Projects - </Link> </nav> </div> diff --git a/components/post-card.tsx b/components/post-card.tsx index 4990188..25a79ae 100644 --- a/components/post-card.tsx +++ b/components/post-card.tsx @@ -5,12 +5,15 @@ import Link from "next/link" export function PostCard(post: Post) { return ( <div className="mb-8"> - <Link href={post.url} className="no-underline"> - <h2 className="mb-1.5 mt-3 text-xl font-bold text-foreground"> + <Link + href={post.url} + className="group no-underline inline-block" + > + <h2 className="text-xl font-bold relative before:content-['#'] before:absolute before:-left-5 before:font-normal before:text-muted-foreground before:opacity-0 before:transition group-hover:before:opacity-100"> {post.title} </h2> </Link> - <div className="flex gap-1.5 font-medium text-muted-foreground/60"> + <div className="text-muted-foreground/60"> <time dateTime={post.date} title={format(parseISO(post.date), 'yyyy/MM/dd')}> {format(parseISO(post.date), 'do MMM yyyy')} </time> |