How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

[@devaslife]

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

[@Luruch]

You could offer the one-time purchase version, with fewer features, the monthly payment version, with unique tools. And maybe a trial version that would expire 30 days after completing a demo tutorial. Thank you for listening!

[@CandiceSaffield]

hello

[@resurrexi]

I have to say, out of all other YTubers with content on tech, yours has a certain unique flair and approach. I'm also astounded by not only your content quality, but your code quality too. I would love to collaborate with you on some future project.

[@deeptaruproy5896]

The way of presenting the content as well an impressive editor and mechanical keyword sound make this video awesome.

[@ssbacademy250]

But this video is useless for a person who want to learn

[@uniques.5443]

@@ssbacademy250 true

[@igorgoncalves5691]

@@ssbacademy250Thss not for didactics, it's to appreciate.

[@dev_point]

@@ssbacademy250 I'm Learning, pretty advanced tho, but this video make me learn a lot of things that i want to practice in the future, feats like Three.js and chakra-ui was the best for real, quite relaxing deep work video.

[@temiemmanuel3580]

You are a true coding-samurai. I literally set up my terminal like yours and started using neovim after watching you code. I'm happily subscribing to this channel. Much love from Nigeria.

[@CarlosPerez-mt3qy]

Hello Temi, can you tell me how I can configure my terminal like you?

[@temiemmanuel3580]

@@CarlosPerez-mt3qy Checkout the video: "Setting up new M1 Max MacBook Pro" on this channel.

[@macmanuelodumeru3708]

Hey Temi, how's your Neovim coming along 7 months in? I'm just beginning my own journey today. I already use the ideavim keybindings in IntelliJ but the speed makes me switch to Neovim.

[@temiemmanuel3580]

@@macmanuelodumeru3708 Pretty good. Used it for a couple of projects already. Currently exploring vim-plug on VS-code but would be switching back once I get time to update some broken packages I use on neovim.

[@NoahMasolo]

how did he set up the browser on terminal?

[@ToeKneeTran]

the fact that this is done all in vim is why it is more than impressive 👏

[@donluigimx]

You would be impressed on how fast is developing using vim comparing with other popular IDEs

[@jac1011]

its actually kinda the opposite lol, vim is so useful.

[@jac1011]

it does take effort for sure though.

[@vikrraal]

@@donluigimx vim is fast? How? No autocompletion, in built documentation, and other build tools present

[@joshua-afk]

@@vikrraal Do your research before you comment. There are many autocompletion plugins for vim. In built documentation? Vim documentation is so vast that I think only 5% of vim users has actually finished reading it's documentation.

[@hicoop]

This is some of the most beautiful coding I've ever seen. Nice stuff

[@s.espinoza1167]

I couldn't agree more, he is a master of his craft, I truly admire him

[@snbwcs]

The way the video is filmed, the way you code, it's like a piece of art. I'm not a developer but I'm thinking about learning it. Your channel is motivating me.

[@memoryleakerz]

Hi Takuya, I hope these words of mine will reach into your heart: You're a true inspiration. as many said you're outstanding yourself out of all the others. Without speaking out a single word you manage to pass to your viewers a powerful message: stay quiet, be humble and do what you love. It is clear to see that you love what you do, you're a professional at what you and it is not doubt that you're carving your name in the stone to be remember as a Web Developer who is a true inspiration. You're my inspiration to keep code-on, I'm a fullstack dev on it's first baby steps, and you've managed to calm me down and give me powers to learn more and do more exactly in times where I lack of motivation and power. Thank you, wish I'd be mentored by you. Best Regards, Ariel

[@Slydime917]

WOW! I love your style! A dev that isn't egotistic and just works in peace! You make coding look actually appealing, relaxing and not intimidating. I'd love to create something like this for myself in the future!

[@ExecutionMods]

Developers who are egotistical are just projecting their own insecurities imo

[@CodingPhase]

Finally something new. Welcome to youtube... we need original videos like this...

[@LoquendoElHistoriador]

I have known you for a very short time, but from the first moment I realized that you are a great fighter. A strong person with ideals and principles. You have a great hunger for the future and a lot of desire to get ahead. I am very proud to be your subscriber

[@devaslife]

Thank you, Loquendo🙌

[@winter_light]

@@devaslife How are you able to get file path completions when you type "../" in the import statement?

[@muzammilsyed2339]

​@@winter_light Typescript lsp server

[@wrong1029]

Not sure if you will read this, but I saw this video last October. Your workflow/tech stack looked so clean and ideal to my programming style that I was inspired to finally create my own website with webgpu. Its helped me learn so much about web development and has finally put me in recruiters' spotlights. Anyway, just wanted to say thank you for introducing me to chakra and next! Love it ❤

