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

nuke

Browse Source
This commit is contained in:
Mikayla Dobson
2023-05-29 10:47:34 -05:00
parent 99834d0a0b
commit 9246a4164d
46 changed files with 0 additions and 1783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
.gitignore vendored
View File

@@ -1,26 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
package-lock.json
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
node_modules

5
previous/README.md
View File

@@ -1,5 +0,0 @@
# Mikayla Dobson, Web Developer, Software Engineer, Musician
Thanks for checking out my portfolio site! This repo has been migrated over from an [older version](https://github.com/innocuous-symmetry/about-mikayla) which is no longer being maintained. This version will stay up to date with my latest projects and experience!
Created using React, Sass, Material UI, and Vite. Hosted with Github pages.

16
previous/index.html
View File

@@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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>Mikayla Dobson | Developer</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

27
previous/package.json
View File

@@ -1,27 +0,0 @@
{
"name": "about-mikayla-0722",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.8.7",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"sass": "^1.53.0",
"uuid": "^8.3.2"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"vite": "^2.9.9"
}
}

33
previous/src/App.jsx
View File

@@ -1,33 +0,0 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Welcome from './pages/Welcome';
import AboutMe from './pages/AboutMe';
import Projects from './pages/Projects';
import Technologies from './pages/Technologies';
import Links from './pages/Links';
import CreativeWorks from './pages/CreativeWorks';
import Navbar from './components/Navbar';
import './sass/App.scss';
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<main>
<Routes>
<Route path='/' element={<Welcome />} />
<Route path='about-me' element={<AboutMe />} />
<Route path='projects' element={<Projects />} />
<Route path='technologies' element={<Technologies />} />
<Route path='links' element={<Links />} />
<Route path='creative-works' element={<CreativeWorks />} />
</Routes>
</main>
</BrowserRouter>
</div>
);
}
export default App;

15
previous/src/components/AboutMe/AboutSection.jsx
View File

@@ -1,15 +0,0 @@
import { useState } from "react"
export function AboutSection({ data }) {
const [visible, setVisible] = useState(false);
return (
<section className="about-me-section">
<div className="am-section-mini">
<h1>{data.title}</h1>
<button onClick={() => setVisible(!visible)}>{visible ? "Hide" : "Show"}</button>
</div>
{ visible && data.jsx }
</section>
)
}

126
previous/src/components/AboutMe/SectionData.jsx
View File

@@ -1,126 +0,0 @@
import { Card, Chip } from "@mui/material"
import { v4 } from 'uuid';
export const WhatIDo = {
title: "What I Do",
jsx: (
<div className="about-gallery">
<Card>
<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>
<h2 className="card-title">Collaborative software engineering</h2>
<p>I have consulted on small teams with:</p>
<div>
<p><a target="_blank" rel="noreferrer" href="https://dization.com">Dization</a>, a Pittsburgh-based company developing an enterprise resource planning solution for small businesses</p>
<p><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>
</div>
<p> My work on these projects deals with managing the complexities of full-stack web engineering, as well as delivering beautiful user experiences to end customers.</p>
</Card>
<Card>
<h2 className="card-title">Creative minded problem solver</h2>
<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>
<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. I also have experience with various methods of connecting these
to front-end applications.</p>
</Card>
</div>
)
}
export const Education = {
title: "Education",
jsx: (
<div className="about-gallery">
<Card>
<h2 className="card-title">Bachelors of Arts, Music</h2>
<h3>Southern Methodist University, 2014 - 2017</h3>
<p><strong>Concentrations:</strong> Piano Performance, Music Composition, Music Theory</p>
<p><strong>Minor:</strong> French Language and Culture</p>
</Card>
<Card>
<h2 className="card-title">Self Directed Study, Web Engineering</h2>
<h3>2021 - present</h3>
<p>Codecademy Pro, Front End Engineer Career Path</p>
<p><strong>Concentrations:</strong> React, Redux, Express, PostgreSQL</p>
</Card>
</div>
)
}
const MetazuConcepts = [
"UI/UX design", "Pair Programming", "REST APIs", "Database management", "Consulting with clients"
]
const DizationConcepts = [
"Enterprise Resource Planning", "AWS", "System Design", "UI/UX Design", "Database management"
]
const MusicExperiences = [
"Avant Chamber Ballet", "Dallas Symphony Orchestra", "Boston University", "National Public Radio"
]
export const Employment = {
title: "Employment",
jsx: (
<div className="about-gallery">
<Card>
<h2 className="card-title">Full Stack Engineer, intern</h2>
<h3>Dization, Inc | Pittsburgh, PA (remote) <br/>Sept 2022 - present</h3>
<p><strong>Relevant Duties:</strong> contributing to the development of a full-stack enterprise resource planning application built using
the LAMP stack hosted on AWS.</p>
<div className="chip-section">
{ DizationConcepts.map(each => <Chip key={v4()} label={each} /> )}
</div>
</Card>
<Card>
<h2 className="card-title">Web Design Consultant</h2>
<h3>Metazu Studio | Nashville, TN <br/>Mar 2022 - present</h3>
<p><strong>Relevant Duties:</strong> collaboration on the design and production of responsive web apps, using skills including:</p>
<div className="chip-section">
{ MetazuConcepts.map(each => <Chip key={v4()} label={each} /> ) }
</div>
</Card>
<Card>
<h2 className="card-title">Singer-Songwriter, Composer</h2>
<h3>
Contract, Independent
<br/>
2010 - present
</h3>
<p>
Multi-instrumentalist, singer-songwriter, and producer, well-versed in a number of musical idioms
and music technologies.
</p>
<div className="chip-section">
{ MusicExperiences.map(each => <Chip key={v4()} label={each} /> ) }
</div>
</Card>
<Card>
<h2 className="card-title">Barista, Barista Trainer</h2>
<h3>Starbucks Coffee Co.<br/>2017 - 2021</h3>
<p>
<strong>Relevant Duties:</strong> collaboration, problem-solving, streamlined execution of a process,
attention to detail, adhering to standardized safety protocols, observing best practices, training new hires.
</p>
</Card>
</div>
)
}

