diff --git a/package-lock.json b/package-lock.json index 4cfcd0d..07a2650 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f9553f0..80756a5 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 8da3fde..0000000 --- a/src/App.css +++ /dev/null @@ -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); -} diff --git a/src/App.jsx b/src/App.jsx index 60e85cb..2686c13 100644 --- a/src/App.jsx +++ b/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 (
-
- logo -

Hello Vite + React!

-
+ + {/* + + 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? + + */} + + + +
+ + } /> + } /> + } /> + } /> + } /> + } /> + +
+ +
- ) + ); } -export default App +export default App; diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..a84634d --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.jsx similarity index 97% rename from src/components/Navbar.js rename to src/components/Navbar.jsx index e08fe7f..ec014f1 100644 --- a/src/components/Navbar.js +++ b/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() { - + ) } \ No newline at end of file diff --git a/src/components/ProjectsArray.js b/src/components/ProjectsArray.jsx similarity index 100% rename from src/components/ProjectsArray.js rename to src/components/ProjectsArray.jsx diff --git a/src/index.css b/src/index.scss similarity index 100% rename from src/index.css rename to src/index.scss diff --git a/src/main.jsx b/src/main.jsx index 9af0bb6..a3171de 100644 --- a/src/main.jsx +++ b/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( diff --git a/src/pages/AboutMe.js b/src/pages/AboutMe.jsx similarity index 100% rename from src/pages/AboutMe.js rename to src/pages/AboutMe.jsx diff --git a/src/pages/CreativeWorks.js b/src/pages/CreativeWorks.jsx similarity index 100% rename from src/pages/CreativeWorks.js rename to src/pages/CreativeWorks.jsx diff --git a/src/pages/Links.js b/src/pages/Links.jsx similarity index 100% rename from src/pages/Links.js rename to src/pages/Links.jsx diff --git a/src/pages/Projects.js b/src/pages/Projects.jsx similarity index 100% rename from src/pages/Projects.js rename to src/pages/Projects.jsx diff --git a/src/pages/Technologies.js b/src/pages/Technologies.jsx similarity index 100% rename from src/pages/Technologies.js rename to src/pages/Technologies.jsx diff --git a/src/pages/Welcome.js b/src/pages/Welcome.jsx similarity index 100% rename from src/pages/Welcome.js rename to src/pages/Welcome.jsx