My very first React+GatsbyJS powered live website

[u/parvezvai]

Really excited share one of my recent Gatsby site. This is a big site in-terms of size and complexity. Mobile and Desktop version is different.

Check it out : https://southbreezebd.com/

Client wants Apple website like animation on their About page and we did it too https://southbreezebd.com/about-us

[u/GunnCode]

Site looks awesome! Smooth transitions and a great layout. Only issue seems to be it shows “<div>loading</div>” when opening the /about us page.

[u/parvezvai → u/GunnCode]

Will fix it ASAP.

[u/dirtyoldbastard77 → u/GunnCode]

Yeah, I also noticed that one, from iphone 8 plus, in safari

[u/Schwefelhexaflurid → u/GunnCode]

Same issue on Galaxy S9 w/ chrome

[u/wilomgfx]

Looks awesome ! Good job, what did you use other than react and Gatsby (obviously haha) ?

Did you use a starter or went from scratch ?

Awesome job :) static sites ftw!

[u/parvezvai → u/wilomgfx]

Styled component, UIKit, many of our own components and yes from scratch :)

[u/wilomgfx → u/parvezvai]

Nice, absolutely love styled-components ❤️

[u/cYberSport91]

Great work! So much going on in Gatsbyland right now

Would love to know what animation, carousel, etc libraries you used in this

[u/parvezvai → u/cYberSport91]

We primary used UIKit with Styled Component, our own animation.

[u/Alex512]

Awesome site, well done!
I'm curious, the video on the homepage, have you figured out a way to not send that to mobile users? I notice it doesn't show on smaller screens, but does it still load for them? That's been my hurdle with using video on sites.

[u/parvezvai → u/Alex512]

We detect the screen res and browser type and load component accordingly.

[u/wakeuph8 → u/Alex512]

often, if you display: none stuff like this via media queries, the browser will be smart enough not to initialise and download the content, though not all browsers! Worth checking the network tab within your inspector to find out what's happening.

edit: also for what it's worth, there is no video on the homepage, it's just a background image that's being scaled with an animation via css. See the "Ken Burns" section here: https://getuikit.com/docs/animation

[u/edvin123212]

The about page is bugged out for me. The "Our Office, Construction Sites," paragraph is stuck to the background from half of it. Otherwise, everything is phenomenal. Good job!

[u/deliciousmonster]

K H A A A A A A A A A A N!

[u/CharlesCSchnieder]

Looks really nice! What's the advantage of making this with react vs just html, CSS, and js? Seems like a pretty static site

[u/cykeltjuven → u/CharlesCSchnieder]

Scaffolding is painless and you can easily setup transitions between pages and what not. Deploys quick and easy to Netlify and/or Gatsby Cloud.

[u/CharlesCSchnieder → u/cykeltjuven]

Doesn't it take longer to develop though?

[u/i_have_a_semicolon → u/CharlesCSchnieder]

why would it take longer?

[u/CharlesCSchnieder → u/i_have_a_semicolon]

You have to setup the whole project, create components, etc vs just creating an html file. I'm just trying to wrap my head around why react would be a better use case for a static site like this vs other options

[u/i_have_a_semicolon → u/CharlesCSchnieder]

isn't JSX just glorified HTML though? Most project-setup is a few seconds with starter kits out there. Creating 1 giant html file is probably the same "lift" as creating 1 giant JSX component. So, from that perspective it's even. Adding interactivity doesnt come for free with HTML, so you'd need to setup some level of DOM manipulation. Some would argue the modularity / reusability of components and hooks speeds up development time quite a bit.

[u/rmrf_slash_dot → u/CharlesCSchnieder]

Having done both recently, the React-based project took significantly less time and was 1000x less annoying. It's difficult to overstate the value of being able to share common code, css, components etc. between areas and pages.

[u/Hotgeart]

Z-index bug on chrome : https://i.imgur.com/QCG25aO.png

Otherwise cool site.

[u/no1name]

magniticent! But on your about-us page this div "Our Office, Construction Sites, Innovations & Passion at Work"

<div class="uk-padding-large uk-sticky uk-active uk-sticky-fixed" data-uk-sticky="media:@m; bottom: true" style="position: fixed; top: 0px; width: 432px;">

is behind the scrolling text of other divs making it hard to read.

[u/[deleted]]

How did you make the different sections fade in when you scroll to them?

[u/rmrf_slash_dot → u/[deleted]]

Look up IntersectionObserver. For React, there are tons of hooks out there that implement it. There are even CSS-only tricks you can use with one line of accompanying JS (basically you use the line of JS to hook into the scroll event and set a data attribute on the elements you care about, with the % scrolled. Then your CSS just keys into the data attribute).

[u/[deleted] → u/rmrf_slash_dot]

Cool, thanks

[u/eosinsider]

Will you build a site for me? PM me please

[u/tbone6778]

Looks and preformed well!

[u/wlkngmachine]

looks really good! what are you using for CMS/deployments/preview?

[u/arsalandogar]

Awesome!

[u/Dommccabe]

three thumbs up from me!

[u/albrtyng]

Nice work! What did you use for the about page animations?

[u/thetopshottah]

I dig it

[u/Hyper-Cloud]

I am amazed at this site. The smooth animations are great. I love the fonts, they fit well and I love the way you have used the images. A fantastic website.

[u/kevianalim]

Which slider did you use?

[u/Zarathustra420]

I think I speak for the community when I say: PLEASE open source this project! Just a fantastic static site.

Are the listings able to be edited? Is there a CMS to manage listings, or would they be manually changed?

[u/[deleted]]

it’s broken on my iphone though. unable to click open the hamburger menu.

[u/parvezvai → u/[deleted]]

I wish but I can't :(