piech.dev

piech.dev

My personal page, visit it to find out more.

How it works - dynamic, GitHub-based projects

• Projects are defined in src/features/Projects/projectsList.ts (name, optional repoName, technologies, and a local preview image/video).
• During build or locally, src/utils/fetchGithubData.ts fetches metadata and READMEs for those repos from GitHub and writes temp/githubData.json.
• At runtime, src/utils/githubData.ts imports that JSON and exposes:
  • REPOSITORY_INFO[repo] → repo name/description for cards
  • README_CONTENT[repo] → raw markdown for details view
• The projects list (Project.tsx → ProjectCard) shows each project with its preview and GitHub description at https://piech.dev/projects/.
• The project details page (ProjectItem.tsx) renders the repo README at https://piech.dev/projects/:repo using ProjectMarkdown, transforming relative links and embedding media.

React pre-rendering with zero JavaScript served

• The whole site, including all project routes, is pre-rendered with React Router in framework mode into HTML.
• The site ships without ANY client-side JavaScript despite being built in React.
• Thanks to the above (and a ton of other optimizations), the heaviest route (/projects) scores perfect 100/100/100/100 on pagespeed.web.dev mobile (which throttles to slow 4G)