personal-portfolio

Attempting to write my personal portfolio page again, this time with React + TypeScript

Getting Started

Copied from the README.md from the Next.js project bootstrapped with create-next-app.

First, run the development server:

yarn start

Open http://localhost:3000 with your browser to see the portfolio page.

Other information

Major updates

1. v2.0.0 - upgraded next.js to v13
2. v1.0.0 - revamped architecture (split pages so the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) would be quicker) and improved UX, e.g. by reducing Time-To-Interactive (TTI) and Total-Blocking-Time (TBT)
3. v0.10.0 - migrated to Next.js from Create React App
   1. As a bonus, the version of React is also upgraded to v18.0 from v17.0.2

Common known issues

Windows compatibility

The yarn start and yarn build does not work on Windows machine

TL;DR solution

Set the yarn / npm script-shell to bash (recommended) or powershell by running:

1. For yarn, yarn config set script-shell bash
2. For npm, configure the script-shell value at .npmrc

Explanation

This is because, according to the issue described here at cross-env, npm uses cmd by default and that doesn't support command substitution, so if you want to leverage that, then you need to update your .npmrc to set the script-shell to powershell. Learn more here.

Reference

1. https://stackoverflow.com/questions/65953667/yarn-cant-run-any-script
2. https://classic.yarnpkg.com/lang/en/docs/yarnrc/
3. kentcdodds/cross-env#192 (comment)
4. https://github.com/kentcdodds/cross-env#windows-issues