From 4894d84dc7a8535f0007a3e7e3509a8bfa8d310f Mon Sep 17 00:00:00 2001 From: Alex Xie Date: Mon, 16 Jul 2018 22:36:45 -0400 Subject: [PATCH] New dev additions (#9) * Abstract out About page data, update styling * Change nav menu to button * Revert navmenu changes, update readme --- README.md | 7 +- src/components/ProjectShowcase.js | 6 +- src/components/WorkShowcase.js | 2 +- src/data/aboutData.js | 87 ++++++++++ src/data/archiveData.js | 4 +- src/data/configOptions.js | 52 +----- src/data/projectData.js | 2 +- src/pages/about.js | 255 ++++++++++-------------------- src/pages/index.js | 1 - src/pages/resume.js | 2 +- 10 files changed, 181 insertions(+), 237 deletions(-) create mode 100644 src/data/aboutData.js diff --git a/README.md b/README.md index 1fcf1bfc7..e0b629f5a 100644 --- a/README.md +++ b/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)! diff --git a/src/components/ProjectShowcase.js b/src/components/ProjectShowcase.js index 78e253442..981ffda04 100644 --- a/src/components/ProjectShowcase.js +++ b/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 { {this.props.project.techStack.map((tech, i) => { return ( - - + ); })} diff --git a/src/components/WorkShowcase.js b/src/components/WorkShowcase.js index 5a0e3d354..a08d8a0fe 100644 --- a/src/components/WorkShowcase.js +++ b/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; diff --git a/src/data/aboutData.js b/src/data/aboutData.js new file mode 100644 index 000000000..1311b1d48 --- /dev/null +++ b/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 = [ + + 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 nonexistent fitness, cooking, my husky-malamute Storm, and travelling. I've done a couple of solo trips that you can read about on my blog! + , + + 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. + , + + 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. + , + + 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 700+ attendee TEDx event, powering one of the world's top 25 hyperloop teams, and leading the next iteration of Waterloo's largest social innovation hackathon. 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. + , + + 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! + +] + + +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" }, + ], + } +] diff --git a/src/data/archiveData.js b/src/data/archiveData.js index 4809061ce..6dd32ec48 100644 --- a/src/data/archiveData.js +++ b/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.', } ] diff --git a/src/data/configOptions.js b/src/data/configOptions.js index da38dbe4c..969f77c5a 100644 --- a/src/data/configOptions.js +++ b/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', diff --git a/src/data/projectData.js b/src/data/projectData.js index 36a87173e..80ce9ab0f 100644 --- a/src/data/projectData.js +++ b/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: [ diff --git a/src/pages/about.js b/src/pages/about.js index ff828dfe9..daa1bc112 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -4,7 +4,6 @@ import posed from "react-pose"; import Img from "gatsby-image"; import { mediaSize } from "../data/configOptions.js"; import '../data/font-devicons/devicons.min.css'; -import Link from "gatsby-link"; import ReactTooltip from 'react-tooltip'; import TemplateWrapper from "../components/TemplateWrapper.js"; @@ -12,6 +11,9 @@ import PageHeader from "../components/PageHeader.js"; import StatCounter from "../components/StatCounter.js"; import Icon from "../components/Icon.js"; +import { DESC_PARAGRAPHS, INTERESTS_LIST, SKILLS_LIST, STATS_COUNTER_DURATION, STATS_LIST } from "../data/aboutData.js"; + + const Container = styled.div` display: grid; grid-template-columns: 30% 1fr; @@ -92,36 +94,35 @@ const AboutSkills = styled.div` & > span { margin-right: 1em; - & > div { - font-family: 'PT Serif', 'Times', serif; - margin-top: 1em; - font-size: 1.5em; - margin-bottom: 5px; - position: relative; - display: inline-block; - - &:before { /* background of title on hover */ - background-color: rgba(155, 219, 125, 0.6); - opacity: 0.4; - content: ''; - position: absolute; - top: 0.45em; - left: 0.25em; - right: -5px; - height: 0.8em; - z-index: -1; - - width: 95%; - - ${mediaSize.phone` - top: 0.4em; - float: none; - height: 0.9em; - left: -3px; - opacity: 0.75; - `} - } + } + + & > div { + font-family: 'PT Serif', 'Times', serif; + font-size: 1.5em; + margin-bottom: 5px; + position: relative; + display: inline-block; + + &:before { /* background of title on hover */ + background-color: rgba(155, 219, 125, 0.6); + opacity: 0.4; + content: ''; + position: absolute; + top: 0.45em; + left: 0.25em; + right: -5px; + height: 0.8em; + z-index: -1; + + width: 95%; + ${mediaSize.phone` + top: 0.4em; + float: none; + height: 0.9em; + left: -3px; + opacity: 0.75; + `} } } @@ -132,25 +133,22 @@ const AboutSkills = styled.div` ${mediaSize.tablet` font-size: 2em; margin-top: 1em; - & > span { - & > div { - font-size: 1.25em; - } - & > div:first-child { - margin-top: 0em; - } + + & > div { + font-size: 1.25em; + margin-top: 0em; } `} ${mediaSize.phone` font-size: 1.5em; - margin-top: 1em; + & > div { + font-size: 1.25em; + margin-bottom: 0.3em; + } + & > span { display: block; - & > div { - font-size: 1.25em; - margin-bottom: 0.3em; - } } `} ` @@ -188,10 +186,6 @@ const AboutInterests = styled.div` opacity: 0.75; `} } - - ${mediaSize.phone` - margin-bottom: 0.3em; - `} } & span, & a { @@ -206,21 +200,13 @@ const AboutInterests = styled.div` font-size: 2em; & > div { font-size: 1.25em; + margin-bottom: 0.3em; } `} ${mediaSize.phone` font-size: 1.5em; - margin-top: 1em; - & > span { - & > div { - font-size: 1.25em; - margin-bottom: 0; - } - & > div:first-child { - margin-top: 0.5em; - } - } + margin-top: 0.5em; `} ` @@ -229,6 +215,7 @@ const AboutIntro = styled.div` line-height: 1.7; font-size: 1.5vw; margin-top: 2em; + & a { color: black; text-decoration: overline; @@ -262,7 +249,6 @@ const DetailedIntro = styled.div` transition: max-height 6s ease-in-out, opacity 1s ease; ` -const STATS_COUNTER_DURATION = 3; class AboutPage extends React.Component { constructor(props) { @@ -287,139 +273,62 @@ class AboutPage extends React.Component { - - Trips Around The Sun - - - Hours Spent Coding - - - Soccer Balls Kicked - - - Unpronouncable Last Name - + {STATS_LIST.map((stat, i) => { + return ( + + {stat.name} + + ); + })} + {/* TODO: figure out why clicking isnt showing tooltip on mobile */} +
Skills

+ {SKILLS_LIST.map((category, i) => { + return ( + + {category.children.map((skill, j) => { + return ( + + + + + ); + })} + + ); + })} - -
Skills

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Interests

- - - - - - - - - - - - + {INTERESTS_LIST.map((interest, i) => { + return ( + + + + + ); + })} - - - - - - - - I'm Alex Yizhe Xie, and I'm currently two-fifths of my way to a Bachelor of Computer Science at the University of Waterloo. I'm Chinese, but my hometown is the city-state of Singapore, Singapore (trippy, I know). These days, I'm proudly Canadian and working as a back-end software engineer at Flipp Corp. this.revealDetailedIntro()} revealed={this.state.revealed}>Tell me more! -

- 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 nonexistent fitness, cooking, my husky-malamute Storm, and travelling. I've done a couple of solo trips that you can read about on my blog! -

-

- 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. -

-

- 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. -

-

- 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 700+ attendee TEDx event, powering one of the world's top 25 hyperloop teams, and leading the next iteration of Waterloo's largest social innovation hackathon. 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. -

-

- If you've made it this far, props 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! -

+ {DESC_PARAGRAPHS.map((para, i) => { + return

{para}

; + })} diff --git a/src/pages/index.js b/src/pages/index.js index 1393fefd1..0b874097d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -152,7 +152,6 @@ class HomePage extends React.Component { - {/* TODO: add floating animation for text??? */}
web developer.
opportunity pursuer.
diff --git a/src/pages/resume.js b/src/pages/resume.js index 6341314a6..18edfdd9f 100644 --- a/src/pages/resume.js +++ b/src/pages/resume.js @@ -107,7 +107,7 @@ class ResumePage extends React.Component { this.handleFocus('resume', true)} onMouseLeave={() => this.handleFocus('resume', false)} >