Less is more: my updated web development portfolio
A little less, at least: My web development portfolio website used to be a compact one-pager but full of information that grew in size over time. So, I wanted to remove some buzzwords and undesirable tech stacks and focus more on my key strengths and preferences: CSS-based accessible and responsive front-end web development.
DevUX: development and design collaboration
Consequentially, I tried to make my portfolio website even more visual so that you can understand what I have to offer, even if you don't understand English or German or if you're a UX/UI designer or you just don't care about technical details.
My portfolio website is a work in progress that I started between projects in the spring of this year; now, I proceed with a much more limited time budget besides a packed schedule, so I must prioritize my tasks and decide between pragmatism and perfection.
I finally decided to move much of the content to a new "about me" page and only use shorter teasers on the home page that link to the more detailed section.
I'm still not content with my code in its current state, but I have a clear idea of how it should be better: more concise, less surprising, and easier to maintain.
Show and prove: projects, testimonials, tested code
I had already improved test coverage using screenshot diffs, but I still don't test hover states and selection colors. I still haven't refactored my monolithic scripts.js to TypeScript modules and turned my legacy CSS code into a modular design system.
Instead, I decided to accumulate even more technical debt to update my content and make it more visually appealing. I feel like a real frontend developer now!
A flip card effect that started as a simple gimmick, requested by a customer for their WordPress website, turned into a more accessible and responsive version that works on mobile and respects reduced motion preference by adding just a little more CSS and JavaScript, so I thought, why not use it to add some screenshots and even more motion to my project portfolio?
This effect doesn't scale well for many obvious reasons. If you plan to reuse it, stick to small sizes, put a lot of whitespace around each element, and don't use clickable links on the front sides.
Experiments vs. finished websites
My initial CodePen does not resemble the final implementation, at least not visually, but it's closer to the simplistic approach I would recommend.
See codepen.io/openmindculture/pen/vYqWgaw
A lot of code doesn't make much sense when taken out of context anyway, so that's what creative web development is all about: thinking beyond the existing and anticipating challenges before problems arise. Of course, there will still be bugs and unexpected requirements. Still, it helps to imagine real users using an upcoming website and do proof-of-concept experiments before deciding on technology, architecture, and implementation details.
Showcase: customer projects
I decided against perfection. Customers usually don't care about clean code showcase projects; they need a website to sell products and promote their business. So do I. Here are some recent projects featured on my portfolio website:
Transparency: nothing to hide, but already a step ahead
My code is still completely open source, including documentation, changelogs, and issues. You can read my blog posts and copy my CodePens, if you like. I am already a step ahead anyway.
As a creative web developer, I can design simple websites or extend an existing design. Still, I don't want to create a complex design system or try branding when there are people who do this professionally. If you are a designer looking for a developer, we can collaborate!