feat: blog landing page done

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

frontend/src/app/blog/page.tsx

@@ -1,6 +1,5 @@
 import { promises as fs } from "fs";
 import Link from "next/link";
-import { Suspense } from "react";
 
 async function getFolders(dirPath: string) {
   try {
@@ -15,17 +14,88 @@ async function getFolders(dirPath: string) {
 export default async function BlogList() {
   const folders = await getFolders("src/app/blog/");
 
+  const articles = [
+    {
+      category: "CoWIN",
+      title: "CoWIN - Exploring the API 🚀",
+      description: "Using the CoWIN API for booking vaccination slots",
+      time: "3 mins",
+      link: "/cowin-exploring_the_API",
+    },
+    {
+      category: "Security",
+      title: "WireGuard on Kubernetes with Adblocking",
+      description:
+        "Filter out ads from your internet traffic while browsing securely",
+      time: "5 mins",
+      link: "/wireguard_on_kubernetes_with_adblocking",
+    },
+    {
+      category: "Security",
+      title: "The Resolvable Paranoia",
+      description: "Learn to setup and use GPG and SSH keys",
+      time: "7 mins",
+      link: "/the_resolvable_paranoia",
+    },
+    {
+      category: "Docker",
+      title: "Docker Primer",
+      description: "Docker basics to get you started",
+      time: "2 mins",
+      link: "/docker_primer",
+    },
+    {
+      category: "Linux",
+      title: "Archlinux - My Sanctum Sanctorum",
+      description: "Learn to setup Archlinux on your PC",
+      time: "8 mins",
+      link: "/archlinux-my_sanctum_sanctorum",
+    },
+    {
+      category: "Linux",
+      title: "Firewall init",
+      description: "Learn to use ufw to firewall your linux servers",
+      time: "1 mins",
+      link: "/firewall_init",
+    },
+    {
+      category: "Linux",
+      title: "Ubuntu - The start of an amazing journey",
+      description:
+        "My collection of commonly faced problems when I was new to linux",
+      time: "10 mins",
+      link: "/ubuntu-the_start_of_an_amazing_journey",
+    },
+  ];
+
   return (
-    <main className="flex flex-1 flex-col justify-end items-center font-[family-name:var(--font-spacegrotesk-sans)] pt-10 md:pt-20 pb-25 md:pb-0">
+    <main className="flex flex-1 flex-col justify-end items-center font-[family-name:var(--font-spacegrotesk-sans)] pt-10 md:pt-30 pb-25 md:pb-0">
-      <div className="md:w-[786px] w-[95%]">
+      <h1 className="text-5xl bold text-red-500">Blogs</h1>
-        <h1>Blogs</h1>
+
-        <Suspense fallback={<div>Loading...</div>}>
+      <div className="min-h-screen pt-10">
-          {folders.map((folder) => (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
-            <Link href={`/blog/${folder}`}>
+          {articles.map((article, idx) => (
-              <div key={folder}>{folder}</div>
+            <Link key={idx} href={`/blog${article.link}`}>
+              <div className="p-6 rounded-lg border flex flex-col justify-between hover:text-red-500 hover:shadow-2xl transition-shadow duration-500 ease-in-out h-[180px] md:h-[300px]">
+                <p
+                  className={`text-sm font-semibold mb-2"
+                    }`}
+                >
+                  {article.category}
+                </p>
+                <div>
+                  <h3 className="text-lg font-bold mb-2 text-primary">
+                    {article.title}
+                  </h3>
+                  <p className="text-sm text-primary">{article.description}</p>
+                </div>
+                <div className="flex justify-end">
+                  <p className={`mt-4 text-sm font-semibold`}>{article.time}</p>
+                </div>
+              </div>
             </Link>
           ))}
-        </Suspense>
+        </div>
       </div>
     </main>
   );

frontend/src/app/portfolio/page.tsx

@@ -145,7 +145,7 @@ export default async function Portfolio() {
   ];
 
   return (
-    <main className="flex items-top justify-center font-[family-name:var(--font-inter-sans)] pt-10 md:pt-20 pb-25 md:pb-0">
+    <main className="flex items-top justify-center font-[family-name:var(--font-spacegrotesk-sans)] pt-10 md:pt-20 pb-25 md:pb-0">
       <div className="">
         <div className="uppercase tracking-[0.2em] text-gray-500 dark:text-gray-100 flex items-center justify-between pb-20">
           <div>About Me</div>

frontend/src/components/CustomCircleCursor.tsx

@@ -5,8 +5,8 @@ import gsap from "gsap";
 
 const GSAPCursor: FC = () => {
   const cursorRef = useRef<HTMLDivElement>(null);
-const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [position, setPosition] = useState({ x: 0, y: 0 });
-const [isHoveringLink, setIsHoveringLink] = useState(false);
+  const [isHoveringLink, setIsHoveringLink] = useState(false);
 
   // For touch devices, return null
   if (typeof window !== "undefined" && "ontouchstart" in window) return null;
@@ -32,16 +32,16 @@ const [isHoveringLink, setIsHoveringLink] = useState(false);
     const handleMouseOver = () => setIsHoveringLink(true);
     const handleMouseOut = () => setIsHoveringLink(false);
 
-    const links = document.querySelectorAll('a');
+    const links = document.querySelectorAll("a");
-    links.forEach(link => {
+    links.forEach((link) => {
-      link.addEventListener('mouseover', handleMouseOver);
+      link.addEventListener("mouseover", handleMouseOver);
-      link.addEventListener('mouseout', handleMouseOut);
+      link.addEventListener("mouseout", handleMouseOut);
     });
 
     return () => {
-      links.forEach(link => {
+      links.forEach((link) => {
-        link.removeEventListener('mouseover', handleMouseOver);
+        link.removeEventListener("mouseover", handleMouseOver);
-        link.removeEventListener('mouseout', handleMouseOut);
+        link.removeEventListener("mouseout", handleMouseOut);
       });
       window.removeEventListener("mousemove", onMouseMove);
     };
@@ -59,7 +59,7 @@ const [isHoveringLink, setIsHoveringLink] = useState(false);
     <div>
       <div
         ref={cursorRef}
-        className={`fixed w-8 h-8 ${isHoveringLink ? 'rounded-none' : 'rounded-full'} border-2 border-dotted border-red-500 bg-transparent pointer-events-none z-60`}
+        className={`fixed w-8 h-8 ${isHoveringLink ? "border-5 border-red-500" : "border-2 border-dotted border-red-500"} rounded-full bg-transparent pointer-events-none z-60`}
         style={{
           transform: "translate(-50%, -50%)",
         }}