Personal Portfolio Website

This repository contains the source code for my personal website. The website itself covers an intro to my projects and a little about who I am.

View Live Site · Report Bug

About The Project

Features

• Written in Typescript with NextJS/React.
• Fully dynamic will scale (well) to most devices.
• Website is entirely statically generated.
• Articles (projects) are written in MDX format and get compiled automatically as a Github workflow.

Built With

• 
• 
• 
• 

Getting Started

To get a local copy up and running follow these simple steps:

Prerequisites

• npm

Usage

1. Clone the repo

   git clone https://github.com/smp46/smp46.me.git

2. Install NPM packages

   npm install

For developing npm run dev, this even works for adding MDX files. Navigating away then back to /blog, will refresh and get new files.

For building/generating a static site npm run build, find the website files in /out.

How the Markdown stuff works

Painfully! It was a lot of banging my head against the wall using various guides and resources to reach my goal of easier article creation / updating. What ended up being the most helpful article was this one by Colby Fayock.

The end result is a relatively easy way to maintain and add articles/project write-ups. The process is as simple as:

1. Write the article in Markdown(X) and copy it to the src/projects directory.
2. Add the required fields to the top of the page, to extract a title and allow for categorising, meta tags etc. For example:

   ---
   title: Portfolio Website
   subtitle:
     'Building My Developer Portfolio with Next.js, MDX, and GitHub Actions'
   type: personal
   description: >-
     A fully statically-generated personal portfolio built with Next.js, React, and
     TypeScript. It showcases projects, articles written in MDX, and a bit about
     me.
   keywords: >-
     personal website, portfolio, Next.js, React, TypeScript, static site
     generation, MDX, GitHub Actions, web development, developer portfolio
   github: 'https://github.com/smp46/smp46.me'
   date: '2025-05-13'
   created: '2025-04-08'
   updated: '2025-05-13'
   ---
   
   

3. git add . && git commit And ta-dah, the Github workflow handles the compiling and then it goes live at smp46.me/blog.

License

Distributed under the MIT License. See LICENSE file for more information.

Contact

Samuel P - [email protected]

Project Link: https://github.com/smp46/smp46.me

Acknowledgments

• othneildrew/Best-README-Template
• How To Source MDX Content In Next JS To Dynamically Create Pages For A Blog