feat: about page

Former-commit-id: 103850ab3128cf9042565a59b216cd2dac553682

2 files changed, 49 insertions, 0 deletions

diff --git a/frontend/src/components/pages/about.css b/frontend/src/components/pages/about.css
new file mode 100644
index 0000000..0dec300
--- /dev/null
+++ b/frontend/src/components/pages/about.css
@@ -0,0 +1,17 @@
+
+#about {
+    overflow: auto;
+    overflow-x: hidden;
+    position: relative;
+
+    width: calc(100% - 380px); 
+    height: 100vh;
+    left: 350px;
+
+    padding-right: 30px;
+
+    font-size: 40px;
+    font-family: BarlowSemiCondensed-Regular;
+    color: #cdcfdf;
+
+}
diff --git a/frontend/src/components/pages/about.js b/frontend/src/components/pages/about.js
new file mode 100644
index 0000000..a265006
--- /dev/null
+++ b/frontend/src/components/pages/about.js
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import "./about.css";
+
+export default function About() {
+    const [aboutText, setAboutText] = useState('');
+
+    useEffect(() => {
+        const fetchReadme = async () => {
+            try {
+                const response = await fetch(
+                    'https://raw.githubusercontent.com/pektezol/LeastPortals/main/README.md'
+                );
+                if (!response.ok) {
+                    throw new Error('Failed to fetch README');
+                }
+                const readmeText = await response.text();
+                setAboutText(readmeText);
+            } catch (error) {
+                console.error('Error fetching README:', error);
+            }
+        };
+        fetchReadme();
+    }, []);
+
+    return (
+        <div id="about">
+            <ReactMarkdown>{aboutText}</ReactMarkdown>
+        </div>
+    );
+};