bento

package.json

@@ -67,5 +67,6 @@
         }
       }
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/consts.ts

@@ -1,11 +1,11 @@
 import type { IconMap, SocialLink, Site } from '@/types'
 
 export const SITE: Site = {
-  title: 'astro-erudite',
+  title: 'srizan\'s corner',
   description:
-    'astro-erudite is a opinionated, unstyled blogging template—built with Astro, Tailwind, and shadcn/ui.',
-  href: 'https://astro-erudite.vercel.app',
-  author: 'jktrn',
+    'Ethan\'s personal website, where I share my thoughts on programming, language learning and life.',
+  href: 'https://srizan.dev',
+  author: 'SrIzan10',
   locale: 'en-US',
   featuredPostCount: 2,
   postsPerPage: 3,
@@ -28,15 +28,11 @@ export const NAV_LINKS: SocialLink[] = [
 
 export const SOCIAL_LINKS: SocialLink[] = [
   {
-    href: 'https://github.com/jktrn',
+    href: 'https://github.com/SrIzan10',
     label: 'GitHub',
   },
   {
-    href: 'https://twitter.com/enscry',
-    label: 'Twitter',
-  },
-  {
-    href: 'mailto:jason@enscribe.dev',
+    href: 'mailto:izan@srizan.dev',
     label: 'Email',
   },
   {

src/layouts/Layout.astro

@@ -23,7 +23,7 @@ import { SITE } from '@/consts'
         <slot name="table-of-contents" />
       </div>
       <main class="grow">
-        <div class="mx-auto flex max-w-3xl grow flex-col gap-y-6 px-4">
+        <div class="mx-auto flex max-w-6xl grow flex-col gap-y-6 px-4">
           <slot />
         </div>
       </main>

src/pages/index.astro

@@ -1,87 +1,42 @@
 ---
-import BlogCard from '@/components/BlogCard.astro'
-import Link from '@/components/Link.astro'
 import PageHead from '@/components/PageHead.astro'
-import { buttonVariants } from '@/components/ui/button'
-import { SITE } from '@/consts'
 import Layout from '@/layouts/Layout.astro'
-import { getRecentPosts } from '@/lib/data-utils'
-
-const blog = await getRecentPosts(SITE.featuredPostCount)
 ---
 
 <Layout>
   <PageHead slot="head" title="Home" />
-  <section>
-    <div class="rounded-lg border">
-      <div class="flex flex-col space-y-1.5 p-6">
-        <h3 class="text-3xl leading-none font-medium">er·u·dite</h3>
-        <p class="text-muted-foreground text-sm">
-          /ˈer(y)əˌdīt/ &bull; <span class="font-medium">adjective</span>
-        </p>
+  <section class="p-4">
+    <!-- Mobile: Single column stack, Tablet: 2 columns, Desktop: 3 columns -->
+    <div
+      class="grid w-full grid-cols-1 grid-rows-6 gap-4 md:aspect-[3/2] md:grid-cols-2 md:grid-rows-4 lg:aspect-[4/3] lg:grid-cols-3 lg:grid-rows-3"
+    >
+      <!-- Profile Image -->
+      <div class="bento-item rounded-lg border p-2 md:col-span-2 lg:col-span-2">
+        <img
+          src="https://github.com/SrIzan10.png"
+          class="h-32 w-full rounded object-cover md:h-40"
+        />
+        <p>hi im ethan</p>
       </div>
-      <div class="p-6 pt-0">
-        <p class="text-muted-foreground mb-2 text-sm">
-          astro-erudite is an opinionated, unstyled static blogging template
-          built with <Link
-            href="https://astro.build"
-            class="text-foreground"
-            external
-            underline>Astro</Link
-          >, <Link
-            href="https://tailwindcss.com"
-            class="text-foreground"
-            external
-            underline>Tailwind</Link
-          >, and <Link
-            href="https://ui.shadcn.com"
-            class="text-foreground"
-            external
-            underline>shadcn/ui</Link
-          >. Extraordinarily loosely based on the <Link
-            href="https://astro-micro.vercel.app/"
-            class="text-foreground"
-            external
-            underline>Astro Micro</Link
-          > theme.
-        </p>
-        <p class="text-muted-foreground text-sm">
-          To use this template, check out the <Link
-            href="https://github.com/jktrn/astro-erudite"
-            class="text-foreground"
-            underline
-            external>GitHub</Link
-          > repository. To learn more about why this template exists, read this blog
-          post: <Link
-            href="/blog/the-state-of-static-blogs"
-            class="text-foreground"
-            underline>The State of Static Blogs in 2024</Link
-          >.
-        </p>
+
+      <!-- Spotify -->
+      <div class="bento-item rounded-lg border p-2">spotify</div>
+
+      <!-- Filler -->
+      <div class="bento-item rounded-lg border p-2 md:row-span-2 lg:row-span-2">
+        filler
+      </div>
+
+      <!-- Discord -->
+      <div class="bento-item rounded-lg border p-2">discord</div>
+
+      <!-- Wakatime -->
+      <div class="bento-item rounded-lg border p-2">wakatime</div>
+
+      <!-- GitHub Graph -->
+      <div class="bento-item rounded-lg border p-2 md:col-span-2 lg:col-span-2">
+        github graph
       </div>
-    </div>
-  </section>
-  <section class="flex flex-col gap-y-4">
-    <h2 class="text-2xl font-medium">Latest posts</h2>
-    <ul class="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>
 </Layout>