Pawper.dev
Legacy Portfolio Site
<h1 dir="auto">Pawper.dev - My portfolio site!</h1> <p dir="auto">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:</p> <ol dir="auto"> <li>Keep it simple. There's no reason for a backend/SSR for this. Single page works fine.</li> <li>Generate the projects section dynamically and include project info.</li> </ol> <h2 dir="auto">Templating & Processing</h2> <p dir="auto">When I started redoing this portfolio site, I had used <a href="https://webpack.js.org/" rel="nofollow">Webpack</a> before for a few different projects. I knew it would work for what I wanted to accomplish. I had also used <a href="https://ejs.co/" rel="nofollow">EJS</a> 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.</p> <p dir="auto">While Wepback has some capability for processing EJS, but I couldn't get it to work the way I wanted. So, I went ahead and used the NPM package for EJS, which works great. I have <a href="https://github.com/Pawper/pawper.dev/blob/636e50df278275eeedf8e28fdcd87350bd152ad3/scripts/generateHtml.cjs#L7-L15">JavaScript</a> ran by Node to pass my portfolio projects' data to EJS then create the HTML, which Webpack will process separately (I'm sure there's a way for Webpack to do all this via a plugin, I just didn't take the time to research further).</p> <p dir="auto">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.</p> <h2 dir="auto">Dynamic Projects</h2> <p dir="auto">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 <code class="notranslate">.env</code> file.</p> <p dir="auto">There needed to be some way to identify my portfolio projects apart from my other repositories, so I added <code class="notranslate">portfolio-project</code> as a topic to each project. Then it's just a matter of <a href="https://github.com/Pawper/pawper.dev/blob/636e50df278275eeedf8e28fdcd87350bd152ad3/scripts/modules/GetPortfolioData.cjs#L10-L17">getting the data with JavaScript</a>.</p> <p dir="auto">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.</p> <p dir="auto">(more info coming soon)</p>