Clean homepage

Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>

src/components/Blog.astro

@@ -18,14 +18,19 @@ const latestPosts = sortedPosts.slice(0, 3);
   <div class="max-w-6xl mx-auto">
     <div class="text-center mb-12">
       <h2 class="text-4xl font-bold mb-4">Latest Blog Posts</h2>
-      <p class="text-lg text-base-content/70">
-        Thoughts, insights, and tutorials on cybersecurity, OSINT, and
-        technology.
-      </p>
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {latestPosts.map((post) => <BlogCard post={post} />)}
+      {
+        latestPosts.map((post) => (
+          <BlogCard
+            displayBanner={false}
+            displayTags={false}
+            displayDate={false}
+            post={post}
+          />
+        ))
+      }
     </div>
 
     <div class="text-center mt-12">

src/components/BlogCard.astro

@@ -5,6 +5,9 @@ import { Image } from "astro:assets";
 import { formatDate } from "../utils/notes";
 
 interface Props {
+  displayBanner: boolean;
+  displayDate: boolean;
+  displayTags: boolean;
   post: CollectionEntry<"blog">;
 }
 
@@ -14,6 +17,8 @@ const { post } = Astro.props;
 <article
   class="card bg-base-100 shadow-xl border border-base-200 rounded-lg hover:shadow-2xl transition-shadow"
 >
+
+  { Astro.props.displayBanner && (
   <figure class="aspect-video">
     <Image
       src={post.data.image}
@@ -23,25 +28,27 @@ const { post } = Astro.props;
       height={400}
     />
   </figure>
+)}
   <div class="card-body">
+  { Astro.props.displayDate && (
     <time class="text-sm text-base-content/60">
       {formatDate(post.data.publishDate)}
     </time>
+)}
     <h2 class="card-title hover:text-primary transition-colors">
       <a href={`/blog/${post.id}`}>{post.data.title}</a>
     </h2>
     <p class="text-base-content/80">{post.data.description}</p>
-    {
-      post.data.tags && post.data.tags.length > 0 && (
+
+  { Astro.props.displayTags && post.data.tags && post.data.tags.length > 0 && (
         <div class="flex flex-wrap gap-2 mt-2">
           {post.data.tags.map((tag) => (
             <TagBadge tag={tag} />
           ))}
         </div>
-      )
-    }
+)}
     <div class="card-actions justify-end mt-4">
-      <a href={`/blog/${post.id}`} class="btn btn-primary btn-sm">
+      <a href={`/blog/${post.id}`} class="btn btn-soft btn-primary btn-sm">
         Read More
       </a>
     </div>

src/components/GiteaProjectCard.astro

@@ -2,6 +2,7 @@
 import { ExternalLink, ChevronDown } from "@lucide/astro";
 
 interface Props {
+  displayBanner: boolean;
   repo: {
     name: string;
     description: string;
@@ -34,6 +35,7 @@ const hasMultiplePlatforms = platforms.length > 1;
 <article
   class="card bg-base-100 shadow-xl border border-base-200 rounded-lg hover:shadow-2xl transition-shadow"
 >
+  { Astro.props.displayBanner && repo.banner_url && (
   <figure class="aspect-video bg-base-200 overflow-hidden">
     <img
       src={repo.banner_url}
@@ -42,6 +44,7 @@ const hasMultiplePlatforms = platforms.length > 1;
       onerror="this.parentElement.style.display='none'"
     />
   </figure>
+)}
 
   <div class="card-body">
     <h2 class="card-title hover:text-primary transition-colors">
@@ -83,7 +86,7 @@ const hasMultiplePlatforms = platforms.length > 1;
             <div
               tabindex="0"
               role="button"
-              class="btn btn-primary btn-sm gap-1"
+              class="btn btn-soft btn-primary btn-sm gap-1"
             >
               <ExternalLink class="size-4" />
               View Source
@@ -107,7 +110,7 @@ const hasMultiplePlatforms = platforms.length > 1;
             href={repo.html_url}
             target="_blank"
             rel="noopener noreferrer"
-            class="btn btn-primary btn-sm gap-1"
+            class="btn btn-soft btn-primary btn-sm gap-1"
           >
             <ExternalLink class="size-4" />
             View on Gitea

src/components/Hero.astro

@@ -38,7 +38,7 @@ const {
         Hi, I'm {name}
       </h1>
       <p class="text-xl text-base-content/80 mb-2">{title}</p>
-      <p class="text-lg leading-relaxed mb-6">
+      <p class="text-lg max-w-lg leading-relaxed mb-6">
         {description}
       </p>
       {

src/components/Notes.astro

@@ -4,8 +4,8 @@ import { ArrowRight } from "@lucide/astro";
 
 <section id="notes" class="py-10 px-4">
   <div class="max-w-6xl mx-auto text-center">
-    <div class="mb-4">
-      <h2 class="text-2xl font-semibold">Infosec notes</h2>
+    <div class="text-center mb-12">
+      <h2 class="text-4xl font-bold mb-4">Infosec Notes</h2>
     </div>
 
     <div class="mt-8">
@@ -13,15 +13,13 @@ import { ArrowRight } from "@lucide/astro";
         Cheatsheets and references on tools and techniques I use for CTFs and
         pentesting.
       </p>
-      <a
-        href="/notes"
-        class="inline-flex items-center gap-1.5 text-sm text-base-content/50 hover:text-primary transition-colors group"
-      >
-        Browse notes
-        <ArrowRight
-          class="size-3.5 group-hover:translate-x-0.5 transition-transform"
-        />
-      </a>
+
+      <div class="text-center mt-12">
+        <a href="/notes" class="btn btn-ghost gap-2">
+          Browse Notes
+          <ArrowRight class="size-4" />
+        </a>
+      </div>
     </div>
   </div>
 </section>

src/components/Projects.astro

@@ -10,14 +10,14 @@ const latestRepos = repos.slice(0, 3);
   <div class="max-w-6xl mx-auto">
     <div class="text-center mb-12">
       <h2 class="text-4xl font-bold mb-4">Check out my latest work</h2>
-      <p class="text-lg text-base-content/70">
-        I enjoy the challenge of reimagining existing programs & scripts in my
-        own unique way.
-      </p>
     </div>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {latestRepos.map((repo) => <GiteaProjectCard repo={repo} />)}
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      {
+        latestRepos.map((repo) => (
+          <GiteaProjectCard displayBanner={false} repo={repo} />
+        ))
+      }
     </div>
 
     <div class="text-center mt-12">

src/pages/blog/index.astro

@@ -45,7 +45,12 @@ const sortedPosts = blogPosts.sort(
       ) : (
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {sortedPosts.map((post) => (
-            <BlogCard post={post} />
+            <BlogCard
+              displayBanner={true}
+              displayTags={true}
+              displayDate={true}
+              post={post}
+            />
           ))}
         </div>
       )

src/pages/projects/index.astro

@@ -36,7 +36,7 @@ import repos from "../../data/repos.json";
       ) : (
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
           {repos.map((repo) => (
-            <GiteaProjectCard repo={repo} />
+            <GiteaProjectCard displayBanner={true} repo={repo} />
           ))}
         </div>
       )