From 7d84a0289599f3b1a1bbb4e2b742a8fb4ae7bb33 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Mon, 11 Jul 2022 11:16:41 -0500 Subject: [PATCH] styles fully consolidated into sass --- src/components/Navbar.jsx | 11 +++-- src/pages/AboutMe.jsx | 8 +--- src/pages/CreativeWorks.jsx | 78 +++++++++++++++---------------- src/pages/Links.jsx | 9 +--- src/pages/Projects.jsx | 5 +- src/pages/Technologies.jsx | 25 +++++----- src/pages/Welcome.jsx | 2 +- src/sass/App.scss | 9 ++++ src/sass/Navbar.scss | 17 +++++-- src/sass/components/_Button.scss | 13 +++--- src/sass/helper/_mixins.scss | 8 ++++ src/sass/helper/_variables.scss | 10 +++- src/sass/pages/CreativeWorks.scss | 2 - src/sass/pages/Links.scss | 3 ++ src/sass/pages/Projects.scss | 27 +++++++++-- src/sass/pages/Technologies.scss | 18 +++++-- src/styles/Style.js | 25 ---------- 17 files changed, 148 insertions(+), 122 deletions(-) delete mode 100644 src/styles/Style.js diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index eff0d7a..27bd5ad 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -3,12 +3,9 @@ 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", @@ -65,19 +62,23 @@ export default function Navbar() { setOpen(false)} open={open} > - + { navOptions.map(each => { let idx = navOptions.indexOf(each); return ( setSelected(idx)}> diff --git a/src/pages/AboutMe.jsx b/src/pages/AboutMe.jsx index 14f285c..bacc226 100644 --- a/src/pages/AboutMe.jsx +++ b/src/pages/AboutMe.jsx @@ -1,13 +1,9 @@ -import { DocumentStyle } from '../styles/Style'; -import '../sass/pages/AboutMe.scss'; - import Card from '@mui/material/Card'; - -const { htmlTheme } = DocumentStyle; +import '../sass/pages/AboutMe.scss'; export default function AboutMe() { return ( -
+

What I Do

