Building and Deploying Your Personal Profile Page for Free with Next.js and Vercel

Introduction

In today's digital world, having a personal profile page is crucial for showcasing your skills, projects, and professional identity. This comprehensive guide will walk you through creating a modern, responsive profile page using Next.js and deploying it for free on Vercel.

Prerequisites

Before we begin, ensure you have:

• Basic knowledge of HTML, CSS, and JavaScript
• Node.js installed (version 16.8 or later)
• A GitHub account
• VSCode or your preferred code editor

Step 1: Setting Up Your Project

Create a New Next.js Project

Open your terminal and run:

npx create-next-app@latest personal-profile
cd personal-profile

When prompted, choose:

• TypeScript: Yes
• ESLint: Yes
• Tailwind CSS: Yes
• App Router: Yes
• Import alias: Default

Project Structure

Your project will look like this:

personal-profile/
├── app/
├── components/
├── public/
├── styles/
└── package.json

Step 2: Designing Your Profile Page

Create Components

We'll modularize our profile page into reusable components.

components/Header.tsx:

import Image from 'next/image'

export default function Header() {
  return (
    <header className="flex items-center space-x-6 mb-8">
      <Image
        src="/profile-pic.jpg"
        alt="Your Name"
        width={120}
        height={120}
        className="rounded-full"
      />
      <div>
        <h1 className="text-3xl font-bold">Your Name</h1>
        <p className="text-gray-600">Your Professional Title</p>
      </div>
    </header>
  )
}

components/Skills.tsx:

export default function Skills() {
  const skills = [
    'Next.js', 'React', 'TypeScript',
    'Tailwind CSS', 'Node.js'
  ]

  return (
    <section className="mb-8">
      <h2 className="text-2xl font-semibold mb-4">Skills</h2>
      <div className="flex flex-wrap gap-2">
        {skills.map((skill) => (
          <span
            key={skill}
            className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full"
          >
            {skill}
          </span>
        ))}
      </div>
    </section>
  )
}

Main Page

app/page.tsx:

import Header from '../components/Header'
import Skills from '../components/Skills'

export default function Home() {
  return (
    <main className="container mx-auto max-w-2xl p-6">
      <Header />
      <section className="mb-8">
        <h2 className="text-2xl font-semibold mb-4">About Me</h2>
        <p>
          A passionate developer with expertise in web technologies,
          committed to creating innovative and user-friendly solutions.
        </p>
      </section>
      <Skills />
    </main>
  )
}

Step 3: Adding Interactivity

Projects Section

components/Projects.tsx:

export default function Projects() {
  const projects = [
    {
      name: 'Portfolio Website',
      description: 'Responsive personal profile site',
      tech: ['Next.js', 'Tailwind']
    },
    // Add more projects
  ]

  return (
    <section>
      <h2 className="text-2xl font-semibold mb-4">Projects</h2>
      {projects.map((project) => (
        <div key={project.name} className="mb-4">
          <h3 className="font-bold">{project.name}</h3>
          <p>{project.description}</p>
          <div className="flex gap-2 mt-2">
            {project.tech.map((tech) => (
              <span
                key={tech}
                className="text-sm bg-gray-100 px-2 rounded"
              >
                {tech}
              </span>
            ))}
          </div>
        </div>
      ))}
    </section>
  )
}

Step 4: Deployment with Vercel

GitHub Repository

1. Initialize Git:

git init
git add .
git commit -m "Initial commit"

2. Create a GitHub repository
3. Push your code:

git remote add origin https://github.com/yourusername/personal-profile.git
git branch -M main
git push -u origin main

Vercel Deployment

1. Go to vercel.com
2. Sign in with GitHub
3. Click "New Project"
4. Select your personal-profile repository
5. Vercel will auto-detect Next.js
6. Click "Deploy"

Custom Domain (Optional)

• In Vercel dashboard, go to Project Settings
• Navigate to Domains
• Add your custom domain

Best Practices

• Use meaningful git commits
• Keep components modular
• Optimize images
• Add alt text for accessibility
• Use responsive design

Conclusion

Congratulations! You've created a professional profile page and deployed it for free. This template is fully customizable and can be expanded with more sections, animations, and interactivity.

Next Steps

• Add contact form
• Integrate blog section
• Implement dark mode
• Add animations with Framer Motion

Happy coding!