Less is more: presenting my updated web development portfolio

Less is more: presenting my updated web development portfolio

posted Originally published at dev.to 3 min read

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.

A picture of Ingo Steinke is featured on his new portfolio 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?

Flip card section on ingo-steinke.com

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!

If you read this far, tweet to the author to show them you care. Tweet a Thanks
Good Post thanks for sharing :-)

More Posts

ProfileKeeper: Simplify and Organize Your Digital Profiles in One Place

Elmer Urbina - Jan 17

CSS Specificity Explained: How to Control Which Styles Win

Bridget Amana - Dec 19, 2024

How Open Source is Shaping My Journey as a Developer

Anuj Kumar Sharma - Jan 7

Backed API development best practices

Anadudev - Jan 12

A Web App to Showcase all your GitHub Projects

2KAbhishek - May 6, 2024
chevron_left