Next.js for Portfolio and Resume Websites

Introduction

Next.js is an excellent choice for creating a portfolio and resume website. In this tutorial, we will walk you through the process of building a professional portfolio and resume site using Next.js. We'll cover project setup, creating a portfolio section, adding a resume page, and showcasing your skills and experiences.

Setting Up the Project

To get started, make sure you have Node.js and npm installed on your system. If not, download and install them from the official website.

Create a new Next.js project using the following commands:

        npx create-next-app portfolio-website
cd portfolio-website
            

Creating the Portfolio Section

Your portfolio is where you'll showcase your work, projects, and accomplishments. We'll create a "portfolio" page and list your projects with images and descriptions.

        <!-- pages/portfolio.js -->
import React from 'react';
const projects = [
    {
        title: 'Project 1',
        description: 'Description of Project 1.',
        image: '/project1.jpg',
    },
    {
        title: 'Project 2',
        description: 'Description of Project 2.',
        image: '/project2.jpg',
    },
    // Add more projects
];
export default function Portfolio() {
    return (
        <div>
            <h2>Portfolio</h2>
            <div className="portfolio">
                {projects.map((project, index) => (
                    <div key={index} className="project">
                        <img src={project.image} alt={project.title} />
                        <h3>{project.title}</h3>
                        <p>{project.description}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}
            

Creating the Resume Page

Your resume page should showcase your professional experience, education, and skills. We'll create a "resume" page and list your details in a structured format.

        <!-- pages/resume.js -->
import React from 'react';
const experience = [
    {
        title: 'Job Title 1',
        company: 'Company 1',
        date: 'Jan 2020 - Dec 2022',
        description: 'Description of job experience 1.',
    },
    {
        title: 'Job Title 2',
        company: 'Company 2',
        date: 'Mar 2018 - Dec 2019',
        description: 'Description of job experience 2.',
    },
    // Add more job experiences
];
const education = [
    {
        degree: 'Bachelor of Science in Computer Science',
        institution: 'University of XYZ',
        date: '2014 - 2018',
    },
    // Add more education details
];
export default function Resume() {
    return (
        <div>
            <h2>Resume</h2>
            <div className="experience">
                <h3>Work Experience</h3>
                {experience.map((exp, index) => (
                    <div key={index} className="job">
                        <h4>{exp.title}</h4>
                        <p>{exp.company}</p>
                        <p>{exp.date}</p>
                        <p>{exp.description}</p>
                    </div>
                ))}
            </div>
            <div className="education">
                <h3>Education</h3>
                {education.map((edu, index) => (
                    <div key={index} className="degree">
                        <h4>{edu.degree}</h4>
                        <p>{edu.institution}</p>
                        <p>{edu.date}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}
            

Conclusion

You've learned how to create a portfolio and resume website using Next.js. This is just the beginning, and you can customize and expand your website to include additional sections like a blog, contact page, or more advanced features. This website will help you showcase your skills and experiences to potential employers and clients.