Roland Toth Pal

Welcome to my webdesign/development portfolio.

Learn about me or read more awesomeness in my blog.

Imre Baksa portfolio redesign 2019

Fresh portfolio site for Imre Baksa actor/director put together with Angular + ProcessWire.

I made the previous site with ProcessWire and after 3 years later it started to feel a bit clunky. It was not the CMS but mostly the frontend. At that time I was using jQuery with a masonry and other plugins. Posts came up in a lightboxed iframe which wasn't too fast either.

Recently I was digging more into Angular and this project seemed a great candidate for a rewrite. I kept ProcessWire as the API provider and used Angular for the frontend part. This setup may sound more complex as before (and it is), but the final result is faster in almost all aspects. The initial load takes about 5 seconds but after that the site doesn't require extra server roundtrips (except for the image and video assets).

The speed increase is partly due to Angular, and partly using some new features like the built-in lazy loading images (Chrome), lazy video embeds, replacing images with WebP format, etc. The overall site weight went down by about 40% which was very impressive.

All this was reflected in page speed scores as well:

  • GTmetrix: 100/96
  • PageSpeed Insights: 87/99

It goes without saying that the site performs much better on mobile, which was also an important factor.

Since there's no node.js on the server, I couldn't use Angular's server-side-rendering to fully support SEO. However, using simple PHP workaround to add the important meta/opengraph elements worked a treat (see my blog for the details).

The new design is very minimal but contains almost all the features of the previous one (filtering by year or post type). The current look may change in the future even though I like the cleanliness of it.

It was a great journey with some trial and error experience from a dev POV. However, the outcome confirmed it was worth the effort, plus I also learned a lot of new things.

https://baksaimre.hu/

AngularAPIPHPProcessWireDesignSitebuild2019

Kézművesovi 2018

Full rewrite of the Törökvész Úti Kézműves Óvoda nursery school website.

Seven years after having a WordPress site I rewrote it using Eleventy static site generator and made its look more modern. I struggled with the design several days until I got it look the way I liked and fortunately the nursery management was also loving it. It's much more simpler and less blog or portal looking and the important information can be found much easier. Unlike the previous version it's fully responsive which was one of the main motives for the change.

Photo galleries are using Google Photos and actually it's entirely CSS-only, thanks to Perfundo. It was fun setting it up and even though I had to make a few changes to it, it's working very nicely.

There is no CMS powering the site (it's entirely static) but content can be easily updated via GitHub through Netlify. This was my first encounter with this service and it's really handy, especially for such sites where there are not too many updates.

This was my third site with Eleventy SSG and it still keeps me amazing. I learned some new things and also simplified my workflow, making the tool more joy to use.

I really like how the site is renewed design wise and under the hood as well, and I hope parents will also like it.

https://kezmuvesovi.hu

EleventyStaticNetlifyDesignSitebuild2018

Redesign 2018

Yes, this is how it looks when a site showcases itself :)

A portfolio redesign is always a nuisance if you take it to heart. I was designing my site for about 2 years but I was never satisfied enough. I ended up leaving the design as it was because I had no big complaints against. On the other hand I really wanted to replace WordPress. I feel having a WordPress site as a developer is less professional, so to speak.

I wanted to use ProcessWire but when I read about Eleventy I couldn't wait to get my hands dirty. It's a static site generator and my portfolio seemed a perfect project to try. It took a few hours to get familiar with how it works and to sketch up my site. However, it took a few days more to iron out some issues and make some design adjustments.

It was a joy seeing how lean was the output: only static HTML files and the assets, altogether under 5Mb - the old version weighed above 100 Mb. Of course this time I took a more minimalistic approach and used up-to-date techniques (the previous site was about 5 years old). Because of this the site is very fast and looks much better imo.

I'm very happy with the outcome and that I have found Eleventy, it's a great and easy-to-use tool that I will surely use in smaller projects.

EleventyRedesign2018

PAQART

New website for PAQART - stylish and minimalistic.

3 years after the previous launch of PAQART website (which was my very first ProcessWire project btw) they decided to do a full brand overhaul which involved a fresh new website too. The design was made by another in-house designer who insisted on a very minimalistic look. This generated a few extra challenges but nothing that I couldn't solve with ProcessWire (and some brainwork).

I'm really happy with the outcome - not only the frontend but also the backend looks clean and simple. Adding or updating content is a snap even for non-tech users. Under the hood many of my custom modules are helping with this, which wasn't available back then (TemplateLatteReplace, AdminOnSteroids, MarkupSrcSet, etc). It's nice to see how they assist in making content management easier and cut development time.

http://paqartdesign.com/

PHPProcessWireMultilanguageSitebuild2018

Smiling Hospital Foundation

Website rewrite for Smiling Hospital Foundation from scratch from WordPress to ProcessWire.

When I left WordPress development years ago it was because of messy code, plugin dependency hell, update nightmares and lack of scalability - not to mention vulnerability. Even after years I spent more time with bugfixing and finding workarounds rather than actual development. In this particular case the rewrite was not an option but a must, even though the site I inherited was well written and organized. A critical plugin was generating so large database traffic that made the hosting provider issue a shutdown warning.

This is where we decided a complete rewrite in ProcessWire, that has multi-language support out of the box (and beeing one of the bests I have seen so far). Of course no CMS is perfect but I'm confident that it will cope with the challenges better. So far so good: the site is snappy, editors can manage multilanguage content easily and it's all responsive. From a developer point of view it was a joy to work with even if certain features needed to be added manually rather than just installing another plugin. Plus there's no shutdown notice message yet :)

http://www.mosolygokorhaz.hu/en/

PHPProcessWireMultilanguageDesignSitebuild2017

Drava Hotel Thermal Resort

New website for Drava Hotel in Harkány, Hungary.

The hotel is located next to Harkány Bath and Thermal Spa in quiet, forested surroundings encircled by an enormous green area with stately trees. Unfortunately their old design was less charming and the site was running on an outdated proprietary CMS.

We picked ProcessWire as the main CMS because it handles multilanguage very well. Localization was an important feature as the majority of the guests are foreigners. Currently the site has six languages and most of the content is localized thanks for the enormous work of the content editors. As a developer my task was to provide tools for them but fortunately it was easy with ProcessWire.

Another important goal was responsiveness as nowadays most traffic comes from handheld devices. The site includes several forms and integrated third party reservation services too.

Design-wise I tried to achieve something cosy using the hotel's CI colors and design elements, with large images and easy navigation.

After the go-live we got many positive feedbacks and the number of reservations grew to previously unknown heights, which was very nice to hear.

http://dravahotel.hu/en/

PHPProcessWireMultilanguageUikitDesignSitebuild2017