diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 169056a..0000000 --- a/.gitignore +++ /dev/null @@ -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 diff --git a/previous/README.md b/previous/README.md deleted file mode 100644 index 39ddc34..0000000 --- a/previous/README.md +++ /dev/null @@ -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. \ No newline at end of file diff --git a/previous/index.html b/previous/index.html deleted file mode 100644 index bc48649..0000000 --- a/previous/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - Mikayla Dobson | Developer - - -
- - - diff --git a/previous/package.json b/previous/package.json deleted file mode 100644 index 78ad9b7..0000000 --- a/previous/package.json +++ /dev/null @@ -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" - } -} diff --git a/previous/src/App.jsx b/previous/src/App.jsx deleted file mode 100644 index 4ca9c12..0000000 --- a/previous/src/App.jsx +++ /dev/null @@ -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 ( -
- - -
- - } /> - } /> - } /> - } /> - } /> - } /> - -
- -
- ); -} - -export default App; diff --git a/previous/src/components/AboutMe/AboutSection.jsx b/previous/src/components/AboutMe/AboutSection.jsx deleted file mode 100644 index 4583a2a..0000000 --- a/previous/src/components/AboutMe/AboutSection.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useState } from "react" - -export function AboutSection({ data }) { - const [visible, setVisible] = useState(false); - - return ( -
-
-

{data.title}

- -
- { visible && data.jsx } -
- ) -} \ No newline at end of file diff --git a/previous/src/components/AboutMe/SectionData.jsx b/previous/src/components/AboutMe/SectionData.jsx deleted file mode 100644 index 83942d5..0000000 --- a/previous/src/components/AboutMe/SectionData.jsx +++ /dev/null @@ -1,126 +0,0 @@ -import { Card, Chip } from "@mui/material" -import { v4 } from 'uuid'; - -export const WhatIDo = { - title: "What I Do", - jsx: ( -
- -

Create full stack web applications

-

I have experience building web applications with and without back-end integrations.

-

I am comfortable conceptualizing and organizing complex structures, and as such, my projects tend to be - natural in their structure and easy to maintain.

- - - -

Collaborative software engineering

-

I have consulted on small teams with:

-
-

Dization, a Pittsburgh-based company developing an enterprise resource planning solution for small businesses

-

Metazu Studio, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.

-
- -

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.

- - - -

Creative minded problem solver

-

- 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. -

- - - -

Database Operations and Management

-

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.

- -
- ) -} - -export const Education = { - title: "Education", - jsx: ( -
- -

Bachelors of Arts, Music

-

Southern Methodist University, 2014 - 2017

-

Concentrations: Piano Performance, Music Composition, Music Theory

-

Minor: French Language and Culture

- - - -

Self Directed Study, Web Engineering

-

2021 - present

-

Codecademy Pro, Front End Engineer Career Path

-

Concentrations: React, Redux, Express, PostgreSQL

- -
- ) -} - -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: ( -
- -

Full Stack Engineer, intern

-

Dization, Inc | Pittsburgh, PA (remote)
Sept 2022 - present

-

Relevant Duties: contributing to the development of a full-stack enterprise resource planning application built using - the LAMP stack hosted on AWS.

-
- { DizationConcepts.map(each => )} -
- - -

Web Design Consultant

-

Metazu Studio | Nashville, TN
Mar 2022 - present

-

Relevant Duties: collaboration on the design and production of responsive web apps, using skills including:

-
- { MetazuConcepts.map(each => ) } -
- - - -

Singer-Songwriter, Composer

-

- Contract, Independent -
- 2010 - present -

-

- Multi-instrumentalist, singer-songwriter, and producer, well-versed in a number of musical idioms - and music technologies. -

-
- { MusicExperiences.map(each => ) } -
- - - -

Barista, Barista Trainer

-

Starbucks Coffee Co.
2017 - 2021

-

- Relevant Duties: collaboration, problem-solving, streamlined execution of a process, - attention to detail, adhering to standardized safety protocols, observing best practices, training new hires. -

- -
- ) -} \ No newline at end of file diff --git a/previous/src/components/Navbar.jsx b/previous/src/components/Navbar.jsx deleted file mode 100644 index dda4cbd..0000000 --- a/previous/src/components/Navbar.jsx +++ /dev/null @@ -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 ( -
-
- Mikayla Dobson -

Web Engineer

-
- -
- -
- - setOpen(false)} - open={open} - > - - - - { - navOptions.map(each => { - let idx = navOptions.indexOf(each); - return ( - setSelected(idx)}> - {each} - - ) - }) - } - - - -
- ) -} \ No newline at end of file diff --git a/previous/src/components/ProjectsArray.jsx b/previous/src/components/ProjectsArray.jsx deleted file mode 100644 index cd7caeb..0000000 --- a/previous/src/components/ProjectsArray.jsx +++ /dev/null @@ -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: ( - -

Express Spice Shop

-

A sample, fully-featured e-commerce platform

-

Built in React with TypeScript, Node/Express, and PostgreSQL

-

Payment processing supported through Stripe (in progress)

-

API documentation with Swagger

-

IN PROGRESS

- - ) - }, - { - name: "Procedural Drones", - languages: ["JavaScript", "HTML/CSS"], - inProgress: true, - deployed: true, - jsx: ( - -

Procedural Music Generation

-

An experimental space for building out procedural music generation using vanilla JavaScript

-

Uses Tone.js to interact with the Web Audio API

-

Features a plain HTML/CSS front end to interact with the program

-
- GitHub Repo - Deployed version -
- - ) - }, - { - name: "Reddit, but it's all cats", - languages: ["React", "Redux"], - inProgress: false, - deployed: true, - jsx: ( - -

Reddit, but it's all cats

-

A read-only Reddit client -- this site fetches data from Reddit and displays a curated feed.

-

This was built on Reddit's JSON API, using React/Redux and CSS.

-

And yes, it's all cats.

-
- GitHub Repo - Deployed version -
- - ) - }, - { - name: "Personal Timestamp Generator", - languages: ["Python", "SQLite"], - inProgress: false, - jsx: ( - -

Personal Timestamp Generator

-

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. -

-

Command-line interface built on Python with a SQLite Database.

- View the repo here! - - ) - }, - { - name: "Password Game", - languages: ["React", "MongoDB", "MERN", "React", "REST_API", "Socket.io", "Sass", "MaterialUI"], - inProgress: true, - jsx: ( - -

Password Game

-

As part of a mentorship program hosted by Metazu Studio

-

Implemented using MongoDB, React, and Node/Express, styled with Material UI/SCSS.

-

In progress, building in collaboration with others at Metazu Studio.

- - ) - }, - { - name: "Splendor Clone", - languages: ["React", "TypeScript"], - inProgress: true, - jsx: ( - -

Splendor -- a clone of the board game by Marc André

-

A clone of a popular card-based resource gathering game

-

Local multiplayer, with plans to build out online multiplayer and solo vs. CPU

-

In progress. Using React, Node/Express, and PostgreSQL.

- - ) - }, - { - name: "Recipin", - languages: ["React", "TypeScript", "PERN"], - inProgress: true, - jsx: ( - -

Recipin -- a home recipe management solution

-

Manage a collection of your own commonly-used recipes

-

Features a full user-auth workflow and enables the sharing of recipes between users

-

Allows the user to build shopping lists from collections of their recipes

-

Built using full end-to-end TypeScript for the React front end and the Express server

- - ) - }, - { - name: "Photosorting with VGG16", - languages: ["Python", "TensorFlow", "PostgreSQL"], - inProgress: true, - jsx: ( - -

Photosorting with VGG16

-

A tool written in Python for sorting photos based on the output of VGG16, the pre-trained image recognition model included with TensorFlow.

-

The user may also integrate the results of their photo sort into a PostgreSQL database.

-

The repository may be found here!

- - ) - }, - { - name: "About Mikayla", - languages: ["React", "Sass", "MaterialUI"], - inProgress: true, - jsx: ( - -

And, last but not least, the site you see here!

-

This site is built using React, Material UI, and SCSS, and is hosted with Netlify.

- View the site repo here! - - ) - } -] \ No newline at end of file diff --git a/previous/src/components/Technologies/MainTopic.jsx b/previous/src/components/Technologies/MainTopic.jsx deleted file mode 100644 index bc0ebb3..0000000 --- a/previous/src/components/Technologies/MainTopic.jsx +++ /dev/null @@ -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 ( - -

{name}

-
- { - collapsed || subtopics.map(inner => { - return ( - inner.subtopics ? - - : - ) - }) - } -
- - - ) -} \ No newline at end of file diff --git a/previous/src/components/Technologies/SubTopic.jsx b/previous/src/components/Technologies/SubTopic.jsx deleted file mode 100644 index f73df74..0000000 --- a/previous/src/components/Technologies/SubTopic.jsx +++ /dev/null @@ -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 => ); - } else { - return

In progress!

- } - }) - }, []); - - return ( - - {data.topic} -
- {contents} -
- - ) -} \ No newline at end of file diff --git a/previous/src/components/Technologies/techList.js b/previous/src/components/Technologies/techList.js deleted file mode 100644 index 4e430b6..0000000 --- a/previous/src/components/Technologies/techList.js +++ /dev/null @@ -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", - ] - } -] diff --git a/previous/src/favicon.svg b/previous/src/favicon.svg deleted file mode 100644 index de4aedd..0000000 --- a/previous/src/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/previous/src/index.scss b/previous/src/index.scss deleted file mode 100644 index ec2585e..0000000 --- a/previous/src/index.scss +++ /dev/null @@ -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; -} diff --git a/previous/src/main.jsx b/previous/src/main.jsx deleted file mode 100644 index a3171de..0000000 --- a/previous/src/main.jsx +++ /dev/null @@ -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( - - - -) diff --git a/previous/src/media/GitHub-Mark-120px-plus.png b/previous/src/media/GitHub-Mark-120px-plus.png deleted file mode 100644 index ea6ff54..0000000 Binary files a/previous/src/media/GitHub-Mark-120px-plus.png and /dev/null differ diff --git a/previous/src/media/LI-In-Bug.png b/previous/src/media/LI-In-Bug.png deleted file mode 100644 index 8bc2d53..0000000 Binary files a/previous/src/media/LI-In-Bug.png and /dev/null differ diff --git a/previous/src/media/bandcamp-button-circle-line-black-128.png b/previous/src/media/bandcamp-button-circle-line-black-128.png deleted file mode 100644 index 16d2022..0000000 Binary files a/previous/src/media/bandcamp-button-circle-line-black-128.png and /dev/null differ diff --git a/previous/src/media/modulars.jpeg b/previous/src/media/modulars.jpeg deleted file mode 100644 index 43b2bde..0000000 Binary files a/previous/src/media/modulars.jpeg and /dev/null differ diff --git a/previous/src/media/paper_score.jpeg b/previous/src/media/paper_score.jpeg deleted file mode 100644 index 246a43f..0000000 Binary files a/previous/src/media/paper_score.jpeg and /dev/null differ diff --git a/previous/src/media/profile.jpeg b/previous/src/media/profile.jpeg deleted file mode 100644 index bfe7d44..0000000 Binary files a/previous/src/media/profile.jpeg and /dev/null differ diff --git a/previous/src/media/soundcloud-icon.png b/previous/src/media/soundcloud-icon.png deleted file mode 100644 index 4871885..0000000 Binary files a/previous/src/media/soundcloud-icon.png and /dev/null differ diff --git a/previous/src/media/with_guitar.png b/previous/src/media/with_guitar.png deleted file mode 100644 index b91b61e..0000000 Binary files a/previous/src/media/with_guitar.png and /dev/null differ diff --git a/previous/src/pages/AboutMe.jsx b/previous/src/pages/AboutMe.jsx deleted file mode 100644 index 20225be..0000000 --- a/previous/src/pages/AboutMe.jsx +++ /dev/null @@ -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 ( -
- - - -
- ) -} \ No newline at end of file diff --git a/previous/src/pages/CreativeWorks.jsx b/previous/src/pages/CreativeWorks.jsx deleted file mode 100644 index f700708..0000000 --- a/previous/src/pages/CreativeWorks.jsx +++ /dev/null @@ -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 ( -
-

Creative works

- -
- Original handwritten music notation - Patch on a modular synthesizer -
- -
-

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!

-

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.

-

See below some of the relevant applications of my musical experience:

-
- -
-

Modular synthesis, which heavily involves fundamentals of arithmetic and data flow

-

Orchestration; ensuring all instrumental parts are executable and comfortable to play within a given set of parameters

-

Learning to play new instruments, and adapt my pre-existing knowledge to apply to new frames of reference

-

Audio engineering, and the associated practices of learning/using music technology

-

Proper interaction of components within a complex system

-

Managing proportional integrity in musical forms

-
- -
-

If you're interested, you can find some samples of my music at the links below:

-
- - SoundCloud logo - My SoundCloud - - - Bandcamp logo - My Bandcamp - -
-
-
- ) -} \ No newline at end of file diff --git a/previous/src/pages/Links.jsx b/previous/src/pages/Links.jsx deleted file mode 100644 index 701747d..0000000 --- a/previous/src/pages/Links.jsx +++ /dev/null @@ -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 ( -
-

Check out the links below to get a better look at my work!

- -
- - GitHub logo - Github - - - LinkedIn logo - LinkedIn Profile - -
-
- ) -} \ No newline at end of file diff --git a/previous/src/pages/Projects.jsx b/previous/src/pages/Projects.jsx deleted file mode 100644 index 9ffff91..0000000 --- a/previous/src/pages/Projects.jsx +++ /dev/null @@ -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( -

No results found for search "{search}"

- ) - } 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 ( -
-

Check out these projects from my portfolio!

-

A selection of my projects:

- -
-

Filter by:

-
- setSearch(e.target.value.toLowerCase())} - placeholder="Enter a search term"> - - -
-
- - - -
- {results} -
-
- ) -} \ No newline at end of file diff --git a/previous/src/pages/Technologies.jsx b/previous/src/pages/Technologies.jsx deleted file mode 100644 index 766fd35..0000000 --- a/previous/src/pages/Technologies.jsx +++ /dev/null @@ -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 ( -
-

These are some of my most frequently used skills and technologies:

-
- {techList.map(item => { - return ( - - ); - })} -
-
- ) -} \ No newline at end of file diff --git a/previous/src/pages/Welcome.jsx b/previous/src/pages/Welcome.jsx deleted file mode 100644 index 8087810..0000000 --- a/previous/src/pages/Welcome.jsx +++ /dev/null @@ -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 ( -
- - -

Hi, my name is Mikayla Dobson!

-

Thanks for taking the time to learn more about me!

- - - - - -

- 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. -

-

- Some of my most frequently used technologies include React, Redux, Node.js, - Express, TypeScript, Vite, PostgreSQL, MongoDB, and Sass, among others. -

- - - - - -
- ); -} \ No newline at end of file diff --git a/previous/src/sass/App.scss b/previous/src/sass/App.scss deleted file mode 100644 index 029122c..0000000 --- a/previous/src/sass/App.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/previous/src/sass/Navbar.scss b/previous/src/sass/Navbar.scss deleted file mode 100644 index d362438..0000000 --- a/previous/src/sass/Navbar.scss +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/previous/src/sass/components/_Button.scss b/previous/src/sass/components/_Button.scss deleted file mode 100644 index 3b484ed..0000000 --- a/previous/src/sass/components/_Button.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/previous/src/sass/components/_Divider.scss b/previous/src/sass/components/_Divider.scss deleted file mode 100644 index 2e42e49..0000000 --- a/previous/src/sass/components/_Divider.scss +++ /dev/null @@ -1,5 +0,0 @@ -%divider { - width: 80%; - color: #000; - border-width: 2px; -} \ No newline at end of file diff --git a/previous/src/sass/components/_FadeAll.scss b/previous/src/sass/components/_FadeAll.scss deleted file mode 100644 index afa0053..0000000 --- a/previous/src/sass/components/_FadeAll.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../helper/animations"; - -%fadeAll { - animation: 0.5s fade-in 0.6s linear forwards; -} \ No newline at end of file diff --git a/previous/src/sass/components/_Page.scss b/previous/src/sass/components/_Page.scss deleted file mode 100644 index deedc17..0000000 --- a/previous/src/sass/components/_Page.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/previous/src/sass/helper/_animations.scss b/previous/src/sass/helper/_animations.scss deleted file mode 100644 index cd9cff0..0000000 --- a/previous/src/sass/helper/_animations.scss +++ /dev/null @@ -1,8 +0,0 @@ -@keyframes fade-in { - from { - opacity: 0; - } - 100% { - opacity: 1; - } -} \ No newline at end of file diff --git a/previous/src/sass/helper/_mixins.scss b/previous/src/sass/helper/_mixins.scss deleted file mode 100644 index a82b7d7..0000000 --- a/previous/src/sass/helper/_mixins.scss +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/previous/src/sass/helper/_queries.scss b/previous/src/sass/helper/_queries.scss deleted file mode 100644 index 65bb31c..0000000 --- a/previous/src/sass/helper/_queries.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/previous/src/sass/helper/_variables.scss b/previous/src/sass/helper/_variables.scss deleted file mode 100644 index cd49bd6..0000000 --- a/previous/src/sass/helper/_variables.scss +++ /dev/null @@ -1,12 +0,0 @@ -$indigoOne: #301755; -$indigoWhite: #e8eaf6; -$lightIndigo: #8191ec; - -$lilac: #e2e0fe; -$lilacWhite: #eae4f4; -$darkLilac: #caa5dd; - -$darkBlueGreen: #1a6f6d; - -$darkGreen: #264935; -$mintGreen: #bef9ca; \ No newline at end of file diff --git a/previous/src/sass/pages/AboutMe.scss b/previous/src/sass/pages/AboutMe.scss deleted file mode 100644 index 79c762e..0000000 --- a/previous/src/sass/pages/AboutMe.scss +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/previous/src/sass/pages/CreativeWorks.scss b/previous/src/sass/pages/CreativeWorks.scss deleted file mode 100644 index 0063664..0000000 --- a/previous/src/sass/pages/CreativeWorks.scss +++ /dev/null @@ -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; - } - } - } - } -} \ No newline at end of file diff --git a/previous/src/sass/pages/Links.scss b/previous/src/sass/pages/Links.scss deleted file mode 100644 index 5a62837..0000000 --- a/previous/src/sass/pages/Links.scss +++ /dev/null @@ -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; - } - } - } -} \ No newline at end of file diff --git a/previous/src/sass/pages/Projects.scss b/previous/src/sass/pages/Projects.scss deleted file mode 100644 index b767aad..0000000 --- a/previous/src/sass/pages/Projects.scss +++ /dev/null @@ -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; - } - } - } -} \ No newline at end of file diff --git a/previous/src/sass/pages/Technologies.scss b/previous/src/sass/pages/Technologies.scss deleted file mode 100644 index c9c1989..0000000 --- a/previous/src/sass/pages/Technologies.scss +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/previous/src/sass/pages/Welcome.scss b/previous/src/sass/pages/Welcome.scss deleted file mode 100644 index 4f5adec..0000000 --- a/previous/src/sass/pages/Welcome.scss +++ /dev/null @@ -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; - } -} diff --git a/previous/vite.config.js b/previous/vite.config.js deleted file mode 100644 index b1b5f91..0000000 --- a/previous/vite.config.js +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react()] -})