codingcoffee/one
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: blog landing page done

Browse source 
Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
This commit is contained in:
Ameya Shenoy 2025-06-23 23:40:55 +05:30
parent aaf98406a2
commit 050f6e548f
3 changed files with 90 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
frontend/src/app/blog/page.tsx
View file

@ -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">
<div className="md:w-[786px] w-[95%]">
<h1>Blogs</h1>
<Suspense fallback={<div>Loading...</div>}>
{folders.map((folder) => (
<Link href={`/blog/${folder}`}>
<div key={folder}>{folder}</div>
<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">
<h1 className="text-5xl bold text-red-500">Blogs</h1>
<div className="min-h-screen pt-10">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
{articles.map((article, idx) => (
<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>
);

2
frontend/src/app/portfolio/page.tsx
View file

@ -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>

20
frontend/src/components/CustomCircleCursor.tsx
View file

@ -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 [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);
<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%)",
}}