-->
Home
sitemap
sourcecodeweb

Source Code Website Personal Portofolio Menggunakan HTML & CSS | Full Source Code

Rozananda

 


Membuat Portofolio Menggunakan HTML dan CSS: Panduan Lengkap dengan Source Code


Membangun portofolio online adalah langkah penting untuk menunjukkan keterampilan dan proyek Anda kepada calon pemberi kerja atau klien. Dalam artikel ini, kita akan membahas cara membuat portofolio menggunakan HTML dan CSS. Kami juga akan menyertakan source code yang bisa Anda gunakan dan modifikasi sesuai kebutuhan Anda.

Langkah 1: Struktur Dasar HTML

Pertama, kita mulai dengan membuat struktur dasar HTML. Kita akan membuat file bernama index.html dan menambahkan kode berikut:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <!-- Icon -->
    <link rel="icon" href="media/img/pic-web.jpg" />
    <!-- Title Website -->
    <title>Portfolio Rozananda</title>
    <!--Icon Font Awesome-->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    />
  </head>
  <body>
    <header>
      <nav>
        <div class="hero_content">
          <div class="logoku"><a href="#">Rozananda</a></div>
          <input type="checkbox" id="menu_bar" />
          <label for="menu_bar" class="menu_bar2">
            <span></span>
            <span></span>
            <span></span>
          </label>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#aboutme">About Me</a></li>
            <li><a href="#skills">Skills</a></li>
            <li><a href="#project">Project</a></li>
            <div class="contact"><a href="#contact">Contact</a></div>
          </ul>
        </div>
      </nav>
    </header>
    <main>
      <section class="section" id="home">
        <div class="section_con1">
          <div class="content">
            <h1 class="title">
              <span class="hi_there">Hi There 👋</span><br />I'm
              <span class="developer">Rozananda Agust</span>
            </h1>
            <p class="description">
              Mahasiswa yang memiliki kemampuan dalam hal
              <span class="tebal"
                >Web Front End Developer, Desain Grafis, Perawatan Berkala
                Kendaraan Ringan Otomotif</span
              >, yang dapat berkontribusi atau bekerja sama dalam sebuah tim.
            </p>
            <div class="sosial-media-ku">
              <a href="https://instagram.com/tinoisgood" target="_blank">
                <i class="fab fa-instagram border-sosmed"></i>
              </a>
              <a
                href="https://www.youtube.com/channel/UCBcCAXGD7bSU0Mud65ibKxQ"
                target="_blank"
              >
                <i class="fab fa-youtube border-sosmed"></i>
              </a>
              <a href="https://www.github.com/tinogustino" target="_blank">
                <i class="fab fa-github border-sosmed"></i>
              </a>
              <a href="https://olengbloge.blogspot.com/" target="_blank">
                <i class="fab fa-blogger border-sosmed"></i>
              </a>
            </div>
          </div>
          <div class="image">
            <img
              src="media/img/profile-pic.png"
              alt="Profile picture of Rozananda"
            />
          </div>
        </div>
      </section>
      <section class="section" id="aboutme">
        <h1 class="about-me">-- ABOUT ME --</h1>
        <div class="box-aboutme">
          <div class="about-content">
            <div class="about-text">
              <p class="tebal">Nama Lengkap :</p>
              <h2>Rozananda Agustino Dwi Cahya</h2>
              <br />
              <span class="progamerPemula">Programer Pemula</span>
              <p>
                Saya lagi menempuh pendidikan strata satu di Universitas
                Bhinneka PGRI. Saya mengambil program studi Informatika. Saya
                mahir dalam
                <span class="tebal italic">Web Front End Developer</span>
                terutama dalam bahasa program
                <span class="tebal italic">HTML & CSS</span>.
              </p>
              <p class="tebal">
                <i class="fa-solid fa-location-dot"></i> Alamat :
              </p>
              <p>
                RT.05/RW.02, Baru Klinting 2, Baruharjo, Kec. Durenan, Kabupaten
                Trenggalek, Jawa Timur, Kode pos 66381.
              </p>
              <p class="tebal"><i class="fa-solid fa-envelope"></i> Email :</p>
              <p>olengbloge@gmail.com</p>
              <p class="tebal"><i class="fa-solid fa-phone"></i> Telepon :</p>
              <p>6281535365496</p>
              <div class="cv-nanda">
                <button class="btn-cv">
                  <a href="media/cv-rozananda.pdf">
                    <i class="fa-solid fa-download"></i> DOWNLOAD CV
                  </a>
                </button>
              </div>
            </div>

            <div class="img-nanda">
              <img src="media/img/profile2.jpeg" alt="Rozananda" />
            </div>
          </div>
        </div>
      </section>
      <!--Selektion Skill-->
      <section class="section" id="skills">
        <h1 class="skill-nanda">-- SKILLS --</h1>
        <div class="skill-nanda2">
          <div class="skill-item"><i class="fab fa-html5"></i> HTML</div>
          <div class="skill-item"><i class="fab fa-css3-alt"></i> CSS</div>
          <div class="skill-item"><i class="fab fa-java"></i> Java</div>
          <div class="skill-item"><i class="fas fa-video"></i> KineMaster</div>
          <div class="skill-item">
            <i class="fas fa-pencil-ruler"></i> PixelLab
          </div>
          <div class="skill-item">
            <i class="fa-solid fa-photo-film"></i> Photoshop
          </div>
          <div class="skill-item">
            <i class="fa-solid fa-file-code"></i> Skechware
          </div>
          <div class="skill-item">
            <i class="fa-regular fa-file-word"></i> Microsoft Word
          </div>
          <div class="skill-item">
            <i class="fa-regular fa-file-powerpoint"></i> Power Point
          </div>
        </div>
      </section>
      <!--Selektion project-->
      <section class="project section" id="project">
        <h1 class="project-class skill-nanda">-- PROJECT --</h1>

        <div class="projects-container">
          <div class="project-item">
            <img
              src="media/img/project1.jpg"
              alt="Project Nanda 1"
              class="project-image"
            />
            <p class="tebal">Portopolio Calon Guru Penggerak</p>
            <p>
              Saya menyelesaikan website statis portofolio calon guru Penggerak
              angkatan 9 pada Januari 2024. Menggunakan bahasa program HTML,
              CSS.
            </p>
            <p>-------</p>
            <p class="tebal projectp">
              <a href="https://olengbloge.xcodehoster.asia/" target="_blank"
                >> Go to Projects</a
              >
            </p>
            <p>-------</p>
          </div>
          <div class="project-item">
            <img
              src="media/img/project2.jpg"
              alt="Project Nanda 2"
              class="project-image"
            />
            <h2>TTS - OLENGBLOGE</h2>
            <p>
              Saya menyelesaikan Aplikasi Text to Speech untuk android pada
              bulan Agustus 2023 dengan aplikasi Skechware, bahasa yang
              digunakan adalah scratch.
            </p>
            <p>-------</p>
            <p class="tebal projectp">
              <a
                href="https://olengbloge.xcodehoster.asia/download/tts-olengbloge.html"
                target="_blank"
                >> Go to Projects</a
              >
            </p>
            <p>-------</p>
          </div>
          <div class="project-item">
            <img
              src="media/img/project3.jpg"
              alt="Project Nanda 3"
              class="project-image"
            />
            <h2>Blogger Statis</h2>
            <p>Saya membuat blogs statis menggunakan HTML & CSS.</p>
            <p>-------</p>
            <p class="tebal projectp">
              <a href="https://tinogustino.github.io/" target="_blank"
                >> Go to Projects</a
              >
            </p>
            <p>-------</p>
          </div>
        </div>

        <!-- Selection Contact Ku-->
      </section>
      <section class="contact-que" id="contact">
        <div class="kontak-saya">
          <h2>CONTACT PERSON</h2>
          <div class="cv-nanda">
            <button class="btn-cv">
              <a
                href="https://wa.me/6281535365496?text=Saya%20Baru%20Saja%20Membaca%20Portopolio%20Mu"
              >
                SEND MESSAGE
              </a>
            </button>
          </div>
        </div>
      </section>

      <!--Footer-->
      <footer class="footer">
        <br />
        <p>
          CopyRight &copy
          <a href="https://olengbloge.xcodehoster.asia/author/"
            >OlengBloge. All rights reserved.</a
          >
        </p>
        <p>Rozananda Agustino Dwi Cahya<br />23161562080</p>
        <div class="sosial-media-ku">
          <a href="https://instagram.com/tinoisgood" target="_blank">
            <i class="fab fa-instagram border-sosmed"></i>
          </a>
          <a
            href="https://www.youtube.com/channel/UCBcCAXGD7bSU0Mud65ibKxQ"
            target="_blank"
          >
            <i class="fab fa-youtube border-sosmed"></i>
          </a>
          <a href="https://www.github.com/tinogustino" target="_blank">
            <i class="fab fa-github border-sosmed"></i>
          </a>
          <a href="https://olengbloge.blogspot.com/" target="_blank">
            <i class="fab fa-blogger border-sosmed"></i>
          </a>
        </div>
        <br />
        <marquee>Terimakasih telah mengunjungi portofolio saya.</marquee>
      </footer>
    </main>
  </body>
