DEV Community

Cover image for Reactify Your Resume! Build a Basic Online Portfolio in React
kelseyroche
kelseyroche

Posted on

2 1 1

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;
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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:youremail@example.com">youremail@example.com</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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (1)

Collapse
 
marksantiago02 profile image
Mark Santiago

Thanks for your sharing.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay