How I built a software agency website with Next.js + Tailwind CSS (in nature)
Вставка
- Опубліковано 3 лип 2024
- 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 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
www.inkdrop.app/?...
▶ My dotfiles
github.com/craftzdog/dotfiles...
▶ My NeoVim set up
• How to set up Neovim 0...
▶ 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 - minbrowser.org/
* Keystroke visualizer: KeyCastr - github.com/keycastr/keycastr
* Cursor effect: Cursor Pro - apple.co/3rlWOBA?at=11l7AK
Follow me online here:
▶ Twitter / inkdrop_app
▶ Blog blog.inkdrop.app/
▶ Instagram / craftzdog
▶ Subscribe to my Newsletter www.devas.life/
Credits:
▶ BGM: Epidemic Sound www.epidemicsound.com/referra...
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 nextjs.org/
Tailwind CSS - CSS Framework @TailwindLabs tailwindcss.com/
TypeScript - JavaScript with syntax for types www.typescriptlang.org/
Vercel - Platform to deploy vercel.com
Formspree - Contact form backend formspree.io/
Embla Carousel - Carousel layout library www.embla-carousel.com/
#NextJS #webdevelopment #ASMR - Наука та технологія
Check out my Markdown note-taking app designed for developers 👉 www.inkdrop.app/?GznmPACXBlY
Takuya, I am obsessed with your videos. Just wanted to let you know that after 2 years of studying, I'm beginning my first junior full stack developer role tomorrow morning. And I'm so inspired by these videos that I'm excited to jump in, and eager to start learning and trying to use vim for my new job. Thank you for everything you do, and keep it up!
Congrats, Niko!
Its my third job I am starting tomorrow and it still feels like first ;) good luck man :) I hope it turns out great for both of us
@@watherby29Amen, hope it's going well for you too! And hope you're using Neovim!
Not even two minutes in and the production quality and style already left such a good impression, that I hit the subscribe button right away!
Same haha
same
He says there's no internet, WOW, how could he know how to center a div in another without Google and Stackoverflow?
className=“container max-auto” :)
@@micahcrenwelge Thanks, I believe it's mx-auto if you're using Tailwind. But don't you get my point? really?
@@covermeth no I did, I actually thought it was pretty funny. but I was just making a point about how much easier development is with the advent of frameworks like tailwind that abstract away the mundane tasks of centering div's. what a time to be a developer.
@@micahcrenwelge you are right, bro. Our work is just making new things to replace ourselves. I don't know why but sometimes i really miss the time JavaScript can only use on form validation.
😂😂
I was really waiting for this since I saw the advance of the video!
Currently, I'm in a programming bootcamp, and you really inspire me to become a software developer as good as you.
Your work is amazing man, thanks a lot for share it!
I just watched a couple of minutes and I must say that this is a beautiful piece of art of a video you’ve created here, I am very thankful for the effort you put into this and for sharing it with the world
I couldn't mind staying a little more up watching the whole.. the editing is amazing, the coding and silence. Good video there takuya
I've been following you for a few months now and I have to say that you're the best I've seen when it comes to programming with speed and fluidness. Your content is so well put together that it just triumpths over anything else I've seen on UA-cam when it comes to doing what you do. You are the best and the way your subscription count keeps growing can attest to that.
As always I appreciate the level of quality in your videos. Imagery, Sound Design and editing is on point.
The way you bring logic and aesthetics together is a symphony of the gods. Thank you for your fine work!
Wow Takuya the production value only seems to be getting greater and greater with each video... it's brilliant to see you with such high quality content as a fan and an admirer.
Always love your videos, both aesthetically and content wise they're great.
As others have said, Takuya always has the best production of any coding youtuber out there
This is so peaceful! I play lofi music over it, too, so I get nature, lofi, typing, and occasionally I'll take a 5 minute break to watch you code while I contemplate my own code. It's like we're colleagues. :)
What a wonderful, calming, yet unusual video! Unusual because we're seeing you sat with nature all around you, and we're seeing your keystrokes and what your typing, rather than some person chatting away. I like this and congratulations for thinking outside the box. Love it! Much success!
I absolutely love the way you reconcile tech with nature, in a way : you code in a beautiful landscape, hiking respectfully and enjoying the beauty nature offers you.
This man just raised the bar so ridiculously high for future web development UA-cam videos from other channels. Well done man.
開発の流れやコードの書き方がめちゃくちゃ参考になりました、UPしてくれてありがとう！
I really like being able to see the start to finish of a full project of yours. I feel like I learn so much seeing all the small processes you use and your design patterns as you build them! such a calming video too, you're one of my favorite dev youtubers. Much love from NYC
Takuya, I'm in Tokyo/Chiba,,, I'm also into React Native/React JS... I just wanted to thank you for always making such soothing and informative videos... I am also in awe of your home desk and coding setup there. it looks really nice!!!! keep up the great work as always!!
can we connect?
Cheers from New Mexico! So happy i found your channel. I have been wanting to find a developer that just shows their process and workflow. You make the whole experience so beautiful. I also really like that there is no talking just asmr like sounds. Thank you for your videos!
Wow, I was literally going through your articles on medium about productivity when I go a notification that you just pushed out a video! Amazing work as always ,you really inspire me to be a better developer !
The production and effort that went into this video is absolutely brilliant. I will probably watch the entire video just to see the cool effects.
It was a really good video man, appreciate the good work.
LOVE THIS
Always waiting for your uploads
Ive never been sold on something so fast but after 13.153 seconds of your video and checking their docs, im going to learn some tailwind
Great work the website looks amazing! I love how calm and relaxing the videos are!
Your videos are so enjoyable and calming to watch, please keep up the good work!
Awesome video as usual. The quality is always over the expectations. Keep going!
Your work is AMAZING. I can't wait to see more
Idk where this guy gets the time to produce such quality videos, like he's so meticulous in his craft
Loved it, and the sticky parallax feat was amazing. Worth watching at 3 AM in the morning!🙌
This is not just coding , this is art !!
the craftsmanship in this is inspiring
it's amazing how you are able to browse around with your terminal and write code in a very effective way, i'm extremely impressed and i wish to learn how to code and use the terminal like you do. I'm a huge fam.
I love your background sound because it makes me feel more relaxed and productive while I'm coding
This is the pure art of coding!! Great work!!!
when i'm in this kind of view, definitely throw my laptop away and chill all day, truly respect the level of your focus.
Also nice vim setup inspiring me to learn more about vim.
Thank you.
Yes, the same happend to me, I said to myself, oh my god!, HOW tha hell he reach to that kind of speed!. Man, write a book and teaching us!.
Even though I've almost never write frontend, I enjoy your videos so much due to their aesthetics, thanks!
This and your previous video are the perfect audio for a productive work environment.
This channel is what inspired me to get into coding and I just finished my coding bootcamp! Keep up the great work and I hope to one day be half as good as you!
What a genius. Hats of for making programming interesting to watch.
Outstanding content! Thank you so much Takuya!
The b rolls are very good. Appreciate the effort. Those keyboard sounds are so soothing.
Can't believe I sat through 2+ hours watching you code. Awesome video.
The intro got me hooked. Very pleasant aesthetics. Added to watch later!
Congratulations, your video quality is always awesome
So relaxing and cool to watch, thank you ! This is amazing !
I love the calming esthetic to your videos man, very original 👍
I didn't think that this video will be so relaxing and entertaining at the same time, very good video bro! Thumbs up from me.
i know you hear this a lot but you are super talented not only as a dev but as an editor. you seem very humble as well. thank you for all the great content
I really enjoy watching your videos, and it's so aesthetic. I hope you put out more videos like this in the future. Really cool to see you code!
pls dont use the word "aesthetic"
@@razorwireneck why not? I'm just appreciating the high production quality Takuya is putting into his work.
@@nafishasnain4114 "so aesthetic" doesnt mean anything, + this word is overused by teenage girls and makes your vocabulary poor.
@@razorwireneck please elaborate when you say "doesn't mean anything" lol. You are clearly trying to be antagonizing for the sake of it.
And please be a little more open-minded instead of simply judging someone based off of a comment complimenting someone's hard work. Hope you have a beautiful day 👋
@@nafishasnain4114 I agree with you
Wow the flow is impressive 😄 Thanks for this content 👏🏻
I will make myself confortable with 2h straight to enjoy your work. Already impress by the environment you choose ! ❤️
I just enjoy watching your videos, thanks, Takuya.
This video is insane, I really enjoyed it ! I'm one of those people who can relax by watching code videos x)
Dude, your videos are sooooo pleasant to the eyes!!
Glad you enjoy the video but do not spam the form for testing purposes. That's annoying for my client. They've already got over 50 spams.
i love you
Hi I was wondering if you could post the code for the scrolling effects like the projects section and the section with ‘we know our tools’
maybe you should update the wensite
I watched this a month ago and I still keep coming back to it. I'm supposed to be accomplished in my own skillset and I should be happy it provides me a decent living, but I regret not taking this coding route in my life. While I have tried to code, the realization that I won't be even a serviceable coder leave me with such dread and trepidation. It's soul-searing not to be able to code. All my so-called accomplishments in my own industry seem hollow.
Can you post the exact version of your keyboard? I see a million K2 keyboards on Amazon but none of them is the exact one you got.
It's soooooooo nice to code in nature!!
This was an amazing video, I really enjoyed watching it and you've inspired me to become a better programmer.
Just wow something unique about your style and video presentation. Thank you for making videos
This... this is a work of art!
I decided to pick up nextjs because of your videos. Thanks you!! I have discovered new amazing things!
the animations for the skills is very nice. thanks for showing it
this is amazing, coding in nature really vibing this!
Great job! You always inspire me to take my code to another level 🙌
you always inspire me to stick with coding, thanks for the great videos
You are amazing Takuya-sama.
Amazing video!
Actually, as usual.
Thanks ❤
I just love your channel, thanks for making good content!!
Good evening, I like the fact that it's so quick to type in, and it's a copy or memorization from the net without looking at the book.
Hi Japan, Bavaria calling ;) Just wanted to drop by to tell you how I enjoy your content and value the work which went into making these interesting videos. This feels fresh and inspired.
Just finished coding along to this masterpiece after 8 business days. Massive respect for you and your work.
Wow, good job!
Those videos are so inspiring, thanks for amazing content
you have a crazy amount of talent and im so impressed. inspired by you.
Editing is incredible.
めちゃくちゃ学びが多くて面白いです！映像も洗練されていて見やすく、自然の音とキーボードの音の融合もいいですね。
appreciate the effort man! ❤️✨
This channel deserves more subscribers ngl
this is so beautiful
You're the coolest developer I've seen on the internet!
the production quality is simply amazing. thanks again for your work on this! 🙏
Glad you like it, Marc😆
You already inspire me to wake up in the morning and start to code! Wagmi 🚀
On of my favorite channel
I don’t understand anything but this look like art, loving it
This is soo inspirational! Thank you.
Your content is so good that I started my own UA-cam channel inspired from your content!
Good content, man. Really admire your job.
Very inspirational work, keep it up.
Masterpiece .
Zen of programming!
You are my favorite developer in the entire world !!
Thanks for the videos! Recently graduated and started a 9-5 job and I get bored at home; you got working on personal projects! Love from Canada
I enjoy a lot your videos, makes me more productive and also I control my job time
You are amazingly talented
It's so relaxing to watch your video
Absolutely brilliant!
Congratulations 100K 🌸
Love our vids , your vids is very chill and the nature is beautiful :))
Just so good, so good.
Thank you!
Watching what you do, I realize how much I still have to learn... But I'll get there eventually
The nature is so calm, ❤