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

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

#Productivity #Solo dev #Programming #Indie dev #NextJS #ReactJS #ChakraUI #ThreeJS
Digest - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Digest

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:00:00 - 00:01:27
That shot itself can sell as an NFT - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

That shot itself can sell as an NFT

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:00:53 - 01:39:25
Error: Definition for rule 'no-unnused-vars' was not found.  no-unnused-vars on all my archives. What would i do? - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Error: Definition for rule 'no-unnused-vars' was not found. no-unnused-vars on all my archives. What would i do?

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:01:01 - 01:39:25
Create a new project - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Create a new project

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:01:27 - 00:02:51
how do u do to get sugget line code in  (that line black) , please ? - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

how do u do to get sugget line code in (that line black) , please ?

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:01:42 - 01:39:25
Configure the project (ESLint, Prettier, etc) - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Configure the project (ESLint, Prettier, etc)

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:02:51 - 00:05:06
do you know what he did after  to got to that next page to organise the files? - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

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

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:03:15 - 01:39:25
hey man, great website! But What did you do at , I can't seem to get to that window! - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

hey man, great website! But What did you do at , I can't seem to get to that window!

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:03:26 - 01:39:25
Create index page - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Create index page

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:05:06 - 00:07:35
Error: Cannot find module '../shared/lib/isomorphic/path' - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Error: Cannot find module '../shared/lib/isomorphic/path'

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:05:40 - 01:39:25
Guys, could u tell me how did he opened the link inside the terminal on ? - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Guys, could u tell me how did he opened the link inside the terminal on ?

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:05:40 - 01:39:25
how do you preview your code into your terminal? Is it just video editing or a feature? - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

how do you preview your code into your terminal? Is it just video editing or a feature?

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:05:45 - 01:39:25
this is so good. How was the browser opened in the terminal at ? - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

