Skip to content

Commit

Permalink
final design
Browse files Browse the repository at this point in the history
  • Loading branch information
@yusup-maulana
yusup-maulana committed Feb 20, 2024
1 parent a5e4e8a commit 6dd4ca3
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 34 deletions.
46 changes: 27 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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-->
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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() {
Expand All @@ -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({
Expand Down Expand Up @@ -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 {
Expand Down
20 changes: 12 additions & 8 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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" />');
Expand Down Expand Up @@ -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();
};
}
123 changes: 116 additions & 7 deletions my.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1730,6 +1730,7 @@ h4 {
.pendidikan {
width: 100% !important;
display: block !important;
margin-top: 2rem;
}

.pendidikan .pendidikan-bagi {
Expand All @@ -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) {
Expand Down Expand Up @@ -2629,6 +2683,7 @@ span:nth-child(63) {
.pendidikan {
width: 100%;
display: flex;
margin-top: 2rem;
}

.pendidikan .pendidikan-bagi {
Expand All @@ -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;
}

Expand All @@ -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) {
Expand All @@ -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 {
Expand All @@ -2693,7 +2793,7 @@ ul.timeline:before {
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
z-index: 1;
}

ul.timeline > li {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down

0 comments on commit 6dd4ca3

Please sign in to comment.