Personal Portfolio

Step 1: Set Up Your React Project

Open your terminal and run the following commands:

bashCopy codenpx create-react-app portfolio
cd portfolio

Step 2: Create the Portfolio Components

Replace the content of src/App.js with the following code:

javascriptCopy codeimport React from 'react';
import './App.css';

const App = () => {
  return (
<div className="App">
  <header className="header">
    <h1>Your Name</h1>
    <p>Your Tagline or a short bio goes here.</p>
    <nav>
      <a href="#projects">Projects</a>
      <a href="#skills">Skills</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <section id="projects">
    <h2>Projects</h2>
    <div className="project-list">
      <div className="project-card">
        <h3>Project Title 1</h3>
        <p>Description of project 1.</p>
        <a href="https://github.com/yourusername/project1" target="_blank" rel="noopener noreferrer">View Project</a>
      </div>
      <div className="project-card">
        <h3>Project Title 2</h3>
        <p>Description of project 2.</p>
        <a href="https://github.com/yourusername/project2" target="_blank" rel="noopener noreferrer">View Project</a>
      </div>
      {/* Add more projects as needed */}
    </div>
  </section>
  <section id="skills">
    <h2>Skills</h2>
    <ul>
      <li>JavaScript</li>
      <li>React</li>
      <li>CSS</li>
      <li>HTML</li>
      {/* Add more skills as needed */}
    </ul>
  </section>
  <footer id="contact">
    <h2>Contact Me</h2>
    <p>Email: [email protected]</p>
    <p>LinkedIn: <a href="https://www.linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">Your LinkedIn</a></p>
    <p>GitHub: <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">Your GitHub</a></p>
  </footer>
</div>
  );
};

export default App;

Step 3: Style Your Portfolio

Open src/App.css and add the following styles:

cssCopy codebody {
  margin: 0;
  font-family: Arial, sans-serif;
}

.App {
  text-align: center;
  padding: 20px;
}

.header {
  background-color: #282c34;
  color: white;
  padding: 50px 0;
}

.header h1 {
  margin: 0;
}

.header nav a {
  margin: 0 15px;
  color: white;
  text-decoration: none;
}

header nav a:hover {
  text-decoration: underline;
}

section {
  margin: 40px 0;
}

.project-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  width: 200px;
}

.project-card h3 {
  margin: 0;
}

footer {
  margin-top: 40px;
  padding: 20px 0;
  background-color: #f1f1f1;
}

Step 4: Run Your Application

In the terminal, run:

bashCopy codenpm start