[@anonfourtyfive]

"Never underestimating the influence ONE person can have on another person." If I learn something worth in this life... is this simple quote. It can save and destroy a life. Peace.

[@gabrielroodriz]

Hello Takuya, I am new to your channel and would like to say that I have already enjoyed the content very much, it has helped me today to motivate myself more with programming. Although you are in Japan, you have helped people around the world, including me who am in Brazil now. Thank you, keep up the excellent work

[@Lars-ce4rd]

For me, a developer, this is similar to watching those Wilderness building videos. This is excellent craftsmanship, beautifully captured and presented. Well done!

[@ryanbobber4902]

Exactly

[@FilipCodes]

Dear God. Your style is just amazing. I will use it on my own web dev tutorials. You should do a video on how to make edits such as this

[@juillotine]

Seconding this please

[@KanavMalik20]

yes please !

[@oakbots3035]

WTF, that is amazing... code/art!!! Congratulations

[@みかんチャンネル-r1b]

i think so.

[@greenshaheen]

Good for watching difficult to follow

[@JC-jz6rx]

I’ve seen so many coding videos. I just found this channel ,but this, The chill vibes. This felt like watching art and just as therapeutic

[@kadaliakshay6770]

i put these videos on repeat because it's an awesome source for ASMR, bro AWESOME VIDEOS, you got a new sub

[@samztz31]

I am curious that such a talented developer, who also produces clean elegant video would have so little subscribers ! I appreciated your work Matsuyama, I will always stay tuned for you.

[@MrPhreakout]

It's just a matter of time, he'll blow up sooner or later

[@shrill32]

That is simple really. Most people aren't interested in coding. But yeah, he'll get there.

[@frencyliu]

This is the most comfortable coding video I've ever seen. What a developer with a design heart! So great.

[@koaladlt]

I can't believe the quality of your videos. Keep doing this, it's amazing!

[@CristobalRuiz]

Not only your content is great, the production of your videos is outstanding. Excellent dedication!

[@cpt.victor]

the aesthetics and ASMR elements in your video are just astonishing, my friend. it's another level of detailing and quality in everything you've put in it. i am very thankful i've found your video and channel, keep it up!

[@devaslife]

My wallpaper packs are now available! Check out serene imagery from my coding tutorials. Purchase them and support my channel 🙏 www.craftz.dog/wallpapers

[@shibakaneki555]

This video reminds me when I was living in Japan, Coding on my personal projects, then going to a Café and continue working from there, enjoying life while working on my stuff, with my own schedule, that was soo great! Thx for the workflow, by the way!

[@devaslife]

Are you no longer doing solo devs? Where are you living btw

[@shibakaneki555]

@@devaslife i am still doing solo devs but unfortunately i am also back to full time job in a company, so byebye my own time T_T. but i want to be back to solo dev life. now living in switzerland but will move back to japan in a few years.

[@goofytheGuy2237]

I loved the way you coded. Like just imagine how peaceful it would be when u are coding in a penthouse in a place like NYC or Tokyo, seeing the city while listening to Lo-Fi Music! I have always wanted to live in Japan, and I hope I do in Future...

[@steam9583]

So impressive as a same developer in JP. Thanks for sharing your knowledge, Takuya-san!

[@Traveler77Fly]

Hello, Mr. Matsuyama. Thank you very much for your creation. It is truly a beam of light in the YT broadcasting forest. You are a hero of the craft. The frameworks and the libs may be changed, but your code lives on in Q3-24.

[@raybelmo]

Dudeeee, He programs in the terminal, and I'm saying that as a software developer. Absolutely magical!

[@branquinho8444]

Actualy, It's Vim. But, yes, oldschool! Emacs and Vim are great.

[@hey_james]

@@branquinho8444 The only reason someone would code in Vim today is to flex. I mean he is manually type import statements, why? He is the tech equivalent of a hipster.

[@jl50jefe]

@@hey_james Had to be said.

[@ismellpedo]

​@@hey_james There are plugins that can auto import, and auto close JSX/html tags. He seems to have a pretty barebones setup. Here's an example of someone who has their setup completely customized for their workflow. It's night and day. He's an engineer at Netflix. I've gone ahead and started the video where he's past his setup showcase and actually going into his workflow and using it: kzbin.info/www/bejne/aIizdGuoj7aph7c

[@branquinho8444]

