mattjmoran/matthewjmoran.com

This is the source code for my personal website, matthewjmoran.com

matthewjmoran.com

This is the source code for my personal website, matthewjmoran.com. The site is built using Next.js and TypeScript.

Currently, the website is not deployed anywhere, but I plan to deploy it to Azure in the future.

Table of Contents

• matthewjmoran.com
  • Table of Contents
  • Why?
  • Getting Started
  • Stack
    • Package Management
    • Framework
    • Content
    • Styling
    • Testing
  • VSCode Extensions
  • Additional Development Tools
  • Resources
  • License

Why?

I wanted to build my website to showcase my portfolio and build out my personal brand. I also wanted to learn more about Next.js and TypeScript, so I decided to build the site using those technologies.

But why open-source? I am an organization, documentation and process fanatic. I love to document everything I do, and I love to share my knowledge with others. This project is made possible from the help of other people's open-sourced work. By sharing both their work and my own, I hope to help others learn and grow.

I've broken down the project into various sections below. I've also included a resources section that lists the resources I used to build the site.

My stretch goal is to eventually utilize my experiences from this project to create my own original resources that I can share with others.

Getting Started

First, install the dependencies:

yarn

Then, run the development server:

yarn dev

Then, open http://localhost:3000 with your browser to see the result.

Stack

Package Management

• Yarn

Framework

• Next.js
  • TypeScript¹
  • React¹
  • React-DOM¹

Content

• Gray-Matter
• Marked

Styling

• ESLint¹²
• Prettier³
• Husky
• Lint-Staged
• Commitlint
• Gitmoji

Testing

• serve
• Jest⁴

VSCode Extensions

N.B. These are not required, but they are recommended as they are utilized in .vscode/settings.json.

• ESLint
• Prettier
• Indent Rainbow

Additional Development Tools

I work primary on my Mac and have a series of tools that I use to help me develop. Further information on these tools, their configuration, installation instructions and how I use them can be found in my dotfiles repository.

Resources

• Paulin Trognon's article on Starting a clean Next.js project with TypeScript, ESLint and Prettier
• Mark's article on How to lint Git commit messages with commitlint
• Ben Awad's video on Next.js Static Site Generation
• Lee Robinson's video on Testng & Error Handling in Next.js

License

Do not use any sections of this repository without reading the licenses below, and without understanding how they apply to you. Different licenses apply to different parts of the repository. Please read the following carefully. To learn more about the licenses used in this repository, please refer to LICENSE.md.

Footnotes

1. Installed by default with Next.js with yarn create next-app --typescript ↩ ↩² ↩³ ↩⁴

2. Refer to this file for ESLint extensions, plugins, and configuration details. ↩

3. Refer to this file for Prettier configuration details. ↩

4. Next.js Jest testing library setup instructions and additionally installed dependencies can be found here. ↩