Edit hero & add Infosec Notes section

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

src/components/Hero.astro

@@ -1,5 +1,5 @@
 ---
-import { ArrowRight, FolderCode, Key, Rss } from "@lucide/astro";
+import { FolderCode, Key, Rss } from "@lucide/astro";
 import { Image } from "astro:assets";
 import type { SocialLinks } from "../config";
 
@@ -8,7 +8,6 @@ interface Props {
   title: string;
   description: string;
   avatar: any;
-  location?: string;
   socialLinks?: SocialLinks;
   gpgKey?: string;
   rssFeed?: string;
@@ -19,18 +18,17 @@ const {
   title,
   description,
   avatar,
-  location,
   socialLinks,
   gpgKey,
   rssFeed,
 } = Astro.props;
 ---
 
-<section class="hero min-h-[65vh]">
+<section class="hero py-20">
-  <div class="hero-content flex-col lg:flex-row-reverse max-w-7xl gap-8">
+  <div class="hero-content flex-col lg:flex-row-reverse max-w-7xl gap-10">
     <div class="avatar">
       <div
-        class="w-48 ring-primary ring-offset-base-100 rounded-full ring-2 ring-offset-2"
+        class="w-32 md:w-48 ring-primary ring-offset-base-100 rounded-full ring-2 ring-offset-2"
       >
         <Image src={avatar} alt={name} />
       </div>
@@ -40,7 +38,6 @@ const {
         Hi, I'm {name}
       </h1>
       <p class="text-xl text-base-content/80 mb-2">{title}</p>
-      {location && <p class="text-base-content/60 mb-4">{location}</p>}
       <p class="text-lg leading-relaxed mb-6">
         {description}
       </p>
@@ -335,25 +332,6 @@ const {
           </div>
         )
       }
-
-      <div class="mt-12 flex flex-wrap gap-5">
-        <a href="/blog" class="btn btn-ghost gap-2">
-          Blog Posts
-          <ArrowRight class="size-4" />
-        </a>
-        <a href="/projects" class="btn btn-ghost gap-2">
-          Projects
-          <ArrowRight class="size-4" />
-        </a>
-        <a href="/notes" class="btn btn-ghost gap-2">
-          Infosec Notes
-          <ArrowRight class="size-4" />
-        </a>
-        <a href="/#contact" class="btn btn-ghost gap-2">
-          Contact Me
-          <ArrowRight class="size-4" />
-        </a>
-      </div>
     </div>
   </div>
 </section>

src/components/Notes.astro

@@ -0,0 +1,27 @@
+---
+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>
+
+    <div class="mt-8">
+      <p class="text-base text-base-content/70 mb-6">
+        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>
+  </div>
+</section>

src/config.ts

@@ -23,7 +23,6 @@ export interface SiteConfig {
   title: string;
   description: string;
   avatar: string;
-  location: string;
   socialLinks: SocialLinks;
   gpgKey?: string;
   rssFeed?: string;
@@ -39,7 +38,6 @@ export const siteConfig: SiteConfig = {
   description:
     "Infosec engineer passionate about Linux/NixOS, blockchains, OSINT & FOSS. Hacking with Go, exploring open tech, and contributing whenever I can 🐧",
   avatar: "/avatar.png",
-  location: "🇫🇷 France",
   socialLinks: {
     github: "https://github.com/anotherhadi",
     gitlab: "https://gitlab.com/anotherhadi_mirror",

src/pages/index.astro

@@ -3,25 +3,26 @@ import Layout from "../layouts/Layout.astro";
 import Hero from "../components/Hero.astro";
 import Projects from "../components/Projects.astro";
 import Blog from "../components/Blog.astro";
+import Notes from "../components/Notes.astro";
 import Contact from "../components/Contact.astro";
 import { siteConfig } from "../config";
 import avatar from "../../public/avatar.jpg";
 ---
 
 <Layout title={`Another Hadi`} description={siteConfig.description}>
-  <main>
+  <main class="px-10">
     <Hero
       name={siteConfig.name}
       title={siteConfig.title}
       description={siteConfig.description}
       avatar={avatar}
-      location={siteConfig.location}
       socialLinks={siteConfig.socialLinks}
       gpgKey={siteConfig.gpgKey}
       rssFeed={siteConfig.rssFeed}
     />
 
     <Blog />
+    <Notes />
     <Projects />
     <Contact />
   </main>