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

more detail on creative page, tablet query

Browse Source
This commit is contained in:
Mikayla Dobson
2022-07-11 09:38:57 -05:00
parent d6b75ada65
commit 982f20ea43
13 changed files with 158 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -1,10 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta charset="UTF-8" />
<meta name="author" content="Mikayla Dobson" />
<meta name="description" content="Mikayla Dobson's Web Engineering Portfolio Site" />
<meta name="keywords" content="HTML, CSS, SCSS, React, Front End Developer, Front End Engineer, Full Stack Developer, Web Developer, JavaScript, TypeScript" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>Mikayla Dobson | Developer</title>
</head>
<body>
<div id="root"></div>

4
src/components/ProjectsArray.jsx
View File

@@ -115,7 +115,7 @@ export const projectsArray = [
<Card key={v4()}>
<h1>Carenest</h1>
<p>Designed in collaboration with Faith Magras, Elvis Hernandez, and Daytreon Dean
as a submission for #HACKTN in March 2022.</p>
as a submission for #HACKTN with <a href="https://www.hackathonsinternational.com/">Hackathons International</a> in March 2022.</p>
<p>Produced using React. View the repo <a target="_blank" rel="noreferrer" href="https://github.com/Team-Carenest/carenest">here!</a></p>
</Card>
)
@@ -128,7 +128,7 @@ export const projectsArray = [
<Card key={v4()}>
<h1>And, last but not least, the site you see here!</h1>
<p>This site is built using React, Material UI, and SCSS, and is hosted with Netlify.</p>
<a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/about-mikayla">View the site repo here!</a>
<a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/MikaylaDobsonDev">View the site repo here!</a>
</Card>
)
}

BIN
src/media/bandcamp-button-circle-line-black-128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/media/soundcloud-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

13
src/pages/AboutMe.jsx
View File

