add privacy stuff

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.26.2"
       },
       "devDependencies": {
         "@types/react": "^18.2.66",
@@ -1051,6 +1052,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.17.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
@@ -3421,6 +3430,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

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 ListBox from "../components/ListBox";
-import Project from "./components/ProjectCard";
+import Project from "../components/ProjectCard";
-import ContactForm from "./components/ContactForm";
+import ContactForm from "../components/ContactForm";
 
 // project components
-import RecentWatch from "./components/ProjectComponents/RecentWatch";
+import RecentWatch from "../components/ProjectComponents/RecentWatch";
-import RecentPhoto from "./components/ProjectComponents/RecentPhoto";
+import RecentPhoto from "../components/ProjectComponents/RecentPhoto";
-import RecentListens from "./components/ProjectComponents/RecentListens";
+import RecentListens from "../components/ProjectComponents/RecentListens";
-import RecentClip from './components/ProjectComponents/RecentClip';
+import RecentClip from '../components/ProjectComponents/RecentClip';
-import RecentGame from "./components/ProjectComponents/RecentGame";
+import RecentGame from "../components/ProjectComponents/RecentGame";
-import RecentBook from "./components/ProjectComponents/RecentBook";
+import RecentBook from "../components/ProjectComponents/RecentBook";
-import Layout from "./components/Layout";
+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>
+    )
+}