Check it out in production here: blaketarter.com
This website was built with Next and TypeScript. It's intentionally over-engineered for a simple one-page website. I like to use my personal website as a playground for new technologies or new ideas. Sometimes simply to show off stuff that I know how to do.
There is a suite of tests that run in GitHub Actions (and can be ran locally) including:
- Unit tests using Jest and Testing Library
- Linting with Eslint and Prettier
- Type checking with TypeScript
The site can be exported as a static site that should run as expected and look fine even with JavaScript disabled in the browser.
To build and run the site in dev mode you can run npm run dev. You can also build the production version with npm run build and then start it with npm run start.
A few of the features that were built custom into this site are:
- A light/dark theme based on the OS
prefers-color-scheme - CSS variables used to define theme that change based on
@mediaqueries - On-scroll fade-in animations for elements that respects
prefers-reduced-motion - On-scroll parallax effects that also respects
prefers-reduced-motion - A complicated
Typercomponent that shows off usage of hooks (includinguseTransition) - Tests ran in CI using Github Actions
- Automatically test PRs against the main deployment using Google Lighthouse
- Automatic deployments to GitHub Pages using CI