The portfolio 2.0 project continues. It is slower now as I do my case studies and make artifact images (and blur sensitive information). That takes soooo much longer than working with Cursor and coding. LOL
Today was a lesson in bridging gaps—both in code and in communication.
I spent a chunk of time wrestling with two critical interactive features for my portfolio: Lightbox functionality for artifact images and a Before/After Comparison Slider.
The slider was the real challenge. I knew exactly what I wanted: a drag interaction that reveals the new design while keeping the laptop device frame static. For over an hour, I went back and forth with Cursor, getting close but not quite there.
Then, the lightbulb went on. đź’ˇ
I realized I wasn't giving the AI the right context. I switched to the Figma MCP (Model Context Protocol), fed it the specific structure of a slider component directly from my design file, (I just used a generic figma community resource of a slider) and... boom. It nailed the CSS masking and JavaScript coordination on the first try.
Try it yourself - drag the slider to see the transformation:
Drag the slider to compare the transformation
But the day wasn't just about code. While debugging event listeners on the lightbox (Cursor says, open the console panel and show me what you see!), I was also rewriting the copy for my "Legacy Migration" case study.
I realized that my raw notes were too "in the weeds" for a non-technical recruiter. So, I turned to the LLM again—not for code, but for content strategy.
I fed it my technical documentation and gave it a specific directive: "Rewrite this to pop for an HR Manager who only has 6 seconds to read it. Focus on ROI."
The difference was instant.
My Draft: "I reorganized the settings page."
The AI-Polished Version: "Tackled 40 years of legacy configuration debt, utilizing AI to restructure the Information Architecture."
One task requires JavaScript event handling; the other requires strategic storytelling. As a Design Engineer, I love that I have an AI partner that helps me execute both at a high level.
#DesignEngineering #Figma #CursorAI #FrontendDev #UXWriting #PortfolioBuild