@@ -1,4 +1,5 @@
import { DocumentStyle, AboutMePage } from '../styles/Style';
import { Link, useNavigate } from 'react-router-dom';
import '../sass/pages/AboutMe.scss';
import Card from '@mui/material/Card';
@@ -7,6 +8,8 @@ const { htmlTheme } = DocumentStyle;
const { projectCards, cardDimensions } = AboutMePage;
export default function AboutMe() {
const navigate = useNavigate();
return (
<div style={htmlTheme} className="about-me-page">
<h1 className="what-i-do-header">What I Do</h1>
@@ -21,15 +24,17 @@ export default function AboutMe() {
<Card sx={[projectCards, cardDimensions]} className="fade two">
<h2 className="card-title">Web Design Consulting</h2>
<p>I consult on small teams at <a href="/">Metazu Studio</a>, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.</p>
<p>I consult on small teams at <a target="_blank" rel="noreferrer" href="https://www.metazu.studio/">Metazu Studio</a>, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.</p>
<p>I have worked on projects focused on full stack web engineering, real time communications, and designing beautiful user experiences.</p>
</Card>
<Card sx={[projectCards, cardDimensions]} className="fade three">
<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>
<p>
My 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>
</Card>
<Card sx={[projectCards, cardDimensions]} className="fade four">

16
src/pages/CreativeWorks.jsx
View File

@@ -1,10 +1,14 @@
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}>
@@ -32,9 +36,19 @@ export default function CreativeWorks() {
</section>
<section className="cw-examples">
<img src={guitar} alt="Mikayla playing the guitar" />
<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>

2
src/pages/Links.jsx
View File

@@ -10,7 +10,7 @@ const { htmlTheme } = DocumentStyle;
export default function Links() {
return (
<div style={htmlTheme} className="links-page">
<h1>Find more about my work at the links below!</h1>
<h1>Connect with me and get a closer look at my work!</h1>
<div className="links-container">
<Card>

1
src/pages/Technologies.jsx
View File

@@ -9,6 +9,7 @@ const { htmlTheme } = DocumentStyle;
export default function Technologies() {
return (
<div className="technologies-page" style={htmlTheme}>
<p className="tech-title">These are some of my most frequently used skills and technologies:</p>
{techList.map(item => {
return (
<MainTopic

71
src/sass/App.scss
View File

@@ -1,78 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@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";
.App {
main {
text-align: center;
position: relative;
top: 4.5rem;
}
// tablet queries
@media only screen and (max-width: 1050px) {
.welcome-page {
#header-card {
padding: 0.7rem;
h3 {
font-size: 1.2rem;
}
h4 {
font-size: 1rem;
}
}
}
.about-me-page {
height: auto;
.about-gallery {
width: 90vw;
height: 100%;
flex-flow: column nowrap;
align-items: center;
.fade {
width: 400px;
height: 300px;
overflow-y: scroll;
}
}
}
.projects-page {
.filter-panel {
margin-bottom: 2rem;
width: 65%;
}
}
.technologies-page {
.main-topic {
width: 70vw;
}
}
.creative-works-page {
> * {
width: 100%;
}
}
}
// mobile queries
@media only screen and (max-width: 600px) {
.app-navbar {
background-color: orange;
.navbar-left {
width: 80vw;
}
.navbar-right {
width: 20vw;
}
a, h2 {
font-weight: 600;
font-size: 1.25rem;
}
}
}
@extend %tablet-queries;
@extend %mobile-queries;
}

88
src/sass/helper/_queries.scss Normal file
View File

@@ -0,0 +1,88 @@
// tablet queries
%tablet-queries {
@media only screen and (max-width: 1050px) {
.welcome-page {
#header-card {
padding: 0.7rem;
h3 {
font-size: 1.2rem;
}
h4 {
font-size: 1rem;
}
}
}
.about-me-page {
height: auto;
.about-gallery {
margin-top: 0;
width: 90vw;
height: 100%;
flex-flow: column nowrap;
align-items: center;
.fade {
width: 400px;
height: 300px;
overflow-y: scroll;
}
}
}
.projects-page {
.filter-panel {
margin-bottom: 2rem;
width: 65%;
}
}
.technologies-page {
.main-topic {
width: 70vw;
}
}
.creative-works-page {
> * {
width: 100%;
}
.cw-gallery img {
max-width: 45%;
}
.cw-examples {
.examples-left {
width: 40vw;
}
.examples-right {
margin-right: 1rem;
h2 {
padding: 1rem;
}
width: 50vw;
}
}
}
}
}
%mobile-queries {
// mobile queries
@media only screen and (max-width: 600px) {
.app-navbar {
background-color: orange;
.navbar-left {
width: 80vw;
}
.navbar-right {
width: 20vw;
}
a, h2 {
font-weight: 600;
font-size: 1.25rem;
}
}
}
}

1
src/sass/pages/AboutMe.scss
View File

@@ -11,7 +11,6 @@
color: white;
border-radius: 12px;
transition: color 0.3s linear;
text-decoration: none;
&:hover {
color: $purple200;
transition: color 0.3s linear;

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

@@ -41,6 +41,9 @@
justify-content: flex-end;
text-align: right;
margin: 0 2rem 3rem 0;
p {
background-color: rgb(200, 219, 225);
}
}
.cw-experiences {
@@ -51,8 +54,33 @@
.cw-examples {
display: flex;
img {
.examples-left {
max-width: 35vw;
}
.examples-right {
display: flex;
min-width: 65vw;
flex-flow: column nowrap;
align-items: center;
.sources {
display: inline-flex;
flex-flow: row nowrap;
justify-content: space-around;
width: 100%;
> * {
display: inline-flex;
flex-flow: column nowrap;
width: 40%;
height: 15rem;
align-items: center;
justify-content: center;
img {
width: 100px;
height: 100px;
margin-bottom: 1rem;
}
}
}
}
}
}

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

@@ -4,6 +4,10 @@
@import "../components/Button";
.technologies-page {
.tech-title {
font-size: 1.4rem;
font-weight: bold;
}
.main-topic {
display: flex;
flex-direction: column;