feat(contacts+css): minor css changes + contacts page

frontend/src/App.css

@@ -44,11 +44,11 @@
 }
 
 .ui-btn {
-    @apply text-ctp-text border border-ctp-text rounded px-3 py-1 min-w-8 2xl:min-w-36 text-center cursor-pointer transition-colors;
+    @apply text-ctp-text text-sm border border-ctp-text rounded px-3 py-1 min-w-8 lg:min-w-26 text-center cursor-pointer transition-colors;
 }
 
 .theme-ui-btn {
-    @apply text-ctp-text border border-ctp-text rounded px-3 py-1 min-w-10 text-center cursor-pointer transition-colors;
+    @apply text-ctp-text text-3xl border border-ctp-text rounded px-3 py-1 min-w-10 text-center cursor-pointer transition-colors;
 }
 
 .ui-btn:hover {

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import "./App.css";
 import Layout from "./components/Layout";
 import Home from "./pages/Home";
 import Stream from "./pages/Stream";
+import Contact from "./pages/Contact"
 
 export default function App(): ReactElement {
     const path = window.location.pathname.toLowerCase();
@@ -13,5 +14,9 @@ export default function App(): ReactElement {
         content = <Stream />;
     }
 
+    if (path === "/contact") {
+        content = <Contact />;
+    }
+
     return <Layout>{content}</Layout>;
 }

frontend/src/content/about.md

@@ -27,7 +27,7 @@ A few notable projects I am interested in:
 
 ## Contact
 
-You can contact me via **Email: aramjonghu@tutamail.com** and on **XMPP: aramjonghu@aramjonghu.dev**.
+You can contact me via **XMPP: aramjonghu@aramjonghu.dev** and on **Email: aramjonghu@tutamail.com**. More info at [contact](/contact) page.
 
 ## Languages & Tools
 
@@ -84,7 +84,7 @@ For my personal projects, I host them on my own Forgejo instance at https://git.
 
 > **Q:** Are you on LinkedIn?
 >
-> **A:** No. I quit in 2025, understanding that LinkedIn has been a platform to curate a fake image in a race for relevance. It is also owned by Microsoft, which is another deterrent. In my eyes, it is slop.
+> **A:** No. I quit in 2025, understanding that LinkedIn has been a platform to curate a fake image in a race for relevance. It is also owned by Microsoft, which is another deterrent. In my eyes, it is slop. Furthermore, most of these social platforms are made to spy and track people to make money rather than connect people.
 
 > **Q:** Why do you have no personal projects on GitHub?
 >

frontend/src/content/contact.md

@@ -0,0 +1,28 @@
+Anyone is free to contact me for any reason. Below are ways to contact me.
+
+## XMPP
+
+You can reach me at **aramjongh@aramjonghu.dev**.
+
+My preferred way of contacting is via a [XMPP](https://xmpp.org/) client. It is a privacy focused standard and it is decentralized. No one owns XMPP. Look [here](https://xmpp.org/software/?category=clients) to determine which client options there are for your operating system (or browser). But generally:
+
+| Platform     | Client                                                                                                                                        | Offers server for login                                |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| Linux        | Dino                                                                                                                                          | No                                                     |
+| Windows      | Converse.js (browser based), but I would recommend Movim in a browser. It seems that there is no solid option that supports calls on Windows. | Yes for both                                           |
+| Android/AOSP | Conversations (free in fdroid store) or Cheogram                                                                                              | Conversations has, Cheogram is a fork of Conversations |
+| iOS          | Monal IM or Siskin IM                                                                                                                         | Siskin does via tigase.im                              |
+| MacOS        | Monal IM or Converse.js for browser based                                                                                                     | Conversejs does                                        |
+| Browser      | Movim or Converse.js                                                                                                                          | Yes for both                                           |
+
+Note that you can use any client even if they do not offer their own server for account creation. You can create an account on any provider such as conversejs.org. Then log in to your preferred client.
+
+## Email
+
+Not preferred, but you can contact me via email at **aramjonghu@tutamail.com**.
+
+## Other platforms
+
+### Some _obvious_ platforms e.g. LinkedIn
+
+For various reasons, I am not on a handful of the larger platforms. Check on the [home](/) page in the **About** section under the **Notable Questions** header if you wish to know why.

frontend/src/pages/Contact.tsx

@@ -0,0 +1,17 @@
+import { type ReactElement } from "react";
+
+import MdProcessor from "../components/MdProcessor";
+import contact from "../content/contact.md?raw";
+
+export default function CurrentActivity(): ReactElement {
+    return (
+        <div className="text-ctp-text flex flex-col min-h-screen px-4 py-6">
+            <div className="w-full flex flex-col flex-1">
+                <h1 className="text-4xl text-center font-bold text-ctp-mauve mb-6">
+                    Contact
+                </h1>
+                <MdProcessor content={contact} />
+            </div>
+        </div>
+    );
+}