Update links

.eslintrc

@@ -14,6 +14,7 @@
     "jsx-a11y/no-static-element-interactions": false,
     "jsx-a11y/click-events-have-key-events": false,
     "react/forbid-prop-types": false,
+    "react/button-has-type": false,
     "react/destructuring-assignment": false,
     "jsx-a11y/anchor-is-valid": false
   },

package.json

@@ -33,7 +33,8 @@
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.1.0",
+    "webpack-loader": "^0.0.1"
   },
   "scripts": {
     "start": "encore dev-server --hot --port 8081",

src/app/assets/styles/common.scss

@@ -15,6 +15,23 @@ body {
   font-weight: 300;
   background: $background_color;
   color: $text_color;
+
+  animation: bodyLoadAnimation ease-out 0.35s;
+  transition: opacity 0.05s;
+
+
+  @keyframes bodyLoadAnimation {
+    0% {
+      // transform: translateX(-100%);
+      opacity: 0;
+      filter: blur(100px);
+    }
+    100% {
+      // transform: translateX(0);
+      filter: blur(0px);
+      opacity: 1;
+    }
+  }
 }
 
 a {

src/app/views/components/Button/Button.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classes from './Button.scss';
+
+function Button({ children, ...props }) {
+  return (
+    <a className={classes.button} {...props}>
+      {children}
+    </a>
+  );
+}
+
+Button.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export default Button;

src/app/views/components/Button/Button.scss

@@ -0,0 +1,23 @@
+@import '../../../assets/styles/common';
+
+.button {
+  -webkit-appearance: none;
+  background: none;
+  border: solid 1px #00c4ff;
+  padding: 10px 15px;
+  color: #00c4ff;
+  font-size: 14px;
+  font-family: 'Fira Mono', monospace;
+  cursor: pointer;
+  margin: 0;
+
+  &:hover {
+    background: #00c4ff;
+    color: $background_color;
+  }
+
+  &:active {
+    margin-top: 1px;
+    margin-bottom: -1px;
+  }
+}

src/app/views/components/Header/Header.jsx

@@ -13,10 +13,10 @@ export default function Header() {
         </li>
       </ul>
       <ul className={cx(classes.navMenu, classes.pullRight, classes.arrayStyle)}>
-        <li><a href="#">About</a></li>
-        <li><a href="#">Experience</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Get in touch</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="#experience">Experience</a></li>
+        <li><a href="#projects">Projects</a></li>
+        <li><a href="#contact">Get in touch</a></li>
       </ul>
     </nav>
   );

src/app/views/pages/landing/Sections/About/About.jsx

@@ -6,7 +6,7 @@ import Title from '../../../../components/Title/Title';
 
 export default function About() {
   return (
-    <section className={classes.about}>
+    <section className={classes.about} id={'about'}>
       <Title title={'😊 A little bit about me.'} alignLeft />
 
       <div className={classes.windowContainer}>

src/app/views/pages/landing/Sections/Contact/Contact.jsx

@@ -5,7 +5,7 @@ import Title from '../../../../components/Title/Title';
 
 export default function Contact() {
   return (
-    <section className={classes.contact}>
+    <section className={classes.contact} id={'contact'}>
       <Title title={'📨 Get in touch with me.'} alignRight />
 
       <div className={classes.contactDetails}>
@@ -18,7 +18,7 @@ export default function Contact() {
           I will soon be seeking employment opportunities for when I graduate in June 2020.
         </p>
 
-        <a href={'mailto:[email protected]'} target={'_blank'}>
+        <a href={'mailto:[email protected]'}>
           <button>Say hello!</button>
         </a>
       </div>

src/app/views/pages/landing/Sections/Experience/Experience.jsx

@@ -9,7 +9,7 @@ import Settings from '../../../../../settings';
 
 export default function Experience() {
   return (
-    <section className={classes.experience}>
+    <section className={classes.experience} id={'experience'}>
       <Title title={'💼 Some of my experience.'} alignRight />
       <Tabs>
         {Settings.experience.map(e => (

src/app/views/pages/landing/Sections/Projects/Projects.jsx

@@ -8,7 +8,7 @@ import Settings from '../../../../../settings';
 
 export default function Projects() {
   return (
-    <section className={classes.projects}>
+    <section className={classes.projects} id={'projects'}>
       <Title title={"🛠 A few projects I've worked on."} alignLeft />
 
       {Settings.projects.map((project, i) => (

src/app/views/pages/landing/Sections/Splash/Splash.jsx

@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 
 import classes from './Splash.scss';
 import Settings from '../../../../../settings';
+import Button from '../../../../components/Button/Button';
+
+import Resume from '../../../../../assets/files/resume.pdf';
 
 export default class Splash extends Component {
   constructor(props) {
@@ -52,12 +55,14 @@ export default class Splash extends Component {
 
           <p dangerouslySetInnerHTML={{ __html: Settings.biography }} />
 
-          <br/>
-          <br/>
+          <br />
+          <br />
 
           <div className={classes.actionButtons}>
-            <button onClick="">Get in touch</button>
-            <button onClick="">Grab my résumé</button>
+            <Button href={'mailto:[email protected]'}>Get in touch</Button>
+            <Button href={Resume} target={'_blank'}>
+              Grab my résumé
+            </Button>
           </div>
         </div>
       </section>

src/app/views/pages/landing/Sections/Splash/Splash.scss

@@ -8,14 +8,11 @@
 
   .identityContainer {
     display: inline-block;
-    z-index: -1;
     padding: 30px;
     margin-top: 50px;
     margin-left: 10%;
     font-weight: 500;
     text-align: left;
-    animation: identityContainerAnimation ease-out 0.25s;
-    transition: opacity 0.05s;
 
     > h1, > h2, > h3 {
       margin: 0;
@@ -60,24 +57,11 @@
     .actionButtons {
       margin-left: -5px;
 
-      button {
+      button, a {
+        white-space: nowrap;
         margin: 5px 5px;
       }
     }
-
-
-    @keyframes identityContainerAnimation {
-      0% {
-        transform: translateX(-100%);
-        opacity: 0;
-        filter: blur(100px);
-      }
-      100% {
-        transform: translateX(0);
-        filter: blur(0px);
-        opacity: 1;
-      }
-    }
   }
 }
 

src/app/views/pages/landing/SocialBars/SocialBars.jsx

@@ -19,7 +19,7 @@ export default function SocialBars() {
       </div>
       <div className={cx(classes.bottomSocial, classes.right, classes.text)}>
         <p>
-          <a href={'mailto:[email protected]'} target={'_blank'}>[email protected]</a>
+          <a href={'mailto:[email protected]'}>[email protected]</a>
         </p>
       </div>
     </>

webpack.config.js

@@ -19,6 +19,12 @@ Encore.setOutputPath('build/')
       config.localIdentName = '[name]__[local]--[sha1:hash:hex:4]';
     }
   })
+  .addLoader(
+    {
+      test: /\.(pdf|zip)$/,
+      use: 'file-loader?name=[path][name].[ext]',
+    }
+  )
   .enableReactPreset()
   .enableSassLoader();