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:[email protected]">[email protected]</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!
SOCIAL SHARE CARD GENERATOR