about me styled
This commit is contained in:
Mikayla Dobson
217
src/App.scss
217
src/App.scss
@@ -6,120 +6,137 @@ $purple200: #ce93d8;
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: $purple200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid black;
|
||||
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;
|
||||
header {
|
||||
background-color: $purple200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid black;
|
||||
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;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.landing {
|
||||
padding-top: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 75vw;
|
||||
h3 {
|
||||
position: relative;
|
||||
top: 0.8rem;
|
||||
}
|
||||
}
|
||||
// .landing {
|
||||
// padding-top: 1.5rem;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// width: 75vw;
|
||||
// h3 {
|
||||
// position: relative;
|
||||
// top: 0.8rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
.tech-scrollbar {
|
||||
height: 5rem;
|
||||
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 {
|
||||
.technologies-page {
|
||||
.tech-scrollbar {
|
||||
height: 5rem;
|
||||
width: 60rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
left: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin: 0.3rem;
|
||||
padding: 1rem;
|
||||
background-color: $purple200;
|
||||
height: 5rem;
|
||||
width: 20rem;
|
||||
overflow-x: hidden;
|
||||
animation: 30s linear tech-scroll infinite;
|
||||
.tech-bar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
@keyframes hide-until-start {
|
||||
from {
|
||||
opacity: 0;
|
||||
.about-me-page {
|
||||
a {
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
transition: color 0.3s linear;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $purple200;
|
||||
transition: color 0.3s linear;
|
||||
}
|
||||
}
|
||||
99% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tech-scroll {
|
||||
from {
|
||||
left: -60rem;
|
||||
}
|
||||
100% {
|
||||
left: 60rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes from-right {
|
||||
from {
|
||||
left: 60rem;
|
||||
}
|
||||
100% {
|
||||
left: -60rem;
|
||||
.card-title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
@@ -1,37 +1,39 @@
|
||||
import '../App.scss';
|
||||
import { DocumentStyle, ProjectsPage } from '../styles/Style';
|
||||
import { DocumentStyle, AboutMePage } from '../styles/Style';
|
||||
|
||||
import Card from '@mui/material/Card';
|
||||
import Grid from '@mui/material/Grid';
|
||||
|
||||
const { htmlTheme } = DocumentStyle;
|
||||
const { headerCard, projectCards, cardDimensions } = ProjectsPage;
|
||||
const { headerCard, projectCards, cardDimensions, aboutGallery } = AboutMePage;
|
||||
|
||||
export default function AboutMe() {
|
||||
return (
|
||||
<div style={htmlTheme}>
|
||||
<Card sx={[headerCard, cardDimensions]}>What I Do:</Card>
|
||||
<div style={htmlTheme} className="about-me-page">
|
||||
<Card sx={[headerCard, cardDimensions]} className="card-title">What I Do:</Card>
|
||||
|
||||
<Card sx={[projectCards, cardDimensions]}>
|
||||
<h2>Create full stack web applications</h2>
|
||||
<p>I have experience building web applications with and without back-end integrations.</p>
|
||||
<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>
|
||||
<div style={aboutGallery}>
|
||||
<Card sx={[projectCards, cardDimensions]}>
|
||||
<h2 className="card-title">Create full stack web applications</h2>
|
||||
<p>I have experience building web applications with and without back-end integrations.</p>
|
||||
<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]}>
|
||||
<h2>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
|
||||
solving technical problems and adapting to dynamic environments.</p>
|
||||
<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>
|
||||
</Card>
|
||||
<Card sx={[projectCards, cardDimensions]}>
|
||||
<h2 className="card-title">Creative minded problem solver</h2>
|
||||
<p>My <a href="/creative-projects">rich creative background as a musician, composer, producer,
|
||||
and artistic collaborator</a> provide me with a unique frame of reference for
|
||||
solving technical problems and adapting to dynamic environments.</p>
|
||||
</Card>
|
||||
|
||||
<Card sx={[projectCards, cardDimensions]}>
|
||||
<h2>Database Operations and Management</h2>
|
||||
<p>My projects have featured both relational and non-relational databases, in particular PostgreSQL and MongoDB.</p>
|
||||
<p>I also have experience with various technologies for connecting these to front-end applications, including Prisma and Supabase.</p>
|
||||
</Card>
|
||||
|
||||
<a href="/">Go home</a>
|
||||
<Card sx={[projectCards, cardDimensions]}>
|
||||
<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>I also have experience with various technologies for connecting these to front-end applications,
|
||||
including Prisma and Supabase.</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -11,7 +11,7 @@ const { htmlTheme } = DocumentStyle;
|
||||
|
||||
export default function Technologies() {
|
||||
return (
|
||||
<div style={htmlTheme}>
|
||||
<div className="technologies-page" style={htmlTheme}>
|
||||
<Card sx={technologyCard}>
|
||||
<h1>What technologies do I use?</h1>
|
||||
</Card>
|
||||
|
||||
@@ -98,17 +98,37 @@ export const WelcomePage = {
|
||||
}
|
||||
}
|
||||
|
||||
export const ProjectsPage = {
|
||||
export const AboutMePage = {
|
||||
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: {
|
||||
backgroundColor: indigo[800],
|
||||
color: indigo[100],
|
||||
},
|
||||
cardDimensions: {
|
||||
color: indigo[50],
|
||||
width: '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',
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user