portfolio

Mark Basford - Professional Portfolio

A professional portfolio and blog website for a frontend architect specialising in accessibility.

Tech Stack

Getting Started

Prerequisites

Installation

pnpm install

Development

pnpm dev

Build

pnpm build

Preview Production Build

pnpm preview

Linting & Formatting

pnpm lint
pnpm format

Project Structure

src/
├── routes/           # SvelteKit routes
│   ├── about/        # About page
│   ├── blog/         # Blog listing and posts
│   └── sitemap.xml/  # Dynamic sitemap
├── lib/
│   ├── components/   # Svelte components
│   │   └── ui/       # shadcn-svelte components
│   ├── utils/        # Utility functions
│   └── types/        # TypeScript types
├── content/
│   └── blog/         # Markdown blog posts
└── app.css           # Global styles
static/               # Static assets

Accessibility

This site targets WCAG 2.2 Level AAA compliance:

Adding Content

New Blog Post

  1. Create a new .md file in src/content/blog/
  2. Add frontmatter:
---
title: 'Post Title'
date: '2025-12-07'
description: 'Brief description for SEO'
tags: ['accessibility', 'frontend']
published: true
---
  1. Write content in Markdown
  2. Run pnpm build to verify

License

All rights reserved.