innocuous-symmetry/mikayla-dobson-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles fully consolidated into sass

Browse Source
This commit is contained in:
Mikayla Dobson
2022-07-11 11:16:41 -05:00
parent 6bea534dab
commit 7d84a02895
17 changed files with 148 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Navbar.jsx
View File

@@ -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() {
</div>
<Drawer
className="drawer"
anchor="right"
onClose={() => setOpen(false)}
open={open}
>
<List sx={list} component="nav">
<List
component="nav"
sx={{height: '100vh', backgroundColor: '#e8eaf6'}}
>
{
navOptions.map(each => {
let idx = navOptions.indexOf(each);
return (
<ListItem button
sx={listItem}
className="drawer-list-item"
key={v4()}
selected={selected === idx}
onClick={() => setSelected(idx)}>

8
src/pages/AboutMe.jsx
View File

@@ -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 (
<div style={htmlTheme} className="about-me-page">
<div className="page about-me-page">
<h1 className="what-i-do-header">What I Do</h1>
<div className="about-gallery">

78
src/pages/CreativeWorks.jsx
View File

@@ -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 (
<div style={DocumentStyle.htmlTheme}>
<div className="creative-works-page">
<h1>Creative works</h1>
<div className="page creative-works-page">
<h1>Creative works</h1>
<div className="cw-gallery">
<img src={score} alt="Original handwritten music notation" />
<img src={modulars} alt="Patch on a modular synthesizer" />
</div>
<section className="cw-information">
<p>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!</p>
<p>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.</p>
<p>See below some of the relevant applications of my musical experience:</p>
</section>
<section className="cw-experiences">
<p><strong>Modular synthesis</strong>, which heavily involves fundamentals of <strong>arithmetic and data flow</strong></p>
<p><strong>Orchestration</strong>; ensuring all instrumental parts are executable and comfortable to play within a given set of parameters</p>
<p><strong>Learning to play new instruments,</strong> and adapt my pre-existing knowledge to apply to new frames of reference</p>
<p><strong>Audio engineering</strong>, and the associated practices of learning/using <strong>music technology</strong></p>
<p>Proper <strong>interaction of components</strong> within a complex system</p>
<p>Managing <strong>proportional integrity</strong> in musical forms</p>
</section>
<section className="cw-examples">
<img className="examples-left" src={guitar} alt="Mikayla playing the guitar" />
<div className="examples-right">
<h2>If you're interested, you can find some samples of my music at the links below:</h2>
<div className="sources">
<Card>
<img src={soundcloud} alt="SoundCloud logo" />
<a href="https://soundcloud.com/mikaylamusic">My SoundCloud</a>
</Card>
<Card>
<img src={bandcamp} alt="Bandcamp logo" />
<a href="https://mikaylaclaire.bandcamp.com/releases">My Bandcamp</a>
</Card>
</div>
</div>
</section>
<div className="cw-gallery">
<img src={score} alt="Original handwritten music notation" />
<img src={modulars} alt="Patch on a modular synthesizer" />
</div>
<section className="cw-information">
<p>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!</p>
<p>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.</p>
<p>See below some of the relevant applications of my musical experience:</p>
</section>
<section className="cw-experiences">
<p><strong>Modular synthesis</strong>, which heavily involves fundamentals of <strong>arithmetic and data flow</strong></p>
<p><strong>Orchestration</strong>; ensuring all instrumental parts are executable and comfortable to play within a given set of parameters</p>
<p><strong>Learning to play new instruments,</strong> and adapt my pre-existing knowledge to apply to new frames of reference</p>
<p><strong>Audio engineering</strong>, and the associated practices of learning/using <strong>music technology</strong></p>
<p>Proper <strong>interaction of components</strong> within a complex system</p>
<p>Managing <strong>proportional integrity</strong> in musical forms</p>
</section>
<section className="cw-examples">
<img className="examples-left" src={guitar} alt="Mikayla playing the guitar" />
<div className="examples-right">
<h2>If you're interested, you can find some samples of my music at the links below:</h2>
<div className="sources">
<Card>
<img src={soundcloud} alt="SoundCloud logo" />
<a href="https://soundcloud.com/mikaylamusic">My SoundCloud</a>
</Card>
<Card>
<img src={bandcamp} alt="Bandcamp logo" />
<a href="https://mikaylaclaire.bandcamp.com/releases">My Bandcamp</a>
</Card>
</div>
</div>
</section>
</div>
)
}

9
src/pages/Links.jsx
View File

@@ -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 (
<div style={htmlTheme} className="links-page">
<div className="page links-page">
<h1>Connect with me and get a closer look at my work!</h1>
<div className="links-container">
<Card>
<img src={github} alt="GitHub logo" />
{/* An image here for a Github logo? */}
<a href="https://github.com/innocuous-symmetry">My Github</a>
</Card>
<Card>

5
src/pages/Projects.jsx
View File

@@ -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 (
<div className="projects-page" style={htmlTheme}>
<div className="page projects-page">
<h1>Check out these projects from my portfolio!</h1>
<section className={`filter-panel`}>

25
src/pages/Technologies.jsx
View File

@@ -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 (
<div className="technologies-page" style={htmlTheme}>
<div className="page technologies-page">
<p className="tech-title">These are some of my most frequently used skills and technologies:</p>
{techList.map(item => {
return (
<MainTopic
key={v4()}
name={item.topic}
subtopics={item.subtopics}
/>
);
})}
<div className="topics">
{techList.map(item => {
return (
<MainTopic
key={v4()}
name={item.topic}
subtopics={item.subtopics}
/>
);
})}
</div>
</div>
)
}

2
src/pages/Welcome.jsx
View File

@@ -4,7 +4,7 @@ import '../sass/pages/Welcome.scss';
export default function Welcome() {
return (
<div className="welcome-page">
<div className="page welcome-page">
<Card id="header-card" elevation={5}>
<Avatar alt="Mikayla Dobson" src={profile} sx={{width: 110, height: 110}} />
<h3>Hi, my name is Mikayla! I'm a junior-level full stack web developer.</h3>

9
src/sass/App.scss
View File

@@ -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;

17
src/sass/Navbar.scss
View File

@@ -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;
}
}
}

13
src/sass/components/_Button.scss
View File

@@ -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;
}
}

8
src/sass/helper/_mixins.scss
View File

@@ -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);
}
}
}

10
src/sass/helper/_variables.scss
View File

@@ -3,4 +3,12 @@ $purple100: #ffffff;
$purple200: #ffffff;
$indigoOne: #283593;
$indigoWhite: #e8eaf6;
$indigoWhite: #e8eaf6;
$lightIndigo: #8191ec;
$lilac: #e2e0fe;
$davysGrey: #4C4C47;
$darkGreen: #264935;
$mintGreen: #bef9ca;

2
src/sass/pages/CreativeWorks.scss
View File

@@ -1,8 +1,6 @@
.creative-works-page {
display: flex;
flex-direction: column;
width: 95vw;
margin: 0 2.5vw;
section {
margin-bottom: 3rem;

3
src/sass/pages/Links.scss
View File

@@ -1,4 +1,7 @@
@import "../helper/variables";
.links-page {
background-color: $lilac;
.links-container {
display: flex;
flex-flow: row wrap;

27
src/sass/pages/Projects.scss
View File

@@ -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;

18
src/sass/pages/Technologies.scss
View File

@@ -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;
}
}
}

25
src/styles/Style.js
View File

@@ -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]
}
}