Using AI to update my portfolio & website

As I wrote in my post about hiring (Open that here), I have been looking at a lot of portfolios lately. After reviewing dozens of portfolios from high incredibly talented people - and judging them - I reflected on what my own portfolio said about me... and came to a similar conclusion to this cat:

I should update my portfolio.

(If you're one of my colleagues reading this: no, I'm not leaving, I'm having a strange idea of fun)

My old portfolio was from 2018, and looked like this:

I had been casually messing around with a better website with a blogging platform (you're on it!), but hadn't considered how I would show case studies on this site if the time came.

At the same time, the directive has come from people with much higher salaries than I have: Go figure out how to use ✨AI✨ to work better.

So I took a weekend (and a couple movies to entertain my toddler) and used some ✨AI✨ to see how it could help to achieve two goals:

• Flesh out an existing case study (shared at a conference in 2024) into a full post
• Improve the usability and appeal of the "Case Study" section of this site

Fleshing out an existing case study

At UXPA Boston 2024, I presented the following case study:

Presentation: Case Study in User-Centered Product Planning & Facilitation - UXPA Boston 2024

Some of us are lucky enough to work with product and engineering who are always aligned, always focused on the right problems, and do a great job communicating. But the rest of us? We’re working with imperfect processes. In this talk, presented at UXPA Boston 2024, I shared a

Katie RikerKatie Riker

I am very proud of the work I talked about there, but whenever I thought about writing it up as long-form content rather than a slide deck... I always had better things to do. Classic blank-page syndrome.

I used my locally installed instance of AnythingLLM (running Mistral 7B, for no reason apart from I already had it installed) to generate a written case study based on my slides. I exported my Google Slide deck as a .txt and imported the file into AnythingLLM as a source

After experimenting with a couple different prompts, I got incredibly frustrated with the output, both in content (it was so boring to read) and in tone (sounds nothing like me!) but decided to use it as a starting point none-the-less.

In the end, my determination to be "better than that damn LLM" led me to write the entire case study myself, and delete almost every word the AI gave me. This reflects a lot of my experience trying a LLM for anything but the most basic content – the result doesn't feel right.

Takeaway: For stuff that I am experienced in and have opinions on (writing), I found using a LLM very frustrating.

Case Study: User Centered Product Planning

Influencing Strategy Through Early Collaboration and Empathy Workshops - Where UX spotted an opportunity to align the team on user-centered outcomes.

Katie RikerKatie Riker

Improve the usability and appeal of the "Case Study" section of this site

This website is based on the open source Ghost blogging platform, and I simply picked one of the default templates that seemed nice. (What do you think of my taste?)

But when looking at it as a presentation of case studies, the template misses on a few aspects:

• Text-forward, with few images on the main page. (The "Featured posts" is the only OOTB option that has images before you go to a post itself)
• No way to default a CTA at the end of case studies to "go back and see more" (one of my fatal errors in the hiring review checklist!).
• All the posts are mixed up - blogs and case studies, presentations and recordings... they all default to one long list.

There are some configuration controls within Ghost, and I tried a lot of them. I injected custom CSS to change the default styles of the theme to better suit me; I messed with every switch and every setting... but I couldn't get it to solve these issues. What I needed to do was customize my theme. Which meant code. Which is not my core skill set.

A few months ago did attempt to modify the theme. I set up a local Ghost instance, cloned the theme repo, and tried to mess around with it. I got nowhere.

This time, I downloaded Cursor, and decided to utilize the AI features to help me code.

Within an hour, I found the process much more effective than before.

• I generated a stylesheet based on classes I defined (poorly) in a handlebars file
• I took screenshots of the implementation, described what I wanted different, and the integrated model made suggestions of CSS and HTML changes to get there
• The tooling was able to troubleshoot and fix formatting much quicker than I would of by hand (yes, I know I could have used a linter, but this was all so smooth!)

Basically, I was able to feel like I was in Star Trek and just tell the computer what I wanted it to do. Very, very cool.

However - I didn't learn a gosh-darn-thing. Getting answers and suggestions quickly meant that I accepted changes quickly and just tested to see what it did. I couldn't recreate this work again without using an AI. I can't verify if this is a good implementation or not, because I just don't know enough; and I didn't gain any skills that will let me assess this better in the future.

But hey - I have a shiny new Case Studies page now!

Takeaway: For stuff I have little experience in, like coding a Ghost theme, I found a LLM immensely helpful. It is easy to see how this can take away some of the most frustrating/annoying aspects of coding and be helpful. However, by using it I gained minimal additional skills, and I'm not sure that's a good direction to go.

I didn't use any AI to write this post - but I did generate an image for it. I used OpenAI's DALL-E as I haven't had time to experiment with running local image generation, but when I do I'll swap it out and update!