Part 2: Rebuilding Linear's Homepage with Next.js and Tailwind

This video is part of a multi part series in which we are going to rebuild Linear's homepage with Next.js 13 and Tailwind.
In this part we will work on building out the main hero of the homepage, including all of it's amazing micro animations. And believe it or not, all of these animations are done with plain old CSS animations!
In the next parts we will keep working on all of the other components the homepage brings.
👀 Timestamps
00:00 - Intro
00:14 - Recap of part 1
00:39 - What we are building in this part
01:55 - Start building
02:05 - Hover states in footer
02:36 - Improve navigation when resizing
06:33 - Adding scroll lock when navigation is open
10:57 - Page background gradient
13:30 - Building the hero component, start with font sizes
20:23 - Text gradient in hero
23:15 - Add secondary button to hero
33:33 - Add primary button to hero
35:27 - Fade in animation of text in hero
43:01 - Start adding main hero image animation
49:57 - Tilt animation when image gets in view
56:08 - Add glow to hero image and animate it
01:01:54 - Fade in image in hero
01:03:35 - Add sketch animation in background of hero
01:08:32 - Add glowing animated lines around image border
01:21:03 - Keep on adding new lines and randomise them
01:30:00 - Outro
💬 Join us on Discord: www.frontend.fyi/discord
🐦 Follow me on Twitter: / frontend_fyi & / jeroenreumkens
👨‍🏫 Check my mentorships: www.jeroenreumkens.nl/mentoring
📺 Watch part one if you haven't yet: • Part 1: Rebuilding Lin...
Other videos mentioned:
📺 Always show scrollbars on Mac: • Instantly Build Better...
🔗 Source on Github: github.com/frontendfyi/rebuil...
👀 Preview of what we've build so far: rebuilding-linear.vercel.app/
Tools mentioned:
🔗 Tailwind: tailwindcss.com
🔗 Linears website: linear.app
#linear #react #css #tailwind #frontend

[@semvangelooven9366]

it's nice to see that I’m not the only developer that has a soft spot for beautiful designs, neat code and animations. I’m enjoying this as much as you! Great video’s!

[@frontendfyi]

Thank you so much 🙏

[@mugabejeanaime]

The best frontend video I've ever seen.

[@cagdasbayirli3887]

Hope you don't lose your motivation to shoot videos. By far one of the best channel about front end development and I can't wait to see more from you.

[@frontendfyi]

Thank you so much! I will do my very best for you all to keep making content 😁 All of the amazing comments definitely help with the motivation!

[@akinbobolaemmanuel3319]

Your channel is a gem 💎

[@alexmnorris]

Just going through the first video and my face lit up when i saw part 2 😍I'm building my own website but I'm using these videos as core concepts of how I should be building it. Thank you so much for making these 👍

[@frontendfyi]

🥹 - thank you so much! Hope you enjoy the second video as well! 😁

[@ramielwan48]

Havent worked with web in two years, been working with react native. I needed a refresher on web and man I am learning a lot here

[@frontendfyi]

So great to hear!! 🔥 Also nice to hear that it actually isn't too much in depth for you because of the knowledge gap you might have! Enjoy the rest of the videos!

[@RedVelocityTV]

You are next level! Most so called front end devs teach the same projects with apis & stuff. But to be able to write your own react animations without a 3rd party lib, that's the real content. PLEASE keep this up!

[@frontendfyi]

Thanks a lot for your kind words, really appreciate it 😁

[@Patinhow100]

Dude, what a awesome content! In this 2 videos i learned more than that 10~15 hours of "courses". Thank so much for this. I hope u continue posting videos. Your work is wonderful!

[@frontendfyi]

Thank you so much!! 🙏 This is amazing to hear 🥰

[@synt-x6458]

just dropped in to complete the first part then stumble upon this. Will have to enjoy and take as much time to complete the first part & try absorb every lil detail. this guy is legit!

[@frontendfyi]

Thank you so much for your kind words 😁

[@kanishksuresh1565]

do more breakdowns of other beautiful pages, im learning a lot from these

[@frontendfyi]

Feel free to share good ones!

[@ricardomoreira1556]

How could I not be back when the previous video was sooooo good? And how could I not be surprised that you managed to deliver such a great part 2? Great job, good sir!

[@frontendfyi]

Thanks for your kind words Ricardo 🥰

[@raynirola]

One of the best frontend videos on the internet. Well explained and in-depth.

[@frontendfyi]

