feat(page): about page

src/contexts/visualizer-context.tsx

@@ -42,7 +42,7 @@ export const VisualizerContextProvider: FC<IProps> = (props) => {
           <div className="w-screen h-[calc(100vh-74px)] flex flex-row justify-center">
             <div className="text-center max-w-md flex flex-col gap-8 p-8">
               <div>
-                <h1 className="text-2xl">welcome to web-expl</h1>
+                <h1 className="text-2xl underline">welcome to web-expl</h1>
                 <p className="text-primary">
                   web-expl is a scraper tool, which visualizes the internet in
                   3d space.

src/pages/about.tsx

@@ -0,0 +1,38 @@
+export default function About() {
+  return (
+    <>
+      <div className="w-screen h-[calc(100vh-74px)] bg-background flex justify-center">
+        <div className="py-4 max-w-lg">
+          <h1 className="text-2xl underline">about web-expl</h1>
+          <p className="text-primary">
+            web-expl visualizes the internet in a node-based system in
+            3-dimensional space.
+            <br />
+            The visualizer is based on WebGL using ThreeJS, including responsive
+            canvas scaling to run as smoothly as possible across all devices.
+            <br />
+            <br />
+            Content is fetched using web-scraping. The host of this website is
+            not responsible for the content of the scraped websites.
+          </p>
+          <br />
+          <h1 className="text-2xl underline">goals</h1>
+          <p className="text-primary">
+            While this project is still a work-in-progress, the overall goal is
+            to develop something similar to a search engine, but in 3D space.
+            <br />
+            <br />
+            Planned and potential features include:
+            <ul className="list-disc pl-8">
+              <li>Loading indicator</li>
+              <li>Overview of all displayed nodes</li>
+              <li>Clickable nodes to preview websites</li>
+            </ul>
+          </p>
+          <br />
+          <center>Developed with 💖 using NextJS, TailwindCSS and ThreeJS</center>
+        </div>
+      </div>
+    </>
+  );
+}

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import NodeVisualizer from "@/components/3d/node-visualizer";
 import { VisualizerContextProvider } from "@/contexts/visualizer-context";
+
 export default function Home() {
   return (
     <>