CompStart

ProAulasCursosElementosSoftware

CompStart

Domine efeitos visuais com técnicas de ponta.

Aprendizado

CursosLiçõesRecursos ProRecursosSoftware

Tools

Tech CheckDisplay CheckMotion BlurCIE 1931PhysLight

Empresa

InstructorMissãoImpressumPrivacidadeTermos

Projetos

OCIO.ccDerekVFXReact CIE 1931Nuke Tools

Follow

YouTubeInstagramTikTokLinkedInContato

© 2026 CompStart. Todos os direitos reservados.

Portfolio

Criar um site de demonstração

Este guia ajudará você a criar um site de portfólio profissional usando Next.js, com estilo Tailwind CSS, e a publicá-lo no Vercel.

June 22, 2024

web
nextjs

Como criar e publicar um portfólio de artista de efeitos visuais (VFX) $0

Este guia ajudará você a criar um site de portfólio profissional usando Next.js, com estilo Tailwind CSS, e a publicá-lo no Vercel. Não se preocupe se você não tem muita experiência em tecnologia; basta seguir estes passos!

Passo 1: Configure seu ambiente de desenvolvimento

  1. Instale o Node.js:
    • Vá para nodejs.orgBaixe a versão LTS e instale-a. O Node.js permite que você execute os comandos necessários no seu computador.
  3. Instale o Visual Studio Code (VS Code):
    • Baixe e instaleVS Code, um editor de código que facilita a edição do seu site.

Passo 2: Criar um novo projeto Next.js

  1. Abra o VS Code:
    • Abra o VS Code e, em seguida, abra uma nova janela de terminal acessando o seguinte caminho:Exibir > Terminal.
  3. Iniciar um novo projeto:
    • No terminal, digite:
      npx create-next-app@latest my-portfolio --typescript --tailwind
    • Siga as instruções:
      • Dê um nome ao seu projeto:meu-portfólio.
      • Selecione "Sim" para TypeScript e "Sim" para Tailwind CSS.
    • Isso criará um novo projeto Next.js com TypeScript e Tailwind CSS.
  5. Acesse seu projeto:
    • No terminal, digite:
      cd meu-portfólio

Passo 3: Execute seu site localmente

  1. Inicie o servidor de desenvolvimento.:
    • No terminal, digite:
      npm run dev
    • Abra seu navegador e acessehttp://localhost:3000para ver seu site.

Passo 4: Crie uma página inicial básica com estilo Tailwind-CSS

  1. Abra o arquivo da página inicial:
    • No VS Code, localize e abra o arquivo.app/page.tsx.
  3. Adicione seu conteúdo:
    • Substitua o conteúdo existente pela seguinte estrutura básica:
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>
    </>
  );
}

Etapa 5: Implante seu site no Vercel

  1. Criar uma conta Vercel:
    • Vá para vercel.come crie uma conta gratuita.
  3. Implante seu projeto:
    • Conecte sua conta do GitHub ao Vercel, caso ainda não o tenha feito.
    • Clique no botão “Novo Projeto” e importe seumeu-portfóliorepositório.
    • Siga as instruções e o Vercel criará e implantará seu site automaticamente.
  5. Acesse seu site ao vivo:
    • Após a implantação, o Vercel fornecerá um URL (por exemplo,https://my-portfolio.vercel.appVocê pode compartilhar este link com potenciais clientes ou empregadores.

Toques finais

  • Otimização de SEO: O Cabeçacomponente empágina.tsxÉ onde você pode adicionar meta tags, descrições e palavras-chave para melhorar o SEO do seu site.
  • PersonalizaçãoO Tailwind CSS facilita o ajuste do design. Por exemplo, você pode alterar cores, fontes e layouts ajustando as classes do Tailwind.
  • Mantenha-se atualizadoAtualize seu portfólio regularmente, adicionando novos trabalhos e aprimorando o design.

Seu site de portfólio já está no ar! Seguindo estes passos, você criou um site simples, porém elegante, para exibir seus trabalhos de efeitos visuais. Boas divulgações!