modifying search function

src/components/Navbar.jsx

@@ -3,7 +3,20 @@ import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom";
 
 import MenuIcon from '@mui/icons-material/Menu';
+import { SidebarStyle } from "../styles/Style";
 import '../sass/Navbar.scss';
+import { v4 } from "uuid";
+
+const { background, list, listItem } = SidebarStyle;
+
+const navOptions = [
+    "Home",
+    "About Me",
+    "My Projects",
+    "My Technologies",
+    "Links",
+    "Creative Work"
+]
 
 export default function Navbar() {
     const [open, setOpen] = useState(false);
@@ -12,6 +25,7 @@ export default function Navbar() {
     const navigate = useNavigate();
 
     useEffect(() => {
+        setOpen(false);
         switch (selected) {
             case 0:
                 navigate('/');
@@ -50,44 +64,29 @@ export default function Navbar() {
                 </Button>
             </div>
 
-            <Drawer anchor="right" open={open} onClose={() => setOpen(false)}>
-                <List component="nav">
+            <Drawer
+                anchor="right"
+                onClose={() => setOpen(false)}
+                open={open}
+            >
 
-                    <ListItem button
-                        selected={selected===0}
-                        onClick={() => setSelected(0)}>
-                            Home
-                    </ListItem>
+                <List sx={list} component="nav">
 
-                    <ListItem button
-                        selected={selected===1}
-                        onClick={() => setSelected(1)}>
-                            About me
-                    </ListItem>
+                    {
+                        navOptions.map(each => {
+                            let idx = navOptions.indexOf(each);
+                            return (
+                                <ListItem button
+                                    sx={listItem}
+                                    key={v4()}
+                                    selected={selected === idx}
+                                    onClick={() => setSelected(idx)}>
+                                        {each}
+                                </ListItem>
+                            )
+                        })
+                    }
 
-                    <ListItem button
-                        selected={selected===2}
-                        onClick={() => setSelected(2)}>
-                            My Projects
-                    </ListItem>
-
-                    <ListItem button
-                        selected={selected===3}
-                        onClick={() => setSelected(3)}>
-                            My Technologies
-                    </ListItem>
-
-                    <ListItem button
-                        selected={selected===4}
-                        onClick={() => setSelected(4)}>
-                            Links
-                    </ListItem>
-
-                    <ListItem button
-                        selected={selected===5}
-                        onClick={() => setSelected(5)}>
-                            My Creative Work
-                    </ListItem>
                 </List>
             </Drawer>
         </header>

src/pages/AboutMe.jsx

@@ -4,14 +4,14 @@ import '../sass/pages/AboutMe.scss';
 import Card from '@mui/material/Card';
 
 const { htmlTheme } = DocumentStyle;
-const { projectCards, cardDimensions, aboutGallery } = AboutMePage;
+const { projectCards, cardDimensions } = AboutMePage;
 
 export default function AboutMe() {
     return (
         <div style={htmlTheme} className="about-me-page">
-            <h1 className="what-i-do-header">What I Do:</h1>
+            <h1 className="what-i-do-header">What I Do</h1>
 
-            <div style={aboutGallery}>
+            <div className="about-gallery">
                 <Card sx={[projectCards, cardDimensions]} className="fade one">
                     <h2 className="card-title">Create full stack web applications</h2>
                     <p>I have experience building web applications with and without back-end integrations.</p>
@@ -29,9 +29,8 @@ export default function AboutMe() {
                 <Card sx={[projectCards, cardDimensions]} className="fade three">
                     <h2 className="card-title">Database Operations and Management</h2>
                     <p>My projects have featured both relational and non-relational databases, in particular 
-                        PostgreSQL and MongoDB.</p>
-                    <p>I also have experience with various technologies for connecting these to front-end applications, 
-                        including Prisma and Supabase.</p>
+                        PostgreSQL and MongoDB. I also have experience with various methods of connecting these
+                        to front-end applications.</p>
                 </Card>
             </div>
         </div>

src/pages/Links.jsx

@@ -2,14 +2,14 @@ import Card from '@mui/material/Card';
 
 import { DocumentStyle } from '../styles/Style';
 
-const { htmlTheme, stockGallery } = DocumentStyle;
+const { htmlTheme } = DocumentStyle;
 
 export default function Links() {
     return (
         <div style={htmlTheme}>
             <h1>Find more about my work at the links below!</h1>
 
-            <div style={stockGallery}>
+            <div>
                 <Card>
                     {/* An image here for a Github logo? */}
                     <a href="https://github.com/innocuous-symmetry">My Github</a>

src/pages/Projects.jsx

@@ -15,32 +15,73 @@ const defaultFilter = {
 export default function Projects() {
     const [results, setResults] = useState();
     const [filter, setFilter] = useState(defaultFilter);
-    const [panelStyle, setPanelStyle] = useState('');
+    const [text, setText] = useState();
 
     const searchInput = useRef();
     const languageFilter = useRef();
-    const projectPage = useRef();
 
     useEffect(() => {
-        if (!filter) setResults(projectsArray.map(each => each.jsx));
+        let result = [];
 
-        if (filter) {
-            let result = projectsArray;
-            if (filter.searchTerm) {
-                let termLower = filter.searchTerm.toLowerCase();
-                result = result.filter(obj => obj.name.toLowerCase().includes(termLower));
-            }
-            if (filter.language) {
-                let adjustedLang = ((filter.language === 'PostgreSQL' || filter.language === "Express") ? "PERN" : filter.language);
-                result = result.filter(obj => obj.languages.includes(adjustedLang));
-            }
-
-            if (filter.inProgress) result = result.filter(obj => !obj.inProgress);
-            
-            setResults(result.map(each => each.jsx));
+        if (filter === defaultFilter) {
+            setResults(projectsArray.map(each => each.jsx));
+            return;
         }
+
+        if (filter.searchTerm) {
+            let termLower = filter.searchTerm.toLowerCase();
+
+            let i = 0;
+            while (i < text.length) {
+                for (let field of text[i].text) {
+                    if (field.includes(termLower)) {
+                        result.push(projectsArray[i]);
+                        break;
+                    } else {
+                        continue;
+                    }
+                }
+                i++;
+            }
+        } else if (filter.inProgress) {
+            result = result.filter(obj => !obj.inProgress);
+        }
+
+        setResults(result.map(each => each.jsx));
     }, [filter]);
 
+    useEffect(() => {
+        let projectText = [];
+        let i = 0;
+        while (i < projectsArray.length) {
+            let project = {
+                projectID: i,
+                text: []
+            }
+
+            for (let each of projectsArray[i].jsx.props.children) {
+                if (Array.isArray(each.props.children)) {
+                    for (let nested of each.props.children) {
+                        if (typeof nested === 'string') {
+                            const newText = nested.toLowerCase();
+                            project.text.push(newText);
+                        } else {
+                            const newText = nested.props.children.toLowerCase();
+                            project.text.push(newText);
+                        }
+                    }
+                } else {
+                    const newText = each.props.children.toLowerCase();
+                    project.text.push(newText);
+                }
+            }
+
+            projectText.push(project);
+            i++;
+        }
+        setText(projectText);
+    }, [])
+
     const handleChange = (e) => {
         e.preventDefault();
         setFilter({
@@ -55,33 +96,11 @@ export default function Projects() {
         languageFilter.current.value = '';
     }
 
-    useEffect(() => {
-        const handleScroll = (e) => {
-            let position = window.scrollY;
-
-            if (position > 150) {
-                setPanelStyle("filter-anim-one");
-            } else {
-                setPanelStyle("");
-            }
-        }
-
-        window.addEventListener('scroll', handleScroll);
-
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        }
-    }, []);
-
-    useEffect(() => {
-        console.log(panelStyle);
-    }, [panelStyle]);
-
     return (
         <div className="projects-page" style={htmlTheme}>
             <h1>Check out these projects from my portfolio!</h1>
 
-            <section className={`filter-panel ${panelStyle}`}>
+            <section className={`filter-panel`}>
                 <h2>Filter by:</h2>
                 <div className="filter-controls">
                     <input

src/pages/Welcome.jsx

@@ -6,8 +6,8 @@ import '../sass/pages/Welcome.scss';
 
 import { DocumentStyle, WelcomePage } from '../styles/Style';
 
-const { pageTheme, galleryTheme, galleryRow, galleryPages, welcomeFooter, mainHeaderCard } = WelcomePage;
-const { buttonStyle, galleryArrowStyle, galleryCards, dividerStyle } = DocumentStyle;
+const { pageTheme, welcomeFooter, mainHeaderCard } = WelcomePage;
+const { dividerStyle } = DocumentStyle;
 
 // Web page logic
 

src/sass/App.scss

@@ -8,22 +8,56 @@
     top: 4.5rem;
   }
 
+  // tablet queries
   @media only screen and (max-width: 1050px) {
-    .app-navbar {
-      background-color: red;
+    .welcome-page {
+      #header-card {
+        padding: 0.7rem;
+        h3 {
+          font-size: 1.2rem;
+        }
+        h4 {
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .about-me-page {
+      height: auto;
+      .about-gallery {
+        width: 90vw;
+        height: 100%;
+        flex-flow: column nowrap;
+        align-items: center;
+        .fade {
+          width: 400px;
+          height: 300px;
+          overflow-y: scroll;
+        }
+      }
+    }
+
+    .projects-page {
+      .filter-panel {
+        width: 65%;
+      }
     }
   }
   
+  // mobile queries
   @media only screen and (max-width: 600px) {
-      .app-navbar {
-        background-color: orange;
-          .navbar-left {
-              width: 80vw;
-          }
-          a, h2 {
-              font-weight: 600;
-              font-size: 1.25rem;
-          }
-      }
+    .app-navbar {
+      background-color: orange;
+        .navbar-left {
+            width: 80vw;
+        }
+        .navbar-right {
+          width: 20vw;
+        }
+        a, h2 {
+            font-weight: 600;
+            font-size: 1.25rem;
+        }
+    }
   }
 }

src/sass/Navbar.scss

@@ -1,53 +1,58 @@
 @import "helper/variables";
 
 .app-navbar {
-    background-color: $purple200;
-    height: 4.5rem;
+  background-color: $purple200;
+  height: 4.5rem;
+  display: flex;
+  border-bottom: 1px solid black;
+  font-family: 'Open Sans', sans-serif;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 9;
+
+  .navbar-left {
     display: flex;
-    border-bottom: 1px solid black;
-    font-family: 'Open Sans', sans-serif;
-    position: fixed;
-    top: 0;
-    width: 100vw;
-    z-index: 9;
+    flex-direction: row;
+    width: 75%;
+    justify-content: flex-start;
+    align-items: baseline;
+  }
 
-    .navbar-left {
-      display: flex;
-      flex-direction: row;
-      width: 75%;
-      justify-content: flex-start;
-      align-items: baseline;
+  .navbar-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding-right: 1rem;
+    width: 25%;
+  }
+
+  // top right corner, Mikayla Dobson text
+  a {
+    transition: color 150ms ease;
+    color: black;
+    font-weight: 900;
+    font-size: 2rem;
+    padding-left: 1rem;
+    border-right: 1px solid black;
+    padding-right: 1rem;
+    text-decoration: none;
+    &:visited {
+      color: inherit;
     }
-
-    .navbar-right {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-      padding-right: 1rem;
-      width: 25%;
-    }
-
-    // top right corner, Mikayla Dobson text
-    a {
+    &:hover {
+      color: purple;
       transition: color 150ms ease;
-      color: black;
-      font-weight: 900;
-      font-size: 2rem;
-      padding-left: 1rem;
-      border-right: 1px solid black;
-      padding-right: 1rem;
-      text-decoration: none;
-      &:visited {
-        color: inherit;
-      }
-      &:hover {
-        color: purple;
-        transition: color 150ms ease;
-      }
-    }
-    h2 {
-      font-weight: 400;
-      position: relative;
-      padding-left: 1rem;
     }
+  }
+  h2 {
+    font-weight: 400;
+    position: relative;
+    padding-left: 1rem;
+  }
+
+  // drawer component
+  .side-drawer {
+    background-color: red;
+  }
 }

src/sass/pages/AboutMe.scss

@@ -20,6 +20,21 @@
   .card-title {
     text-transform: uppercase;
   }
+
+  .fade {
+    width: 300px;
+    height: 300px;
+    padding: 1rem;
+    margin: 0.5rem;
+  }
+
+  .about-gallery {
+    display: flex;
+    height: 70vh;
+    width: 85vw;
+    justify-content: space-between;
+    margin: 2rem;
+  }
   
   @keyframes fade-in {
     from {

src/sass/pages/Projects.scss

@@ -18,13 +18,6 @@
         justify-content: space-between;
         width: 80%;
       }
-  
-    }
-    .filter-anim-one {
-      position: sticky;
-      left: 2rem;
-      top: 6rem;
-      justify-content: flex-start;
     }
   
     .project-cards {

src/styles/Style.js

@@ -7,52 +7,25 @@ export const DocumentStyle = {
         flexDirection: 'column',
         alignItems: 'center',
         minHeight: '100vh',
-        height: '100%',
-    },
-    linkStyle: {
-        color: deepPurple[300],
-        textDecoration: 'none'
-    },
-    buttonStyle: {
-        backgroundColor: deepPurple[200],
-        color: deepPurple[500],
-        '&:hover': {
-            backgroundColor: purple[400],
-            color: deepPurple[50],
-        },
-        width: '25vw',
-        height: '10rem',
-        margin: '2rem',
-    },
-    galleryArrowStyle: {
-        width: '8vw',
-        height: '10rem',
-        display: 'flex',
-        justifyContent: 'center',
-        color: deepPurple[50],
-        backgroundColor: deepPurple[400],
-        '&:hover': {
-            backgroundColor: deepPurple[500],
-        }
-    },
-    galleryCards: {
-        width: '3rem',
-        height: '1rem',
-        margin: '0.8rem'
     },
     dividerStyle: {
         width: '80%',
         color: '#000000',
         borderWidth: '2px'
-    },
+    }
+}
 
-    stockGallery: {
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        width: '85vw',
-        height: '45vh',
+export const SidebarStyle = {
+    background: {
+        backgroundColor: purple[300],
+        opacity: 0.7,
+    },
+    list: {
+        height: '100vh',
+        backgroundColor: pink[100]
+    },
+    listItem: {
+        backgroundColor: pink[200]
     }
 }
 
@@ -124,39 +97,11 @@ export const AboutMePage = {
     projectCards: {
         backgroundColor: indigo[800],
         color: indigo[50],
-        width: '300px',
-        height: '300px',
-        padding: '2rem',
     },
     cardDimensions: {
         display: 'flex',
         flexDirection: 'column',
         borderRadius: '12px',
         textAlign: 'center',
-    },
-    aboutGallery: {
-        display: 'flex',
-        height: '70vh',
-        width: '80vw',
-        justifyContent: 'space-around',
-        margin: '2rem',
     }
-}
-
-export const TechnologiesPage = {
-    technologyCard: {
-        backgroundColor: indigo[50],
-        width: '40vw',
-        margin: '2rem',
-        borderRadius: '15px',
-    }
-}
-
-export const ProjectsPage = {
-    projectsButton: {
-        backgroundColor: purple[500],
-        color: indigo[50],
-        height: '45%',
-        width: '5%',
-    },
 }