this is so good. How was the browser opened in the terminal at ?

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:05:51 - 01:39:25
The light blue font at  is kind of hard to read : (but amazing video though!!! - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

The light blue font at is kind of hard to read : (but amazing video though!!!

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:06:33 - 01:39:25
Integrate with Chakra UI - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Integrate with Chakra UI

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:07:35 - 00:11:16
Hello Takuya, thank you. Your style is amazing. One question, in , why your bg-color pass from white to gray? sorry for my bad english - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Hello Takuya, thank you. Your style is amazing. One question, in , why your bg-color pass from white to gray? sorry for my bad english

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:08:55 - 01:39:25
Go to a cafe! - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Go to a cafe!

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:11:16 - 00:12:00
Hey guys! I am not a professional. Can someone please tell me how to open links directly in the terminal? - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Hey guys! I am not a professional. Can someone please tell me how to open links directly in the terminal?

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:11:57 - 01:39:25
Add a navigation bar - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add a navigation bar

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:12:00 - 00:27:05
around , could someone please explain: - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

around , could someone please explain:

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:16:45 - 01:39:25
- you can use the short circuit operator (&&) instead of ternary operator with null/undefined values, it will return false if value isn't true. - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

- you can use the short circuit operator (&&) instead of ternary operator with null/undefined values, it will return false if value isn't true.

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:17:24 - 01:39:25
Support dark theme - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Support dark theme

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:27:05 - 00:34:17
Change font - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Change font

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:34:17 - 00:35:21
Add my profile image - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add my profile image

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:35:21 - 00:37:43
Add animated profile sections - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add animated profile sections

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:37:43 - 00:40:04
Add my bio - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add my bio

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:40:04 - 00:45:19
Animate the toggle theme button - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Animate the toggle theme button

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:45:19 - 00:47:02
Add 'works' page - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add 'works' page

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:47:02 - 00:54:36
Implement page transitions with Framer Motion - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Implement page transitions with Framer Motion

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:54:36 - 00:58:42
Add 3D voxel dog with Three.js - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add 3D voxel dog with Three.js

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
00:58:42 - 01:16:36
I was watching this video deeper and Takuya was actually copying codes from another device. You can see it better right now:  , from this point on it copies more discreetly, even because this video is longand spending so much time copying code must be exausting. The moment i quoted he was typing, looking at another device and continues typing, the code itself at this moment mentioned, it comes down to formulas for rendering, but he also copies at another moment of the project. As i said earlier in another comment, the videos, despite having a script, are well produced. - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

I was watching this video deeper and Takuya was actually copying codes from another device. You can see it better right now: , from this point on it copies more discreetly, even because this video is longand spending so much time copying code must be exausting. The moment i quoted he was typing, looking at another device and continues typing, the code itself at this moment mentioned, it comes down to formulas for rendering, but he also copies at another moment of the project. As i said earlier in another comment, the videos, despite having a script, are well produced.

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:05:00 - 01:39:25
Great job debugging at  😉 - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Great job debugging at 😉

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:13:38 - 01:39:25
Back to my home and fix dog's top margin - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Back to my home and fix dog's top margin

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:16:36 - 01:17:01
Customize 404 page - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Customize 404 page

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:17:01 - 01:19:19
Add work detail pages - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add work detail pages

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:19:19 - 01:27:01
Add 'Posts' page - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add 'Posts' page

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:27:01 - 01:30:15
Add social media links - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Add social media links

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:30:15 - 01:36:07
Deploy the website on Vercel - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Deploy the website on Vercel

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:36:07 - 01:38:07
Deploy successful 🎉 - How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js

Deploy successful 🎉

How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js
2021年10月15日 
01:38:07 - 01:39:25

devaslife

🎉 170,000 人達成!  📈 予測:20万人まであと840日(2025年9月25日) 

※本サイトに掲載されているチャンネル情報や動画情報はYouTube公式のAPIを使って取得・表示しています。

Timetable

動画タイムテーブル

動画数:62件

Intro - How I take tech notes as a note app author

Intro

How I take tech notes as a note app author
2023年05月30日 
00:00:00 - 00:01:23
The right tool for the right task - How I take tech notes as a note app author

The right tool for the right task

How I take tech notes as a note app author
2023年05月30日 
00:01:23 - 00:03:18
Embrace your imperfection - How I take tech notes as a note app author

Embrace your imperfection

How I take tech notes as a note app author
2023年05月30日 
00:03:18 - 00:04:25
4 steps for taking tech notes - How I take tech notes as a note app author

4 steps for taking tech notes

How I take tech notes as a note app author
2023年05月30日 
00:04:25 - 00:05:38
1. Identify the problem - How I take tech notes as a note app author

1. Identify the problem

How I take tech notes as a note app author
2023年05月30日 
00:05:38 - 00:08:31
2. Research the possible solutions - How I take tech notes as a note app author

2. Research the possible solutions

How I take tech notes as a note app author
2023年05月30日 
00:08:31 - 00:10:59
3. Validate the solutions - How I take tech notes as a note app author

3. Validate the solutions

How I take tech notes as a note app author
2023年05月30日 
00:10:59 - 00:11:37
What worked well - How I take tech notes as a note app author

What worked well

How I take tech notes as a note app author
2023年05月30日 
00:11:37 - 00:13:03
What didn't work - How I take tech notes as a note app author

What didn't work

How I take tech notes as a note app author
2023年05月30日 
00:13:03 - 00:14:48
4. Reuse the knowledge - How I take tech notes as a note app author

4. Reuse the knowledge

How I take tech notes as a note app author
2023年05月30日 
00:14:48 - 00:15:02
Refer to code snippets - How I take tech notes as a note app author

Refer to code snippets

How I take tech notes as a note app author
2023年05月30日 
00:15:02 - 00:15:35
Learn from previous solutions to common errors - How I take tech notes as a note app author

Learn from previous solutions to common errors

How I take tech notes as a note app author
2023年05月30日 
00:15:35 - 00:16:07
Share what you learned - How I take tech notes as a note app author

Share what you learned

How I take tech notes as a note app author
2023年05月30日 
00:16:07 - 00:16:49
Wrap up - How I take tech notes as a note app author

Wrap up

How I take tech notes as a note app author
2023年05月30日 
00:16:49 - 00:17:28
Intro - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Intro

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:00:00 - 00:01:02
Project description - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Project description

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:01:02 - 00:04:18
thanks for beautifully organized video. What is the name of “speech balloon” tool in the Projection description part? - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

thanks for beautifully organized video. What is the name of “speech balloon” tool in the Projection description part?

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日  Yuki Okabe 様 
00:01:03 - 01:12:31
Create a new Next.js project with Stitches - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a new Next.js project with Stitches

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:04:18 - 00:07:23
Prepare using OpenAl - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Prepare using OpenAl

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:07:23 - 00:08:38
Learn how to write Python with ChatGPT - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Learn how to write Python with ChatGPT

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:08:38 - 00:11:49
Transcribe the audio with the transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Transcribe the audio with the transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:11:49 - 00:14:46
you mean prompt right? - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

you mean prompt right?

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日  Aung Zan Baw 様 
00:13:24 - 01:12:31
Try invoking the completion API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Try invoking the completion API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:14:46 - 00:17:35
Get input data from stdin - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Get input data from stdin

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:17:35 - 00:19:26
Load and parse SRT data - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Load and parse SRT data

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:19:26 - 00:21:36
Translate each subtitle - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Translate each subtitle

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:21:36 - 00:24:00
Check out Radix UI and Stitches - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Check out Radix UI and Stitches

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:24:00 - 00:25:26
Prepare building the UI - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Prepare building the UI

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:25:26 - 00:26:29
Create a form to specify a video URL - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a form to specify a video URL

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:26:29 - 00:31:22
Implement event handling - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement event handling

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:31:22 - 00:33:13
Create a component to render the command outputs - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a component to render the command outputs

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:33:13 - 00:36:40
Add tabs - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Add tabs

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:36:40 - 00:42:02
Add an API routing - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Add an API routing

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:42:02 - 00:42:47
Implement an audio download API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement an audio download API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:42:47 - 00:48:09
Implement a transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement a transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:48:09 - 00:50:17
Excellent video! In  (transcribe.py:13) there is a typo "primpt", I think that's why he keeps getting his name wrong. If you already corrected it at some point in the video and I let it go, please ignore it. ;) - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Excellent video! In (transcribe.py:13) there is a typo "primpt", I think that's why he keeps getting his name wrong. If you already corrected it at some point in the video and I let it go, please ignore it. ;)

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日  Ice Livin 様 
00:50:06 - 01:12:31
Implement a translation API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement a translation API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:50:17 - 00:53:22
Connect the components with states - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Connect the components with states

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:53:22 - 00:55:42
Extract a video ID from the YouTube URL - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Extract a video ID from the YouTube URL

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:55:42 - 00:57:39
Progressively update the output by a callback function - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Progressively update the output by a callback function

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
00:57:39 - 01:00:12
Fix scroll overflow issue - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Fix scroll overflow issue

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:00:12 - 01:00:55
Invoke the audio download API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the audio download API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:00:55 - 01:04:50
Invoke the transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:04:50 - 01:07:28
Fix the transcription prompt not working - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Fix the transcription prompt not working

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:07:28 - 01:07:51
Invoke the translation API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the translation API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:07:51 - 01:10:42
Finish it up - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Finish it up

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:10:42 - 01:10:56
Demo - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Demo

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI
2023年04月10日 
01:10:56 - 01:12:31
Furna - Lotus - [playlist] Melodies for coding | Focus & Chill

Furna - Lotus

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:00:00 - 00:04:02
Drawing - LUCHS - [playlist] Melodies for coding | Focus & Chill

Drawing - LUCHS

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:04:02 - 00:06:22
And Lucie Dreams - Lotus - [playlist] Melodies for coding | Focus & Chill

And Lucie Dreams - Lotus

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:06:22 - 00:09:57
Mint Conditions - Dusty Decks - [playlist] Melodies for coding | Focus & Chill

Mint Conditions - Dusty Decks

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:09:57 - 00:12:08
Cousin Stratus - Lotus - [playlist] Melodies for coding | Focus & Chill

Cousin Stratus - Lotus

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:12:08 - 00:15:13
Tiny Room Bop - [ocean jams] - [playlist] Melodies for coding | Focus & Chill

Tiny Room Bop - [ocean jams]

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:15:13 - 00:17:33
Parallax - Luwaks - [playlist] Melodies for coding | Focus & Chill

Parallax - Luwaks

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:17:33 - 00:20:39
Lisbon - Shiruky - [playlist] Melodies for coding | Focus & Chill

Lisbon - Shiruky

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:20:39 - 00:23:39
I'll Follow - Mochas - [playlist] Melodies for coding | Focus & Chill

I'll Follow - Mochas

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:23:39 - 00:26:12
Lupi - Sayuri Hayashi Egnell - [playlist] Melodies for coding | Focus & Chill

Lupi - Sayuri Hayashi Egnell

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:26:12 - 00:28:17
Tau - Osoku - [playlist] Melodies for coding | Focus & Chill

Tau - Osoku

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:28:17 - 00:31:12
Have a productive day - [playlist] Melodies for coding | Focus & Chill

Have a productive day

[playlist] Melodies for coding | Focus & Chill
2023年03月24日 
00:31:12 - 00:31:23
Hello - How to create Ghibli-style trees with three.js

Hello

How to create Ghibli-style trees with three.js
2023年02月16日 
00:00:00 - 00:00:44
Unboxing a new MacBook Pro - How to create Ghibli-style trees with three.js

Unboxing a new MacBook Pro

How to create Ghibli-style trees with three.js
2023年02月16日 
00:00:44 - 00:01:54
where I can get this laptop stand? it looks cool - How to create Ghibli-style trees with three.js

where I can get this laptop stand? it looks cool

How to create Ghibli-style trees with three.js
2023年02月16日  Gabriel 様 
00:01:40 - 00:47:52
Heading to Osaka Castle Park - How to create Ghibli-style trees with three.js

Heading to Osaka Castle Park

How to create Ghibli-style trees with three.js
2023年02月16日 
00:01:54 - 00:04:00
Create a new React project - How to create Ghibli-style trees with three.js

Create a new React project

How to create Ghibli-style trees with three.js
2023年02月16日 
00:04:00 - 00:05:12
@ no one likes the default macbook keyboard man - How to create Ghibli-style trees with three.js

@ no one likes the default macbook keyboard man

How to create Ghibli-style trees with three.js
2023年02月16日  Jagic Yooo 様 
00:04:10 - 00:47:52
Install libraries - How to create Ghibli-style trees with three.js

Install libraries

How to create Ghibli-style trees with three.js
2023年02月16日 
00:05:12 - 00:05:31
Make the page background transparent - How to create Ghibli-style trees with three.js

Make the page background transparent

How to create Ghibli-style trees with three.js
2023年02月16日 
00:05:31 - 00:06:32
Remove the template content - How to create Ghibli-style trees with three.js

Remove the template content

How to create Ghibli-style trees with three.js
2023年02月16日 
00:06:32 - 00:06:53
Integrate React Three Fiber into the project - How to create Ghibli-style trees with three.js

Integrate React Three Fiber into the project

How to create Ghibli-style trees with three.js
2023年02月16日 
00:06:53 - 00:08:49
Add a simple scene - How to create Ghibli-style trees with three.js

Add a simple scene

How to create Ghibli-style trees with three.js
2023年02月16日 
00:08:49 - 00:14:33
Add a ground plane for shadows - How to create Ghibli-style trees with three.js

Add a ground plane for shadows

How to create Ghibli-style trees with three.js
2023年02月16日 
00:14:33 - 00:17:19
Import a tree model - How to create Ghibli-style trees with three.js

Import a tree model

How to create Ghibli-style trees with three.js
2023年02月16日 
00:17:19 - 00:18:28
Add the tree model to the scene - How to create Ghibli-style trees with three.js

Add the tree model to the scene

How to create Ghibli-style trees with three.js
2023年02月16日 
00:18:28 - 00:19:37
Use Standard Material - How to create Ghibli-style trees with three.js

Use Standard Material

How to create Ghibli-style trees with three.js
2023年02月16日 
00:19:37 - 00:20:50
Use Toon Material - How to create Ghibli-style trees with three.js

Use Toon Material

How to create Ghibli-style trees with three.js
2023年02月16日 
00:20:50 - 00:23:25
Rotate the tree object - How to create Ghibli-style trees with three.js

Rotate the tree object

How to create Ghibli-style trees with three.js
2023年02月16日 
00:23:25 - 00:24:55
Create a simple shader - How to create Ghibli-style trees with three.js

Create a simple shader

How to create Ghibli-style trees with three.js
2023年02月16日 
00:24:55 - 00:28:05
Use a custom toon shader - How to create Ghibli-style trees with three.js

Use a custom toon shader

How to create Ghibli-style trees with three.js
2023年02月16日 
00:28:05 - 00:32:10
Tweak the toon shader - How to create Ghibli-style trees with three.js

Tweak the toon shader

How to create Ghibli-style trees with three.js
2023年02月16日 
00:32:10 - 00:35:11
Start creating a Ghibli shader - How to create Ghibli-style trees with three.js

Start creating a Ghibli shader

How to create Ghibli-style trees with three.js
2023年02月16日 
00:35:11 - 00:40:01
Define variables - How to create Ghibli-style trees with three.js

Define variables

How to create Ghibli-style trees with three.js
2023年02月16日 
00:40:01 - 00:42:12
Calculate brightness - How to create Ghibli-style trees with three.js

Calculate brightness

How to create Ghibli-style trees with three.js
2023年02月16日 
00:42:12 - 00:44:25
Add gradient colors - How to create Ghibli-style trees with three.js

Add gradient colors

How to create Ghibli-style trees with three.js
2023年02月16日 
00:44:25 - 00:44:53
Create another color variation - How to create Ghibli-style trees with three.js

Create another color variation

How to create Ghibli-style trees with three.js
2023年02月16日 
00:44:53 - 00:47:29
Thank you for watching - How to create Ghibli-style trees with three.js

Thank you for watching

How to create Ghibli-style trees with three.js
2023年02月16日 
00:47:29 - 00:47:52
Intro - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Intro

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:00:00 - 00:02:34
Add note list header component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add note list header component

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:02:34 - 00:07:39
Create TextInput restyle component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create TextInput restyle component

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:07:39 - 00:14:24
Add a TextInput to the header bar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a TextInput to the header bar

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:14:24 - 00:20:27
Move the theme picker to the sidebar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Move the theme picker to the sidebar

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:20:27 - 00:25:39
Add a left header bar button that can transform i - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a left header bar button that can transform i

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:25:39 - 00:37:07
Add a clear button to the header bar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a clear button to the header bar

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:37:07 - 00:38:55
Implement the header bar animations - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Implement the header bar animations

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:38:55 - 00:43:19
Enable tablet layouts - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Enable tablet layouts

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:43:19 - 00:44:29
Add a navbar to the detail screen - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a navbar to the detail screen

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:44:29 - 00:53:37
Add editor state atom - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add editor state atom

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:53:37 - 00:56:48
Create a note list screen for phones - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a note list screen for phones

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
00:56:48 - 01:03:07
Use 'useSetAtom' for better performance - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Use 'useSetAtom' for better performance

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:03:07 - 01:03:21
Make the screen responsive - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Make the screen responsive

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:03:21 - 01:11:08
Create a note list screen for tablets - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a note list screen for tablets

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:11:08 - 01:13:47
Create a three-column lavout component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a three-column lavout component

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:13:47 - 01:28:12
Memoize props of some components to improve - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Memoize props of some components to improve

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:28:12 - 01:29:33
Hide left view in portrait mode - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Hide left view in portrait mode

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:29:33 - 01:30:11
Toggle the sidebar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Toggle the sidebar

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:30:11 - 01:31:05
Add the sidebar to the left view - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add the sidebar to the left view

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:31:05 - 01:32:09
Implement detail screens for phones and tablets - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Implement detail screens for phones and tablets

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:32:09 - 01:40:02
Update the stack navigator for phones - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Update the stack navigator for phones

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:40:02 - 01:40:19
Display note body on the detail screen - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Display note body on the detail screen

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:40:19 - 01:44:45
Ending - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Ending

How to build animated & responsive tablet UIs with React Native (at the lakeside)
2022年11月10日 
01:44:45 - 01:45:15