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

content for creative works

Browse Source
This commit is contained in:
Mikayla Dobson
2022-04-05 17:56:59 -05:00
parent 830c136262
commit 925396e6bc
7 changed files with 112 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@@ -1,10 +1,10 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Welcome from './pages/Welcome';
import Projects from './pages/Projects';
import AboutMe from './pages/AboutMe';
import Technologies from './pages/Technologies';
import Links from './pages/Links';
import CreativeWorks from './pages/CreativeWorks';
import InProgress from './pages/InProgress';
import Projects from './pages/Projects';
import './App.scss';
function App() {
@@ -12,7 +12,7 @@ function App() {
<div className="App">
<header className="app-navbar">
<h2 className="my-name">Mikayla Dobson</h2>
<a href="/" className="my-name">Mikayla Dobson</a>
<h2>Web Design Contractor</h2>
</header>
@@ -20,8 +20,8 @@ function App() {
<BrowserRouter>
<Routes>
<Route path='/' element={<Welcome />} />
<Route path='/about-me' element={<AboutMe />} />
<Route path='/projects' element={<Projects />} />
<Route path='/in-progress' element={<InProgress />} />
<Route path='/technologies' element={<Technologies />} />
<Route path='/links' element={<Links />} />
<Route path='/creative-works' element={<CreativeWorks />} />

16
src/App.scss
View File

@@ -11,13 +11,25 @@ $purple200: #ce93d8;
header {
background-color: $purple200;
display: flex;
align-items: flex-end;
align-items: center;
border-bottom: 1px solid black;
font-family: 'Open Sans', sans-serif;
.my-name {
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;

37
src/pages/AboutMe.js Normal file
View File

@@ -0,0 +1,37 @@
import '../App.scss';
import { DocumentStyle, ProjectsPage } from '../styles/Style';
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
const { htmlTheme } = DocumentStyle;
const { headerCard, projectCards, cardDimensions } = ProjectsPage;
export default function AboutMe() {
return (
<div style={htmlTheme}>
<Card sx={[headerCard, cardDimensions]}>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>
<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>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>
</div>
)
}

24
src/pages/CreativeWorks.js
View File

@@ -2,6 +2,30 @@ export default function CreativeWorks() {
return (
<>
<h1>Creative works</h1>
<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>
<ul>
<li>Modular synthesis, which heavily involves fundamentals of arithmetic and data flow</li>
<li>Orchestration; ensuring all instrumental parts are executable and comfortable to play within a given set of parameters</li>
<li>Learning to play new instruments, and adapt my pre-existing knowledge to apply to new frames of reference</li>
<li>Audio engineering, and the associated practices of learning/using music technology</li>
<li>Proper interaction of related components within a larger context</li>
<li>Conceptualizing long-form, well-designed structures</li>
<li>Managing proportional integrity in musical forms</li>
</ul>
<div className="soundcloud-tracks">
<iframe
title="Perception"
width="100%" height="300" scrolling="no"
frameBorder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/118763533&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">
</iframe>
<div><a href="https://soundcloud.com/mikaylamusic" title="mikayla claire" target="_blank" rel="noreferrer">mikayla claire</a> · <a href="https://soundcloud.com/mikaylamusic/perception" title="Perception" target="_blank" rel="noreferrer" style={{color: '#cccccc', textDecoration: 'none'}}>Perception</a></div>
</div>
<a href='/'>Home</a>
</>
)

25
src/pages/InProgress.js
View File

@@ -1,25 +0,0 @@
export default function InProgress() {
return (
<div className="In-Progress page">
<h1>Here are some of my current in-progress projects!</h1>
<div className="gallery">
<div className="card">
</div>
<div className="card">
</div>
<div className="card">
</div>
<div className="card">
</div>
<div className="card">
</div>
</div>
</div>
)
}

58
src/pages/Projects.js
View File

@@ -1,37 +1,39 @@
import '../App.scss';
import { DocumentStyle, ProjectsPage } from '../styles/Style';
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
const { htmlTheme } = DocumentStyle;
const { headerCard, projectCards, cardDimensions } = ProjectsPage;
export default function Projects() {
return (
<div style={htmlTheme}>
<Card sx={[headerCard, cardDimensions]}>What I Do:</Card>
<div className="In-Progress page">
<h1>Here are some of my current in-progress projects!</h1>
<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 className="gallery">
<div className="card">
<h1>Reddit, but it's all cats</h1>
<p>A read-only Reddit client -- this site fetches data from Reddit and curates a customizable feed.</p>
<p>Built using React/Redux</p>
</div>
<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>
<div className="card">
<h1>Musical Counterpoint Bot</h1>
<p>A web-based program with functionality to evaluate sample solutions of problems in species-based counterpoint, as detailed by Johann Fux in <em>Gradus ad Parnassum.</em></p>
<p>This project is intended to be used as a practical application of linked lists and other compound data structures in JavaScript.</p>
</div>
<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>
<div className="card">
<h1>(untitled) Online Guess-the-Word Game</h1>
<p>As part of a mentorship program hosted by Metazu Studio</p>
<p>Implemented using MongoDB, React, and Node/Express, using Material UI for front-end styling.</p>
</div>
<a href="/">Go home</a>
<div className="card">
<h1>Splinter</h1>
<p>A clone of a popular card-based resource gathering game</p>
<p>Local multiplayer, with plans to build out online multiplayer and solo vs. CPU</p>
</div>
<div className="card">
<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 on Github Pages.</p>
</div>
</div>
</div>
)
}

4
src/pages/Welcome.js
View File

@@ -44,9 +44,9 @@ export default function Welcome() {
const allButtonRefs = [buttonOne, buttonTwo, buttonThree, buttonFour, buttonFive];
const galleryButtons = [
<Button ref={buttonOne} variant="contained" href="/projects" sx={buttonStyle}>What kinds of things do I do?</Button>,
<Button ref={buttonOne} variant="contained" href="/about-me" sx={buttonStyle}>What kinds of things do I do?</Button>,
<Button ref={buttonTwo} variant="contained" href="/technologies" sx={buttonStyle}>What do I use to do it?</Button>,
<Button ref={buttonThree} variant="contained" href="/in-progress" sx={buttonStyle}>What projects am I working on now?</Button>,
<Button ref={buttonThree} variant="contained" href="/projects" sx={buttonStyle}>What projects am I working on now?</Button>,
<Button ref={buttonFour} variant="contained" href="/links" sx={buttonStyle}>Where can you find more about me and my work?</Button>,
<Button ref={buttonFive} variant="contained" href="/creative-works" sx={buttonStyle}>Where can I listen to some of your music?</Button>
];