Getting started

This guide walks you through cloning the repository, running the development server, building for production, and making common content updates.

Prerequisites

Before you begin, make sure you have the following installed:

Tool	Minimum version	Check your version
Node.js	14	`node --version`
npm	6	`npm --version`
Git	any	`git --version`

Node.js 14 is the minimum supported by Create React App 5. Node.js 18 LTS or later is recommended for the best compatibility.

Setup

Clone the repository

git clone https://github.com/paaatrrrick/personalwebsite.git
cd personalwebsite

Install dependencies

Install all required npm packages from package.json.

npm install

This installs React 18, React Router DOM, and the Create React App toolchain locally.

Start the development server

npm start

React Scripts starts a dev server at http://localhost:3000 and opens it in your default browser automatically. The server supports hot module replacement — changes to source files reflect in the browser without a full reload.

The dev server proxies all unknown routes through React Router, so navigating to /blog or /magic-the-gathering works correctly in local development.

Building and testing

Production build

npm run build

This compiles and minifies the app into the build/ directory. The output is optimized for production: assets are hashed for cache-busting and JavaScript is tree-shaken.

Running a standard npm run build locally may fail or print errors if your environment has the CI environment variable set to true (common in CI systems). In that case, React Scripts treats ESLint warnings as hard errors.

Netlify build

The Netlify deployment uses a dedicated script that suppresses warnings-as-errors:

npm run netlify

This runs CI=false npm run build as defined in package.json. Use this command if you want to produce a production build that behaves exactly as it does on Netlify.

Run tests

npm test

This launches the Jest test runner in interactive watch mode. Press a to run all tests, or q to quit.

Create React App 5 uses Jest with jsdom. Test files should be placed alongside the components they test with a .test.js or .spec.js suffix, or inside a __tests__/ directory.

Project structure walkthrough

Understanding where things live makes it straightforward to add or change content.

`src/App.js`

The top-level component. It defines all routes using React Router’s <Route> components and imports the four top-level page components (Home, Blog, Haus, ViewBlog). If you add a new page, you register its route here.

`src/components/`

One file per page section or route:

File	Purpose
`Blog.js`	Lists all blog posts from the articles constants
`ViewBlog.js`	Renders a single blog post matched by `:id` route param
`Work.js`	Renders the work experience timeline
`Card.js`	Shared card UI component used across sections
`Haus.js`	The Magic: The Gathering page

`src/constants/`

All site content is stored as plain JavaScript exports. No CMS or API is involved.

File	Content
`articles.js`	Array of blog post metadata (title, date, id) and `getArticle(id)` lookup function
`articles/netflix.js`	Full body content for a specific article
`projects.js`	Array of software project objects
`work.js`	Array of work experience objects

Adding content

Add a new project

Open src/constants/projects.js and append a new object to the exported array. Match the shape of the existing entries exactly:

src/constants/projects.js

// Example: add a new entry at the desired position in the array
{
  title: "My New Project",
  text: ["A short description of what this project does.", "- Key feature or award"],
  image: "https://res.cloudinary.com/dlk3ezbal/image/upload/v.../my-project.png",
  isVideo: false,
  links: [
    { text: "Github", href: "https://github.com/paaatrrrick/my-new-project" },
    { text: "Website", href: "https://my-project.com" }
  ]
}

The first two entries in the array are visible by default. Place your most important projects at the top to ensure they show without requiring a click.

Add a new work experience entry

Open src/constants/work.js and add a new object to the top of the array (most recent first). Match the shape of the existing entries:

src/constants/work.js

// Example: add a new entry at the top of the array
{
  title: "Senior Software Engineer at Acme Corp:",
  text: "Built and maintained full-stack features for the core product.",
  image: "https://res.cloudinary.com/dlk3ezbal/image/upload/v.../acme-logo.png",
  timeLine: "Jan 2025 - Present. San Francisco, CA"
}

text and image are optional. For confidential or undisclosed roles, you can omit them and only include title and timeLine.

Add a new blog article

Create the article body file

Add a new file in src/constants/articles/, following the pattern of netflix.js. Export an object with title, date, and content (the content can be a JSX element):

src/constants/articles/my-article.js

const myArticle = {
  title: 'My Article Title',
  date: 'March 2026',
  content: (
    <main>
      <h1>My Article Title</h1>
      <p>Your article body goes here.</p>
    </main>
  )
};

export default myArticle;

Open src/constants/articles.js, import your new article, and add it to both articles and idsAndArticles:

src/constants/articles.js

import netflix from './articles/netflix';
import myArticle from './articles/my-article'; // add this import

const articles = [
  { title: netflix.title, date: netflix.date, id: 'netflix' },
  { title: myArticle.title, date: myArticle.date, id: 'my-article' } // add this
];

const idsAndArticles = {
  'netflix': netflix.content,
  'my-article': myArticle.content // add this
};

Verify the route resolves

Start the dev server with npm start and navigate to /blog/my-article to confirm the article renders correctly via the ViewBlog component.

Deployment

The site deploys to Netlify. Push changes to the connected branch (typically main) and Netlify will automatically trigger a build using CI=false npm run build. No manual deploy step is required. The public/_redirects file ensures the SPA works correctly on Netlify:

/* /index.html 200

This rule tells Netlify to serve index.html for every request path, which hands control to React Router running in the browser.

Do not remove the _redirects file. Without it, directly accessing any route other than / on the live site will return a 404 from Netlify’s CDN instead of loading the React app.

Overview

Site Structure

Components

Data & Content

Development

Prerequisites

Setup

Building and testing

Production build

Netlify build

Run tests

Project structure walkthrough

`src/App.js`

`src/components/`

`src/constants/`

Adding content

Add a new project

Add a new work experience entry

Add a new blog article

Deployment

Build docs developers (and LLMs) love

Overview

Site Structure

Components

Data & Content

Development

Documentation Index

​Prerequisites

​Setup

​Building and testing

​Production build

​Netlify build

​Run tests

​Project structure walkthrough

​src/App.js

​src/components/

​src/constants/

​Adding content

​Add a new project

​Add a new work experience entry

​Add a new blog article

​Deployment

Build docs developers (and LLMs) love

Prerequisites

Setup

Building and testing

Production build

Netlify build

Run tests

Project structure walkthrough

`src/App.js`

`src/components/`

`src/constants/`

Adding content

Add a new project

Add a new work experience entry

Add a new blog article

Deployment