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