Tutorial membuat web portofolio dengan reactjs lengkap dengan source codenya

⚙️ Langkah-langkah

1️⃣ Buat project React

npx create-react-app portfolio-simple
cd portfolio-simple
npm start

2️⃣ Ganti isi file src/App.jsx dengan kode berikut:

import "./App.css";

function App() {
  return (
    <div>
      <header className="header">
        <h1>Hi, I'm Sutrisno</h1>
        <p>Web Developer | Programmer | Tech Enthusiast</p>
      </header>

      <section className="about">
        <h2>About Me</h2>
        <p>
          I am a passionate web developer who enjoys creating simple,
          responsive, and user-friendly websites using React, HTML, CSS, and
          JavaScript.
        </p>
      </section>

      <section className="projects">
        <h2>My Projects</h2>
        <div className="project-list">
          <div className="project-card">
            <h3>Portfolio Website</h3>
            <p>A simple portfolio website built with React.</p>
          </div>
          <div className="project-card">
            <h3>Company Profile</h3>
            <p>Modern and clean company profile website.</p>
          </div>
          <div className="project-card">
            <h3>To-Do App</h3>
            <p>A minimal task management app built with React Hooks.</p>
          </div>
        </div>
      </section>

      <section className="contact">
        <h2>Contact</h2>
        <p>Email: <a href="mailto:youremail@example.com">youremail@example.com</a></p>
      </section>

      <footer className="footer">
        <p>© {new Date().getFullYear()} Sutrisno. All Rights Reserved.</p>
      </footer>
    </div>
  );
}

export default App;

3️⃣ Ganti isi file src/App.css dengan kode berikut:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
}

/* Header */
.header {
  background-color: #0078ff;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.header h1 {
  margin-bottom: 10px;
}

/* About */
.about, .projects, .contact {
  padding: 50px 20px;
  text-align: center;
}

/* Projects */
.project-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.project-card {
  background-color: #f4f4f4;
  border-radius: 10px;
  padding: 20px;
  width: 250px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.project-card h3 {
  color: #0078ff;
}

/* Contact */
.contact a {
  color: #0078ff;
  text-decoration: none;
}

.contact a:hover {
  text-decoration: underline;
}

/* Footer */
.footer {
  background-color: #0078ff;
  color: white;
  text-align: center;
  padding: 15px 0;
  margin-top: 40px;
}

4️⃣ Jalankan project

npm start

Lalu buka di browser →
👉 http://localhost:3000

🎨 Hasil Akhir

• Header: Nama dan profesi kamu
• About: Deskripsi singkat
• Projects: 3 contoh proyek sederhana
• Contact: Email kamu
• Footer: Tahun & hak cipta