diff --git a/src/App.js b/src/App.js index cfa8a10..6acd172 100644 --- a/src/App.js +++ b/src/App.js @@ -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() {
-

Mikayla Dobson

+ Mikayla Dobson

Web Design Contractor

@@ -20,8 +20,8 @@ function App() { } /> + } /> } /> - } /> } /> } /> } /> diff --git a/src/App.scss b/src/App.scss index 0f6e7af..0acee05 100644 --- a/src/App.scss +++ b/src/App.scss @@ -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; diff --git a/src/pages/AboutMe.js b/src/pages/AboutMe.js new file mode 100644 index 0000000..e8c1c47 --- /dev/null +++ b/src/pages/AboutMe.js @@ -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 ( +
+ What I Do: + + +

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.

+ + + +

Creative minded problem solver

+

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.

+ 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! + + + +

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 technologies for connecting these to front-end applications, including Prisma and Supabase.

+ + + Go home +
+ ) +} \ No newline at end of file diff --git a/src/pages/CreativeWorks.js b/src/pages/CreativeWorks.js index d9ed5e0..659878d 100644 --- a/src/pages/CreativeWorks.js +++ b/src/pages/CreativeWorks.js @@ -2,6 +2,30 @@ export default function CreativeWorks() { return ( <>

Creative works

+ +

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 related components within a larger context
    • +
  • Conceptualizing long-form, well-designed structures
    • +
  • Managing proportional integrity in musical forms
    • +
+ +
+ + +
+ Home ) diff --git a/src/pages/InProgress.js b/src/pages/InProgress.js deleted file mode 100644 index b360635..0000000 --- a/src/pages/InProgress.js +++ /dev/null @@ -1,25 +0,0 @@ -export default function InProgress() { - return ( -
-

Here are some of my current in-progress projects!

- -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- ) -} \ No newline at end of file diff --git a/src/pages/Projects.js b/src/pages/Projects.js index 1aba405..dde24a4 100644 --- a/src/pages/Projects.js +++ b/src/pages/Projects.js @@ -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 ( -
- What I Do: +
+

Here are some of my current in-progress projects!

- -

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.

- +
+
+

Reddit, but it's all cats

+

A read-only Reddit client -- this site fetches data from Reddit and curates a customizable feed.

+

Built using React/Redux

+
- -

Creative minded problem solver

-

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.

- 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! - +
+

Musical Counterpoint Bot

+

A web-based program with functionality to evaluate sample solutions of problems in species-based counterpoint, as detailed by Johann Fux in Gradus ad Parnassum.

+

This project is intended to be used as a practical application of linked lists and other compound data structures in JavaScript.

+
- -

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 technologies for connecting these to front-end applications, including Prisma and Supabase.

- - - Go home +
+

(untitled) Online Guess-the-Word Game

+

As part of a mentorship program hosted by Metazu Studio

+

Implemented using MongoDB, React, and Node/Express, using Material UI for front-end styling.

+
+ +
+

Splinter

+

A clone of a popular card-based resource gathering game

+

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

+
+ +
+

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

+

This site is built using React, Material UI, and SCSS, and is hosted on Github Pages.

+
+ +
) } \ No newline at end of file diff --git a/src/pages/Welcome.js b/src/pages/Welcome.js index b83af92..0fb253c 100644 --- a/src/pages/Welcome.js +++ b/src/pages/Welcome.js @@ -44,9 +44,9 @@ export default function Welcome() { const allButtonRefs = [buttonOne, buttonTwo, buttonThree, buttonFour, buttonFive]; const galleryButtons = [ - , + , , - , + , , ];