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
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.
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
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
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!
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
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
Amazing work! Also added to inspiration bookmark folder (subfolder âClassyâ)
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
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
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.
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.