95
previous/src/components/Navbar.jsx
View File

@@ -1,95 +0,0 @@
import { Button, Drawer, List, ListItem } from "@mui/material"
import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom";
import MenuIcon from '@mui/icons-material/Menu';
import '../sass/Navbar.scss';
import { v4 } from "uuid";
const navOptions = [
"Home",
"About Me",
"My Projects",
"My Technologies",
"Links",
"Creative Work"
]
export default function Navbar() {
const [open, setOpen] = useState(false);
const [selected, setSelected] = useState(null);
const navigate = useNavigate();
useEffect(() => {
setOpen(false);
switch (selected) {
case 0:
navigate('/');
break;
case 1:
navigate('/about-me');
break;
case 2:
navigate('/projects');
break;
case 3:
navigate('/technologies');
break;
case 4:
navigate('/links');
break;
case 5:
navigate('/creative-works');
break;
default:
navigate('/');
break;
}
}, [selected, navigate]);
return (
<header className="app-navbar">
<div className="navbar-left">
<a href="/" className="my-name">Mikayla Dobson</a>
<h2 className="mobile-hide">Web Engineer</h2>
</div>
<div className="navbar-right">
<Button onClick={() => setOpen(!open)}>
<MenuIcon />
</Button>
</div>
<Drawer
className="drawer"
anchor="right"
onClose={() => setOpen(false)}
open={open}
>
<List
component="nav"
sx={{height: '100vh', backgroundColor: '#e8eaf6'}}
>
{
navOptions.map(each => {
let idx = navOptions.indexOf(each);
return (
<ListItem button
className="drawer-list-item"
key={v4()}
selected={selected === idx}
onClick={() => setSelected(idx)}>
{each}
</ListItem>
)
})
}
</List>
</Drawer>
</header>
)
}

136
previous/src/components/ProjectsArray.jsx
View File

