https://github.com/matfin/personal-website
This is my personal website created using React and Typescript
https://github.com/matfin/personal-website
circleci docker-compose eslint express-js jest node-js progressive-web-app react react-hooks react-redux react-testing-library redux redux-saga static-site typescript wepack-5
Last synced: 3 months ago
JSON representation
This is my personal website created using React and Typescript
- Host: GitHub
- URL: https://github.com/matfin/personal-website
- Owner: matfin
- Created: 2020-04-23T13:58:12.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T17:32:31.000Z (about 1 year ago)
- Last Synced: 2024-04-15T02:05:41.459Z (about 1 year ago)
- Topics: circleci, docker-compose, eslint, express-js, jest, node-js, progressive-web-app, react, react-hooks, react-redux, react-testing-library, redux, redux-saga, static-site, typescript, wepack-5
- Language: TypeScript
- Homepage: https://mattfinucane.com
- Size: 3.53 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Roadmap: ROADMAP.md
Awesome Lists containing this project
README
## Personal portfolio and CV
This is my personal website which acts as my portfolio and CV / Resumé.
My motivation in creating this was to gain a deeper understanding of modern web development practices. I use it as a testing ground for exploring modern web development practices and technologies.
### What does this project encompass?
- dependency management with [NPM](https://docs.npmjs.com/) and building with [Vite](https://vitejs.dev/).
- [TypeScript](https://www.typescriptlang.org/), which is a superset of JavaScript and includes strict type-checking.
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) and [vitest](https://vitest.dev/) which is what is used to unit tests components.
- [Docker / Compose](https://docs.docker.com/compose/) is used to test builds locally before they are uploaded. A self signed ssl cert is needed so follow this [excellent guide](https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/).
- A content rendering engine was built that reads in a tree of items from JSON files, then chooses the correct component to render as the JSON is fetched.
- For state management, [Redux Toolkit](https://redux-toolkit.js.org/) is used. This makes managing complex async functionality much easier and readable.
- For styling, [CSS Modules](https://github.com/css-modules/css-modules) and [Stylelint](https://stylelint.io/).
- For testing, [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and [Vitest](https://vitest.dev/).
### How to install and run this
To get this running, you should have an up to date stable version of [NodeJS](https://nodejs.org/en/). Version `20.12.2` is used here.
- `$ [email protected]:matfin/personal-website.git` to clone this to your local machine
- `$ cd personal-website/`
- `$ npm install` will install dependencies
- `$ npm run start` will build the server and client and watch for changes
- `$ npm run build:deploy` will generate the site as a static bundle, which is output to the `/dist` directory.
- `$ npm run checks` will run unit tests with coverage, code lint and style lint.
### Where does this run?
On all modern web browsers both mobile and desktop.
### How is this deployed?
For CI (continuous integration), a very popular and well documented tool called [CircleCI](https://circleci.com/) is used.
There is a script that generates all content and assets, then a CircleCI config that deploys this to a remote server.
### What are the nice to haves?
This is documented in the [Tech Roadmap](ROADMAP.md).