contents transferred successfully

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.9.3",
         "@emotion/styled": "^11.9.3",
+        "@mui/icons-material": "^5.8.4",
         "@mui/material": "^5.8.7",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
@@ -635,6 +636,31 @@
         }
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.8.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.8.4.tgz",
+      "integrity": "sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.8.7",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.7.tgz",
@@ -2605,6 +2631,14 @@
         "react-is": "^17.0.2"
       }
     },
+    "@mui/icons-material": {
+      "version": "5.8.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.8.4.tgz",
+      "integrity": "sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==",
+      "requires": {
+        "@babel/runtime": "^7.17.2"
+      }
+    },
     "@mui/material": {
       "version": "5.8.7",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.7.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.7",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/App.css

@@ -1,42 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-button {
-  font-size: calc(10px + 2vmin);
-}

src/App.jsx

@@ -1,18 +1,45 @@
-import { useState } from 'react'
-import logo from './logo.svg'
-import './App.css'
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import './App.scss';
+
+// pages
+import Welcome from './pages/Welcome';
+import AboutMe from './pages/AboutMe';
+import Projects from './pages/Projects';
+import Technologies from './pages/Technologies';
+import Links from './pages/Links';
+import CreativeWorks from './pages/CreativeWorks';
+import Navbar from './components/Navbar';
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Hello Vite + React!</p>
-      </header>
+
+      {/*
+
+      To do: implement sidebar navigation with Drawer component
+      Work on styling in secondary pages
+      Bug in CSS animation in Technologies
+      Make list items in creative works iterable, as the gallery below
+      Move gallery iteration logic to external util folder? Make reusable?
+
+      */}
+      
+      <BrowserRouter>
+        <Navbar />
+          <main>
+            <Routes>
+              <Route path='/' element={<Welcome />} />
+              <Route path='/about-me' element={<AboutMe />} />
+              <Route path='/projects' element={<Projects />} />
+              <Route path='/technologies' element={<Technologies />} />
+              <Route path='/links' element={<Links />} />
+              <Route path='/creative-works' element={<CreativeWorks />} />
+            </Routes>
+          </main>
+      </BrowserRouter>
+
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/App.scss

@@ -0,0 +1,278 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+
+$pink50: #fce4ec;
+$purple100: #e1bee7;
+$purple200: #ce93d8;
+
+.App {
+  text-align: center;
+  .app-navbar {
+    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;
+      flex-direction: row;
+      width: 50%;
+      justify-content: flex-start;
+      align-items: baseline;
+    }
+
+    .navbar-right {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      padding-right: 1rem;
+      width: 50%;
+    }
+
+    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;
+      }
+      &:hover {
+        color: purple;
+        transition: color 150ms ease;
+      }
+    }
+    h2 {
+      font-weight: 400;
+      position: relative;
+      padding-left: 1rem;
+    }
+  }
+  main {
+    position: relative;
+    top: 4.5rem;
+  }
+}
+
+.welcome-page {
+  @keyframes sideToSide {
+    from {
+      transform: rotate(-1deg);
+    }
+
+    50% {
+      transform: rotate(1deg);
+    }
+
+    to {
+      transform: rotate(-1deg);
+    }
+  }
+
+  #header-card {
+    height: 18rem;
+    animation: sideToSide 10s infinite;
+  }
+  #welcome-info {
+    margin: 2rem 0;
+    width: 75%;
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 0.6rem;
+    animation: sideToSide 15s infinite;
+  }
+}
+
+.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 {
+      display: flex;
+      align-items: center;
+      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;
+    }
+
+    @keyframes hide-until-start {
+      from {
+        opacity: 0;
+      }
+      99% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    
+    @keyframes tech-scroll {
+      from {
+        left: -60rem;
+      }
+      100% {
+        left: 60rem;
+      }
+    }
+    
+    @keyframes from-right {
+      from {
+        left: 60rem;
+      }
+      100% {
+        left: -60rem;
+      }
+    }
+  }
+  
+  .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;
+  }
+}
+
+.about-me-page {
+  h1 {
+    color: darkblue;
+    font-weight: 800;
+    font-size: 4rem;
+  }
+  a {
+    color: white;
+    border-radius: 12px;
+    transition: color 0.3s linear;
+    text-decoration: none;
+    &:hover {
+      color: $purple200;
+      transition: color 0.3s linear;
+    }
+  }
+  .card-title {
+    text-transform: uppercase;
+  }
+  
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @mixin staggered-entry($interval) {
+    animation: 0.5s fade-in #{$interval}s linear forwards;
+  }
+  
+  .fade {
+    opacity: 0;
+    transition: 0.5s transform ease;
+
+    &.one {
+      @include staggered-entry(0);
+    }
+    &.two {
+      @include staggered-entry(0.6);
+    }
+    &.three {
+      @include staggered-entry(1.2);
+    }
+  }
+}
+
+.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/components/Navbar.jsx

@@ -2,7 +2,7 @@ import { Button, Drawer, List, ListItem } from "@mui/material"
 import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom";
 
-import MenuIcon from '@material-ui/icons/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
 
 export default function Navbar() {
     const [open, setOpen] = useState(false);
@@ -89,6 +89,6 @@ export default function Navbar() {
                     </ListItem>
                 </List>
             </Drawer>
-      </header>
+        </header>
     )
 }

src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
+import './index.scss'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>