@@ -1,136 +0,0 @@
import { Card } from "@mui/material";
import { v4 } from 'uuid';
export const projectsArray = [
{
name: "Express Spice Shop",
languages: ["TypeScript", "React", "PERN", "REST_API"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1><a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/e-commerce">Express Spice Shop</a></h1>
<p>A sample, fully-featured e-commerce platform</p>
<p>Built in React with TypeScript, Node/Express, and PostgreSQL</p>
<p>Payment processing supported through Stripe (in progress)</p>
<p>API documentation with Swagger</p>
<p>IN PROGRESS</p>
</Card>
)
},
{
name: "Procedural Drones",
languages: ["JavaScript", "HTML/CSS"],
inProgress: true,
deployed: true,
jsx: (
<Card key={v4()}>
<h1>Procedural Music Generation</h1>
<p>An experimental space for building out procedural music generation using vanilla JavaScript</p>
<p>Uses Tone.js to interact with the Web Audio API</p>
<p>Features a plain HTML/CSS front end to interact with the program</p>
<div className="links">
<a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/procedural-drones-01">GitHub Repo</a>
<a target="_blank" rel="noreferrer" href="https://innocuous-symmetry.github.io/procedural-drones-01/">Deployed version</a>
</div>
</Card>
)
},
{
name: "Reddit, but it's all cats",
languages: ["React", "Redux"],
inProgress: false,
deployed: true,
jsx: (
<Card key={v4()}>
<h1>Reddit, but it's all cats</h1>
<p>A read-only Reddit client -- this site fetches data from Reddit and displays a curated feed.</p>
<p>This was built on Reddit's JSON API, using React/Redux and CSS.</p>
<p>And yes, it's all cats.</p>
<div className="links">
<a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/cat-reddit">GitHub Repo</a>
<a target="_blank" rel="noreferrer" href="https://reddit-but-all-cats.netlify.app/">Deployed version</a>
</div>
</Card>
)
},
{
name: "Personal Timestamp Generator",
languages: ["Python", "SQLite"],
inProgress: false,
jsx: (
<Card key={v4()}>
<h1>Personal Timestamp Generator</h1>
<p>A small-scale timestamp/productivity management tool for individual use and logging of
time, including compartmentalization by task and some aggregate functions based on queries.
</p>
<p>Command-line interface built on Python with a SQLite Database.</p>
<a href="https://github.com/innocuous-symmetry/timestamp_project" target="_blank" rel="noreferrer">View the repo here!</a>
</Card>
)
},
{
name: "Password Game",
languages: ["React", "MongoDB", "MERN", "React", "REST_API", "Socket.io", "Sass", "MaterialUI"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1>Password Game</h1>
<p>As part of a mentorship program hosted by Metazu Studio</p>
<p>Implemented using MongoDB, React, and Node/Express, styled with Material UI/SCSS.</p>
<p>In progress, building in collaboration with others at Metazu Studio.</p>
</Card>
)
},
{
name: "Splendor Clone",
languages: ["React", "TypeScript"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1><a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/splendor-clone">Splendor</a> -- a clone of the board game by Marc André</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>
<p>In progress. Using React, Node/Express, and PostgreSQL.</p>
</Card>
)
},
{
name: "Recipin",
languages: ["React", "TypeScript", "PERN"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1><a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/recipe-manager">Recipin</a> -- a home recipe management solution</h1>
<p>Manage a collection of your own commonly-used recipes</p>
<p>Features a full user-auth workflow and enables the sharing of recipes between users</p>
<p>Allows the user to build shopping lists from collections of their recipes</p>
<p>Built using full end-to-end TypeScript for the React front end and the Express server</p>
</Card>
)
},
{
name: "Photosorting with VGG16",
languages: ["Python", "TensorFlow", "PostgreSQL"],
inProgress: true,
jsx: (
<Card key={v4()}>
<h1>Photosorting with VGG16</h1>
<p>A tool written in Python for sorting photos based on the output of VGG16, the pre-trained image recognition model included with TensorFlow.</p>
<p>The user may also integrate the results of their photo sort into a PostgreSQL database.</p>
<p>The repository may be found <a target="_blank" rel="noreferrer" href="https://github.com/innocuous-symmetry/vgg16-image-recognition">here!</a></p>
</Card>
)
},
{
name: "About Mikayla",
languages: ["React", "Sass", "MaterialUI"],
inProgress: true,
jsx: (
<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/MikaylaDobsonDev">View the site repo here!</a>
</Card>
)
}
]

26
previous/src/components/Technologies/MainTopic.jsx
View File

@@ -1,26 +0,0 @@
import { useState } from "react";
import { SubTopic } from "./SubTopic";
import { Card, Chip } from "@mui/material";
import { v4 } from "uuid";
export function MainTopic({ name, subtopics }) {
const [collapsed, setCollapsed] = useState(true);
return (
<Card className="main-topic" elevation={2}>
<h1>{name}</h1>
<div className="subtopic-container">
{
collapsed || subtopics.map(inner => {
return (
inner.subtopics ?
<SubTopic key={v4()} data={inner} />
: <Chip key={v4()} label={inner} />
)
})
}
</div>
<button onClick={() => setCollapsed(!collapsed)}>{collapsed ? "Show" : "Hide"}</button>
</Card>
)
}

26
previous/src/components/Technologies/SubTopic.jsx
View File

@@ -1,26 +0,0 @@
import { Card, Chip } from "@mui/material";
import { useEffect, useState } from "react";
import { v4 } from "uuid";
export function SubTopic({ data }) {
const [contents, setContents] = useState();
useEffect(() => {
setContents(() => {
if (data.subtopics.length) {
return data.subtopics.map(each => <Chip key={v4()} label={each} />);
} else {
return <p>In progress!</p>
}
})
}, []);
return (
<Card className="subtopic-card" elevation={5}>
<strong>{data.topic}</strong>
<div className="subtopics">
{contents}
</div>
</Card>
)
}

