Writing & Videos — Page 13
Page 13 of 14: older articles, tutorials, and videos.
April 2025
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 12
I finish making my Next.js and Tailwind travel-agency landing page responsive, working section by section from the offers area down through reviews. I replace rigid grids with flex-wrap layouts using basis-0, grow and…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 11
I make the desktop-only Next.js and Tailwind travel agency landing page responsive in part one of a three-part mobile pass, starting with a 480px extra-small breakpoint and horizontal container padding. I fix the super…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 10
I build the footer for a travel agency landing page in Next.js and Tailwind, completing the site's design before moving on to responsive work. I create a dedicated Footer component with a slate-900 background, reuse…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 9
The CTA section is the second-to-last piece of my travel agency landing page, and here I build it: centered content flanked by two stock images on a yellow gradient background. I extract the navbar button into a…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 8
I build the social photo grid for the travel agency landing page in Next.js and Tailwind, using a hover overlay to reveal an Explore More button. I create a posts array with image and location fields, render it in a…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 7
I build the animated customer reviews section for a Next.js and Tailwind travel-agency landing page, then wire it into the existing layout. I generate context-appropriate testimonials with GPT in JSON so I don't have…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 6
I build the Travel Essentials product grid for the Travel Agency landing page with Next.js and Tailwind, creating a new products.tsx section and rendering four product cards from a small title-and-image data list. I…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 5
I build a horizontally scrolling, animated offers section in Next.js and Tailwind, starting from a reusable component and an offers array with text, link, and icon fields. I pull five icons from Compose Icons, render…
March 2025
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 4
I finish the travel-agency landing page in Next.js and Tailwind by building the special-offers section and a second “more offers” grid. I extract a reusable SectionHeading component and a WhiteExternalButton with an…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 3
I build the featured destinations section of a travel agency landing page in Next.js and Tailwind, from the heading and data list through the destination cards, price badges and carousel controls. I fix the reusable…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 2
I build the benefits section for a travel agency landing page with Next.js and Tailwind, continuing the Travel Buddy build from the hero section. I create a reusable HeadingLabel component with a plane icon, add the…
Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 1
I build the super header, navbar, and hero section of a travel agency landing page with Next.js, TypeScript, and Tailwind CSS, starting from a blank app and ending with a styled hero. I create a reusable Container…
Dude, you’re at the bottom of my landing page.
Just book a call already if you’re that interested.
You scrolled all the way here.