It's fairly standard for web developers to create a portfolio site to showcase their chops. But for product people, it doesn't seem that common.

I did find this reddit post that collected a bunch of product manager portfolios, and it's fun to browse through many examples. Some are pretty great, others seem like after thoughts. Which, I get it, we're all busy working our product jobs.

But for me, I really enjoy tinkering with websites and coding, and I wanted a place to share thoughts and personal projects. And on top of that, why not make it a portfolio of some work examples too?

The tech stack

Here's the tech behind this simple site:

• 11ty static site generator

• Nunjucks template engine

• Decap CMS for the blog

• Everything else is HTML/CSS/JS baby. (Actually LESS preprocessor for easier CSS nesting).

  • Shoutout to codestitch for the template starters!

Why a headless jamstack versus wordpress?

I've been fighting Wordpress for over two decades, including all the page builders like Elementor, Divi, WPBakery, Thrive, etc. I've also used Squarespace, Wix, Drupal, Joomla.. all the way back to Blogger.com and GeoCities and Dreamweaver way back in the day.

I'm dating myself for sure, but you get it, there are lots of quick options for a simple blog. But there's something so pure, fun, and manageable with plain ol' HTML/CSS. Plus, it's way better for page speed.

And then there's the hosting. With this stack, all changes - either locally or in the Decap admin interface - trigger automated git commits. And then Netlify picks it up and rebuilds everything in seconds. In the end, it's incredibly quick, and perfectly free on Netlify's free tier.

What about other headless CMS options?

Recently I've made it a personal goal to learn about other jamstack options. Strapi, Ghost, Sanity, Storyblok, Contentful, Payload, CloudCannon, there are so many. I think they're all pretty amazing for large enterprise sites, but for a personal blog I don't really need React props or a visual editor or a database even.

The closest I've found to the speed and purity of this stack - in terms of building in HTML/CSS and then configuring a little bit of frontmatter and templating - is Jekyll with Liquid. Yes it does take installing Ruby to setup but it's not a big deal. But using this in conjunction with Siteleaf for a visual editor is actually really cool - and it still uses the git workflow, and in fact can publish directly to Github Pages.

But there's other benefits to this stack, and that's Netlify functions. For light backend needs, it works beautifully. I'll write about it in a future post.

Decap CMS is just too good

The real reason for this stack is that Decap CMS is just dead simple. You can customize the blog editor to only show you what you need - nothing more, nothing less. That's a huge relief after putting up with a CMS like Wordpress where you're forced to look at everything while trying to write a simple blog post.

Decap of course is way more powerful and can be used for many other dynamic content, not just blog posts. Events, products, etc. And it's free, fast, and integrates beautifully with Netlify free hosting (Decap used to be Netlify CMS).

If Decap ever goes away, your content is still safe as markdown posts. Just plug in another headless CMS and you're off to the races.

Content choices

As for the not tech parts, I made a couple decisions on the homepage that I thought would offer a little extra oomph. First I used Figma to select colors, and then I played with fonts and settled on DM Serif for headlines and Roboto for everything else. The fat serif headlines combined with easy to read Roboto really resonates with me, but playing with fonts into the wee hours might do that.

Git Timeline for Career Journey

I had this idea to tell my story in a nerdy way that maybe someone would appreciate. It's sort of embarrassing to write about oneself, but I suppose if someone is visiting my portfolio then I can assume they're interested in learning more about me, so why not make it fun.

I looked at a lot of examples of git timelines and git graphs on codepen, but nothing really gelled, so I drew up some mockups, made a little rough version, and then... asked Claude to help turn it into an SVG generator. As mentioned above, I didn't want this to turn into a React site, and building an even simple SVG from scratch is painful.

The only bummer is that the layout is so fixed and horizontally biased that it didn't make sense to make a responsive mobile version. So on narrow screens, the git timeline is just not appearing. Sorry phone people.

Tech Stack Logos

The other piece that I thought would be visually appealing is a logo farm of all the technology I use or have experience with. Instead of listing it all out with text, I feel like the logos are recognizable enough for people in our industry that I could get away with it.

For the 'Creative and Digital Tools' section, none of the logos have any text in them at all. Because if you're also a creative, then you know what they are? Maybe not, but I like how it looks, so there.

Let me know if you have any questions about how to implement this simple tech stack on your own site!

// end Hello World.