From 6bea534dabc0250763348c3bdc180d36701abf48 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Mon, 11 Jul 2022 10:00:15 -0500 Subject: [PATCH] style cleanup and consolidation --- src/pages/AboutMe.jsx | 14 ++--- src/pages/Projects.jsx | 6 +- src/pages/Welcome.jsx | 21 ++----- src/sass/components/_Divider.scss | 5 ++ src/sass/helper/_animations.scss | 14 +++++ src/sass/helper/_variables.scss | 9 ++- src/sass/pages/AboutMe.scss | 8 +++ src/sass/pages/Projects.scss | 96 ++++++++++++++++--------------- src/sass/pages/Welcome.scss | 85 ++++++++++++++++++--------- src/styles/Style.js | 84 +-------------------------- 10 files changed, 157 insertions(+), 185 deletions(-) create mode 100644 src/sass/components/_Divider.scss diff --git a/src/pages/AboutMe.jsx b/src/pages/AboutMe.jsx index 3be34fa..14f285c 100644 --- a/src/pages/AboutMe.jsx +++ b/src/pages/AboutMe.jsx @@ -1,34 +1,30 @@ -import { DocumentStyle, AboutMePage } from '../styles/Style'; -import { Link, useNavigate } from 'react-router-dom'; +import { DocumentStyle } from '../styles/Style'; import '../sass/pages/AboutMe.scss'; import Card from '@mui/material/Card'; const { htmlTheme } = DocumentStyle; -const { projectCards, cardDimensions } = AboutMePage; export default function AboutMe() { - const navigate = useNavigate(); - return (

What I Do

- +

Create full stack web applications

I have experience building web applications with and without back-end integrations.

I am comfortable conceptualizing and organizing complex structures, and as such, my projects tend to be natural in their structure and easy to maintain.

 - +

Web Design Consulting

I consult on small teams at Metazu Studio, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.

I have worked on projects focused on full stack web engineering, real time communications, and designing beautiful user experiences.

 - +

Creative minded problem solver

My background as a musician, composer, producer, and artistic @@ -37,7 +33,7 @@ export default function AboutMe() {

- +

Database Operations and Management

My projects have featured both relational and non-relational databases, in particular PostgreSQL and MongoDB. I also have experience with various methods of connecting these diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx index 73bfd0a..f938e7e 100644 --- a/src/pages/Projects.jsx +++ b/src/pages/Projects.jsx @@ -1,10 +1,10 @@ -import { useState, useEffect, useRef, useCallback } from 'react'; +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, dividerStyle } = DocumentStyle; +const { htmlTheme } = DocumentStyle; const defaultFilter = { language: '', @@ -102,7 +102,7 @@ export default function Projects() {

- +
{results} diff --git a/src/pages/Welcome.jsx b/src/pages/Welcome.jsx index 3eae078..3c66676 100644 --- a/src/pages/Welcome.jsx +++ b/src/pages/Welcome.jsx @@ -1,26 +1,17 @@ -import { Avatar, Button, Card, Divider } from '@mui/material'; +import { Avatar, Card, Divider } from '@mui/material'; import profile from '../media/profile.jpeg'; import '../sass/pages/Welcome.scss'; -// SX style object imports - -import { DocumentStyle, WelcomePage } from '../styles/Style'; - -const { pageTheme, welcomeFooter, mainHeaderCard } = WelcomePage; -const { dividerStyle } = DocumentStyle; - -// Web page logic - export default function Welcome() { return ( -
- +
+

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

Thanks for visiting! Feel free to peruse below:

 - +

@@ -28,9 +19,9 @@ export default function Welcome() {

- + -
diff --git a/src/sass/components/_Divider.scss b/src/sass/components/_Divider.scss new file mode 100644 index 0000000..2e42e49 --- /dev/null +++ b/src/sass/components/_Divider.scss @@ -0,0 +1,5 @@ +%divider { + width: 80%; + color: #000; + border-width: 2px; +} \ No newline at end of file diff --git a/src/sass/helper/_animations.scss b/src/sass/helper/_animations.scss index eeb68eb..0dcfdd0 100644 --- a/src/sass/helper/_animations.scss +++ b/src/sass/helper/_animations.scss @@ -1,3 +1,17 @@ +@keyframes sideToSide { + from { + transform: rotate(-1deg); + } + + 50% { + transform: rotate(1deg); + } + + to { + transform: rotate(-1deg); + } +} + @keyframes hide-until-start { from { opacity: 0; diff --git a/src/sass/helper/_variables.scss b/src/sass/helper/_variables.scss index bd0b32d..3794fec 100644 --- a/src/sass/helper/_variables.scss +++ b/src/sass/helper/_variables.scss @@ -1,3 +1,6 @@ -$pink50: #fce4ec; -$purple100: #e1bee7; -$purple200: #ce93d8; \ No newline at end of file +$pink50: #ffffff; +$purple100: #ffffff; +$purple200: #ffffff; + +$indigoOne: #283593; +$indigoWhite: #e8eaf6; \ No newline at end of file diff --git a/src/sass/pages/AboutMe.scss b/src/sass/pages/AboutMe.scss index 65df214..4cb1ac5 100644 --- a/src/sass/pages/AboutMe.scss +++ b/src/sass/pages/AboutMe.scss @@ -21,8 +21,16 @@ } .fade { + display: flex; + flex-direction: column; + background-color: $indigoOne; + color: $indigoWhite; + text-align: center; + width: 300px; height: 300px; + border-radius: 12px; + padding: 1rem; margin: 0.5rem; } diff --git a/src/sass/pages/Projects.scss b/src/sass/pages/Projects.scss index f24f0c0..8d2b19b 100644 --- a/src/sass/pages/Projects.scss +++ b/src/sass/pages/Projects.scss @@ -1,51 +1,57 @@ +@import "../components/Divider"; + .projects-page { - .filter-panel { + .divider { + @extend %divider; + } + + .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; - 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: center; - width: 80%; - > * { - margin: 1rem; - } - } - } - - .project-cards { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 2rem; - + justify-content: center; + width: 80%; > * { - 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; - } + margin: 1rem; } } + } + + .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/sass/pages/Welcome.scss b/src/sass/pages/Welcome.scss index cf330a6..c07722b 100644 --- a/src/sass/pages/Welcome.scss +++ b/src/sass/pages/Welcome.scss @@ -1,28 +1,59 @@ +@import "../helper/animations"; +@import "../components/Divider"; + .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; - } -} \ No newline at end of file + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + overflow-x: hidden; + + #header-card { + display: flex; + flex-direction: column; + align-items: center; + + width: 35vw; + height: 18rem; + + padding: 1rem; + margin: 2rem; + + font-size: 1.2rem; + border-radius: 12px; + background-color: lightgray; + + animation: sideToSide 10s infinite; + } + + #welcome-info { + margin: 2rem 0; + width: 75%; + font-size: 1rem; + font-weight: 500; + padding: 0.6rem; + animation: sideToSide 15s infinite; + } + + .divider { + @extend %divider; + } + + footer { + width: 80%; + display: block; + text-align: right; + } +} + +/* +display: 'flex', + margin: '2rem', + width: '35vw', + padding: '1rem', + flexDirection: 'column', + backgroundColor: pink[50], + alignItems: 'center', + fontSize: '1.2rem', + borderRadius: '12px' +*/ \ No newline at end of file diff --git a/src/styles/Style.js b/src/styles/Style.js index 07beec0..71afe66 100644 --- a/src/styles/Style.js +++ b/src/styles/Style.js @@ -2,16 +2,11 @@ import { indigo, pink, deepPurple, purple } from '@mui/material/colors'; export const DocumentStyle = { htmlTheme: { - backgroundColor: purple[100], + backgroundColor: 'white', display: 'flex', flexDirection: 'column', alignItems: 'center', minHeight: '100vh', - }, - dividerStyle: { - width: '80%', - color: '#000000', - borderWidth: '2px' } } @@ -27,81 +22,4 @@ export const SidebarStyle = { listItem: { backgroundColor: pink[200] } -} - -export const WelcomePage = { - pageTheme: { - display: 'flex', - backgroundColor: purple[100], - height: '100vh', - flexDirection: 'column', - alignItems: 'center', - overflowX: 'hidden' - }, - mainHeaderCard: { - display: 'flex', - margin: '2rem', - width: '35vw', - padding: '1rem', - flexDirection: 'column', - backgroundColor: pink[50], - alignItems: 'center', - fontSize: '1.2rem', - borderRadius: '12px' - }, - galleryTheme: { - display: 'flex', - flexDirection: 'column', - backgroundColor: indigo[800], - border: '1px solid purple', - width: '70vw', - height: '18rem', - padding: '3rem', - margin: '2rem', - }, - galleryRow: { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center' - }, - galleryPages: { - display: 'flex', - justifyContent: 'center', - }, - galleryPage: { - inactive: { - backgroundColor: deepPurple[50], - }, - active: { - backgroundColor: indigo[800] - } - }, - welcomeFooter: { - display: 'block', - textAlign: 'right' - } -} - -export const AboutMePage = { - headerCard: { - backgroundColor: purple[700], - color: indigo[50], - fontSize: '1.5rem', - alignItems: 'center', - justifyContent: 'center', - height: '12rem', - width: '12rem', - marginTop: '2rem', - marginBottom: '3rem', - }, - projectCards: { - backgroundColor: indigo[800], - color: indigo[50], - }, - cardDimensions: { - display: 'flex', - flexDirection: 'column', - borderRadius: '12px', - textAlign: 'center', - } } \ No newline at end of file