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

Опубликовано: 02 Октябрь 2024
на канале: devaslife

1,863,476

51k

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=d...
▶ Visit my homepage
https://www.craftz.dog/
▶ Source code
https://github.com/craftzdog/craftzdo...
▶ My dotfiles
https://github.com/craftzdog/dotfiles...
▶ My terminal set up
   • My Fish shell workflow for coding
▶ My NeoVim set up
   • How to set up Neovim 0.5 (LSP, Treesi...

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

Follow me online here:
▶ Twitter   / inkdrop_app
▶ Subscribe to my Newsletter https://www.devas.life/
▶ Blog https://blog.inkdrop.app/
▶ Instagram   / craftzdog

Credits:
▶ BGM: Epidemic Sound https://www.epidemicsound.com/referra...

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