Jump to content

New Collaboration and new Website


diogo
 Share

Recommended Posts

Hey! I would like to announce that there is a new ProcessWire powered collaboration between me and Jan Ploch ? @jploch. When I moved to Hamburg, I contacted him through the forum and we ended up working at the same shared office. Meanwhile we collaborated on some projects and then started our own company (a GbR, in Germany). We named it KONKAT Studio.

Now we are publishing our brand new website konkat.studio

As you may know, Jan developed a page builder for ProcessWire called PAGEGRID. At first, we were going to develop our website the usual way, but then we decided that we should take PAGEGRID for a spin and beat the hell out of it, to see what we could come up with ?

We had this idea of three rows scrolling in different directions, and because PAGEGRID has scroll animations built in, we managed to do it all without writing a line of code. We may write a case study soon for those who are interested.

  • Like 17
  • Thanks 1
Link to comment
Share on other sites

@diogo @jploch Wow that is awesome! It's completely different than anything I've seen before. It's really fun to scroll through too. I'm curious about the development side, how do you take over the scroll behavior in that way? If I view the source, there are two completely separate <html> documents in the output, how is that possible? ? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Congratulations to both of you! I wish you all the best as well.

Small note: it seems the font you’re using has a (rather common) vertical metrics issue on Firefox leading to your text being cut by the overflow: hidden

129586229_Screenshot2024-02-29at18_22_11.thumb.png.d69dff0f37013cd10073d54fd14a8c03.png

You can learn more / test your font here: https://vertical-metrics.netlify.app/ and then maybe get in touch to see if this can be fixed by the type foundry

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

15 hours ago, ryan said:

@diogo @jploch Wow that is awesome! It's completely different than anything I've seen before. It's really fun to scroll through too. I'm curious about the development side, how do you take over the scroll behavior in that way? If I view the source, there are two completely separate <html> documents in the output, how is that possible? ? 

Thanks Ryan! We just take the vertical scroll position and convert it to translateX values on the rows, using requestAnimationFrame() to make it smooth. Well, PAGEGRID is doing it ?.

There was a second <html> added by $config->prependTemplateFile. We forgot to remove it when we moved it from local to a new install in the server ? 
Thanks for catching this!

15 hours ago, monollonom said:

Congratulations to both of you! I wish you all the best as well.

Small note: it seems the font you’re using has a (rather common) vertical metrics issue on Firefox leading to your text being cut by the overflow: hidden

Thanks Romain! 

Thanks for catching the problem with the font. For now we added a max-height only for Firefox using @-moz-document url-prefix(). We'll see if there's another version of Neue Haas Grotesk that doesn't have this problem. 

  • Like 3
Link to comment
Share on other sites

Thanks again for catching the font issue @monollonom! Actually it was not Haas Grotesque causing the problem with the vertical metric. The problem was that the font was not loading at all, probably due to the file being corrupted and you were probably seeing the Helvetica present on your computer. This also must have happened when transferring the site to the server. Thanks again!

  • Like 2
Link to comment
Share on other sites

@diogo PAGEGRID also looks amazing by the way. I don't have much experience with page builders, but it seems like PAGEGRID is really well thought out and does everything you could want.

  • Like 1
Link to comment
Share on other sites

All props to Jan! The PW people are definitely not an easy crowd for a page builder, but PAGEGRID is very well integrated in the system, with all the content that you add to the page saved as PW pages (a bit like with repeaters). Also, with PAGEGRID being just a PW field, like any other, you don't lose any of the flexibility of PW. It's not for everyone — it won't appeal to pure developers that don't care so much about design, and because it requires some knowledge of how CSS works, it may also not appeal to designers who don't care at all about the platform. Hopefully, there will be enough people in that middle who will appreciate it ? 

  • Like 2
Link to comment
Share on other sites

9 hours ago, diogo said:

Thanks again for catching the font issue @monollonom! Actually it was not Haas Grotesque causing the problem with the vertical metric. The problem was that the font was not loading at all, probably due to the file being corrupted and you were probably seeing the Helvetica present on your computer. This also must have happened when transferring the site to the server. Thanks again!

It does look more refined now, I was especially triggered by the animation of the “>” not being centered vertically while rotating ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...