From 6dd4ca3fea63d8ad0140d01f9f9f44a0c54096ae Mon Sep 17 00:00:00 2001
From: yusup-maulana <yusupmaulana.net@gmail.com>
Date: Wed, 21 Feb 2024 03:05:01 +0700
Subject: [PATCH] final design

---
 index.html |  46 +++++++++++---------
 index.js   |  20 +++++----
 my.css     | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 155 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index a03b737..f3a9708 100644
--- a/index.html
+++ b/index.html
@@ -318,7 +318,14 @@ <h2>Resume <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="
        </div><!-- end slide slick 2 -->
 
        <div><!--  slide slick 3 -->
-         your content 2
+         <p style="     font-style: italic;
+    border-bottom: 1px solid #d1bd94;
+    width: fit-content;
+    margin: auto;
+    position: relative;
+    top: 6rem;
+    font-size: large;
+    padding: 0rem 2rem;">humble kok, awas saja kalau bilang "kamu nyaleg ya?"</p>
        </div><!-- end slide slick 3 -->
 
      </div> <!--end head3-->
@@ -1147,24 +1154,24 @@ <h5>DIV Manajemen Informatika - IPK 3.09</h5>
                          konsisten selama 4 tahun.</p>
                      </li>
                      <li>
-                       <p>Saya aktif mengikuti seminar dan kompetensi, selama kuliah</p>
+                       <p>Aktif mengikuti seminar dan kompetensi, selama kuliah</p>
                        <ul>
-                         <li><button class="btn btn-info btn-sm in_view  text-left" id="CALLFORPAPER">Seminar Nasional dan Call For
+                         <li><button class="btn btn-info btn-sm in_view  text-left addSmaller" id="CALLFORPAPER">Seminar Nasional dan Call For
                              Paper Information Technology & Computer</button> </li>
-                         <li><button class="btn btn-info btn-sm in_view  text-left" id="TOEIC">Sertifikasi TOEIC</button> </li>
-                         <li><button class="btn btn-info btn-sm in_view  text-left" id="ORACLE">Introduction to Big Data : Limitless
+                         <li><button class="btn btn-info btn-sm in_view  text-left addSmaller" id="TOEIC">Sertifikasi TOEIC</button> </li>
+                         <li><button class="btn btn-info btn-sm in_view  text-left addSmaller" id="ORACLE">Introduction to Big Data : Limitless
                              Possibilities</button> </li>
-                         <li><button class="btn btn-info btn-sm in_view  text-left" id="EKSIS2017">Ekonomi Kesehatan Sistem
+                         <li><button class="btn btn-info btn-sm in_view  text-left addSmaller" id="EKSIS2017">Ekonomi Kesehatan Sistem
                              Informasi
                              Bisnis (EKSIS) 2017</button> </li>
-                         <li><button class="btn btn-info btn-sm in_view  text-left" id="PICKS2016">Piksi International Conference on
+                         <li><button class="btn btn-info btn-sm in_view  text-left addSmaller" id="PICKS2016">Piksi International Conference on
                              Knowledge and Sciences (PICKS) 2016</button></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
 
-                 <li style="margin-top: 5%;">
+                 <li style="margin-top: 10%;">
                    <span>Juli 2011 - Mei 2014</span>
                    <a href="#" class="float-right"> </a>
                    <h3> <a target="_blank" href="https://goo.gl/maps/LE4vZkz2FK5UE2aa8">Madrasah Aliyah Muslimin
@@ -1182,7 +1189,7 @@ <h5>Jurusan Ilmu Pengetahuan Sosial (IPS)</h5>
                    </ul>
                  </li>
 
-                 <li style="margin-top: 5%;">
+                 <li style="margin-top: 10%;">
                    <span>2007 - Juni 2011</span>
                    <a href="#" class="float-right"> </a>
                    <h3> <a target="_blank" href="https://www.google.com/maps/place/6%C2%B044'17.4%22S+107%C2%B021'49.8%22E/@-6.7381707,107.3632978,19z/data=!3m1!4b1!4m6!3m5!1s0x0:0x14e44832bcfe5168!7e2!8m2!3d-6.7381721!4d107.3638448">Madrasah
@@ -1199,7 +1206,7 @@ <h3> <a target="_blank" href="https://www.google.com/maps/place/6%C2%B044'17.4%2
                    </ul>
                  </li>
 
