Tech stack
| Technology | Version | Role |
|---|---|---|
| React | 18.2.0 | UI rendering and component model |
| React Router DOM | 4.3.1 | Client-side routing |
| Create React App (react-scripts) | 5.0.1 | Build tooling, dev server, test runner |
| Netlify | — | Hosting, continuous deployment, redirect rules |
React Router DOM 4.x uses the
<Route> and <Switch> API from the v4/v5 generation, not the newer v6 <Routes> component API. Keep this in mind if you reference React Router documentation.Architecture overview
The site is a classic React SPA with no server-side rendering. All routing is handled in the browser by React Router. Netlify serves theindex.html file for every URL path via a catch-all redirect rule in public/_redirects, which allows React Router to take over on first load regardless of which URL the visitor lands on.
Application data — blog articles, work experience entries, and project listings — is defined as plain JavaScript constants in src/constants/. Components import from these files directly; there is no API, database, or CMS involved. Adding or updating content means editing a constants file and redeploying.
Site routes
Home
The root path
/ renders the Home component. This is the main landing page, presenting Patrick’s introduction, work history, and featured projects.Blog
/blog renders the Blog component. The listing UI is currently a stub — the component renders an empty <main> with no article list.Blog post
/blog/:id renders the ViewBlog component for an individual article, where :id maps to a specific entry in the articles constants.Magic: The Gathering
/magic-the-gathering renders the Haus component, which fires a fetch request and immediately redirects visitors to an external Google Form.Project structure
src
App.js
Home.js
Home.css
index.js
components
Blog.js
blog.css
Card.js
Haus.js
ViewBlog.js
Work.js
constants
articles.js
projects.js
work.js
articles
images
public
Key directories and files
src/components/ — One component file per page section or route. Blog.js and ViewBlog.js handle the blog listing and individual post views. Work.js renders the work experience timeline. Card.js is a shared UI primitive used across sections.
src/constants/ — All site content lives here as exported JavaScript arrays and objects. articles.js indexes blog posts, projects.js lists software projects, and work.js defines work experience entries. Individual article bodies are stored in constants/articles/ (e.g., netflix.js).
public/_redirects — A Netlify-specific file containing a single rule (/* /index.html 200) that routes every request to index.html, enabling client-side routing to work correctly on direct URL access and page refresh.
Netlify deployment
The site deploys automatically from the connected Git repository. Netlify runsCI=false npm run build as the build command. The CI=false flag prevents React Scripts from treating ESLint warnings as build errors — without it, warnings that are acceptable in development would cause the Netlify build to fail.
The production build output lands in the
build/ directory. Netlify serves this directory as the static site root.Next steps
Getting started
Run the site locally, understand the project structure, and learn how to add new projects or work experience entries.