</html>


Langkah 2: Menambahkan Gaya dengan CSS

Selanjutnya, kita akan membuat file style.css untuk menambahkan gaya pada halaman HTML kita. Tambahkan kode berikut ke dalam style.css:


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 99;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

nav .logoku a {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  transition: color 0.3s;
  border: solid 1px brown;
  padding: 5px;
  border-radius: 10px;
}
nav .logoku a:hover {
  background-color: wheat;
  color: #1f2937;
}

nav input {
  display: none;
}

nav .menu_bar2 {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  height: 1.5rem;
}

nav .menu_bar2 span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: brown;
  transition: all 0.3s;
}

nav ul {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
}

nav ul li a {
  padding: 0.5rem 1rem;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 600;
  color: #1f2937;
  transition: color 0.3s, border-color 0.3s;
}

nav ul li a:hover {
  border: solid 1px brown;
  background-color: yellow;
  border-radius: 5px;
}
.cv-nanda {
  margin-top: 20px;
  text-align: center;
}
.btn-cv {
  border: solid 1px black;
  padding: 15px;
  border-radius: 20px;
  background-color: #1f2937;
  color: white;
}

.btn-cv:hover {
  background-color: red;
}

.hero_content {
  max-width: 1200px;
  margin: auto;
  padding: 1.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section {
  background-color: #ffffff;
  padding: 5rem 1rem;
}

.contact {
  border: solid 1px white;
  padding: 10px;
  border-radius: 10px;
  background-color: rgb(44, 44, 97);
  color: white;
  box-shadow: 2px 5px 2px 1px rgb(44, 44, 97);
}
.section_con1 {
  min-height: 100vh;
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  align-items: center;
}
.developer {
  text-decoration: underline;
}

.hi_there {
  background-color: rgb(229, 239, 248);
  border-radius: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tebal {
  font-weight: bold;
}
.italic {
  text-decoration: underline;
}

.title {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 3rem;
  color: #1f2937;
  margin-bottom: 1rem;
}

.title span {
  font-weight: 600;
}

.description {
  line-height: 1.5rem;
  color: #5b6c7c;
  margin-bottom: 2rem;
}
.about-me {
  text-align: center;
}
.skill-nanda {
  text-align: center;
}

.sosial-media-ku {
  font-size: 30px;
}
.border-sosmed {
  border: solid 2px #1f2937;
  border-radius: 8px;
  padding: 4px;
}
.border-sosmed:hover {
  background-color: yellow;
}
.about-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.image {
  display: grid;
  place-items: center;
}

.image img {
  width: min(25rem, 90%);
  border-radius: 50%;
  object-fit: cover;
  border: solid 1px rgb(11, 177, 168);
  box-shadow: 5px 5px 15px 5px rgba(26, 25, 25, 0.452);
}

/*AboutMe Cssku*/
.box-aboutme {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px black;
  max-width: 800px;
  margin: 2rem auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.box-aboutme .about-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.box-aboutme .about-text {
  flex: 1;
}

.box-aboutme .about-text h2 {
  margin-top: 0;
  color: #333;
}

.box-aboutme .about-text p {
  margin: 10px 0;
}

.box-aboutme .about-text p strong {
  color: #555;
}

.box-aboutme .img-nanda {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.box-aboutme .img-nanda img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid black;
}
.progamerPemula {
  font-weight: bold;
  border: solid 1px rgb(12, 12, 12);
  padding: 5px;
  border-radius: 10px;
  background-color: greenyellow;
}

/* Skills css nanda2 */
.skill-nanda2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skill-item {
  padding: 20px;
  text-align: center;
  background-color: #2e707c;
  color: white;
  font-size: 1.2em;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skill-item:hover {
  background-color: rgb(13, 92, 92);
  color: yellow;
}

.skill-item i {
  font-size: 2em;
  margin-bottom: 10px;
}
/*Project */
#projects {
  padding: 40px;
}

.project-title {
  text-align: center;
  font-size: 2em;
  margin-bottom: 20px;
  color: #333;
}

.projects-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-item {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px black;
  transition: transform 0.3s ease, background-color 0.3s ease;
  text-align: center;
  margin: 10px;
}

.project-item:hover {
  background-color: #eeeeee;
}

.project-image {
  max-width: 40%;
  border-radius: 15px;
  margin-bottom: 15px;
  border: solid 1px black;
}

.project-item h2 {
  margin: 10px 0;
  font-size: 1.5em;
}

.project-item p {
  font-size: 1em;
}
.projectp:hover {
  color: #2e707c;
}
.kontak-saya {
  background-color: #98e8f3;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px black;
  max-width: 800px;
  height: 200px;
  margin: 2rem auto;
  text-align: center;
}
.kontak-saya:hover {
  background-color: #f1eded;
}

.kontak-saya button:hover {
  background-color: red;
}
.footer {
  height: 220px;
  width: auto;
  margin-top: 150px;
  background-color: #1f2937;
  text-align: center;
  justify-content: center;
  color: white;
}

@media (max-width: 750px) {
  .kontak-saya {
    margin: 10px;
  }
  .skill-nanda2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding: 10px;
  }

  .project-image {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  nav .menu_bar2 {
    display: flex;
  }
  /* Class*/
  .developer {
    text-decoration: none;
  }
  .hi_there {
    background-color: white;
  }
  .img-nanda img {
    display: none;
  }
  nav ul {
    position: absolute;
    top: 85px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 85px);
    background-color: rgb(235, 234, 234);
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    transition: left 0.3s;
  }

  nav input:checked + .menu_bar2 + ul {
    left: 0;
  }

  nav ul li a {
    font-size: 1.25rem;
  }

  .section_con1 {
    padding: 10rem 1rem 5rem 1rem;
    text-align: center;
    grid-template-columns: 1fr;
  }

  .image {
    grid-area: 1/1/2/2;
  }

  .action__btns {
    margin: auto;
  }
}



Langkah 3: Menambahkan Konten dan Gambar

Untuk membuat portofolio Anda lebih menarik, Anda dapat menambahkan gambar dan lebih banyak konten. Berikut adalah cara menambahkan gambar ke dalam proyek Anda. Anda perlu Membuat Folder Media

Dengan mengikuti panduan ini, Anda telah berhasil membuat portofolio sederhana namun menarik menggunakan HTML dan CSS. Anda dapat mengembangkan lebih lanjut dengan menambahkan lebih banyak proyek, gambar, dan gaya sesuai dengan keinginan Anda. Jangan ragu untuk bereksperimen dan menunjukkan kreativitas Anda.

Semoga berhasil dengan portofolio Anda! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bawah.


Demo

Download Full Source Code





Anda mungkin menyukai postingan ini

  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>
Hello Welcome