About Me - Portfolio SPA 👨‍💻

Hi, This is the first iteration of my personal portfolio web page. The motivation behind this was to incorporate some concepts I'm learning and build a component based - swappable - single page app.

See my page live

Getting Started

If you're interested in using or forking this project for your own personal website, I only ask you to inlcude a link in your readme to my github page. Thanks!

This project was created with create-react-app, yarn, and axios. A full list of tech and tools is listed below.

After cloning the github repo run

$yarn install

If you're running into issues, check out the dependencies. Next, you'll have to add a .env file to use the github API.

$touch .env

You'll have to generate a new token from your github account and assign it to the following variable below. You never want to share your token so add the .env file to your .gitignore file. Check out this link on how to create a token to access the GitHub GraphQL API. You'll need this to connect to your repo and gain access to things like repo name, status, info etc...

Add this to your .env file: REACT_APP_GITHUB_ACCESS_TOKEN=YOUR_TOKEN_GOES_HERE_123

GrapQL API Call

If you plan on using - more or less - the same information in your API call, you will need to change the graphQL query in: src/components/Projects/query.js. Update this line of code user(login: "YourRepoName"). My repo won't work for you 🤓

React i18next

About i18next

This page was also built with internationalization in mind. You'll notice my page has some odd text interpolations for different web components. react-i18next helps abstract out text using different translation files. My translation files are located here: src/i18n/locales/en.json or jp.json for the Japanese translation file. The i18next configuration falls back on en.json so unless you plan on changing your default language, don't delete that file - just update the content.

Animation with Framer Motion

I experimented with Framer Motion a bit to add some spicy 🌶️ animations. If you take a look at the Nav.js component you'll see some special html descriptors like <motion.div>. This is how framer interacts with the DOM. Varients are variables that help define the animations.

Built With

• React 16.12.0
• i18next
• fontawesome - Used for iconography
• express
• axios
• node sass
• framer motion

Test

• jest
• enzyme