An overview of my most recent portfolio redesign sprint

Something I hate that I like about AI, is that I can speak or type stream of consciousness into its little input box and wait for one of its mockingly endlessly infinite responses (which is based on nothing but probability and math no matter how much they try to market “reasoning” to us or whatever), but somehow it seems to, reason. And rather well. It takes all the worried thoughts and extravagant ideas I spew at it and it somehow seems to truly reason it, though I’m not sure if it’s reasoning with itself or with me sometimes. But regardless, this last time I got to feel a bit spastic over my online portfolio presence and solicited the chatbots advice over how I should present my art, career, and technology experience, I made an unexpected exponential leap in the quality of first output, and made amazing progress during sprint update of a whole list of projects, many in one-shot SPEC prompts and phased sessions. The experience I had in the successful execution of what I was envisioning at the speed it accomplished is unlike any I’ve had before with Claude. I’ve been using LLMs and specifically Claude to code since late 2022, essentially the dawn of AI. I started to learn programming just before the dawn of ChatGPT. I’ve seen it grow, and have unfortunately learned to program alongside its growth and have thus grown with it, kept up with it, and unfortunately rely on it. Though I’ve come to develop my own workflow, and see a serious improvement in the results I get after leveraging /skills and /plugins, having it create detailed SPEC.md files, working in phases, uploading my style guide to its memory, reviewing its work in the dev server as it flibbertigibits, leverage its remote-control tooling so I can fire off parallel workers on my desktop and control them from my phone as I tend to my newborn daughters every whim. What a crazy time to be alive. Life is hectic and competition is fierce. I need to leverage every drop of experience and resource I have, I feel. I’m competing in a job market with kids graduating from a myriad of colleges, including Ivy’s, around the Philadelphia area. I work as a literal middle school janitor and have an Art Degree. My own personal interests are vast, disparate, and honestly, I’ll probably never find my career niche in programming or development, or IT at all, even though the stories my dad tells me about the inept contractors at the Fortune 100 company he works for is existentially dreadful.

The truth is, I’m cooked, unless I leverage the boutique experience, and specialized skills I have in my career field. Even if it amounts to nothing fruitful, at least I can finally say I like the professionalism my online portfolio exudes.

philcifone.com

This used to be a basic linktree type website. Pure HTML, a few lines of CSS. I was committed to using it to actually learn web design instead of vibe-coding which is what my attempt to learn programming at the dawn of ChatGPT turned into. But after this domain sat stagnant for months and months, I finally decided to just go crazy on using Claude Code to develop it since at this point, my AI skills might actually be the skills worth promoting. What a sad state of affairs. I got tired of reading news reports about it’s hacking exploits, and wanted to make something useful and productive, even if just for me.

I now have a much more streamlined, unified showcase of my work and experience, urged from the advice of Claude, to focus the angle of my experience on digital archive management & preservation, as that seems to be the most applicable nexus of my interests: photography, preservation, web design, and digital storage infrastructure. And I couldn’t agree more, it seems to be definitive enough that even my own usual imposter syndrome can’t deny my experience in the field. For some reason I feel like I’m finally able to throw these disparate ideas at a sounding board of a personal assistant and smoothly catch them as they get tossed back in an orderly fashion, reorganized, polished, with your signature on them. It really does feel like the world’s best assistant. It never gets mad at you. It makes you feel like you’re the genius, like you did all the work.

photo.philcifone.com

I should iterate that all of these were existing projects, vibe-coded, yes, but with solid bones and context for Claude to work from. Only minor style changes were made to this one to reflect more of a terminal design. There’s more beyond the screenshot, but I am simply jazzed about the update to the hero page and how the text is warped in perspective with the fence. Though it’s still not quite right, I’ve pushed it live for now since I’m tired of things having to be perfect, I’ve been enjoying the freedom of not letting perfect be the enemy of good. Though I hope to do something a little more creative and cutting edge with it soon, likely inspired by the next project.

keystonedreams.com

This was the first time I was truly astounded by Opus 5.5’s abilities after what was essentially a one-shot prompt, with some minor fine tuning after the initial success. This was initially another project I was using to learn programming by hand, once again I decided to scrap this unrealized and more pointless than ever virtue in favor of skills I do have.

This site was initially a simple hero page and gallery of images with captions, a blog page that contains only two blog posts currently. Clearly I need to work on this project a bit more.

