ํ™ˆ์œ ํŠœ๋ธŒ๋ธ”๋กœ๊ทธTop 10
๋‚ด ํ”„๋กœํ•„
๋ฐ๋ธŒํ—ˆ๋ธŒ ์•ˆ๋‚ด
์†Œ๊ฐœ์—…๋ฐ์ดํŠธ ์†Œ์‹
๋ฐ๋ธŒํ—ˆ๋ธŒ ์ปค๋ฎค๋‹ˆํ‹ฐ
๋‹ค๋ฅธ ์˜์ƒ ๋ณด๊ธฐ

How to Create a Stunning Portfolio Website with Nextjs, Tailwind CSS and Framer-motion๐ŸŒŸ

CodeBucks

2023. 3. 27.

0ํšŒ

#frontend
  • Next.js, Tailwind CSS, and Framer Motion์„ ์‚ฌ์šฉํ•˜์—ฌ ์‹ฌํ”Œํ•˜์ง€๋งŒ ๊ฐ•๋ ฌํ•œ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. โœจ
  • MidJourney๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํ›Œ๋ฅญํ•œ ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ์›€์ง์ด๋Š” SVG ์•„์ด์ฝ˜์„ ํ†ตํ•ด ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•œ ๋””์ž์ธ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ๐Ÿค–
  • Framer Motion์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ถ€๋“œ๋Ÿฝ๊ณ  ๋งค๋„๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ๋”ํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. ๐Ÿ’ซ
  • Tailwind CSS์˜ ๊ฐ•๋ ฅํ•œ ํด๋ž˜์Šค ์‹œ์Šคํ…œ์„ ํ™œ์šฉํ•˜์—ฌ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์œผ๋กœ ๋””์ž์ธ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ๐Ÿ› ๏ธ
  • ์•„์ด์ฝ˜IFY์—์„œ ๋‹ค์–‘ํ•œ ์•„์ด์ฝ˜์„ ํ™œ์šฉํ•˜์—ฌ ์‹ฌํ”Œํ•˜๋ฉด์„œ๋„ ์ „๋ฌธ์ ์ธ ํฌํŠธํด๋ฆฌ์˜ค ๋””์ž์ธ์„ ์™„์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ํฌํŠธํด๋ฆฌ์˜ค๋Š” ๋น ๋ฅธ ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„๋ฅผ ์œ„ํ•ด ์ตœ์ ํ™”๋˜์–ด ์žˆ์œผ๋ฉฐ, 100์ ์˜ Lighthouse ์ ์ˆ˜๋ฅผ ๋‹ฌ์„ฑํ–ˆ๋‹ค. ๐Ÿš€

Recommanded Videos

์ฝ”์ฝ”์•„ ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ ์กฐ๊ธˆ ํ›„ ์žก๋‹ด

์ฝ”์ฝ”์•„ ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ ์กฐ๊ธˆ ํ›„ ์žก๋‹ด

2025. 2. 9.

๋ณ€์ˆ˜๋ช… X๊ฐ™์ด ์ง“์ง€ ์•Š๊ธฐ. ๊ฐ™์€ ๊ฐœ๋…์— ์—ฌ๋Ÿฌ ์šฉ์–ด ํ˜ผ๋ˆํ•ด์„œ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ธฐ

๋ณ€์ˆ˜๋ช… X๊ฐ™์ด ์ง“์ง€ ์•Š๊ธฐ. ๊ฐ™์€ ๊ฐœ๋…์— ์—ฌ๋Ÿฌ ์šฉ์–ด ํ˜ผ๋ˆํ•ด์„œ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ธฐ

2025. 3. 6.

5 Games Made in Godot To Inspire You (05/28/25)

5 Games Made in Godot To Inspire You (05/28/25)

2025. 5. 28.

Stop Making This Mistake in Next.js

Stop Making This Mistake in Next.js

2024. 8. 4.

How I Protect My Tanstack Start Applications

How I Protect My Tanstack Start Applications

2025. 8. 20.

Custom Hook in React

Custom Hook in React

2025. 1. 16.