vfx
Create A Demo Site
Create A Portfolio Site Using NextJS
June 22, 2024
nextjs
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
- 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.
- 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
- Open VS Code:
- Open VS Code and then open a new terminal window by going to
View > Terminal.
- Open VS Code and then open a new terminal window by going to
- 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.
- Name your project:
- This will set up a new Next.js project with TypeScript and Tailwind CSS.
- In the terminal, type:
- Navigate to Your Project:
- In the terminal, type:
cd my-portfolio
- In the terminal, type:
Step 3: Run Your Website Locally
- Start the Development Server:
- In the terminal, type:
npm run dev - Open your web browser and go to
http://localhost:3000to see your site.
- In the terminal, type:
Step 4: Create a Basic Tailwind-CSS Styled Homepage
- Open the Homepage File:
- In VS Code, find and open the file
app/page.tsx.
- In VS Code, find and open the file
- 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
- Create a Vercel Account:
- Go to vercel.com and sign up for a free account.
- Deploy Your Project:
- Connect your GitHub account to Vercel if you haven't already.
- Click on the “New Project” button and import your
my-portfoliorepository. - Follow the prompts, and Vercel will automatically build and deploy your site.
- 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.
- Once deployed, Vercel will provide you with a URL (e.g.,
Final Touches
- SEO Optimization: The
Headcomponent inpage.tsxis 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!