Thank you so much for your kind words 🙏

[@hellomukit]

Great videos. Following the series from the beginning. Early waiting for the next parts. Keep up the fantastic work 🤩

[@frontendfyi]

Thank you so much 😀 Next part coming soon!

[@DanteMishima]

This Is awesome. I'm going to build this along too....

[@omkarkulkarni3644]

This is brilliant breakdown of the linear landing page. Very nice

[@frontendfyi]

Thanks for your kind words 🙏

[@Kay8B]

This is amazing, im definitely going to steal some of your ideas here for converting the animation in to tailwind. Also the lines gradient are meant to be flipped, that's why they look abit off on your preview. I tested it by flipping the gradients on your preview and it looks the same now. *to right -> to left & to bottom -> to top* but only for the gradients.

[@frontendfyi]

Thanks a lot for your kind words 🥰 And great that you spotted that the gradient was indeed flipped. Already thought something was looking off, haha. Will change it soon myself as well!

[@Kay8B]

@@frontendfyi Your welcome, I look forward to part three. As a fullstack developer who focuses on backend primarily this stuff fascinates me and helps me improve alot on my frontend so I do appreciate it.

[@antsii]

"Our work should be fun" indeed=)

[@dinhkhanh]

deserve more subscribers

[@jonathanvandenberg3571]

Anyone having trouble with the text gradient, add color: transparent; to the globals under background-clip: text;. And don't forget to add the className "text-gradient" to the component.

[@ismailuras]

Thanks for this incredibly useful content. By the way, the js orientation change method is no longer supported by many main browsers. ScreenOrientation method seems useful as MDN recommendation.

[@frontendfyi]

Shows how old I am 😂 Thanks for sharing, I didn't know this!

[@ExileEditing]

I'll be watching this when I have free time.

[@frontendfyi]

Let me know what you think about it after you've watched it 🔥

[@ExileEditing]

@@frontendfyi I think it was great but as you said I think something is wrong with the gradient for the glowing lines. They seem to be backwards possibly?

[@Andre-kb6vb]

Loved part 1. Watching part 2 now. Quick question - at 10 minutes you add event listeners to add/remove a class from the html element. Seems like a lot to add (and remove) event listeners and do all that - is this not a situation where you would pass the state of the nav up and have a conditional class on the html based on the state of nav? Genuine question. I am noob. I often wonder when it makes sense to start creating global(?) state

[@frontendfyi]

Great question Andre! You are right that in those event listeners we indeed only remove the overflow class. The key here however is we do this at very specific moments; when resizing your browser. Because if the mobile navigation is open and we add the overflow class, but the user resizes to desktop, the hamburger won't be visible anymore and the user should always be able to scroll - even when they didn't close the hamburger themselves. And since there hasn't been any close action by the user, the 'overflow' class would stick around if we wouldn't listen to the resize and rotation events ourselves. So I think we do need to listen to these events in order to get that to work. As for the setting of the classname - you can definitely decide to either run classList.toggle in the component itself, or have the component call a handler that it receives from the wrapper component where the HTML node is defined. The main reason I choose for the direct classname toggle, is because that way there's only a single place where this behaviour is executed, rather then at least 2 (the header and the main layout/app file). Which makes the code easier to maintain. Hope this helps!

[@sreekar_s]

36:10 if I'm not wrong, you can find the animation details at the bottom of the styles pane after selecting the target element

[@frontendfyi]

Thanks! I will check it again. I had the feeling it was a bug in my browser at the time. Couldn’t see ANY animations and needed to go to the source panel 🤷‍♂️ Not sure what was going on there indeed.

[@buletinbuletin7656]

Id there a difference between bg-white/20 and bg-opacity-20? I never used bg opacity .. always the x-color/xx

[@frontendfyi]

No there is no difference. The end result is the same. I see however that bg-opacity isn’t even mentioned in the docs anymore, so sticking with /20 is the better option I think. I’ll try to use that one from now as well 😁

[@teetanrobotics5363]

need more suxh content

[@frontendfyi]

More parts are coming 🙏

[@chip_a]

why you re using querySelectorAll with document? It is better to use document.documentElement

[@frontendfyi]

You’re totally right! This was mainly out of habit I guess.. Using documentElement is definitely the way to go!

[@sreekar_s]

This is what I do to get all font sizes used in the webpage. This is not perfect but works Array.from(new Set([...document.querySelectorAll('*')].map(el => window.getComputedStyle(el)['font-size'])))