Tony Narlock's CV

Live Version Launch: react v2

Old: v1 branch, launch: react v1, vue.js v1

What's new?

• 100% TypeScript
• yarn monorepo
• Only React (for now, see #1633)
• Vite
• Shared code: Framework agnostic
  • Typed reactive state through MobX + mobx-state-tree
  • Multiple, lazily-loaded charts options: @carbon/charts, plotly, billboard.js

Status

🏗️ Frameworks

Package	Source	Website	Status
React	packages/react/	https://cv-react-v2.git-pull.com	🟡 In-progress

⚙️ Shared code

Package	Source	Details	Status
UI	packages/ui/	N/A	🟡 In-progress
Common code	packages/lib/	N/A	🟡 In-progress
Data	packages/data/	N/A	✔️ Stable
Scripts	packages/scripts/	N/A	✔️ Stable

📈 Charts

Package	React
@carbon/charts	🟡 In-progress, packages/chart-react-carbon/
plotly	🟡 In-progress, packages/chart-react-plotly/
billboard.js	🟡 In-progress, packages/chart-react-billboard.js/
nivo (react-only)	🟡 In-progress, packages/chart-react-nivo/
victory (react-only)	🟡 In-progress, packages/chart-react-victory/

Quickstart

$ yarn

# Optional: Sync GitHub contributions to packages/data/scraped/
$ yarn github  # Assure GITHUB_API_TOKEN is set

# React
$ cd packages/react/
$ yarn start

# inside any of the 3, to build:
$ yarn build  # Build to dist/

Optional: Pull GitHub contributions

This isn't required as stub data preexists in packages/data/scraped.

Create a GitHub Personal Access Token and set it in env, ideally .bashrc / .zshrc / etc. via export GITHUB_API_TOKEN=INSERT_TOKEN_HERE. Check env | grep GITHUB_API to verify terminal has the variable set.

For CI systems like GitHub actions, use CI_GITHUB_API_TOKEN since variables with GITHUB_* are prohibited.

Edit your username in packages/scripts/github.ts and run yarn github in the project root.

Project specific tasks

react

Start dev server / live reload:

yarn start

Build to dist/:

yarn build

Lint project

yarn lint

Package updates (requires ncu):

yarn ncu

# Apply package updates to `package.json`
yarn ncu -u

data

Download latest github color mapping:

$ yarn workspace @tony/cv-data run github-colors

Global tasks

Install all packages:

$ yarn

Lint all packages:

yarn workspaces run lint

Structure

• packages/react/: React version

• packages/lib/: Common code (reducers/filters code, initial data collections)

  lib/search.ts - Search manager for filtering / faceting state. Each application uses this to hold raw state (of all activities, places), current filters, and filters/items available with filters applied.

  This essentially replaces what a global storage, such as redux/vuex. So there's no need to have three systems. And this is custom tailored to the job being done. Which in a sense increases readability.

  It has write inherent write protection and safety as it's just an ordinary ES2015 class

• packages/scripts/: GitHub Scraper

• packages/data/: initial data

  • my_actors.json: Actors noun, person, place, thing, etc.
  • my_activities.json: Activities verb, action, event, happening in relation to an actor
  • scraped/: data pulled from remote API's (such as scripts/github.js)
    • gh_activities.json: Pull requests for users except yourself / your own repos. Same format as my_activities.json, combined.
    • gh_actors.json: GitHub Repos. Same schema as my_actors.json), combined.

Version 2 (Under development)

• Written from scratch

  No create-react-app

  Better understanding, control of what's being used

• Lazy loaded, split chunks, smart initialization

• Smaller stuff

  Internal data props using underscores now are camelCase, e.g. repo_url -> repoUrl

Thanks

• @IonicaBizao/github-colors - For data/gh_colors.json (via yarn workspace @tony/cv-data run github-colors), github-colors license: MIT
• Octicons (primer/octicons) - For activity timeline icons, Octicons license: MIT.
• Flowbite - Tailwind Theme UI library, including timeline, Flowbite license: MIT.