104
previous/src/components/Technologies/techList.js
View File

@@ -1,104 +0,0 @@
export const techList = [
{
topic: "Programming Languages",
subtopics: [
{
topic: "JavaScript",
subtopics: [
"TypeScript",
"React",
"Redux",
"jQuery",
"NodeJS",
"Express",
"ToneJS",
"Jest"
]
},
{
topic: "Python",
subtopics: [
"Pandas",
"Beautiful Soup",
"TensorFlow, Keras",
"Flutter with Flet"
]
},
{
topic: "Java",
subtopics: [
"Spring Boot",
"Swing"
]
},
{
topic: "PHP",
subtopics: []
}
]
},
{
topic: "Front End Engineering",
subtopics: [
{
topic: "React",
subtopics: [
"Redux",
"React / TypeScript",
"React Native",
"React Testing Library",
"React Router"
]
},
{
topic: "Styling",
subtopics: [
"CSS",
"Sass",
"Bootstrap",
"Material UI",
"Responsive Design",
]
}
]
},
{
topic: "Back End Engineering",
subtopics: [
{
topic: "SQL",
subtopics: [
"PostgreSQL",
"MySQL",
"Apache Web Server",
"MongoDB",
"Supabase"
]
},
{
topic: "REST API",
subtopics: [
"Express.js",
"Express-Session",
"PHP / Apache / MySQL",
"Java / Spring Boot",
"API Documentation with Swagger",
"MVC Architecture"
]
}
]
},
{
topic: "Developer Tools",
subtopics: [
"Git",
"GitHub",
"Visual Studio Code",
"Vite",
"Netlify",
"Heroku",
"Figma",
]
}
]

15
previous/src/favicon.svg
View File

@@ -1,15 +0,0 @@
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

13
previous/src/index.scss
View File

@@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

10
previous/src/main.jsx
View File

@@ -1,10 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.scss'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

BIN
previous/src/media/GitHub-Mark-120px-plus.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
previous/src/media/LI-In-Bug.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.2 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

BIN
previous/src/media/modulars.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 MiB

BIN
previous/src/media/paper_score.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 889 KiB

BIN
previous/src/media/profile.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 272 KiB

BIN
previous/src/media/soundcloud-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
previous/src/media/with_guitar.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB

14
previous/src/pages/AboutMe.jsx
View File

@@ -1,14 +0,0 @@
import Card from '@mui/material/Card';
import { AboutSection } from '../components/AboutMe/AboutSection';
import { WhatIDo, Education, Employment } from '../components/AboutMe/SectionData';
import '../sass/pages/AboutMe.scss';
export default function AboutMe() {
return (
<div className="page about-me-page">
<AboutSection data={WhatIDo} />
<AboutSection data={Education} />
<AboutSection data={Employment} />
</div>
)
}

49
previous/src/pages/CreativeWorks.jsx
View File

@@ -1,49 +0,0 @@
import "../sass/pages/CreativeWorks.scss";
import { Card } from "@mui/material";
import modulars from "../media/modulars.jpeg";
import score from "../media/paper_score.jpeg";
import bandcamp from "../media/bandcamp-button-circle-line-black-128.png";
import soundcloud from "../media/soundcloud-icon.png";
export default function CreativeWorks() {
return (
<div className="page creative-works-page">
<h1>Creative works</h1>
<div className="cw-gallery">
<img src={score} alt="Original handwritten music notation" />
<img src={modulars} alt="Patch on a modular synthesizer" />
</div>
<section className="cw-information">
<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>
</section>
<section className="cw-experiences">
<p><strong>Modular synthesis</strong>, which heavily involves fundamentals of <strong>arithmetic and data flow</strong></p>
<p><strong>Orchestration</strong>; ensuring all instrumental parts are executable and comfortable to play within a given set of parameters</p>
<p><strong>Learning to play new instruments,</strong> and adapt my pre-existing knowledge to apply to new frames of reference</p>
<p><strong>Audio engineering</strong>, and the associated practices of learning/using <strong>music technology</strong></p>
<p>Proper <strong>interaction of components</strong> within a complex system</p>
<p>Managing <strong>proportional integrity</strong> in musical forms</p>
</section>
<section className="cw-examples">
<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>
</section>
</div>
)
}

23
previous/src/pages/Links.jsx
View File

