From c50000feaeeda3c41b6183e366f5b5606eaae218 Mon Sep 17 00:00:00 2001
From: Jiajun Xu <jjxu95@gmail.com>
Date: Sun, 18 Jan 2026 21:02:11 -0800
Subject: [PATCH] update bookclub page; rename What Were Working On to Our
 Projects in the code

---
 src/pages/OurProjects.astro                   | 124 +++++++
 src/pages/OurProjectsPages/Alternatives.astro |  99 +++++
 src/pages/OurProjectsPages/BookClub.astro     |  43 +++
 src/pages/OurProjectsPages/Calendar.astro     |  21 ++
 src/pages/OurProjectsPages/PetCalendar.astro  | 343 ++++++++++++++++++
 src/pages/OurProjectsPages/Pihole.astro       |  19 +
 6 files changed, 649 insertions(+)
 create mode 100644 src/pages/OurProjects.astro
 create mode 100644 src/pages/OurProjectsPages/Alternatives.astro
 create mode 100644 src/pages/OurProjectsPages/BookClub.astro
 create mode 100644 src/pages/OurProjectsPages/Calendar.astro
 create mode 100644 src/pages/OurProjectsPages/PetCalendar.astro
 create mode 100644 src/pages/OurProjectsPages/Pihole.astro

