Changed from using object deconstruction to React.Component for all components. Switched to yarn.

README.md

@@ -1,2 +1,4 @@
 # Personal Website
-This is my personal website built using React.js. Visit it and read a bit more about it [here](https://www.mitchelljfsimon.com).
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+This is my personal website built using React.js. Visit it and read a bit more about it [here](https://www.mitchelljfsimon.com/projects).

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-responsive-navbar": "^1.0.11",

src/Website.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Route, Switch } from 'react-router-dom'
 
 import Header from './components/Header'
@@ -8,7 +8,7 @@ import Projects from './screens/Projects'
 
 import './Website.css'
 
-class Website extends Component {
+class Website extends React.Component {
   render () {
     return (
       <div className='website'>

src/Website.test.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './App'
+import Website from './Website.js'
 
 it('renders without crashing', () => {
   const div = document.createElement('div')
-  ReactDOM.render(<App />, div)
+  ReactDOM.render(<Website />, div)
   ReactDOM.unmountComponentAtNode(div)
 })

src/components/ClearButton/index.js

@@ -1,8 +1,9 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import './index.css'
 
-class ClearButton extends PureComponent {
+class ClearButton extends React.PureComponent {
   render () {
     return (
       <a className='clear-button' href={this.props.href}>{this.props.children}</a>
@@ -10,4 +11,9 @@ class ClearButton extends PureComponent {
   }
 }
 
+ClearButton.propTypes = {
+  href: PropTypes.string,
+  children: PropTypes.string
+}
+
 export default ClearButton

src/components/Header/index.js

@@ -1,10 +1,10 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 
 import SmallText from '../SmallText'
 
 import './index.css'
 
-class Header extends PureComponent {
+class Header extends React.PureComponent {
   render () {
     return (
       <div className='header-container'>

src/components/Navbar/index.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ResponsiveMenu from 'react-responsive-navbar'
 import { NavLink } from 'react-router-dom'
 
 import './index.css'
 
-class Navbar extends Component {
+class Navbar extends React.Component {
   render () {
     return (
       <ResponsiveMenu

src/components/SmallText/index.js

@@ -1,13 +1,18 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
 import './index.css'
 
-class SmallText extends PureComponent {
+class SmallText extends React.PureComponent {
   render () {
     return (
-      <p className='small-text'>DevOps & Software Engineer, Hypremium.</p>
+      <p className='small-text'>{this.props.children}</p>
     )
   }
 }
 
+SmallText.propTypes = {
+  children: PropTypes.string
+}
+
 export default SmallText

src/screens/Home/index.js

@@ -1,9 +1,9 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 
 import './index.css'
 import profile from '../../images/profile.jpg'
 
-class Home extends PureComponent {
+class Home extends React.PureComponent {
   render () {
     return (
       <div className='home-container'>

src/screens/Projects/index.js

@@ -1,10 +1,10 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 
 import ClearButton from '../../components/ClearButton'
 
 import './index.css'
 
-class Projects extends PureComponent {
+class Projects extends React.PureComponent {
   render () {
     return (
       <div className='projects-container'>