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

Video Description

Hello. I'm Takuya Matsuyama from Japan, an indie developer making a Markdown note-taking app called Inkdrop. I've built a website for my friend Marc's agency, Margelo https://margelo.io/ (The source code is private). *Do not submit the form for testing.* I hope you enjoy it :) ▶ Check out my product: Inkdrop - Markdown note-taking app https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=GznmPACXBlY ▶ My dotfiles https://github.com/craftzdog/dotfiles-public ▶ My NeoVim set up https://www.youtube.com/watch?v=FW2X1CXrU1w ▶ My equipment * Video editing: Final Cut Pro X * Camera: Fujifilm X-T4 * Mic: Zoom H1n & Blue Microphones Yeti * Slider: SliderONE v2 * Keyboard: Keychron K2 * Browser: Min - https://minbrowser.org/ * Keystroke visualizer: KeyCastr - https://github.com/keycastr/keycastr * Cursor effect: Cursor Pro - https://apple.co/3rlWOBA?at=11l7AK Follow me online here: ▶ Twitter https://twitter.com/inkdrop_app ▶ Blog https://blog.inkdrop.app/ ▶ Instagram https://instagram.com/craftzdog ▶ Subscribe to my Newsletter https://www.devas.life/ Credits: ▶ BGM: Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/ 00:00 Intro 01:16 Heading for a hike 02:43 Create a new project 03:49 Start Next.js dev server 06:28 Check the assets provided by the client 06:48 Clean up the scaffolded code 08:08 Masthead - Video background 15:03 About us 22:58 Masthead - Background parallax effect 28:08 Masthead - Logo animations 30:23 Skills 34:06 Skills - Animations 39:45 Works - Sticky parallax effect 01:06:19 Check the current progress 01:06:49 Trusted by 01:11:55 Observe viewport size 01:14:21 Logo slider 01:25:06 Testimonials - Carousel layout 01:37:10 Add reviews 01:40:13 Break 01:40:39 Contact form 01:42:50 Testimonials - Fix the blank gap 01:44:33 Contact form 01:49:51 Footer 01:51:55 Check the current progress 01:52:23 Back to home 01:53:05 Test GitHub API 01:54:53 Get number of the commits to React Native 02:00:22 Display the number of commits 02:03:23 Get number of npm package downloads 02:06:30 Support scoped packages 02:07:45 Display the number of downloads 02:09:09 Integrate the contact form with Formspree 02:18:23 Thanks for watching ▶ Ingredients Next.js - React Framework https://nextjs.org/ Tailwind CSS - CSS Framework @TailwindLabs https://tailwindcss.com/ TypeScript - JavaScript with syntax for types https://www.typescriptlang.org/ Vercel - Platform to deploy https://vercel.com Formspree - Contact form backend https://formspree.io/ Embla Carousel - Carousel layout library https://www.embla-carousel.com/ #NextJS #webdevelopment #ASMR