diff --git a/src/pages/OurProjects.astro b/src/pages/OurProjects.astro
new file mode 100644
index 0000000..098f97d
--- /dev/null
+++ b/src/pages/OurProjects.astro
@@ -0,0 +1,124 @@
+---
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Layout from "../layouts/Layout.astro";
+import "../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="OurProjects" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">What We're Working On</h1>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+          <!-- <div class="justify-items-center">
+            <img
+              src="/assets/calendar.png"
+              alt="stack of books"
+              width="250"
+              class="border pb-4"
+            />
+
+            <a
+<<<<<<<< HEAD:src/pages/projects.astro
+              href="/projects/calendar/"
+========
+              href="/OurProjectsPages/Calendar/"
+>>>>>>>> 1af1c17 (update bookclub page; rename What Were Working On to Our Projects in the code):src/pages/OurProjects.astro
+              class="underline decoration-solid">Calendar</a
+            >
+          </div> -->
+
+          <div class="justify-items-center">
+            <img
+<<<<<<<< HEAD:src/pages/projects.astro
+========
+              src="/assets/pihole.jpeg"
+              alt="pihole parts"
+              width="250"
+              class="border"
+            />
+            <a
+              href="/OurProjectsPages/Pihole/"
+              class="underline decoration-solid">Pihole Workshop</a
+            >
+          </div>
+
+          <div class="justify-items-center">
+            <img
+>>>>>>>> 1af1c17 (update bookclub page; rename What Were Working On to Our Projects in the code):src/pages/OurProjects.astro
+              src="/assets/book-club.jpg"
+              alt="stack of books"
+              width="280"
+              class="border"
+            />
+            <a
+<<<<<<<< HEAD:src/pages/projects.astro
+              href="/projects/bookclub/"
+========
+              href="/OurProjectsPages/BookClub/"
+>>>>>>>> 1af1c17 (update bookclub page; rename What Were Working On to Our Projects in the code):src/pages/OurProjects.astro
+              class="underline decoration-solid">Book Club</a
+            >
+          </div>
+
+          
+
+          <div class="justify-items-center">
+            <img
+              src="/assets/computer.png"
+              alt="computer"
+              width="250"
+              class="border"
+            />
+<<<<<<<< HEAD:src/pages/projects.astro
+            <a href="/projects/alternatives/" class="underline decoration-solid">Big Tech Alternatives</a>
+          </div>
+
+          <div class="justify-items-center">
+            <img
+              src="/assets/zines-thumbnail.png"
+              alt="zines"
+              width="250"
+              class="border object-cover w-[250px] h-[250px]"
+            />
+            <a href="/projects/zines/" class="underline decoration-solid">Zines</a>
+          </div>
+
+          <div class="justify-items-center">
+            <img
+              src="/assets/pihole.jpeg"
+              alt="pihole parts"
+              width="250"
+              class="border"
+            />
+            <a
+              href="/projects/pihole/"
+              class="underline decoration-solid">Pihole Workshop</a
+            >
+========
+            <a href="/OurProjectsPages/Alternatives/" class="underline decoration-solid">Big Tech Alternatives</a>
+>>>>>>>> 1af1c17 (update bookclub page; rename What Were Working On to Our Projects in the code):src/pages/OurProjects.astro
+          </div>
+
+          <div class="justify-items-center">
+            <img
+              src="/assets/pet-calendar-2026-cover.jpg"
+              alt="photo collage of cats"
+              width="330"
+
+              class="border"
+            />
+            <a
+              href="/projects/PetCalendar/"
+              class="underline decoration-solid">Pet Calendar</a
+            >
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>
diff --git a/src/pages/OurProjectsPages/Alternatives.astro b/src/pages/OurProjectsPages/Alternatives.astro
new file mode 100644
index 0000000..759390d
--- /dev/null
+++ b/src/pages/OurProjectsPages/Alternatives.astro
@@ -0,0 +1,99 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+
+
+import Card from "../../components/Card.astro";
+
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="OurProjects" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Big Tech Alternatives</h1>
+        <p class="mb-4">Explore open-source and privacy-focused alternatives to popular big tech software.</p>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <Card
+            title="Browsers"
+            bigTech="Chrome (Google)"
+            alternatives={[
+              { name: 'Firefox', description: 'Privacy-focused browser.', url: 'https://www.mozilla.org/firefox' },
+            ]}
+            bgClass="bg-blue-50"
+          />
+
+          <Card
+            title="Cloud Storage"
+            bigTech="Google Drive"
+            alternatives={[
+              { name: 'Nextcloud', description: 'Self-hosted file sync and share.', url: 'https://nextcloud.com' }
+            ]}
+            bgClass="bg-indigo-50"
+          />
+
+          <Card
+            title="Email"
+            bigTech="Gmail (Google)"
+            alternatives={[
+              { name: 'ProtonMail', description: 'Encrypted email.', url: 'https://protonmail.com' },
+            ]}
+            bgClass="bg-yellow-50"
+          />
+
+          <Card
+            title="Maps"
+            bigTech="Google Maps"
+            alternatives={[
+              { name: 'OpenStreetMap', description: 'Community-driven maps.', url: 'https://www.openstreetmap.org' }
+            ]}
+            bgClass="bg-teal-50"
+          />
+
+          <Card
+            title="Messaging"
+            bigTech="WhatsApp (Meta), Slack"
+            alternatives={[
+              { name: 'Signal', description: 'Encrypted messaging (alternative to WhatsApp).', url: 'https://signal.org' },
+              { name: 'Element', description: 'Matrix-based chat (alternative to Slack).', url: 'https://element.io' }
+            ]}
+            bgClass="bg-red-50"
+          />
+
+          <Card
+            title="Search Engines"
+            bigTech="Google Search"
+            alternatives={[
+              { name: 'DuckDuckGo', description: 'Privacy-protecting search.', url: 'https://duckduckgo.com' },
+            ]}
+            bgClass="bg-green-50"
+          />
+
+          <Card
+            title="Social Media"
+            bigTech="Twitter (X), Facebook (Meta)"
+            alternatives={[
+              { name: 'Mastodon', description: 'Decentralized social network (alternative to Twitter).', url: 'https://joinmastodon.org' },
+            ]}
+            bgClass="bg-purple-50"
+          />
+
+          <Card
+            title="Video Platforms"
+            bigTech="YouTube (Google)"
+            alternatives={[
+              { name: 'PeerTube', description: 'Decentralized video hosting.', url: 'https://joinpeertube.org' },
+            ]}
+            bgClass="bg-pink-50"
+          />
+
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>
diff --git a/src/pages/OurProjectsPages/BookClub.astro b/src/pages/OurProjectsPages/BookClub.astro
new file mode 100644
index 0000000..23edeaa
--- /dev/null
+++ b/src/pages/OurProjectsPages/BookClub.astro
@@ -0,0 +1,43 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="OurProjects" />
+      <div class="px-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Book Club</h1>
+        <p class="mb-4">
+          We read and discuss books about technology, power, and resistance. If
+          you have book suggestions, fill out the interest form on our <a
+            href="/"
+            class="underline">website homepage</a
+          > and let us know when we get in contact with you!
+        </p>
+
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold">Current Book</h2>
+            <div>
+              Holding Change - adrienne maree brown
+            </div>
+          </div>
+
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold">Past Books</h2>
+            <ul class="list-disc pl-6">
+              <li>Race After Technology - Ruha Benjamin</li>
+              <li>Common Circuits - Luis Felipe R. Murillo</li>
+              <li>Internet for the People - Ben Tarnoff</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>
diff --git a/src/pages/OurProjectsPages/Calendar.astro b/src/pages/OurProjectsPages/Calendar.astro
new file mode 100644
index 0000000..0831127
--- /dev/null
+++ b/src/pages/OurProjectsPages/Calendar.astro
@@ -0,0 +1,21 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="Calendar" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Calendar</h1>
+        <div class="flex flex-col gap-4">
+          <p class="mb-4">See what we're doing next!</p>
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>
diff --git a/src/pages/OurProjectsPages/PetCalendar.astro b/src/pages/OurProjectsPages/PetCalendar.astro
new file mode 100644
index 0000000..a466ff8
--- /dev/null
+++ b/src/pages/OurProjectsPages/PetCalendar.astro
@@ -0,0 +1,343 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="WhatWereWorkingOn" />
+      <div class="pl-4 pr-4">
+        <h1 class="pb-4 pt-4 text-3xl font-semibold">Pet Calendar</h1>          
+          <div>We created a pet calendar with 12 beautiful pictures of RTM's 
+          animal friends. 
+          <p class="pb-2">Each month, our pets will share with you with a different way you can 
+          Resist Big Tech Monopolies!</p>          
+          <p class="pb-2"> If you'd like to request a calendar, email us at besties@resisttechmonopolies.online</p>
+          <div class="justify-items-center">
+            <img
+              src="/assets/pet-calendar-2026-cover.jpg"
+              alt="pihole parts"
+              width="500"
+              class="border"
+            />
+            
+          </div>
+          <div> 
+        </div>
+         
+        </div>
+        <h1 class="pb-4 pt-4 text-2xl font-semibold">2026 Monthly RTM Tutorials</h1>     
+
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="January">January</h2>
+            <div>  
+           <p class="mb-2"> Try out Mastadon for algorithmless social media that won't sell your data!</p>
+                <a
+                class="underline mb-2"
+                href="https://joinmastodon.org/"
+                >Join Mastadon!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️/5 
+                </p>
+            </div>    
+            
+          </div> 
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="February">February</h2>
+            <div>
+              
+            
+               <p class="mb-2"> Learn about hosting your own instances of tech services to protect your data!</p>
+                <a
+                class="underline mb-2"
+                href="https://www.xda-developers.com/tips-for-self-hosting-beginners/"
+                >Beginner's Guide to Self-Hosting!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5 
+                </p>
+            
+               
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="March">March</h2>
+            <div>
+               <p class="mb-2"> Try out Calibre to read Amazon-free e-books!</p>
+                <a
+                class="underline mb-2"
+                href="https://tutorials.mediaket.net/software-tutorials/calibre-how-to-use-it.html"
+                >Get Started with Calibre!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️/5 
+                </p>
+            
+            
+               
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="April">April</h2>
+            <div>
+               <p class="mb-2"> Thinking of switching off Windows or MacOS? Try Linux 
+                for a super customizable, privacy-first operating system!
+</p>
+                <a
+                class="underline mb-2"
+                href="https://www.geeksforgeeks.org/linux-unix/30-days-of-linux/"
+                >30 Days of Linux for Beginners!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5 
+                </p>
+
+               
+            
+            
+            
+               
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="May">May</h2>
+            <div>
+               <p class="mb-2"> Try going outside and repping some protest fashion this Spring!</p>
+                <a
+                class="underline mb-2"
+                href="https://graziamagazine.com/me/articles/history-keffiyeh-palestine/"
+                >Learn the history and meaning of the keffiyeh!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️/5 
+                </p>
+            
+            
+            
+               
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="June">June</h2>
+            <div>
+               <p class="mb-2"> Try out Ente for a privacy-friendly, open-source photos hosting platform!</p>
+                <a
+                class="underline mb-2"
+                href="https://web.archive.org/web/20260108185516/https://www.androidauthority.com/ente-photos-hands-on-3542198/"
+                >In-depth overeview of Ente Photos migration!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️/5 
+                </p>
+
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="July">July</h2>
+            <div>
+               <p class="mb-2"> Try installing your own Pi Hole on your home wifi network to block ad and malware servers!</p>
+                <a
+                class="underline mb-2"
+                href="https://protasm.com/blogs/news/an-extensive-tutorial-on-how-to-setup-a-pi-hole"
+                >Extensive PiHole Tutorial!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5 
+                </p>
+  
+            </div>
+            <hr class="mb-4">
+             <p class="mb-2"> Alternative: Install an adblocker!</p>
+                <a
+                class="underline mb-2"
+                href="https://adblockplus.org/"
+                >Install Adblock Plus!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️/5 
+                </p>
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="August">August</h2>
+            <div>
+               <p class="mb-2"> Try out DuckDuckGo as a privacy-friendly alternative to Google search and Chrome!</p>
+                <a
+                class="underline mb-2"
+                href="https://duckduckgo.com/"
+                >Download Duck Duck Go!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️/5 
+                </p>
+            
+            
+            
+               
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="September">September</h2>
+            <div>
+               <p class="mb-2"> Instead of relying on surveillance for safety, try making friends with your neighbors!</p>
+                <a
+                class="underline mb-2"
+                href="https://www.youtube.com/watch?v=1-Xl6dhDV3Q"
+                > How to Build Radical Community!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️/5
+      
+            </p>
+            (hey making friends in Seattle is hard, okay?)
+
+            </div>
+            <hr class="mb-4">
+             <p class="mb-2"> Alternative: Neighbor Unions (buliding community power!)</p>
+                <a
+                class="underline mb-2"
+                href="https://social-ecology.org/wp/neighbor-union-cohort/"
+                >Learn about Neighbor Unions!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️/5 
+                </p>
+          </div>
+            
+               
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="October">October</h2>
+            <div>
+               <p class="mb-2"> Try out JellyFin to host your own media server 
+                and share with friends. You can break up with Netflix, Hulu, Disney+, and more!
+</p>
+                <a
+                class="underline mb-2"
+                href="https://jellyfin.org/docs/general/quick-start/"
+                >Quickstart for JellyFin!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5 
+                </p>
+                
+            
+            
+            
+               
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="November">November</h2>
+            <div>
+               <p class="mb-2"> Try out Meet.coop as an open-source, privacy-friendly, and renewable energy-powered alternative to Zoom and Hangouts!  </p>
+                <a
+                class="underline mb-2"
+                href="https://www.meet.coop/"
+                >Make a Meet.coop account!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️/5 
+                </p>
+            </div>
+        <hr class="mb-4">
+
+             <p class="mb-2"> Free alternative: Jitsi</p>
+                <a
+                class="underline mb-2"
+                href="https://meet.jit.si/"
+                >Start a Meeting with Jitsi!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️/5 
+                </p>
+          </div>
+            
+            
+               
+            </div>
+            
+          </div>
+
+        </div>
+        <div class="flex flex-col gap-8">
+          <div class="rounded-lg border p-6">
+            <h2 class="mb-4 text-2xl font-semibold" id="December">December</h2>
+            <div>
+               <p class="mb-2"> Try out Radicale as a privacy-friendly, open-source alternative to Google Calendar and Outlook!</p>
+                <a
+                class="underline mb-2"
+                href="https://radicale.org/master.html#simple-5-minute-setup"
+                >Setting up Radicale Tutorial!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5 
+                </p>
+              
+               </div>
+              
+            <hr class="mb-4">
+             <p class="mb-2"> Alternative: Proton Calendar</p>
+                <a
+                class="underline mb-2"
+                href="https://calendar.proton.me/"
+                >Switch to Proton Calendar!
+                </a              >
+            
+               <p class="mb-2"> Difficulty rating: 🌶️/5 
+                </p>
+          </div>
+          </div>
+            </div>
+            
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>
diff --git a/src/pages/OurProjectsPages/Pihole.astro b/src/pages/OurProjectsPages/Pihole.astro
new file mode 100644
index 0000000..c10da01
--- /dev/null
+++ b/src/pages/OurProjectsPages/Pihole.astro
@@ -0,0 +1,19 @@
+---
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Layout from "../../layouts/Layout.astro";
+import "../../styles/globals.css";
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar />
+      <div class="pl-4 pr-4">
+        <h1 class="text-3xl font-semibold">Pihole</h1>
+
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>