media

src/pages/AboutMe.jsx

@@ -20,13 +20,19 @@ export default function AboutMe() {
                 </Card>
 
                 <Card sx={[projectCards, cardDimensions]} className="fade two">
+                    <h2 className="card-title">Web Design Consulting</h2>
+                    <p>I consult on small teams at <a href="/">Metazu Studio</a>, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.</p>
+                    <p>I have worked on projects focused on full stack web engineering, real time communications, and designing beautiful user experiences.</p>
+                </Card>
+
+                <Card sx={[projectCards, cardDimensions]} className="fade three">
                     <h2 className="card-title">Creative minded problem solver</h2>
                     <p>My <a href="/creative-projects">rich creative background as a musician, composer, producer,
                         and artistic collaborator</a> provide me with a unique frame of reference for
                         solving technical problems and adapting to dynamic environments.</p>
                 </Card>
 
-                <Card sx={[projectCards, cardDimensions]} className="fade three">
+                <Card sx={[projectCards, cardDimensions]} className="fade four">
                     <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

src/pages/CreativeWorks.jsx

@@ -1,32 +1,43 @@
+import "../sass/pages/CreativeWorks.scss";
+import { DocumentStyle } from "../styles/Style";
+
+import modulars from "../media/modulars.jpeg";
+import score from "../media/paper_score.jpeg";
+import guitar from "../media/with_guitar.png";
+
 export default function CreativeWorks() {
     return (
-        <>
-        <h1>Creative works</h1>
+        <div style={DocumentStyle.htmlTheme}>
+            <div className="creative-works-page">
+                <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="cw-gallery">
+                    <img src={score} alt="Original handwritten music notation" />
+                    <img src={modulars} alt="Patch on a modular synthesizer" />
+                </div>
 
-        <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>
+                <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">
+                    <img src={guitar} alt="Mikayla playing the guitar" />
+                    <div className="examples-right">
+                        <h2>If you're interested, you can find some samples of my music at the links below:</h2>
+                    </div>
+                </section>
+            </div>
         </div>
-                
-        <a href='/'>Home</a>
-        </>
     )
 }

src/pages/Links.jsx

@@ -1,26 +1,27 @@
-import Card from '@mui/material/Card';
-
 import { DocumentStyle } from '../styles/Style';
+import Card from '@mui/material/Card';
+import "../sass/pages/Links.scss";
+
+import github from "../media/GitHub-Mark-120px-plus.png";
+import linkedin from "../media/LI-In-Bug.png";
 
 const { htmlTheme } = DocumentStyle;
 
 export default function Links() {
     return (
-        <div style={htmlTheme}>
+        <div style={htmlTheme} className="links-page">
             <h1>Find more about my work at the links below!</h1>
 
-            <div>
+            <div className="links-container">
                 <Card>
+                    <img src={github} alt="GitHub logo" />
                     {/* An image here for a Github logo? */}
                     <a href="https://github.com/innocuous-symmetry">My Github</a>
                 </Card>
                 <Card>
-                    {/* LinkedIn image? */}
+                    <img src={linkedin} alt="LinkedIn logo" />
                     <a href="https://www.linkedin.com/in/mikayla-dobson/">My LinkedIn Profile</a>
                 </Card>
-                <Card>
-                    <a href="https://codepen.io/innocuous-symmetry">My CodePen</a>
-                </Card>
             </div>
         </div>
     )

src/sass/App.scss

@@ -49,6 +49,14 @@
         width: 70vw;
       }
     }
+
+    .creative-works-page {
+      > * {
+        width: 100%;
+      }
+
+      
+    }
   }
   
   // mobile queries

src/sass/pages/AboutMe.scss

@@ -58,5 +58,8 @@
     &.three {
       @include staggered-entry(1.2);
     }
+    &.four {
+      @include staggered-entry(1.8);
+    }
   }
 }

src/sass/pages/CreativeWorks.scss

@@ -0,0 +1,58 @@
+.creative-works-page {
+    display: flex;
+    flex-direction: column;
+    width: 95vw;
+    margin: 0 2.5vw;
+
+    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;
+    }
+
+    .cw-experiences {
+        display: flex;
+        flex-flow: row wrap;
+        text-align: left;
+    }
+
+    .cw-examples {
+        display: flex;
+        img {
+            max-width: 35vw;
+        }
+    }
+}

src/sass/pages/Links.scss

@@ -0,0 +1,19 @@
+.links-page {
+    .links-container {
+        display: flex;
+        flex-flow: row wrap;
+        .MuiCard-root {
+            img {
+                width: 4rem;
+                height: auto;
+            }
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+            height: 8rem;
+            padding: 2rem;
+            margin: 1rem;
+        }
+    }
+}