commit 989be12df94162a391d4905dccff1880341ed620
Author: DyDev Asus S14 <dyzulk03@gmail.com>
Date:   Fri Aug 4 09:32:20 2023 +0700

    Deploy Pertama

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..43b0a89
--- /dev/null
+++ b/README.md
@@ -0,0 +1,30 @@
+<img src="favicon.png" alt="Muhammad Herdy Iskandar" width="200"/>
+
+# 👋 Hi! Welcome, I'm Herdy Iskandar
+A junior developer, designer, and producer, from Indonesia.
+[**My Website**](https://dyzulk.me)
+
+![](https://github-readme-stats.vercel.app/api?username=dyzulk&show_icons=true&count_private=true&include_all_commits=true&hide_title=true&bg_color=14B8A6&title_color=FFFFFF&text_color=FFFFFF&icon_color=134E4A)
+
+---
+## 💌 Keep In Touch With Me
+
+✔️ **I'm currently open for every opportunity!**
+Interested in working with me? Need help on your project? Or just wanna say hi? I’d love to hear you about that.
+**dyzulkdeveloper@gmail.com**
+
+### Socials
+- LinkedIn: [dyzulk](http://linkedin.com/in/dyzulk)
+- Twitter: [@dyzulk_](http://twitter.com/dyzulk_)
+- Instagram: [@dyzulk](http://instagram.com/dyzulk)
+
+### Posts
+- Github: [dyzulk](http://github.com/dyzulk)
+- Facebook: [@dyzulk](http://facebook.com/dyzulk)
+
+### Creative Platforms
+- Dribbble:	[dyzulk](http://dribbble.com/dyzulk)
+- Behance: [dyzulk](https://www.behance.net/dyzulk)
+
+[![HitCount](https://hits.dwyl.com/dyzulk/dyzulkgithubio.svg?style=flat-square&show=unique)](http://hits.dwyl.com/dyzulk/dyzulkgithubio)
+# dyzulk-pages
diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..c4b0b2d
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,539 @@
+ 
+/*===== GOOGLE FONTS =====*/
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+/*===== VARIABLES CSS =====*/
+:root {
+  --header-height: 3rem;
+  --font-semi: 600;
+  /*===== Colores =====*/
+  /*Purple 260 - Red 355 - Blue 224 - Pink 340*/
+  /* HSL color mode */
+  --hue-color: 224;
+  --first-color: hsl(var(--hue-color), 89%, 60%);
+  --second-color: hsl(var(--hue-color), 56%, 12%);
+  /*===== Fuente y tipografia =====*/
+  --body-font: 'Poppins', sans-serif;
+  --big-font-size: 2rem;
+  --h2-font-size: 1.25rem;
+  --normal-font-size: .938rem;
+  --smaller-font-size: .75rem;
+  /*===== Margenes =====*/
+  --mb-2: 1rem;
+  --mb-4: 2rem;
+  --mb-5: 2.5rem;
+  --mb-6: 3rem;
+  /*===== z index =====*/
+  --z-back: -10;
+  --z-fixed: 100;
+}
+
+@media screen and (min-width: 968px) {
+  :root {
+    --big-font-size: 3.5rem;
+    --h2-font-size: 2rem;
+    --normal-font-size: 1rem;
+    --smaller-font-size: .875rem;
+  }
+}
+
+/*===== BASE =====*/
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: var(--header-height) 0 0 0;
+  font-family: var(--body-font);
+  font-size: var(--normal-font-size);
+  color: var(--second-color);
+}
+
+h1, h2, p {
+  margin: 0;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/*===== CLASS CSS ===== */
+.section-title {
+  position: relative;
+  font-size: var(--h2-font-size);
+  color: var(--first-color);
+  margin-top: var(--mb-2);
+  margin-bottom: var(--mb-4);
+  text-align: center;
+}
+
+.section-title::after {
+  position: absolute;
+  content: '';
+  width: 64px;
+  height: 0.18rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 2rem;
+  background-color: var(--first-color);
+}
+
+.section {
+  padding-top: 3rem;
+  padding-bottom: 2rem;
+}
+
+/*===== LAYOUT =====*/
+.bd-grid {
+  max-width: 1024px;
+  display: grid;
+  margin-left: var(--mb-2);
+  margin-right: var(--mb-2);
+}
+
+.l-header {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-fixed);
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
+}
+
+/*===== NAV =====*/
+.nav {
+  height: var(--header-height);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: var(--font-semi);
+}
+
+@media screen and (max-width: 767px) {
+  .nav__menu {
+    position: fixed;
+    top: var(--header-height);
+    right: -100%;
+    width: 80%;
+    height: 100%;
+    padding: 2rem;
+    background-color: var(--second-color);
+    transition: .5s;
+  }
+}
+
+.nav__item {
+  margin-bottom: var(--mb-4);
+}
+
+.nav__link {
+  position: relative;
+  color: #fff;
+}
+
+.nav__link:hover {
+  position: relative;
+}
+
+.nav__link:hover::after {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 0.18rem;
+  left: 0;
+  top: 2rem;
+  background-color: var(--first-color);
+}
+
+.nav__logo {
+  color: var(--second-color);
+}
+
+.nav__toggle {
+  color: var(--second-color);
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+/*Active menu*/
+.active::after {
+  position: absolute;
+  content: '';
+  width: 100%;
+  height: 0.18rem;
+  left: 0;
+  top: 2rem;
+  background-color: var(--first-color);
+}
+
+/*=== Show menu ===*/
+.show {
+  right: 0;
+}
+
+/*===== HOME =====*/
+.home {
+  position: relative;
+  row-gap: 5rem;
+  padding: 4rem 0 5rem;
+}
+
+.home__data {
+  align-self: center;
+}
+
+.home__title {
+  font-size: var(--big-font-size);
+  margin-bottom: var(--mb-5);
+}
+
+.home__title-color {
+  color: var(--first-color);
+}
+
+.home__social {
+  display: flex;
+  flex-direction: column;
+}
+
+.home__social-icon {
+  width: max-content;
+  margin-bottom: var(--mb-2);
+  font-size: 1.5rem;
+  color: var(--second-color);
+}
+
+.home__social-icon:hover {
+  color: var(--first-color);
+}
+
+.home__img {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 260px;
+}
+
+.home__blob {
+  fill: var(--first-color);
+}
+
+.home__blob-img {
+  width: 360px;
+}
+
+/*BUTTONS*/
+.button {
+  display: inline-block;
+  background-color: var(--first-color);
+  color: #fff;
+  padding: .75rem 2.5rem;
+  font-weight: var(--font-semi);
+  border-radius: .5rem;
+  transition: .3s;
+}
+
+.button:hover {
+  box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.15);
+}
+
+/* ===== ABOUT =====*/
+.about__container {
+  row-gap: 2rem;
+  text-align: center;
+}
+
+.brief__container {
+  row-gap: 2rem;
+  text-align: left;
+}
+
+.about__subtitle {
+  margin-bottom: var(--mb-2);
+}
+
+.brief {
+	text-align: left;
+}
+.about__img {
+  justify-self: center;
+}
+
+.about__img img {
+  width: 200px;
+  border-radius: .5rem;
+}
+
+/* ===== SKILLS =====*/
+.skills__container {
+  row-gap: 2rem;
+  text-align: center;
+}
+
+.skills__subtitle {
+  margin-bottom: var(--mb-2);
+}
+
+.skills__text {
+  margin-bottom: var(--mb-4);
+}
+
+.skills__data {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  font-weight: var(--font-semi);
+  padding: .5rem 1rem;
+  margin-bottom: var(--mb-4);
+  border-radius: .5rem;
+  box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
+}
+
+.skills__icon {
+  font-size: 2rem;
+  margin-right: var(--mb-2);
+  color: var(--first-color);
+}
+
+.skills__names {
+  display: flex;
+  align-items: center;
+}
+
+.skills__bar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background-color: var(--first-color);
+  height: .25rem;
+  border-radius: .5rem;
+  z-index: var(--z-back);
+}
+
+.skills__html {
+  width: 95%;
+}
+
+.skills__css {
+  width: 85%;
+}
+
+.skills__js {
+  width: 65%;
+}
+
+.skills__ux {
+  width: 85%;
+}
+
+.skills__img {
+  border-radius: .5rem;
+}
+
+/* ===== WORK =====*/
+.work__container {
+  row-gap: 2rem;
+}
+
+.work__img {
+  box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
+  border-radius: .5rem;
+  overflow: hidden;
+}
+
+.work__img img {
+  transition: 1s;
+}
+
+.work__img img:hover {
+  transform: scale(1.1);
+}
+
+/* ===== CONTACT =====*/
+.contact__input {
+  width: 100%;
+  font-size: var(--normal-font-size);
+  font-weight: var(--font-semi);
+  padding: 1rem;
+  border-radius: .5rem;
+  border: 1.5px solid var(--second-color);
+  outline: none;
+  margin-bottom: var(--mb-4);
+}
+
+.contact__button {
+  display: block;
+  border: none;
+  outline: none;
+  font-size: var(--normal-font-size);
+  cursor: pointer;
+  margin-left: auto;
+}
+
+/* ===== FOOTER =====*/
+.footer {
+  background-color: var(--second-color);
+  color: #fff;
+  text-align: center;
+  font-weight: var(--font-semi);
+  padding: 2rem 0;
+}
+
+.footer__title {
+  font-size: 2rem;
+  margin-bottom: var(--mb-4);
+}
+
+.footer__social {
+  margin-bottom: var(--mb-4);
+}
+
+.footer__icon {
+  font-size: 1.5rem;
+  color: #fff;
+  margin: 0 var(--mb-2);
+}
+
+.footer__copy {
+  font-size: var(--smaller-font-size);
+}
+
+/* ===== MEDIA QUERIES=====*/
+@media screen and (max-width: 320px) {
+  .home {
+    row-gap: 2rem;
+  }
+  .home__img {
+    width: 200px;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .home {
+    padding: 4rem 0 2rem;
+  }
+  .home__social {
+    padding-top: 0;
+    padding-bottom: 2.5rem;
+    flex-direction: row;
+    align-self: flex-end;
+  }
+  .home__social-icon {
+    margin-bottom: 0;
+    margin-right: var(--mb-4);
+  }
+  .home__img {
+    width: 300px;
+    bottom: 25%;
+  }
+  .about__container {
+    grid-template-columns: repeat(2, 1fr);
+    align-items: center;
+    text-align: initial;
+  }
+  .skills__container {
+    grid-template-columns: .7fr;
+    justify-content: center;
+    column-gap: 1rem;
+  }
+  .work__container {
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 2rem;
+    padding-top: 2rem;
+  }
+  .contact__form {
+    width: 360px;
+    padding-top: 2rem;
+  }
+  .contact__container {
+    justify-items: center;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  body {
+    margin: 0;
+  }
+  .section {
+    padding-top: 4rem;
+    padding-bottom: 3rem;
+  }
+  .section-title {
+    margin-bottom: var(--mb-6);
+  }
+  .section-title::after {
+    width: 80px;
+    top: 3rem;
+  }
+  .nav {
+    height: calc(var(--header-height) + 1.5rem);
+  }
+  .nav__list {
+    display: flex;
+    padding-top: 0;
+  }
+  .nav__item {
+    margin-left: var(--mb-6);
+    margin-bottom: 0;
+  }
+  .nav__toggle {
+    display: none;
+  }
+  .nav__link {
+    color: var(--second-color);
+  }
+  .home {
+    padding: 8rem 0 2rem;
+  }
+  .home__img {
+    width: 400px;
+    bottom: 10%;
+  }
+  .about__container {
+    padding-top: 2rem;
+  }
+  .about__img img {
+    width: 300px;
+  }
+  .skills__container {
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 2rem;
+    align-items: center;
+    text-align: initial;
+  }
+  .work__container {
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 2rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .bd-grid {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .home {
+    padding: 10rem 0 2rem;
+  }
+  .home__img {
+    width: 450px;
+  }
+}
diff --git a/assets/img/20220309_091533.png b/assets/img/20220309_091533.png
new file mode 100644
index 0000000..e044a86
Binary files /dev/null and b/assets/img/20220309_091533.png differ
diff --git a/assets/img/about.jpg b/assets/img/about.jpg
new file mode 100644
index 0000000..0e500d1
Binary files /dev/null and b/assets/img/about.jpg differ
diff --git a/assets/img/concept-illustration-young-man-with-thinking-pose-by-placing-finger-chin_10045-588-removebg-preview.png b/assets/img/concept-illustration-young-man-with-thinking-pose-by-placing-finger-chin_10045-588-removebg-preview.png
new file mode 100644
index 0000000..291cbcc
Binary files /dev/null and b/assets/img/concept-illustration-young-man-with-thinking-pose-by-placing-finger-chin_10045-588-removebg-preview.png differ
diff --git a/assets/img/logo.png b/assets/img/logo.png
new file mode 100644
index 0000000..e044a86
Binary files /dev/null and b/assets/img/logo.png differ
diff --git a/assets/img/perfil.png b/assets/img/perfil.png
new file mode 100644
index 0000000..9ad0216
Binary files /dev/null and b/assets/img/perfil.png differ
diff --git a/assets/img/work1.jpg b/assets/img/work1.jpg
new file mode 100644
index 0000000..3fb9026
Binary files /dev/null and b/assets/img/work1.jpg differ
diff --git a/assets/img/work2.jpg b/assets/img/work2.jpg
new file mode 100644
index 0000000..0b08f51
Binary files /dev/null and b/assets/img/work2.jpg differ
diff --git a/assets/img/work3.jpg b/assets/img/work3.jpg
new file mode 100644
index 0000000..04d80f3
Binary files /dev/null and b/assets/img/work3.jpg differ
diff --git a/assets/img/work4.jpg b/assets/img/work4.jpg
new file mode 100644
index 0000000..8be1dec
Binary files /dev/null and b/assets/img/work4.jpg differ
diff --git a/assets/img/work5.jpg b/assets/img/work5.jpg
new file mode 100644
index 0000000..ba69a78
Binary files /dev/null and b/assets/img/work5.jpg differ
diff --git a/assets/img/work6.jpg b/assets/img/work6.jpg
new file mode 100644
index 0000000..b394745
Binary files /dev/null and b/assets/img/work6.jpg differ
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..371021b
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,56 @@
+/*===== MENU SHOW =====*/ 
+const showMenu = (toggleId, navId) =>{
+    const toggle = document.getElementById(toggleId),
+    nav = document.getElementById(navId)
+
+    if(toggle && nav){
+        toggle.addEventListener('click', ()=>{
+            nav.classList.toggle('show')
+        })
+    }
+}
+showMenu('nav-toggle','nav-menu')
+
+/*==================== REMOVE MENU MOBILE ====================*/
+const navLink = document.querySelectorAll('.nav__link')
+
+function linkAction(){
+    const navMenu = document.getElementById('nav-menu')
+    // When we click on each nav__link, we remove the show-menu class
+    navMenu.classList.remove('show')
+}
+navLink.forEach(n => n.addEventListener('click', linkAction))
+
+/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/
+const sections = document.querySelectorAll('section[id]')
+
+function scrollActive(){
+    const scrollY = window.pageYOffset
+
+    sections.forEach(current =>{
+        const sectionHeight = current.offsetHeight
+        const sectionTop = current.offsetTop - 50;
+        sectionId = current.getAttribute('id')
+
+        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
+            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active')
+        }else{
+            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active')
+        }
+    })
+}
+window.addEventListener('scroll', scrollActive)
+
+/*===== SCROLL REVEAL ANIMATION =====*/
+const sr = ScrollReveal({
+    origin: 'top',
+    distance: '60px',
+    duration: 2000,
+    delay: 200,
+//     reset: true
+});
+
+sr.reveal('.home__data, .about__img, .skills__subtitle, .skills__text',{}); 
+sr.reveal('.home__img, .about__subtitle, .about__text, .skills__img',{delay: 400}); 
+sr.reveal('.home__social-icon',{ interval: 200}); 
+sr.reveal('.skills__data, .work__img, .contact__input',{interval: 200}); 
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
new file mode 100644
index 0000000..cae87aa
--- /dev/null
+++ b/assets/js/scripts.js
@@ -0,0 +1,28 @@
+function kirimPesan() {
+    var nama = document.getElementById('name');
+    var email = document.getElementById('email');
+    var subject = document.getElementById('subject');
+    var pesan = document.getElementById('message');
+
+    var gabungan = '%F0%9D%90%8D%F0%9D%90%9A%F0%9D%90%A6%F0%9D%90%9A%20%3A%0A' + nama.value + '%0A%0A%F0%9D%90%84%F0%9D%90%A6%F0%9D%90%9A%F0%9D%90%A2%F0%9D%90%A5%20%3A%0A' + email.value + '%0A%0A%F0%9D%90%92%F0%9D%90%AE%F0%9D%90%9B%F0%9D%90%A3%F0%9D%90%9E%F0%9D%90%A4%20%3A%0A' + subject.value + '%0A%0A%F0%9D%90%8F%F0%9D%90%9E%F0%9D%90%AC%F0%9D%90%9A%F0%9D%90%A7%20%3A%0A' + pesan.value;
+
+    // Menggunakan variabel token dan grup dari PHP
+    $.ajax({
+        url: `https://api.telegram.org/bot${token}/sendMessage?chat_id=${grup}&text=${gabungan}&parse_mode=html`,
+        method: `POST`,
+        success: function(response) {
+            // Eksekusi refresh halaman setelah mengirim pesan
+            window.location.reload(true);
+        },
+        error: function(error) {
+            // Jika terjadi kesalahan, Anda dapat menambahkan penanganan error di sini
+            console.log("Error:", error);
+        }
+    });
+
+    // Membersihkan kolom form setelah mengirim pesan
+    nama.value = '';
+    email.value = '';
+    subject.value = '';
+    pesan.value = '';
+}
diff --git a/assets/js/ud-menu-scroll.js b/assets/js/ud-menu-scroll.js
new file mode 100644
index 0000000..13315df
--- /dev/null
+++ b/assets/js/ud-menu-scroll.js
@@ -0,0 +1,41 @@
+     // ==== for menu scroll
+      const pageLink = document.querySelectorAll(".ud-menu-scroll");
+
+      pageLink.forEach((elem) => {
+        elem.addEventListener("click", (e) => {
+          e.preventDefault();
+          document.querySelector(elem.getAttribute("href")).scrollIntoView({
+            behavior: "smooth",
+            offsetTop: 1 - 60,
+          });
+        });
+      });
+
+      // section menu active
+      function onScroll(event) {
+        const sections = document.querySelectorAll(".ud-menu-scroll");
+        const scrollPos =
+          window.pageYOffset ||
+          document.documentElement.scrollTop ||
+          document.body.scrollTop;
+
+        for (let i = 0; i < sections.length; i++) {
+          const currLink = sections[i];
+          const val = currLink.getAttribute("href");
+          const refElement = document.querySelector(val);
+          const scrollTopMinus = scrollPos + 73;
+          if (
+            refElement.offsetTop <= scrollTopMinus &&
+            refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
+          ) {
+            document
+              .querySelector(".ud-menu-scroll")
+              .classList.remove("active");
+            currLink.classList.add("active");
+          } else {
+            currLink.classList.remove("active");
+          }
+        }
+      }
+
+      window.document.addEventListener("scroll", onScroll);
diff --git a/assets/php/footer.php b/assets/php/footer.php
new file mode 100644
index 0000000..9f19b9a
--- /dev/null
+++ b/assets/php/footer.php
@@ -0,0 +1,10 @@
+        <!--===== FOOTER =====-->
+        <footer class="footer">
+            <p class="footer__title">myPortfolio</p>
+            <div class="footer__social">
+                <a href="https://facebook.com/dyzulk" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
+                <a href="https://instagram.com/dyzulk" class="footer__icon"><i class='bx bxl-instagram' ></i></a>
+                <a href="https://twitter.com/dyzulk_" class="footer__icon"><i class='bx bxl-twitter' ></i></a>
+            </div>
+            <p class="footer__copy">Copyright &#169; 2022 - <script>document.write(new Date().getFullYear())</script>  <a href="/" style="color: #fff;">Herdy Iskandar</a>. All rigths reserved</p>
+        </footer>
diff --git a/assets/php/header.php b/assets/php/header.php
new file mode 100644
index 0000000..24afa12
--- /dev/null
+++ b/assets/php/header.php
@@ -0,0 +1,14 @@
+<link href="favicon.png" rel="icon" sizes=”32×32″ type="image/png">
+<meta charset="UTF-8">
+<meta charset="UTF-8">
+<meta name="description" content="Muhammad Herdy Iskandar He Is A 18 year old Indonesian student living in Cirebon, Indonesian. You might have seen me on Facebook or Instagram. Now here you are. Yes, I write, too. Because there are so many things I cannot say out loud, yet I always find a way to put it into words.">
+    <meta name="keywords" content="Muhammad Herdy Iskandar, HTML,CSS,React JS,JavaScript">
+    <meta name="author" content="Muhammad Herdy Iskandar">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="google-site-verification" content="C7cNjxkyxXcQHExRsdhIGjZ658BcK9ftuIpJK8NYRGc" />
+<link rel="stylesheet" href="assets/css/styles.css">
+<!-- =====BOX ICONS===== -->
+<!-- =====BOX ICONS===== -->
+<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
+
+<title>Muhammad Herdy Iskandar</title>
\ No newline at end of file
diff --git a/assets/php/navbar.php b/assets/php/navbar.php
new file mode 100644
index 0000000..57a3716
--- /dev/null
+++ b/assets/php/navbar.php
@@ -0,0 +1,22 @@
+        <!--===== HEADER =====-->
+        <header class="l-header">
+            <nav class="nav bd-grid">
+                <div>
+                    <a href="/" class="nav__logo" > <img style="width: 150px;" class="logopng" src="assets/img/logo.png" alt="Portfolio Herdy Iskandar" > </a>
+                </div>
+
+                <div class="nav__menu" id="nav-menu">
+                    <ul class="nav__list">
+                        <li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>
+                        <li class="nav__item"><a href="#about" class="nav__link">About</a></li>
+                        <li class="nav__item"><a href="#skills" class="nav__link">Skills</a></li>
+                        <li class="nav__item"><a href="#work" class="nav__link">Work</a></li>
+                        <li class="nav__item"><a href="#contact" class="nav__link">Contact</a></li>
+                    </ul>
+                </div>
+
+                <div class="nav__toggle" id="nav-toggle">
+                    <i class='bx bx-menu'></i>
+                </div>
+            </nav>
+        </header>
\ No newline at end of file
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
new file mode 100644
index 0000000..4301faa
--- /dev/null
+++ b/assets/scss/styles.scss
@@ -0,0 +1,523 @@
+/*===== GOOGLE FONTS =====*/
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+
+/*===== VARIABLES CSS =====*/
+--header-height: 3rem;
+    --font-semi: 600;
+
+    /*===== Colores =====*/
+    /*Purple 260 - Red 355 - Blue 224 - Pink 340*/
+    /* HSL color mode */
+    --hue-color: 224;
+    --first-color: hsl(var(--hue-color), 89%, 60%);
+    --second-color: hsl(var(--hue-color), 56%, 12%);
+
+    /*===== Fuente y tipografia =====*/
+    --body-font: 'Poppins', sans-serif;
+
+    --big-font-size: 2rem;
+    --h2-font-size: 1.25rem;
+    --normal-font-size: .938rem;
+    --smaller-font-size: .75rem;
+
+    /*===== Margenes =====*/
+    --mb-2: 1rem;
+    --mb-4: 2rem;
+    --mb-5: 2.5rem;
+    --mb-6: 3rem;
+
+    /*===== z index =====*/
+    --z-back: -10;
+    --z-fixed: 100;
+
+    @media screen and (min-width: 968px){
+        --big-font-size: 3.5rem;
+        --h2-font-size: 2rem;
+        --normal-font-size: 1rem;
+        --smaller-font-size: .875rem;
+}
+
+/*===== BASE =====*/
+*,::before,::after{
+    box-sizing: border-box;
+}
+html{
+    scroll-behavior: smooth;
+}
+body{
+    margin: var(--header-height) 0 0 0;
+    font-family: var(--body-font);
+    font-size: var(--normal-font-size);
+    color: var(--second-color);
+}
+h1,h2,p{
+    margin: 0;  
+}
+ul{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+img{
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/*===== CLASS CSS ===== */
+.section-title{
+    position: relative;
+    font-size: var(--h2-font-size);
+    color: var(--first-color);
+    margin-top: var(--mb-2);
+    margin-bottom: var(--mb-4);
+    text-align: center;
+
+    &::after{
+        position: absolute;
+        content: '';
+        width: 64px;
+        height: 0.18rem;
+        left: 0;
+        right: 0;
+        margin: auto;
+        top: 2rem;
+        background-color: var(--first-color);
+    }
+}
+.section{
+    padding-top: 3rem;
+    padding-bottom: 2rem;
+}
+
+/*===== LAYOUT =====*/
+.bd-grid{
+    max-width: 1024px;
+    display: grid;
+    margin-left: var(--mb-2);
+    margin-right: var(--mb-2);
+}
+.l-header{
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-fixed);
+    background-color: #fff;
+    box-shadow: 0 1px 4px rgba(146,161,176,.15);
+}
+
+/*===== NAV =====*/
+.nav{
+    height: var(--header-height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: var(--font-semi);
+
+    &__menu{
+        @media screen and (max-width: 767px){
+            position: fixed;
+            top: var(--header-height);
+            right: -100%;
+            width: 80%;
+            height: 100%;
+            padding: 2rem;
+            background-color: var(--second-color);
+            transition: .5s;
+        }
+    }
+    &__item{
+        margin-bottom: var(--mb-4);
+    }
+    &__link{
+        position: relative;
+        color: #fff;
+
+        &:hover{
+            position: relative;
+
+            &::after{
+                position: absolute;
+                content: '';
+                width: 100%;
+                height: 0.18rem;
+                left: 0;
+                top: 2rem;
+                background-color: var(--first-color);
+            }
+        }
+    }
+    &__logo{
+        color: var(--second-color);
+    }
+    &__toggle{
+        color: var(--second-color);
+        font-size: 1.5rem;
+        cursor: pointer;
+    }
+}
+/*Active menu*/
+.active::after{
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 0.18rem;
+    left: 0;
+    top: 2rem;
+    background-color: var(--first-color);
+}
+
+/*=== Show menu ===*/
+.show{
+    right: 0;
+}
+
+/*===== HOME =====*/
+.home{
+    position: relative;
+    row-gap: 5rem;
+    padding: 4rem 0 5rem;
+
+    &__data{
+        align-self: center;
+    }
+    &__title{
+        font-size: var(--big-font-size);
+        margin-bottom: var(--mb-5);
+
+        &-color{
+            color: var(--first-color);
+        }
+    }
+    &__social{
+        display: flex;
+        flex-direction: column;
+        &-icon{
+            width: max-content;
+            margin-bottom: var(--mb-2);
+            font-size: 1.5rem;
+            color: var(--second-color);
+
+            &:hover{
+                color: var(--first-color);
+            }
+        }
+    }
+
+    &__img{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 260px;
+    }
+    &__blob{
+        fill: var(--first-color);
+
+        &-img{
+            width: 360px;
+        }
+    }
+}
+
+/*BUTTONS*/
+.button{
+    display: inline-block;
+    background-color: var(--first-color);
+    color: #fff;
+    padding: .75rem 2.5rem;
+    font-weight: var(--font-semi);
+    border-radius: .5rem; 
+    transition: .3s;
+
+    &:hover{
+        box-shadow: 0px 10px 36px rgba(0,0,0,.15);
+    }
+}
+
+/* ===== ABOUT =====*/
+.about{
+    &__container{
+        row-gap: 2rem;
+        text-align: center;
+    }
+    &__subtitle{
+        margin-bottom: var(--mb-2);
+    }
+
+    &__img{
+        justify-self: center;
+        
+        & img{
+            width: 200px;
+            border-radius: .5rem;
+        }
+    }
+}
+
+/* ===== SKILLS =====*/
+.skills{
+    &__container{
+        row-gap: 2rem;
+        text-align: center;
+    }
+    &__subtitle{
+        margin-bottom: var(--mb-2);
+    }
+    &__text{
+        margin-bottom: var(--mb-4);
+    }
+    &__data{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: relative;
+        font-weight: var(--font-semi);
+        padding: .5rem 1rem;
+        margin-bottom: var(--mb-4);
+        border-radius: .5rem;
+        box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
+    }
+    &__icon{
+        font-size: 2rem;
+        margin-right: var(--mb-2);
+        color: var(--first-color);
+    }
+    &__names{
+        display: flex;
+        align-items: center;
+    }
+    &__bar{
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        background-color: var(--first-color);
+        height: .25rem;
+        border-radius: .5rem;
+        z-index: var(--z-back);
+    }
+    &__html{
+        width: 95%;
+    }
+    &__css{
+        width: 85%;
+    }
+    &__js{
+        width: 65%;
+    }
+    &__ux{
+        width: 85%;
+    }
+    &__img{
+        border-radius: .5rem;
+    }
+}
+/* ===== WORK =====*/
+.work{
+    &__container{
+        row-gap: 2rem;
+    }
+    &__img{
+        box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15); 
+        border-radius: .5rem;
+        overflow: hidden;
+        
+        & img{
+            transition: 1s;
+
+            &:hover{
+                transform: scale(1.1);
+            }
+        }
+    }
+}
+
+/* ===== CONTACT =====*/
+.contact{
+    &__input{
+        width: 100%;
+        font-size: var(--normal-font-size);
+        font-weight: var(--font-semi);
+        padding: 1rem;
+        border-radius: .5rem;
+        border: 1.5px solid var(--second-color);
+        outline: none;
+        margin-bottom: var(--mb-4);
+    }
+    &__button{
+        display: block;
+        border: none;
+        outline: none;
+        font-size: var(--normal-font-size);
+        cursor: pointer;
+        margin-left: auto;
+    }
+}
+
+/* ===== FOOTER =====*/
+.footer{
+    background-color: var(--second-color);
+    color: #fff;
+    text-align: center;
+    font-weight: var(--font-semi);
+    padding: 2rem 0;
+
+    &__title{
+        font-size: 2rem;
+        margin-bottom: var(--mb-4);
+    }
+    &__social{
+        margin-bottom: var(--mb-4);
+    }
+    &__icon{
+        font-size: 1.5rem;
+        color: #fff;
+        margin: 0 var(--mb-2);
+    }
+    &__copy{
+        font-size: var(--smaller-font-size);
+    }
+}
+
+/* ===== MEDIA QUERIES=====*/
+@media screen and (max-width: 320px){
+    .home{
+        row-gap: 2rem;
+
+        &__img{
+            width: 200px;
+        }
+    }
+}
+
+@media screen and (min-width: 576px){
+    .home{
+        padding: 4rem 0 2rem;
+        &__social{
+            padding-top: 0;
+            padding-bottom: 2.5rem;
+            flex-direction: row;
+            align-self: flex-end;
+
+            &-icon{
+                margin-bottom: 0;
+                margin-right: var(--mb-4);
+            }
+        }
+        &__img{
+            width: 300px;
+            bottom: 25%;
+        }
+    }
+
+    .about__container{
+        grid-template-columns: repeat(2,1fr);
+        align-items: center;
+        text-align: initial;
+    }
+
+    .skills__container{
+        grid-template-columns: .7fr;
+        justify-content: center;
+        column-gap: 1rem;
+    }
+
+    .work__container{
+        grid-template-columns: repeat(2,1fr);
+        column-gap: 2rem;
+        padding-top: 2rem;
+    }
+
+    .contact{
+        &__form{
+            width: 360px;
+            padding-top: 2rem ;
+        }
+        &__container{
+            justify-items: center;
+        }
+    }
+}
+
+@media screen and(min-width: 768px){
+    body{
+        margin: 0;
+    }
+    .section{
+        padding-top: 4rem;
+        padding-bottom: 3rem;
+    }
+
+    .section-title{
+        margin-bottom: var(--mb-6);
+
+        &::after{
+            width: 80px;
+            top: 3rem;
+        }
+    }
+
+    .nav{
+        height: calc(var(--header-height) + 1.5rem);
+        &__list{
+            display: flex;
+            padding-top: 0;
+        }
+        &__item{
+            margin-left: var(--mb-6);
+            margin-bottom: 0;
+        }
+        &__toggle{
+            display: none;
+        }
+        &__link{
+            color: var(--second-color);
+        }
+    }
+    .home{
+        padding: 8rem 0 2rem;
+        
+        &__img{
+            width: 400px;
+            bottom: 10%;
+        }
+    }
+
+    .about{
+        &__container{
+           padding-top: 2rem;
+        }
+        &__img{
+            & img{
+                width: 300px;
+            }
+        }
+    }
+    .skills__container{
+        grid-template-columns: repeat(2,1fr);
+        column-gap: 2rem;
+        align-items: center;
+        text-align: initial;
+    }
+    .work__container{
+        grid-template-columns: repeat(3,1fr);
+        column-gap: 2rem;
+    }
+}
+
+@media screen and (min-width: 992px){
+    .bd-grid{
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .home{
+        padding: 10rem 0 2rem;
+
+        &__img{
+            width: 450px;
+        }
+    }
+}
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..291cbcc
Binary files /dev/null and b/favicon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d8c755d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link href="favicon.png" rel="icon" sizes=”32×32″ type="image/png">
+	<meta charset="UTF-8">
+	<meta charset="UTF-8">
+	<meta name="description" content="Muhammad Herdy Iskandar He Is A 18 year old Indonesian student living in Cirebon, Indonesian. You might have seen me on Facebook or Instagram. Now here you are. Yes, I write, too. Because there are so many things I cannot say out loud, yet I always find a way to put it into words.">
+	<meta name="keywords" content="Muhammad Herdy Iskandar, HTML,CSS,React JS,JavaScript">
+	<meta name="author" content="Muhammad Herdy Iskandar">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="google-site-verification" content="C7cNjxkyxXcQHExRsdhIGjZ658BcK9ftuIpJK8NYRGc" />
+	<link rel="stylesheet" href="assets/css/styles.css">
+	<!-- =====BOX ICONS===== -->
+	<!-- =====BOX ICONS===== -->
+	<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
+	
+	<title>Muhammad Herdy Iskandar</title>
+    </head>
+    <body>
+	            <!--===== HEADER =====-->
+        <header class="l-header">
+            <nav class="nav bd-grid">
+                <div>
+                    <a href="/" class="nav__logo" > <img style="width: 150px;" class="logopng" src="assets/img/logo.png" alt="Portfolio Herdy Iskandar" > </a>
+                </div>
+
+                <div class="nav__menu" id="nav-menu">
+                    <ul class="nav__list">
+                        <li class="nav__item"><a href="#home" class="ud-menu-scroll nav__link active">Home</a></li>
+                        <li class="nav__item"><a href="#about" class="ud-menu-scroll nav__link">About</a></li>
+                        <li class="nav__item"><a href="#skills" class="ud-menu-scroll nav__link">Skills</a></li>
+                        <li class="nav__item"><a href="#work" class="ud-menu-scroll nav__link">Work</a></li>
+                        <li class="nav__item"><a href="#contact" class="ud-menu-scroll nav__link">Contact</a></li>
+                    </ul>
+                </div>
+
+                <div class="nav__toggle" id="nav-toggle">
+                    <i class='bx bx-menu'></i>
+                </div>
+            </nav>
+        </header>
+        <main class="l-main">
+            <!--===== HOME =====-->
+            <section class="home bd-grid" id="home">
+                <div class="home__data">
+                    <h1 class="home__title">Hi,<br>I'am <span class="home__title-color">Herdy</span><br> Web Designer</h1>
+
+                    <a href="#contact" class="button ud-menu-scroll">Contact</a>
+                </div>
+
+                <div class="home__social">
+                    <a href="https://id.linkedin.com/in/dyzulk" class="home__social-icon"><i class='bx bxl-linkedin'></i></a>
+                    <a href="https://dyzulk.com" class="home__social-icon"><i class='bx bx-globe' ></i></a>
+                    <a href="https://github.com/dyzulk" class="home__social-icon"><i class='bx bxl-github' ></i></a>
+                </div>
+
+                <div class="home__img">
+                    <svg class="home__blob" viewBox="0 0 479 467" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                        <mask id="mask0" mask-type="alpha">
+                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
+                        </mask>
+                        <g mask="url(#mask0)">
+                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
+                            <image class="home__blob-img" x="50" y="60" href="assets/img/perfil.png"/>
+                        </g>
+                    </svg>
+                </div>
+            </section>
+
+            <!--===== ABOUT =====-->
+            <section class="about section " id="about">
+                <h2 class="section-title">About</h2>
+
+                <div class="about__container bd-grid">
+                    <div class="about__img">
+                        <img src="assets/img/about.jpg" alt="Muhammad Herdy Iskandar">
+                    </div>
+                    
+                    <div>
+                        <h2 class="about__subtitle">I'am Herdy</h2>
+                        <p class="about__text">A 18 year old Indonesian student living in Cirebon, Indonesian. You might have seen me on Facebook or Instagram. Now here you are. Yes, I write, too. Because there are so many things I cannot say out loud, yet I always find a way to put it into words.</p>           
+                    </div>                                   
+                </div>
+            </section>
+
+            <!--===== SKILLS =====-->
+            <section class="skills section" id="skills">
+                <h2 class="section-title">Skills</h2>
+
+                <div class="skills__container bd-grid">          
+                    <div>
+                        <h2 class="skills__subtitle">Profesional Skills</h2>
+                        <p class="skills__text">I’m Herdy, from Indonesia. I’ve spent my time to take any opportunity as well as developing my experience and skills to things like Content Creator, Graphic Designing, Programming, and many others.<br/><br/>But one thing I always stick with everything is, I always do every works as my passion, and that's what makes me happy also giving myself a chance to deliver best works that i can do.</p>
+                        <div class="skills__data">
+                            <div class="skills__names">
+                                <i class='bx bxl-html5 skills__icon'></i>
+                                <span class="skills__name">HTML5</span>
+                            </div>
+                            <div class="skills__bar skills__html">
+
+                            </div>
+                            <div>
+                                <span class="skills__percentage">90%</span>
+                            </div>
+                        </div>
+                        <div class="skills__data">
+                            <div class="skills__names">
+                                <i class='bx bxl-css3 skills__icon'></i>
+                                <span class="skills__name">CSS3</span>
+                            </div>
+                            <div class="skills__bar skills__css">
+                                
+                            </div>
+                            <div>
+                                <span class="skills__percentage">85%</span>
+                            </div>
+                        </div>
+                        <div class="skills__data">
+                            <div class="skills__names">
+                                <i class='bx bxl-javascript skills__icon' ></i>
+                                <span class="skills__name">JAVASCRIPT</span>
+                            </div>
+                            <div class="skills__bar skills__js">
+                                
+                            </div>
+                            <div>
+                                <span class="skills__percentage">65%</span>
+                            </div>
+                        </div>
+                        <div class="skills__data">
+                            <div class="skills__names">
+                                <i class='bx bxs-paint skills__icon'></i>
+                                <span class="skills__name">UX/UI</span>
+                            </div>
+                            <div class="skills__bar skills__ux">
+                                
+                            </div>
+                            <div>
+                                <span class="skills__percentage">85%</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>              
+                        <img src="assets/img/work3.jpg" alt="" class="skills__img">
+                    </div>
+                </div>
+            </section>
+
+            <!--===== WORK =====-->
+            <section class="work section" id="work">
+                <h2 class="section-title">Work</h2>
+
+                <div class="work__container bd-grid">
+                    <a href="" class="work__img">
+                        <img src="assets/img/work1.jpg" alt="">
+                    </a>
+                    <a href="" class="work__img">
+                        <img src="assets/img/work2.jpg" alt="">
+                    </a>
+                    <a href="" class="work__img">
+                        <img src="assets/img/work3.jpg" alt="">
+                    </a>
+                    <a href="" class="work__img">
+                        <img src="assets/img/work4.jpg" alt="">
+                    </a>
+                    <a href="" class="work__img">
+                        <img src="assets/img/work5.jpg" alt="">
+                    </a>
+                    <a href="" class="work__img">
+                        <img src="assets/img/work6.jpg" alt="">
+                    </a>
+                </div>
+            </section>
+
+            <!--===== CONTACT =====-->
+            <section class="contact section" id="contact">
+                <h2 class="section-title">Contact</h2>
+
+                <div class="contact__container bd-grid">
+                    <form class="contact__form" action="" method="POST">
+                        <input type="text" id="name" placeholder="Name" class="contact__input" required>
+                        <input type="mail" id="email" placeholder="Email" class="contact__input" required>
+                        <input type="text" id="subject" placeholder="Subject" class="contact__input" required>
+                        <textarea type="message" id="message" placeholder="Message" id="" cols="0" rows="10" class="contact__input" required></textarea>
+                        <button class="contact__button button" type="submit">Kirim</button>
+                    </form>
+                </div>
+                <div style="text-align: center;">
+					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.1851094133394!2d108.36259749999999!3d-6.498234300000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6ec36c5d3a70f9%3A0x7ae03457d77ea7c5!2sDyzulk%20-%20Seinjak%20%26%20Sejejak!5e0!3m2!1sid!2sid!4v1646790899934!5m2!1sid!2sid" width="95%" height="450" style="border: 25; margin-top: 30px;" allowfullscreen="" loading="lazy"></iframe>
+				</div>
+            </section>
+        </main>
+	
+	<!--===== FOOTER =====-->
+        <footer class="footer">
+            <p class="footer__title">myPortfolio</p>
+            <div class="footer__social">
+                <a href="https://facebook.com/dyzulk" class="footer__icon"><i class='bx bxl-facebook' ></i></a>
+                <a href="https://instagram.com/dyzulk" class="footer__icon"><i class='bx bxl-instagram' ></i></a>
+                <a href="https://twitter.com/dyzulk_" class="footer__icon"><i class='bx bxl-twitter' ></i></a>
+            </div>
+            <p class="footer__copy">Copyright &#169; 2022 - <script>document.write(new Date().getFullYear())</script>  <a href="/" style="color: #fff;">Herdy Iskandar</a>. All rigths reserved</p>
+        </footer>
+		
+        <!--===== SCROLL REVEAL =====-->
+        <script src="https://unpkg.com/scrollreveal"></script>
+	<script src="assets/js/ud-menu-scroll.js"></script>
+
+        <!--===== MAIN JS =====-->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="assets/js/main.js"></script>
+	
+    </body>
+</html>