I code in Emacs with Evil mode (Vim bindings). But, these editors are plugin/mode focused. Anything you have in vscode your can have throught lsp-mode which is a server, for example. Truth is, you probably would like to have it, but you don't dare to learn it. You know why? Because you would have to learn 30+ years of knowledge and that may be too much for your container. I live inside Emacs as my Window Manager (EXWM). You can't do that in other editors. Cut the crap. Your comment is the equivalent of political agenda bullshiting.

[@natanclassic]

For so long i haven't seen no one like u, you are the perfect software developer, no googling all the time. You're the best"

[@onokr705]

Him being happy and admiring his work at the end is so cute xD

[@HsNiccoTutorial]

This is the most japanese way to make content ! I cannot say how much I love this style. I think I found my favourite youtuber 🤩

[@herrxerex8484]

This is so good , you really are a gem of a person for taking out the time to make this. Keep up the awesome work 💯

[@nikkehtine]

The production quality of this video is through the roof

[@demetriuslewis6750]

This editing style is amazing. Such a breathe of fresh air from other coding content on youtube.

[@1s_enough]

I remember reading a blog about your journey as a freelancer developing an 'Inkdrop' application. It's nice to see you again on KZbin like this.

[@ahmedadebisi881]

Coding has never been so appealing. Thank you for the great content!

[@clarencechan1231]

This is amazing. Love the ASMR feel and being able to hear the keyboard and have the silence to work alongside you. hope to try this!

[@ZTF666]

This is therapeutic and beautifully done !

[@victormendez3683]

This is one of the videos so well made that you need to experience it in full screen and good speakers. Congratulations!

[@massaynus]

i didn't know I needed to see a video like this until I saw it it is good to peak on the next level from time to time not to loose sight of what's important aside from the information conveyed in this videos it's very inspirational and a true masterpiece thanks!

[@vitoralmeidaoliveira4352]

It is undeniable that these videos are well made.

[@edgarhri]

I'm stunned at the level of understanding and knowledge you show of each component, evidenced by your workflow. I'm curious. What sort of planning process do you go through for a project like this? I'd love to see a video on this sort of thing.

[@jackson159]

Bro is a long time programmer with highe expierence in the industry, social media and also in his hobbys. Of course he is fking good.

[@goblin69_420]

It's nothing to be honest . It just takes time

[@sh1d0w91]

I rarely comment on videos or hit the like button, but this is one of the rare cases I do. Really love your channel and the effort you put in those videos. Content is also great. Keep it up!

[@aangGAD]

This guy writing code like a perfect software developer, and me googling all the time, idk if I have to laugh or cry 😂😭

[@yuvrajagarkar8942]

Happens , maybe its scripted , or he is very well practised

[@DelilyaStatic]

@@yuvrajagarkar8942 It looks very scripted, he's constantly looking somewhere else to the side when typing... but there's nothing wrong with scripting out a video.

[@ameerashhab6721]

No this isn't scripted. As a Fulltime Software Engineer myself, what he is doing comes from pure practice and repitition. You don't need to look at stackoverflow all the time or a reference sheet if you have done this many times.

[@splooferz]

@@yuvrajagarkar8942 Lol no. This is called experience and memory, from typing the same thing a million times previously.

[@frmngm]

Lol, same 😂😂

[@peace2941]

Wonderful peace, the way you write code, the way you edited the video is just ART. ありがとうございました。

[@iamhritikpawar]

Thankyou for motivating me too code. I was on coding break and this video just motivated me to code. Started right away with my incomplete portfolio website.

[@mohamedsalbi2759]

YOU Treat your KeyBoard like how a true samurai treats his katana made respect man

[@MistaT44]

This is just next level… never seen a coding video/art (wouldn’t just call it a tutorial) like this.

[@mooNylou]

Never seen something so well made overlay-wise. Sometimes i just open your videos to hear the sound in the background. Love the keyboard. asmr

[@vitormelo22]

Que maneiro, um dos poucos vídeos de desenvolvimento que realmente que me deu um sensação extremamente agradável. Parabéns pela edição e formato compartilhado.

[@renji-hjk]

so faltou um lowfi de fundo pra ficar mais relaxante

[@natancosta2017]

​@@renji-hjk aí ficava muito top. Só de fundo mesmo, pra poder ouvir o som do teclado. 😌

[@leonardomoura9770]

Man ..... i found your channel now, i'll see my first video now ...and I already love your channel. amazing job ...so special content, very professional and unique!

[@이건우-h4d8d]

thanks Takuya :) I am a late developer who has just started development. I am studying hard after watching your videos. Although it is difficult, I will study hard by watching your videos. thank you.

[@RickBeacham]

Don't study just develop, build, and fail.

[@이건우-h4d8d]