@@ -1,23 +0,0 @@
import "../sass/pages/Links.scss";
import Card from '@mui/material/Card';
import github from "../media/GitHub-Mark-120px-plus.png";
import linkedin from "../media/LI-In-Bug.png";
export default function Links() {
return (
<div className="page links-page">
<h1>Check out the links below to get a better look at my work!</h1>
<div className="links-container">
<Card>
<img src={github} alt="GitHub logo" />
<a href="https://github.com/innocuous-symmetry">Github</a>
</Card>
<Card>
<img src={linkedin} alt="LinkedIn logo" />
<a href="https://www.linkedin.com/in/mikayla-dobson/">LinkedIn Profile</a>
</Card>
</div>
</div>
)
}

113
previous/src/pages/Projects.jsx
View File

@@ -1,113 +0,0 @@
import { useState, useEffect, useRef } from 'react';
import { projectsArray } from '../components/ProjectsArray';
import { Divider } from '@mui/material';
import '../sass/pages/Projects.scss';
export default function Projects() {
const [results, setResults] = useState();
const [search, setSearch] = useState(null);
const [text, setText] = useState();
const searchInput = useRef();
useEffect(() => {
let result = new Set();
if (!search) {
setResults(projectsArray.map(card => card.jsx));
return;
}
if (search && text) {
for (let entry of text) {
for (let field of entry.text) {
if (field.toLowerCase().includes(search)) {
result.add(projectsArray[entry.projectID]);
}
}
}
}
if (search && result.size == 0) {
setResults(
<p>No results found for search "{search}"</p>
)
} else {
setResults(Array.from(result).map(card => card.jsx));
}
}, [search]);
useEffect(() => {
function unpack(element) {
if (typeof element == "string") return element;
if (typeof element.props.children != "string") {
if (Array.isArray(element.props.children)) {
let composite = "";
for (let each of element.props.children) {
composite += unpack(each);
}
return composite;
}
return unpack(element.props.children);
}
return element.props.children;
}
let projectText = [];
let i = 0;
while (i < projectsArray.length) {
let project = {
projectID: i,
text: []
}
let newText;
for (let each of projectsArray[i].jsx.props.children) {
newText = unpack(each);
project.text.push(newText);
}
projectText.push(project);
i++;
}
setText(projectText);
setResults(projectsArray.map(card => card.jsx));
}, [])
const handleReset = () => {
setSearch(null);
searchInput.current.value = null;
}
return (
<div className="page projects-page">
<h1 className="projects-section-header mobile-hide">Check out these projects from my portfolio!</h1>
<h1 className="projects-section-header mobile-show">A selection of my projects:</h1>
<section className="filter-panel">
<h2>Filter by:</h2>
<div className="filter-controls">
<input
ref={searchInput} type="text"
onChange={(e) => setSearch(e.target.value.toLowerCase())}
placeholder="Enter a search term">
</input>
<button onClick={handleReset}>Reset</button>
</div>
</section>
<Divider orientation="horizontal" className="divider" />
<div className="project-cards">
{results}
</div>
</div>
)
}

23
previous/src/pages/Technologies.jsx
View File

@@ -1,23 +0,0 @@
import '../sass/pages/Technologies.scss';
import { MainTopic } from '../components/Technologies/MainTopic';
import { techList } from '../components/Technologies/techList';
import { v4 } from 'uuid';
export default function Technologies() {
return (
<div className="page technologies-page">
<p className="tech-title">These are some of my most frequently used skills and technologies:</p>
<div className="topics">
{techList.map(item => {
return (
<MainTopic
key={v4()}
name={item.topic}
subtopics={item.subtopics}
/>
);
})}
</div>
</div>
)
}

35
previous/src/pages/Welcome.jsx
View File

@@ -1,35 +0,0 @@
import { Avatar, Card, Divider } from '@mui/material';
import profile from '../media/profile.jpeg';
import '../sass/pages/Welcome.scss';
export default function Welcome() {
return (
<div className="page welcome-page">
<Card id="header-card" elevation={5}>
<Avatar alt="Mikayla Dobson" src={profile} sx={{width: 110, height: 110}} />
<h3>Hi, my name is Mikayla Dobson!</h3>
<h4>Thanks for taking the time to learn more about me!</h4>
</Card>
<Divider orientation="horizontal" className="divider" />
<Card id="welcome-info">
<p>
I am a software engineer based in Nashville, Tennessee. I build performant
web applications, seek out simple solutions to complex problems, and emphasize
elegance of design.
</p>
<p>
Some of my most frequently used technologies include React, Redux, Node.js,
Express, TypeScript, Vite, PostgreSQL, MongoDB, and Sass, among others.
</p>
</Card>
<Divider orientation="horizontal" className="divider" />
<footer>
<p>&copy; Mikayla Dobson 2022</p>
</footer>
</div>
);
}

