My name is Charles Harwood and I'm a software engineer from the Gold Coast, Australia. I've been working in the tech industry since 2011, and I've been writing crappy code since MySpace was cool.
I'm currently working at Entain Australia & New Zealand as a Staff Engineer, working under the Head of Engineering across all product delivery and engineering teams. My focus is on improving the performance and stability of our apps, the quality of our codebases, and helping our teams deliver great experiences to Entain customers.
My technical focus since 2021 has been React Native with TypeScript, but I've been working with React in general since 2015 (the days of React.createClass, what a time to be alive).
This is the source code for my personal website, charlesharwood.dev
After many years of thinking I needed to keep my own website's source code a secret, I've finally realised that ✨nobody cares✨, so I've decided to open source it. I've been inspired by the many open source projects I've used and contributed to over the years, and I want to give back to the community wherever I can.
If my crappy code can help someone else, then I'm happy to share it.
This website was built using everyone and their grandma's favourite tools and libraries:
- Visual Studio Code (the GOAT IDE you can't change my mind)
- TypeScript because
typescript > javascript && typescript === javascript - Prismic for my CMS, with their incredible Slice Machine feature
- Next.js for the core framework (and therefore obviously React)
- Tailwind CSS utility-first CSS framework for styling
- Zustand for client state management
- Font Awesome Pro v6 for icons
- clsx for constructing
classNamestrings conditionally - ESLint with eslint-plugin-unicorn for linting
- Prettier for code formatting
- PostCSS with Autoprefixer for CSS processing
As mentioned above, this website is built using Prismic as a headless CMS, and Next.js as the core framework. It uses Slice Machine to build reusable components that can be used to build dynamic pages in Prismic.
I have built multiple sites (including my old site) using Prismic and Next, however this is the first time I've used Slice Machine. The way it syncs the reusable React components you create with the schema you create in Slice Machine, and then allows you to use those components to build pages in the Prismic CMS itself, all with full built-in TypeScript typing, is incredible. It's a huge time saver, and I'm a big fan.
This is also the first time I've used Tailwind CSS, and I'm enjoying it so far. I've been a big fan of writing only my own custom CSS (usually with SCSS/Sass) for many years, plus I've used nothing but React Native's StyleSheet.create for the last 3 years, but Tailwind was recently chosen as the CSS framework for a web project at work, so I decided to use it for my own site as a bit of a learning experience, and turns out it's pretty cool. The autocomplete via the VSCode Extension is dope too.
Last but definitely not least, we have Zustand for client-side state management. I have used React Context almost exclusively on personal projects, and I'm forced at gunpoint to use Redux at work (I'm kidding, I love my job), but I've been hearing a lot of good things about Zustand, so I decided to give it a go, and it is awesome. It's so simple to use, and it's so fast. Thanks to my man Rhys Geary for the recommendation 🔥
(NB: shoutout also to Tanstack Query which is the best thing since sliced bread for managing server state (data fetched from APIs) in client-side javascript apps; I haven't used it here as this site doesn't have any client-side data fetching requirements (thanks to Next.js and React Server Components), but I still wanted to mention it because of how damn good it has been in my experience using it in a React Native codebase with highly complex data requirements across many thousands of components and screens.)
Since I've done all the manual configuration stuff a million times before, this time around I decided I don't need to prove anything to anyone, so why not just use a starter template to take care of all that initial stuff that nobody wants to do? Especially now that I'm a father of two boys, I have a lot less free time and thus I need less reasons to procrastinate on actually building the damn site.
Thankfully since the last time I used Prismic to build a new site from scratch, they've introduced some great templates to get you started with various framework integrations. I used the Prismic Next.js Multi-Page Website Starter as a base, converted the whole thing to TypeScript, and then added all my own customisations on top of that. It's a great starter, and I highly recommend it for anyone wanting to build a Next.js site with Prismic.
- Learn more about using Prismic with Next.js: Prismic Next.js Documentation
To start a new project using this starter, run the following commands in your terminal:
npx degit prismicio-community/nextjs-starter-prismic-multi-page your-project-name
cd your-project-name
npx @slicemachine/init@latestThe commands will do the following:
- Start a new Next.js project using this starter.
- Ask you to log in to Prismic or create an account.
- Create a new Prismic content repository with sample content.
When you're ready to start your project, run the following command:
npm run devTo learn how to work with your new project, see this starter's docs.
To learn more about working with Prismic, see the Prismic docs.
Copyright 2015-2024 Charles Harwood <info@charlesharwood.dev> (https://charlesharwood.dev)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.