Jump to content

Website for a Business / Training / Consulting Coach


Stefanowitsch
 Share

Recommended Posts

After a long time of concept work and a (not) so long time of development I launched a new website:

https://www.marvin-wieckhorst.de

Beware: German Language ?

The whole site consists of 5 pages only. But the pages on this one are huge and full of different design elements. I'm trying to split it into interesting screenshots here but I think it's best if you visit the site and have a look at it by yourself.

Here are some pictures, the tech talk section is below.

Introduction with large images and catchy headlines on each page:

screencapture-marvin-wieckhorst-de-2022-07-13-09_02_03_2.thumb.jpg.bbbb72b9f83e84bc2e967ba46b03ed9d.jpg

 

Different teaser elements:

screencapture-marvin-wieckhorst-de-2022-07-13-09_02_04jpg.thumb.jpg.e343e20fdba90a9e3fe4ee95b9472083.jpg

 

Rocket animation with some vector images:

screencapture-marvin-wieckhorst-de-erfolgstraining-2022-07-13-10_10_54.thumb.jpg.233046eef17a2b3ac1065614b1514806.jpg

 

Custom build ajax forms for the booking of the different training packages. These forms are presented in a modal.

43862703_Bildschirmfoto2022-07-13um09_45_54.thumb.png.d41acacbce30aa580f7f1a2cfc7456aa.png

These forms are feeded directly from the backend via my custom form solution:

154511979_Bildschirmfoto2022-07-13um09_49_22.thumb.png.d6c31e977cf5ba66d16f49f4a5418edc.png

947901638_Bildschirmfoto2022-07-13um10_06_30.thumb.png.55f32f383d9154b1ae4f5693df6f59eb.png

 

Tech Talk:

Well first a bit of design talk. Concept and design was the greater challenge than the later development. The customer had very clear expectations of what the different design elements should look like. So the real challenge was to get all the ideas right and put into a working design that does not look too overwhelming and convoluted in the end. PLUS it had to be responsive of course. Fitting giant design elements full of content that look awesome on a  2560 x 1440 display are difficult to handle on an iPphone display.

Used Modules:

I always try to use at few modules as possible. No pro fields were used on this one. Everything you see was build with the tools that Processwire offers out-of-the box or which is are in the core ?

However some modules are just a must have in my opinion and there is what I used (and use in all my other projects aswell):

- AOIM+ for bundling and compressing of JS+CSS
- WireMail SMTP for all mail work
- SEOMaestro
- PageImageSource for WEBP image support
- TracyDebugger

For the frontend work I am using good ol' Bootstrap 4. Basically because of the excellent grid system / frontend forms and form validation / modals. Most else Bootstrap offers is not included in my build. All other frontend elements are custom.

Plugins i used:

- aos.js for all animations
- lazysizes.js
- owl carousel
- masonry.js
- niceselect for the custom dropdown menus inside the modal form

There is also a video player included the the videos for this site are not produced yet.

 

All together I get a really nice lighthouse score for the site:

1012423500_Bildschirmfoto2022-07-13um09_34_32.png.4104cfe8deabf8f3fa8ad91690d24f20.png

That's it for now. Have a nice week!

  • Like 6
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...