konkat.studio relaunch – Building a design portfolio with PageGrid and ProcessWire

[jploch]

The toughest challenge so far?
Being our own client. 

Actually, the website we launched back then was just a placeholder, and the plan was to quickly replace it with a proper portfolio website. But as is often the case, it ended up taking a little longer than expected. A year later, we’ve finally done it: Our new website is live!

https://konkat.studio/

The goal of the new website is to showcase our work and better communicate our services. The site is bilingual and was built using ProcessWire and PageGrid. More on that later.

In addition to the website, we’ve also evolved our visual identity and logo. KONKAT (from concatenation) stands for linking individual elements into a functional whole. Our new branding makes this connection visible. In our case, we combine strategy, design, and technology into a unified process. The logo mark communicates this as well; as most of you probably know, the += operator in JavaScript joins elements and assigns the result.

It took us some iterations to get the design right, but once the design was done, development was pretty straightforward. Most of the time was spent preparing the content for the projects, and that is also where PageGrid was super useful since it allowed us to design the layout and content of each project individually.

Backend view: Managing project content and layouts with PageGrid.

PageGrid also significantly sped up development, as we built all other pages using only its core blocks. For the projects overview, for instance, we used the datalist block to automatically generate the listing from our project pages, working perfectly out of the box without any custom logic. We also added some custom code where it made sense, e.g. the scroll animation on the homepage was just a bit easier to achieve with custom code (it uses native CSS sticky).

Backend view: Using Pagegrid's inline editing to update some text on the english version auf our services page.

Another great thing is that PageGrid takes care of lazy loading images and videos (using the famous lazysizes js plugin) and is caching its content automatically. As a result, we got a 100 on the Google Lighthouse test on desktop and 99 on mobile without any extra optimizations (we are not using Markup Cache or ProCache for this site).

Backend view: Editing a thumbnail on the homepage

If you have any further questions regarding our workflow or process, feel free to ask. I will do my best to answer them. Also, please let us know if you find any bugs, since the website is brand new, there are probably some we haven't caught yet! We also welcome any feedback you may have.

Best,
Jan & Diogo (KONKAT)

[AndZyk]

Beautiful website. 👏

[monollonom]

It looks really nice and congrats on the (re-)launch!

A small bug I noticed though on the homepage with the scroll animation (using Firefox on MacOS):

 

 

[diogo]

Thanks for reporting @monollonom! It seems like our small animation on the logo, breaks the page in Firefox. While we don't figure this out, I removed it from firefox with @-moz-document url-prefix()

Not as nice, but at least the page works.

Edit: the animation works for Firefox now 👍

[ryan]

@jploch @diogo Awesome work, I love the new website!