diff --git a/src/pages/CreativeWorks.jsx b/src/pages/CreativeWorks.jsx index 0d9f968..76d9b71 100644 --- a/src/pages/CreativeWorks.jsx +++ b/src/pages/CreativeWorks.jsx @@ -1,57 +1,53 @@ import "../sass/pages/CreativeWorks.scss"; -import { DocumentStyle } from "../styles/Style"; import { Card } from "@mui/material"; import modulars from "../media/modulars.jpeg"; import score from "../media/paper_score.jpeg"; import guitar from "../media/with_guitar.png"; - import bandcamp from "../media/bandcamp-button-circle-line-black-128.png"; import soundcloud from "../media/soundcloud-icon.png"; export default function CreativeWorks() { return ( -
-
-

Creative works

+
+

Creative works

-
- Original handwritten music notation - Patch on a modular synthesizer -
- -
-

I would be remiss not to take the opportunity to speak about how I feel my experience as a musician informs my work as a developer!

-

Working as a musician helped me to develop invaluable skills that provide me with a unique frame of reference in regards to my approach to technical problems.

-

See below some of the relevant applications of my musical experience:

-
- -
-

Modular synthesis, which heavily involves fundamentals of arithmetic and data flow

-

Orchestration; ensuring all instrumental parts are executable and comfortable to play within a given set of parameters

-

Learning to play new instruments, and adapt my pre-existing knowledge to apply to new frames of reference

-

Audio engineering, and the associated practices of learning/using music technology

-

Proper interaction of components within a complex system

-

Managing proportional integrity in musical forms

-
- -
- Mikayla playing the guitar -
-

If you're interested, you can find some samples of my music at the links below:

-
- - SoundCloud logo - My SoundCloud - - - Bandcamp logo - My Bandcamp - -
-
-
+
+ Original handwritten music notation + Patch on a modular synthesizer
+ +
+

I would be remiss not to take the opportunity to speak about how I feel my experience as a musician informs my work as a developer!

+

Working as a musician helped me to develop invaluable skills that provide me with a unique frame of reference in regards to my approach to technical problems.

+

See below some of the relevant applications of my musical experience:

+
+ +
+

Modular synthesis, which heavily involves fundamentals of arithmetic and data flow

+

Orchestration; ensuring all instrumental parts are executable and comfortable to play within a given set of parameters

+

Learning to play new instruments, and adapt my pre-existing knowledge to apply to new frames of reference

+

Audio engineering, and the associated practices of learning/using music technology

+

Proper interaction of components within a complex system

+

Managing proportional integrity in musical forms

+
+ +
+ Mikayla playing the guitar +
+

If you're interested, you can find some samples of my music at the links below:

+
+ + SoundCloud logo + My SoundCloud + + + Bandcamp logo + My Bandcamp + +
+
+
) } \ No newline at end of file diff --git a/src/pages/Links.jsx b/src/pages/Links.jsx index 51dd3a2..4093a90 100644 --- a/src/pages/Links.jsx +++ b/src/pages/Links.jsx @@ -1,21 +1,16 @@ -import { DocumentStyle } from '../styles/Style'; -import Card from '@mui/material/Card'; import "../sass/pages/Links.scss"; - +import Card from '@mui/material/Card'; import github from "../media/GitHub-Mark-120px-plus.png"; import linkedin from "../media/LI-In-Bug.png"; -const { htmlTheme } = DocumentStyle; - export default function Links() { return ( -
+

Connect with me and get a closer look at my work!

GitHub logo - {/* An image here for a Github logo? */} My Github diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx index f938e7e..9c0356c 100644 --- a/src/pages/Projects.jsx +++ b/src/pages/Projects.jsx @@ -1,11 +1,8 @@ import { useState, useEffect, useRef } from 'react'; -import { DocumentStyle } from '../styles/Style'; import { projectsArray } from '../components/ProjectsArray'; import { Divider } from '@mui/material'; import '../sass/pages/Projects.scss'; -const { htmlTheme } = DocumentStyle; - const defaultFilter = { language: '', searchTerm: '', @@ -87,7 +84,7 @@ export default function Projects() { } return ( -
+

Check out these projects from my portfolio!

diff --git a/src/pages/Technologies.jsx b/src/pages/Technologies.jsx index 9b2e853..766fd35 100644 --- a/src/pages/Technologies.jsx +++ b/src/pages/Technologies.jsx @@ -1,24 +1,23 @@ 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'; -const { htmlTheme } = DocumentStyle; - export default function Technologies() { return ( -
+

These are some of my most frequently used skills and technologies:

- {techList.map(item => { - return ( - - ); - })} +
+ {techList.map(item => { + return ( + + ); + })} +
) } \ No newline at end of file diff --git a/src/pages/Welcome.jsx b/src/pages/Welcome.jsx index 3c66676..5ecfc67 100644 --- a/src/pages/Welcome.jsx +++ b/src/pages/Welcome.jsx @@ -4,7 +4,7 @@ import '../sass/pages/Welcome.scss'; export default function Welcome() { return ( -
+

Hi, my name is Mikayla! I'm a junior-level full stack web developer.

diff --git a/src/sass/App.scss b/src/sass/App.scss index e2c76e7..64f4b6b 100644 --- a/src/sass/App.scss +++ b/src/sass/App.scss @@ -2,12 +2,21 @@ @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'); @import "helper/queries"; +@import "helper/variables"; .App { main { text-align: center; position: relative; top: 4.5rem; + .page { + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + width: 100vw; + background-color: $indigoWhite; + } } @extend %tablet-queries; diff --git a/src/sass/Navbar.scss b/src/sass/Navbar.scss index 0025ea6..4fa4f9b 100644 --- a/src/sass/Navbar.scss +++ b/src/sass/Navbar.scss @@ -19,9 +19,6 @@ position: absolute; right: 0; height: 100%; - &:hover { - background-color: purple; - } } .navbar-left { @@ -63,4 +60,18 @@ position: relative; padding-left: 1rem; } + + // styles for open sidebar + .drawer { + .MuiButtonBase-root { + background-color: red; + } + .drawer-list { + height: 100vh; + background-color: red; + } + .drawer-list-item { + background-color: orange; + } + } } \ No newline at end of file diff --git a/src/sass/components/_Button.scss b/src/sass/components/_Button.scss index 8ba93a0..a748cec 100644 --- a/src/sass/components/_Button.scss +++ b/src/sass/components/_Button.scss @@ -2,14 +2,15 @@ %button-style { border-radius: 12px; - border: 1px solid white; - background-color: $purple100; - color: darkslateblue; - padding: 8px; + border: transparent; + background-color: inherit; + color: $indigoOne; + padding: 10px 1rem; &:hover { - background-color: $purple200; + background-color: $lightIndigo; + color: $indigoOne; } &:active { - background-color: $purple100; + background-color: $indigoWhite; } } \ No newline at end of file diff --git a/src/sass/helper/_mixins.scss b/src/sass/helper/_mixins.scss index 23cbcfb..bef78ed 100644 --- a/src/sass/helper/_mixins.scss +++ b/src/sass/helper/_mixins.scss @@ -1,3 +1,11 @@ @mixin staggered-entry($interval) { animation: 0.5s fade-in #{$interval}s linear forwards; +} + +@mixin step-entry($len) { + @for $i from 1 through $len { + &:nth-child(#{$i}) { + @include staggered-entry($i * 0.6 - 0.6); + } + } } \ No newline at end of file diff --git a/src/sass/helper/_variables.scss b/src/sass/helper/_variables.scss index 3794fec..84e3319 100644 --- a/src/sass/helper/_variables.scss +++ b/src/sass/helper/_variables.scss @@ -3,4 +3,12 @@ $purple100: #ffffff; $purple200: #ffffff; $indigoOne: #283593; -$indigoWhite: #e8eaf6; \ No newline at end of file +$indigoWhite: #e8eaf6; +$lightIndigo: #8191ec; + +$lilac: #e2e0fe; + +$davysGrey: #4C4C47; + +$darkGreen: #264935; +$mintGreen: #bef9ca; \ No newline at end of file diff --git a/src/sass/pages/CreativeWorks.scss b/src/sass/pages/CreativeWorks.scss index a2cd15a..c43587a 100644 --- a/src/sass/pages/CreativeWorks.scss +++ b/src/sass/pages/CreativeWorks.scss @@ -1,8 +1,6 @@ .creative-works-page { display: flex; flex-direction: column; - width: 95vw; - margin: 0 2.5vw; section { margin-bottom: 3rem; diff --git a/src/sass/pages/Links.scss b/src/sass/pages/Links.scss index de018ea..14c5c74 100644 --- a/src/sass/pages/Links.scss +++ b/src/sass/pages/Links.scss @@ -1,4 +1,7 @@ +@import "../helper/variables"; + .links-page { + background-color: $lilac; .links-container { display: flex; flex-flow: row wrap; diff --git a/src/sass/pages/Projects.scss b/src/sass/pages/Projects.scss index 8d2b19b..a2df657 100644 --- a/src/sass/pages/Projects.scss +++ b/src/sass/pages/Projects.scss @@ -1,4 +1,5 @@ @import "../components/Divider"; +@import "../helper/variables"; .projects-page { .divider { @@ -9,12 +10,16 @@ display: flex; position: static; flex-direction: column; - background-color: white; align-items: center; + + background-color: $darkGreen; + color: $indigoWhite; + padding: 1rem; - width: 40vw; - border-radius: 12px; margin-bottom: 2rem; + border-radius: 12px; + + width: 40vw; transition: align-items 1s ease, position 1s ease ; @@ -26,6 +31,10 @@ > * { margin: 1rem; } + input { + padding: 6px; + border-radius: 4px; + } } } @@ -39,15 +48,23 @@ display: flex; flex-direction: column; align-items: center; - background-color: lightblue; - width: 80%; + background-color: $indigoOne; + color: $indigoWhite; + width: 80vw; height: auto; margin-bottom: 2rem; + border-radius: 12px; .links { display: flex; width: 75%; align-items: baseline; justify-content: space-around; + a { + color: $indigoWhite; + &:hover { + color: lightblue; + } + } } a:last-child { margin-bottom: 1rem; diff --git a/src/sass/pages/Technologies.scss b/src/sass/pages/Technologies.scss index 4e587ea..5fea743 100644 --- a/src/sass/pages/Technologies.scss +++ b/src/sass/pages/Technologies.scss @@ -1,6 +1,6 @@ @import "../helper/variables"; @import "../helper/animations"; - +@import "../helper/mixins"; @import "../components/Button"; .technologies-page { @@ -8,12 +8,23 @@ font-size: 1.4rem; font-weight: bold; } + .main-topic { display: flex; flex-direction: column; align-items: center; - border-radius: 16px; + + opacity: 0; + transition: 0.5s transform ease; + + @include step-entry(4); + + background-color: $indigoOne; + color: $indigoWhite; + width: 50vw; + border-radius: 16px; + margin: 1rem 0; padding: 1rem; button { @@ -46,7 +57,8 @@ } .MuiChip-root { - margin: 5px 0 1rem; + margin: 5px 4px 1rem; + background-color: $indigoWhite; } } } \ No newline at end of file diff --git a/src/styles/Style.js b/src/styles/Style.js deleted file mode 100644 index 71afe66..0000000 --- a/src/styles/Style.js +++ /dev/null @@ -1,25 +0,0 @@ -import { indigo, pink, deepPurple, purple } from '@mui/material/colors'; - -export const DocumentStyle = { - htmlTheme: { - backgroundColor: 'white', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - minHeight: '100vh', - } -} - -export const SidebarStyle = { - background: { - backgroundColor: purple[300], - opacity: 0.7, - }, - list: { - height: '100vh', - backgroundColor: pink[100] - }, - listItem: { - backgroundColor: pink[200] - } -} \ No newline at end of file