Over the past weekend I decided to redo my portfolio website, michaelsolati.com, a task which I was dragging my feet on. As a Developer 🥑 (Advocate) I speak at events, write blog posts, and maintain some libraries. When re-doing my portfolio I wanted to showcase all of that without ever needing to update the site. The new site does all that and a more, such as:
- It rips my work experience from LinkedIn via Puppeteer and shows it on
/. - Articles I've written on dev.to are shown on
/articles. - My most starred and recent GitHub repos are shown on
/code. - Recorded talks are fetched from a YouTube playlist and shown on
/talks. - Two themes are available, one for devices using light mode and one for dark mode.
- It works when JavaScript is disabled thanks to SSR running on Firebase Functions.
- It also works offline thanks to a service worker.
- It grabs my dev.to profile picture and saves it, as well as generates PWA icons from the profile picture.
- Updates the
manifest.webmanifestfile. - Saves all the cover image or social image from my dev.to posts.
- Saves all the previews images of the YouTube videos in the playlist.
- Generate screenshots that can be used for sites like Twitter of Facebook.
- GitHub Actions will update all the data and images then deploy to Firebase once a week.
It honestly does a lot, but here's the exciting part...
IT IS ALL CUSTOMIZABLE!
Meaning you can fork it and only need to update the environment.general.ts file in order to have the site completely customized for you.
The project is available on GitHub, just checkout the README to get started.
Enjoy y'all!
To keep up with everything I’m doing, follow me on Twitter and dev.to. If you’re thinking, “Show me the code!” you can find me on GitHub.
Really neat approach. I could definitely see this becoming a pretty standard way for developers to build personal sites because we do our work and reach community in so many places. Automatically pulling from those sources definitely makes sense!