Initial working copy.

package.json

@@ -18,8 +18,7 @@
         "@babel/preset-react": "^7.16.0",
         "babel-loader": "^8.2.0",
         "babel-plugin-styled-components": "^2.0.0",
-        "css-loader": "^6.6.0",
-        "style-loader": "^3.3.0",
+        "url-loader": "^4.1.1",
         "html-webpack-plugin": "^5.5.0",
         "webpack-dev-server": "^4.7.0",
         "webpack": "^5.69.0",

src/index.html

@@ -5,11 +5,14 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
-    <link href="https://fonts.googleapis.com/css?family=Raleway" 
-            rel="stylesheet"/>
     <script defer src="bundle.js"></script>
     <style type="text/css">
         body {
+            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;
             background: #005e6f linear-gradient(223deg, #005e6f 20%, #001d7a);
             height: 100vh;
             width: 100vw;

src/js/components/About.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+/**
+ * A component that displays a name and biography.
+ *
+ * @author James Manes ([email protected])
+ */
+const About = () => {
+
+    const About = styled.div`
+        
+    `
+    const Link = styled.a`
+        color: white;
+    `
+    const Header = styled.h1`
+        margin: 0;
+    `
+
+    const Biography = styled.p`
+    `
+
+    const Paragraph = styled.p`
+        margin-bottom: 4px;
+        :last-child {
+            margin-top: 2px;
+        }
+    `
+
+    return(
+        <About>
+            <Header>James Manes</Header>
+            <div>
+                <Biography>
+                    Senior Software Engineer passionate about clean code and concise
+                    documentation.
+                </Biography>
+                <Paragraph>
+                🎓 Bachelor & Master of Science from <Link rel="noopener noreferrer" 
+                        href="https://ucmo.edu" target="_blank">UCM</Link>.
+                </Paragraph>
+                <Paragraph>
+                💼 Currently employed at <Link rel="noopener noreferrer" 
+                        href="https://www.cerner.com/" target="_blank">Cerner Corporation</Link>.
+                </Paragraph>
+            </div>
+        </About>
+    );
+}
+
+export default About;

src/js/components/App.jsx

@@ -1,16 +1,37 @@
 import React from 'react';
-import Container from './Container';
-import AboutPane from './AboutPane';
+import styled from 'styled-components';
+import About from './About';
 import Navigation from './Navigation';
-import BackgroundGrid from './BackgroundGrid';
+import Avatar from './Avatar';
 
+/**
+ * Main application component.
+ */
 const App = () => {
+    const Container = styled.div`
+        background-color: rgba(255, 255, 255, 0.1);
+        font-family: "Raleway", sans-serif;
+        border-radius: 14px;
+        font-size: 11pt;
+        width: 350px;
+        color: white;
+        padding: 20px;
+        margin: 20px;
+    `
+    const OuterContainer = styled.div`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    `
 
     return (
-        <Container>
-            <AboutPane/>
-            <Navigation/>
-        </Container>
+        <OuterContainer>
+            <Avatar/>
+            <Container>
+                <About/>
+                <Navigation/>
+            </Container>
+        </OuterContainer>
     )
 }
 

src/js/components/Avatar.jsx

@@ -0,0 +1,32 @@
+import styled, { keyframes} from 'styled-components';
+import Image from '../../img/photo.jpg';
+
+const rotate = keyframes`
+    to {
+        transform: rotate(360deg);
+    }
+`
+
+const Avatar = styled.div`
+    background-image: url(${Image});
+    background-size: 100%;
+    outline-offset: 10px;
+    border-radius: 100%;
+    margin-right: 20px;
+    width: 150px;
+    height: 150px;
+    position: relative;
+    :before {
+        animation: ${rotate} 60s linear infinite;
+        outline: 4px dotted rgba(255, 255, 255, 0.1);
+        postion: absolute;
+        display: block;
+        border-radius: 100%;
+        outline-offset: 10px;
+        width: 150px;
+        height: 150px;
+        content: '';
+    }
+`
+
+export default Avatar;

src/js/components/Button.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Button = ({ children, angle, href }) => {
+    const OuterButton = styled.a`
+        border-radius: 10px;
+        display: inline-block;
+        background: rgba(240, 0, 20, 0.4);
+        text-decoration: none;
+        text-align: center;
+        line-height: 30px;
+        min-width: 100px;
+        margin-left: 20px;
+        user-select: none;
+        color: white;
+        transform: rotate(${props => props.angle}deg);
+        transition: transform .2s;
+        :first-child {
+            margin-left: 0;
+        }
+        :hover {
+            text-decoration: underline;
+            transform: scale(1.2);
+            cursor: pointer;
+        }
+        :focus {
+            outline: 4px solid rgba(0, 0, 0, 0.3);
+        }
+    `
+    const InnerButton = styled.div`
+        border-radius: 5px;
+        background: rgba(0, 0, 0, 0.3);
+        margin: 6px;
+        transform: rotate(-${props => props.angle}deg);
+
+    `
+
+    return (
+        <OuterButton angle={angle} href={href} rel="noopener noreferrer" target="_blank">
+            <InnerButton angle={angle}>
+                {children}
+            </InnerButton>
+        </OuterButton>
+    )
+}
+
+export default Button;

src/js/components/Navigation.jsx

@@ -1,57 +1,31 @@
 import React from 'react';
-import styled, { keyframes} from 'styled-components';
+import styled from 'styled-components';
+import Button from './Button';
 
 /**
- * Represents the navigation bar.
+ * Navigation bar component.
  *
  * @author James Manes ([email protected])
  */
 const Navigation = () => {
 
     const randomAngle = () => {
-        return Math.floor((Math.random() * 3) + 1);
+        return Math.floor((Math.random() * 4) + 1);
     }
 
-    const angle1 = randomAngle();
-    const angle2 = randomAngle();
-
-    const Button = styled.a`
-        border-radius: 10px;
-        display: inline-block;
-        background: rgba(240, 0, 20, 0.4);
-        text-decoration: none;
-        text-align: center;
-        line-height: 30px;
-        min-width: 100px;
-        margin-right: 8px;
-        margin-left: 8px;
-        user-select: none;
-        color: white;
-        transform: rotate(${props => props.angle}deg);
-    `
-    const InnerButton = styled.div`
-        border-radius: 5px;
-        background: rgba(0, 0, 0, 0.3);
-        margin: 6px;
-        transform: rotate(-${props => props.angle}deg);
-
+    const ButtonContainer = styled.div`
+        margin-top: 20px
     `
 
     return(
-        <div id="navigation">
+        <ButtonContainer>
             <Button href="http://stackoverflow.com/story/jmanes" 
-                    rel="noopener noreferrer" target="_blank"
-                    className="navigation-item"
-                    angle={angle1}>
-                <InnerButton angle={angle1}>History</InnerButton>
-            </Button>
+                    angle={randomAngle()}>History</Button>
             <Button href="https://www.linkedin.com/in/jamesmanes" 
-                    rel="noopener noreferrer" target="_blank" 
-                    className="navigation-item"
-                    angle={angle2}>
-                <InnerButton angle={angle2}>LinkedIn</InnerButton>
-            </Button>
-        </div>
+                    angle={randomAngle()}>LinkedIn</Button>
+            <Button href="https://jmanes.blog" 
+                    angle={randomAngle()}>Blog</Button>
+        </ButtonContainer>
     );
 }