Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ My personal page. Over time it turned into a complex project itself:
- GitHub's markdown from the projects' readmes is rendered within the page, including media.
- Includes dynamic \<meta> tags for each project page, including individual og:image tags with sizes.
- All routes have appropriate JSON-LD objects with all relevant information, even if Google or other search engines currently don't support some of them.
- Thanks to the above and a bunch of other optimizations, all routes, including the heaviest /projects route, score a perfect 100/100/100/100 on [Google Lighthouse](https://pagespeed.web.dev/) mobile, which throttles to a slow 4G network connection.
- Thanks to the above and a bunch of other optimizations, all routes, including the heaviest [projects/](https://piech.dev/projects/) route, score a perfect 100/100/100/100 on [Google Lighthouse](https://pagespeed.web.dev/) mobile, which throttles to a slow 4G network connection.

_Not a single word of this readme was written with AI. Letting you know just in case you don't enjoy reading AI-generated documentation._

<img src="public/media/projects/piech.dev.webp" alt="Projects page of piech.dev" title="Projects page of piech.dev" width="500" />

## GitHub-based personal projects browser

- The projects/ page is managed via minimal configuration, just based on repository names which are then fetched during the pre-build step. Projects metadata and READMEs are fetched directly from GitHub at build time.
- The [projects/](https://piech.dev/projects/) page is managed via minimal configuration, just based on repository names which are then fetched during the pre-build step. Projects metadata and READMEs are fetched directly from GitHub at build time.
- Markdown rendering transforms relative links to proper URLs and handles videos, so that you can see video previews of my projects without leaving my site.
- GitHub repository topics automatically become \<meta> keywords.
- GitHub information, as well as images are dynamically pulled to each project's \<head> into appropriate og: tags, allowing for custom preview card of each project in social media and on messengers.
Expand Down Expand Up @@ -79,14 +79,14 @@ Steps to follow when adding a new route to the app:

### Adding a new project

Steps to follow when adding a new project to `/projects/`:
Steps to follow when adding a new project to [projects/](https://piech.dev/projects/):

1. Make sure the GitHub repo is publicly accessible, has topics ("keywords"/"tags"), repo description (the short, character-limited one), and a descriptive README.md, preferably with some media assets to make it more interesting.
2. Add a video (preferable) or an image to `public/media/projects/` that will be project's preview on the project card.
3. Add an image to be used for og:image and in JSON-LD to `public/media/projects/og_images/`.
4. If there are any new technologies used, add them to `src/features/Projects/technologies.ts`. Add their logos to `public/media/logos/`.
5. Add the new project to `src/features/Projects/projectsList.ts`.

The project should appear in the `/projects/` route at that point.
The project should appear in the [projects/](https://piech.dev/projects/) route at that point.

At the moment only GitHub-based projects are supported.