New dev additions (#9)

* Abstract out About page data, update styling

* Change nav menu to button

* Revert navmenu changes, update readme

README.md

@@ -1,12 +1,11 @@
 # alexieyizhe.github.io
-
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/06042577aa204b92ba175fb61df44472)](https://app.codacy.com/app/alexieyizhe/alexieyizhe.github.io?utm_source=github.com&utm_medium=referral&utm_content=alexieyizhe/alexieyizhe.github.io&utm_campaign=badger) |
-![Deploys with Netlify](https://img.shields.io/badge/Netlify-deployed-brightgreen.svg) |
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/06042577aa204b92ba175fb61df44472)](https://app.codacy.com/app/alexieyizhe/alexieyizhe.github.io?utm_source=github.com&utm_medium=referral&utm_content=alexieyizhe/alexieyizhe.github.io&utm_campaign=badger)
+![Deploys with Netlify](https://img.shields.io/badge/Netlify-deployed-brightgreen.svg)
 [![GitHub license](https://img.shields.io/github/license/alexieyizhe/alexieyizhe.github.io.svg)](https://github.com/alexieyizhe/alexieyizhe.github.io/blob/master/LICENSE)
 
 Personal website/portfolio of Alex Yizhe Xie.
 
-Powered by React, GatsbyJS, and some awesome plugins. Continuous integration is enabled through Netlify.
+Powered by React, GatsbyJS, and some awesome plugins. Continuous integration is enabled through Netlify, and code style review through Codacy.
 
 Check it out [here](http://www.alexieyizhe.me)!
 

src/components/ProjectShowcase.js

@@ -140,7 +140,7 @@ const ProjectStack = styled.div`
   `}
 `;
 
-const ProjectStackLink = styled.span`
+const ProjectStackItem = styled.span`
   text-decoration: none;
   position: relative;
   z-index: 10;
@@ -205,14 +205,14 @@ class ProjectShowcase extends React.Component {
           <ProjectStack>
             {this.props.project.techStack.map((tech, i) => {
               return (
-                <ProjectStackLink
+                <ProjectStackItem
                   key={i}
                   focused={this.state.focused}
                   color={tech.color}
                   data-tip={tech.name} data-for={`techStackTip${i}`}>
                   <span className={tech.icon} style={{fontSize: "1.5em"}} />
                   <ReactTooltip id={`techStackTip${i}`} effect='solid' />
-                </ProjectStackLink>
+                </ProjectStackItem>
               );
             })}
           </ProjectStack>

src/components/WorkShowcase.js

@@ -94,7 +94,7 @@ const Container = styled.div`
 
   ${mediaSize.phone`
     height: auto;
-    width: 70%;
+    width: 80%;
     padding: 0 10% 0 10%;
     margin-bottom: 12vh;
 

src/data/aboutData.js

@@ -0,0 +1,87 @@
+import React from "react";
+import Link from "gatsby-link";
+
+export const STATS_COUNTER_DURATION = 3;
+
+export const STATS_LIST = [
+  {
+    name: 'Trips Around The Sun',
+    start: 0,
+    end: 18,
+  },
+  {
+    name: 'Hours Spent Coding',
+    start: 0,
+    end: 2899,
+  },
+  {
+    name: 'Soccer Balls Kicked',
+    start: 0,
+    end: 972,
+  },
+  {
+    name: 'Unpronouncable Last Name',
+    start: 0,
+    end: 1,
+  }
+];
+
+export const DESC_PARAGRAPHS = [
+  <span>
+    I'm a diehard soccer fan, whether it's watching FC Barcelona - my favourite team - or getting on the field myself. Apart from soccer and coding, my other interests are <s>nonexistent</s> fitness, cooking, my husky-malamute Storm, and travelling. I've done a couple of solo trips that you can read about on <Link to="/blog">my blog</Link>!
+  </span>,
+  <span>
+    As a member of the Item Data Platform team at Flipp, I'm working with some other awesome peeps on the system responsible for indexing retailer products to power the results on Flipp's flyers and search results. Even though almost all of the work I'm doing at Flipp is on the back-end, I'm extremely interested in the workings of the entire web stack. Stemming from the fact that I'm a very visual learner, I have a deep fascination with user interfaces and UX design. I absolutely love trawling the web for interesting articles and demos/case studies of said topic - stuff like human-computer interactions and subtle effects on user experience are my bread and butter. It's a major contributing factor to why I'm learning JavaScript, React, responsive design, and how to use tools like Figma and Adobe XD.
+  </span>,
+  <span>
+    My friends always tell me that I'm addicted to coding, but I like to think of it less as an addiction to coding and more as a passion for solving problems. I find myself engrossed in creating solutions to tough problems and pushing myself to always improve my skills and abilities; before you know it, I've been programming for hours upon hours. This is also one aspect of my skills that I'm constantly improving, so I'm also interested in more sustainable and long-term coding practices like Agile development and working in a professional environment.
+  </span>,
+  <span>
+    However, I also believe that creating solutions to problems and learning new ideas aren't limited to the scope of studying and coding. I'm currently working with a huge amount of passionate individuals on organizing a <a href="https://www.tedxuw.com/" target="_blank">700+ attendee TEDx event</a>, powering one of the <a href="https://teamwaterloop.ca/" target="_blank">world's top 25 hyperloop teams</a>, and leading the next iteration of <a href="https://equithon.org/" target="_blank">Waterloo's largest social innovation hackathon</a>. These have been incredibly rewarding learning experiences that I cherish greatly, and I'm hoping to continue contributing and getting involved with various communities now and into the future.
+  </span>,
+  <span>
+    If you've made it this far, props (no React pun intended) to you 🥂 I'm always looking for new initiatives. If you have any questions or wanna chat, shoot me an email or find me on social media!
+  </span>
+]
+
+
+export const INTERESTS_LIST = [
+  { name: "Travel", icon: "briefcase" },
+  { name: "Fitness", icon: "activity" },
+  { name: "Games", icon: "crosshair" },
+  { name: "Coding", icon: "code" },
+  { name: "Volunteering", icon: "heart" }
+]
+
+export const SKILLS_LIST = [
+  {
+    type: 'languages',
+    children: [
+      { name: "JavaScript", icon: "javascript" },
+      { name: "Ruby", icon: "ruby" },
+      { name: "Python", icon: "python" },
+    ]
+  },
+  {
+    type: 'frameworks',
+    children: [
+      { name: "React", icon: "atom" },
+      { name: "Ruby on Rails", icon: "ruby_on_rails" },
+      { name: "HTML", icon: "html5" },
+      { name: "CSS", icon: "css3" },
+      { name: "Ionic 3", icon: "ionic" },
+      { name: "Angular 4", icon: "angular" },
+      { name: "MeteorJS", icon: "meteor" },
+    ]
+  },
+  {
+    type: 'tools',
+    children: [
+      { name: "SQL Databases", icon: "database" },
+      { name: "Terminal (Bash)", icon: "terminal" },
+      { name: "MongoDB & NoSQL DBs", icon: "mongodb" },
+      { name: "Git", icon: "git_branch" },
+      { name: "Creative Problem Solving", icon: "stackoverflow" },
+    ],
+  }
+]

src/data/archiveData.js

@@ -2,11 +2,11 @@ export const archiveSiteList = [
   {
     name: 'May 2018',
     url: '/archive/may-2018/',
-    desc: 'A snapshot of alexieyizhe.me in May 2018. This iteration was the final one before V2 (the current site you\'re seeing here).',
+    desc: 'A snapshot of alexieyizhe.me in May 2018. This iteration was the final one before v2 (the current site you\'re seeing here).',
   },
   {
     name: 'Jan 2018',
     url: '/archive/jan-2018/',
-    desc: 'A snapshot of alexieyizhe.me in Jan 2018. This was the initial iteration of my portfolio site without too much polish.',
+    desc: 'A snapshot of alexieyizhe.me in Jan 2018. This was the initial iteration of my portfolio site without much polish.',
   }
 ]

src/data/configOptions.js

@@ -82,57 +82,7 @@ export const resumeOptions = [
     color: '#8EE8A7'
   },
   {
-    name: 'Aug 2018',
-    previewSource: '/img/resume/alex_xie_resume_2A.png',
-    downloadName: 'Alex Xie - Resume (Aug 2018)',
-    downloadSource: '/docs/alex_xie_resume_2A.pdf',
-    color: '#EE9AB8'
-  },
-];
-
-export const aboutStats = [
-  {
-    name: 'Lines of Code Written',
-    amount: 120000,
-
-    previewSource: '/img/resume/alex_xie_resume_1A.png',
-    downloadName: 'Alex Xie - Resume (Nov 2017)',
-    downloadSource: '/docs/alex_xie_resume_1A.pdf',
-    color: '#F4B276'
-  },
-  {
-    name: 'Mar 2018',
-    previewSource: '/img/resume/alex_xie_resume_1B.png',
-    downloadName: 'Alex Xie - Resume (Mar 2018)',
-    downloadSource: '/docs/alex_xie_resume_1B.pdf',
-    color: '#8EE8A7'
-  },
-  {
-    name: 'Aug 2018',
-    previewSource: '/img/resume/alex_xie_resume_2A.png',
-    downloadName: 'Alex Xie - Resume (Aug 2018)',
-    downloadSource: '/docs/alex_xie_resume_2A.pdf',
-    color: '#EE9AB8'
-  },
-];
-
-export const aboutSkills = [
-  {
-    name: 'Nov 2017',
-    previewSource: '/img/resume/alex_xie_resume_1A.png',
-    downloadName: 'Alex Xie - Resume (Nov 2017)',
-    downloadSource: '/docs/alex_xie_resume_1A.pdf',
-    color: '#F4B276'
-  },
-  {
-    name: 'Mar 2018',
-    previewSource: '/img/resume/alex_xie_resume_1B.png',
-    downloadName: 'Alex Xie - Resume (Mar 2018)',
-    downloadSource: '/docs/alex_xie_resume_1B.pdf',
-    color: '#8EE8A7'
-  },
-  {
-    name: 'Aug 2018',
+    name: 'Current',
     previewSource: '/img/resume/alex_xie_resume_2A.png',
     downloadName: 'Alex Xie - Resume (Aug 2018)',
     downloadSource: '/docs/alex_xie_resume_2A.pdf',

src/data/projectData.js

@@ -37,7 +37,7 @@ export const projectsList = [
   },
   {
     name: 'Easy Recipeasy',
-    desc: 'The one stop shop for all your "what the hell should I make for dinner" needs.',
+    desc: 'The one stop shop for all your "what the heck should I make for dinner?" needs.',
     color: '#E85A3B',
     imgSource: '/img/projects/easy.png',
     techStack: [