Merge pull request #1 from orus-dev/blog-and-projects

Blog and projects

blog/welcome.json

@@ -0,0 +1,10 @@
+{
+  "title": "Welcome to ORUS!",
+  "description": "ORUS is a organization for people just like you",
+  "author": "Klesti Selimaj",
+  "date": "2025-12-03",
+  "readingTime": 1,
+  "tags": ["welcome", "first", "ORUS"],
+  "image": "/orus-logo.svg",
+  "category": "news"
+}

blog/welcome.md

@@ -0,0 +1,7 @@
+# Hello, World! 👋
+
+Welcome! ORUS is a cybersecurity & dev organization, Simply for developers.
+
+- 💻 open source: We love the open source community and our projects are all open source.
+- 📚 growing community: We are a growing community full of beginners and pros. join here
+- 🌐 cybersecurity & development: we develop projects for developers and cybersecurity enthusiasts

package.json

@@ -9,10 +9,21 @@
   },
   "dependencies": {
     "framer-motion": "^12.23.24",
+    "highlight.js": "^11.11.1",
+    "katex": "^0.16.25",
     "lucide-react": "^0.555.0",
     "next": "16.0.6",
     "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "react-dom": "19.2.0",
+    "react-markdown": "^10.1.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/api/blog/[slug]/route.ts

@@ -0,0 +1,45 @@
+// app/api/blog/[slug]/route.ts
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+import { PostPreview } from "@/lib/posts";
+
+const BLOG_DIR = path.join(process.cwd(), "blog");
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  try {
+    const { slug } = await params;
+
+    // Read JSON metadata
+    const jsonPath = path.join(BLOG_DIR, `${slug}.json`);
+    if (!fs.existsSync(jsonPath)) {
+      return NextResponse.json({ error: "Post not found" }, { status: 404 });
+    }
+    const rawData = fs.readFileSync(jsonPath, "utf-8");
+    const data: Omit<PostPreview, "url"> = JSON.parse(rawData);
+
+    // Read Markdown content
+    const mdPath = path.join(BLOG_DIR, `${slug}.md`);
+    let content = "";
+    if (fs.existsSync(mdPath)) {
+      content = fs.readFileSync(mdPath, "utf-8");
+    }
+
+    return NextResponse.json({
+      meta: {
+        ...data,
+        url: `/blog/${slug}`,
+      },
+      content,
+    });
+  } catch (err) {
+    console.error(err);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/blog/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+import { PostPreview } from "@/lib/posts";
+
+const BLOG_DIR = path.join(process.cwd(), "blog");
+
+export function getAllBlogPreviews(): PostPreview[] {
+  const files = fs.readdirSync(BLOG_DIR).filter((f) => f.endsWith(".json"));
+
+  return files.map((file) => {
+    const filePath = path.join(BLOG_DIR, file);
+    const rawData = fs.readFileSync(filePath, "utf-8");
+    const data = JSON.parse(rawData);
+
+    // Generate the URL based on filename
+    const slug = file.replace(/\.json$/, "");
+
+    return {
+      ...data,
+      url: `/blog/${slug}`,
+    } as PostPreview;
+  });
+}
+
+export function GET(req: NextRequest): NextResponse {
+  return NextResponse.json(getAllBlogPreviews());
+}

src/app/api/stats/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from "next/server";
+
+var lastGitRequest = new Date("2023-01-10T12:00:00Z");
+var stats = { stars: 0, forks: 0, contributors: 0 };
+
+function isIterable(obj: any): obj is Iterable<any> {
+  return obj != null && typeof obj[Symbol.iterator] === "function";
+}
+
+async function getStats() {
+  let page = 0;
+  let stars = 0;
+  let forks = 0;
+  let contributors = 0;
+
+  while (true) {
+    const res = await fetch(
+      `https://api.github.com/users/orus-dev/repos?per_page=100&page=${page}`
+    );
+    const repos = await res.json();
+
+    if (repos.length === 0 || !isIterable(repos)) break;
+
+    for (const repo of repos) {
+      stars += repo.stargazers_count;
+      forks += repo.forks_count;
+      const conRes = await fetch(repo.contributors_url);
+      contributors += (await conRes.json()).length;
+    }
+
+    page++;
+  }
+
+  return { stars, forks, contributors };
+}
+
+export async function GET(req: NextRequest) {
+  const now = new Date();
+
+  if (now.getTime() - lastGitRequest.getTime() > 60 * 60 * 1000) {
+    stats = await getStats();
+    lastGitRequest = now;
+  }
+
+  return NextResponse.json(stats);
+}

src/app/blog/[slug]/page.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { Sparkles } from "lucide-react";
+import WebStuff from "@/components/Web";
+import { useParams } from "next/navigation";
+import { PostPreview } from "@/lib/posts";
+import Markdown from "@/components/Markdown";
+
+export default function BlogPost() {
+  const [post, setPost] = useState<{
+    content: string;
+    meta: PostPreview;
+  } | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const { slug } = useParams();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    async function fetchPost() {
+      const res = await fetch(`/api/blog/${slug}`);
+      const data = await res.json();
+      setPost(data);
+    }
+
+    fetchPost();
+  }, [slug]);
+
+  if (!post) {
+    return (
+      <WebStuff>
+        <div className="min-h-screen flex items-center justify-center text-slate-400">
+          Loading post...
+        </div>
+      </WebStuff>
+    );
+  }
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+  };
+
+  return (
+    <WebStuff>
+      {/* Hero Section */}
+      <motion.section
+        className="relative z-10 px-6 py-16 lg:py-24 max-w-4xl mx-auto"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <motion.div variants={itemVariants} className="mb-4">
+          <span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
+            <Sparkles className="w-4 h-4" />
+            {post.meta.category}
+          </span>
+        </motion.div>
+
+        <motion.h1
+          variants={itemVariants}
+          className="text-5xl lg:text-6xl font-bold mb-6"
+        >
+          <span className="bg-linear-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
+            {post.meta.title}
+          </span>
+        </motion.h1>
+
+        <motion.div
+          variants={itemVariants}
+          className="flex flex-wrap items-center gap-4 text-sm text-slate-400 mb-8"
+        >
+          <span>{post.meta.author}</span>
+          <span>•</span>
+          <span>{new Date(post.meta.date).toLocaleDateString()}</span>
+          {post.meta.readingTime && (
+            <>
+              <span>•</span>
+              <span>{post.meta.readingTime} min read</span>
+            </>
+          )}
+          {post.meta.tags?.map((tag, idx) => (
+            <span
+              key={idx}
+              className="px-2 py-1 bg-slate-800/50 border border-slate-700 rounded-full"
+            >
+              {tag}
+            </span>
+          ))}
+        </motion.div>
+
+        {/* Optional Featured Image */}
+        {post.meta.image && (
+          <motion.div
+            variants={itemVariants}
+            className="mb-8 overflow-hidden rounded-xl"
+          >
+            <img
+              src={post.meta.image}
+              alt={post.meta.title}
+              className="w-full h-96 object-cover"
+            />
+          </motion.div>
+        )}
+
+        {/* Post Content */}
+        <motion.section
+          variants={itemVariants}
+          className="prose prose-invert max-w-none text-slate-300"
+        >
+          <Markdown content={post.content} />
+        </motion.section>
+      </motion.section>
+    </WebStuff>
+  );
+}

