I Updated My 3D Portfolio Site

Hello guys! I want to first thank all the feedback I received in the original post last year.
I tried to take all the tips to improve the site experience.
I removed some images, I could add new works, such as videos, 360 ° images and some graphic design as brand identity.
I also added a page in English, with a selector in the menu.

All comments and critics will be very welcome!

Site:

1 Like

Nice site! Good job. How did you achieve this style on navigation having a blur transparent effect…

1 Like

Very nice job.:wink:

1 Like

That looks amazing!! I really like the way the nav-bar is at the bottom first and scrolls to the top of the page and stays there! How did you do that??

1 Like

Wunderful site, clean, informative and super use of blocsapp possibilities.
Only your super use of sticky menu I coundn´t figure out as I have not found this option within blocs even while fiddling around.
Did I miss something in blocss or did you work with external code.

Best regards

1 Like

Dito.
Very impressive.

1 Like

Thanks my friend!! I used an external code for Navbar, just to pin it to the top, but all the design adjustments I made inside the Blocs.

Looks fantastic.

May I ask where you got the external code from? I’d like to do the same thing with a site I’m building.

1 Like

Me too!! I really love the nabber!! Or perhaps Norm can make one… but I think he is way too busy at this moment, so I dare not ask him…

1 Like

How did you achieve that blur effect?

1 Like

I used the “-webkit-backdrop-filter: blur” in css. but as in MacOS only Safari reproduces the effect and in Windows this effect is not reproduced, I made when the browser is not Safari the menu adopts another setting, because the blur effect needs a color with opacity and this in others browsers the menu would simply be transparent.

3 Likes

and the external code to pin it to the top after it scrolled?

1 Like

It’s a JavaScript Plug-In called Sticky

1 Like

Stunning work and very nice job on the Blocs website! I’m a new Blocs user and have yet to build my first site using it but will be very shortly.

2 Likes

Great job! How did you embed the 360 Panorama? Thanks Marcel

1 Like

Thanks!!
I’ve used the 360 Player service and embed the code into html widget

Impressive 3D work.

The social media icons at the bottom look a bit haphazard.

I’m one of those people that like to see “stories” to give background info about projects. For example, “This render was part of a set of renders for an industrial tool manufacturer. I created animations and still images so buyers could see the product details and the product in action.”, “The immersive render was commissioned by an interior designer for a new apartment build. Their client was delighted to see how the apartment would look.” That kind of thing. Just to build empathy with potential new clients. Just an idea. Regardless, people can see that you do quality work.

1 Like

I appreciate your feedback!
I also like it when more detail about the project is shown, but I did not find a way using the Blocs that is lightweight, simple and does not take up too much space so I could add project information. surely I will consider your idea in a next update.
Thanks!! :grinning:

Hi @gvchagas,

You made a great website in blocs! I read you used the “sticky” plugin for the navigation (http://stickyjs.com). I really like that, so I tried to add it to a test website in blocs. Everything works fine, till I use a image in my test website. The image is scrolling over the sticky navigation.

Can you spend some of your valuable time and give me a direction what I might have be doing wrong? I used the example-header.html file from the ZIP file to use in my test website.

I added the “jquery.sticky.js” file to the “header files attachments” at the page settings.

Also added the code to “head and body” at the page settings.

Sticky Plugin body { height: 10000px; padding: 0; margin: 0; }
#header {
  background: #bada55;
  color: white;
  font-family: Droid Sans;
  font-size: 18px;
  line-height: 1.6em;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  width:100%;
  box-sizing:border-box;
}

And I added a HTML widget to the webpage with the code:

This is test this is text this is text at the top.

This is the sticky thingy that is really cool.

This is test this is text this is text at the bottom.

Output - Sticky bar is visible and sticks to top of the browser.

But the next bloc will scroll over the “sticky” bar.

Second question: How do you add the blocs navigation into the sticky bar?
(I am not a coder, but I learn from the people on this forum).

Still trying to make it work, Need some help please…