Start with real work.
Use project artifacts, actual captures, test records, and explicit project stages. Separate implemented work from proposed research and future production features.
07 / THE PORTFOLIO, AS A PRODUCT
Built. Tested.
Rebuilt.
A living project in design, implementation, and iteration. This is how a single case study became the portfolio you’re exploring—and what the feedback taught me along the way.
Make the work easy to find.
Make the thinking visible.
I needed a home for an emerging practice across UI/UX, manual QA, and visual storytelling. The site had to give each project a clear story while still feeling like one personal portfolio.
Build a visual language.
A graphite canvas, warm orange annotations, generous typography, a connected JC mark, and consistent project frames make the collection recognizable.
Work across screen sizes.
Implement the site with HTML, CSS, and JavaScript. Check navigation, narrow layouts, motion behavior, images, downloadable evidence, and the published release.
Turn feedback into changes.
Use the issue, a concrete change, and a follow-up check as the record. The mobile cursor report is one example of why an attractive desktop view is only a starting point.
This is a self-initiated portfolio built with AI assistance. I supplied the project direction, personal work, references, and feedback; AI supported copy, coding, debugging, documentation, and the skills film. The history records the collaboration without claiming that I manually authored every part or performed research that has not taken place.
A quick look.
A connected practice.
Actual project artifacts connect the skills I’m developing: evidence-led UX, responsive interaction design, manual QA, visual storytelling, and iteration. The film uses on-screen text and has no audio.
Read the film transcript
- 00:00–00:05 Josh Czarnecki. UI/UX design, manual QA, and visual storytelling. Learning by making.
- 00:05–00:12 Servant: evidence-led UX. Compare the actual website with an independent concept. Observations, hypotheses, and clearer service routes.
- 00:12–00:19 Gather: interaction design. Shared plans, RSVPs, trip flows, and responsive screens. An interactive app concept.
- 00:19–00:26 Manual QA: TaskFlow, ShopFlow, and BookingFlow. 39 manual executions, six defect observations, test design, boundaries, saved data, and retesting.
- 00:26–00:33 HuhPop: visual storytelling. A 44-episode production library. Sourced scripts, AI-assisted artwork, captions, narration, and export checks.
- 00:33–00:38 This portfolio: build, test, improve. Personal identity, mobile feedback, purposeful motion, and a documented change log.
A report is a starting point.
The behavior is what matters.
| Feedback | Change made | How to check it |
|---|---|---|
| Orange cursors stayed inside the name on mobile after typing finished. | Replaced one animated pseudo-element per character with one caret positioned at the active letter. Text stays readable without JavaScript; motion controls reveal the completed name. | Open at phone width, let typing finish, rotate or resize, pause/resume motion, and return from a background tab. Only one caret should remain, after the final period. A real iPhone Safari retest is still needed. |
| The Servant audit should show the actual website behind the mockup. | Made the dated source homepage visible in the work collection and placed an explicitly labeled source/concept comparison in the case study. | Open the original captures at full size, follow the official source link, and distinguish observations from proposed behavior. The October 15 capture is a historical reference. |
| Explain skills quickly and show how the portfolio developed. | Added a short captioned skills film, this case study, and a downloadable chronology based on Git history and the hosting record. | Play the film, read the transcript, follow each project, and trace milestones to the dated records below. |
Small changes.
A clearer whole.
This is a grouped history, not a claim that the site was completed in one pass. Source commits establish the design and content milestones; the October 17 publishing record adds the Cloudflare release. Dates are release records, not hours worked.
The starting point
A first independent Servant case study gave the portfolio a concrete project to explain.
Record: 1f513a4A visual identity takes shape
Rebuilt the portfolio around a graphite canvas, orange accents, large typography, selected work, and a dedicated case-study page. HuhPop joined as an active creative project.
Record: 7fbc4e1 / 6a7dd8bMake the page feel like me
Added Gather, a type-in introduction, Czarnecki, a cursor that followed the text, fuller About content, and direct routes to work and personal background. Replaced the floating cursor decoration with subtler canvas motion.
Record: 6995f9a / e4d4e60 / 18036f1 / 7d408b0Refine identity and small-screen behavior
Replaced spinning marks with a connected JC monogram. Iterated its letter joins, tracing direction, and timing. Added a portrait, corrected its continuous outline, cleaned up the mobile hero, and linked a phone view of Gather.
Record: 4e3c72c / a9b4b8e / cc69c10 / 7a17182Bring QA into the story
Added TaskFlow and my growing quality-assurance practice. Reframed its image as a desktop preview so the work collection felt more consistent.
Record: 8058961 / 67db2e5Strengthen the evidence
Combined TaskFlow, ShopFlow, and BookingFlow into one detailed QA collection. Refreshed Servant against dated public-source evidence, linked the coded concept, connected practice skills to real projects, refreshed the portrait, and updated HuhPop through episode 44.
Record: 57ec379 / fa5feb9 / 44a6622 / 8baaa4dImprove sharing and project hierarchy
Simplified the Servant thumbnail, placed HuhPop last, and set the portfolio hero as the social-link preview.
Record: f89462e / 10fa3b0Publish a free public address
Deployed 234 static files to Cloudflare Pages, verified the key pages and downloads, and pointed the canonical and social preview to josh-czarnecki-portfolio.pages.dev. This is a hosting milestone recorded outside Git.
Record: Cloudflare deployment recordLet feedback shape the next release
Replaced per-letter cursor animations with one moving caret; brought actual Servant references into a direct source/concept comparison; added this portfolio case study, a downloadable history, and a short skills highlight film.
Record: Feedback releasePolish comes from
following through.
Skills I’m carrying forward
- Translate references into a consistent personal identity.
- Explain work through evidence, scope, and decisions.
- Connect responsive UI with functional behavior.
- Turn a bug report into a focused fix and regression checks.
- Use AI outputs critically and document the collaboration.
- Maintain public releases and an understandable change history.
What still needs work
Check the revised caret on the reporting iPhone, continue keyboard and screen-reader review, gather direct feedback on project comprehension, and maintain the log as new work ships.
The site demonstrates practice and iteration. No hiring outcome, measured usability lift, accessibility certification, or production-client result is claimed.