src/app/blog/page.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { Sparkles } from "lucide-react";
+import WebStuff from "@/components/Web";
+import { PostPreview } from "@/lib/posts";
+
+export default function Blog() {
+  const [mounted, setMounted] = useState(false);
+  const [activeFilter, setActiveFilter] = useState("all");
+  const [projects, setProjects] = useState<PostPreview[]>([]);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    async function fetchPosts() {
+      const res = await fetch(`/api/blog`);
+
+      setProjects(await res.json());
+    }
+
+    fetchPosts();
+  }, []);
+
+  const filters = [
+    { id: "all", label: "All Blogs" },
+    { id: "news", label: "News" },
+    { id: "guides", label: "Guides" },
+    { id: "research", label: "Research" },
+    { id: "journal", label: "Journal" },
+  ];
+
+  const filteredPosts =
+    activeFilter === "all"
+      ? projects
+      : projects.filter((p) => p.category === activeFilter);
+
+  const containerVariants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.9 },
+    },
+  };
+
+  return (
+    <WebStuff>
+      {/* Hero Section */}
+      <motion.section
+        className="relative z-10 px-6 py-16 lg:py-24 max-w-7xl mx-auto"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <div className="text-center max-w-4xl mx-auto">
+          <motion.div variants={itemVariants} className="mb-6">
+            <span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
+              <Sparkles className="w-4 h-4" />
+              Latest Posts & Updates
+            </span>
+          </motion.div>
+
+          <motion.h1
+            variants={itemVariants}
+            className="text-5xl lg:text-6xl font-bold mb-6"
+          >
+            <span className="bg-linear-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
+              Project Updates
+            </span>
+          </motion.h1>
+
+          <motion.p
+            variants={itemVariants}
+            className="text-xl text-slate-300 mb-8 leading-relaxed max-w-3xl mx-auto"
+          >
+            Latest updates, articles, and guides from our team.
+          </motion.p>
+
+          {/* Filter Tabs */}
+          <motion.div
+            variants={itemVariants}
+            className="flex flex-wrap justify-center gap-3"
+          >
+            {filters.map((filter) => (
+              <button
+                key={filter.id}
+                onClick={() => setActiveFilter(() => filter.id)}
+                className={`px-6 py-2.5 rounded-lg font-medium transition-all ${
+                  activeFilter === filter.id
+                    ? "bg-purple-500 text-white shadow-lg shadow-purple-500/50"
+                    : "bg-slate-800/50 text-slate-300 hover:bg-slate-700/50 border border-slate-700"
+                }`}
+              >
+                {filter.label}
+              </button>
+            ))}
+          </motion.div>
+        </div>
+      </motion.section>
+
+      {/* Blog Posts List */}
+      <section className="relative z-10 px-6 py-12 max-w-5xl mx-auto">
+        <div className="flex flex-col gap-8">
+          {filteredPosts.map((post, i) => (
+            <motion.div
+              key={i}
+              className="relative group bg-slate-900/80 backdrop-blur border border-slate-700 rounded-2xl p-6 hover:border-purple-500/50 transition-colors"
+              whileHover={{ y: -3, transition: { duration: 0.5 } }}
+              variants={itemVariants}
+              initial="hidden"
+              animate="visible"
+            >
+              <div className="flex flex-col md:flex-row gap-4">
+                {post.image && (
+                  <div className="shrink-0 w-full md:w-40 h-32 md:h-28 overflow-hidden rounded-xl">
+                    <img
+                      src={post.image}
+                      alt={post.title}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                )}
+
+                <div className="flex-1 flex flex-col justify-between">
+                  <div>
+                    <h3 className="text-2xl font-bold mb-2 group-hover:text-purple-400 transition-colors">
+                      {post.title}
+                    </h3>
+                    <p className="text-slate-300 mb-4 line-clamp-3">
+                      {post.description}
+                    </p>
+
+                    <div className="flex flex-wrap items-center gap-3 text-sm text-slate-400 mb-4">
+                      <span>{post.author}</span>
+                      <span>•</span>
+                      <span>{new Date(post.date).toLocaleDateString()}</span>
+                      {post.readingTime && (
+                        <>
+                          <span>•</span>
+                          <span>{post.readingTime} min read</span>
+                        </>
+                      )}
+                      {post.tags?.map((tag, idx) => (
+                        <span
+                          key={idx}
+                          className="px-2 py-1 bg-slate-800/50 border border-slate-700 rounded-full"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <a
+                    href={post.url}
+                    className="self-start mt-auto inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/20 rounded-lg text-sm font-medium text-purple-400 transition-colors"
+                  >
+                    Read More
+                  </a>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </section>
+    </WebStuff>
+  );
+}

src/app/page.tsx

@@ -14,6 +14,7 @@ import {
   Lock,
   Sparkles,
 } from "lucide-react";
+import WebStuff from "@/components/Web";
 
 export default function HomePage() {
   const [mounted, setMounted] = useState(false);
@@ -86,82 +87,7 @@ export default function HomePage() {
   };
 
   return (
-    <div className="min-h-screen bg-linear-to-br from-slate-950 via-purple-950 to-slate-950 text-white">
+    <WebStuff>
-      {/* Animated background */}
-      <div className="fixed inset-0 opacity-20">
-        <div
-          className="absolute inset-0"
-          style={{
-            backgroundImage: `radial-gradient(circle at 2px 2px, rgb(168, 85, 247) 1px, transparent 0)`,
-            backgroundSize: "50px 50px",
-          }}
-        />
-      </div>
-
-      {/* Gradient orbs */}
-      <div className="fixed inset-0 overflow-hidden pointer-events-none">
-        <motion.div
-          className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl"
-          animate={{
-            scale: [1, 1.2, 1],
-            opacity: [0.3, 0.5, 0.3],
-          }}
-          transition={{
-            duration: 8,
-            repeat: Infinity,
-          }}
-        />
-        <motion.div
-          className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl"
-          animate={{
-            scale: [1.2, 1, 1.2],
-            opacity: [0.3, 0.5, 0.3],
-          }}
-          transition={{
-            duration: 8,
-            repeat: Infinity,
-            delay: 1,
-          }}
-        />
-      </div>
-
-      {/* Navigation */}
-      <motion.nav
-        initial={{ y: -100 }}
-        animate={{ y: 0 }}
-        className="relative z-10 px-6 py-6 flex justify-between items-center max-w-7xl mx-auto"
-      >
-        <motion.div className="flex items-center">
-          <img src="orus2.svg" alt="Logo" className="h-4" />
-        </motion.div>
-
-        <div className="flex gap-6 items-center">
-          {["Blog", "Projects", "About"].map((item, i) => (
-            <motion.a
-              key={item}
-              href={`/${item.toLowerCase()}`}
-              className="text-slate-300 hover:text-white transition-colors hidden md:block"
-              initial={{ opacity: 0, y: -20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: i * 0.1 }}
-              whileHover={{ y: -2 }}
-            >
-              {item}
-            </motion.a>
-          ))}
-          <motion.a
-            href="https://discord.gg/HFRsNxfCqT"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded-lg font-semibold transition-colors text-sm"
-            whileTap={{ scale: 0.95 }}
-          >
-            <MessageSquare className="w-4 h-4" />
-            Join Discord
-          </motion.a>
-        </div>
-      </motion.nav>
-
       {/* Hero Section */}
       <motion.section
         className="relative z-10 px-6 py-20 lg:py-32 max-w-7xl mx-auto"
@@ -207,8 +133,7 @@ export default function HomePage() {
             className="flex flex-col sm:flex-row gap-4 justify-center"
           >
             <motion.a
-              href="https://github.com/orus-dev"
+              href="/projects"
-              target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-linear-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 rounded-lg font-semibold text-lg shadow-lg shadow-purple-500/50"
               whileHover={{
@@ -218,20 +143,19 @@ export default function HomePage() {
               whileTap={{ scale: 0.95 }}
               transition={{ type: "spring", stiffness: 300, damping: 20 }}
             >
-              <Github className="w-5 h-5" />
               View Our Projects
               <ArrowRight className="w-5 h-5" />
             </motion.a>
 
             <motion.a
-              href="https://discord.gg/HFRsNxfCqT"
+              href="https://github.com/orus-dev"
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-purple-500 hover:bg-purple-500/15 rounded-lg font-semibold text-lg transition-all"
               whileTap={{ scale: 0.95 }}
             >
-              <MessageSquare className="w-5 h-5" />
+              Follow us on
-              Join Community
+              <Github className="w-5 h-5" />
             </motion.a>
           </motion.div>
         </div>
@@ -355,41 +279,6 @@ export default function HomePage() {
           </div>
         </motion.div>
       </motion.section>
-
+    </WebStuff>
-      {/* Footer */}
-      <footer className="relative z-10 px-6 py-12 border-t border-slate-800/50 mt-20">
-        <div className="max-w-7xl mx-auto">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
-            <img src="orus.svg" alt="Logo" className="h-4" />
-
-            <div className="text-slate-400 text-center">
-              © 2025 ORUS. Open source for everyone. Built with 💜 for
-              developers.
-            </div>
-
-            <div className="flex gap-6">
-              <motion.a
-                href="https://github.com/orus-dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-slate-400 hover:text-purple-400 transition-colors"
-                whileHover={{ scale: 1.2, rotate: 5 }}
-              >
-                <Github className="w-6 h-6" />
-              </motion.a>
-              <motion.a
-                href="https://discord.gg/HFRsNxfCqT"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-slate-400 hover:text-purple-400 transition-colors"
-                whileHover={{ scale: 1.2, rotate: -5 }}
-              >
-                <MessageSquare className="w-6 h-6" />
-              </motion.a>
-            </div>
-          </div>
-        </div>
-      </footer>
-    </div>
   );
 }

src/app/projects/page.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import {
+  Github,
+  MessageSquare,
+  Sparkles,
+  ExternalLink,
+  Star,
+  GitFork,
+} from "lucide-react";
+import WebStuff from "@/components/Web";
+import projects from "@/lib/projects";
+import formatNumber from "@/lib/formatNumber";
+
+export default function Projects() {
+  const [mounted, setMounted] = useState(false);
+  const [activeFilter, setActiveFilter] = useState("all");
+  const [orgStats, setOrgStats] = useState({
+    contributors: 0,
+    stars: 0,
+    forks: 0,
+  });
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    async function fetchStats() {
+      const res = await fetch(`/api/stats`);
+
+      setOrgStats(await res.json());
+    }
+
+    fetchStats();
+  }, []);
+
+  const filters = [
+    { id: "all", label: "All Projects" },
+    { id: "security", label: "Security" },
+    { id: "devtools", label: "Dev Tools" },
+    { id: "infrastructure", label: "Infrastructure" },
+    { id: "communication", label: "Communication" },
+  ];
+
+  const filteredProjects =
+    activeFilter === "all"
+      ? projects
+      : projects.filter((p) => p.category === activeFilter);
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+      },
+    },
+  };
+
+  return (
+    <WebStuff>
+      {/* Hero Section */}
+      <motion.section
+        className="relative z-10 px-6 py-16 lg:py-24 max-w-7xl mx-auto"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <div className="text-center max-w-4xl mx-auto">
+          <motion.div variants={itemVariants} className="mb-6">
+            <span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
+              <Sparkles className="w-4 h-4" />
+              Community Projects
+            </span>
+          </motion.div>
+
+          <motion.h1
+            variants={itemVariants}
+            className="text-5xl lg:text-6xl font-bold mb-6"
+          >
+            <span className="bg-linear-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
+              What We're Building
+            </span>
+          </motion.h1>
+
+          <motion.p
+            variants={itemVariants}
+            className="text-xl text-slate-300 mb-8 leading-relaxed max-w-3xl mx-auto"
+          >
+            Explore our projects designed to improve developers and enhance
+            security across the ecosystem.
+          </motion.p>
+
+          {/* Filter Tabs */}
+          <motion.div
+            variants={itemVariants}
+            className="flex flex-wrap justify-center gap-3"
+          >
+            {filters.map((filter) => (
+              <button
+                key={filter.id}
+                onClick={() => setActiveFilter(() => filter.id)}
+                className={`px-6 py-2.5 rounded-lg font-medium transition-all ${
+                  activeFilter === filter.id
+                    ? "bg-purple-500 text-white shadow-lg shadow-purple-500/50"
+                    : "bg-slate-800/50 text-slate-300 hover:bg-slate-700/50 border border-slate-700"
+                }`}
+              >
+                {filter.label}
+              </button>
+            ))}
+          </motion.div>
+        </div>
+      </motion.section>
+
+      {/* Projects Grid */}
+      <motion.section
+        className="relative z-10 px-6 py-12 max-w-7xl mx-auto"
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+      >
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {filteredProjects.map((project, i) => (
+            <motion.div
+              key={i}
+              layout
+              className="relative group"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, ease: "easeOut" }}
+              viewport={{ once: true, amount: 0.3 }}
+              whileHover={{ y: -8 }}
+            >
+              <div className="absolute inset-0 bg-linear-to-r from-purple-500/20 to-blue-500/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all" />
+              <div className="relative bg-slate-900/80 backdrop-blur border border-slate-700 hover:border-purple-500/50 rounded-2xl p-6 transition-all h-full flex flex-col">
+                {/* Header */}
+                <div className="flex items-start justify-between mb-4">
+                  <div className="inline-flex items-center justify-center w-12 h-12 bg-purple-500/10 rounded-xl">
+                    <project.icon className="w-6 h-6 text-purple-400" />
+                  </div>
+                  <span
+                    className={`px-3 py-1 rounded-full text-xs font-medium ${
+                      project.status === "Active"
+                        ? "bg-green-500/10 text-green-400 border border-green-500/20"
+                        : "bg-yellow-500/10 text-yellow-400 border border-yellow-500/20"
+                    }`}
+                  >
+                    {project.status}
+                  </span>
+                </div>
+
+                {/* Content */}
+                <h3 className="text-xl font-bold mb-2 group-hover:text-purple-400 transition-colors">
+                  {project.title}
+                </h3>
+                <p className="text-slate-400 text-sm mb-4 leading-relaxed grow">
+                  {project.description}
+                </p>
+
+                {/* Stats */}
+                <div className="flex items-center gap-4 mb-4 text-sm text-slate-400">
+                  <div className="flex items-center gap-1">
+                    <Star className="w-4 h-4" />
+                    <span>{project.stars.toLocaleString()}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <GitFork className="w-4 h-4" />
+                    <span>{project.forks}</span>
+                  </div>
+                </div>
+
+                {/* Tech Stack */}
+                <div className="flex flex-wrap gap-2 mb-4">
+                  {project.tech.map((tech, idx) => (
+                    <span
+                      key={idx}
+                      className="px-2.5 py-1 bg-slate-800/50 border border-slate-700 rounded-md text-xs text-slate-300"
+                    >
+                      {tech}
+                    </span>
+                  ))}
+                </div>
+
+                {/* Actions */}
+                <div className="flex gap-2 pt-4 border-t border-slate-800">
+                  <a
+                    href={project.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm font-medium transition-colors"
+                  >
+                    <Github className="w-4 h-4" />
+                    Code
+                  </a>
+                  {project.demo && (
+                    <a
+                      href={project.demo}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/20 rounded-lg text-sm font-medium text-purple-400 transition-colors"
+                    >
+                      <ExternalLink className="w-4 h-4" />
+                      Demo
+                    </a>
+                  )}
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.section>
+
+      {/* Stats Section */}
+      <motion.section
+        className="relative z-10 px-6 py-20 max-w-7xl mx-auto"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        variants={containerVariants}
+      >
+        <motion.div
+          variants={itemVariants}
+          className="bg-slate-900/30 backdrop-blur border border-slate-800 rounded-3xl p-8 lg:p-12"
+        >
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+            {[
+              { label: "Projects", value: `${projects.length}+` },
+              {
+                label: "Contributors",
+                value: `${formatNumber(orgStats.contributors)}+`,
+              },
+              { label: "Stars", value: `${formatNumber(orgStats.stars)}+` },
+              { label: "Forks", value: `${formatNumber(orgStats.forks)}+` },
+            ].map((stat, i) => (
+              <motion.div
+                key={i}
+                variants={itemVariants}
+                className="text-center"
+              >
+                <div className="text-3xl lg:text-4xl font-bold text-purple-400 mb-2">
+                  {stat.value}
+                </div>
+                <div className="text-slate-400">{stat.label}</div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </motion.section>
+
+      {/* CTA Section */}
+      <motion.section
+        className="relative z-10 px-6 py-20 max-w-5xl mx-auto"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        variants={containerVariants}
+      >
+        <motion.div
+          variants={itemVariants}
+          className="relative overflow-hidden bg-linear-to-r from-purple-500/10 to-blue-500/10 backdrop-blur border border-purple-500/20 rounded-3xl p-12 text-center"
+        >
+          <div className="absolute inset-0 bg-linear-to-r from-purple-500/5 to-blue-500/5" />
+
+          <div className="relative">
+            <h2 className="text-3xl lg:text-4xl font-bold mb-4">
+              Want to Contribute?
+            </h2>
+            <p className="text-slate-300 text-lg mb-8 max-w-2xl mx-auto">
+              All our projects are open source and welcoming to contributors.
+              Join us in building tools that make a difference.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <motion.a
+                href="https://github.com/orus-dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-purple-600 hover:bg-purple-500 rounded-lg font-semibold text-lg transition-colors"
+                whileTap={{ scale: 0.95 }}
+              >
+                <Github className="w-5 h-5" />
+                View on GitHub
+              </motion.a>
+
+              <motion.a
+                href="https://discord.gg/HFRsNxfCqT"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-slate-600 hover:border-slate-400 rounded-lg font-semibold text-lg transition-colors"
+                whileTap={{ scale: 0.95 }}
+              >
+                <MessageSquare className="w-5 h-5" />
+                Join Discord
+              </motion.a>
+            </div>
+          </div>
+        </motion.div>
+      </motion.section>
+    </WebStuff>
+  );
+}

src/components/Markdown.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeHighlight from "rehype-highlight";
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import remarkBreaks from "remark-breaks";
+import rehypeRaw from "rehype-raw";
+import "katex/dist/katex.min.css";
+import "highlight.js/styles/github-dark.css";
+import "highlight.js/styles/github.css";
+import { CopyIcon } from "lucide-react";
+
+interface MarkdownProps {
+  content: string;
+  components?: Record<string, React.ElementType>;
+  darkMode?: boolean;
+}
+
+const Markdown: React.FC<MarkdownProps> = ({
+  content,
+  components,
+  darkMode = true,
+}) => {
+  // Copy to clipboard handler
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  return (
+    <div className={darkMode ? "prose prose-invert" : "prose"}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[
+          rehypeKatex,
+          rehypeHighlight,
+          rehypeSlug,
+          rehypeAutolinkHeadings,
+          rehypeRaw,
+          remarkBreaks,
+        ]}
+        components={{
+          h1: ({ node, ...props }) => (
+            <h1 className="text-4xl font-bold my-6" {...props} />
+          ),
+          h2: ({ node, ...props }) => (
+            <h2 className="text-3xl font-semibold my-5" {...props} />
+          ),
+          h3: ({ node, ...props }) => (
+            <h3 className="text-2xl font-semibold my-4" {...props} />
+          ),
+          a: ({ href, children, ...props }) => (
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-purple-400 hover:underline"
+              {...props}
+            >
+              {children}
+            </a>
+          ),
+          code: ({ className, children, ...props }) => {
+            const language = className?.replace("language-", "") || "";
+            return (
+              <div className="relative group my-4">
+                <pre
+                  className={`rounded-lg p-4 overflow-x-auto ${
+                    darkMode ? "bg-gray-900" : "bg-gray-100"
+                  }`}
+                >
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                </pre>
+                <button
+                  onClick={() => copyToClipboard(String(children))}
+                  className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-700 text-white px-2 py-1 text-sm rounded"
+                >
+                  Copy
+                </button>
+              </div>
+            );
+          },
+          details: ({ node, ...props }) => (
+            <details
+              className="my-4 p-2 border rounded bg-gray-50 dark:bg-gray-800"
+              {...props}
+            />
+          ),
+          summary: ({ node, ...props }) => (
+            <summary className="font-semibold cursor-pointer" {...props} />
+          ),
+          ul: ({ ...props }) => (
+            <ul {...props} className="list-disc list-inside my-1.5" />
+          ),
+          ol: ({ ...props }) => (
+            <ol {...props} className="list-decimal list-inside my-1.5" />
+          ),
+          hr: ({ ...props }) => <hr {...props} className="my-4" />,
+          ...components,
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default Markdown;

src/components/Web.tsx

@@ -0,0 +1,163 @@
+import { motion } from "framer-motion";
+import { Github, MessageSquare } from "lucide-react";
+
+export default function WebStuff({
+  children,
+}: Readonly<{
+  children?: React.ReactNode;
+}>) {
+  return (
+    <div className="min-h-screen bg-linear-to-br from-slate-950 via-purple-950 to-slate-950 text-white">
+      {/* Animated background */}
+      <div className="fixed inset-0 opacity-20">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `radial-gradient(circle at 2px 2px, rgb(168, 85, 247) 1px, transparent 0)`,
+            backgroundSize: "50px 50px",
+          }}
+        />
+      </div>
+
+      {/* Gradient orbs */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <motion.div
+          className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl"
+          animate={{
+            scale: [1, 1.2, 1],
+            opacity: [0.3, 0.5, 0.3],
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+          }}
+        />
+        <motion.div
+          className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl"
+          animate={{
+            scale: [1.2, 1, 1.2],
+            opacity: [0.3, 0.5, 0.3],
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+            delay: 1,
+          }}
+        />
+      </div>
+
+      {/* Navigation */}
+      <motion.nav
+        initial="hidden"
+        animate="visible"
+        variants={{
+          hidden: { opacity: 0 },
+          visible: {
+            opacity: 1,
+            transition: {
+              duration: 0.5,
+            },
+          },
+        }}
+        className="relative z-10 px-6 py-6 flex justify-between items-center max-w-7xl mx-auto"
+      >
+        <motion.a
+          className="flex items-center"
+          href="/"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+        >
+          <img src="orus2.svg" alt="Logo" className="h-4" />
+        </motion.a>
+
+        {/* Menu */}
+        <motion.div
+          className="flex gap-6 items-center"
+          variants={{
+            hidden: {},
+            visible: {
+              transition: {
+                staggerChildren: 0.08,
+                delayChildren: 0.15,
+              },
+            },
+          }}
+        >
+          {["Blog", "Projects", "About"].map((item) => (
+            <motion.a
+              key={item}
+              href={`/${item.toLowerCase()}`}
+              className="text-slate-300 hover:text-white transition-colors hidden md:block"
+              variants={{
+                hidden: { opacity: 0, y: -12 },
+                visible: { opacity: 1, y: 0 },
+              }}
+              transition={{
+                duration: 0.8,
+              }}
+              whileHover={{ y: -2 }}
+            >
+              {item}
+            </motion.a>
+          ))}
+
+          <motion.a
+            href="https://discord.gg/HFRsNxfCqT"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded-lg font-semibold transition-colors text-sm"
+            variants={{
+              hidden: { opacity: 0, y: -12 },
+              visible: { opacity: 1, y: 0 },
+            }}
+            transition={{
+              duration: 0.45,
+              ease: [0.25, 0.1, 0.25, 1],
+            }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <MessageSquare className="w-4 h-4" />
+            Join Discord
+          </motion.a>
+        </motion.div>
+      </motion.nav>
+
+      {children}
+
+      <footer className="relative z-10 px-6 py-12 border-t border-slate-800/50 mt-20">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
+            <img src="orus.svg" alt="Logo" className="h-4" />
+
+            <div className="text-slate-400 text-center">
+              © 2025 ORUS. Open source for everyone. Built with 💜 for
+              developers.
+            </div>
+
+            <div className="flex gap-6">
+              <motion.a
+                href="https://github.com/orus-dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-slate-400 hover:text-purple-400 transition-colors"
+                whileHover={{ scale: 1.2, rotate: 5 }}
+              >
+                <Github className="w-6 h-6" />
+              </motion.a>
+              <motion.a
+                href="https://discord.gg/HFRsNxfCqT"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-slate-400 hover:text-purple-400 transition-colors"
+                whileHover={{ scale: 1.2, rotate: -5 }}
+              >
+                <MessageSquare className="w-6 h-6" />
+              </motion.a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/lib/formatNumber.tsx

@@ -0,0 +1,7 @@
+export default function formatNumber(num: number): string {
+  if (num === null) return num;
+  if (num < 1000) return num.toString();
+  if (num < 1_000_000)
+    return (num / 1000).toFixed(num % 1000 === 0 ? 0 : 1) + "k";
+  return (num / 1_000_000).toFixed(num % 1_000_000 === 0 ? 0 : 1) + "M";
+}

src/lib/posts.ts

@@ -0,0 +1,11 @@
+export type PostPreview = {
+  title: string;
+  description: string;
+  author: string;
+  date: string;
+  readingTime: number;
+  tags: string[];
+  image: string;
+  url: string;
+  category: "news" | "guides" | "journal" | "research";
+};

src/lib/projects.ts

@@ -0,0 +1,94 @@
+import {
+  LucideIcon,
+  MessageSquare,
+  NetworkIcon,
+  ServerIcon,
+} from "lucide-react";
+
+type OrusProject = {
+  title: string;
+  description: string;
+  category: string;
+  icon: LucideIcon;
+  stars: number;
+  forks: number;
+  tech: string[];
+  status: "Active" | "Beta" | "Alpha" | "Planning";
+  github: string;
+  demo?: string;
+};
+
+const orusProjects: OrusProject[] = [
+  {
+    title: "sentryx",
+    description:
+      "Multi-server management panel with high security — helps to host apps or media securely.",
+    category: "infrastructure",
+    icon: ServerIcon,
+    stars: 1,
+    forks: 3,
+    tech: ["TypeScript", "Docker"],
+    status: "Active",
+    github: "https://github.com/orus-dev/sentryx",
+  },
+  {
+    title: "ghostnet",
+    description:
+      "Privacy-focused protocol / spec designed to resist censorship and surveillance. ",
+    category: "security",
+    icon: NetworkIcon,
+    stars: 1,
+    forks: 0,
+    tech: ["Specs", "P2P"],
+    status: "Active",
+    github: "https://github.com/orus-dev/ghostnet",
+  },
+  {
+    title: "voxa",
+    description:
+      "A chat application (client side) — part of ORUS’s communication tools.",
+    category: "communication",
+    icon: MessageSquare,
+    stars: 1,
+    forks: 3,
+    tech: ["TypeScript"],
+    status: "Active",
+    github: "https://github.com/orus-dev/voxa",
+  },
+  {
+    title: "ghostnet-rs",
+    description: "Rust implementation / library for the GhostNet protocol.",
+    category: "security",
+    icon: MessageSquare,
+    stars: 0,
+    forks: 2,
+    tech: ["Rust", "P2P"],
+    status: "Active",
+    github: "https://github.com/orus-dev/ghostnet-rs",
+  },
+  {
+    title: "orus",
+    description: "The official ORUS website / landing page repository.",
+    category: "infrastructure",
+    icon: MessageSquare,
+    stars: 0,
+    forks: 0,
+    tech: ["TypeScript"],
+    status: "Active",
+    github: "https://github.com/orus-dev/orus",
+  },
+  {
+    title: "drift",
+    description:
+      "Productivity / organization app aiming to help users get rid of distractions.",
+    category: "devtools",
+    icon: MessageSquare,
+    stars: 0,
+    forks: 2,
+    tech: ["TypeScript"],
+    status: "Active",
+    github: "https://github://github.com/orus-dev/drift",
+  },
+];
+
+export default orusProjects;