LessonsCourses

Create A Demo Site

August 11, 2024
No Alt

Senior Compositor

Derek Rein

https://derekvfx.ca

How to Create and Deploy a VFX Artist Portfolio $0

This guide will help you create a professional portfolio website using Next.js, styled with Tailwind CSS, and deploy it on Vercel. Don’t worry if you’re not tech-savvy; just follow these steps!

Step 1: Set Up Your Development Environment

  1. Install Node.js:
    • Go to nodejs.org, download the LTS version, and install it. Node.js allows you to run the necessary commands on your computer.
  3. Install Visual Studio Code (VS Code):
    • Download and install VS Code, a code editor that makes it easy to edit your website.

Step 2: Create a New Next.js Project

  1. Open VS Code:
    • Open VS Code and then open a new terminal window by going to View > Terminal.
  3. Start a New Project:
    • In the terminal, type:
      npx create-next-app@latest my-portfolio --typescript --tailwind
    • Follow the prompts:
      • Name your project: my-portfolio.
      • Select "Yes" for TypeScript and "Yes" for Tailwind CSS.
    • This will set up a new Next.js project with TypeScript and Tailwind CSS.
  5. Navigate to Your Project:
    • In the terminal, type:
      cd my-portfolio

Step 3: Run Your Website Locally

  1. Start the Development Server:
    • In the terminal, type:
      npm run dev
    • Open your web browser and go to http://localhost:3000 to see your site.

Step 4: Create a Basic Tailwind-CSS Styled Homepage

  1. Open the Homepage File:
    • In VS Code, find and open the file app/page.tsx.
  3. Add Your Content:
    • Replace the existing content with the following basic structure:
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>
    </>
  );
}

Step 5: Deploy Your Website on Vercel

  1. Create a Vercel Account:
  3. Deploy Your Project:
    • Connect your GitHub account to Vercel if you haven't already.
    • Click on the “New Project” button and import your my-portfolio repository.
    • Follow the prompts, and Vercel will automatically build and deploy your site.
  5. Access Your Live Site:
    • Once deployed, Vercel will provide you with a URL (e.g., https://my-portfolio.vercel.app). You can share this link with potential clients or employers.

Final Touches

  • SEO Optimization: The Head component in page.tsx is where you can add meta tags, descriptions, and keywords to improve your site’s SEO.
  • Customization: Tailwind CSS makes it easy to tweak the design. For example, you can change colors, fonts, and layouts by adjusting the Tailwind classes.
  • Keep Updating: Update your portfolio regularly by adding new work and improving the design.

Your portfolio website is now live! By following these steps, you’ve created a simple yet stylish site to showcase your VFX work. Happy showcasing!