30
previous/src/sass/App.scss
View File

@@ -1,30 +0,0 @@
@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";
@import "helper/variables";
@import "components/Page";
.App {
.mobile-show {
display: none;
}
button {
border: transparent;
border-radius: 6px;
}
main {
text-align: center;
position: relative;
top: 4.5rem;
.page {
@extend %page;
}
}
@extend %tablet-queries;
@extend %mobile-queries;
}

83
previous/src/sass/Navbar.scss
View File

@@ -1,83 +0,0 @@
@import "helper/variables";
@import "components/Button";
.app-navbar {
display: flex;
position: fixed;
top: 0;
background-color: $darkGreen;
color: $indigoWhite;
font-family: 'Open Sans', sans-serif;
border-bottom: 1px solid black;
width: 100vw;
height: 4.5rem;
z-index: 9;
button {
@extend %button-style;
color: $indigoWhite;
border-color: transparent;
border-radius: 0;
position: absolute;
right: 0;
height: 100%;
&:hover {
background-color: $mintGreen;
}
}
.navbar-left {
display: flex;
flex-direction: row;
width: 75%;
justify-content: flex-start;
align-items: baseline;
}
.navbar-right {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-right: 1rem;
width: 25%;
}
// top right corner, Mikayla Dobson text
a {
transition: color 150ms ease;
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: $mintGreen;
transition: color 150ms ease;
}
}
h2 {
font-weight: 400;
position: relative;
padding-left: 1rem;
}
// styles for open sidebar
.drawer {
.MuiButtonBase-root {
background-color: red;
}
.drawer-list {
height: 100vh;
background-color: red;
}
.drawer-list-item {
background-color: orange;
}
}
}

15
previous/src/sass/components/_Button.scss
View File

@@ -1,15 +0,0 @@
@import "../helper/variables";
%button-style {
border: transparent;
background-color: inherit;
color: $indigoOne;
padding: 10px 1rem;
&:hover {
background-color: $lightIndigo;
color: $indigoOne;
}
&:active {
background-color: $indigoWhite;
}
}

5
previous/src/sass/components/_Divider.scss
View File

@@ -1,5 +0,0 @@
%divider {
width: 80%;
color: #000;
border-width: 2px;
}

5
previous/src/sass/components/_FadeAll.scss
View File

@@ -1,5 +0,0 @@
@import "../helper/animations";
%fadeAll {
animation: 0.5s fade-in 0.6s linear forwards;
}

11
previous/src/sass/components/_Page.scss
View File

@@ -1,11 +0,0 @@
@import "../helper/variables";
@import "../components/FadeAll";
%page {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
width: 100vw;
background-color: #fff;
}

8
previous/src/sass/helper/_animations.scss
View File

@@ -1,8 +0,0 @@
@keyframes fade-in {
from {
opacity: 0;
}
100% {
opacity: 1;
}
}

9
previous/src/sass/helper/_mixins.scss
View File

@@ -1,9 +0,0 @@
@import "../helper/animations";
@mixin step-entry($len) {
@for $i from 1 through $len {
&:nth-child(#{$i}) {
animation: 0.5s fade-in #{$i * 0.6 - 0.6}s linear forwards;
}
}
}

236
previous/src/sass/helper/_queries.scss
View File

