This is the latest iteration of my personal portfolio. It is statically generated with the Next.js framework and uses other tools and libraries listed below.
Site is deployed through Vercel
src/components/*- All react components.src/data/*- Various static data sources.src/hooks/*- Custom react hooks.src/layout/*- Layout templates for MDX content.src/pages/blogg/[slug].tsx- Dynamic but static page for all blog posts generated through Contentlayer.src/pages/*- All static pages built of react components and static content.src/theme/*- Contains site-wide theming, global styling and stitches configuration.src/types/*- Contains shareable types and interfaces used across site.src/utils/*- Contains various utility functionality.public/- Contains public content for site.public/img/posts/*- Contains all images used in MDX blog posts._templates/*- Hygen.io templates for generating files.
Blog posts require certain frontmatter such as the name of a layout template and a date. These values can be cumbersome to fill it in by hand all the time.
Because of this blog posts can be generated with Hygen through the following npm script:
$ yarn articleThe ☝️ command will prompt you for a title and summary of the article. The summary is optional for the sake of generating boilerplate.
A {title}.mdx file will be generated in src/pages/blogg/ where the title will be used as filename - also as url since it's a file in a Next.js pages directory. The title will be slugified and lowercased before used as filename.
When generating new articles it is sometimes necessary to clear some local caches, to get the new article to appear when running the application locally. In those cases you simply run yarn cache:clear after generating a new article - before serving the application with yarn dev. Your newly generated article should now be available locally.
Theming of the site is done with the help of Stitches, which is a CSS-in-JS library. In the configuration file src/theme/theme.config.ts spacing scales, font families, colors, media queries and more are defined. For more info about how stitches utilizes theming and CSS-in-JS, read and walk through the stitches documentation.
The theme folder also include global css rules and configuration for a css reset based on the work of Eric A. Meyer.
A dark theme is configured, with alterations of colors from the main theme. This dark theme is toggled on or off with the help of custom hook, useDarkMode. This hook exposes the current theme and a callback function which toggles the classname which represents the dark theme.
If the user is using system wide dark mode, the dark theme will automatically be turned on, with the help of a (prefers-color-scheme: dark) media query check.
The dark mode hook will also store the user preference of theme to localStorage to set the theme for next visit.
Install dependencies with Yarn:
$ yarnStart dev server with:
$ yarn devBuild application with:
yarn buildStart application in production mode with:
yarn startLint application with:
yarn lintGenerate new article with:
$ yarn articleRun hygen code generator with:
$ yarn generateClear .next folder caches with:
yarn cache:clear