feat: add opensource information (#3)

- introduce some OS activities
- rename work to Projects

src/components/Card.astro

@@ -12,14 +12,14 @@ const { href, title, desc, icon } = Astro.props;
 ---
 
 <div
-  class="group mx-auto flex w-full max-w-md flex-col justify-between gap-3 rounded-lg border-4 border-neutral-900 bg-gradient-to-t from-slate-950 to-zinc-900 p-4 outline outline-1 outline-zinc-700 ring-zinc-600 duration-200 focus-within:ring-2 hover:from-slate-900 hover:to-zinc-950 focus:outline-zinc-500"
+  class="group mx-auto flex w-full max-w-md flex-col gap-3 rounded-lg border-4 border-neutral-900 bg-gradient-to-t from-slate-950 to-zinc-900 p-4 outline outline-1 outline-zinc-700 ring-zinc-600 duration-200 focus-within:ring-2 hover:from-slate-900 hover:to-zinc-950"
 >
   <a href={href} class="focus-visible:outline-none" rel="noopener noreferrer">
     <p class="mb-3 flex w-full items-center justify-between text-xl">
       {title}
       <Icon
         name={icon}
-        class:list={"aspect-square rounded-md border-neutral-600 text-xl group-hover:text-purple-400"}
+        class="aspect-square rounded-md border-neutral-600 text-xl group-hover:text-purple-400"
       />
     </p>
     <p class="text-base opacity-80 transition-opacity group-hover:opacity-95">

src/components/OpenSource.astro

@@ -0,0 +1,24 @@
+---
+import Card from "@/components/Card.astro";
+import { OpenSourceData } from "@/constants";
+---
+
+<section>
+  <div class="gradient-grid mx-auto max-w-7xl p-8">
+    <h3 class="text-2xl lg:text-3xl">Where do I contribute ?</h3>
+  </div>
+  <div
+    class="mx-auto grid max-w-7xl gap-6 border-x border-white/20 p-8 md:grid-cols-2"
+  >
+    {
+      OpenSourceData.map((item) => (
+        <Card
+          href={item.href}
+          title={item.title}
+          desc={item.desc}
+          icon={item.icon}
+        />
+      ))
+    }
+  </div>
+</section>

src/constants.ts

@@ -25,3 +25,23 @@ export const projectData: {
 		icon: "middlebox",
 	},
 ];
+
+export const OpenSourceData: {
+	href: string;
+	title: string;
+	desc: string;
+	icon: string;
+}[] = [
+	{
+		href: "https://docs.astro.build/en/getting-started/",
+		title: "Astro Docs",
+		desc: "Official documentation for Astro Framework",
+		icon: "astro",
+	},
+	{
+		href: "https://astro-tips.dev/",
+		title: "Astro Tips",
+		desc: "The place for content that goes beyond the official docs",
+		icon: "tip",
+	},
+];

src/pages/blog/index.astro

@@ -23,11 +23,13 @@ const posts = data.reduce((acc: Acc, post) => {
 const years = Object.keys(posts).sort(
   (a, b) => Number.parseInt(b) - Number.parseInt(a),
 );
+
+const title = "My Blog";
+const description =
+  "A collection of all blogposts that I enjoyed writing";
 ---
 
-<BaseLayout
-  title="My Blog"
-  description="A collection of all blogposts that I enjoyed writing"
+<BaseLayout {title} {description}
 >
   <section>
     <div class="mx-auto max-w-7xl border-x border-b border-white/20">
@@ -38,7 +40,7 @@ const years = Object.keys(posts).sort(
         <div class="space-y-4">
           {
             years.map((year) => (
-              <section class="animate space-y-4">
+              <section class="space-y-4">
                 <div class="font-display font-semibold text-black dark:text-white">
                   {year}
                 </div>

src/pages/index.astro

@@ -3,7 +3,8 @@ import BaseLayout from "@/components/BaseLayout.astro";
 import CTA from "@/components/CTA.astro";
 import Hero from "@/components/Hero.astro";
 import Intro from "@/components/Intro.astro";
-import Work from "@/components/Work.astro";
+import Projects from "@/components/Projects.astro";
+import OpenSource from "@/components/OpenSource.astro"
 
 const title = "Home";
 const description =
@@ -12,7 +13,8 @@ const description =
 
 <BaseLayout {title} {description}>
   <Hero />
-  <Work />
+  <Projects />
+  <OpenSource />
   <Intro />
   <CTA url="/contact" text="hit me up" />
 </BaseLayout>