@@ -1,236 +0,0 @@
@import "./mixins";
@import "./variables";
%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-me-section {
h1 {
font-size: 2.25rem;
}
button {
padding: 8px;
}
}
.about-gallery {
margin-top: 0;
width: 90vw;
height: 100%;
flex-flow: column nowrap;
align-items: center;
.MuiPaper-root {
width: 55%;
height: auto;
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-information, .cw-experiences {
width: 90%;
}
.cw-examples {
.examples-left {
width: 40vw;
}
.examples-right {
margin-right: 1rem;
h2 {
padding: 1rem;
}
width: 50vw;
}
}
}
}
}
%mobile-queries {
@media only screen and (max-width: 600px) {
// universal tags for handling mobile-sensitive elements
.mobile-hide {
display: none;
}
.app-navbar {
.navbar-left {
width: 80vw;
align-items: center;
.my-name {
border-right: none;
}
}
.navbar-right {
width: 20vw;
align-items: center;
button {
padding: 0;
height: auto;
}
}
a, h2 {
color: inherit;
font-weight: 600;
font-size: 1.25rem;
}
}
.welcome-page {
#header-card {
animation: none;
width: 75vw;
}
#welcome-info {
animation: none;
}
}
.about-me-page {
.about-me-section {
.am-section-mini {
background-color: $darkLilac;
position: sticky;
top: 4.5rem;
width: 88vw;
z-index: 8;
h1 {
font-size: 1.35rem;
}
button {
padding: 4px;
height: 1.5rem;
}
}
.about-gallery {
.MuiPaper-root {
width: 85%;
height: auto;
margin-bottom: 12px;
.card-title {
font-size: 1.2rem;
}
h3 {
font-size: 1rem;
}
}
}
}
}
.projects-page {
.mobile-show {
display: block;
font-size: 1.35rem;
}
.filter-panel {
position: sticky;
top: 5.5rem;
height: 4rem;
margin: 1.5rem;
h2 {
margin-top: 0;
font-size: 1.15rem;
}
.filter-controls input, button {
margin: 0 8px;
border-radius: 8px;
}
}
.project-cards {
margin-top: 1.5rem;
.MuiPaper-root {
padding: 8px;
h1 {
font-size: 1.5rem;
}
}
}
}
.technologies-page {
.tech-title {
width: 95vw;
}
.main-topic {
width: 85vw;
h1 {
font-size: 1.2rem;
}
button {
padding: 6px;
}
}
}
.links-page {
margin-top: 1rem;
a {
text-decoration: none;
}
h1 {
font-size: 1.35rem;
width: 85%;
margin-top: 1rem;
}
justify-content: flex-start;
height: 20rem;
}
.creative-works-page {
.cw-gallery {
flex-flow: column nowrap;
img {
max-width: 65%;
margin: 1rem 0;
}
}
.cw-information {
width: 95vw;
margin: 0;
text-align: left;
}
}
}
}

12
previous/src/sass/helper/_variables.scss
View File

@@ -1,12 +0,0 @@
$indigoOne: #301755;
$indigoWhite: #e8eaf6;
$lightIndigo: #8191ec;
$lilac: #e2e0fe;
$lilacWhite: #eae4f4;
$darkLilac: #caa5dd;
$darkBlueGreen: #1a6f6d;
$darkGreen: #264935;
$mintGreen: #bef9ca;

102
previous/src/sass/pages/AboutMe.scss
View File

@@ -1,102 +0,0 @@
@import "../helper/variables";
@import "../helper/mixins";
.about-me-page {
.about-me-section {
display: flex;
flex-flow: column nowrap;
align-items: center;
background-color: $darkLilac;
border: 1px solid $indigoOne;
border-radius: 12px;
margin: 1rem;
padding: 8px 2rem;
width: 75vw;
border: transparent;
opacity: 0;
transition: 0.5s transform ease;
@include step-entry(4);
.am-section-mini {
display: inline-flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-between;
width: 100%;
h1 {
font-size: 2.5rem;
}
> * {
margin: 8px;
}
button {
display: inline-flex;
align-items: center;
height: 2rem;
padding: 1rem;
}
}
.about-gallery {
display: flex;
flex-flow: row wrap;
height: auto;
width: 95%;
justify-content: space-around;
margin: 2rem;
.MuiCard-root {
.card-title {
text-transform: uppercase;
}
display: flex;
flex-direction: column;
background-color: $indigoOne;
color: $indigoWhite;
text-align: center;
align-items: center;
opacity: 0;
transition: 0.5s transform ease;
width: 40%;
height: 400px;
border-radius: 12px;
padding: 1rem;
margin: 0.5rem;
margin-bottom: 3rem;
overflow-y: scroll;
@include step-entry(4);
.MuiChip-root {
background-color: $indigoWhite;
max-width: 75%;
margin: 4px;
}
}
}
}
h1 {
color: $indigoOne;
font-weight: 800;
font-size: 4rem;
}
a {
color: white;
border-radius: 12px;
transition: color 0.3s linear;
&:hover {
color: white;
transition: color 0.3s linear;
}
}
}

88
previous/src/sass/pages/CreativeWorks.scss
View File

