From 2f83508d7e2e42f89982c9ddec028658a5a0efb3 Mon Sep 17 00:00:00 2001
From: marinocj <35199762+marinocj@users.noreply.github.com>
Date: Tue, 11 Jun 2024 22:30:54 -0400
Subject: [PATCH 1/2] Update Home.tsx

---
 src/pages/Home.tsx | 126 +++++++++++++--------------------------------
 1 file changed, 35 insertions(+), 91 deletions(-)

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 3b47199..cc965d8 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,94 +1,38 @@
-import { MainSection, Title, Information } from "../components/components.ts"
+import React from 'react';
 
-import Project from "../components/ProjectCard.tsx"
-
-let projects = [
-    {
-        name: "Line Follower Robot",
-        description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
-        link: "https://example.com",
-        image: "https://www.sciencebuddies.org/CrPeYL-5kIqQRIUYTGRY1m_XRYw=/560x315/-/https/i.ytimg.com/vi/-cilOho6l3Q/maxresdefault.jpg",
-        department: "ECSE",
-        date: "06/07/24"
-    },
-    {
-        name: "Rube Goldberg Machine",
-        description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
-        link: "https://example.com",
-        image: "https://scoutlife.org/wp-content/uploads/2018/04/rubegoldberg.jpg",
-        department: "MANE",
-        date: "06/07/24"
-    },
-    {
-        name: "Giant Bridge",
-        description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
-        link: "https://example.com",
-        image: "https://assets.editorial.aetnd.com/uploads/2015/02/topic-golden-gate-bridge-gettyimages-177770941.jpg",
-        department: "CIVIL",
-        date: "06/07/24"
-    },
-    {
-        name: "Lean Manufacturing for Airplanes",
-        description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
-        link: "https://example.com",
-        image: "https://www.travelandleisure.com/thmb/h97kSvljd2QYH2nUy3Y9ZNgO_pw=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc()/plane-data-BUSYROUTES1217-f4f84b08d47f4951b11c148cee2c3dea.jpg",
-        department: "IME",
-        date: "06/07/24"
-    }
-]
-
-const Home = () => {
-    return (
-        <div>
-            <header className="h-96 min-h-[600px] relative flex flex-col justify-around align-middle">
-                <div
-                    className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
-                ></div>
-                <div className="flex flex-col items-center justify-center">
-                    <h1 className="text-5xl font-bold text-white">Rensselaer Engineering Commons</h1>
-                    <p className="text-white text-lg">Lets create together</p>
-                </div>
-            </header>
-            <main className="flex flex-col">
-                <div className="py-52">
-                    <MainSection>
-                        <Title>Our Mission</Title>
-                        <Information>
-                            Our mission is to inspire creativity through the power of simplicity. 
-                            By embracing minimalist design, user-centric innovation, and a collaborative DIY spirit, 
-                            we aim to create cool stuff that not only delights but also solves real-world problems. 
-                            We believe in the transformative power of iterative improvement, cross-disciplinary inspiration, 
-                            and sustainable solutions. Our mission is to embrace imperfection, foster collaboration, 
-                            and make a positive impact on the world through our creative endeavors. Join us as we embark on a 
-                            journey to create cool sh*t that inspires, innovates, and leaves a lasting legacy of creativity.
-                        </Information>
-                    </MainSection>
-                </div>
-                <div className="py-52 relative">
-                    <div
-                        className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
-                    ></div>
-                    <MainSection>
-                        <Title><span className="text-white">Featured Projects</span></Title>
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-10">
-                            {projects.map((project) => (
-                                <Project
-                                    name={project.name}
-                                    description={project.description}
-                                    link={project.link}
-                                    image={project.image}
-                                    department={project.department}
-                                    date={project.date}
-                                />
-                            ))}
-                        </div>
-
-                    </MainSection>
-
-                </div>
-            </main>
-        </div>
-    )
+const Home: React.FC = () => {
+  return (
+    <div className="container mx-auto px-4">
+      <header className="bg-blue-500 text-white p-4">
+        <h1 className="text-2xl md:text-4xl lg:text-5xl">Welcome to My Website</h1>
+      </header>
+      <main className="p-4">
+        <section className="mb-8">
+          <h2 className="text-xl md:text-2xl lg:text-3xl">Latest News</h2>
+          <p className="text-base md:text-lg lg:text-xl">
+            This is where the latest news will be displayed.
+          </p>
+        </section>
+        <section className="mb-8">
+          <h2 className="text-xl md:text-2xl lg:text-3xl">Features</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="bg-gray-200 p-4">Feature 1</div>
+            <div className="bg-gray-300 p-4">Feature 2</div>
+            <div className="bg-gray-400 p-4">Feature 3</div>
+          </div>
+        </section>
+        <section>
+          <h2 className="text-xl md:text-2xl lg:text-3xl">Contact Us</h2>
+          <p className="text-base md:text-lg lg:text-xl">
+            Get in touch with us through the contact page.
+          </p>
+        </section>
+      </main>
+      <footer className="bg-blue-500 text-white p-4 mt-8">
+        <p className="text-center text-sm md:text-base lg:text-lg">&copy; 2023 My Website</p>
+      </footer>
+    </div>
+  );
 }
 
-export default Home
\ No newline at end of file
+export default Home;
\ No newline at end of file

From d23d2f347068887c6e56dfd73c026b5935645dd8 Mon Sep 17 00:00:00 2001
From: marinocj <35199762+marinocj@users.noreply.github.com>
Date: Wed, 12 Jun 2024 12:10:39 -0400
Subject: [PATCH 2/2] Added Page Scaling

---
 src/components/Footer.tsx |  22 ++--
 src/pages/About.tsx       |  21 ++--
 src/pages/Contact.tsx     |  45 ++++---
 src/pages/Home.tsx        | 102 ++++++++++-----
 src/pages/Login.tsx       |   2 +-
 src/pages/Projects.tsx    | 257 ++++++++------------------------------
 6 files changed, 170 insertions(+), 279 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5fc6020..e365fe2 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,9 +1,8 @@
 import { Link } from "react-router-dom";
 
-
 const Footer = () => {
     return (
-        <div className="bg-black text-white py-10 px-0">
+        <div className="bg-black text-white py-10 px-4 sm:px-6 md:px-8 lg:px-10 xl:px-12">
             <div className="container mx-auto">
                 <div className="my-10">
                     <h1 className="text-3xl font-bold">Rensselaer Engineering Commons</h1>
@@ -11,19 +10,19 @@ const Footer = () => {
                         <div>
                             <h3 className="text-xl">Links</h3>
                             <div className="flex flex-col mt-5 gap-4">
-                                <Link to="/">
+                                <Link to="/" aria-label="Home">
                                     Home
                                 </Link>
-                                <Link to="/about">
+                                <Link to="/about" aria-label="About">
                                     About
                                 </Link>
-                                <Link to="/contact">
+                                <Link to="/contact" aria-label="Contact">
                                     Contact
                                 </Link>
-                                <Link to="/projects">
+                                <Link to="/projects" aria-label="Projects">
                                     Projects
                                 </Link>
-                                <Link to="/login">
+                                <Link to="/login" aria-label="Login">
                                     Login
                                 </Link>
                             </div>
@@ -31,20 +30,23 @@ const Footer = () => {
                         <div>
                             <h3 className="text-xl">Contact</h3>
                             <div className="flex flex-col mt-5 gap-4">
+                                <p>Email: info@rpi.edu</p>
+                                <p>Phone: (123) 456-7890</p>
+                                <p>Address: 110 8th St, Troy, NY 12180</p>
                             </div>
                         </div>
                         <div>
                             <h3 className="text-xl">Social Media</h3>
                             <div className="flex flex-col mt-5 gap-4">
-                                <a href="https://discord.gg/TKBGYmZEQb" target="_blank">
+                                <a href="https://discord.gg/TKBGYmZEQb" target="_blank" rel="noopener noreferrer" aria-label="Discord">
                                     <figure className="max-w-32">
-                                        <img src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0b5493894cf60b300587_full_logo_white_RGB.svg" alt="" />
+                                        <img src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0b5493894cf60b300587_full_logo_white_RGB.svg" alt="Discord Logo" />
                                     </figure>
                                 </a>
                             </div>
                         </div>
                         <div className="md:ml-auto mt-auto">
-                            <a href="https://github.com/Rensselaer-Engineering-Commons/REC-Website" className="underline">©REC 2024</a>
+                            <a href="https://github.com/Rensselaer-Engineering-Commons/REC-Website" className="underline" aria-label="GitHub Repository">© REC 2024</a>
                         </div>
                     </div>
                 </div>
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index c18e95a..a67c521 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -5,26 +5,25 @@ const About = () => {
         <div>
             <header className="h-48 min-h-[250px] relative flex flex-col justify-around align-middle">
                 <div
-                    className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
+                    className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px] px-4 sm:px-6 md:px-8 lg:px-10 xl:px-12"
+
                 ></div>
                 <div className="flex flex-col items-center justify-center">
                     <h1 className="text-5xl font-bold text-white">About Us</h1>
                 </div>
             </header>
-            <main className="flex flex-col">
-                <div className="py-52">
-                    <MainSection>
-                        <Title>Who are we?</Title>
-                        <Information>
-                            The Rensselaer Engineering Commons is a community of students, faculty, and staff dedicated to
+            <section className="mb-8">
+                    <div className="py-8 sm:py-16 md:py-32 lg:py-52 flex flex-col items-center justify-center">
+                        <h2 className="text-3xl font-bold mb-4 text-center">Who are we?</h2>
+                        <p className="text-center max-w-2xl">
+                        The Rensselaer Engineering Commons is a community of students, faculty, and staff dedicated to
                             creating a welcoming and inclusive environment for all. We believe that diversity and inclusion
                             are essential to the success of our community and our mission. We are committed to fostering a
                             culture of respect, empathy, and understanding, and to providing resources and support to help
                             all members of our community thrive.
-                        </Information>
-                    </MainSection>
-                </div>
-            </main>
+                        </p>
+                    </div>
+                </section>
         </div>
     )
 }
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index eed473d..8b8df24 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -3,7 +3,7 @@ import { Title, MainSection, Information } from '../components/components.ts'
 const Contact = () => {
     return (
         <div>
-            <header className="h-48 min-h-[250px] relative flex flex-col justify-around align-middle">
+            <header className="h-48 min-h-[250px] relative flex flex-col justify-around align-middle px-16">
                 <div
                     className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
                 ></div>
@@ -12,37 +12,42 @@ const Contact = () => {
                 </div>
             </header>
             <main className="flex flex-col">
-                <div className="pt-52 py-44">
-                    <MainSection>
-                        <Title>Discord Community</Title>
-                        <Information>
-
+                <section className="mb-8">
+                    <div className="py-8 sm:py-16 md:py-32 lg:py-52 flex flex-col items-center justify-center">
+                        <h2 className="text-3xl font-bold mb-4 text-center">Discord Community</h2>
+                        <p className="text-center max-w-2xl">
                             Join our vibrant Discord community to connect with like-minded individuals, 
                             share ideas, and collaborate on creative projects. Whether you're a seasoned 
                             creator or just starting out, everyone is welcome! <a className="text-blue-700" target="_blank"
                              href="https://discord.gg/TKBGYmZEQb">Click here</a> to join our Discord server.
-                        </Information>
-                    </MainSection>
-                </div>
-                <div className="py-52 bg-gray-100">
-                    <MainSection>
-                        <Title>
-                                Location
-                        </Title>
-                        <Information>
-                            Our physical headquarters are located at the <a  className="text-blue-700" target="_blank"
+                        </p>
+                    </div>
+                </section>
+                <section className="mb-8">
+                    <div className="py-8 sm:py-16 md:py-32 lg:py-52 bg-gray-100 flex flex-col items-center justify-center">
+                        <h2 className="text-3xl font-bold mb-4 text-center">Location</h2>
+                        <p className="text-center max-w-2xl">
+                        Our physical headquarters are located at the <a  className="text-blue-700" target="_blank"
                              href="https://mercerxlab.rpi.edu/">Mercer XLab</a>, where creativity thrives 
                             and ideas come to life. Drop by for workshops, meetups, and events, or simply to hang
                              out with fellow members of our creative community. We'd love to see you there!
 
                             Have a question or need assistance? Feel free to reach out to us via Discord or visit 
                             us in person. We're here to help!
-                        </Information>
-                    </MainSection>
-                </div>
+                        </p>
+                    </div>
+                </section>
             </main>
         </div>
     )
 }
 
-export default Contact
\ No newline at end of file
+export default Contact
+
+/*Our physical headquarters are located at the <a  className="text-blue-700" target="_blank"
+                             href="https://mercerxlab.rpi.edu/">Mercer XLab</a>, where creativity thrives 
+                            and ideas come to life. Drop by for workshops, meetups, and events, or simply to hang
+                             out with fellow members of our creative community. We'd love to see you there!
+
+                            Have a question or need assistance? Feel free to reach out to us via Discord or visit 
+                            us in person. We're here to help!*/
\ No newline at end of file
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index cc965d8..c013f0b 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,38 +1,72 @@
+import { MainSection, Title, Information } from "../components/components.ts";
+import Project from "../components/ProjectCard.tsx";
 import React from 'react';
 
-const Home: React.FC = () => {
-  return (
-    <div className="container mx-auto px-4">
-      <header className="bg-blue-500 text-white p-4">
-        <h1 className="text-2xl md:text-4xl lg:text-5xl">Welcome to My Website</h1>
-      </header>
-      <main className="p-4">
-        <section className="mb-8">
-          <h2 className="text-xl md:text-2xl lg:text-3xl">Latest News</h2>
-          <p className="text-base md:text-lg lg:text-xl">
-            This is where the latest news will be displayed.
-          </p>
-        </section>
-        <section className="mb-8">
-          <h2 className="text-xl md:text-2xl lg:text-3xl">Features</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div className="bg-gray-200 p-4">Feature 1</div>
-            <div className="bg-gray-300 p-4">Feature 2</div>
-            <div className="bg-gray-400 p-4">Feature 3</div>
-          </div>
-        </section>
-        <section>
-          <h2 className="text-xl md:text-2xl lg:text-3xl">Contact Us</h2>
-          <p className="text-base md:text-lg lg:text-xl">
-            Get in touch with us through the contact page.
-          </p>
-        </section>
-      </main>
-      <footer className="bg-blue-500 text-white p-4 mt-8">
-        <p className="text-center text-sm md:text-base lg:text-lg">&copy; 2023 My Website</p>
-      </footer>
-    </div>
-  );
+const projects = [
+    {
+        name: "Line Follower Robot",
+        description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
+        link: "https://example.com",
+        image: "https://www.sciencebuddies.org/CrPeYL-5kIqQRIUYTGRY1m_XRYw=/560x315/-/https/i.ytimg.com/vi/-cilOho6l3Q/maxresdefault.jpg",
+        department: "ECSE",
+        date: "06/07/24"
+    },
+    {
+        name: "Rube Goldberg Machine",
+        description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
+        link: "https://example.com",
+        image: "https://scoutlife.org/wp-content/uploads/2018/04/rubegoldberg.jpg",
+        department: "MANE",
+        date: "06/07/24"
+    },
+    {
+        name: "Giant Water Rocket",
+        description: "Nulla pharetra diam sit amet nisl suscipit adipiscing. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Maecenas pharetra convallis posuere morbi. Viverra adipiscing at in tellus. Euismod lacinia at quis risus sed vulputate. Orci phasellus egestas tellus rutrum tellus. Venenatis urna cursus eget nunc. Pellentesque habitant morbi tristique senectus et netus. Dolor morbi non arcu risus quis varius quam. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Elementum nisi quis eleifend quam. Pellentesque habitant morbi tristique senectus et netus. Maecenas pharetra convallis posuere morbi leo urna.",
+        link: "https://example.com",
+        image: "https://scoutlife.org/wp-content/uploads/2018/04/rubegoldberg.jpg",
+        department: "MANE",
+        date: "06/07/24"
+    }
+];
+
+const Home = () => {
+    return (
+        <div className="container mx-auto ">
+            
+            <header className="h-48 min-h-[250px] relative flex flex-col justify-around ">
+                <div
+                    className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
+                ></div>
+                <div className="flex flex-col items-center justify-center">
+                    <h1 className="text-5xl font-bold text-white">Rensselaer Engineering Commons</h1>
+                </div>
+            </header>
+
+                <section className="mb-8">
+                    <div className="py-8 sm:py-16 md:py-32 lg:py-52 flex flex-col items-center justify-center">
+                        <h2 className="text-3xl font-bold mb-4 text-center">Our Mission</h2>
+                        <p className="text-center max-w-2xl">
+                            Our mission is to inspire creativity through the power of simplicity.
+                            By embracing minimalist design, user-centric innovation, and a collaborative DIY spirit,
+                            we aim to create cool stuff that not only delights but also solves real-world problems.
+                            We believe in the transformative power of iterative improvement, cross-disciplinary inspiration,
+                            and sustainable solutions. Our mission is to embrace imperfection, foster collaboration,
+                            and make a positive impact on the world through our creative endeavors. Join us as we embark on a
+                            journey to create cool sh*t that inspires, innovates, and leaves a lasting legacy of creativity.
+                        </p>
+                    </div>
+                </section>
+                <section className="mb-8">
+                    <h2 className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-center">Projects</h2>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center">
+                        {projects.map((project, index) => (
+                            <Project key={index} {...project} />
+                        ))}
+                    </div>
+                </section>
+          
+        </div>
+    );
 }
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 4f22615..7bb7394 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,6 +1,6 @@
 const Login = () => {
     return (
-        <div className="py-52">
+        <div className="container mx-auto">
             <div className="flex min-h-full flex-col justify-center px-6 lg:px-8">
                 <div className="sm:mx-auto sm:w-full sm:max-w-sm">
                     <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
diff --git a/src/pages/Projects.tsx b/src/pages/Projects.tsx
index 919837f..02de8d3 100644
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -1,208 +1,59 @@
 const Projects = () => {
-    return (
-        <div>
-            <header className="h-48 min-h-[250px] relative flex flex-col justify-around align-middle">
-                <div
-                    className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
-                ></div>
-                <div className="flex flex-col items-center justify-center">
-                    <h1 className="text-5xl font-bold text-white">Projects</h1>
-                </div>
-            </header>
-            {/* Table was grabbed from this open source project https://tailwindcomponents.com/component/responsive-table-5 */}
-            <main className="bg-gray-200">
-                <section className="container mx-auto py-52 font-mono">
+  return (
+      <div className="container mx-auto">
+          <header className="h-48 min-h-[250px] relative flex flex-col justify-around items-center w-full">
+              <div
+                  className="absolute inset-0 -z-10 h-full w-full bg-[#3647a6] bg-[linear-gradient(to_right,#1a2d99_1px,transparent_1px),linear-gradient(to_bottom,#1a2d99_1px,transparent_1px)] bg-[size:40px_40px]"
+              ></div>
+              <div className="flex flex-col items-center justify-center">
+                  <h1 className="text-5xl font-bold text-white">Projects</h1>
+              </div>
+          </header>
+          <main className="w-full bg-gray-200 w-full">
+            <section className="flex-grow w-full py-16 px-4 sm:px-6 lg:px-8">
                   <div className="w-full mb-8 overflow-hidden rounded-lg shadow-lg">
-                    <div className="w-full overflow-x-auto">
-                      <table className="w-full">
-                        <thead>
-                          <tr className="text-md font-semibold tracking-wide text-left text-gray-900 bg-gray-100 uppercase border-b border-gray-600">
-                            <th className="px-4 py-3">Name</th>
-                            <th className="px-4 py-3">Project Lead</th>
-                            <th className="px-4 py-3">Status</th>
-                            <th className="px-4 py-3">Start Date</th>
-                          </tr>
-                        </thead>
-                        <tbody className="bg-white">
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full md:block">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold text-black">Sufyan</p>
-                                  <p className="text-xs text-gray-600">Developer</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 text-ms font-semibold border">22</td>
-                            <td className="px-4 py-3 text-xs border">
-                              <span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm"> Acceptable </span>
-                            </td>
-                            <td className="px-4 py-3 text-sm border">6/4/2000</td>
-                          </tr>
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold text-black">Stevens</p>
-                                  <p className="text-xs text-gray-600">Programmer</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 text-md font-semibold border">27</td>
-                            <td className="px-4 py-3 text-xs border">
-                              <span className="px-2 py-1 font-semibold leading-tight text-orange-700 bg-gray-100 rounded-sm"> Pending </span>
-                            </td>
-                            <td className="px-4 py-3 text-sm border">6/10/2020</td>
-                          </tr>
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold">Nora</p>
-                                  <p className="text-xs text-gray-600">Designer</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 text-md font-semibold border">17</td>
-                            <td className="px-4 py-3 text-xs border">
-                              <span className="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-sm"> Nnacceptable </span>
-                            </td>
-                            <td className="px-4 py-3 text-sm border">6/10/2020</td>
-                          </tr>
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold">Ali</p>
-                                  <p className="text-xs text-gray-600">Programmer</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 border text-md font-semibold">23</td>
-                            <td className="px-4 py-3 border text-xs">
-                              <span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm"> Acceptable </span>
-                            </td>
-                            <td className="px-4 py-3 border text-sm">6/10/2020</td>
-                          </tr>
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold">Khalid</p>
-                                  <p className="text-xs text-gray-600">Designer</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 border text-md font-semibold">20</td>
-                            <td className="px-4 py-3 border text-xs">
-                              <span className="px-2 py-1 font-semibold leading-tight text-gray-700 bg-gray-100 rounded-sm"> Pending </span>
-                            </td>
-                            <td className="px-4 py-3 border text-sm">6/10/2020</td>
-                          </tr>
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold">Nasser</p>
-                                  <p className="text-xs text-gray-600">Pen Tester</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 border text-md font-semibold">29</td>
-                            <td className="px-4 py-3 border text-xs">
-                              <span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm"> Acceptable </span>
-                            </td>
-                            <td className="px-4 py-3 border text-sm">6/10/2020</td>
-                          </tr>
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold">Mohammed</p>
-                                  <p className="text-xs text-gray-600">Web Designer</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 border text-md font-semibold">38</td>
-                            <td className="px-4 py-3 border text-xs">
-                              <span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm"> Acceptable </span>
-                            </td>
-                            <td className="px-4 py-3 border text-sm">6/10/2020</td>
-                          </tr>
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold">Saad</p>
-                                  <p className="text-xs text-gray-600">Data</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 border text-md font-semibold">19</td>
-                            <td className="px-4 py-3 border text-xs">
-                              <span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm"> Acceptable </span>
-                            </td>
-                            <td className="px-4 py-3 border text-sm">6/10/2020</td>
-                          </tr>
-                          <tr className="text-gray-700">
-                            <td className="px-4 py-3 border">
-                              <div className="flex items-center text-sm">
-                                <div className="relative w-8 h-8 mr-3 rounded-full">
-                                  <img className="object-cover w-full h-full rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" loading="lazy" />
-                                  <div className="absolute inset-0 rounded-full shadow-inner" aria-hidden="true"></div>
-                                </div>
-                                <div>
-                                  <p className="font-semibold">Sami</p>
-                                  <p className="text-xs text-gray-600">Developer</p>
-                                </div>
-                              </div>
-                            </td>
-                            <td className="px-4 py-3 border text-md font-semibold">21</td>
-                            <td className="px-4 py-3 border text-xs">
-                              <span className="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-sm"> Acceptable </span>
-                            </td>
-                            <td className="px-4 py-3 border text-sm">6/10/2020</td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
+                      <div className="w-full overflow-x-auto">
+                          <table className="min-w-full divide-y divide-gray-200">
+                              <thead className="bg-gray-100">
+                                  <tr>
+                                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project Lead</th>
+                                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
+                                  </tr>
+                              </thead>
+                              <tbody className="bg-white divide-y divide-gray-200">
+                                  <tr>
+                                      <td className="px-6 py-4 whitespace-nowrap">
+                                          <div className="flex items-center">
+                                              <div className="flex-shrink-0 h-10 w-10">
+                                                  <img className="h-10 w-10 rounded-full" src="https://images.pexels.com/photos/5212324/pexels-photo-5212324.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="" />
+                                              </div>
+                                              <div className="ml-4">
+                                                  <div className="text-sm font-medium text-gray-900">Sufyan</div>
+                                                  <div className="text-sm text-gray-500">Developer</div>
+                                              </div>
+                                          </div>
+                                      </td>
+                                      <td className="px-6 py-4 whitespace-nowrap">
+                                          <div className="text-sm text-gray-900">22</div>
+                                      </td>
+                                      <td className="px-6 py-4 whitespace-nowrap">
+                                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                              Acceptable
+                                          </span>
+                                      </td>
+                                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6/4/2000</td>
+                                  </tr>
+                                  {/* Add more rows as needed */}
+                              </tbody>
+                          </table>
+                      </div>
                   </div>
-                </section>
-            </main>
-        </div>
-    )
+              </section>
+          </main>
+      </div>
+  );
 }
 
-export default Projects
\ No newline at end of file
+export default Projects;