This repository was originally forked from Michael D'Angelo's personal site. Since then, I have made several updates and enhancements. I replaced the create-react-app setup with Next.js, leveraging its features for server-side rendering and routing.
I have aimed to maintain clean and simple code while taking full advantage of Next.js capabilities.
For dark theme support, I integrated next-themes.
To standardize type handling, I consolidated redundant type definitions from various files, particularly in the resume section, into a single src/lib/types.tsx. This file serves as a centralized location for reusable type definitions throughout the project.
Regarding SCSS sources, I adopted best practices for Sass. I resolved all deprecation warnings, which had accumulated over the years, ensuring the codebase is free from major issues. While the SCSS setup may not be fully cutting-edge, it is now clean and reliable. The migration process was handled using the official Sass migrator.
For managing the Node.js version and other tools, I utilized mise, an efficient tool for managing multiple CLI tool versions. Finally, I used mise-tasks to define and manage tasks and their dependencies.
The following TOML tasks are defined in mise.toml:
install(mise r i): Installs npm dependencies.build(mise r b): Builds the project.format(mise r f): Formats project files.ci(mise r ci): Installs npm dependencies usingnpm ci.
These file tasks, located in the mise-tasks directory, help ensure code cleanliness and dynamically gather project data during build time:
- mise-tasks/utils/nroflines: Counts the number of lines of TypeScript powering the website.
- mise-tasks/utils/nrofwordsandtime: Calculates the number
of words and estimated reading time for
.mdxfiles in the project.
Three environment variables are used during the build process. Their values are managed through mise and defined in mise.toml:
NEXT_PUBLIC_GOOGLE_ANALYTICS: Used for Google Analytics integration.NEXT_PUBLIC_NUMBER_OF_LINES: Reflects the number of TypeScript lines, calculated at build time.NEXT_PUBLIC_MDX_DETAILS_ABOUT: Provides details about.mdxfiles, including word count and reading time.
These variables are substituted at build time, with their management implemented in src/lib/config.tsx.
The GitHub Action workflow is defined in .github/workflows/github-pages.yml.
This workflow builds and deploys the project to GitHub Pages. For more details, refer to the workflow file.
To deploy a Next.js application to GitHub Pages, I drew inspiration from this guide.
Since I have my own domain, davidsass.eu, I configured the repository to support a custom domain.
To set this up, I took the following steps:
- Created a public/CNAME.
- Removed the
basePathconfiguration from next.config.js, as it was not needed for my setup. - Adjusted the code to omit the base path, particularly for imported images, as explained here. This step is unnecessary when using a custom domain.
- This project was originally forked from Michael D'Angelo's personal site, a fantastic, easily modifiable, statically-exportable React and Jamstack application.
- The original version was built using create-react-app, React-Router, Sass, GitHub Actions, and many other modern technologies.
- The template is based on Future Imperfect by @ajlkn for HTML5 UP.
- The dark mode implementation was inspired by Paige Johnson.