manuel shared his work-in-progress Discourse-based project showcase at https://projects.kostka.studio/, seeking feedback on usability, content, and technical implementation—particularly around a custom sidebar/header layout using CSS hacks (like clip-path) that currently break on Safari. He acknowledged the site is desktop-only and minimally contented, and invited suggestions for improvements.
users Jagster and Bas provided detailed critiques: Jagster noted the layout is simple but the “Built with Discourse” block is broken on iPad. Bas highlighted several UX issues: lack of contact info, misleading “customer login” button placement (which he expected to lead to a customer overview), content disappearing when opening the menu, and styling bugs on Safari likely caused by JS/CSS race conditions. He also suggested hover states for links, clearer labels for project cards, and adding timezones/days to dates.
Tris20 agreed with Bas on the button confusion but praised the layout’s potential for specific user groups.
In response, manuel clarified the “customer login” is intentional as the platform was originally client-focused, but he’s reconsidering how to balance public showcase vs. private access. He confirmed the Safari issues stem from the clip-path hack and plans to refine the sidebar flow in a dedicated theme to solve the core challenge: achieving a fluid, full-width layout without a fixed-left sidebar.
I’ve been using a Discourse instance for managing client projects for some time and decided to flesh it out with more public content, share case studies and resources. This is still work in progress (only styled for Desktop, most topics have just minimal content) but I feel I’ve been looking at it for too long already to still make good judgements..
Would be great to hear some feedback:
in general: Is it intuitive? Does it make sense what I share? Do you think I should share something else or set different highlights?
edit: re-wrote this component to solve the mentioned issues on the technical side: A central layout component I use is a modified sidebar/header flow. The aim is to only show one primary navigation bar at a time, either the header or the sidebar. The plain component is at Manuel Kostka / Discourse / Helpers / Sidebar Flow · GitLab and I went with two approaches to build the flow:
re-declare the header above the sidebar as transparent and assign a grid to align the sidebar toggle and the logo with the sidebar width
use a style hack to extend the sidebar background (declare a full page drop-shadow and then limit it with a clip-path)
I went with this approach because so far I got the nicest animation keeping the default slide animations. So it’s just the sidebar sliding in, it’s background extended to the left and to the header, and the transparent header sits on top of it.
Downsides I see is that re-declaring the header as a grid doesn’t play well with other components that render on the header. And I haven’t found a way to make the clip-path hack work on Safari yet. So would be curious if some of the CSS wizards here have better ideas!
Maybe re-label that “customer login”? And I would also consider moving it to the header. Currently it is in the most prominent space of your site, almost like the main CTA.
Opening the menu makes the whole page jump, removing the top two elements. This feels a bit unintuitive?
Opening the menu on “about” and “topics” actually removes all of the content:
I also had this expectation, though it made sense that it was for client access as soon as I clicked it.
Bas’ other feedback is also on point, but generally speaking I like this layout and could imagine particular sets of users and use-cases would find it very welcoming.
Yes, it’s indeed the main cta as the platform was entirely for clients logging in for project management. I might need to re-think the idea of adding a public showcase to it. Or at least how to arrange the two aspects.
It’s only meant to include projects I implemented. I’d guess it would be clear if I link them to some case study topic for each.
That’s both because of the CSS hack with clip-path that I mentioned and doesn’t work on Safari so far.
Overall it’s probably still too experimental to use. Maybe I should try to work out the sidebar flow in a dedicated theme first. That’s the main implementation challenge I want to solve here after all: build a full-width layout that doesn’t stick the sidebar to the left window edge, but has a more fluid flow.
