add privacy stuff

src/main.tsx

@@ -1,9 +1,25 @@
 import ReactDOM from 'react-dom/client'
+import {
+  createBrowserRouter,
+  RouterProvider
+} from "react-router-dom"
 import './assets/main.css'
 
 // pages
-import MainPage from './index';
+import MainPage from './pages/index';
+import PrivacyPage from './pages/privacy';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <MainPage />
+  },
+  {
+    path: '/privacy',
+    element: <PrivacyPage />
+  }
+])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <MainPage />
+  <RouterProvider router={router} />
 )

src/pages/index.tsx

@@ -1,15 +1,15 @@
-import ListBox from "./components/ListBox";
-import Project from "./components/ProjectCard";
-import ContactForm from "./components/ContactForm";
+import ListBox from "../components/ListBox";
+import Project from "../components/ProjectCard";
+import ContactForm from "../components/ContactForm";
 
 // project components
-import RecentWatch from "./components/ProjectComponents/RecentWatch";
-import RecentPhoto from "./components/ProjectComponents/RecentPhoto";
-import RecentListens from "./components/ProjectComponents/RecentListens";
-import RecentClip from './components/ProjectComponents/RecentClip';
-import RecentGame from "./components/ProjectComponents/RecentGame";
-import RecentBook from "./components/ProjectComponents/RecentBook";
-import Layout from "./components/Layout";
+import RecentWatch from "../components/ProjectComponents/RecentWatch";
+import RecentPhoto from "../components/ProjectComponents/RecentPhoto";
+import RecentListens from "../components/ProjectComponents/RecentListens";
+import RecentClip from '../components/ProjectComponents/RecentClip';
+import RecentGame from "../components/ProjectComponents/RecentGame";
+import RecentBook from "../components/ProjectComponents/RecentBook";
+import Layout from "../components/Layout";
 
 export default function Home() {
     return (

src/pages/privacy.tsx

@@ -0,0 +1,30 @@
+import Layout from "../components/Layout";
+
+export default function PrivacyPage() {
+    return (
+        <Layout>
+            <div className="mb-6 text-left w-full pl-4 lg:w-1/4 lg:pl-0 mx-auto">
+                <h1 className="text-2xl font-bold">Privacy</h1>
+                <h1>This site doesn't collect anything on you. No cookies (although tasty), no ominous advertisements, nothing.</h1>
+
+                <h1 className="my-2 font-bold text-2xl">Plausible</h1>
+                <h1>I use <a className="underline" href="https://plausible.io" target="_blank">Plausible analytics</a> to track traffic anonymously. Plausible;</h1>
+                <ul className="list-disc list-inside">
+                    <li>does not collect personal identifying information</li>
+                    <li className="underline"><a href="https://plausible.io/privacy-focused-web-analytics" target="_blank">is dedicated to privacy</a></li>
+                    <li>compliant with the GDPR, CCPA and PECR data protection laws</li>
+                </ul>
+                <h1>I use a self-hosted instance in the US that doesn't use cookies.</h1>
+
+                <h1 className="my-2 font-bold text-2xl">Cloudflare</h1>
+                <h1>I use <a className="underline" href="https://plausible.io" target="_blank">Cloudflare</a> for DNS. Most of my sites
+                are proxied through Cloudflare. You can view their privacy policy <a className="underline" href="https://cloudflare.com/privacy" target="_blank">here</a>.</h1>
+
+                <h1 className="my-2 font-bold text-2xl">Email</h1>
+                <h1>When you submit a contact request on my page, it is sent to Discord via a webhook & my own API.</h1>
+                <h1>This will be shown to me in an embed. I will never receive or process anything but what you provide.</h1>
+                <h1>You can learn more about Discord's dedication to privacy <a className='underline' href="https://discord.com/privacy" target="_blank">here</a>.</h1>
+            </div>
+        </Layout>
+    )
+}