haryaananta.github.io/index.html at main · haryaananta/haryaananta.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portofolio Mas Darma</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <nav>
    <div class="container">
      <h1 class="logo">Mas Darma</h1>
      <div class="menu">
        <a href="#home">Beranda</a>
        <a href="#about">Tentang Saya</a>
        <a href="#bakat">Bakat</a>
        <a href="#education">Pendidikan</a>
        <a href="#projects">Project</a>
        <a href="#contact">Kontak</a>
        <button id="toggle-darkmode">🌙</button>
      </div>
    </div>
  </nav>

  <section id="home" class="home">
    <div class="container home-content">
      <img src="WhatsApp Image 2025-04-23 at 09.16.58.jpeg" alt="Foto Profil" class="profile-img" />
      <div>
        <h2><span id="typed-text"></span><span class="cursor">|</span></h2>
        <p>Usia saya 16 tahun, hobi bermain futsal.</p>
      </div>
    </div>
  </section>

  <section id="about">
    <div class="container">
      <h2>Tentang Saya</h2>
      <p>Saya pelajar SMKN 1 Bawang Banjarnegara, program keahlian PPLG, lahir di Banjarnegara 8 September 2008, tujuan saya memilih jurusan
        PPLG adalah ining lebih banyak mengetahui tentang dunia pemrograman.
      </p>
    </div>
  </section>

  <section id="bakat">
    <div class="container">
      <h2>Bakat</h2>
      <p>Saya berbakat di otomotif (motor), fotografi, serta editing foto dan video sederhana.</p>
    </div>
  </section>

  <section id="education">
    <div class="container">
      <h2>Pendidikan</h2>
      <ul>
        <li><strong>SDN 1 LUWUNG</strong> – (2015–2021)</li>
        <li><strong>MTs Cokroaminoto Wanadadi</strong> – (2021–2024)</li>
        <li><strong>SMKN 1 Bawang</strong> – PPLG (2024–sekarang)</li>
      </ul>
    </div>
  </section>

  <section id="projects">
    <div class="container">
      <h2>Proyek Saya</h2>
      <div class="project-list">
        <div class="card">
          <img src="Screenshot 2025-05-07 064624.png" alt="" class="project-img" />
          <h3>Figma</h3>
          <p>Membuat prototype web serulingmas menggunakan figma.</p>
        </div>
        <div class="card">
          <img src="Screenshot 2025-05-07 065049.png" alt="" class="project-img" />
          <h3>Desain corel</h3>
          <p>Membuat desain packaging menggunakan apk  corel.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="contact">
    <div class="container">
      <h2>Kontak</h2>
      <p>Email: haryaananta1@email.com</p>
      <p>Telepon: 0811-9211-8776</p>
      <p>Instagram: <a href="https://www.instagram.com/haryananta_" target="_blank">Klik Disini</a></p>
      <p>Tik Tok: <a href="https://www.tiktok.com/@chskdjxj?_t=ZS-8w8t9hZoFyz&_r=1" target="_blank">Klik Disini</a></p>
    </div>
  </section>

  <footer>
    <p>© 2025 Harya Ananta Darma - All Rights Reserved.</p>
  </footer>

  <script src="script.js"></script>
  <script>
    const reveals = document.querySelectorAll(".reveal");

    window.addEventListener("scroll", () => {
      for (let i = 0; i < reveals.length; i++) {
        const windowHeight = window.innerHeight;
        const elementTop = reveals[i].getBoundingClientRect().top;
        const revealPoint = 100;

        if (elementTop < windowHeight - revealPoint) {
          reveals[i].classList.add("active");
        } else {
          reveals[i].classList.remove("active");
        }
      }
    });
  </script>

</body>
</html>