Reactify Your Resume! Build a Basic Online Portfolio in React

Having a personal portfolio is essential in today’s job market, especially in tech. With React, you can create a dynamic and professional online portfolio that showcases your skills, projects, and personality. This guide will walk you through building a simple portfolio site step by step. In the future I will post a walkthrough for something a little more advanced, but this tutorial is great for beginners!

1. Set Up React

• Make sure Node.js is installed. If not, download it from Node.js official site.
  Create a React Project with Vite:

• Run:
  npm create vite@latest my-portfolio --template react


• Navigate to Your Project Folder:
  cd my-portfolio


• Install Dependencies:
  npm install


• Start the Development Server:
  npm start


1. Plan Your Portfolio Layout

Think about the sections you want:

• Header: Your name, a tagline, and navigation links.
• About: A short bio and your skills.
• Projects: A showcase of your work.
• Contact: Links to email and social media.

Here’s an example of the folder structure for components:

src/
── components/
| ── App.js
| ── Header.js
| ── About.js
| ── Projects.js
| ── Contact.js

2. Build Your Components

Header Component

Create Header.js for your navigation and name:

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Your Name</h1>
      <nav>
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
  );
};

export default Header;

About Component

Write your bio and skills in About.js:

import React from 'react';

const About = () => {
  return (
    <section id="about">
      <h2>About Me</h2>
      <p>Hi, I’m [Your Name], a budding software developer with a passion for [your interests].</p>
      <h3>Skills:</h3>
      <ul>
        <li>JavaScript</li>
        <li>React</li>
        <li>CSS</li>
        <li>Node.js</li>
      </ul>
    </section>
  );
};

export default About;

Projects Component

Showcase your work in Projects.js:

import React from 'react';

const Projects = () => {
  const projectList = [
    { name: "Project 1", link: "https://github.com/yourproject1" },
    { name: "Project 2", link: "https://github.com/yourproject2" },
  ];

  return (
    <section id="projects">
      <h2>My Projects</h2>
      <ul>
        {projectList.map((project, index) => (
          <li key={index}>
            <a href={project.link}>
              {project.name}
            </a>
          </li>
        ))}
      </ul>
    </section>
  );
};

export default Projects;

Contact Component

Provide contact options in Contact.js:

import React from 'react';

const Contact = () => {
  return (
    <section id="contact">
      <h2>Contact Me</h2>
      <p>Email: <a href="mailto:[e-mail]">[e-mail]</a></p>
      <p>
        Find me on: 
        <a href="https://linkedin.com/in/yourprofile">LinkedIn</a> | 
        <a href="https://github.com/yourgithub">GitHub</a>
      </p>
    </section>
  );
};

export default Contact;

4. Assemble Your Portfolio in App.js

Import and organize your components:

import React from 'react';
import Header from './Header';
import About from './About';
import Projects from './Projects';
import Contact from './Contact';

function App() {
  return (
    <div className="App">
      <Header />
      <main>
        <About />
        <Projects />
        <Contact />
      </main>
    </div>
  );
}

export default App;

5. Style Your Portfolio and Deploy!

Stay tuned, I am planning to write another blog post about CSS styling and launching your website via GitHub.

Would you like to see this project’s code in a GitHub repository? Let me know!

Comments

[Mark Santiago]

Thanks for your sharing.