content for creative works

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

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;

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

src/pages/CreativeWorks.js

@@ -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>
         </>
     )

src/pages/InProgress.js

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

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 (
-        <div style={htmlTheme}>
+        <div className="In-Progress page">
-            <Card sx={[headerCard, cardDimensions]}>What I Do:</Card>
+            <h1>Here are some of my current in-progress projects!</h1>
 
-            <Card sx={[projectCards, cardDimensions]}>
+            <div className="gallery">
-                <h2>Create full stack web applications</h2>
+                <div className="card">
-                <p>I have experience building web applications with and without back-end integrations.</p>
+                    <h1>Reddit, but it's all cats</h1>
-                <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>
+                    <p>A read-only Reddit client -- this site fetches data from Reddit and curates a customizable feed.</p>
-            </Card>
+                    <p>Built using React/Redux</p>
+                </div>
 
-            <Card sx={[projectCards, cardDimensions]}>
+                <div className="card">
-                <h2>Creative minded problem solver</h2>
+                    <h1>Musical Counterpoint Bot</h1>
-                <p>My rich creative background as a musician, composer, producer, and artistic collaborator provide me with a unique frame of reference for
+                    <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>
-                    solving technical problems and adapting to dynamic environments.</p>
+                    <p>This project is intended to be used as a practical application of linked lists and other compound data structures in JavaScript.</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>
+                </div>
-            </Card>
 
-            <Card sx={[projectCards, cardDimensions]}>
+                <div className="card">
-                <h2>Database Operations and Management</h2>
+                    <h1>(untitled) Online Guess-the-Word Game</h1>
-                <p>My projects have featured both relational and non-relational databases, in particular PostgreSQL and MongoDB.</p>
+                    <p>As part of a mentorship program hosted by Metazu Studio</p>
-                <p>I also have experience with various technologies for connecting these to front-end applications, including Prisma and Supabase.</p>
+                    <p>Implemented using MongoDB, React, and Node/Express, using Material UI for front-end styling.</p>
-            </Card>
+                </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>
     )
 }

src/pages/Welcome.js

@@ -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>
     ];