Create A Portfolio Site Using NextJS
June 22, 2024

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!
View > Terminal.npx create-next-app@latest my-portfolio --typescript --tailwindmy-portfolio.cd my-portfolionpm run devhttp://localhost:3000 to see your site.app/page.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>
</>
);
}my-portfolio repository.https://my-portfolio.vercel.app). You can share this link with potential clients or employers.Head component in page.tsx is where you can add meta tags, descriptions, and keywords to improve your site’s SEO.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!