@@ -1,88 +0,0 @@
@import "../helper/variables";
.creative-works-page {
display: flex;
flex-direction: column;
section {
margin-bottom: 3rem;
p {
display: inline-block;
background-color: white;
margin: 4px 8px;
padding: 1rem;
border-radius: 12px;
list-style: none;
}
h2 {
font-size: 1.2rem;
}
}
.cw-gallery {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 30rem;
margin-bottom: 3rem;
img {
display: inline;
height: 90%;
width: auto;
object-fit: cover;
margin: 0 1rem;
}
}
.cw-information {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
text-align: right;
margin: 0 2rem 3rem 0;
p {
background-color: rgb(200, 219, 225);
}
}
.cw-experiences {
display: flex;
flex-flow: row wrap;
text-align: left;
p {
background-color: $indigoWhite;
}
}
.cw-examples {
display: flex;
min-width: 100%;
flex-flow: column nowrap;
align-items: center;
.sources {
display: inline-flex;
flex-flow: row nowrap;
justify-content: space-evenly;
width: 100%;
> * {
display: inline-flex;
flex-flow: column nowrap;
width: 35%;
height: 15rem;
align-items: center;
justify-content: space-evenly;
background-color: $indigoWhite;
margin-top: 1rem;
img {
width: 100px;
height: 100px;
margin-bottom: 1rem;
}
a {
color: $indigoOne;
}
}
}
}
}

53
previous/src/sass/pages/Links.scss
View File

@@ -1,53 +0,0 @@
@import "../helper/variables";
@import "../helper/mixins";
.links-page {
background-color: $lilac;
justify-content: center;
.links-container {
display: flex;
flex-flow: row wrap;
.MuiCard-root {
@include step-entry(2);
opacity: 0;
transition: 0.5s transform ease;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 8rem;
width: 20vw;
padding: 2rem;
margin: 1rem;
background-color: $lilacWhite;
a {
color: $indigoOne;
text-transform: uppercase;
text-underline-offset: 5px;
&:hover {
color: $darkGreen;
}
&:active {
color: $indigoOne;
}
&:visited {
color: inherit;
}
}
img {
width: 4rem;
height: auto;
}
}
}
}

72
previous/src/sass/pages/Projects.scss
View File

@@ -1,72 +0,0 @@
@import "../components/Divider";
@import "../helper/variables";
.projects-page {
.divider {
@extend %divider;
}
.filter-panel {
display: flex;
position: static;
flex-direction: column;
align-items: center;
background-color: $darkGreen;
color: $indigoWhite;
padding: 1rem;
margin-bottom: 2rem;
border-radius: 12px;
width: 40vw;
.filter-controls {
display: flex;
justify-content: center;
width: 80%;
> * {
margin: 1rem;
}
input {
padding: 6px;
border-radius: 4px;
}
}
}
.project-cards {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
a {
color: $indigoWhite;
&:hover {
color: lightblue;
}
}
> * {
display: flex;
flex-direction: column;
align-items: center;
background-color: $indigoOne;
color: $indigoWhite;
width: 80vw;
height: auto;
margin-bottom: 2rem;
border-radius: 12px;
.links {
display: flex;
width: 75%;
align-items: baseline;
justify-content: space-around;
}
a:last-child {
margin-bottom: 1rem;
}
}
}
}

65
previous/src/sass/pages/Technologies.scss
View File

@@ -1,65 +0,0 @@
@import "../helper/variables";
@import "../helper/animations";
@import "../helper/mixins";
@import "../components/Button";
.technologies-page {
.tech-title {
font-size: 1.4rem;
font-weight: bold;
}
.main-topic {
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transition: 0.5s transform ease;
@include step-entry(4);
background-color: $indigoOne;
color: $indigoWhite;
width: 50vw;
border-radius: 16px;
margin: 1rem 0;
padding: 1rem;
button {
@extend %button-style;
background-color: $indigoWhite;
}
}
.subtopic-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
.subtopic-card {
width: 75%;
margin: 1rem;
padding: 1rem;
.subtopics {
display: flex;
flex-flow: row wrap;
justify-content: center;
padding: 1rem;
& > * {
padding: 0.5rem;
margin: 0.5rem;
}
}
&:last-child {
margin-bottom: 2rem;
}
}
.MuiChip-root {
margin: 5px 4px 1rem;
background-color: $indigoWhite;
}
}
}

52
previous/src/sass/pages/Welcome.scss
View File

@@ -1,52 +0,0 @@
@import "../helper/animations";
@import "../helper/variables";
@import "../components/Divider";
.welcome-page {
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: $indigoOne;
color: $lilac;
// animation: sideToSide 10s infinite;
}
#welcome-info {
margin: 2rem 0;
width: 75%;
font-size: 1rem;
font-weight: 500;
padding: 0.6rem;
// animation: sideToSide 15s infinite;
background-color: $indigoOne;
color: $lilac;
}
.divider {
@extend %divider;
}
footer {
width: 80%;
display: block;
text-align: right;
}
}

7
previous/vite.config.js
View File

@@ -1,7 +0,0 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})