Portfolio

데모 사이트 만들기

이 가이드는 Next.js를 사용하여 전문적인 포트폴리오 웹사이트를 제작하고, Tailwind CSS로 스타일을 지정하고, Vercel에 배포하는 방법을 안내합니다.

June 22, 2024

nextjs

VFX 아티스트 포트폴리오를 만들고 배포하는 방법 (무료)

이 가이드는 Next.js를 사용하여 전문적인 포트폴리오 웹사이트를 제작하고, Tailwind CSS로 스타일을 지정하고, Vercel에 배포하는 방법을 안내합니다. 기술적인 지식이 부족하더라도 걱정하지 마세요. 단계별로 따라하기만 하면 됩니다!

1단계: 개발 환경 설정

Node.js를 설치하세요:
- 가다노드js.orgLTS 버전을 다운로드하여 설치하세요. Node.js를 사용하면 컴퓨터에서 필요한 명령어를 실행할 수 있습니다.
Visual Studio Code(VS Code)를 설치하세요.:
- 다운로드 및 설치VS 코드웹사이트를 쉽게 편집할 수 있는 코드 편집기입니다.

2단계: 새 Next.js 프로젝트 생성

VS Code를 엽니다.:
- VS Code를 열고 다음 경로로 이동하여 새 터미널 창을 엽니다.보기 > 터미널.
새 프로젝트 시작하기:
- 터미널에서 다음을 입력하세요:
  npx create-next-app@latest my-portfolio --typescript --tailwind
- 안내에 따라 진행하세요:
- - 프로젝트 이름을 지정하세요:내 포트폴리오.
  - TypeScript 사용 여부에 대해 "예"를 선택하고, Tailwind CSS 사용 여부에 대해서도 "예"를 선택하십시오.
- 이렇게 하면 TypeScript와 Tailwind CSS를 사용하는 새로운 Next.js 프로젝트가 설정됩니다.
프로젝트로 이동:
- 터미널에서 다음을 입력하세요:
  CD 내 포트폴리오

3단계: 웹사이트를 로컬에서 실행하세요

개발 서버를 시작하세요:
- 터미널에서 다음을 입력하세요:
  npm run dev
- 웹 브라우저를 열고 다음 주소로 이동하세요.http://localhost:3000귀하의 사이트를 보기 위해서입니다.

4단계: Tailwind-CSS 스타일이 적용된 기본 홈페이지 만들기

홈페이지 파일을 엽니다.:
- VS Code에서 해당 파일을 찾아 엽니다.앱/페이지.tsx.
콘텐츠를 추가하세요:
- 기존 내용을 다음의 기본 구조로 대체하십시오.

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My VFX Portfolio</title>
        <meta name="description" content="Showcasing my VFX work" />
      </Head>
      <main className="min-h-screen bg-gray-900 text-white flex flex-col justify-center items-center">
        <h1 className="text-5xl font-bold mb-4">Welcome to My VFX Portfolio</h1>
        <p className="text-xl mb-8">Showcasing my best work in visual effects.</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <img src="/images/work1.jpg" alt="Work 1" className="rounded shadow-lg" />
          <img src="/images/work2.jpg" alt="Work 2" className="rounded shadow-lg" />
        </div>
      </main>
    </>
  );
}

5단계: Vercel에 웹사이트를 배포하세요

Vercel 계정 만들기:
- 가다베르셀닷컴무료 계정을 등록하세요.
프로젝트 배포하기:
- 아직 GitHub 계정을 Vercel에 연결하지 않았다면 연결하세요.
- "새 프로젝트" 버튼을 클릭하고 파일을 가져오세요.내 포트폴리오저장소.
- 안내에 따라 진행하면 Vercel이 자동으로 사이트를 구축하고 배포합니다.
라이브 사이트에 접속하세요:
- 배포가 완료되면 Vercel에서 URL(예:https://my-portfolio.vercel.app이 링크를 잠재 고객이나 고용주와 공유할 수 있습니다.

마무리 작업

SEO 최적화: 그머리구성 요소페이지.tsx이곳에서 메타 태그, 설명 및 키워드를 추가하여 사이트의 SEO를 개선할 수 있습니다.
맞춤 설정Tailwind CSS를 사용하면 디자인을 쉽게 수정할 수 있습니다. 예를 들어 Tailwind 클래스를 조정하여 색상, 글꼴 및 레이아웃을 변경할 수 있습니다.
계속 업데이트하세요포트폴리오에 새로운 작품을 추가하고 디자인을 개선하여 정기적으로 업데이트하세요.

포트폴리오 웹사이트가 이제 오픈했습니다! 이 단계를 따라 하시면 VFX 작품을 선보일 수 있는 심플하면서도 세련된 웹사이트를 만들 수 있습니다. 즐겁게 작품을 전시해 보세요!

import Head from 'next/head'; export default function Home() { return ( <> <Head> <title>My VFX Portfolio</title> <meta name="description" content="Showcasing my VFX work" /> </Head> <main className="min-h-screen bg-gray-900 text-white flex flex-col justify-center items-center"> <h1 className="text-5xl font-bold mb-4">Welcome to My VFX Portfolio</h1> <p className="text-xl mb-8">Showcasing my best work in visual effects.</p> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <img src="/images/work1.jpg" alt="Work 1" className="rounded shadow-lg" /> <img src="/images/work2.jpg" alt="Work 2" className="rounded shadow-lg" /> </div> </main> </> ); }

CompStart

데모 사이트 만들기

VFX 아티스트 포트폴리오를 만들고 배포하는 방법 (무료)

1단계: 개발 환경 설정

2단계: 새 Next.js 프로젝트 생성

3단계: 웹사이트를 로컬에서 실행하세요

4단계: Tailwind-CSS 스타일이 적용된 기본 홈페이지 만들기

5단계: Vercel에 웹사이트를 배포하세요

마무리 작업

CompStart

데모 사이트 만들기

VFX 아티스트 포트폴리오를 만들고 배포하는 방법 (무료)

1단계: 개발 환경 설정

2단계: 새 Next.js 프로젝트 생성

3단계: 웹사이트를 로컬에서 실행하세요

4단계: Tailwind-CSS 스타일이 적용된 기본 홈페이지 만들기

5단계: Vercel에 웹사이트를 배포하세요

마무리 작업