Devaslife – Software Agency Website


React

Updated Aug 1st, 2022

How I built a software agency website with Next.js + Tailwind CSS (in nature)

Stack: Next JS, Tailwind, Typescript, Vercel, FormSpree, Axios, Embla Carousel.

Fantastic. Learned quite a bit from this one. Great timestamps on the video source as well.

Key Takeaways

Video Masthead with Subtle Parallax

Basic video with autoplay and loop. Leverages a “ScrollObserver.tsx” file to keep track of “scrollY: number” as Context. Uses a ref on the masthead div. Creates a progress variable that starts at zero and progresses based on the scrollY and the clientHeight.

To help achieve parallax effect. Basically making the masthead container sticky with top set to zero and negative z-index. The subsequent about us section just scrolls over the top of the masthead.

Note: Trips me up when he uses this destructuring syntax with a colon to assign a onstant variable named current.

const {current: elContainer} = refContainer

There are also logo animations.

Animated Skills Text

Essentially just a tweak to opacity based on the scroll position and some refs. Uses the “ScrollContext” created in previous feature, the “useRef” hook to select the necessary elements, and simple CSSTransition to Animate Skills Text in.

window.innerHeight, offSetTop, some math…

Logo Scroll

Very educational. No libraries. Keeping tabs of browser width via context and no scrolling if the browser width is greater than the content width of the logo container.

If the scroll is enabled there is essentially a second logo grouping that acts as the “other” in “every other” and allows seem less looping and is hidden if the scroll is not enabled.

When rendering the slider track you can pass in a class name, which is an empty string in the video.

You can pass the component an “initialOffsetX,” zero by default which is helpful if rendering a second and you want them to be staggered like the CNBC scroll. Which brings me to scroll speed which is not dynamic but could easily be converted to a dynamic value.

Note: When you slow the value down from 0.5 to 0.1 it looks jumped but at 0.25 it is not jumpy.

The custom “useAnimationFrame” hook is awesome and a bit over my head.

The “useCallback” hook is leveraged quite a bit and rightfully so.

I found if I lined the content width property up with one of my larger breakpoints I could use a media query to handle some styling when the scroll was inactive, for example, centering. Keep in mind the overflow-x is still hidden. With some simple math and the number of logos you could make some adjustments.

Each logo item is hard coded in the component but you could easy outsource this to a data file and use a map function to render the content.

Testimonial Carousel

This is accomplished with embla-carousel

npm install embla-carousel-react embla-carousel-class-names embla-carousel-autoplay

Five files: testimonials, carousel, carousel-item, carousel.module.css, review.

The testimonial is the parent component for the carousel, carousel item and the review.

The carousel file is a context wrapper

A little disappointing that on desktop the loop cycles back to the beginning in a visible way.