commit 56101989cca21b988dfb0f1c8a039074a295f580 Author: Muhammad Herdy Iskandar <66510723+dyzulk@users.noreply.github.com> Date: Mon Mar 27 22:35:28 2023 +0700 Add files via upload 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.zip b/assets/img.zip new file mode 100644 index 0000000..38e9b3b Binary files /dev/null and b/assets/img.zip differ 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..33923ea --- /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/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 @@ + + 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 @@ + + + + +  +  + + + + + + + +Muhammad Herdy Iskandar \ 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 @@ + +
+ +
\ No newline at end of file diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss new file mode 100644 index 0000000..2880116 --- /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.php b/index.php new file mode 100644 index 0000000..a8fbaa8 --- /dev/null +++ b/index.php @@ -0,0 +1,172 @@ + + + + + + +
+ + + + + +
+
+

Hi,
I'am Herdy
Web Designer

+ + Contact +
+ + + +
+ + + + + + + + + +
+
+ + +
+

About

+ +
+
+ Muhammad Herdy Iskandar +
+ +
+

I'am Herdy

+

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.

+
+
+
+ + +
+

Skills

+ +
+
+

Profesional Skills

+

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.

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.

+
+
+ + HTML5 +
+
+ +
+
+ 90% +
+
+
+
+ + CSS3 +
+
+ +
+
+ 85% +
+
+
+
+ + JAVASCRIPT +
+
+ +
+
+ 65% +
+
+
+
+ + UX/UI +
+
+ +
+
+ 85% +
+
+
+ +
+ +
+
+
+ + +
+

Work

+ +
+ + + + + + + + + + + + + + + + + + +
+
+ + +
+

Contact

+ +
+
+ + + + + +
+
+
+ +
+
+
+ + + + + + + + + + \ No newline at end of file