layout about section content

src/app.component.css

@@ -2,49 +2,3 @@
     position: relative;
     margin-top: 45px;
 }
-
-.fade-enter,
-.fade-exit {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-}
-.fade-enter {
-    opacity: 0;
-    z-index: 1;
-  }
-  .fade-enter.fade-enter-active {
-    opacity: 1;
-    transition: opacity 250ms ease-in;
-  }
-.fade-exit {
-    opacity: 1;
-    z-index: 1;
-}
-    .fade-exit.fade-exit-active {
-        opacity: 0;
-        transition: opacity 250ms ease-in;
-    }
-
-.flex {
-    display: flex;
-}
-.flex.justify-content-center {
-    justify-content: center;
-}
-.flex.align-items-center {
-    align-items: center;
-}
-.flex.flex-row {
-    flex-direction: row;
-}
-.flex.flex-column {
-    flex-direction: column;
-}
-
-.list-unstyled {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}

src/app.component.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import './styles.css';
 import './app.component.css';
 import * as FaviconService from './services/favicon.service.js';
 import { BackButtonComponent } from './components/back-button.component.js';

src/styles.css

@@ -0,0 +1,49 @@
+img {
+    width: 100%;
+}
+
+.fade-enter,
+.fade-exit {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+.fade-enter {
+    opacity: 0;
+    z-index: 1;
+  }
+  .fade-enter.fade-enter-active {
+    opacity: 1;
+    transition: opacity 250ms ease-in;
+  }
+.fade-exit {
+    opacity: 1;
+    z-index: 1;
+}
+    .fade-exit.fade-exit-active {
+        opacity: 0;
+        transition: opacity 250ms ease-in;
+    }
+
+.flex {
+    display: flex;
+}
+.flex.justify-content-center {
+    justify-content: center;
+}
+.flex.align-items-center {
+    align-items: center;
+}
+.flex.flex-row {
+    flex-direction: row;
+}
+.flex.flex-column {
+    flex-direction: column;
+}
+
+.list-unstyled {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}

src/views/about/about.component.js

@@ -1,16 +1,6 @@
 import React, { Component } from 'react';
 import './about.component.css';
-
-const aboutList = [
-    {
-        emoji: '🎸',
-        description: 'I play <a href="https://www.youtube.com/watch?v=eyLexd5MCCw&feature=youtu.be&t=14">bass</a>, <a href="https://www.youtube.com/watch?v=zOHUfhNQsoc&feature=youtu.be&t=1231">guitar</a> and <a href="http://jojogun.ca">sing</a>, a lot'
-    },
-    {
-        emoji: '💻',
-        description: 'I often experiment with <a href="https://www.webcomponents.org/introduction">custom web components</a> and using the browser as a platform for <a href="https://github.com/jorsi/reverie/tree/develop">experimenting</a>'
-    }
-];
+import guitar from '../../assets/guitar.jpg';
 
 export default class AboutComponent extends Component {
     render() {
@@ -22,20 +12,17 @@ export default class AboutComponent extends Component {
                     </div>
                     <div className="col-10">
 
-                        <p>I am a full-stack web developer committed to responsive and intuitive user experiences. At Bombardier Aerospace, I digitize current QA business processes into enterprise web applications. I continually learn and experiment with emerging web technologies and open-source platforms.</p>
+                        <p>I am a full-stack web developer with a focus on responsive and intuitive user experiences. My current work for Bombardier Aerospace involves digitizing business workflow processes into enterprise web applications.</p>
+
+                        <div className="about__programming">
+                            <p>I often experiment with <a href="https://www.webcomponents.org/introduction">custom web components</a>, and I have a deep interest in using the browser as a platform for <a href="https://github.com/jorsi/reverie/tree/develop">experimenting</a>.</p>
+                        </div>
+
+                        <div className="about__music">
+                            <p>When I'm not coding, you can find me <a href="https://www.youtube.com/watch?v=eyLexd5MCCw&feature=youtu.be&t=14">laying down a bassline</a>, <a href="https://www.youtube.com/watch?v=zOHUfhNQsoc&feature=youtu.be&t=1231">shredding the guitar</a> and <a href="http://jojogun.ca">belting a few songs</a>.</p>
+                            <img src={ guitar }></img>
+                        </div>
 
-                        <ul className="about-list">
-                            { aboutList.map((about, i) => {
-                                return (
-                                    <li key={i} className="about-item">
-                                        <div className="about-emoji">{ about.emoji }</div>
-                                        <div className="about-description">
-                                            <p dangerouslySetInnerHTML={{__html: about.description}}></p>
-                                        </div>
-                                    </li>
-                                );
-                            })}
-                        </ul>
                     </div>
                 </div>
             </div>