​@@RickBeacham Thanks for the advice. I work hard to develop, build, and fail. :)

[@adrianotgonzaya4478]

I really don't understand why this man only has 40k subscribers, he deserves waay more

[@canaldovictormag]

Cara?! Que vídeo sensacional! O melhor tutorial de todos os tempos.

[@rodrigoschieck5833]

Incrível como sempre tem um brasileiro em toda parte hehe

[@canaldovictormag]

@@rodrigoschieck5833 tamo junto kkk

[@obey_giant]

This dude types at the speed of light ✨ These videos put me in a trance lmao. I love it.

[@VuNguyen-ry3vu]

How can I set up a terminal like yours? It's really awesome!

[@royerguerrerop5982]

Ingretiends 🥣 - Transparece 20% - Blur 25 % - Fish - Vim or Neovim - Tmux - Custom tmux or oh my tmux themes

[@raudinmoreno]

@@royerguerrerop5982 do you know which fish theme he is using?

[@redbetta2191]

@@raudinmoreno tuna

[@fernanboxfrias381]

Hi, devaslife! I have three questions: 1. What's the name of the plugin that you are using to show the buffers. I'm referring to the bar that is on top. 2. What's the name of the colorscheme that you are using? 3. And what is the name of the status line that you are using? Thanks.

[@transience4172]

I think you'll find answers if you check out Takuya's Neovim videos

[@fernanboxfrias381]

@@transience4172 Oh, Ok. Thanks you.

[@pedroesmerio]

1 - It's a neovim feature 2 - Dark solarize 3 - The status line that I think you are looking for is him tmux + powerline config All this thing he explain in his neovim config video 😀😁

[@fernanboxfrias381]

@@pedroesmerio Thank you so much.

[@_nightowl263]

Dude I HAVE NEVER SEEN SOMEONE MAKE A PROGRAMMING VIDEO LIKE THIS!! THIS IS SO COOL. It's like a final fantasy game with the indredients and how you move places and have different music. Soo cool!

[@technic_and_programming]

Привет из России! 🇷🇺 Твои ролики очень офигенные! Мне нравится твой контент!) 🔝

[@elad3958]

Looks like the most sophisticated tutorial right now on Chakra UI

[@skyy_xx]

Honestly I feel pain watching it and imagining being in your shoes. I mean writing every word by yourself, without snippets, without autocompletion without AI completer, without auto dependency import and other features. I feel pain in my fingers writing that much when I don't need to. I see there are some autocompletion hints but you don't use it. It indeed looks great and I've found it entertaining to finally watch someone doing project in vim but to me it's not worth at all, switching hand from mouse to keyboard are indeed not that comfortable but working on macbook fixes it with greatest touchpad so I do one small move to swap my right hand. Anyway you're way of work are great and I like that anyone can do it in any way he want.

[@henrybergstrom6772]

vim supports autocompletion he is just not using it.

[@ismellpedo]

Vim has plugins for all the stuff you mentioned he just isn't using it. His setup is pretty barebones.

[@skyy_xx]

@@ismellpedo ​ @Henry Bergström sounds fair, I'll probably check how it looks in some free time,does it also have function of multi pointers, like CMD/CTRL + D to select the same word in couple places and write other one in every selection?

[@ismailhilali5590]

@@skyy_xx out of the box, no. But the beauty of Vim is that you can configure it (either yourself or through plugins) to do whatever modern days IDEs do and more.

[@ismellpedo]

@@skyy_xx Check out this guys setup. He's a Netflix engineer and he's customized it completely for his use case. I start the video a bit later so you don't have to skip through him explaining the plugins he uses. kzbin.info/www/bejne/aIizdGuoj7aph7c One of the main ideas behind modern vim usage is building up exactly how you want. Including only the plugins/functionality you want or need for your workflow. As for your question, I haven't used that functionality in VSCode or Vim but I'm sure there's something out there that mimics that behavior.

[@caominhdev]

Need more videos like this, it's very good and easy to understand.

[@dave4347]

This is programming ASMR right? I mean, no one actually develops like this lol.

[@adamdrake39]

My favorite combination! Nextjs and Chakra but your designs are just on a different level! Great work.

[@tuananhdo1870]

I prefer tailwindcss, but this video is so good!!!

[@kuronooni658]

This is the best video that I saw in programming, you are a reference for me , I will try my best to be a good programming like you

[@parthokr]

Whoah whoa whoa! Just fabulous. I am bewildered. This whole video with such aesthetic I have never seen.

[@fadthegreat]

One of the hidden gems here in youtube. どうもありがとうございます!

[@elad3958]

