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

about me styled

Browse Source
This commit is contained in:
Mikayla Dobson
2022-04-06 17:07:36 -05:00
parent 41a85cf39d
commit 60fdae3150
4 changed files with 168 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/App.scss
View File

@@ -6,120 +6,137 @@ $purple200: #ce93d8;
.App { .App {
text-align: center; text-align: center;
} header {
background-color: $purple200;
header { display: flex;
background-color: $purple200; align-items: center;
display: flex; border-bottom: 1px solid black;
align-items: center; font-family: 'Open Sans', sans-serif;
border-bottom: 1px solid black; a {
font-family: 'Open Sans', sans-serif;
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; 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;
} }
} }
h2 {
font-weight: 400;
position: relative;
padding-left: 1rem;
}
} }
.landing { // .landing {
padding-top: 1.5rem; // padding-top: 1.5rem;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
width: 75vw; // width: 75vw;
h3 { // h3 {
position: relative; // position: relative;
top: 0.8rem; // top: 0.8rem;
} // }
} // }
.tech-scrollbar { .technologies-page {
height: 5rem; .tech-scrollbar {
width: 60rem; height: 5rem;
display: flex; width: 60rem;
align-items: center;
justify-content: center;
position: relative;
left: 0;
overflow-x: hidden;
animation: 30s linear tech-scroll infinite;
.tech-bar-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
left: 0; left: 0;
font-size: 1.2rem; overflow-x: hidden;
font-weight: 700; animation: 30s linear tech-scroll infinite;
margin: 0.3rem; .tech-bar-item {
padding: 1rem; display: flex;
background-color: $purple200; align-items: center;
height: 5rem; justify-content: center;
width: 20rem; position: relative;
left: 0;
font-size: 1.2rem;
font-weight: 700;
margin: 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;
} }
} }
.backup-bar { .about-me-page {
bottom: 5rem; a {
animation: 30s linear 15s tech-scroll infinite, 15s hide-until-start; color: white;
} border-radius: 12px;
transition: color 0.3s linear;
.from-right { text-decoration: none;
animation: 30s linear from-right infinite; &:hover {
} color: $purple200;
.backup-from-right { transition: color 0.3s linear;
bottom: 5rem; }
animation: 30s linear 15s from-right infinite, 15s hide-until-start;
}
.variant-2 {
background-color: #62286d !important;
color: white !important;
}
@keyframes hide-until-start {
from {
opacity: 0;
} }
99% { .card-title {
opacity: 0; text-transform: uppercase;
}
100% {
opacity: 1;
}
}
@keyframes tech-scroll {
from {
left: -60rem;
}
100% {
left: 60rem;
}
}
@keyframes from-right {
from {
left: 60rem;
}
100% {
left: -60rem;
} }
} }

48
src/pages/AboutMe.js
View File

@@ -1,37 +1,39 @@
import '../App.scss'; import '../App.scss';
import { DocumentStyle, ProjectsPage } from '../styles/Style'; import { DocumentStyle, AboutMePage } from '../styles/Style';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
const { htmlTheme } = DocumentStyle; const { htmlTheme } = DocumentStyle;
const { headerCard, projectCards, cardDimensions } = ProjectsPage; const { headerCard, projectCards, cardDimensions, aboutGallery } = AboutMePage;
export default function AboutMe() { export default function AboutMe() {
return ( return (
<div style={htmlTheme}> <div style={htmlTheme} className="about-me-page">
<Card sx={[headerCard, cardDimensions]}>What I Do:</Card> <Card sx={[headerCard, cardDimensions]} className="card-title">What I Do:</Card>
<Card sx={[projectCards, cardDimensions]}> <div style={aboutGallery}>
<h2>Create full stack web applications</h2> <Card sx={[projectCards, cardDimensions]}>
<p>I have experience building web applications with and without back-end integrations.</p> <h2 className="card-title">Create full stack web applications</h2>
<p>I am comfortable conceptualizing and organizing complex structures, and as such, my projects tend to be natural in their structure and easy to maintain.</p> <p>I have experience building web applications with and without back-end integrations.</p>
</Card> <p>I am comfortable conceptualizing and organizing complex structures, and as such, my projects tend to be
natural in their structure and easy to maintain.</p>
</Card>
<Card sx={[projectCards, cardDimensions]}> <Card sx={[projectCards, cardDimensions]}>
<h2>Creative minded problem solver</h2> <h2 className="card-title">Creative minded problem solver</h2>
<p>My rich creative background as a musician, composer, producer, and artistic collaborator provide me with a unique frame of reference for <p>My <a href="/creative-projects">rich creative background as a musician, composer, producer,
solving technical problems and adapting to dynamic environments.</p> and artistic collaborator</a> provide me with a unique frame of reference for
<a href="/">See some of my creative works for examples of my aptitudes, as well as some thoughts on how they apply to work as a developer!</a> solving technical problems and adapting to dynamic environments.</p>
</Card> </Card>
<Card sx={[projectCards, cardDimensions]}> <Card sx={[projectCards, cardDimensions]}>
<h2>Database Operations and Management</h2> <h2 className="card-title">Database Operations and Management</h2>
<p>My projects have featured both relational and non-relational databases, in particular PostgreSQL and MongoDB.</p> <p>My projects have featured both relational and non-relational databases, in particular
<p>I also have experience with various technologies for connecting these to front-end applications, including Prisma and Supabase.</p> PostgreSQL and MongoDB.</p>
</Card> <p>I also have experience with various technologies for connecting these to front-end applications,
including Prisma and Supabase.</p>
<a href="/">Go home</a> </Card>
</div>
</div> </div>
) )
} }

2
src/pages/Technologies.js
View File

@@ -11,7 +11,7 @@ const { htmlTheme } = DocumentStyle;
export default function Technologies() { export default function Technologies() {
return ( return (
<div style={htmlTheme}> <div className="technologies-page" style={htmlTheme}>
<Card sx={technologyCard}> <Card sx={technologyCard}>
<h1>What technologies do I use?</h1> <h1>What technologies do I use?</h1>
</Card> </Card>

30
src/styles/Style.js
View File

@@ -98,17 +98,37 @@ export const WelcomePage = {
} }
} }
export const ProjectsPage = { export const AboutMePage = {
headerCard: { headerCard: {
backgroundColor: green['A700'] backgroundColor: purple[700],
color: indigo[50],
fontSize: '1.5rem',
alignItems: 'center',
justifyContent: 'center',
height: '12rem',
width: '12rem',
marginTop: '2rem',
marginBottom: '3rem',
}, },
projectCards: { projectCards: {
backgroundColor: indigo[800], backgroundColor: indigo[800],
color: indigo[100], color: indigo[50],
},
cardDimensions: {
width: '300px', width: '300px',
height: '300px', height: '300px',
padding: '2rem',
},
cardDimensions: {
display: 'flex',
flexDirection: 'column',
borderRadius: '12px',
textAlign: 'center',
},
aboutGallery: {
display: 'flex',
height: '70vh',
width: '80vw',
justifyContent: 'space-around',
margin: '2rem',
} }
} }