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

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

#Productivity #Solo dev #Programming #Indie dev