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!

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (1)

Collapse
 
marksantiago02 profile image
Mark Santiago

Thanks for your sharing.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay