tech page redesign

src/components/Technologies/MainTopic.jsx

@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { SubTopic } from "./SubTopic";
+import { Card } from "@mui/material";
+import { v4 } from "uuid";
+
+export function MainTopic({ name, subtopics }) {
+    const [collapsed, setCollapsed] = useState(true);
+
+    return (
+        <Card className="main-topic">
+            <h1>{name}</h1>
+            { collapsed ? null : subtopics.map(data => <SubTopic key={v4()} data={data} />) }
+            <button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>
+        </Card>
+    )
+}

src/components/Technologies/SubTopic.jsx

@@ -0,0 +1,21 @@
+import { Card, Chip } from "@mui/material";
+import { useState } from "react";
+import { v4 } from "uuid";
+
+export function SubTopic({ data }) {
+    const [showNested, setShowNested] = useState(false);
+
+    return (
+        <Card className="subtopic-card">
+            <strong>{data.topic || data}</strong>
+            <div className="subtopics">
+                { data.subtopics ?
+                    data.subtopics.map(each => {
+                        return <Chip key={v4()} label={each} />
+                    })
+                    : null
+                }
+            </div>
+        </Card>
+    )
+}

src/components/Technologies/techList.js

@@ -0,0 +1,91 @@
+export const techList = [
+    {
+        topic: "Programming Languages",
+        subtopics: [
+            {
+                topic: "JavaScript",
+                subtopics: [
+                    "TypeScript",
+                    "NodeJS",
+                    "Express",
+                    "ToneJS",
+                    "Jest"
+                ]
+            },
+            {
+                topic: "Python",
+                subtopics: [
+                    "Pandas",
+                    "Beautiful Soup",
+                ]
+            },
+            {
+                topic: "C#",
+                subtopics: [],
+            },
+            {
+                topic: "Java",
+                subtopics: []
+            }
+        ]
+    },
+    {
+        topic: "Front End Engineering",
+        subtopics: [
+            {
+                topic: "React",
+                subtopics: [
+                    "Redux",
+                    "React / TypeScript",
+                    "React Native",
+                    "React Testing Library",
+                    "React Router"
+                ]
+            },
+            {
+                topic: "Styling",
+                subtopics: [
+                    "CSS",
+                    "Sass",
+                    "Material UI",
+                    "Responsive Design",
+                ]
+            }
+        ]
+    },
+    
+    {
+        topic: "Back End Engineering",
+        subtopics: [
+            {
+                topic: "SQL",
+                subtopics: [
+                    "PostgreSQL",
+                    "MongoDB",
+                    "Supabase"
+                ]
+            },
+            {
+                topic: "REST API",
+                subtopics: [
+                    "Express.js",
+                    "Express-Session",
+                    "API Documentation with Swagger",
+                    "MVC Architecture"
+                ]
+            }
+        ]
+    },
+    {
+        topic: "Developer Tools",
+        subtopics: [
+            "Git",
+            "GitHub",
+            "Visual Studio Code",
+            "Vite",
+            "Netlify",
+            "Heroku",
+            "Figma",
+        ]
+    }
+]

src/pages/Projects.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { DocumentStyle } from '../styles/Style';
 import { projectsArray } from '../components/ProjectsArray';
 import { Divider } from '@mui/material';
-import '../sass/App.scss';
+import '../sass/pages/Projects.scss';
 
 const { htmlTheme, dividerStyle } = DocumentStyle;
 

src/pages/Technologies.jsx

@@ -1,79 +1,17 @@
 import '../sass/pages/Technologies.scss';
+import { DocumentStyle } from '../styles/Style';
+import { MainTopic } from '../components/Technologies/MainTopic';
+import { techList } from '../components/Technologies/techList';
+import { v4 } from 'uuid';
 
-import Card from '@mui/material/Card';
-import Chip from '@mui/material/Chip';
-
-import { TechnologiesPage, DocumentStyle } from '../styles/Style';
-
-const { technologyCard } = TechnologiesPage;
 const { htmlTheme } = DocumentStyle;
 
 export default function Technologies() {
     return (
         <div className="technologies-page" style={htmlTheme}>
-            <Card sx={{padding: '2rem'}}>
-                <h1>What technologies do I use?</h1>
-            </Card>
-
-            <h2>These are my most often-used technologies:</h2>
-            <Card sx={technologyCard}>
-                <div className="tech-scrollbar">
-                    <Chip label="React" className="tech-bar-item"/>
-                    <Chip label="Redux" className="tech-bar-item"/>
-                    <Chip label="Express" className="tech-bar-item"/>
-                    <Chip label="PostgreSQL" className="tech-bar-item"/>
-                    <Chip label="Supabase" className="tech-bar-item"/>
-                    <Chip label="MongoDB" className="tech-bar-item"/>
-                </div>
-
-                <div className="tech-scrollbar backup-bar">
-                <Chip label="React" className="tech-bar-item"/>
-                    <Chip label="Redux" className="tech-bar-item"/>
-                    <Chip label="Express" className="tech-bar-item"/>
-                    <Chip label="PostgreSQL" className="tech-bar-item"/>
-                    <Chip label="Supabase" className="tech-bar-item"/>
-                    <Chip label="MongoDB" className="tech-bar-item"/>
-                </div>
-            </Card>
-
-            <h2>Here are some I use relatively often:</h2>
-            <Card sx={technologyCard}>
-
-                <div className="tech-scrollbar from-right">
-                    <Chip className="tech-bar-item variant-2" label="Sass" />
-                    <Chip className="tech-bar-item variant-2" label="Material UI" />
-                    <Chip className="tech-bar-item variant-2" label="Python" />
-                    <Chip className="tech-bar-item variant-2" label="Figma" />
-                    <Chip className="tech-bar-item variant-2" label="TypeScript" />
-                </div>
-
-                <div className="tech-scrollbar backup-from-right">
-                    <Chip className="tech-bar-item variant-2" label="Sass" />
-                    <Chip className="tech-bar-item variant-2" label="Material UI" />
-                    <Chip className="tech-bar-item variant-2" label="Python" />
-                    <Chip className="tech-bar-item variant-2" label="TypeScript" />
-                </div>
-
-            </Card>
-
-            <h2>And here are some things I'm working on learning:</h2>
-            <Card sx={technologyCard}>
-
-                <div className="tech-scrollbar">
-                    <Chip className="tech-bar-item variant-3" label="Prisma" />
-                    <Chip className="tech-bar-item variant-3" label="Figma" />
-                    <Chip className="tech-bar-item variant-3" label="C# / ASP.NET" />
-                    <Chip className="tech-bar-item variant-3" label="Next.js" />
-                </div>
-
-                <div className="tech-scrollbar backup-bar">
-                    <Chip className="tech-bar-item variant-3" label="Prisma" />
-                    <Chip className="tech-bar-item variant-3" label="Figma" />
-                    <Chip className="tech-bar-item variant-3" label="C# / ASP.NET" />
-                    <Chip className="tech-bar-item variant-3" label="Next.js" />
-                </div>
-                
-            </Card>
+            {techList.map(item => {
+                return <MainTopic key={v4()} name={item.topic} subtopics={item.subtopics} />
+            })}
         </div>
     )
 }

src/sass/App.scss

@@ -10,63 +10,4 @@
     position: relative;
     top: 4.5rem;
   }
-}
-
-.projects-page {
-  .filter-panel {
-    display: flex;
-    position: static;
-    flex-direction: column;
-    background-color: white;
-    align-items: center;
-    padding: 1rem;
-    width: 40vw;
-    border-radius: 12px;
-    margin-bottom: 2rem;
-    transition: align-items 1s ease,
-                position 1s ease
-    ;
-
-    .filter-controls {
-      display: flex;
-      justify-content: space-between;
-      width: 80%;
-    }
-
-  }
-  .filter-anim-one {
-    position: sticky;
-    left: 2rem;
-    top: 6rem;
-    justify-content: flex-start;
-  }
-  .filter-anim-two {
-
-  }
-
-  .project-cards {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 2rem;
-
-    > * {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      background-color: lightblue;
-      width: 80%;
-      height: auto;
-      margin-bottom: 2rem;
-      .links {
-        display: flex;
-        width: 75%;
-        align-items: baseline;
-        justify-content: space-around;
-      }
-      a:last-child {
-        margin-bottom: 1rem;
-      }
-    }
-  }
 }

src/sass/pages/Projects.scss

@@ -0,0 +1,55 @@
+.projects-page {
+    .filter-panel {
+      display: flex;
+      position: static;
+      flex-direction: column;
+      background-color: white;
+      align-items: center;
+      padding: 1rem;
+      width: 40vw;
+      border-radius: 12px;
+      margin-bottom: 2rem;
+      transition: align-items 1s ease,
+                  position 1s ease
+      ;
+  
+      .filter-controls {
+        display: flex;
+        justify-content: space-between;
+        width: 80%;
+      }
+  
+    }
+    .filter-anim-one {
+      position: sticky;
+      left: 2rem;
+      top: 6rem;
+      justify-content: flex-start;
+    }
+  
+    .project-cards {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 2rem;
+  
+      > * {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: lightblue;
+        width: 80%;
+        height: auto;
+        margin-bottom: 2rem;
+        .links {
+          display: flex;
+          width: 75%;
+          align-items: baseline;
+          justify-content: space-around;
+        }
+        a:last-child {
+          margin-bottom: 1rem;
+        }
+      }
+    }
+}

src/sass/pages/Technologies.scss

@@ -2,48 +2,22 @@
 @import "../helper/animations";
 
 .technologies-page {
-    .tech-scrollbar {
-        height: 5rem;
-        min-width: 60rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        left: 0;
-        overflow-x: hidden;
-        animation: 30s linear tech-scroll infinite;
-        .tech-bar-item {
+    .main-topic {
+        width: 70vw;
+        margin: 1rem 0;
+        padding: 1rem;
+    }
+
+    .subtopic-card {
+        .subtopics {
             display: flex;
-            align-items: center;
+            flex-flow: row wrap;
             justify-content: center;
-            position: relative;
-            left: 0;
-            top: 0.3rem;
-            font-size: 1.2rem;
-            font-weight: 700;
-            margin: 0 0.3rem;
             padding: 1rem;
-            background-color: $purple200;
-            height: 5rem;
-            width: 20rem;
+            & > * {
+                padding: 0.5rem;
+                margin: 0.5rem;
+            }
         }
     }
-    
-    .backup-bar {
-      bottom: 5rem;
-      animation: 30s linear 15s tech-scroll infinite, 15s hide-until-start;
-    }
-    
-    .from-right {
-      animation: 30s linear from-right infinite;
-    }
-    .backup-from-right {
-      bottom: 5rem;
-      animation: 30s linear 15s from-right infinite, 15s hide-until-start;
-    }
-    
-    .variant-2 {
-      background-color: #62286d !important;
-      color: white !important;
-    }
 }