-                 <li style="margin-top: 5%;">
+                 <li style="margin-top: 10%;">
                    <span>2002 - 2007</span>
                    <a href="#" class="float-right"> </a>
                    <h3> <a target="_blank" href="https://goo.gl/maps/9cN6afUvH75b69y4A">Madrasah Ibtidaiyah Nyenang</a>
@@ -1211,7 +1218,7 @@ <h3> <a target="_blank" href="https://goo.gl/maps/9cN6afUvH75b69y4A">Madrasah Ib
            </div>
          </div>
          <div class="pendidikan-bagi">
-           <h2>Latest</h2>
+           <h2>Active Recently</h2>
            <ul class="ULLastActivity">
              <li id="Course-DICODING-BMACHINELEARNING" class="in_view "><span>2024/02/12</span><span>Course</span>
                <h4>Belajar Machine Learning untuk Pemula</h4><span><a target="_blank" href="https://www.dicoding.com/certificates/0LZ02YDLKX65">Dicoding Indonesia</a></span>
@@ -1380,7 +1387,8 @@ <h4>Bukit Algoritma dan Masa Depan Teknologi Data di Indonesia</h4><span><a targ
        <div class="row">
          <div class="col-12">
            <div class="media  p-3 flex-column flex-md-row">
-             <img src="IMG/img.png" data-src="IMG/rap.webp" alt="#" class="mr-3 rounded-circle" alt="logo rap" style="width: 50px;    background: #e3e3e3;    border-radius: 50%;    padding: 6px; ">
+             <span class="IconWOrkBefore"></span>
+             <img class="IconWork" src="IMG/img.png" data-src="IMG/rap.webp" alt="#" class="mr-3 rounded-circle" alt="logo rap">
              <div class="media-body align-self-center">
                <h4><a target="_blank" href="https://goo.gl/maps/TLHgSqZvYX9LZ94c9">PT. Raya Azura Persada</a></h4>
                <small>
@@ -1404,7 +1412,8 @@ <h5>Administrative Officer</h5>
        <div class="row">
          <div class="col-12">
            <div class="media  p-3 flex-column flex-md-row">
-             <img src="IMG/img.png" data-src="IMG/rap.webp" alt="#" class="mr-3 rounded-circle" alt="logo rap" style="width: 50px;    background: #e3e3e3;    border-radius: 50%;    padding: 6px;">
+             <span class="IconWOrkBefore"></span>
+             <img class="IconWork" src="IMG/img.png" data-src="IMG/rap.webp" alt="#" class="mr-3 rounded-circle" alt="logo rap">
              <div class="media-body align-self-center">
                <h4><a target="_blank" href="https://goo.gl/maps/TLHgSqZvYX9LZ94c9">PT. Raya Azura Persada</a></h4>
                <small>
@@ -1431,7 +1440,8 @@ <h5>IT Support</h5>
        <div class="row">
          <div class="col-12">
            <div class="media  p-3 flex-column flex-md-row">
-             <img src="IMG/img.png" data-src="IMG/kbk.webp" alt="#" class="mr-3 rounded-circle" alt="logo pemerintah bandung" style="width: 50px;    background: #e3e3e3;    border-radius: 50%;    padding: 6px;">
+             <span class="IconWOrkBefore"></span>
+             <img class="IconWork" src="IMG/img.png" data-src="IMG/kbk.webp" alt="#" class="mr-3 rounded-circle" alt="logo pemerintah bandung">
              <div class="media-body align-self-center">
                <h4><a target="_blank" href="https://twitter.com/KecBankul">Kantor Kecamatan Bandung Kulon</a></h4>
                <small>
@@ -1492,7 +1502,6 @@ <h5>Praktek Kerja Lapangan Rolling Staff Kepala Sub Bagian (KASUBAG)</h5>
 
    <!-- ====================================================================================================== START contactform -->
    <div id="ContactForm">
