MHolmes91 · MHolmes91 · Jun 4, 2025 · Jun 4, 2025 · Jun 4, 2025
diff --git a/README.md b/README.md
@@ -14,3 +14,37 @@ It requires Node.js 22 or newer.
 7. When you are satisfied with the results run `npm run export` to generate the static site.
    * The results of the export can be found in the `out` folder.
 
+## Customizing Colors and Fonts
+
+The `portfolio.json` file may include a `style` section to override the default
+colors and fonts.  The following keys are supported:
+
+```
+{
+  "style": {
+    "colors": {
+      "text": "#ffddff",
+      "background": "#111111",
+      "accent": "#ad71fb",
+      "accentAlt": "#ffddff",
+      "iconBackground": "#dfdfdf",
+      "icon": "#111111"
+    },
+    "fonts": {
+      "body": "'lato', sans-serif",
+      "header": "'PT Sans', sans-serif",
+      "googleFontsUrl": "//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400"
+    }
+  }
+}
+```
+
+Any of these values can be omitted to use their defaults. The fonts URL
+defaults to the value in `DEFAULT_GOOGLE_FONTS_URL` inside `pages/index.js`.
+
+### Using Google Fonts
+
+1. Browse or search fonts at [fonts.google.com](https://fonts.google.com).
+2. Add each font to your selection then open the **Get embed code** panel.
+3. Copy the `href` attribute from the `<link>` tag and place it in
+   `style.fonts.googleFontsUrl`.
diff --git a/pages/index.js b/pages/index.js
@@ -11,6 +11,9 @@ import {
 } from '@fortawesome/free-brands-svg-icons'
 import { faAt } from '@fortawesome/free-solid-svg-icons'
 
+const DEFAULT_GOOGLE_FONTS_URL =
+  '//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400'
+
 export async function getStaticProps() {
   const fs = require('fs')
   const path = require('path')
@@ -81,13 +84,26 @@ const icons = {
 }
 
 export default function Home({ data, headerPictureUrl, faviconUrl, faviconType, portfolioEntries, description }) {
+  const styleVars = []
+  const colors = data.style?.colors || {}
+  const fonts = data.style?.fonts || {}
+  if (colors.text) styleVars.push(`--color-text: ${colors.text}`)
+  if (colors.background) styleVars.push(`--color-background: ${colors.background}`)
+  if (colors.accent) styleVars.push(`--color-accent: ${colors.accent}`)
+  if (colors.accentAlt) styleVars.push(`--color-accent-alt: ${colors.accentAlt}`)
+  if (colors.iconBackground) styleVars.push(`--color-icon-background: ${colors.iconBackground}`)
+  if (colors.icon) styleVars.push(`--color-icon: ${colors.icon}`)
+  if (fonts.body) styleVars.push(`--font-body: ${fonts.body}`)
+  if (fonts.header) styleVars.push(`--font-header: ${fonts.header}`)
+
   return (
     <>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{data.pageTitle ? data.pageTitle : data.title}</title>
         {faviconUrl && <link rel="icon" type={faviconType} href={faviconUrl} />}
-        <link href='//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400' rel='stylesheet' type='text/css' />
+        <link href={fonts.googleFontsUrl || DEFAULT_GOOGLE_FONTS_URL} rel='stylesheet' type='text/css' />
+        {styleVars.length > 0 && <style>{`:root{${styleVars.join(';')};}`}</style>}
       </Head>
       {data.googleAnalyticsID && (
         <>

diff --git a/portfolio.default.json b/portfolio.default.json
@@ -7,6 +7,21 @@
 	},
     "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac laoreet dui. Suspendisse sed risus elit. Sed a commodo leo. Proin vulputate convallis ultrices. Praesent ut mi vitae dui interdum ullamcorper sit amet sit amet justo. Sed non fringilla felis. Curabitur vel elementum sem, tempus tincidunt justo. Nunc et nibh imperdiet, mollis mi ut, tristique orci. Mauris sit amet ligula purus. Etiam fermentum, neque quis cursus posuere, ligula magna vehicula diam, ut dapibus velit ex id ante.",
     "gravatarEmail": "test@gravatar.com",
+    "style": {
+        "colors": {
+            "text": "#ffddff",
+            "background": "#111111",
+            "accent": "#ad71fb",
+            "accentAlt": "#ffddff",
+            "iconBackground": "#dfdfdf",
+            "icon": "#111111"
+        },
+        "fonts": {
+            "body": "'lato', sans-serif",
+            "header": "'PT Sans', sans-serif",
+            "googleFontsUrl": "//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic|PT+Sans:400,700|PT+Sans+Narrow:400,700|Inconsolata:400"
+        }
+    },
     "footer": "<a href=\"https://github.com/MHolmes91/mini-me\">Use this repo for your own portfolio site!</a>",
     "headerPicture": {
         "linkUrl": "http://example.com/header.png",

diff --git a/styles/styles.css b/styles/styles.css
@@ -1,20 +1,20 @@
 body {
-  color: #ffddff;
-  font-family: "lato", sans-serif;
-  background-color: #111111;
+  color: var(--color-text, #ffddff);
+  font-family: var(--font-body, 'lato', sans-serif);
+  background-color: var(--color-background, #111111);
 }
 
 h1, h2, h3, h4, h5 {
-  font-family: "PT Sans", sans-serif;
+  font-family: var(--font-header, 'PT Sans', sans-serif);
   font-weight: 700;
-  color: #ad71fb;
+  color: var(--color-accent, #ad71fb);
 }
 
 a {
-  color: #ad71fb;
+  color: var(--color-accent, #ad71fb);
 }
 a:visited, a:hover {
-  color: #ffddff;
+  color: var(--color-accent-alt, #ffddff);
 }
 
 @media only screen and (max-width: 650px) {
@@ -57,8 +57,8 @@ a:visited, a:hover {
   /*Github has its own circle*/
 }
 .portfolio__element__icon {
-  background-color: #dfdfdf;
-  color: #111111;
+  background-color: var(--color-icon-background, #dfdfdf);
+  color: var(--color-icon, #111111);
   width: 70px;
   height: 70px;
   padding: 29px;
@@ -69,7 +69,7 @@ a:visited, a:hover {
   font-size: 70px;
 }
 .portfolio__element:not(.portfolio__element--github):hover .portfolio__element__icon, .portfolio__element .portfolio__element:not(.portfolio__element--github):active .portfolio__element__icon {
-  background-color: #ad71fb;
+  background-color: var(--color-accent, #ad71fb);
   transition: all 0.2s ease-in 0.1s;
 }
 .portfolio__element--github .portfolio__element__icon {
@@ -78,14 +78,14 @@ a:visited, a:hover {
   text-align: center;
   padding: 0;
   border-radius: 0;
-  color: #dfdfdf;
+  color: var(--color-icon-background, #dfdfdf);
   background-color: initial;
 }
 .portfolio__element--github .portfolio__element__icon svg {
   font-size: 128px;
 }
 .portfolio__element--github:hover .portfolio__element__icon, .portfolio__element--github .portfolio__element--github:active .portfolio__element__icon {
-  color: #ad71fb;
+  color: var(--color-accent, #ad71fb);
   transition: all 0.2s ease-in 0.1s; /*Size transitions must be done differently*/
 }