Split into different pages

No longer a vertical page. Split into
- "/" which contains home and apply
- "/about" which contains about pages
- "/gallery" which contains photos page
- "archive" which contains past projects

Plus there are some minor CSS changes to accommodate

app/about/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+import type { NextPage } from 'next';
+import '@/src/styles/reset.scss';
+
+import About from '@/src/sections/About-Projects';
+import NavigationBar from '@/src/components/navbar';
+// here we will compile all the sections of the website together
+
+const AboutPage: NextPage = () => {
+  return (
+    <main>
+      <NavigationBar />
+      <About />
+    </main>
+  );
+};
+
+export default AboutPage;

app/archive/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+import type { NextPage } from 'next';
+import '@/src/styles/reset.scss';
+
+import NavigationBar from '@/src/components/navbar';
+import Archive from '@/src/sections/Archive';
+// here we will compile all the sections of the website together
+
+const ArchivePage: NextPage = () => {
+  return (
+    <main>
+      <NavigationBar />
+      <Archive />
+    </main>
+  );
+};
+
+export default ArchivePage;

app/gallery/page.tsx

@@ -0,0 +1,18 @@
+"use client"
+import type { NextPage } from 'next';
+import '@/src/styles/reset.scss';
+
+import PhotoGallery from '@/src/sections/Photo-Gallery';
+import NavigationBar from '@/src/components/navbar';
+// here we will compile all the sections of the website together
+
+const GalleryPage: NextPage = () => {
+  return (
+    <main>
+      <NavigationBar />
+      <PhotoGallery />
+    </main>
+  );
+};
+
+export default GalleryPage;

app/page.tsx

@@ -13,9 +13,9 @@ const Home: NextPage = () => {
     <main>
       <NavigationBar />
       <TimerHero />
-      <About />
+      {/* <About />
       <Archive/>
-      <PhotoGallery />
+      <PhotoGallery /> */}
     </main>
   );
 };

src/components/navbar/index.tsx

@@ -8,11 +8,11 @@ import { Size, useWindowSize } from "../../utils/general";
 
 
 const navLinks = [
-  { href: "/#home", label: "Home" },
-  { href: "/#apply", label: "Apply" },
-  { href: "/#about", label: "About" },
-  { href: "/#archive", label: "Archive" },
-  { href: "/#gallery", label: "Gallery" },
+  { href: "/", label: "Home" },
+  { href: "/", label: "Apply" },
+  { href: "/about", label: "About" },
+  { href: "/archive", label: "Archive" },
+  { href: "/gallery", label: "Gallery" },
 ];
 
 const NavigationBar: React.FC = () => {

src/sections/Photo-Gallery/index.tsx

@@ -81,6 +81,7 @@ const PhotoGallery: React.FC = () => {
 
     return (
         <>
+            <div></div>
             <div className={s.container} id="gallery">
                 <h1>Photo Gallery</h1>
                 <select name="project_select" onChange={handleChange}>

src/sections/Photo-Gallery/style.module.scss

@@ -5,6 +5,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding-top: 2rem;
+    padding-bottom: 1.5rem;
 
     select {
         border-radius: 0.25rem;