-
    </div>
    <script>
      $(document).on('click', '.plugin-ContactForm', function() {
@@ -1506,20 +1515,18 @@ <h5>Praktek Kerja Lapangan Rolling Staff Kepala Sub Bagian (KASUBAG)</h5>
    </script>
 
    <!-- ====================================================================================================== START Inview klik open -->
-
    <div id="in_view_form" title="Detail">
      <button class="close-button">x</button>
-
      <div class="inview_frame"></div>
    </div>
 
    <script type="module">
      import {
-       klikInviewOpen
+       klikInviewOpen,
+       hideLoadingiframe
      } from "./index.js"
 
 
-
      function klikClosebtninview() {
        $("#in_view_form").slideUp();
        $("#in_view_form").animate({
@@ -1755,6 +1762,7 @@ <h5>Praktek Kerja Lapangan Rolling Staff Kepala Sub Bagian (KASUBAG)</h5>
      -webkit-backface-visibility: hidden;
      transition: transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12), opacity 0.4s ease, color 0.4s ease;
      transform: translateY(var(--y)) scale(var(--s));
+     z-index: 2;
    }
 
    .tabbar>div label svg {
diff --git a/index.js b/index.js
index a8e0fbf..823f6de 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,9 @@
-export function klikInviewOpen(stat) {
+export async function hideLoadingiframe() {
+  document.getElementById("loader-line").style.display = "none";
+  document.getElementById("iframeid").style.display = "block";
+}
+
+export async function klikInviewOpen(stat) {
   const courseURLs = {
     "Course-BukitAlgoritmadanMasaDepanTeknologiDatadiIndonesia":
       "https://drive.google.com/file/d/1U0Q6F7Xt0DJyeof6-Ap679-f9UBoRokr/preview",
@@ -353,7 +358,7 @@ export function klikInviewOpen(stat) {
     );
   } else if (stat == "TOEIC") {
     $(".inview_frame").html(
-      '<div id="loader-line"></div><iframe onload="hideLoadingiframe()" id="iframeid"   src="https://drive.google.com/file/d/1MbFAvmm47GoR5rEoMdj6JgZVdQaPn0qz/preview" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="360"></iframe></div>'
+      '<div id="loader-line"></div><iframe onload="hideLoadingiframe()" id="iframeid"   src="https://drive.google.com/file/d/1-18cFhFNAmJlE1JQQ_iwgzEHp59fj6Qu/preview" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="360"></iframe></div>'
     );
   } else if (stat == "ORACLE") {
     $(".inview_frame").html(
@@ -397,7 +402,7 @@ export function klikInviewOpen(stat) {
     );
   } else if (stat == "SuketKerjaRAP") {
     $(".inview_frame").html(
-      '<div id="loader-line"></div><iframe onload="hideLoadingiframe()" id="iframeid"   src="https://drive.google.com/file/d/105pgmA3CPSVtPPrnvPcuhHrHAjqk6QsR/preview" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="360"></iframe></div>'
+      '<div id="loader-line"></div><iframe onload="hideLoadingiframe()" id="iframeid"   src="https://drive.google.com/file/d/1mNju3j0v5skbLDWu_nFG7PcURBsFyWRF/preview" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="360"></iframe></div>'
     );
   } else if (stat == "portofolio-webanime") {
     $(".inview_frame").append('<iframe  src="portofolio-webanime.html" />');
@@ -426,9 +431,8 @@ export function klikInviewOpen(stat) {
   $("#in_view_form").animate({
     top: "0%",
   });
-}
-
-function hideLoadingiframe() {
-  document.getElementById("loader-line").style.display = "none";
-  document.getElementById("iframeid").style.display = "block";
+  let iframeid = document.getElementById("iframeid");
+  iframeid.onload = function () {
+    hideLoadingiframe();
+  };
 }
diff --git a/my.css b/my.css
index cbc1b80..7182c5d 100644
--- a/my.css
+++ b/my.css
@@ -1730,6 +1730,7 @@ h4 {
   .pendidikan {
     width: 100% !important;
     display: block !important;
+    margin-top: 2rem;
   }
 
   .pendidikan .pendidikan-bagi {
@@ -1754,6 +1755,59 @@ h4 {
   .slickerslide2 .head-in3 {
     top: 8px;
   }
+
+  .pendidikan .pendidikan-bagi h2 {
+    font-size: x-large;
+    text-align: center;
+  }
+  ul.timeline > li p {
+    text-align: justify;
+    font-size: small;
+  }
+  .pendidikan .pendidikan-bagi .ULLastActivity li h4 {
+    font-size: medium;
+  }
+  .addSmaller {
+    font-size: 10px;
+  }
+  .pendidikan .pendidikan-bagi:nth-child(2) {
+    margin-top: 3rem;
+  }
+  .media .IconWork {
+    width: 71px !important;
+    margin: 1rem auto;
+    background: rgb(227, 227, 227);
+    border-radius: 50%;
+    padding: 6px;
+    border: 2px solid rgb(255 255 255) !important;
+    margin: 0rem auto;
+    margin-right: auto !important;
+  }
+  .media .IconWOrkBefore {
+    filter: blur(0px);
+    width: 79px !important;
+    background: rgb(209 189 148);
+    border-radius: 50%;
+    padding: 0px;
+    margin: 0rem auto;
+    height: 76px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    transform: translateY(-3px);
+  }
+  .media .media-body:before {
+    content: " ";
+    background: #ffffff;
+    display: inline-block;
+    position: relative;
+    top: -49px;
+    width: 100%;
+    height: 2rem;
+    z-index: -1;
+    border-radius: 3px;
+    clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);
+  }
 }
 
 @media screen and (max-width: 320px) {
@@ -2629,6 +2683,7 @@ span:nth-child(63) {
 .pendidikan {
   width: 100%;
   display: flex;
+  margin-top: 2rem;
 }
 
 .pendidikan .pendidikan-bagi {
@@ -2638,18 +2693,54 @@ span:nth-child(63) {
 .pendidikan .pendidikan-bagi h2 {
   color: white;
 }
+.pendidikan .pendidikan-bagi .ULLastActivity::-webkit-scrollbar {
+  width: 0.2em;
+}
 
+.pendidikan .pendidikan-bagi .ULLastActivity::-webkit-scrollbar-track {
+  background-color: #42424200;
+  margin-bottom: 30px;
+  margin-top: 30px;
+}
+
+.pendidikan .pendidikan-bagi .ULLastActivity::-webkit-scrollbar-thumb {
+  background-color: #00f1ff;
+  border-radius: 7px 7px 7px 7px;
+}
 .pendidikan .pendidikan-bagi .ULLastActivity {
-  border-left: 1px solid #4848488f;
-  margin-left: 3%;
   padding-left: 2%;
   list-style: none;
+  overflow: auto;
+  max-height: -webkit-fill-available;
+  height: 67rem;
+}
+ul.ULLastActivity:before {
+  content: " ";
+  background: #515151;
+  display: inline-block;
+  position: absolute;
+  width: 2px;
+  height: inherit;
+  z-index: 1;
+  translate: 8px;
+}
+ul.ULLastActivity > li:before {
+  content: " ";
+  background: #1f5379;
+  display: inline-block;
+  position: relative;
+  left: -7.9%;
+  top: 1.7rem;
+  border-radius: 50%;
+  border: 3px solid #c1b18c;
+  width: 20px;
+  height: 20px;
+  z-index: 1;
 }
-
 .pendidikan .pendidikan-bagi .ULLastActivity li {
   margin: 0px 0px 1% 0px;
   background: #0084c30d;
-  padding: 2%;
+  padding: 2% 2% 2% 7%;
   cursor: pointer;
 }
 
@@ -2662,6 +2753,8 @@ span:nth-child(63) {
   border-radius: 5px;
   font-size: small;
   color: #cdbe91;
+  position: relative;
+  left: -18px;
 }
 
 .pendidikan .pendidikan-bagi .ULLastActivity li span:nth-child(2) {
@@ -2671,12 +2764,19 @@ span:nth-child(63) {
   font-size: small;
   color: #cdbe91;
   border: 2px solid #cdbe91;
+  position: relative;
+  left: -18px;
 }
 
 .pendidikan .pendidikan-bagi .ULLastActivity li h4 {
   font-size: large;
   padding: 0;
   margin: 4px 0px 0px 0px;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 ul.timeline {
@@ -2693,7 +2793,7 @@ ul.timeline:before {
   left: 29px;
   width: 2px;
   height: 100%;
-  z-index: 400;
+  z-index: 1;
 }
 
 ul.timeline > li {
@@ -2707,11 +2807,11 @@ ul.timeline > li:before {
   display: inline-block;
   position: absolute;
   border-radius: 50%;
-  border: 3px solid #22c0e8;
+  border: 3px solid #007efa;
   left: 20px;
   width: 20px;
   height: 20px;
-  z-index: 400;
+  z-index: 1;
 }
 
 ul.timeline > li span {
@@ -2729,6 +2829,15 @@ ul.timeline > li p {
 .media {
   color: #adadad;
 }
+.media .IconWork {
+  width: 50px;
+  background: rgb(227, 227, 227);
+  border-radius: 50%;
+  padding: 6px;
+  border: 2px solid rgb(209, 189, 148);
+  filter: blur(0px);
+  margin-right: 1rem;
+}
 /* <!-- ====================================================================================================== START contactform --> */
 /*=== Trigger  ===*/
 .animasikan {