Pawper.dev - My portfolio site!
A portfolio site is essential for any developer seeking opportunities, but to stand out I knew I had to do something above and beyond. So, I went at it with a couple goals:
- Keep it simple. There's no reason for a backend/SSR for this. Single page works fine.
- Generate the projects section dynamically and include project info.
Templating & Processing
When I started redoing this portfolio site, I had used Webpack before for a few different projects. I knew it would work for what I wanted to accomplish. I had also used EJS for templating with Express. I know that when I get into Svelte I will probably move away from EJS, but my experiences thus far with EJS have been solid.
As you can probably tell, I wouldn't normally classify Webpack as a great developer experience. Configuring it has what I would consider a significant learning curve. I'm very grateful for all the notes I took while learning. Nevertheless, Webpack is awesome for its plugins, loaders and dev server - the very things that make it challenging to configure. In the end having Webpack process SCSS, including while the live dev server was running (yay code injection!), made for a great developer experience.
I decided early on that I didn't want to have to update this site's repository every time I created or updated a portfolio project. I used Github, which has an API that can be accessed through the Octokit npm package. As a note, it's strongly suggested that folks using the API do so with authentication via an access token. So, I set up an environmental variable in a
There needed to be some way to identify my portfolio projects apart from my other repositories, so I added
This repository data is a great start, but I wanted the languages and other topics as well. For the languages, I wanted the associated colors too (the colors used in the language breakdown on repository pages). Fortunately there is a convenient repo for that.
(more info coming soon)