feat: add blogs

Author: apsinghdev

apps/web/src/app/(main)/blogs/page.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import BlogHeader from "@/components/blogs/BlogHeader";
+import { blogs, BlogTag } from "@/data/blogs";
+import Link from "next/link";
+
+const filterTags: BlogTag[] = [
+  "all",
+  "engineering",
+  "startup",
+  "distribution",
+  "misc",
+];
+
+export default function BlogsPage() {
+  const [selectedTag, setSelectedTag] = useState<BlogTag>("all");
+
+  const filteredBlogs = useMemo(() => {
+    let result = blogs;
+    if (selectedTag !== "all") {
+      result = blogs.filter((blog) => blog.tag === selectedTag);
+    }
+    return result.sort((a, b) => {
+      const parseDate = (dateStr: string) => {
+        const [day, month, year] = dateStr.split("-").map(Number);
+        return new Date(2000 + year, month - 1, day);
+      };
+      return parseDate(b.date).getTime() - parseDate(a.date).getTime();
+    });
+  }, [selectedTag]);
+
+  return (
+    <main className="min-h-screen w-full bg-[#101010] text-white">
+      <BlogHeader />
+      <div className="max-w-[2000px] mx-auto px-6 py-8 flex justify-center">
+        <div className="flex gap-12">
+          {/* Sidebar with filters */}
+          <aside className="w-48 flex-shrink-0">
+            <nav className="flex flex-col gap-2">
+              {filterTags.map((tag) => (
+                <button
+                  key={tag}
+                  onClick={() => setSelectedTag(tag)}
+                  className={`text-left transition-colors lowercase ${
+                    selectedTag === tag
+                      ? "text-white"
+                      : "text-[#9455f4] hover:text-white"
+                  }`}
+                >
+                  {tag}
+                </button>
+              ))}
+            </nav>
+          </aside>
+
+          {/* Blog list */}
+          <div className="flex-1 max-w-2xl">
+            <div className="flex flex-col gap-3">
+              {filteredBlogs.length === 0 ? (
+                <p className="text-gray-400">No blog posts found.</p>
+              ) : (
+                filteredBlogs.map((blog, index) => (
+                  <div
+                    key={`${blog.date}-${blog.linkText}-${index}`}
+                    className="flex gap-4 items-center whitespace-nowrap"
+                  >
+                    <span className="text-white w-20 flex-shrink-0 font-DMfont font-mono text-right">
+                      {blog.date}
+                    </span>
+                    <Link
+                      href={blog.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-[#9455f4] hover:text-white underline transition-colors"
+                    >
+                      {blog.linkText}
+                    </Link>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

apps/web/src/components/blogs/BlogHeader.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import Link from "next/link";
+
+export default function BlogHeader() {
+  return (
+    <header className="w-full border-b border-[#252525] bg-[#101010]">
+      <div className="max-w-[2000px] mx-auto px-6 py-4 flex items-center justify-between">
+        <Link
+          href="/blogs"
+          className="text-white hover:text-[#9455f4] transition-colors underline"
+        >
+          Opensox AI (Ajeet)
+        </Link>
+        <Link
+          href="/"
+          className="text-white hover:text-[#9455f4] transition-colors underline"
+        >
+          Home
+        </Link>
+      </div>
+    </header>
+  );
+}
+

apps/web/src/components/landing-sections/footer.tsx

@@ -65,6 +65,12 @@ const Footer = () => {
                 >
                   Pricing
                 </Link>
+                <Link
+                  href="/blogs"
+                  className="text-[#b1b1b1] hover:text-white transition-colors text-xs"
+                >
+                  Blogs
+                </Link>
                 {/* <Link
                   href="#"
                   className="text-[#b1b1b1] hover:text-white transition-colors text-xs"

apps/web/src/data/blogs.ts

@@ -0,0 +1,70 @@
+export type BlogTag =
+  | "engineering"
+  | "startup"
+  | "distribution"
+  | "misc"
+  | "all";
+
+export interface BlogPost {
+  date: string;
+  linkText: string;
+  link: string;
+  tag: BlogTag;
+}
+
+export const blogs: BlogPost[] = [
+  {
+    date: "24-08-25",
+    linkText: "how to build an online presense?",
+    link: "https://x.com/ajeetunc/status/1959480811293708369?s=20",
+    tag: "distribution",
+  },
+  {
+    date: "30-07-24",
+    linkText: "how to get into gsoc (part-2)",
+    link: "https://x.com/ajeetunc/status/1818130583509156163?s=20",
+    tag: "misc",
+  },
+  {
+    date: "29-07-24",
+    linkText: "how to get into gsoc (part-1)",
+    link: "https://x.com/ajeetunc/status/1817760248599634314?s=20",
+    tag: "misc",
+  },
+  {
+    date: "02-08-24",
+    linkText: "how to get into gsoc (part-3)",
+    link: "https://x.com/ajeetunc/status/1819209955330666623?s=20",
+    tag: "misc",
+  },
+  {
+    date: "02-12-23",
+    linkText: "why you should do open source?",
+    link: "https://x.com/ajeetunc/status/1987490955298230369?s=20",
+    tag: "engineering",
+  },
+  {
+    date: "10-11-25",
+    linkText: "ugly execution wins",
+    link: "https://x.com/ajeetunc/status/1987931607102341182?s=20",
+    tag: "misc",
+  },
+  {
+    date: "08-11-25",
+    linkText: "why you shouln't register a company?",
+    link: "https://x.com/ajeetunc/status/1987125877985968217?s=20",
+    tag: "startup",
+  },
+  {
+    date: "08-11-25",
+    linkText: "tiny habits that changed my life",
+    link: "https://x.com/ajeetunc/status/1987043154974154762?s=20",
+    tag: "misc",
+  },
+  {
+    date: "29-10-25",
+    linkText: "how to be layoff proof?",
+    link: "https://x.com/ajeetunc/status/1983389367327699032?s=20",
+    tag: "misc",
+  },
+];