All my prompts for these existing project overhauls follow the same general routine, enter /plan mode > prompt “review current codebase, generate SPEC.md for ‘x new feature’ to be developed in structured phases for future Claude Code implementation, update Claude.md accordingy.” You can of course go into detail about features, requests, questions, ideas, etc. Using plan mode will then ask some engineering/design questions it feels it needs to ask and then it should start cooking on the SPEC.md file. These are practically gibberish to me. I’m amazed at the mix of plain text language it uses to literally describe a vibe, while also using highly technical development and programming terms I can only vaguely recall or understand. I’ll still review the practical elements and engineering decisions I can comprehend.

My prompt for this was roughly “I want to create an interactive map of Pennsylvania, utilizing the city locations from the existing image captions, and plot the images geographically on the map.” This is the sort of thing previous models would have needed serious guidance for I feel like, a lot of reference material, direct vocabulary of the tools and dependencies needed. Or maybe I’m just better at it than I used to be? It’s hard to believe the latter after I reviewed the generated spec. Yet we worked through it in phases, successfully. I made alterations and increased effort level along the way as needed, especially when creating accurate map boundaries. It still needed some reorienting when I got a bit too casual with a design prompt and asked it simply to “match the blog page to the home page” and it began literally assembling the blog page elements to resemble the layout of the home page when I simply meant for it to match the CSS styling. So its familiar pitfalls still exist in places, but this was the only one I encountered during what was essentially a sprint through my many projects.

negativeearth.net

The SPEC prompt for this update was also rather simple, “I’m inspired by the visual and practical application of the tree command on Linux, and the ‘spider-web’ feature in obsidian. I’d like to create a phased spec to implement these additional view options”. The tree view design didn’t need a single additional prompt, but the web view was almost too identical to the obsidian web after the SPEC began. Since it didn’t quite match my vision either, I had it remove the window it was placed in, turn the web elements into truncated but similarly styled blog cards, turned off the fluid motion of web elements, turn the connecting lines into avoidant right angled bold lines instead of dashed diagonals and made the cards avoidant too. It took the shape of my vision quicker than I imagined it would. Figuring out how to even begin programming something like this by hand would have taken me years to even comprehend. I just ask a chatbot in plain language something I think might be cool and it makes it actually work and look cool in a matter of minutes? In the SPEC was a thoughtful preview feature and a fully realized —sort-by tool for the tree view that I didn’t even have to ask for in the spec. May I remind you I’m a simple janitor, with an arts and humanities educational background. I’m curious what someone with real knowledge of these programming tools could do, or if it even matters anymore?

amandalampel.com

This was a one-shot prompt update of an existing static site that I was also pretty amazed by. The existing site was a template by an experienced programmer, but it quickly looked dated compared to my other projects, and I couldn’t let my wife be left behind. Keeping it simple but playful, it feels much more approachable than it did before. Sometimes you really can just vibe with it, and get a neat outcome.

The risk profile for these vibe coded projects is minimal, there’s no database, it’s all static. The risk is mostly server side, and I like to think I know more about web server administration than programming. But when core infrastructure like PHP is discovered by LLMs to have critical CVEs, it’s hard to not want to get left behind. Everything feels vibe coded these days. As much benefit as I get from these tools, I get worried there’s no turning back. Who will truly own the means to create these things when no one remembers how to do it themselves?

ronniebookbinder.com

Ronnie is my first real web design client. I’ve made amazing strides as a web designer over the last few years working on her site to showcase her portfolio to the best of my capabilities. The recent updates I made to her site sparked my own sprint across almost all of my projects. I had Ronnie gather the sizes of her paintings, and had Claude determine the proportional relationship between them all so the paintings represented their actual proportion in relation to the other paintings on the website. The effect was even better than I imagined.

Since people complain about vibe coded websites all looking the same, I have to disagree, or at least posit this possibility: that the developers of those sites simply don’t care, because now it’s easier than ever to add these small touches, I figure they never would have cared. I had Claude subtly animate these tiny little squiggles after seeing Claude had added a line break between sections, and thought if it could squiggle it would match the vibe of the text. A custom touch like that, inspired by something simple, shows even the smallest increment of care over those that just shit out vibe coded slop. I’ll call my code vibe coded, sure. I have a hard time calling my own work slop, because I do care about it. I’ll posit one more thing; that this fact will be the difference in who succeeds in the future and who doesn’t. Care. And whoever cares enough that even if these AI tools become obsolete or closed off, to learn and relearn everything we can to make sure humanity can continue preserving our culture in the media and art that represents us best. We can only accomplish this if we start preserving now, using every tool we can.