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

Подписаться 201 тыс.

Просмотров 651 тыс.

50% 1

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

Наука

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 589

@devaslife 8 месяцев назад

Check out my Markdown note-taking app designed for developers 👉 www.inkdrop.app/?GznmPACXBlY

@davidmc971 2 года назад

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!

@obey_giant 2 года назад

Same haha

@mrrtte 2 года назад

same

@covermeth 2 года назад

He says there's no internet, WOW, how could he know how to center a div in another without Google and Stackoverflow?

@micahcrenwelge 2 года назад

className=“container max-auto” :)

@covermeth 2 года назад

@@micahcrenwelge Thanks, I believe it's mx-auto if you're using Tailwind. But don't you get my point? really?

@micahcrenwelge 2 года назад

@@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.

@covermeth 2 года назад

@@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.

@codeaperture 2 года назад

😂😂

@nikob381 2 года назад

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!

@devaslife 2 года назад

Congrats, Niko!

@watherby29 2 года назад

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

@nikob381 Год назад

@@watherby29Amen, hope it's going well for you too! And hope you're using Neovim!

@nicholasSewing 2 года назад

This man just raised the bar so ridiculously high for future web development RU-vid videos from other channels. Well done man.

@royersegura5991 2 года назад

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 RU-vid when it comes to doing what you do. You are the best and the way your subscription count keeps growing can attest to that.

@malvaloca 2 года назад

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!

@jamesmcgee1912 2 года назад

As others have said, Takuya always has the best production of any coding youtuber out there

@13has 2 года назад

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. :)

@robertsilver1296 2 года назад

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!

@ITZollx 2 года назад

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.

@burstdigitalkenya 2 года назад

I couldn't mind staying a little more up watching the whole.. the editing is amazing, the coding and silence. Good video there takuya

@SownJevan 2 года назад

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.

@nicolekho7791 2 года назад

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

@kiaruna Год назад

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.

@zachzulanas4125 2 года назад

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

@carlosdesantiago1356 2 года назад

The way you bring logic and aesthetics together is a symphony of the gods. Thank you for your fine work!

@japanlocal6841 2 года назад

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!!

@shnylljenner1704 Год назад

can we connect?

@personalGoogle 2 года назад

As always I appreciate the level of quality in your videos. Imagery, Sound Design and editing is on point.

@jaikoo 2 года назад

Always love your videos, both aesthetically and content wise they're great.

@kahiggz 2 года назад

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 !

@nicolascossio5961 2 года назад

Idk where this guy gets the time to produce such quality videos, like he's so meticulous in his craft

@milesnordwall 2 года назад

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!

@legacyfgs 4 месяца назад

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.

@ImLaminarBro Год назад

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

@maxwellrux5523 2 года назад

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

@guestofallah7661 2 года назад

This is not just coding , this is art !!

@laundrin7061 2 года назад

開発の流れやコードの書き方がめちゃくちゃ参考になりました、UPしてくれてありがとう！

@robert6315 2 года назад

Great work the website looks amazing! I love how calm and relaxing the videos are!

@lucifertrails Год назад

Loved it, and the sticky parallax feat was amazing. Worth watching at 3 AM in the morning!🙌

@jonathansilva3364 2 года назад

Awesome video as usual. The quality is always over the expectations. Keep going!

@phanphong3533 2 года назад

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.

@gonzalooviedo5435 2 года назад

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!.

@semtristan839 2 года назад

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!

@nafishasnain4114 2 года назад

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!

@razorwireneck 2 года назад

pls dont use the word "aesthetic"

@nafishasnain4114 2 года назад

@@razorwireneck why not? I'm just appreciating the high production quality Takuya is putting into his work.

@razorwireneck 2 года назад

@@nafishasnain4114 "so aesthetic" doesnt mean anything, + this word is overused by teenage girls and makes your vocabulary poor.

@nafishasnain4114 2 года назад

@@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 👋

@justinwong833 2 года назад

@@nafishasnain4114 I agree with you

@aprilx 2 года назад

Your videos are so enjoyable and calming to watch, please keep up the good work!

@andizumko8860 2 года назад

Even though I've almost never write frontend, I enjoy your videos so much due to their aesthetics, thanks!

@phamngocangkhoa1394 2 года назад

I love your background sound because it makes me feel more relaxed and productive while I'm coding

@k3d4rcodes45 2 года назад

LOVE THIS Always waiting for your uploads

@alfredoprog 2 года назад

Your work is AMAZING. I can't wait to see more

@narayanbhat3279 2 года назад

The b rolls are very good. Appreciate the effort. Those keyboard sounds are so soothing.

@mrr5183 2 года назад

The intro got me hooked. Very pleasant aesthetics. Added to watch later!

@derjansan9564 2 года назад

This and your previous video are the perfect audio for a productive work environment.

@ponderatulify 2 года назад

the craftsmanship in this is inspiring

@slinkyyy4856 2 года назад

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.

@universecode1101 2 года назад

Wow the flow is impressive 😄 Thanks for this content 👏🏻

@sabinhogui 2 года назад

Congratulations, your video quality is always awesome

@thebavarian6181 2 года назад

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.

@fuzzybuddy4457 2 года назад

