Add aboutpage and change some css

src/components/MemoryUsage.jsx

@@ -11,16 +11,16 @@ export const MemoryUsage = () => {
                 const usedMB = (memoryInfo.usedJSHeapSize / 1024 / 1024).toFixed(2);
                 setMemoryUsage(`Used: ${usedMB} MB`);
             } else {
-                setMemoryUsage("Memory info not supported in this browser.");
+                setMemoryUsage("Memory info not supported in this browser. <br/> Please use Chrome");
             }
         }
 
         const interval = setInterval(updateMemoryUsage, 500);
-        return () => clearInterval(interval); // Cleanup on unmount
+        return () => clearInterval(interval);
     }, []);
 
     return (
-        <div style={{ padding: "10px" }}>  {/* Added padding here */}
+        <div style={{ padding: "10px" }}>
             <Typography color="textPrimary" component="div">
                 <Typography color="textSecondary" component="div">
                     Client-Side Memory Usage

src/components/Menu.jsx

@@ -37,8 +37,8 @@ export const Menu = ({
   return (
     <Paper classes={{ root: classes.wrapper }} style={{
       position: "fixed",
-      width: "550px",
-      height: "500px",
+      width: "370px",
+      height: "495px",
       top: "80px",
       left: "20px",
       color: "black",

src/components/MenuSolverControls.jsx

@@ -84,7 +84,7 @@ export const MenuSolverControls = ({
       <MenuSection highlight>
         <MenuItem title="Algorithm">
           <Grid container alignItems="center">
-            <Grid item xs={11}>
+            <Grid item xs={12}>
               <Select
                 value={selectedAlgorithm}
                 onChange={onAlgorithmChange}

src/components/Navbar.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from "gatsby";
+import logo from "../images/favicon.png";
 
 export const Navbar = () => {
     const navbarStyle = {
@@ -9,14 +10,17 @@ export const Navbar = () => {
         padding: '10px 20px',
         backgroundColor: '#333',
         color: 'white',
-        position: 'fixed', // Ensures the navbar stays at the top
+        position: 'fixed',
         top: 0,
         left: 0,
         width: '100%',
-        zIndex: 1000, // Makes sure the navbar stays on top
+        zIndex: 1000,
     };
 
     const leftStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '15px', // Increased spacing between the logo and text
         fontSize: '20px',
         fontWeight: 'bold',
     };
@@ -27,35 +31,35 @@ export const Navbar = () => {
     };
 
     const linkStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
         color: 'white',
         textDecoration: 'none',
         fontSize: '16px',
     };
 
-    const linkHoverStyle = {
-        textDecoration: 'underline',
-    };
-
     return (
         <nav style={navbarStyle}>
             <div style={leftStyle}>
-                {/* Make the "TSP Visualization" clickable */}
+                {/* Wrap both the logo and text inside the same Link */}
                 <Link to="/" style={linkStyle}>
+                    <img src={logo} alt="Logo" style={{ height: '30px' }} />
                     TSP Visualization
                 </Link>
             </div>
             <div style={rightStyle}>
-                <Link 
-                    to="/about" 
-                    style={linkStyle} 
-                    onMouseOver={(e) => e.target.style.textDecoration = 'underline'} 
+                <Link
+                    to="/about"
+                    style={linkStyle}
+                    onMouseOver={(e) => e.target.style.textDecoration = 'underline'}
                     onMouseOut={(e) => e.target.style.textDecoration = 'none'}>
                     About
                 </Link>
-                <Link 
-                    to="/source-code" 
-                    style={linkStyle} 
-                    onMouseOver={(e) => e.target.style.textDecoration = 'underline'} 
+                <Link
+                    to="/source-code"
+                    style={linkStyle}
+                    onMouseOver={(e) => e.target.style.textDecoration = 'underline'}
                     onMouseOut={(e) => e.target.style.textDecoration = 'none'}>
                     Source Code
                 </Link>

src/components/SEO.jsx

@@ -18,9 +18,8 @@ export const SEO = ({ subtitle }) => {
         property="og:title"
         content={`Traveling Salesman Problem Visualizer`}
       />
-      <meta property="og:url" content="https://tspvis.com" />
+      <meta property="og:url" content="https://tsib.techtransthai.org/" />
       <meta property="og:description" content={description} />
-      <meta property="og:image" content="https://i.imgur.com/u4ibcsC.jpg" />
       <meta property="og:type" content="website" />
     </Helmet>
   );

src/pages/about.js

@@ -0,0 +1,53 @@
+import React from "react";
+import {
+    Navbar
+} from "../components";
+
+
+const AboutPage = () => {
+    const containerStyle = {
+        maxWidth: '900px',
+        margin: '80px auto 20px',
+        padding: '0 20px',
+        fontFamily: 'Arial, sans-serif',
+    };
+
+    return (
+        <>
+            <Navbar />
+            <div style={containerStyle}>
+                <h2>About this project</h2>
+                <p>
+                    Traveling Salesman Problem is blah blah blah Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quaerat voluptatem. Ut enim aeque
+                    doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et
+                    infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea
+                    variareli voluptas distinguique possit, augeri amplificarique non possit.
+                </p>
+                <p>
+                    Ullus investigandi veri, nisi inveneris, et quaerendi defatigationo turpis est, cum esset accusata
+                    et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse
+                    numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est autem situm
+                    in nobis ut et voluptates et dolores nasci fatemur e corporis.
+                </p>
+                <p>
+                    Ullus investigandi veri, nisi inveneris, et quaerendi defatigationo turpis est, cum esset accusata
+                    et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse
+                    numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est autem situm
+                    in nobis ut et voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus --
+                    itaque concedo, quod modo dicebas, cadere causa, si qui.
+                </p>
+
+                <h4>Created by</h4>
+                <ul>
+                    <li>64010823 วีรภัทร อินอุดม</li>
+                    <li>64010543 พงศ์ภีระ วงศประสิทธิพร</li>
+                    <li>64011106 ณรงค์พล กิจรังสรรค์</li>
+                    <li>64011160 นนทัช มุกลีมาศ</li>
+                </ul>
+            </div>
+        </>
+    );
+};
+
+export default AboutPage;