Overview
This documentation covers the source code, architecture, and content of patrickrfoster.com — Patrick Foster’s personal portfolio website built with React. The site is a single-page application (SPA) with client-side routing, deployed on Netlify. It presents Patrick’s professional background, software projects, and writing in a clean, interactive format.Introduction
Learn about the site’s purpose, tech stack, and architecture.
Getting Started
Run the project locally and understand the project structure.
Site Pages
Explore each page — Home, Projects, Blog, and more.
Components
Reference for the reusable React components used throughout the site.
Key features
Animated hero section
Glitch-style animated heading text greeting visitors on the home page.
Work experience timeline
Expandable list of work history with company logos and date ranges.
Project showcase
Cards displaying projects with images, videos, and external links.
Blog with routing
Individual article pages rendered via dynamic React Router routes.
Magic: The Gathering page
A dedicated page for Magic: The Gathering content.
One-click contact
Email copy-to-clipboard and LinkedIn integration in the footer.
Tech stack
| Technology | Version | Role |
|---|---|---|
| React | 18.2.0 | UI framework |
| React Router DOM | 4.3.1 | Client-side routing |
| React Scripts | 5.0.1 | Build toolchain (CRA) |
| Netlify | — | Hosting and deployment |
Site routes
| Route | Component | Description |
|---|---|---|
/ | Home | Hero, work experience, and projects |
/blog | Blog | Blog post listing |
/blog/:id | ViewBlog | Individual article view |
/magic-the-gathering | Haus | Magic: The Gathering page |