Resume v2

This is a rewrite of the resume template using new stuff I learned along the way.

React Pkg

Resume Repository Details

This uses the React Kit as the base template which is based on Create React App

Includes

• React
• Redux
• redux-saga
• React Loadable
• React Router
• Webpack
• Ducks Pattern "Official Proposal"
• styled-components
• lint-staged for pre-commit hooks
• CSS Grid

App Structure

resume/
  .vscode/
  build/
  config/
  public/
  scripts/
  src/
  --components/
  --containers
  --ducks/
  --routes/
  --sagas/
  --services/
  --App.js
  --index.js
  --registerServiceWorker.js
  --store.js
  package.json
  README.md

Getting Started

At the time of writing this, the following versions were used

node -v 8.11.1
npm -v 5.8.0

1. Clone the repository

git clone git@github.com:iamdevlinph/resume.git resume

2. Go into the directory

cd resume

3. Install the packages

npm run install

Development

To start development server and access the site at localhost:3000/

npm run start

And if you only want to build the files

npm run build-only

Deployment

The deployment process in this app only supports github pages using the gh-pages branch. To set it up:

1. Make necessary changes to your repository's settings.

Change the source to gh-pages branch.

If you have your own domain. Input your custom domain if you have and don't forget to add a CNAME file in the public folder. This will handle the redirecting from github pages to your custom domain.

2. In the package.json change the homepage property with the url where the app will be accessed

// for github pages domain
"homepage": "https://<username>.github.io/<repository_name>"

// for custom domains just put your own domain
"homepage": "<your_custom_domain_here>"

3. After setting up the correct url for homepage you can now deploy using

npm run deploy

This will build the files and deploy them to the gh-pages branch

4. Access your app with the url you used in the homepage property.

Font and Icons

The font used in this project is just the Open Sans from Google Fonts

Fontello is used to manage the icons. Fontello uses the icons from different icon makers like Font Awesome and others.

Fontello allows us to only use the icons that we actually use, so it might look the icon selection in this project is very limited but we can expand it by adding the icons that are needed.

Downloading icons

1. Go to fontello
2. Import public/fonts/fontello.config.json. This contains the already selected icons in the project
3. This will pre-select the icons that are already included in the config.json file
4. Click on the icons that you want to add
5. Click Download webfont once you're done. This will download the font files and the config.json file
6. Replace the files found in the public/fonts/ with the newly downloaded ones

Adding the icons

Once you've downloaded the files they won't be automatically added to the css so we'd have to do this manually.

1. Open fontello.svg
2. Find the line of the icon you want to add. Let's take the icon folder-open as an example

<glyph glyph-name="folder-open" unicode="&#xe800;"

3. In the unicode. Copy the code after the x like &#xe800 to e800
4. Open public/fonts/fontello.css
5. Add a new class like so (I chose icon- as the prefix)

.icon-folder-open:before {content: '\e800'; }

6. And use the icon like so

<i className="icon-folder-open" />

A bit of a hassle, yes. But we'll end up with the icons that we actually use.

Took inspiration from

• Split Resume Template
• Material CV/Resume Template
• Responsive Timeline CSS
• Github Fork Ribbon CSS

Something to pitch in?

Feel free to open up a pull request or an issue

---

This project was bootstrapped with Create React App.

Read the original README.md