Portfolio websites with React.js, Next.js, Tailwind CSS, Framer Motion, Three.js and Chakra UI - 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. In this video, I share how I built my portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js. 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=bSMZgXzC9AA ▶ Visit my homepage https://www.craftz.dog/ ▶ Source code https://github.com/craftzdog/craftzdog-homepage ▶ My dotfiles https://github.com/craftzdog/dotfiles-public ▶ My terminal set up https://www.youtube.com/watch?v=KKxhf50FIPI ▶ My NeoVim set up https://www.youtube.com/watch?v=FW2X1CXrU1w ▶ My recording equipments * Video editing: Final Cut Pro X * Camera: Fujifilm X-T4 * Mic: Zoom H1n * Slider: SliderONE v2 * Terminal: Hacked Hyper - https://dev.to/craftzdog/getting-side-by-side-preview-in-a-terminal-app-hyper-20ii Follow me online here: ▶ Twitter https://twitter.com/inkdrop_app ▶ Subscribe to my Newsletter https://www.devas.life/ ▶ Blog https://blog.inkdrop.app/ ▶ Instagram https://instagram.com/craftzdog Credits: ▶ BGM: Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/ 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 58:42 Add 3D voxel dog with Three.js 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