Thumann Media (my personal website)

[Stefanowitsch]

Hello there!
I recently updated my own website - I am a frontend developer living in the northern part of germany.

https://www.thumann-media.de

The old design has been online since five years (time flies...) and I thought that it was time to make things a bit flashier and include a better showcase of my web projects to give the user a more detailed description of the project features.

It's a classic one pager design just for the sake of keeping things as short and simple as possible (I hope the image fits inside this thread).

 

The new version of my site includes a "portolio section" where users get a sneak preview of each project I've been working on recently. It features nice fade-in-out animations powered by aos.js (animate on scroll).

Also new is that every project gets a dedicated subpage where I describe some of the unique features that this website offers:

 

I like to have some eye-catchers. I always used the animated wave theme on my website, so why not include a message in a bottle?
The animation of the bottle is done via the awesome GSAP animation engine (https://greensock.com/gsap/). This is a super powerful library and I just started diving into the possibilities of this one.

 

Tech Talk:

Some of the things I used:

- ProFields used for this one (repeater matrix, combo)
- Frontend framework is Bootstrap 5. I had a hard time of deciding between Bootstrap and UIKit as my new go-to framework (I am bit biased though because I've been always using bootstrap since version 2). But the grid system alone makes bootstrap so flexible and powerful for me, so I will stick with it for another 10 years I think...
- https://github.com/nbcommunication/PageimageSource for image srcsets with webp support
- Ajax driven contact form with bootstraps frontend validation
- AIOM+ for compressing the assets (CSS and JS) https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify
- SEO Maestro
- WireMail SMTP

 

AOS.js vs GSAP

Which animation library you should use?

I discovered the GSAP library a bit too late in the development process, tough. So I am still using aos.js for some animations. AOS has a super small footprint considering its filesize (14 kb, minified) and is super easy to use and super reliable.
Whereas GSAP is quite large (71kb, minified) and if you want to make use of scroll triggers you have to include a second library which adds another 40kb.

AOS has lots of nice animations which come out of the box. GSAP does not offer this, you have to program those transitions yourself. So you need to spent some time, reading the docs and looking for tutorials! GSAP can do all that AOS can and beyond. If you want to have full control over everything I would advice you to give it a try.

 

So that's all for now. I wish all of you a great weekend!

 

[pwired]

Hi, did my hint motivate you in some way or the other ? Anyway it looks even better than before. Thumbs up for the nice work you did on it.

[bernhard]

Absolutely stunning site! Congrats. I'm a little sorry for not choosing UIkit, but in the end the result counts and it looks absolutely great!

[Stefanowitsch]

45 minutes ago, pwired said:

Hi, did my hint motivate you in some way or the other ? Anyway it looks even better than before. Thumbs up for the nice work you did on it.

Thank you! I was thinking about doing a redesign since quite a time. But you motivated me to keep the look an the structure closer to the original version ?

[Darlenere]

The site looks stylish and concise. You have an excellent job

[gornycreative]

I liked the rendering idea for showing both desktop and mobile versions of projects. That's a really cool practical display for portfolio work.

I need to think more about adding animation to sites more - the dynamics and mood it adds to sites really does make an emotional impact. Works very well in your case!

GSAP is incredible. I've been playing with it in conjunction with lottie presentation and there's just a lot of cool control it offers for scrolling timeline effects.

I still have folks ask about bootstrap and foundation along with uikit. I think all three have their benefits.

[Stefanowitsch]

10 hours ago, gornycreative said:

I liked the rendering idea for showing both desktop and mobile versions of projects. That's a really cool practical display for portfolio work.

I need to think more about adding animation to sites more - the dynamics and mood it adds to sites really does make an emotional impact. Works very well in your case!

GSAP is incredible. I've been playing with it in conjunction with lottie presentation and there's just a lot of cool control it offers for scrolling timeline effects.

I still have folks ask about bootstrap and foundation along with uikit. I think all three have their benefits.

Animations can add life and dynamics to your site. But they should be kept simple and subtile. I mean with those powerful animation engines and methods today you can animate almost everything in any way you want. Its super fun from a developer perspective but it might confuse the ordinary user who visits your site.

What really impressed me is that UIKit has everything "on board". You have sliders, lightboxes, and even scrolltrigger stuff for animations and fade-ins. So you need no 3rd party plugin. Everything is controlled out of the box via data-attributes directly in you HTML code. That is super straight-forward.
I just could not live with the way the grid system of UIKit works. My projects are always built upon the bootstrap grid system with all the utilities. I almost don't use any other feature it offers, so that is the most important thing to me.

Anyway if you want to do more advanced animation and scroll trigger applications someone would propably stick to a solution like GSAP in favor to UIKits built-in tools anyway.

[bernhard]

3 hours ago, Stefanowitsch said:

I just could not live with the way the grid system of UIKit works. My projects are always built upon the bootstrap grid system with all the utilities. I almost don't use any other feature it offers, so that is the most important thing to me.

I still don't get the problem here. Could you please explain that in detail if that does not feel too off-topic? Isn't the uikit grid very similar to the boodstrap grid? Isn't it just a matter of syntax where you write uk-width-1-3 (=1/3) in uikit and col-4 (=4/12 =1/3) in bootstrap?

[gornycreative]

I've had to mod my UIkit to include more subdivisions for the grid. UIkit 3 also doesn't have push pull and a few other source ordering features. They sortof expect you to order and filter based on content but sometimes it is nice to be able to have content semantically and visually ordered differently. Not sure why Yootheme made this choice, as the feature existed in UIkit 2.

You can do a lot of similar things with flexbox, but if folks aren't as familiar or comfortable with flexbox, it's way more complicated than how Bootstrap does it. I think UIKit decided to really enhance the flexbox usage.

There isn't really an easy UIkit variation for things like .offset and .order