From 050f6e548f144e07375347be9dfcfa87e454e3f3 Mon Sep 17 00:00:00 2001 From: Ameya Shenoy Date: Mon, 23 Jun 2025 23:40:55 +0530 Subject: [PATCH] feat: blog landing page done Signed-off-by: Ameya Shenoy --- frontend/src/app/blog/page.tsx | 88 +++++++++++++++++-- frontend/src/app/portfolio/page.tsx | 2 +- .../src/components/CustomCircleCursor.tsx | 20 ++--- 3 files changed, 90 insertions(+), 20 deletions(-) diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx index aefa5b6..b9c87a4 100644 --- a/frontend/src/app/blog/page.tsx +++ b/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 ( -
-
-

Blogs

- Loading...
}> - {folders.map((folder) => ( - -
{folder}
+
+

Blogs

+ +
+
+ {articles.map((article, idx) => ( + +
+

+ {article.category} +

+
+

+ {article.title} +

+

{article.description}

+
+
+

{article.time}

+
+
))} - +
); diff --git a/frontend/src/app/portfolio/page.tsx b/frontend/src/app/portfolio/page.tsx index 3d61b70..5aac6b8 100644 --- a/frontend/src/app/portfolio/page.tsx +++ b/frontend/src/app/portfolio/page.tsx @@ -145,7 +145,7 @@ export default async function Portfolio() { ]; return ( -
+
About Me
diff --git a/frontend/src/components/CustomCircleCursor.tsx b/frontend/src/components/CustomCircleCursor.tsx index e5f8a0b..7283759 100644 --- a/frontend/src/components/CustomCircleCursor.tsx +++ b/frontend/src/components/CustomCircleCursor.tsx @@ -5,8 +5,8 @@ import gsap from "gsap"; const GSAPCursor: FC = () => { const cursorRef = useRef(null); -const [position, setPosition] = useState({ x: 0, y: 0 }); -const [isHoveringLink, setIsHoveringLink] = useState(false); + const [position, setPosition] = useState({ x: 0, y: 0 }); + 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'); - links.forEach(link => { - link.addEventListener('mouseover', handleMouseOver); - link.addEventListener('mouseout', handleMouseOut); + const links = document.querySelectorAll("a"); + links.forEach((link) => { + link.addEventListener("mouseover", handleMouseOver); + link.addEventListener("mouseout", handleMouseOut); }); return () => { - links.forEach(link => { - link.removeEventListener('mouseover', handleMouseOver); - link.removeEventListener('mouseout', handleMouseOut); + links.forEach((link) => { + link.removeEventListener("mouseover", handleMouseOver); + link.removeEventListener("mouseout", handleMouseOut); }); window.removeEventListener("mousemove", onMouseMove); }; @@ -59,7 +59,7 @@ const [isHoveringLink, setIsHoveringLink] = useState(false);