[
  {
    "path": "README.md",
    "content": "# Responsive Personal Portfolio Website\n## [Watch it on youtube](https://youtu.be/6cidbUHNZRQ)\n### Responsive Personal Portfolio Website\n\n- Responsive Personal Portfolio Website Using HTML CSS And JavaScript\n- Contains animations when scrolling.\n- Smooth scrolling in each section.\n- Developed first with the Mobile First methodology, then for desktop.\n- Compatible with all mobile devices and with a beautiful and pleasant user interface.\n\n💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode)\n\n![preview img](/preview.png)\n"
  },
  {
    "path": "assets/css/styles.css",
    "content": "/*===== GOOGLE FONTS =====*/\n@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap\");\n\n/*===== VARIABLES CSS =====*/\n:root{\n    --header-height: 3rem;\n    --font-medium: 500;\n}\n\n/*===== Colores =====*/\n:root{\n    --first-color: #5361FF;\n    --white-color: #FAFAFF;\n    --dark-color: #2A3B47;\n    --text-color: #697477;\n}\n\n/*===== Fuente y tipografia =====*/\n:root{\n    --body-font: 'Montserrat', sans-serif;\n    --big-font-size: 6.25rem;\n    --h2-font-size: 1.25rem;\n    --normal-font-size: .938rem;\n    --small-font-size: .813rem;\n}\n@media screen and (min-width: 768px){\n    :root{\n        --big-font-size: 10.5rem;\n        --h2-font-size: 2rem;\n        --normal-font-size: 1rem;\n        --small-font-size: .875rem;\n    }\n}\n\n/*===== Margenes =====*/\n:root{\n    --mb-1: .5rem;\n    --mb-2: 1rem;\n    --mb-3: 1.5rem;\n    --mb-4: 2rem;\n}\n\n/*===== z index =====*/\n:root{\n    --z-fixed: 100;\n}\n\n/*===== BASE =====*/\n*,::before,::after{\n    box-sizing: border-box;\n}\nhtml{\n    scroll-behavior: smooth;\n}\nbody{\n    margin: var(--header-height) 0 0 0;\n    font-family: var(--body-font);\n    font-size: var(--normal-font-size);\n    font-weight: var(--font-medium);\n    color: var(--text-color);\n    line-height: 1.6;\n}\nh1,h2,p{\n    margin: 0;\n}\nul{\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\na{\n    text-decoration: none;\n    color: var(--text-color);\n}\nimg{\n    max-width: 100%;\n    height: auto;\n    display: block;\n}\n\n/*===== CLASS CSS ===== */\n.section{\n    padding: 3rem 0;\n}\n.section-title{\n    position: relative;\n    font-size: var(--h2-font-size);\n    color: var(--dark-color);\n    margin: var(--mb-4) 0;\n    text-align: center;\n}\n.section-title::after{\n    position: absolute;\n    content: \"\";\n    width: 32px;\n    height: .18rem;\n    left: 0;\n    right: 0;\n    margin: auto;\n    top: 2rem;\n    background-color: var(--first-color);\n}\n\n/*===== LAYOUT =====*/\n.bd-grid{\n    max-width: 1024px;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-column-gap: 2rem;\n    width: calc(100% - 2rem);\n    margin-left: var(--mb-2);\n    margin-right: var(--mb-2);\n}\n.l-header{\n    width: 100%;\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: var(--z-fixed);\n    background-color: var(--first-color);\n}\n\n/*===== NAV =====*/\n.nav{\n    height: var(--header-height);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n@media screen and (max-width: 768px){\n    .nav__menu{\n        position: fixed;\n        top: var(--header-height);\n        right: -100%;\n        width: 80%;\n        height: 100%;\n        padding: 2rem;\n        background-color: rgba(255,255,255,.3);\n        transition: .5s;\n        backdrop-filter: blur(10px);\n    }\n}\n.nav__item{\n    margin-bottom: var(--mb-4);\n}\n.nav__link{\n    position: relative;\n    color: var(--dark-color);\n}\n.nav__link:hover{\n    color: var(--first-color);\n}\n.nav__logo{\n    color: var(--white-color);\n}\n.nav__toggle{\n    color: var(--white-color);\n    font-size: 1.5rem;\n    cursor: pointer;\n}\n\n/*=== Show menu ===*/\n.show{\n    right: 0;\n}\n\n/*Active menu*/\n.active::after{\n    position: absolute;\n    content: \"\";\n    width: 100%;\n    height: .18rem;\n    left: 0;\n    top: 2rem;\n    background-color: var(--first-color);\n}\n\n/*===== HOME =====*/\n.home{\n    position: relative;\n    background-color: var(--first-color);\n    overflow: hidden;\n}\n.home__container{\n    height: calc(100vh - var(--header-height));\n    row-gap: 5rem;\n}\n.home__title{\n    align-self: flex-end;\n    font-size: var(--big-font-size);\n    color: var(--white-color);\n    line-height: .8;\n}\n.home__title span{\n    text-shadow: 0 20px 25px rgba(0,0,0,.5);\n}\n.home__scroll{\n    align-self: flex-end;\n    padding-bottom: var(--mb-4);\n}\n.home__scroll-link{\n    writing-mode: vertical-lr;\n    transform: rotate(-180deg);\n    color: var(--white-color);\n}\n.home__img{\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    width: 295px;\n}\n\n/* ===== ABOUT =====*/\n.about__container{\n    justify-items: center;\n    row-gap: 2rem;\n    text-align: center;\n}\n.about__img{\n    display: flex;\n    justify-content: center;\n    padding-top: 1rem;\n    width: 120px;\n    height: 120px;\n    background-color: var(--first-color);\n    border-radius: 50%;\n    overflow: hidden;\n}\n.about__img img{\n    width: 100px;\n}\n.about__subtitle{\n    font-size: var(--h2-font-size);\n    color: var(--first-color);\n    margin-bottom: var(--mb-1);\n}\n.about__text{\n    margin-bottom: var(--mb-4);\n}\n.about__profession{\n    display: block;\n    margin-bottom: var(--mb-4);\n}\n.about__social-icon{\n    font-size: 1.4rem;\n    margin: 0 var(--mb-1);\n}\n.about__social-icon:hover{\n    color: var(--first-color);\n}\n\n/* ===== SKILLS =====*/\n.skills__container{\n    row-gap: 2rem;\n}\n.skills__subtitle{\n    color: var(--first-color);\n    margin-bottom: var(--mb-3);\n}\n.skills__name{\n    display: inline-block;\n    font-size: var(--small-font-size);\n    margin-right: var(--mb-2);\n    margin-bottom: var(--mb-3);\n    padding: .25rem .5rem;\n    background-color: var(--white-color);\n    border-radius: .25rem;\n}\n.skills__name:hover{\n    background-color: var(--first-color);\n    color: var(--white-color);\n}\n.skills__img img{\n    border-radius: .5rem;\n}\n\n/* ===== PORTFOLIO =====*/\n.portfolio{\n    background-color: var(--white-color);\n}\n.portfolio__container{\n    justify-items: center;\n    row-gap: 2rem;\n}\n.portfolio__img{\n    position: relative;\n    overflow: hidden;\n}\n.portfolio__img img{\n    border-radius: .5rem;\n}\n.portfolio__link{\n    position: absolute;\n    bottom: -100%;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: rgba(255,255,255,.3);\n    border-radius: .5rem;\n    cursor: pointer;\n    backdrop-filter: blur(10px);\n    transition: .3s;\n}\n.portfolio__img:hover .portfolio__link{\n    bottom: 0;\n}\n.portfolio__link-name{\n    color: var(--dark-color);\n}\n\n/* ===== CONTACT =====*/\n.contact__container{\n    row-gap: 2rem;\n}\n.contact__subtitle{\n    font-size: var(--normal-font-size);\n    color: var(--first-color);\n}\n.contact__text{\n    display: inline-block;\n    margin-bottom: var(--mb-2);\n}\n.contact__inputs{\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    column-gap: 1rem;\n}\n.contact__input{\n    width: 100%;\n    padding: .8rem;\n    outline: none;\n    border: 1.5px solid var(--dark-color);\n    font-size: var(--normal-font-size);\n    margin-bottom: var(--mb-4);\n    border-radius: .5rem;\n}\n.contact__button{\n    display: block;\n    background-color: var(--first-color);\n    color: var(--white-color);\n    padding: .75rem 2.5rem;\n    margin-left: auto;\n    border-radius: .5rem;\n    border: none;\n    outline: none;\n    font-size: var(--normal-font-size);\n    cursor: pointer;\n}\n\n/* ===== FOOTER=====*/\n.footer{\n    background-color: var(--dark-color);\n}\n.footer__container{\n    row-gap: 2rem;\n}\n.footer__title{\n    font-size: var(--normal-font-size);\n    color: var(--white-color);\n    margin-bottom: var(--mb-2);\n}\n.footer__link{\n    padding: .25rem 0;\n}\n.footer__link:hover{\n    color: var(--first-color);\n}\n.footer__social{\n    font-size: 1.4rem;\n    margin-right: var(--mb-1);\n}\n.footer__social:hover{\n    color: var(--first-color);\n}\n\n/* ===== MEDIA QUERIES =====*/\n/* For small devices */\n@media screen and (max-width: 320px) {\n  .home__img {\n    width: 230px;\n  }\n}\n\n@media screen and (min-width: 768px){\n    body{\n        margin: 0;\n    }\n    .section{\n        padding-top: 4rem;\n    }\n    .section-title{\n        margin-bottom: 3rem;\n    }\n    .section-title::after{\n        width: 64px;\n        top: 3rem;\n    }\n\n    .nav{\n        height: calc(var(--header-height) + 1rem);\n    }\n    .nav__list{\n        display: flex;\n    }\n    .nav__item{\n        margin-left: var(--mb-4);\n        margin-bottom: 0;\n    }\n    .nav__toggle{\n        display: none;\n    }\n    .nav__link{\n        color: var(--white-color);\n    }\n    .nav__link:hover{\n        color: var(--white-color);\n    }\n    .active::after{\n        background-color: var(--white-color);\n    }\n\n    .home__container{\n        height: 100vh;\n        grid-template-rows: 1.7fr 1fr;\n        row-gap: 0;\n    }\n    .home__img{\n        width: 524px;\n        right: 10%;\n    }\n\n    .about__container{\n        grid-template-columns: repeat(2, 1fr);\n        align-items: center;\n        text-align: initial;\n        padding: 4rem 0;\n    }\n    .about__img{\n        width: 200px;\n        height: 200px;\n    }\n    .about__img img{\n        width: 165px;\n    }\n\n    .skills__container{\n        grid-template-columns: repeat(2, 1fr);\n        align-items: center;\n    }\n\n    .portfolio__container{\n        grid-template-columns: repeat(3, 1fr);\n        grid-template-rows: repeat(2, 1fr);\n        column-gap: 2rem;\n    }\n\n    .contact__container{\n        grid-template-columns: repeat(2, 1fr);\n        justify-items: center;\n    }\n    .contact__form{\n        width: 380px;\n    }\n\n    .footer__container{\n        grid-template-columns: repeat(3, 1fr);\n        justify-items: center;\n    }\n}\n\n@media screen and (min-width: 1024px){\n    .bd-grid{\n        margin-left: auto;\n        margin-right: auto;\n    }\n}\n\n/* For tall screens on mobiles y desktop*/\n@media screen and (min-height: 721px) {\n    .home__container {\n        height: 640px;\n    }\n    .home__img {\n        width: 500px;\n        right: 24%;\n    }\n}\n"
  },
  {
    "path": "assets/js/main.js",
    "content": "/*===== MENU SHOW =====*/ \r\nconst showMenu = (toggleId, navId) =>{\r\n    const toggle = document.getElementById(toggleId),\r\n    nav = document.getElementById(navId)\r\n\r\n    if(toggle && nav){\r\n        toggle.addEventListener('click', ()=>{\r\n            nav.classList.toggle('show')\r\n        })\r\n    }\r\n}\r\nshowMenu('nav-toggle','nav-menu')\r\n\r\n/*===== REMOVE MENU MOBILE =====*/\r\nconst navLink = document.querySelectorAll('.nav__link')\r\n\r\nfunction linkAction(){\r\n    const navMenu = document.getElementById('nav-menu')\r\n    navMenu.classList.remove('show')\r\n}\r\nnavLink.forEach(n => n.addEventListener('click', linkAction))\r\n\r\n/*===== SCROLL SECTIONS ACTIVE LINK =====*/\r\nconst sections = document.querySelectorAll('section[id]')\r\n\r\nwindow.addEventListener('scroll', scrollActive)\r\n\r\nfunction scrollActive(){\r\n    const scrollY = window.pageYOffset\r\n\r\n    sections.forEach(current =>{\r\n        const sectionHeight = current.offsetHeight\r\n        const sectionTop = current.offsetTop - 50;\r\n        sectionId = current.getAttribute('id')\r\n\r\n        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){\r\n            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active')\r\n        }else{\r\n            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active')\r\n        }\r\n    })\r\n}\r\n\r\n/*===== SCROLL REVEAL ANIMATION =====*/\r\nconst sr = ScrollReveal({\r\n    origin: 'top',\r\n    distance: '80px',\r\n    duration: 2000,\r\n    reset: true\r\n})\r\n\r\n/*SCROLL HOME*/\r\nsr.reveal('.home__title', {})\r\nsr.reveal('.home__scroll', {delay: 200})\r\nsr.reveal('.home__img', {origin:'right', delay: 400})\r\n\r\n/*SCROLL ABOUT*/\r\nsr.reveal('.about__img', {delay: 500})\r\nsr.reveal('.about__subtitle', {delay: 300})\r\nsr.reveal('.about__profession', {delay: 400})\r\nsr.reveal('.about__text', {delay: 500})\r\nsr.reveal('.about__social-icon', {delay: 600, interval: 200})\r\n\r\n/*SCROLL SKILLS*/\r\nsr.reveal('.skills__subtitle', {})\r\nsr.reveal('.skills__name', {distance: '20px', delay: 50, interval: 100})\r\nsr.reveal('.skills__img', {delay: 400})\r\n\r\n/*SCROLL PORTFOLIO*/\r\nsr.reveal('.portfolio__img', {interval: 200})\r\n\r\n/*SCROLL CONTACT*/\r\nsr.reveal('.contact__subtitle', {})\r\nsr.reveal('.contact__text', {interval: 200})\r\nsr.reveal('.contact__input', {delay: 400})\r\nsr.reveal('.contact__button', {delay: 600})\r\n\r\n\r\n\r\n\r\n"
  },
  {
    "path": "assets/sass/styles.scss",
    "content": "/*===== GOOGLE FONTS =====*/\r\n@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');\r\n\r\n/*===== VARIABLES CSS =====*/\r\n:root{\r\n    --header-height: 3rem;\r\n    --font-medium: 500;\r\n}\r\n/*===== Colores =====*/\r\n:root{\r\n    --first-color: #5361FF;\r\n    --white-color: #FAFAFF;\r\n    --dark-color: #2a3b47;\r\n    --text-color: #697477;\r\n}\r\n/*===== Fuente y tipografia =====*/\r\n:root{\r\n    --body-font: 'Montserrat', sans-serif;\r\n\r\n    --big-font-size: 6.25rem;\r\n    --h2-font-size: 1.25rem;\r\n    --normal-font-size: .938rem;\r\n    --small-font-size: .813rem;\r\n\r\n    @media screen and (min-width: 768px){\r\n        --big-font-size: 10.5rem;\r\n        --h2-font-size: 2rem;\r\n        --normal-font-size: 1rem;\r\n        --small-font-size: .875rem;\r\n    }\r\n}\r\n/*===== Margenes =====*/\r\n:root{\r\n    --mb-1: 0.5rem;\r\n    --mb-2: 1rem;\r\n    --mb-3: 1.5rem;\r\n    --mb-4: 2rem;\r\n}\r\n/*===== z index =====*/\r\n:root{\r\n    --z-fixed: 100;\r\n}\r\n\r\n/*===== BASE =====*/\r\n*,::before,::after{\r\n    box-sizing: border-box;\r\n}\r\nhtml{\r\n    scroll-behavior: smooth;\r\n}\r\nbody{\r\n    margin: var(--header-height) 0 0 0;\r\n    font-family: var(--body-font);\r\n    font-size: var(--normal-font-size);\r\n    font-weight: var(--font-medium);\r\n    color: var(--text-color);\r\n    line-height: 1.6;\r\n}\r\nh1,h2,p{\r\n    margin: 0;  \r\n}\r\nul{\r\n    margin: 0;\r\n    padding: 0;\r\n    list-style: none;\r\n}\r\na{\r\n    text-decoration: none;\r\n    color: var(--text-color);\r\n}\r\nimg{\r\n    max-width: 100%;\r\n    height: auto;\r\n    display: block;\r\n}\r\n\r\n/*===== CLASS CSS ===== */\r\n.section{\r\n    padding: 3rem 0;\r\n\r\n    &-title{\r\n        position: relative;\r\n        font-size: var(--h2-font-size);\r\n        color: var(--dark-color);\r\n        margin: var(--mb-4) 0;\r\n        text-align: center;\r\n    \r\n        &::after{\r\n            position: absolute;\r\n            content: '';\r\n            width: 32px;\r\n            height: .18rem;\r\n            left: 0;\r\n            right: 0;\r\n            margin: auto;\r\n            top: 2rem;\r\n            background-color: var(--first-color);\r\n        }\r\n    }\r\n}\r\n/*===== LAYOUT =====*/\r\n.bd-grid{\r\n    max-width: 1024px;\r\n    display: grid;\r\n    grid-template-columns: 100%;\r\n    grid-column-gap: 2rem;\r\n    width: calc(100% - 2rem);\r\n    margin-left: var(--mb-2);\r\n    margin-right: var(--mb-2);\r\n}\r\n.l-header{\r\n    width: 100%;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: var(--z-fixed);\r\n    background-color: var(--first-color);\r\n}\r\n\r\n/*===== NAV =====*/\r\n.nav{\r\n    height: var(--header-height);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    &__menu{\r\n        @media screen and (max-width: 768px){\r\n            position: fixed;\r\n            top: var(--header-height);\r\n            right: -100%;\r\n            width: 80%;\r\n            height: 100%;\r\n            padding: 2rem;\r\n            background: rgba(255, 255, 255, 0.3);\r\n            transition: .5s;\r\n            backdrop-filter: blur(10px);\r\n        }\r\n    }\r\n    &__item{\r\n        margin-bottom: var(--mb-4);\r\n    }\r\n    &__link{\r\n        position: relative;\r\n        color: var(--dark-color);\r\n\r\n        &:hover{\r\n            color: var(--first-color);\r\n        }\r\n    }\r\n    &__logo{\r\n        color: var(--white-color);\r\n    }\r\n    &__toggle{\r\n        color: var(--white-color);\r\n        font-size: 1.5rem;\r\n        cursor: pointer;\r\n    }\r\n}\r\n\r\n/*=== Show menu ===*/\r\n.show{\r\n    right: 0;\r\n}\r\n/*Active menu*/\r\n.active::after{\r\n    position: absolute;\r\n    content: '';\r\n    width: 100%;\r\n    height: 0.18rem;\r\n    left: 0;\r\n    top: 2rem;\r\n    background-color: var(--first-color);\r\n}\r\n\r\n/*===== HOME =====*/\r\n.home{\r\n    position: relative;\r\n    background-color: var(--first-color);\r\n    overflow: hidden;\r\n    \r\n    &__container{\r\n        height: calc(100vh - var(--header-height));\r\n        row-gap: 5rem;\r\n    }\r\n    &__title{\r\n        align-self: flex-end;\r\n        font-size: var(--big-font-size);\r\n        color: var(--white-color);\r\n        line-height: .8;\r\n\r\n        & span{\r\n            text-shadow: 0 20px 25px rgba(0, 0, 0, .5);\r\n        }\r\n    }\r\n    &__scroll{\r\n        align-self: flex-end;\r\n        padding-bottom: var(--mb-4);\r\n\r\n        &-link{\r\n            writing-mode: vertical-lr;\r\n            transform: rotate(-180deg);\r\n            color: var(--white-color);\r\n        }\r\n    }\r\n\r\n    &__img{\r\n        position: absolute;\r\n        right: 0;\r\n        bottom: 0;\r\n        width: 295px;\r\n    }\r\n}\r\n\r\n/* ===== ABOUT =====*/\r\n.about{\r\n    &__container{\r\n        justify-items: center;\r\n        row-gap: 2rem;\r\n        text-align: center;\r\n    }\r\n    &__img{\r\n        display: flex;\r\n        justify-content: center;\r\n        padding-top: 1rem;\r\n        width: 120px;\r\n        height: 120px;\r\n        background-color: var(--first-color);\r\n        border-radius: 50%;\r\n        overflow: hidden;\r\n\r\n        & img{\r\n            width: 100px;\r\n        }\r\n    }\r\n    &__subtitle{\r\n        font-size: var(--h2-font-size);\r\n        color: var(--first-color);\r\n        margin-bottom: var(--mb-1);\r\n    }\r\n    &__text{\r\n        margin-bottom: var(--mb-4);\r\n    }\r\n    &__profession{\r\n        display: block;\r\n        margin-bottom: var(--mb-4);\r\n    }\r\n    &__social{\r\n        &-icon{\r\n            font-size: 1.4rem;\r\n            margin: 0 var(--mb-1);\r\n\r\n            &:hover{\r\n                color: var(--first-color);\r\n            }\r\n        }\r\n    }\r\n}\r\n/* ===== SKILLS =====*/\r\n.skills{\r\n    &__container{\r\n        row-gap: 2rem;\r\n    }\r\n    &__subtitle{\r\n        color: var(--first-color);\r\n        margin-bottom: var(--mb-3);\r\n    }\r\n    &__name{\r\n        display: inline-block;\r\n        font-size: var(--small-font-size);\r\n        margin-right: var(--mb-2);\r\n        margin-bottom: var(--mb-3);\r\n        padding: .25rem .5rem ;\r\n        background-color: var(--white-color);\r\n        border-radius: .25rem;\r\n\r\n        &:hover{\r\n            background-color: var(--first-color);\r\n            color: var(--white-color);\r\n        }\r\n    }\r\n    &__img{\r\n        & img{\r\n            border-radius: .5rem;\r\n        }\r\n    }\r\n}\r\n/* ===== PORTFOLIO =====*/\r\n.portfolio{\r\n    background-color: var(--white-color);\r\n\r\n    &__container{\r\n        justify-items: center;\r\n        row-gap: 2rem;\r\n    }\r\n    &__img{\r\n        position: relative;\r\n        overflow: hidden;\r\n        \r\n        & img{\r\n            border-radius: .5rem;\r\n        }\r\n        \r\n        &:hover .portfolio__link{\r\n            bottom: 0;\r\n        }\r\n    }\r\n\r\n    &__link{\r\n        position: absolute;\r\n        bottom: -100%;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        background: rgba(255, 255, 255, 0.3);\r\n        border-radius: .5rem;\r\n        cursor: pointer;\r\n        backdrop-filter: blur(10px);\r\n        transition: .3s;\r\n\r\n        &-name{\r\n            color: var(--dark-color);\r\n        }\r\n    }\r\n}\r\n/* ===== CONTACT =====*/\r\n.contact{\r\n    &__container{\r\n        row-gap: 2rem;\r\n    }\r\n    &__subtitle{\r\n        font-size: var(--normal-font-size);\r\n        color: var(--first-color);\r\n    }\r\n    &__text{\r\n        display: inline-block;\r\n        margin-bottom: var(--mb-2);\r\n    }\r\n    &__inputs{\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        column-gap: 1rem;\r\n    }\r\n    &__input{\r\n        width: 100%;\r\n        padding: .8rem;\r\n        outline: none;\r\n        border: 1.5px solid var(--dark-color);\r\n        font-size: var(--normal-font-size);\r\n        margin-bottom: var(--mb-4);\r\n        border-radius: .5rem;\r\n    }\r\n    &__button{\r\n        display: block;\r\n        background-color: var(--first-color);\r\n        color: var(--white-color);\r\n        padding: .75rem 2.5rem;\r\n        margin-left: auto;\r\n        border-radius: .5rem; \r\n        border: none;\r\n        outline: none;\r\n        font-size: var(--normal-font-size);\r\n        cursor: pointer;\r\n    }\r\n}\r\n/* ===== FOOTER=====*/\r\n.footer{\r\n    background-color: var(--dark-color);\r\n\r\n    &__container{\r\n        row-gap: 2rem;\r\n    }\r\n    &__title{\r\n        font-size: var(--normal-font-size);\r\n        color: var(--white-color);\r\n        margin-bottom: var(--mb-2);\r\n    }\r\n    &__link{\r\n        padding: .25rem 0;\r\n\r\n        &:hover{\r\n            color: var(--first-color);\r\n        }\r\n    }\r\n    &__social{\r\n        font-size: 1.4rem;\r\n        margin-right: var(--mb-1);\r\n\r\n        &:hover{\r\n            color: var(--first-color);\r\n        }\r\n    }\r\n}\r\n\r\n/* ===== MEDIA QUERIES=====*/\r\n/* For small devices */\r\n@media screen and (max-width: 320px) {\r\n    .home__img{\r\n        width: 230px;\r\n    }\r\n}\r\n\r\n@media screen and(min-width: 768px){\r\n    body{\r\n        margin: 0;\r\n    }\r\n    .section{\r\n        padding-top: 4rem;\r\n\r\n        &-title{\r\n            margin-bottom: 3rem;\r\n            \r\n            &::after{\r\n                width: 64px;\r\n                top: 3rem;\r\n            }\r\n        }\r\n    }\r\n\r\n    .nav{\r\n        height: calc(var(--header-height) + 1rem);\r\n\r\n        &__list{\r\n            display: flex;\r\n        }\r\n        &__item{\r\n            margin-left: var(--mb-4);\r\n            margin-bottom: 0;\r\n        }\r\n        &__toggle{\r\n            display: none;\r\n        }\r\n        &__link{\r\n            color: var(--white-color);\r\n\r\n            &:hover{\r\n                color: var(--white-color);\r\n            }\r\n        }\r\n    }\r\n    .active::after{\r\n        background-color: var(--white-color);\r\n    }\r\n\r\n    .home{\r\n        &__container{\r\n            height: 100vh;\r\n            grid-template-rows: 1.7fr 1fr;\r\n            row-gap: 0;\r\n        }\r\n        &__img{\r\n            width: 524px;\r\n            right: 10%;\r\n        }\r\n    }\r\n\r\n    .about{\r\n        &__container{\r\n            grid-template-columns: repeat(2, 1fr);\r\n            align-items: center;\r\n            text-align: initial;\r\n            padding: 4rem 0;\r\n        }\r\n        &__img{\r\n            width: 200px;\r\n            height: 200px;\r\n    \r\n            & img{\r\n                width: 165px;\r\n            }\r\n        }\r\n    }\r\n    .skills{\r\n        &__container{\r\n            grid-template-columns: repeat(2,1fr);\r\n            align-items: center;\r\n        }\r\n    }\r\n\r\n    .portfolio{\r\n        &__container{\r\n            grid-template-columns: repeat(3,1fr);\r\n            grid-template-rows: repeat(2, 1fr);\r\n            column-gap: 2rem;\r\n        }\r\n    }\r\n\r\n    .contact{\r\n        &__container{\r\n            grid-template-columns: repeat(2,1fr);\r\n            justify-items: center;\r\n        }\r\n        &__form{\r\n            width: 380px;\r\n        }\r\n    }\r\n    .footer{\r\n        &__container{\r\n            grid-template-columns: repeat(3,1fr);\r\n            justify-items: center;\r\n        }\r\n    }\r\n}\r\n\r\n@media screen and(min-width: 1024px){\r\n    .bd-grid{\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n}\r\n\r\n/* For tall screens on mobiles y desktop*/\r\n@media screen and (min-height: 721px) {\r\n    .home{\r\n        &__container{\r\n            height: 640px;\r\n        }\r\n        &__img{\r\n            width: 500px;\r\n            right: 24%;\r\n        }\r\n    }\r\n}\r\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\r\n    <html lang=\"en\">\r\n    <head>\r\n        <meta charset=\"UTF-8\">\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n        <!-- ===== CSS ===== -->\r\n        <link rel=\"stylesheet\" href=\"assets/css/styles.css\">\r\n\r\n        <!-- ===== BOX ICONS ===== -->\r\n        <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>\r\n\r\n        <title>Portfolio responsive complete</title>\r\n    </head>\r\n    <body>\r\n        <!--===== HEADER =====-->\r\n        <header class=\"l-header\">\r\n            <nav class=\"nav bd-grid\">\r\n                <div>\r\n                    <a href=\"#\" class=\"nav__logo\">Jhon Doe</a>\r\n                </div>\r\n\r\n                <div class=\"nav__menu\" id=\"nav-menu\">\r\n                    <ul class=\"nav__list\">\r\n                        <li class=\"nav__item\"><a href=\"#home\" class=\"nav__link active\">Home</a></li>\r\n                        <li class=\"nav__item\"><a href=\"#about\" class=\"nav__link\">About</a></li>\r\n                        <li class=\"nav__item\"><a href=\"#skills\" class=\"nav__link\">Skills</a></li>\r\n                        <li class=\"nav__item\"><a href=\"#portfolio\" class=\"nav__link\">Portfolio</a></li>\r\n                        <li class=\"nav__item\"><a href=\"#contact\" class=\"nav__link\">Contact</a></li>\r\n                    </ul>\r\n                </div>\r\n\r\n                <div class=\"nav__toggle\" id=\"nav-toggle\">\r\n                    <i class='bx bx-menu'></i>\r\n                </div>\r\n            </nav>\r\n        </header>\r\n\r\n        <main class=\"l-main\">\r\n            <!--===== HOME =====-->\r\n            <section class=\"home\" id=\"home\">\r\n                <div class=\"home__container bd-grid\">\r\n                    <h1 class=\"home__title\"><span>HE</span><br>LLO.</h1>\r\n\r\n                    <div class=\"home__scroll\">\r\n                        <a href=\"#about\" class=\"home__scroll-link\"><i class='bx bx-up-arrow-alt' ></i>Scroll down</a>\r\n                    </div>\r\n\r\n                    <img src=\"assets/img/perfil.png\" alt=\"\" class=\"home__img\">\r\n                </div>\r\n            </section>\r\n            \r\n            <!--===== ABOUT =====-->\r\n            <section class=\"about section\" id=\"about\">\r\n                <h2 class=\"section-title\">About</h2>\r\n\r\n                <div class=\"about__container bd-grid\">\r\n                    <div class=\"about__img\">\r\n                        <img src=\"assets/img/perfil.png\" alt=\"\">\r\n                    </div>\r\n\r\n                    <div>\r\n                        <h2 class=\"about__subtitle\">I'am Jhon Doe</h2>\r\n                        <span class=\"about__profession\">Web designer</span>\r\n                        <p class=\"about__text\">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci consectetur, architecto quas fugiat, iste inventore facere repellendus delectus id, vitae blanditiis.</p>\r\n\r\n                        <div class=\"about__social\">\r\n                            <a href=\"#\" class=\"about__social-icon\"><i class='bx bxl-linkedin' ></i></a>\r\n                            <a href=\"#\" class=\"about__social-icon\"><i class='bx bxl-github' ></i></a>\r\n                            <a href=\"#\" class=\"about__social-icon\"><i class='bx bxl-dribbble' ></i></a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n\r\n            <!--===== SKILLS =====-->\r\n            <section class=\"skills section\" id=\"skills\">\r\n                <h2 class=\"section-title\">Skills</h2>\r\n\r\n                <div class=\"skills__container bd-grid\">\r\n                    <div class=\"skills__box\">\r\n                        <h3 class=\"skills__subtitle\">Development</h3>\r\n                        <span class=\"skills__name\">Html</span>\r\n                        <span class=\"skills__name\">Css</span>\r\n                        <span class=\"skills__name\">Javascript</span>\r\n                        <span class=\"skills__name\">Scss</span>\r\n                        <span class=\"skills__name\">React</span>\r\n                        <span class=\"skills__name\">Vue</span>\r\n                        \r\n                        <h3 class=\"skills__subtitle\">Design</h3>\r\n                        <span class=\"skills__name\">Figma</span>\r\n                        <span class=\"skills__name\">Adobe XD</span>\r\n                        <span class=\"skills__name\">Photoshop</span>\r\n                    </div>\r\n\r\n                    <div class=\"skills__img\">\r\n                        <img src=\"assets/img/skill.jpg\" alt=\"\">\r\n                    </div>\r\n                </div>\r\n            </section>\r\n\r\n            <!--===== PORTFOLIO =====-->\r\n            <section class=\"portfolio section\" id=\"portfolio\">\r\n                <h2 class=\"section-title\">Portfolio</h2>\r\n\r\n                <div class=\"portfolio__container bd-grid\">\r\n                    <div class=\"portfolio__img\">\r\n                        <img src=\"assets/img/work1.jpg\" alt=\"\">\r\n\r\n                        <div class=\"portfolio__link\">\r\n                            <a href=\"#\" class=\"portfolio__link-name\">View details</a>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"portfolio__img\">\r\n                        <img src=\"assets/img/work2.jpg\" alt=\"\">\r\n\r\n                        <div class=\"portfolio__link\">\r\n                            <a href=\"#\" class=\"portfolio__link-name\">View details</a>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"portfolio__img\">\r\n                        <img src=\"assets/img/work3.jpg\" alt=\"\">\r\n\r\n                        <div class=\"portfolio__link\">\r\n                            <a href=\"#\" class=\"portfolio__link-name\">View details</a>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"portfolio__img\">\r\n                        <img src=\"assets/img/work4.jpg\" alt=\"\">\r\n\r\n                        <div class=\"portfolio__link\">\r\n                            <a href=\"#\" class=\"portfolio__link-name\">View details</a>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"portfolio__img\">\r\n                        <img src=\"assets/img/work5.jpg\" alt=\"\">\r\n\r\n                        <div class=\"portfolio__link\">\r\n                            <a href=\"#\" class=\"portfolio__link-name\">View details</a>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"portfolio__img\">\r\n                        <img src=\"assets/img/work6.jpg\" alt=\"\">\r\n\r\n                        <div class=\"portfolio__link\">\r\n                            <a href=\"#\" class=\"portfolio__link-name\">View details</a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </section>\r\n\r\n            <!--===== CONTACT =====-->\r\n            <section class=\"contact section\" id=\"contact\">\r\n                <h2 class=\"section-title\">Contact</h2>\r\n\r\n                <div class=\"contact__container bd-grid\">\r\n                    <div class=\"contact__info\">\r\n                        <h3 class=\"contact__subtitle\">EMAIL</h3>\r\n                        <span class=\"contact__text\">info.mail.com</span>\r\n\r\n                        <h3 class=\"contact__subtitle\">PHONE</h3>\r\n                        <span class=\"contact__text\">+20 999-999</span>\r\n\r\n                        <h3 class=\"contact__subtitle\">ADRESS</h3>\r\n                        <span class=\"contact__text\">My contry</span>\r\n                    </div>\r\n\r\n                    <form action=\"\" class=\"contact__form\">\r\n                        <div class=\"contact__inputs\">\r\n                            <input type=\"text\" placeholder=\"Name\" class=\"contact__input\">\r\n                            <input type=\"mail\" placeholder=\"Email\" class=\"contact__input\">\r\n                        </div>\r\n\r\n                        <textarea name=\"\" id=\"\" cols=\"0\" rows=\"10\" class=\"contact__input\"></textarea>\r\n\r\n                        <input type=\"submit\" value=\"Enviar\" class=\"contact__button\">\r\n                    </form>\r\n                </div>\r\n            </section>\r\n        </main>\r\n\r\n        <!--===== FOOTER =====-->\r\n        <footer class=\"footer section\">\r\n            <div class=\"footer__container bd-grid\">\r\n                <div class=\"footer__data\">\r\n                    <h2 class=\"footer__title\">JHON DOE</h2>\r\n                    <p class=\"footer__text\">I'm Jhon Doe and this is my personal website</p>\r\n                </div>\r\n\r\n                <div class=\"footer__data\">\r\n                    <h2 class=\"footer__title\">EXPLORE</h2>\r\n                    <ul>\r\n                        <li><a href=\"#home\" class=\"footer__link\">Home</a></li>\r\n                        <li><a href=\"#about\" class=\"footer__link\">About</a></li>\r\n                        <li><a href=\"#skills\" class=\"footer__link\">Skills</a></li>\r\n                        <li><a href=\"#portfolio\" class=\"footer__link\">Portfolio</a></li>\r\n                        <li><a href=\"#Contact\" class=\"footer__link\">Contact</a></li>\r\n                    </ul>\r\n                </div>\r\n                \r\n                <div class=\"footer__data\">\r\n                    <h2 class=\"footer__title\">FOLLOW</h2>\r\n                    <a href=\"#\" class=\"footer__social\"><i class='bx bxl-facebook' ></i></a>\r\n                    <a href=\"#\" class=\"footer__social\"><i class='bx bxl-instagram' ></i></a>\r\n                    <a href=\"#\" class=\"footer__social\"><i class='bx bxl-twitter' ></i></a>\r\n                </div>\r\n\r\n\r\n            </div>\r\n        </footer>\r\n\r\n        <!--===== SCROLL REVEAL =====-->\r\n        <script src=\"https://unpkg.com/scrollreveal\"></script>\r\n\r\n        <!--===== MAIN JS =====-->\r\n        <script src=\"assets/js/main.js\"></script>\r\n    </body>\r\n</html>"
  }
]