Skip to main content
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:
ToolMinimum versionCheck your version
Node.js14node --version
npm6npm --version
Gitanygit --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

1

Clone the repository

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

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.
3

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:
FilePurpose
Blog.jsLists all blog posts from the articles constants
ViewBlog.jsRenders a single blog post matched by :id route param
Work.jsRenders the work experience timeline
Card.jsShared card UI component used across sections
Haus.jsThe Magic: The Gathering page

​
src/constants/

All site content is stored as plain JavaScript exports. No CMS or API is involved.
FileContent
articles.jsArray of blog post metadata (title, date, id) and getArticle(id) lookup function
articles/netflix.jsFull body content for a specific article
projects.jsArray of software project objects
work.jsArray 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

1

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;
2

Register the article in articles.js

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
};
3

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.