Streaming live at 10am (PST)

Nick Vandermolen New Portfolio Site


#1

Hey guys so just wanted to share my new portfolio site! Built entirely in webflow
It has been a year in the making but wanted to create something I was really proud of

I came across a lot of challenges including some bugs on different browsers that needed to be ironed out
but through the other side and webflow was up to the task! I really enjoy the webflow tool and
being mostly from a design background rather than coding it works mostly to my skill set.

It is already getting some traction in web showcases and has 2x site of the day awards
So here it is, my new website


#2

#3

Awesome work Nick. Will be bookmarking for inspiration. Beautiful clean design, love it.


#4

Looks really good.
Some good clientele in there :sunglasses:


#5

Hey, that looks really nice. I'm currently working on my own website and it's good to see it took you that long as it makes me feel a bit better about how long my own site is taking.


#6

Hi @nickvandermolen, really nice site man!


#7

WoW - tis beautiful

One bug i noticed - there's some overflow right scroll on the project pages - see image below - i.e. http://www.nickvandermolendesign.com/v3-fitness.html


#8

Yeah, that's an error.

The issue is the way the container is structured.

The below image shows the container for the project page content which has a padding of 300px to move it away from the side nav.

You will need to either put this content inside a wrapper and set display overflow as hidden. Or better yet, I would put a wrapper around the side bar as well as the main project content.

Set this wrapper to flex box and use flex settings to create the two column grid system you're using.

Navigation issue
There is an odd issue with your navbar as well. if you drag the window to a mobile size, open the nav, close it, and then resize the window to desktop, you lose the side navigation menus - see the same below image with no side menu headers.

Seems like an odd issue, but unfortunately, I don't have the time to debug that or you!

Otherwise, great looking site with some smooth animations. The design gives a very premium feel


#9

Thank you for pointing this out! I will work on the fix shortly
It seems to be the case on all showcase pages as they all have the same structure

Appreciate the input!


#10

Ah yes this is a bug i was about to turn to the webflow community! I havent been able to solve it and due to it being a limited use case who open the menu on mobile then extend back to desktop (mainly designers) i thought best to leave it for now as i needed to launch

Cheers for the feedback


#11

Ok so i have spent the morning restructuring my site to use the flex box method you have mentioned mate - thank you for that but for some reason i am still having that overflow issue on the showcase pages!
I never had it on the work tiles section although they had the same structure so pretty confused as to why it is not working - overflow hidden did not seem to do anything either!

Any thoughts on why this is still happening?

Thanks so much for your input!


#12

So managed to solve the issue which turned out not be be related to the above - so i went back a few restorations of my site once i fixed it and problem of the overflow solved
The problem was the structure of the header image section on the showcase page
So now i have that set to relative and the inside elements to absolute and took out some padding that was no longer required - so problem solved and uploaded my edit now!
Thanks for your help!

Still have the navigation issue but that will have to wait

Thanks @irishbuckley and @Diarmuid_Sexton for the feedback!


#13

Dahumn so good! I was afraid that, upon reading your name, you where from The Netherlands, and I’d be out of a job. Forever. Good to read you are abiding your time on that prison island :stuck_out_tongue:

Amazing work! Also added to inspiration bookmark folder (subfolder ‘Classy’)


#14

Hey @nickvandermolen,

great work that you did. How you got this beautiful page transitions to work?
And also this beautiful “page is loading”-animation with your logo?

I tried something similar with LoadGo in combination with PaceJs, but unfortunately I didn´t got it to work.

And the last question is, did you export the webpage or do you hosting it with webflow?

Best
Maurice


#15

Thanks mate! Haha don’t worry there are no plans for me to move to The Netherlands anytime soon :stuck_out_tongue:
Also loving the meme!! :laughing:


#16

Hey Maurice, glad you like it!
I did all the interactions within webflow and no external js

To be honest it was quite challenging to get the effect right due to what is possible without me knowing js

  • The way that i did it was to start with a full takeover container on load with z index above all other elements
    Then when assets have loaded set an interaction for the container to change from 100% to 300px with nice easing
    so that the shape morphs into the size of my side bar - then fade out to reveal my side bar underneath and display none shortly after so all links on my side bar aren’t getting blocked - then it is just a matter of getting all the timings right - so that my stagger animations on the side bar happen after the wipe has finished
    Quite a process to get right but the effect is worth it!
    If anyone else has another way feel free to chime in :slight_smile:

For me webflow is quite capable but you have to think outside the box

As for the logo I have created an animated gif and then set an interaction to create a bit more delay and then fade out on load - transition the same effect ( size change in interactions from 100% to 300px) - again trying to get the timing spot on

Hope this makes sense and helps! :slight_smile:


Fly in template page
#17

This just demonstrates what can be achieved with Webflow for no-code/low-coders - brilliant. More importantly, having a bit of design knowledge and discipline creates a more immersive experience allowing the user to feel more engaged. Just goes to thoroughly demonstrate, while WF is fantastic ‘Webflow on its own does not good a designer make’!

One very minor and hopefully constructive piece of criticism is the transition between pages using the ‘NN’ anim, feels a little overused after a while.

Great stuff.


#18

Beautiful site and you have some amazing work on your portfolio too.

Loved the interactions and the simplicity of it.

Great work!!!


#19

Wow this is so well done.
I like everything in your site, great job man !
And thank you for sharing it to us :slight_smile:

Take care


#20

Wow well done, this looks so fresh and extremely modern! Makes my site look like a dinosaur and I must get onto upgrading too. Glad to see another Aussie using Webflow!

On your About page, ‘Nick’ is cut off at the top on my browser (Firefox on Mac), definitely scrolled to the top as high as I could go.