Welcome to the personal website and blog of Joel O'Connor. This is a Next.js site bootstrapped with create-next-app, and it uses the beta app directory for pages, layouts, and route handlers.

This site uses Tailwind CSS along with the @tailwindcss/typography plugin for styling.

I'm currently using nodemailer to send contact emails, but may look to replace this with a more robust solution in the near future.

My blog is authored using MDX and Contentlayer. I'll attempt to regularly post articles about my hobbies, projects, and learning.

You can visit my site at the following URLs:

• https://joeloconnor.nz - the live site
• https://dev.joeloconnor.nz - the current development site

• Home page
  • Social media links
  • Work experience
  • CV download link
  • Blog articles
• Blog
  • Index page
  • Post page
  • Categories
  • Social sharing images
  • Styled code blocks
  • RSS feed
• Header
  • Blog link
  • Mobile-friendly menu
  • Dark mode toggle
  • Logo
• Footer
  • Site links
  • Remove social media links
• Contact form
  • Captcha
  • Input validation
  • Faster email service
• About page
  • Social media links
  • NZ map with POIs

• Bug fixes

  • Captcha theme doesn't update when dark mode toggle is pressed
  • Can't toggle to dark mode when multiple tabs are open in Safari

• Improvements

  • Update styles
  • Logo to use primary colour on homepage. Currently the other way around

To run this site locally, first install the npm dependencies:

npm install

Next, create a file named .env.local in the root of your project and the following environment variables:

# SMTP Credentials
SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASSWORD=
SMTP_FROM_ADDRESS=
SMTP_TO_ADDRESS=

Next, run the development server:

npm run dev

Finally, open http://localhost:3000 in your browser to view the website.

To learn more about the technologies used in this site, see the following resources:

• Next.js - the official Next.js documentation
• Tailwind CSS - the official Tailwind CSS documentation
• Contentlayer - the official Contentlayer documentation
• MDX - the official MDX documentation