<div class="container mx-auto p-4 md:p-8 max-w-7xl">
<header class="text-center mb-10">
<h1 class="text-4xl md:text-5xl font-bold text-slate-900">Project Plan: A Federated Professional Network</h1>
<p class="mt-4 text-lg text-zinc-600 max-w-3xl mx-auto">An interactive guide to building a decentralized, user-owned alternative to LinkedIn, built with Blazor and ActivityPub.</p>
<div class="mt-6">
<button id="eli5-toggle" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-2 px-4 rounded">
Explain Like I'm 5
</button>
</div>
</header>
<div id="pro-content">
<!-- Pro content goes here -->
<div class="mb-8 border-b border-slate-200">
<nav class="flex flex-wrap -mb-px justify-center" aria-label="Tabs">
<button class="tab-btn tab-active w-full sm:w-auto text-center border-b-2 py-4 px-6 text-base" data-tab="vision">The Vision</button>
<button class="tab-btn tab-inactive w-full sm:w-auto text-center border-b-2 py-4 px-6 text-base" data-tab="build">The Build Plan</button>
<button class="tab-btn tab-inactive w-full sm:w-auto text-center border-b-2 py-4 px-6 text-base" data-tab="features">Feature Roadmap</button>
</nav>
</div>
<main>
<!-- Tab Content: The Vision -->
<div id="vision" class="tab-content">
<section class="bg-white p-6 sm:p-8 rounded-xl shadow-sm">
<h2 class="text-2xl font-bold text-slate-800 mb-4">The Big Picture: A Federated Network</h2>
<p class="text-zinc-600 mb-8">Instead of one company owning all the data, a federated network is composed of many independent servers (called instances) that communicate with each other. This creates a resilient, user-centric system where individuals have control over their data and identity. The goal is to build such a network using Blazor for the frontend and ActivityPub for the federation protocol.</p>
<div class="p-6 bg-slate-50 rounded-lg">
<h3 class="text-lg font-semibold text-center mb-4">How Federation Works</h3>
<div class="flex flex-col md:flex-row items-center justify-around gap-4 text-center">
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-2 text-2xl">👤</div>
<span class="font-semibold">User A</span>
<span class="text-sm text-zinc-500">instance-A.com</span>
</div>
<div class="text-2xl font-mono text-zinc-400"><---></div>
<div class="flex flex-col items-center">
<div class="bg-slate-200 rounded-lg flex flex-col items-center justify-center p-6">
<span class="text-4xl">🌐</span>
<span class="font-semibold mt-1">Fediverse</span>
<span class="text-xs text-zinc-500">(ActivityPub Protocol)</span>
</div>
</div>
<div class="text-2xl font-mono text-zinc-400"><---></div>
<div class="flex flex-col items-center">
<div class="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mb-2 text-2xl">👤</div>
<span class="font-semibold">User B</span>
<span class="text-sm text-zinc-500">instance-B.org</span>
</div>
</div>
</div>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="text-xl font-bold mb-3">Key Advantages</h3>
<ul class="space-y-3 text-zinc-700">
<li class="flex items-start"><span class="text-amber-500 mr-3 mt-1">◆</span><div><strong class="text-slate-800">Data Ownership & Portability:</strong> Users choose their server and can migrate without losing their network.</div></li>
<li class="flex items-start"><span class="text-amber-500 mr-3 mt-1">◆</span><div><strong class="text-slate-800">Censorship Resistance:</strong> No single entity controls the network; power is distributed to instance admins.</div></li>
<li class="flex items-start"><span class="text-amber-500 mr-3 mt-1">◆</span><div><strong class="text-slate-800">Innovation & Specialization:</strong> Anyone can create an instance for niche communities, fostering diversity.</div></li>
<li class="flex items-start"><span class="text-amber-500 mr-3 mt-1">◆</span><div><strong class="text-slate-800">No Central Point of Failure:</strong> The network is resilient and stays online even if some servers fail.</div></li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold mb-3">The Primary Challenge</h3>
<div class="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg">
<strong class="text-red-800">Overcoming the Network Effect</strong>
<p class="text-red-700 mt-1">LinkedIn's value comes from its massive, existing user base. To compete, this new platform must offer compelling, unique advantages from day one to attract an initial critical mass of users.</p>
</div>
</div>
</div>
</section>
</div>
<!-- Tab Content: The Build -->
<div id="build" class="tab-content hidden">
<section class="bg-white p-6 sm:p-8 rounded-xl shadow-sm">
<h2 class="text-2xl font-bold text-slate-800 mb-2">The Build Plan: A Phased Approach</h2>
<p class="text-zinc-600 mb-8">Development is broken into two main phases: first, building a polished, standalone application (MVP), and second, implementing the federation protocol to connect it to the wider decentralized web.</p>
<div id="timeline-container">
<!-- Phase 1 -->
<div class="timeline-item relative pl-8 sm:pl-10 py-6 border-l-2 border-slate-200">
<div class="absolute -left-4 top-5 w-8 h-8 bg-amber-500 text-white rounded-full flex items-center justify-center font-bold">1</div>
<div class="cursor-pointer">
<h3 class="text-xl font-bold text-amber-700">Phase 1: Build a Stellar Single-Instance Application (MVP)</h3>
<p class="text-zinc-600 mt-1">Focus on creating a complete, polished, and self-contained web app that works perfectly on its own.</p>
</div>
<div class="timeline-item-content mt-4 space-y-4">
<div>
<h4 class="font-semibold text-slate-700">Step 1: Backend Foundation (ASP.NET Core API)</h4>
<ul class="list-disc list-inside text-zinc-600 mt-2 space-y-1">
<li><strong>Tech Stack:</strong> ASP.NET Core Web API with PostgreSQL.</li>
<li><strong>Data Models:</strong> Define `User`, `Profile`, `Connection`, and `Post` entities.</li>
<li><strong>API Endpoints:</strong> Build RESTful endpoints for auth, profiles, connections, and feeds.</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-slate-700">Step 2: Frontend Experience (Blazor WASM Client)</h4>
<ul class="list-disc list-inside text-zinc-600 mt-2 space-y-1">
<li><strong>Authentication:</strong> Secure login/registration flow (JWTs/OIDC).</li>
<li><strong>UI Components:</strong> Create responsive components for profiles, feeds, messaging, etc.</li>
<li><strong>API Connection:</strong> Use `HttpClient` to communicate with the backend.</li>
</ul>
</div>
</div>
</div>
<!-- Phase 2 -->
<div class="timeline-item relative pl-8 sm:pl-10 py-6 border-l-2 border-slate-200">
<div class="absolute -left-4 top-5 w-8 h-8 bg-amber-500 text-white rounded-full flex items-center justify-center font-bold">2</div>
<div class="cursor-pointer">
<h3 class="text-xl font-bold text-amber-700">Phase 2: Decentralize and Federate with ActivityPub</h3>
<p class="text-zinc-600 mt-1">Implement the standard protocol to allow your server to communicate with other compatible servers in the Fediverse.</p>
</div>
<div class="timeline-item-content mt-4 space-y-4">
<div>
<h4 class="font-semibold text-slate-700">Step 3: Implement the ActivityPub Protocol</h4>
<ul class="list-disc list-inside text-zinc-600 mt-2 space-y-1">
<li><strong>Learn Protocol:</strong> Understand Actors, Objects, Activities, Inboxes, and Outboxes.</li>
<li><strong>Extend API:</strong> Add endpoints for `webfinger`, `inbox`, and `outbox`.</li>
<li><strong>Federate Logic:</strong> Update existing features to push and process activities to/from other servers.</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-slate-700">Step 4: Instance Management and Moderation</h4>
<ul class="list-disc list-inside text-zinc-600 mt-2 space-y-1">
<li><strong>Admin Tools:</strong> Build tools for server owners to manage and moderate their instance.</li>
<li><strong>Discovery:</strong> Implement search to find and follow users on other instances.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Tab Content: Features -->
<div id="features" class="tab-content hidden">
<section class="p-6 sm:p-8">
<div class="text-center">
<h2 class="text-2xl font-bold text-slate-800 mb-2">Feature Roadmap: Building a Better Experience</h2>
<p class="text-zinc-600 mb-8 max-w-3xl mx-auto">To succeed, the platform must solve users' biggest frustrations with existing networks. The features are tiered to prioritize a strong launch (MVP) followed by compelling differentiators.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Tier 1 -->
<div class="bg-white p-6 rounded-xl shadow-sm">
<h3 class="text-lg font-bold text-amber-600 border-b-2 border-amber-200 pb-2 mb-4">Tier 1: Core MVP Features</h3>
<div class="space-y-4">
<div class="kanban-card bg-slate-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">✅ Federated Identity & Profile</h4>
<p class="text-sm text-zinc-600 mt-1">A rich, user-owned profile that can connect across the entire network.</p>
</div>
<div class="kanban-card bg-slate-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">✅ Chronological & Uncluttered Feed</h4>
<p class="text-sm text-zinc-600 mt-1">A simple, reverse-chronological feed with **no algorithm**—a key selling point.</p>
</div>
<div class="kanban-card bg-slate-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">✅ Meaningful Connections</h4>
<p class="text-sm text-zinc-600 mt-1">A straightforward system to manage connection requests across the Fediverse.</p>
</div>
<div class="kanban-card bg-slate-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">✅ Direct Messaging</h4>
<p class="text-sm text-zinc-600 mt-1">Secure, private messaging between connected users.</p>
</div>
</div>
</div>
<!-- Tier 2 -->
<div class="bg-white p-6 rounded-xl shadow-sm">
<h3 class="text-lg font-bold text-sky-600 border-b-2 border-sky-200 pb-2 mb-4">Tier 2: "Why It's Better" Features</h3>
<div class="space-y-4">
<div class="kanban-card bg-sky-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">💎 Verifiable Credentials</h4>
<p class="text-sm text-zinc-600 mt-1">Allow companies and schools to issue cryptographic credentials, building a powerful layer of trust.</p>
</div>
<div class="kanban-card bg-sky-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">🎛️ User-Controlled Discovery</h4>
<p class="text-sm text-zinc-600 mt-1">Let users choose how they discover content—no more black-box algorithms.</p>
</div>
<div class="kanban-card bg-sky-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">💼 Project-Centric Portfolios</h4>
<p class="text-sm text-zinc-600 mt-1">Go beyond job titles with detailed project showcases, including galleries and demos.</p>
</div>
</div>
</div>
<!-- Tier 3 -->
<div class="bg-white p-6 rounded-xl shadow-sm">
<h3 class="text-lg font-bold text-emerald-600 border-b-2 border-emerald-200 pb-2 mb-4">Tier 3: Long-Term Vision</h3>
<div class="space-y-4">
<div class="kanban-card bg-emerald-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">💸 Ethical Monetization</h4>
<p class="text-sm text-zinc-600 mt-1">No ads or data selling. Revenue from premium hosting, pro features, and low-fee job boards.</p>
</div>
<div class="kanban-card bg-emerald-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">🌐 A Decentralized Job Market</h4>
<p class="text-sm text-zinc-600 mt-1">A federated job board where companies post openings directly from their own instances.</p>
</div>
<div class="kanban-card bg-emerald-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">🛠️ Open Ecosystem</h4>
<p class="text-sm text-zinc-600 mt-1">Allow third-party developers to build new clients and tools that interact with the network.</p>
</div>
</div>
</div>
</div>
<div class="mt-10 bg-white p-6 sm:p-8 rounded-xl shadow-sm">
<h3 class="text-xl font-bold text-center mb-4">Illustrating the Ethical Monetization Model</h3>
<p class="text-center text-zinc-600 mb-6 max-w-2xl mx-auto">This chart shows a potential breakdown of revenue streams, moving away from advertising and focusing on provide direct value to users and businesses.</p>
<div class="chart-container">
<canvas id="monetizationChart"></canvas>
</div>
</div>
</section>
</div>
</main>
</div>
<div id="eli5-content" class="hidden">
<div class="mb-8 border-b border-slate-200">
<nav class="flex flex-wrap -mb-px justify-center" aria-label="Tabs">
<button class="tab-btn-eli5 tab-active w-full sm:w-auto text-center border-b-2 py-4 px-6 text-base" data-tab="vision-eli5">The Big Idea</button>
<button class="tab-btn-eli5 tab-inactive w-full sm:w-auto text-center border-b-2 py-4 px-6 text-base" data-tab="build-eli5">How We'll Build It</button>
<button class="tab-btn-eli5 tab-inactive w-full sm:w-auto text-center border-b-2 py-4 px-6 text-base" data-tab="features-eli5">Cool Stuff It Will Have</button>
</nav>
</div>
<main>
<div id="vision-eli5" class="tab-content-eli5">
<section class="bg-white p-6 sm:p-8 rounded-xl shadow-sm">
<h2 class="text-2xl font-bold text-slate-800 mb-4 text-center">The Big Idea: Your Own Digital Clubhouse</h2>
<p class="text-zinc-600 mb-8 text-center max-w-3xl mx-auto">Imagine the internet is a giant playground. Right now, big companies own the most popular games, like the giant slide (LinkedIn) or the huge sandbox (Facebook). You can play, but they make the rules, and they can change them whenever they want. If you leave, you leave all your friends and creations behind.</p>
<p class="text-zinc-600 mb-8 text-center max-w-3xl mx-auto">A federated network is like giving everyone their own special clubhouse in the playground. You and your friends can have your own spaces, with your own rules. But the cool part is, all the clubhouses can connect! You can still visit your friends in their clubhouses and share your toys. You own your space, and you can even move your whole clubhouse to a different part of the playground without losing anything.</p>
</section>
</div>
<div id="build-eli5" class="tab-content-eli5 hidden">
<section class="bg-white p-6 sm:p-8 rounded-xl shadow-sm">
<h2 class="text-2xl font-bold text-slate-800 mb-4 text-center">How We'll Build It: Step by Step</h2>
<div class="space-y-4 max-w-3xl mx-auto">
<div class="bg-amber-50 p-4 rounded-lg">
<h3 class="font-semibold text-amber-800">Step 1: Build a Really Fun Clubhouse First</h3>
<p class="text-sm text-amber-700 mt-1">First, we'll build one amazing clubhouse that has everything you need: a place to show off your cool projects, a way to chat with friends, and a board to see what everyone is up to. It will be awesome all by itself.</p>
</div>
<div class="bg-sky-50 p-4 rounded-lg">
<h3 class="font-semibold text-sky-800">Step 2: Connect All the Clubhouses</h3>
<p class="text-sm text-sky-700 mt-1">Next, we'll add the magic that lets all the different clubhouses talk to each other. This means you can make friends with people from other clubhouses and see the cool things they're building, all without leaving your own space.</p>
</div>
</div>
</section>
</div>
<div id="features-eli5" class="tab-content-eli5 hidden">
<section class="bg-white p-6 sm:p-8 rounded-xl shadow-sm">
<h2 class="text-2xl font-bold text-slate-800 mb-4 text-center">Cool Stuff It Will Have</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<div class="bg-slate-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">Your Own Profile</h4>
<p class="text-sm text-zinc-600 mt-1">A page that's all about you, where you can share what you're good at.</p>
</div>
<div class="bg-slate-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">A Simple Feed</h4>
<p class="text-sm text-zinc-600 mt-1">See what your friends are doing, in the order it happens. No confusing computer magic deciding for you.</p>
</div>
<div class="bg-slate-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">Real-Deal Proof</h4>
<p class="text-sm text-zinc-600 mt-1">Schools and jobs can give you special badges to prove you learned or worked there. Like a digital gold star!</p>
</div>
<div class="bg-slate-50 p-4 rounded-lg">
<h4 class="font-semibold text-slate-800">No Sneaky Ads</h4>
<p class="text-sm text-zinc-600 mt-1">We won't sell your information or show you sneaky ads. We'll make money by offering extra-special clubhouses for people who want them.</p>
</div>
</div>
</section>
</div>
</main>
</div>
<div class="mt-10 bg-white p-6 sm:p-8 rounded-xl shadow-sm">
<h3 class="text-xl font-bold text-center mb-4">Stay Updated!</h3>
<p class="text-center text-zinc-600 mb-6 max-w-2xl mx-auto">Interested in this project? Sign up to get updates on our progress.</p>
</div>
</div>