My Personal Portfolio Website

Have a browse around at My Site.

Powered by Svelte.

Main Concept

The main idea was to create a personal blog with two different types of post collections:

• Single-entry blog posts
• Project posts, where multiple posts can accumulate under a common goal

The goal was to make it possible to simply render Markdown files in either category, while keeping the workflow simple enough to just drag and drop Markdown files from my favorite Markdown editor with only minor editing required.

This allows me to document projects as extensively and easily as I want, while still being able to showcase them in a structured way.

Thanks to mdsvex, I can also render Svelte components directly inside Markdown files when needed, giving me even more creative freedom.

For an example, see the 3D Rendering blog post, where I included a fully interactive JavaScript canvas renderer directly in the Markdown post.

Getting Started

Prerequisites

You need:

• Node.js
• npm
• Optionally, Nix if you want to use the project's Nix development environment
• Optionally, Podman if you want to build and run the website as a container

If you use the project's Nix development environment:

nix develop

Install the project dependencies:

npm install

Local Development

The Makefile provides convenient targets for the common development tasks.

Start the Development Server

make dev

This runs the Svelte development server.

Start the Development Server for Network Access

make demo

This starts the development server with --host, making it accessible from other devices on your local network.

This can be useful for testing the website on a phone, tablet, or another computer.

Building

Create a production build with:

make build

This runs the Svelte production build.

The resulting application can then be deployed using the appropriate SvelteKit adapter for the target environment.

For more information about adapters, see the SvelteKit adapter documentation.

Running with Podman

The website can also be built and run as a container using Podman.

The container image is built using the application name defined in the Makefile:

genei180-website

The current Git version is passed to the container build as the APP_VERSION build argument.

Build the Container

make podman-build

This is equivalent to building the image with:

podman build \
    --build-arg APP_VERSION=$(git describe --tags --always) \
    -t genei180-website .

Run the Container

make podman-run

The container exposes port 3000 and maps it to port 8080 on the host:

Host:      localhost:8080
Container: localhost:3000

After starting the container, the website is available at:

http://localhost:8080

Makefile Targets

The available Makefile targets are:

Target	Description
make dev	Start the development server
make demo	Start the development server with network access
make build	Create a production build
make podman-build	Build the Podman container image
make podman-run	Run the Podman container

To see the available targets directly from the Makefile:

make