Njw dev

frontend/app/about/page.tsx

@@ -0,0 +1,82 @@
+import Austin from "../../assets/austin.png";
+import Shawn from "../../assets/shawn.jpg";
+import Brandon from "../../assets/brandon.jpeg";
+
+const test = () => {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between pt-24">
+      <div id="textWrapper" className="w-1/2 h-full flex flex-col mt-10">
+        <div className="text-4xl p-2 text-center">The Model</div>
+        <div className="text-lg p-2 pb-8">
+          This neural network model is based on EfficientNetB3, comprising
+          11,184,179 parameters (approximately 42.66 MB). It's designed for
+          image classification with 256x256x3 input images. The model includes a
+          Batch Normalization layer, a Dense layer with 256 neurons, dropout for
+          regularization, and an output layer with 4 classes. While leveraging a
+          pre-trained model like EfficientNetB3 boosts performance, it presents
+          challenges such as high parameter count, fine-tuning complexities,
+          memory/storage demands, and the need for substantial training data.
+          These aspects should be considered when using this model in practice.
+          Still we were able to reach an accuracy of 0.9925 on our testing set.
+          We got our dataset from
+          <a href="https://www.kaggle.com/datasets/masoudnickparvar/brain-tumor-mri-dataset/data." target="_blank">
+            {" "}
+            <u> Kaggle</u>
+          </a>
+          . We used the
+          <a href="https://arxiv.org/abs/1905.11946" target="_blank">
+            {" "}
+            <u> Effecient Net V3</u>.
+          </a>
+        </div>
+      </div>
+
+      <div className="flex justify-center items-center space-x-32">
+        <div className="flex flex-col items-center">
+          <img
+            src={Austin.src}
+            alt="Image 1"
+            className="w-48 h-64 border-stone-200 border-x-4 border-y-4"
+          />
+          <p className="mt-2 text-center">Austin Robertson</p>
+        </div>
+
+        <div className="flex flex-col items-center">
+          <img
+            src={Shawn.src}
+            alt="Image 2"
+            className="w-48 h-64  border-stone-200 border-x-4 border-y-4"
+          />
+          <p className="mt-2 text-center">Shuqing (Shawn) Chen</p>
+        </div>
+
+        <div className="flex flex-col items-center">
+          <img
+            src={Brandon.src}
+            alt="Image 3"
+            className="w-48 h-64  border-stone-200 border-x-4 border-y-4"
+          />
+          <p className="mt-2 text-center">Brandon Wand</p>
+        </div>
+
+        <div className="flex flex-col items-center">
+          <img
+            src={Austin.src}
+            alt="Image 4"
+            className="w-48 h-64  border-stone-200 border-x-4 border-y-4"
+          />
+          <p className="mt-2 text-center">Nathan Wand</p>
+        </div>
+      </div>
+
+      <div className="flex justify-center items-center space-x-32">
+        <p className="mt-2 text-center w-48 h-64">Testing</p>
+        <p className="mt-2 text-center w-48 h-64">Testing</p>
+        <p className="mt-2 text-center w-48 h-64">Testing</p>
+        <p className="mt-2 text-center w-48 h-64">Testing</p>
+      </div>
+    </main>
+  );
+};
+
+export default test;

frontend/app/globals.css

@@ -2,26 +2,32 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base{
+  html {
+    @apply text-white;
+  }
+}
+
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --gradient: linear-gradient(45deg, #424141, #086cb5, #00b9b4);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+.background_gradient {
+  background-size: 200%;
+  background-image: var(--gradient);
+  animation: g_anime 8s ease infinite alternate;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+@keyframes g_anime {
+  0% {
+    background-position: left;
+  }
+  100% {
+    background-position: right;
+  }
 }
+
+
+
+
+

frontend/app/layout.tsx

@@ -18,7 +18,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={`${inter.className} background_gradient`}>
         <Navbar/>
         {children}
       </body>

frontend/app/navbar.tsx

@@ -1,4 +1,6 @@
+"use client";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 const Navbar = () => {
   const routes = [
@@ -10,12 +12,25 @@ const Navbar = () => {
       path: "/test",
       title: "Test",
     },
+    {
+      path: "/about",
+      title: "About",
+    },
   ];
 
+  const currentPath = usePathname();
+  console.log(currentPath);
+
   return (
-    <div className="absolute inset-x-1 mx-auto w-8/12 h-fit mt-6 py-2 rounded-full flex flex-row justify-evenly border-solid bg-mriSlate">
+    <div className="absolute inset-x-1 mx-auto w-8/12 h-fit mt-14 py-2 rounded-full flex flex-row justify-evenly border-solid bg-mriSlate">
       {routes.map((route, index) => (
-        <Link className="hover:bg-mriBlue rounded-full px-16 transition ease-in text-lg" href={route.path} key={index}>
+        <Link
+          className={`${
+            currentPath === route.path ? "bg-mriBlue" : "hover:bg-mriBlue"
+          } rounded-full px-16 transition ease-in text-lg`}
+          href={route.path}
+          key={index}
+        >
           {route.title}
         </Link>
       ))}

frontend/app/page.tsx

@@ -1,9 +1,28 @@
-import Image from 'next/image'
+import Image from "next/image";
+import Mri from "../assets/mri.png"
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between pt-24 bg-mriCyan">
-      <div>test home</div>
+    <main className="transition-all flex h-screen flex-col items-center justify-between pt-24">
+      <div className="flex w-screen h-full">
+        <div id="leftFlex" className="flex-1 flex justify-center h-full">
+          <div className="w-auto my-auto ml-36">
+            <h1 className="text-2xl p-2">TumorFinders</h1>
+            <h1 className="text-5xl text-bold p-2">
+              Exploring AI Precision in Brain Tumor Detection
+            </h1>
+            <p className="text-base p-2">
+              At TumorFinders, we delve deep into AI precision. Our app is a
+              playground for testing and optimizing custom AI models for brain
+              tumor identification from MRI scans. Join us on a journey through
+              the technical frontier of medical AI at TumorFinders.
+            </p>
+          </div>
+        </div>
+        <div id="rightFlex" className="flex-1 flex justify-center h-full">
+          <div className="w-auto my-auto justify-start"><img src={Mri.src} alt="" /></div>
+        </div>
+      </div>
     </main>
-  )
+  );
 }

frontend/app/test/page.tsx

@@ -1,6 +1,6 @@
 const test = () => {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between pt-24 bg-mriCyan">
+    <main className="flex min-h-screen flex-col items-center justify-between pt-24">
       <div>test test :P</div>
     </main>
   );

frontend/package.json

@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "13.5.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "13.5.4"
+    "vanta": "^0.5.24"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.4",
     "postcss": "^8",
     "tailwindcss": "^3",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.4"
+    "typescript": "^5"
   }
 }

frontend/tailwind.config.ts

@@ -6,6 +6,7 @@ const config: Config = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       backgroundImage: {