Personal Portfolio

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.

🛠 This site is built using

• Next.js
• TypeScript
• Contentlayer
• Stitches
• Framer Motion

Site is deployed through Vercel

📚 Folder overview

• 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.

✍️ Generate blog post boilerplate

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 article

The ☝️ 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.

🗑 Clearing article cache

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.

👨‍🎨 Site theming

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.

Dark theme

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.

👨‍💻 Running Locally

Install dependencies with Yarn:

$ yarn

Start dev server with:

$ yarn dev

Build application with:

yarn build

Start application in production mode with:

yarn start

Lint application with:

yarn lint

Generate new article with:

$ yarn article

Run hygen code generator with:

$ yarn generate

Clear .next folder caches with:

yarn cache:clear