Cant wait to work this video. I dig the background music and it's just you working getting the project done. Very nice

[@stevenalvarado8047]

Bro your videos are so nice. I mainly been watching them because they are so aesthetically pleasing.

[@Ernie_gg]

If you are doing this in 2023 you probably will get a couple of hydration errors on the Link and NextLink components. Great video man, appreciate the time and love the way you record it, aesthetic and minimal way to do it! pretty good quality content tbh

[@eniolaadebayo5681]

do you have any input about how this can be fixed?

[@maselitics8184]

I hope this channel grows exponentially... Simply masterful...

[@mpeardev]

Your coding style is hypnotic, I might even say artistic. It's as if I were watching a sculptor or a painter creating art. Your video inspires me to keep learning and creating applications, congratulations crack. Greetings from Peru

[@mjsteezy7440]

Came across this video a while back and this is what made me get into web development. This website is beautiful and seeing the creation from ground up was amazing. I hope to create websites of your caliber soon.

[@kvamsikrishna531]

Probably the first web development video, I had to lower the speed sometimes from 1x to catchup. Thank you for the awesome content.

[@minsupark9246]

Holy moly this is another level of portfolio~! This is just another masterpiece website !! + Your video looks amazing tooo!!!!!!!!!

[@the13thTone]

This is the best channel that I've found so far!

[@feliwein_cc]

you have such an style man! on editing, coding AND music! glad to somehow came here greetings from Chile

[@DhananjayNaik]

Okay, I really appreciate you rehearsed it, great workflow, the typing strokes are soo satisfying, but I don't know, it feels so perfect, since there are no google searches.

[@adammanselll]

I love how you capture the simplicity of code. Usually when trying to watch developers' content it's easy to feel overwhelmed, but your aesthetic style allowed me to feel calm and relaxed. Thank you for the amazing video! Definitely subscribing.

[@user-yi4mt4hp8u]

do you know what he did after 3:15 to got to that next page to organise the files?

[@VsevolodBrekelov]

Sonehow youtube recommended this video and I'm shocked how good are you. Willing to learn new things from you! Thank you!

[@ArthurdeAraujoNeves]

Best portfolio ever. Great work Man!

[@akza0729]

I only watched the first 53 seconds, Great editing and FX. I'll be sure to watch it in my free time.

[@arnav_0397]

Immediately subscribed! I dont know how starting 3 min passes with so much peace and focus

[@thisisgksingh]

Nice video man. The editing was epic. Seems like you spent a lot of quality time making this video.

[@cdromance2705]

I've been learning about WebGL, Blender, and ThreeJS/R3F since I came across this video a few months ago. Right now I am attempting to integrate my first mesh into my first NextJS project and came back to checkout how you did it. You inspired me :) Thanks for sharing

[@davidfromnorth7836]

It was a pleasure to watch. Your edits are on point! Keep going!

[@Nims9T8]

I was truly looking for few million subs. Subscribed .

[@ViktorHesselbom]

Wow, that looks so clean, I'm sure you will inspire a lot of people! I'm envious of how nice your video looks, it certainly inspired me...

[@bryanbandela]

It's my first time to subscribe in a channel only within the first 30 seconds of the clip. Thank you for your time, knowledge and input ... Now let me finish the clip!

[@alexpiano]

I was about to start another tutorial but came up this video and.. my morning changed. What an inspiring way of doing things, thank you.

[@shogo-100]

My man typing with that thocky keyboard and very few to almost no mistakes and that video quality... I came out of curiosity for the code, and i'm staying for the awesome content

[@Waterlogged-ed4wu]

it's really calming. really nice video concept, love the terminal showing upfront. You must have found the TAO of programming

[@_nightowl263]

Woah 😲 I love the way you do these videos! Especially the ingredients part

[@johnsm4726]

Wow! I just got a domain and was looking for help to build my portfolio! And this came right in time!! Thank you!

[@lemonstrangler]

very relaxing to watch. i love the pixelated dog

[@ralphiz8890]

I just found your channel about a week ago and I’m loving it! Awesome work, keep it up! :)

[@JEsterCW]

Ur editing and the style behind it is amazing

[@surajradhakrishnan3617]

Holy crap! Your skill and experience is amazing! ✨ You're an inspiration. So cool! Subscribed immediately!

[@Alireza13488]

This website is absolutely stunning. I am going to humbly copy your style .

[@fredrikmudas]

as a newbie in coding, you are like a mastermind working some magic!

[@ThanCR]

Impressive, your style is AMAZING, keep going, Im sure you are going to explode typical youtube coding tutorials !! I love your work, thanks for giving us these masterpiece