I love the calming esthetic to your videos man, very original 👍

@octavian3033 2 года назад

Can't believe I sat through 2+ hours watching you code. Awesome video.

@fxmdr82 Год назад

This is the pure art of coding!! Great work!!!

@Iamfafafel 4 месяца назад

the animations for the skills is very nice. thanks for showing it

@Alkik0 2 года назад

I will make myself confortable with 2h straight to enjoy your work. Already impress by the environment you choose ! ❤️

@thesouthsidedev1812 Год назад

Just finished coding along to this masterpiece after 8 business days. Massive respect for you and your work.

@devaslife Год назад

Wow, good job!

@raccoonteachesyou 2 года назад

So relaxing and cool to watch, thank you ! This is amazing !

@jspnser 2 года назад

Just wow something unique about your style and video presentation. Thank you for making videos

@jurgentreep 2 года назад

What a genius. Hats of for making programming interesting to watch.

@thien9705 2 года назад

Outstanding content! Thank you so much Takuya!

@brachysm 2 года назад

It's soooooooo nice to code in nature!!

@kenyahayashi7837 2 года назад

めちゃくちゃ学びが多くて面白いです！映像も洗練されていて見やすく、自然の音とキーボードの音の融合もいいですね。

@hasi1187 2 года назад

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.

@EduardoBarros13 2 года назад

Dude, your videos are sooooo pleasant to the eyes!!

@zyleo6366 2 года назад

I just enjoy watching your videos, thanks, Takuya.

@johnnylancer9441 2 года назад

Thanks for the absolute QUALITY content, your videos are really motivating me to code more prior to uni :) Also, side note: apparently client.resolved_capabilities for lspconfig is being deprecated in a bit over a week, figured I should mention.

@romank1ng528 2 года назад

This was an amazing video, I really enjoyed watching it and you've inspired me to become a better programmer.

@Lisa-rd3wt 2 года назад

This video is insane, I really enjoyed it ! I'm one of those people who can relax by watching code videos x)

@mrousavy 2 года назад

the production quality is simply amazing. thanks again for your work on this! 🙏

@devaslife 2 года назад

Glad you like it, Marc😆

@soumao1111 2 года назад

I decided to pick up nextjs because of your videos. Thanks you!! I have discovered new amazing things!

@patriciodiaz4483 2 года назад

Great job! You always inspire me to take my code to another level 🙌

@jonmultimedia 2 года назад

Another absolutely amazing video. The fact that you do this of the top of your head, not even googling :O hats off to you sir. Also, do you do any c, c++, java, etc projects? Would love to see some of those. Keep up the great work :D

@ricepaddyhacker2398 2 года назад

this is amazing, coding in nature really vibing this!

@yuriyrybchynski3594 10 месяцев назад

Amazing video! Actually, as usual. Thanks ❤

@john-franklinanusiem3304 2 года назад

You are amazing Takuya-sama.

@taysmith69 2 года назад

you always inspire me to stick with coding, thanks for the great videos

@Cientificosdelsoftware 2 года назад

Hi man, I am surprised by how you mixed nature with such a passionate job as it is Software Development. Keep it up, this is a master piece. I admire you. Att: Reynald (Founder of Software Scientists company)

@fazeelxart 2 года назад

you have a crazy amount of talent and im so impressed. inspired by you.

@promus2 2 года назад

I just love your channel, thanks for making good content!!

@devaslife 2 года назад

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.

@ZowieTao 2 года назад

i love you

@darkronier5565 2 года назад

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’

@banls5984 2 года назад

maybe you should update the wensite

@denniszenanywhere 2 года назад

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.

@abraham7966 2 года назад

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.

@hasifzulkifli5416 2 года назад

You already inspire me to wake up in the morning and start to code! Wagmi 🚀

@kexek1337 2 года назад

Those videos are so inspiring, thanks for amazing content

@JhonAgapito 2 года назад

This... this is a work of art!

@isaoramon8232 2 года назад

ASMRとしても有益な動画ですねー。自然の中での実際のコーティングのキータイプ音なので、プログラマーとしては聴いていてとても心地よいです。

@ugmugm3938 2 года назад

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

@alejomakevids 2 года назад

Good content, man. Really admire your job.

@pjguitar15 2 года назад

You're the coolest developer I've seen on the internet!

@bimalinc6230 2 года назад

Holy shit this is the best intro i have ever seen in a tutorial.

@xanax250mg 2 месяца назад

Watching what you do, I realize how much I still have to learn... But I'll get there eventually

@Cheatdeath92 Год назад

I don’t understand anything but this look like art, loving it

@enzo8076 2 года назад

I don't know what feels more satisfying: the video itself or tsserver lsp + cmp running the fastest I've ever seen. I'm using parts of your nvim config and still can't achieve that, the LSP suggestions takes a second to load up lol

@BeLikeNexus 2 года назад

Editing is incredible.

@hackysack1988 2 года назад

Hello Takuya! Firstly, just wanted to say how amazing this video is (as always!), you make me aspire to be a better dev. I was just wondering whether you could share how you came up with the code for the skills animation involving the text opacity changing? I’d love to see some more examples on how to come up with that! Anyways, thanks for the awesome content :)