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

Hello. I'm Takuya Matsuyama from Osaka, Japan, an indie developer making a Markdown note-taking app called Inkdrop.
I hope you enjoy it!

▶ Check out my product: Inkdrop - Markdown note-taking app
▶ Visit my homepage
▶ Source code
▶ My dotfiles
▶ My terminal set up
▶ My NeoVim set up

▶ My recording equipments
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Mic: Zoom H1n
* Slider: SliderONE v2

Follow me online here:

Credits:

0:00 Digest
01:27 Create a new project
02:51 Configure the project (ESLint, Prettier, etc)
05:06 Create index page
07:35 Integrate with Chakra UI
11:16 Go to a cafe!
12:00 Add a navigation bar
27:05 Support dark theme
34:17 Change font
35:21 Add my profile image
37:43 Add animated profile sections
40:04 Add my bio
45:19 Animate the toggle theme button
47:02 Add 'works' page
54:36 Implement page transitions with Framer Motion
01:16:36 Back to my home and fix dog's top margin
01:17:01 Customize 404 page
01:19:19 Add work detail pages
01:27:01 Add 'Posts' page
01:30:15 Add social media links
01:36:07 Deploy the website on Vercel
01:38:07 Deploy successful 🎉

#codewithme #ASMR #codingtutorial

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

[ToeKneeTran]

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

[hicoop]

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

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

[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

[wrong]

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 ❤

[frencyliu]

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

[GaabrielRoodriz]

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

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

[victormendez]

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

[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

[herrxerex]

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 💯

[JC-jzrx]

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

[steam]

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

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

[koaladlt]

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

[Slydime]

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!

[demetriuslewis]

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

[peace]

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