Portfolio dashboard - Githubissues

TrdHuy commented 2 months ago

portfolio_dashboard.html

<head>
    <link rel="stylesheet" href="./assets/css/base.css">
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="./assets/css/portfolio.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>

<body style="background: var(--eerie-black-2);">

    <div id="portfolio-overview-area" class="portfolio-overview-area active">
        <ul class="filter-list">

            <li class="filter-item">
                <button class="active" data-filter-btn>All</button>
            </li>

            <li class="filter-item">
                <button data-filter-btn>Web design</button>
            </li>

            <li class="filter-item">
                <button data-filter-btn>Applications</button>
            </li>

            <li class="filter-item">
                <button data-filter-btn>Web development</button>
            </li>

        </ul>

        <div class="filter-select-box">

            <button class="filter-select" data-select>

                <div class="select-value" data-selecct-value>Select category</div>

                <div class="select-icon">
                    <ion-icon name="chevron-down"></ion-icon>
                </div>

            </button>

            <ul class="select-list">

                <li class="select-item">
                    <button data-select-item>All</button>
                </li>

                <li class="select-item">
                    <button data-select-item>Web design</button>
                </li>

                <li class="select-item">
                    <button data-select-item>Applications</button>
                </li>

                <li class="select-item">
                    <button data-select-item>Web development</button>
                </li>

            </ul>

        </div>

        <ul id="portfolio-list" class="project-list">
            <li class="project-item  active" data-filter-item data-category="web development">
                <figure class="project-img">
                    <div class="project-item-icon-box">
                        <ion-icon name="eye-outline"></ion-icon>
                    </div>
                    <img src="./assets/images/project-1.jpg" alt="finance" loading="lazy">
                </figure>

                <h3 class="project-title">Finance</h3>

                <p class="project-category">Web development</p>
            </li>
        </ul>
    </div>

    <div id="portfolio-page-detai" class="portfolio-page-detai">
        <div class="flex-horizontal-layout" style="align-items: center;">
            <button id="portfolio-close-btn" class="icon-btn">
                <ion-icon name="chevron-back"></ion-icon>
            </button>
            <div>
                <h3 id="portfolio-page-title" class="h3">Portfolio</h3>
                <!-- <p class="underline-for-text"></p> -->
            </div>
        </div>

        <iframe id="portfolio-page-iframe-container" allowTransparency="true" scrolling="no" frameborder="0"
            allowfullscreen="true" style="width: 100%; height: auto; margin-top: 30px;"></iframe>
    </div>
</body>

<footer>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script src="./assets/js/contract.js"></script>
    <script src="./assets/js/iframeSizeChangeCallback.js"></script>
    <script>

        const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
        // custom select variables
        const select = document.querySelector("[data-select]");
        const selectItems = document.querySelectorAll("[data-select-item]");
        const selectValue = document.querySelector("[data-selecct-value]");
        const filterBtn = document.querySelectorAll("[data-filter-btn]");

        select.addEventListener("click", function () { elementToggleFunc(this); });

        // add event in all select items
        for (let i = 0; i < selectItems.length; i++) {
            selectItems[i].addEventListener("click", function () {

                let selectedValue = this.innerText.toLowerCase();
                selectValue.innerText = this.innerText;
                elementToggleFunc(select);
                filterFunc(selectedValue);

            });
        }

        // filter variables
        const filterItems = document.querySelectorAll("[data-filter-item]");

        const filterFunc = function (selectedValue) {

            for (let i = 0; i < filterItems.length; i++) {

                if (selectedValue === "all") {
                    filterItems[i].classList.add("active");
                } else if (selectedValue === filterItems[i].dataset.category) {
                    filterItems[i].classList.add("active");
                } else {
                    filterItems[i].classList.remove("active");
                }

            }

        }

        // add event in all filter button items for large screen
        let lastClickedBtn = filterBtn[0];

        for (let i = 0; i < filterBtn.length; i++) {

            filterBtn[i].addEventListener("click", function () {

                let selectedValue = this.innerText.toLowerCase();
                selectValue.innerText = this.innerText;
                filterFunc(selectedValue);

                lastClickedBtn.classList.remove("active");
                this.classList.add("active");
                lastClickedBtn = this;

            });

        }

        //#################################################
        const TRD_CONSTRACT = window.TRD_CONSTRACT;

        const portfolioOverviewArea = document.getElementById('portfolio-overview-area');
        const projectList = document.getElementById('portfolio-list');
        const portfolioPageTitle = document.getElementById('portfolio-page-title');
        const portfolioCloseBtn = document.getElementById('portfolio-close-btn');
        const portfolioPageDetail = document.getElementById('portfolio-page-detai');
        const portfolioList = document.getElementById('portfolio-list');
        const portfolioIframeContainer = document.getElementById('portfolio-page-iframe-container');

        window.addEventListener('message', function (event) {
            const data = event.data;
            switch (data.event) {
                case TRD_CONSTRACT.EVENT.IFRAME_CONTENT_SIZE_CHANGED:
                    if (data.frameId) {
                        if (event.data.height) {
                            portfolioIframeContainer.style.height = event.data.height + 'px';
                        }
                    }
                    break;
                default:
                    console.log('Unknown event:', data.event);
            }
        });

        portfolioCloseBtn.addEventListener('click', function () {
            portfolioOverviewArea.classList.add('active')
            portfolioPageDetail.classList.remove('active')
            portfolioIframeContainer.setAttribute('src', '')
        })

        async function fetchProjects() {
            try {
                const response = await fetch('data/portfolio/portfolios.json');
                const projects = await response.json();
                return projects;
            } catch (error) {
                console.error('Error fetching projects:', error);
            }
        }

        function projectItemClickCallback(project) {
            portfolioOverviewArea.classList.remove('active')
            portfolioPageDetail.classList.add('active')
            portfolioPageTitle.innerText = project.page_name
            portfolioIframeContainer.setAttribute('src', project.page_url + '?iframeId=portfolioIframeContainer')
        }

        // Hàm tạo các phần tử HTML từ dữ liệu JSON
        function createProjectList(projects) {
            projects.forEach(project => {
                const listItem = document.createElement('li');
                listItem.className = 'project-item active';
                listItem.setAttribute('data-filter-item', '');
                listItem.setAttribute('data-category', project.page_category);

                const figure = document.createElement('figure');
                figure.className = 'project-img';

                const iconBox = document.createElement('div');
                iconBox.className = 'project-item-icon-box';
                const icon = document.createElement('ion-icon');
                icon.setAttribute('name', 'eye-outline');
                iconBox.appendChild(icon);
                figure.appendChild(iconBox);

                const img = document.createElement('img');
                img.src = project.page_avatar;
                img.alt = project.page_name;
                img.loading = 'lazy';
                figure.appendChild(img);

                const title = document.createElement('h3');
                title.className = 'project-title';
                title.textContent = project.page_name;

                const category = document.createElement('p');
                category.className = 'project-category';
                category.textContent = project.page_category;

                listItem.appendChild(figure);
                listItem.appendChild(title);
                listItem.appendChild(category);
                listItem.addEventListener('click', function () {
                    projectItemClickCallback(project)
                })
                projectList.appendChild(listItem);
            });
        }

        // Khởi tạo dữ liệu
        async function init() {
            const projects = await fetchProjects();
            if (projects) {
                createProjectList(projects);
            }
        }

        // Gọi hàm khởi tạo

        window.addEventListener('load', function () {
            // init();
        })

        init()
    </script>
</footer>

TrdHuy commented 2 months ago

portfolios.json

[
     {
          "page_id": "page_portfolio_autoblocker",
          "page_name": "Auto blocker",
          "page_avatar": "./assets/images/portofilo/autoblocker/ab.jpg",
          "page_url": "portfolio_autoblocker.html",
          "page_category": "Android application"
     }
]

TrdHuy commented 2 months ago

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H U Y</title>

  <!--
    - favicon
  -->
  <link rel="shortcut icon" href="./assets/images/my-avatar.png" type="image/x-icon">

  <!--
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!--
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>

<body>

  <!--
    - #MAIN
  -->
  <main>

    <!--
      - #SIDEBAR
    -->

    <div class="modal-container" form-input-container>
      <div class="overlay" form-input-overlay></div>
      <section class="form-input-modal">
        <button class="modal-close-btn" form-input-close-btn>
          <ion-icon name="close-outline"></ion-icon>
        </button>
        <div class="modal-content" form-input-modal-content>

        </div>
        <iframe id="formInputFrame" allowTransparency="true" scrolling="no" frameborder="0"></iframe>
      </section>
    </div>

    <aside class="sidebar" data-sidebar>

      <div class="sidebar-info">

        <figure class="avatar-box">
          <img src="./assets/images/ava.jpg" alt="H U Y">
        </figure>

        <div class="info-content">
          <h1 class="name" title="H U Y">H U Y</h1>

          <p class="title">Fullstack Software Engineer</p>
        </div>

        <button class="info_more-btn" data-sidebar-btn>
          <span>Show Contacts</span>

          <ion-icon name="chevron-down"></ion-icon>
        </button>

      </div>

      <div class="sidebar-info_more">

        <div class="separator"></div>

        <ul class="contacts-list">

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="mail-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Email</p>

              <a href="mailto:trdtranduchuy@gmail.com" class="contact-link">trdtranduchuy@gmail.com</a>
            </div>

          </li>

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="phone-portrait-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Phone</p>

              <a href="tel:+84383854090" class="contact-link">+84 (38) 3854-090</a>
            </div>

          </li>

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="calendar-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Birthday</p>
              <time datetime="1996-09-10">Oct 9, 1996</time>
            </div>

          </li>

          <li class="contact-item">

            <div class="icon-box">
              <ion-icon name="location-outline"></ion-icon>
            </div>

            <div class="contact-info">
              <p class="contact-title">Location</p>

              <address>Long Bien, Ha Noi, Viet Nam</address>
            </div>

          </li>

        </ul>

        <div class="separator"></div>

        <ul class="social-list">

          <li class="social-item">
            <a href="https://www.facebook.com/trdtranduchuy" class="social-link">
              <ion-icon name="logo-facebook"></ion-icon>
            </a>
          </li>

          <li class="social-item">
            <a href="https://github.com/TrdHuy" class="social-link">
              <ion-icon name="logo-github"></ion-icon>
            </a>
          </li>
        </ul>

      </div>

    </aside>

    <!--
      - #main-content
    -->

    <div class="main-content">

      <!--
        - #NAVBAR
      -->

      <nav class="navbar">

        <ul class="navbar-list">

          <li class="navbar-item">
            <button class="navbar-link  active" data-nav-link>About</button>
          </li>

          <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Resume</button>
          </li>

          <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Portfolio</button>
          </li>

          <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Developers</button>
          </li>

          <li class="navbar-item">
            <button class="navbar-link" data-nav-link>Contact</button>
          </li>

        </ul>

      </nav>

      <!--
        - #ABOUT
      -->

      <article class="about  active" data-page="about">

        <header>
          <h2 class="h2 article-title">About me</h2>
        </header>

        <section class="about-text">
          <p>👋 Hi. I am Huy. I am a seasoned fullstack engineer with a passion for software development 🧑‍💻. I
            specialize in server applications, mobile applications, and desktop applications. With years of experience,
            I've worked on a variety of projects that span across multiple platforms and technologies.</p>

          <p>🚀 I have had the privilege of working at Samsung, where I spent several years researching and developing
            innovative software solutions. My time at Samsung has honed my skills in creating robust and efficient
            software systems, and I bring that expertise to every project I work on.</p>

          <p>📈 Throughout my career, I have managed and led the development of multiple software projects, ensuring
            they are delivered on time and meet high-quality standards. As a software architect, I have designed and
            implemented scalable and maintainable software architectures that drive business success.</p>

          <p>⚡️ I am obsessed with creating robust and efficient software solutions. I enjoy solving complex problems
            and building scalable systems that enhance user experiences.</p>

          <p>🎓 Additionally, I serve as an internal lecturer at Samsung, where I teach Android application programming.
            Through this role, I have the opportunity to share my knowledge and experience with colleagues, helping to
            cultivate the next generation of skilled developers within the company.</p>
        </section>

        <!--
          - service
        -->

        <section class="service">

          <h3 class="h3 service-title">What i'm doing</h3>

          <ul class="service-list">
            <li class="service-item" data-service-item>
              <div class="service-icon-box">
                <img src="./assets/images/blender.png" alt="design icon" width="40" data-service-avatar>
              </div>
              <div class="service-content-box">
                <h4 class="h4 service-item-title" data-service-title>Application design</h4>
                <div class="service-item-text" data-service-text>
                  <p>
                    The most modern and high-quality design made at a professional level.
                  </p>
                </div>
              </div>
            </li>

            <li class="service-item" data-service-item>
              <div class="service-icon-box">
                <img src="./assets/images/net-core.png" alt="Application development icon" width="40"
                  data-service-avatar>
              </div>
              <div class="service-content-box">
                <h4 class="h4 service-item-title" data-service-title>Desktop Apps</h4>
                <div class="service-item-text" data-service-text>
                  <p>
                    Developed highly scalable and efficient server-side applications using .NET framework.
                  </p>
                </div>
              </div>
            </li>

            <li class="service-item" data-service-item>
              <div class="service-icon-box">
                <img src="./assets/images/gh-action.png" alt="Application development icon" width="40"
                  data-service-avatar>
              </div>
              <div class="service-content-box">
                <h4 class="h4 service-item-title" data-service-title>DevOps</h4>
                <div class="service-item-text" data-service-text>
                  <p>
                    Implemented CI/CD pipelines and automated deployment processes using Github Action.
                  </p>
                </div>
              </div>
            </li>

            <li class="service-item" data-service-item>
              <div class="service-icon-box">
                <img src="./assets/images/xamarin.png" alt="mobile app icon" width="40" data-service-avatar>
              </div>
              <div class="service-content-box">
                <h4 class="h4 service-item-title" data-service-title>Mobile apps</h4>
                <div class="service-item-text" data-service-text>
                  <p>
                    Our mobile application development service excels in creating high-quality, cross-platform
                    applications for both iOS and Android using the Xamarin framework.
                  </p>
                  <p>
                    Ensuring seamless performance and
                    a consistent user experience across all devices.
                  </p>
                </div>
              </div>
            </li>

            <li class="service-item" data-service-item>
              <div class="service-icon-box">
                <img src="./assets/images/android.png" alt="mobile app icon" width="40" data-service-avatar>
              </div>
              <div class="service-content-box">
                <h4 class="h4 service-item-title" data-service-title>Android apps</h4>
                <div class="service-item-text" data-service-text>
                  <p>
                    Our professional mobile application development service specializes in creating robust and
                    innovative applications using the Android framework.
                  </p>
                  <p>
                    Ensuring high performance and seamless user experiences.
                  </p>
                </div>
              </div>
            </li>

            <li class="service-item" data-service-item>
              <div class="service-icon-box">
                <img src="./assets/images/unity.png" alt="unity icon" width="40" data-service-avatar>
              </div>
              <div class="service-content-box">
                <h4 class="h4 service-item-title" data-service-title>Game Development</h4>
                <div class="service-item-text" data-service-text>
                  <p>
                    Developed engaging and interactive games using the Unity platform.
                  </p>
                </div>
              </div>
            </li>

            <li class="service-item" data-service-item>
              <div class="service-icon-box">
                <img src="./assets/images/jira.png" alt="mobile app icon" width="40" data-service-avatar>
              </div>
              <div class="service-content-box">
                <h4 class="h4 service-item-title" data-service-title>Project Management</h4>
                <div class="service-item-text" data-service-text>
                  <p>
                    Managed the development of multiple software projects, ensuring timely delivery and adherence to
                    quality standards.
                    Designed and implemented scalable and maintainable software architectures.
                  </p>
                </div>
              </div>
            </li>
          </ul>

        </section>

        <!--
          - testimonials
        -->

        <section class="testimonials">

          <h3 class="h3 testimonials-title">My team</h3>

          <ul class="testimonials-list has-scrollbar">
            <li class="testimonials-item">
              <div class="content-card" data-testimonials-item>

                <figure class="testimonials-avatar-box">
                  <img src="./assets/images/hieu-nguyen.jpg" alt="Henry william" width="60" data-testimonials-avatar>
                </figure>

                <h4 class="h4 testimonials-item-title" data-testimonials-title>Nguyễn Trung Hiếu</h4>

                <div class="testimonials-text" data-testimonials-text>
                  <p>
                    He is a talented programmer with 2 years of experience in web and desktop application development.
                    Skilled in both front-end and back-end technologies, he has successfully created dynamic websites
                    and efficient desktop applications.
                  </p>
                  <p>
                    His dedication to writing clean, maintainable code ensures that
                    his projects are both user-friendly and reliable. Always eager to learn, he continually updates his
                    knowledge to stay current with the latest industry trends and technologies.
                  </p>
                </div>

              </div>
            </li>
            <li class="testimonials-item">
              <div class="content-card" data-testimonials-item>

                <figure class="testimonials-avatar-box">
                  <img src="./assets/images/mai-tam.jpg" alt="Mai Tam" width="60" data-testimonials-avatar>
                </figure>

                <h4 class="h4 testimonials-item-title" data-testimonials-title>Mai Tâm</h4>

                <div class="testimonials-text" data-testimonials-text>
                  <p>
                    She is a professional tester with 4 years of experience in the field of global application testing.
                    With extensive knowledge and exceptional skills, she is proficient in running testing tools and
                    designing them effectively.
                  </p>
                  <p>
                    She has written numerous high-quality test cases, ensuring comprehensive
                    testing of applications that meet the highest standards. Her passion and progressive mindset
                    contribute positively to the success of every testing project she is involved in.
                  </p>
                </div>

              </div>
            </li>
            <li class="testimonials-item">
              <div class="content-card" data-testimonials-item>

                <figure class="testimonials-avatar-box">
                  <img src="./assets/images/duy-nguyen.jpg" alt="Daniel lewis" width="60" data-testimonials-avatar>
                </figure>

                <h4 class="h4 testimonials-item-title" data-testimonials-title>Nguyễn Quốc Duy</h4>

                <div class="testimonials-text" data-testimonials-text>
                  <p>
                    He is a skilled programmer with 4 years of experience in developing mobile applications and web
                    solutions. With a deep understanding of both front-end and back-end technologies, he has
                    successfully
                    built and deployed numerous high-quality apps and websites.
                  </p>
                  <p>
                    His expertise in creating user-friendly interfaces and robust back-end systems ensures that every
                    project he works on is both functional and efficient. Passionate about staying updated with the
                    latest
                    industry trends, he continually enhances his skills to deliver innovative and reliable solutions.
                  </p>
                </div>

              </div>
            </li>
          </ul>

        </section>

        <!--
          - testimonials modal
        -->

        <div class="modal-container" data-modal-container>

          <div class="overlay" data-overlay></div>

          <section class="testimonials-modal">

            <button class="modal-close-btn" data-modal-close-btn>
              <ion-icon name="close-outline"></ion-icon>
            </button>

            <div class="modal-img-wrapper">
              <figure class="modal-avatar-box">
                <img src="./assets/images/avatar-1.png" alt="Daniel lewis" data-modal-img>
              </figure>

              <img src="./assets/images/icon-quote.svg" alt="quote icon">
            </div>

            <div class="modal-content">

              <h4 class="h3 modal-title" data-modal-title>Nguyễn Quốc Duy</h4>

              <time datetime="2021-06-14">14 June, 2021</time>

              <div data-modal-text>
                <p>
                  He is a skilled programmer with 4 years of experience in developing mobile applications and web
                  solutions. With a deep understanding of both front-end and back-end technologies, he has successfully
                  built and deployed numerous high-quality apps and websites.
                </p>
                <p>
                  His expertise in creating user-friendly interfaces and robust back-end systems ensures that every
                  project he works on is both functional and efficient. Passionate about staying updated with the latest
                  industry trends, he continually enhances his skills to deliver innovative and reliable solutions.
                </p>
              </div>

            </div>

          </section>

        </div>

        <!--
          - service modal
        -->

        <div class="modal-container" data-service-modal-container>

          <div class="overlay" data-service-overlay></div>

          <section class="testimonials-modal">

            <button class="modal-close-btn" data-service-modal-close-btn>
              <ion-icon name="close-outline"></ion-icon>
            </button>

            <div class="modal-img-wrapper">
              <figure>
                <img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-service-modal-img>
              </figure>
            </div>

            <div class="modal-content">

              <h4 class="h3 modal-title" data-service-modal-title>Nguyễn Quốc Duy</h4>

              <div data-service-modal-text>
                <p>
                  He is a skilled programmer with 4 years of experience in developing mobile applications and web
                  solutions. With a deep understanding of both front-end and back-end technologies, he has successfully
                  built and deployed numerous high-quality apps and websites.
                </p>
                <p>
                  His expertise in creating user-friendly interfaces and robust back-end systems ensures that every
                  project he works on is both functional and efficient. Passionate about staying updated with the latest
                  industry trends, he continually enhances his skills to deliver innovative and reliable solutions.
                </p>
              </div>

            </div>

          </section>

        </div>

        <!--
          - clients
        -->

        <!-- <section class="clients">

          <h3 class="h3 clients-title">Clients</h3>

          <ul class="clients-list has-scrollbar">

            <li class="clients-item">
              <a href="#">
                <img src="./assets/images/logo-1-color.png" alt="client logo">
              </a>
            </li>

          </ul>

        </section> -->

      </article>

      <!--
        - #RESUME
      -->

      <article class="resume" data-page="resume">

        <header>
          <h2 class="h2 article-title">Resume</h2>
        </header>

        <section class="timeline">

          <div class="title-wrapper">
            <div class="icon-box">
              <ion-icon name="book-outline"></ion-icon>
            </div>

            <h3 class="h3">Education</h3>
          </div>

          <ol class="timeline-list">

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Posts and Telecommunications Institute of Technology</h4>

              <span>2014 — 2018</span>

              <p class="timeline-text">
                During my time at the academy, I developed a strong foundation in telecommunications and information
                technology. I was actively involved in various projects and research activities, gaining hands-on
                experience in software development and network engineering. I also participated in several competitions
                and workshops, enhancing my problem-solving skills and technical knowledge.
              </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">External Coding Courses</h4>

              <span>2013 — 2015</span>

              <p class="timeline-text">
                During this period, I enrolled in several coding courses at various training centers. These courses
                covered a range of topics including web development, data structures, algorithms, and mobile app
                development. The hands-on experience and practical knowledge gained from these courses significantly
                complemented my academic studies and fueled my passion for programming.
              </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Luong The Vinh High School for Gifted Students in Mathematics and
                Informatics</h4>

              <span>2011 — 2013</span>

              <p class="timeline-text">
                In this specialized program, I focused on advanced mathematics and computer science. This rigorous
                curriculum helped me develop critical thinking and analytical skills. I was a member of the school's
                math club and competed in several national math and coding competitions, where I consistently achieved
                top rankings. This period laid the groundwork for my passion for technology and software development.
              </p>

            </li>

          </ol>

        </section>

        <section class="timeline">

          <div class="title-wrapper">
            <div class="icon-box">
              <ion-icon name="book-outline"></ion-icon>
            </div>

            <h3 class="h3">Experience</h3>
          </div>

          <ol class="timeline-list">

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Senior Mobile Application Software Development Engineer at Samsung</h4>

              <span>2022 — Present</span>

              <p class="timeline-text">
                In my current role at Samsung, I am a software development engineer specializing in mobile applications
                for the Android platform. My primary focus is on designing and developing security solutions for
                Samsung's mobile devices. I collaborate closely with cross-functional teams to ensure the security
                features are robust, user-friendly, and aligned with the latest industry standards. My responsibilities
                include coding, testing, and implementing innovative security measures to protect user data and enhance
                the overall security of Samsung's mobile ecosystem.
              </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Team Leader and Founder of Dezone99</h4>

              <span>2021 — Present</span>

              <p class="timeline-text">
                Since 2021, I have founded and led Dezone99, an external development team specializing in full-stack
                software development for desktop, mobile, and web applications. In this role, I oversee the development
                process, ensuring that projects meet high standards of quality and functionality. My team excels in UI
                design, creating intuitive and visually appealing interfaces for our software solutions. As the team
                leader, I am responsible for project management, client communication, and driving the overall success
                of our development initiatives.
              </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">User Interface Software Engineer at Samsung</h4>

              <span>2020 — 2022</span>

              <p class="timeline-text">
                From 2020 to 2022, I worked on developing software and solutions related to user interfaces for mobile
                devices at Samsung. My projects included enhancing the user experience for features such as the
                keyboard, DeX mode, and S Pen functionality. I focused on creating intuitive and responsive interfaces,
                ensuring seamless interaction between the user and the device. My role involved close collaboration with
                design and development teams to implement user-centric features that meet high standards of usability
                and performance.
              </p>

            </li>

            <li class="timeline-item">

              <h4 class="h4 timeline-item-title">Software Project Manager at Samsung</h4>

              <span>2018 — 2020</span>

              <p class="timeline-text">
                From 2018 to 2020, I was involved in managing software projects at Samsung. My responsibilities included
                building binaries for mobile devices, ensuring that devices were set up correctly according to the
                requirements of customers in different regions globally. I also reviewed commits and collaborated with
                various teams to maintain the quality and consistency of the software. My role required meticulous
                attention to detail and a strong understanding of project management principles to ensure timely and
                accurate delivery of software solutions.
              </p>

            </li>

          </ol>

        </section>

        <section class="skill">

          <h3 class="h3 skills-title">My skills</h3>

          <ul class="skills-list content-card">

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Desktop apps development</h5>
                <data value="80">90%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 90%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Android apps development</h5>
                <data value="70">90%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 90%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Mobile apps development</h5>
                <data value="90">70%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 70%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Web development</h5>
                <data value="50">50%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 50%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Game development</h5>
                <data value="50">60%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 60%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Project Management</h5>
                <data value="50">90%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 90%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Application Design</h5>
                <data value="50">60%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 60%;"></div>
              </div>

            </li>

            <li class="skills-item">

              <div class="title-wrapper">
                <h5 class="h5">Branding</h5>
                <data value="50">40%</data>
              </div>

              <div class="skill-progress-bg">
                <div class="skill-progress-fill" style="width: 40%;"></div>
              </div>

            </li>
          </ul>

        </section>

      </article>

      <!--
        - #PORTFOLIO
      -->

      <article class="portfolio" data-page="portfolio" data-src="portfolio_dashboard.html?iframeId=portfolioDashboard">

        <header>
          <h2 class="h2 article-title">Portfolio</h2>
        </header>

        <section class="projects">
          <iframe class="blog-frame-container" id="portfolioDashboard" allowTransparency="true" scrolling="no"
            loading="lazy" frameborder="0" allowfullscreen="true"></iframe>

          <!-- <ul class="project-list">

            <li class="project-item  active" data-filter-item data-category="web development">
              <a href="#">
                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>
                  <img src="./assets/images/project-1.jpg" alt="finance" loading="lazy">
                </figure>

                <h3 class="project-title">Finance</h3>

                <p class="project-category">Web development</p>
              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="web development">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-2.png" alt="orizon" loading="lazy">
                </figure>

                <h3 class="project-title">Orizon</h3>

                <p class="project-category">Web development</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="web design">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-3.jpg" alt="fundo" loading="lazy">
                </figure>

                <h3 class="project-title">Fundo</h3>

                <p class="project-category">Web design</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="applications">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-4.png" alt="brawlhalla" loading="lazy">
                </figure>

                <h3 class="project-title">Brawlhalla</h3>

                <p class="project-category">Applications</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="web design">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-5.png" alt="dsm." loading="lazy">
                </figure>

                <h3 class="project-title">DSM.</h3>

                <p class="project-category">Web design</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="web design">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-6.png" alt="metaspark" loading="lazy">
                </figure>

                <h3 class="project-title">MetaSpark</h3>

                <p class="project-category">Web design</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="web development">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-7.png" alt="summary" loading="lazy">
                </figure>

                <h3 class="project-title">Summary</h3>

                <p class="project-category">Web development</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="applications">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-8.jpg" alt="task manager" loading="lazy">
                </figure>

                <h3 class="project-title">Task Manager</h3>

                <p class="project-category">Applications</p>

              </a>
            </li>

            <li class="project-item  active" data-filter-item data-category="web development">
              <a href="#">

                <figure class="project-img">
                  <div class="project-item-icon-box">
                    <ion-icon name="eye-outline"></ion-icon>
                  </div>

                  <img src="./assets/images/project-9.png" alt="arrival" loading="lazy">
                </figure>

                <h3 class="project-title">Arrival</h3>

                <p class="project-category">Web development</p>

              </a>
            </li>

          </ul> -->

        </section>

      </article>

      <!--
        - #BLOG
      -->

      <article class="blog" data-page="developers" data-src="developer_page.html?iframeId=developerPageFrame">

        <header>
          <h2 class="h2 article-title">Developers</h2>
        </header>

        <section class="blog-posts">
          <iframe class="blog-frame-container" id="developerPageFrame" allowTransparency="true" scrolling="no"
            frameborder="0" allowfullscreen="true"></iframe>
        </section>
      </article>

      <!--
        - #CONTACT
      -->

      <article class="contact" data-page="contact">

        <header>
          <h2 class="h2 article-title">Contact</h2>
        </header>

        <section class="mapbox" data-mapbox>
          <figure>
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d59582.225634042436!2d105.81218971544796!3d21.037122854436067!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135a96e2e72c51f%3A0x54689ea60eeeee78!2sLong%20Bi%C3%AAn%2C%20Hanoi%2C%20Vietnam!5e0!3m2!1sen!2sbd!4v1722782819327!5m2!1sen!2sbd"
              width="400" height="300" loading="lazy" id="googleMapFrame"></iframe>
          </figure>
        </section>

        <section class="contact-form">

          <h3 class="h3 form-title">Contact Form</h3>

          <form action="#" class="form" data-form>

            <div class="input-wrapper">
              <input type="text" name="fullname" class="form-input" placeholder="Full name" required data-form-input>

              <input type="email" name="email" class="form-input" placeholder="Email address" required data-form-input>
            </div>

            <textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>

            <button class="form-btn" type="submit" disabled data-form-btn>
              <ion-icon name="paper-plane"></ion-icon>
              <span>Send Message</span>
            </button>

          </form>

        </section>

      </article>

    </div>

  </main>

  <!--
    - custom js link
  -->
  <script src="./assets/js/contract.js"></script>
  <script src="./assets/js/script.js"></script>

  <!--
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>

TrdHuy commented 2 months ago

script.js

'use strict';

const TRD_CONSTRACT = window.TRD_CONSTRACT;

window.addEventListener('load', function () {
  TRD_CONSTRACT.clearLocalStorage();
});

// element toggle function
const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }

// sidebar variables
const sidebar = document.querySelector("[data-sidebar]");
const sidebarBtn = document.querySelector("[data-sidebar-btn]");

// sidebar toggle functionality for mobile
sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });

// testimonials variables
const testimonialsItem = document.querySelectorAll("[data-testimonials-item]");
const modalContainer = document.querySelector("[data-modal-container]");
const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
const overlay = document.querySelector("[data-overlay]");

// modal variable
const modalImg = document.querySelector("[data-modal-img]");
const modalTitle = document.querySelector("[data-modal-title]");
const modalText = document.querySelector("[data-modal-text]");

// modal toggle function
const testimonialsModalFunc = function () {
  modalContainer.classList.toggle("active");
  overlay.classList.toggle("active");
}

// add click event to all modal items
for (let i = 0; i < testimonialsItem.length; i++) {

  testimonialsItem[i].addEventListener("click", function () {

    modalImg.src = this.querySelector("[data-testimonials-avatar]").src;
    modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt;
    modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
    modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;

    testimonialsModalFunc();

  });

}

// add click event to modal close button
modalCloseBtn.addEventListener("click", testimonialsModalFunc);
overlay.addEventListener("click", testimonialsModalFunc);

//######################################################################

const iframeMap = new Map();
function loadForm(url, container) {
  const iframeId = container.id;
  const newUrl = url + '?iframeId=' + iframeId + '&shouldNotifyWidth=1';
  container.src = newUrl;
}
document.querySelectorAll('iframe').forEach(iframe => {
  iframeMap.set(iframe.id, iframe);
});
// form input variables
window.addEventListener('message', function (event) {
  const data = event.data;
  switch (data.event) {
    case TRD_CONSTRACT.EVENT.IFRAME_CONTENT_SIZE_CHANGED:
      if (data.frameId) {
        const iframe = iframeMap.get(data.frameId);
        if (event.data.height) {
          iframe.style.height = event.data.height + 'px';
        }
        if (event.data.width) {
          iframe.style.width = event.data.width + 'px';
        }
      }
      break;
    case TRD_CONSTRACT.EVENT.SHOW_FORM_INPUT:
      const url = data.url;
      if (url) {
        loadForm(url, formIframe);
        formInputModalFunc();
      }
      break;
    case TRD_CONSTRACT.EVENT.HIDE_FORM_INPUT:
      const frameId = data.frameId;
      if (frameId == formIframe.id) {
        formInputContainer.classList.remove("active");
        formInputOverlay.classList.remove("active");
      }
      break;
    default:
      console.log('Unknown event:', data.event);
  }
});

const formInputContainer = document.querySelector("[form-input-container]");
const formInputCloseBtn = document.querySelector("[form-input-close-btn]");
const formInputOverlay = document.querySelector("[form-input-overlay]");
const formInputModalContent = document.querySelector("[form-input-modal-content]");
const formIframe = document.getElementById("formInputFrame");
const formInputModalFunc = function () {
  formInputContainer.classList.toggle("active");
  formInputOverlay.classList.toggle("active");
}
formInputCloseBtn.addEventListener("click", formInputModalFunc);
formInputOverlay.addEventListener("click", formInputModalFunc);

//#########################SERVICE-DETAIL###############################

// service detail variables
const serviceItem = document.querySelectorAll("[data-service-item]");
const serviceModalContainer = document.querySelector("[data-service-modal-container]");
const serviceModalCloseBtn = document.querySelector("[data-service-modal-close-btn]");
const serviceOverlay = document.querySelector("[data-service-overlay]");

// modal variable
const serviceModalImg = document.querySelector("[data-service-modal-img]");
const serviceModalTitle = document.querySelector("[data-service-modal-title]");
const serviceModalText = document.querySelector("[data-service-modal-text]");

// modal toggle function
const serviceModalFunc = function () {
  serviceModalContainer.classList.toggle("active");
  serviceOverlay.classList.toggle("active");
}

// add click event to all modal items
for (let i = 0; i < serviceItem.length; i++) {

  serviceItem[i].addEventListener("click", function () {

    serviceModalImg.src = this.querySelector("[data-service-avatar]").src;
    serviceModalImg.alt = this.querySelector("[data-service-avatar]").alt;
    serviceModalTitle.innerHTML = this.querySelector("[data-service-title]").innerHTML;
    serviceModalText.innerHTML = this.querySelector("[data-service-text]").innerHTML;

    serviceModalFunc();

  });

}

// add click event to modal close button
serviceModalCloseBtn.addEventListener("click", serviceModalFunc);
serviceOverlay.addEventListener("click", serviceModalFunc);

//######################################################################

// contact form variables
const form = document.querySelector("[data-form]");
const formInputs = document.querySelectorAll("[data-form-input]");
const formBtn = document.querySelector("[data-form-btn]");

// add event to all form input field
for (let i = 0; i < formInputs.length; i++) {
  formInputs[i].addEventListener("input", function () {

    // check form validation
    if (form.checkValidity()) {
      formBtn.removeAttribute("disabled");
    } else {
      formBtn.setAttribute("disabled", "");
    }

  });
}

// page navigation variables
const navigationLinks = document.querySelectorAll("[data-nav-link]");
const pages = document.querySelectorAll("[data-page]");

// add event to all nav link
for (let i = 0; i < navigationLinks.length; i++) {
  navigationLinks[i].addEventListener("click", function () {

    for (let i = 0; i < pages.length; i++) {
      if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
        pages[i].classList.add("active");
        navigationLinks[i].classList.add("active");
        window.scrollTo(0, 0);

        const iframe = pages[i].querySelector('iframe');
        if (iframe) {
          iframe.src = pages[i].dataset.src;
        } else {
        }
      } else {
        pages[i].classList.remove("active");
        navigationLinks[i].classList.remove("active");
      }
    }

  });
}

TrdHuy commented 2 months ago

style.css

/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 @codewithsadee
 */

/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  /* gradient */

  --bg-gradient-onyx: linear-gradient(to bottom right,
      hsl(240, 1%, 25%) 3%,
      hsl(0, 0%, 19%) 97%);
  --bg-gradient-jet: linear-gradient(to bottom right,
      hsla(240, 1%, 18%, 0.251) 0%,
      hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
  --bg-gradient-yellow-1: linear-gradient(to bottom right,
      hsl(45, 100%, 71%) 0%,
      hsla(36, 100%, 69%, 0) 50%);
  --bg-gradient-yellow-2: linear-gradient(135deg,
      hsla(45, 100%, 71%, 0.251) 0%,
      hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%);
  --border-gradient-onyx: linear-gradient(to bottom right,
      hsl(0, 0%, 25%) 0%,
      hsla(0, 0%, 25%, 0) 50%);
  --text-gradient-yellow: linear-gradient(to right,
      hsl(45, 100%, 72%),
      hsl(35, 100%, 68%));

  /* solid */

  --jet: hsl(0, 0%, 22%);
  --onyx: hsl(240, 1%, 17%);
  --eerie-black-1: hsl(240, 2%, 13%);
  --eerie-black-2: hsl(240, 2%, 12%);
  --smoky-black: hsl(0, 0%, 7%);
  --white-1: hsl(0, 0%, 100%);
  --white-2: hsl(0, 0%, 98%);
  --orange-yellow-crayola: hsl(45, 100%, 72%);
  --vegas-gold: hsl(45, 54%, 58%);
  --light-gray: hsl(0, 0%, 84%);
  --light-gray-70: hsla(0, 0%, 84%, 0.7);
  --bittersweet-shimmer: hsl(0, 43%, 51%);

  /**
   * typography
   */

  /* font-family */
  --ff-poppins: 'Poppins', sans-serif;

  /* font-size */
  --fs-1: 24px;
  --fs-2: 18px;
  --fs-3: 17px;
  --fs-4: 16px;
  --fs-5: 15px;
  --fs-6: 14px;
  --fs-7: 13px;
  --fs-8: 11px;

  /* font-weight */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;

  /**
   * shadow
   */

  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease-in-out;

}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

img,
ion-icon,
a,
button,
time,
span {
  display: block;
}

button {
  font: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

input,
textarea {
  display: block;
  width: 100%;
  background: none;
  font: inherit;
}

::selection {
  background: var(--orange-yellow-crayola);
  color: var(--smoky-black);
}

:focus {
  outline-color: var(--orange-yellow-crayola);
}

html {
  font-family: var(--ff-poppins);
}

body {
  background: var(--smoky-black);
}

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.sidebar,
article {
  background: var(--eerie-black-2);
  border: 1px solid var(--jet);
  border-radius: 20px;
  padding: 15px;
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.separator {
  width: 100%;
  height: 1px;
  background: var(--jet);
  margin: 16px 0;
}

.icon-box {
  position: relative;
  background: var(--border-gradient-onyx);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: var(--orange-yellow-crayola);
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--eerie-black-1);
  border-radius: inherit;
  z-index: -1;
}

.icon-box ion-icon {
  --ionicon-stroke-width: 35px;
}

article {
  display: none;
}

article.active {
  display: block;
  animation: fade 0.5s ease backwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.h2,
.h3,
.h4,
.h5 {
  color: var(--white-2);
  text-transform: capitalize;
}

.h2 {
  font-size: var(--fs-1);
}

.h3 {
  font-size: var(--fs-2);
}

.h4 {
  font-size: var(--fs-4);
}

.h5 {
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
}

.article-title {
  position: relative;
  padding-bottom: 7px;
}

.article-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background: var(--text-gradient-yellow);
  border-radius: 3px;
}

.has-scrollbar::-webkit-scrollbar {
  width: 5px;
  /* for vertical scrollbar */
  height: 5px;
  /* for horizontal scrollbar */
}

.has-scrollbar::-webkit-scrollbar-track {
  background: var(--onyx);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: var(--orange-yellow-crayola);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-button {
  width: 20px;
}

.content-card {
  position: relative;
  background: var(--border-gradient-onyx);
  padding: 15px;
  padding-top: 45px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: 1;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}

/*-----------------------------------*\
  #MAIN
\*-----------------------------------*/

main {
  margin: 15px 12px;
  margin-bottom: 75px;
  min-width: 259px;
}

/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar {
  margin-bottom: 15px;
  max-height: 112px;
  overflow: hidden;
  transition: var(--transition-2);
}

.sidebar.active {
  max-height: 405px;
}

.sidebar-info {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}

/* .avatar-box {
  background: var(--bg-gradient-onyx);
  border-radius: 50%;
} */

.avatar-box img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 5px solid var(--jet);
}

.info-content .name {
  color: var(--white-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-500);
  letter-spacing: -0.25px;
  margin-bottom: 10px;
}

.info-content .title {
  color: var(--white-1);
  background: var(--onyx);
  font-size: var(--fs-8);
  font-weight: var(--fw-300);
  width: max-content;
  padding: 3px 12px;
  border-radius: 8px;
}

.info_more-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  border-radius: 0 15px;
  font-size: 13px;
  color: var(--orange-yellow-crayola);
  background: var(--border-gradient-onyx);
  padding: 10px;
  box-shadow: var(--shadow-2);
  transition: var(--transition-1);
  z-index: 1;
}

.info_more-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--bg-gradient-jet);
  transition: var(--transition-1);
  z-index: -1;
}

.info_more-btn:hover,
.info_more-btn:focus {
  background: var(--bg-gradient-yellow-1);
}

.info_more-btn:hover::before,
.info_more-btn:focus::before {
  background: var(--bg-gradient-yellow-2);
}

.info_more-btn span {
  display: none;
}

.sidebar-info_more {
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-2);
}

.sidebar.active .sidebar-info_more {
  opacity: 1;
  visibility: visible;
}

.contacts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-item {
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-info {
  max-width: calc(100% - 46px);
  width: calc(100% - 46px);
}

.contact-title {
  color: var(--light-gray-70);
  font-size: var(--fs-8);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-info :is(.contact-link, time, address) {
  color: var(--white-2);
  font-size: var(--fs-7);
}

.contact-info address {
  font-style: normal;
}

.social-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding-bottom: 4px;
  padding-left: 7px;
}

.social-item .social-link {
  color: var(--light-gray-70);
  font-size: 18px;
}

.social-item .social-link:hover {
  color: var(--light-gray);
}

/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: hsla(240, 1%, 17%, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--jet);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-2);
  z-index: 5;
}

.navbar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

.navbar-link {
  color: var(--light-gray);
  font-size: var(--fs-8);
  padding: 20px 7px;
  transition: color var(--transition-1);
}

.navbar-link:hover,
.navbar-link:focus {
  color: var(--light-gray-70);
}

.navbar-link.active {
  color: var(--orange-yellow-crayola);
}

/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about .article-title {
  margin-bottom: 15px;
}

.about-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

.about-text p {
  margin-bottom: 15px;
}

/**
 * #service 
 */

.service {
  margin-bottom: 35px;
}

.service-title {
  margin-bottom: 20px;
}

.service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.service-item {
  position: relative;
  background: var(--border-gradient-onyx);
  padding: 20px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  z-index: 1;
}

.service-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}

.service-icon-box {
  margin-bottom: 10px;
}

.service-icon-box img {
  margin: auto;
  width: 45px;
}

.service-content-box {
  text-align: center;
}

.service-item-title {
  margin-bottom: 7px;
}

.service-item-text {
  color: var(--light-gray);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-6);
  font-weight: var(--fw-3);
  line-height: 1.6;
}

/**
 * #testimonials 
 */

.testimonials {
  margin-bottom: 30px;
}

.testimonials-title {
  margin-bottom: 20px;
}

.testimonials-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin: 0 -15px;
  padding: 25px 15px;
  padding-bottom: 35px;
  overflow-x: auto;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.testimonials-item {
  min-width: 100%;
  scroll-snap-align: center;
}

.testimonials-avatar-box {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(15px, -25px);
  background: var(--bg-gradient-onyx);
  border-radius: 30%;
  box-shadow: var(--shadow-1);
}

.testimonials-avatar-box img {
  width: 100%;
  height: auto;
  border-radius: 30%;
  border: 2px solid var(--jet);
}

.testimonials-item-title {
  margin-bottom: 7px;
}

.testimonials-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 * #testimonials-modal
 */

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 20;
  pointer-events: none;
  visibility: hidden;
}

.modal-container::-webkit-scrollbar {
  display: none;
}

.modal-container.active {
  pointer-events: all;
  visibility: visible;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: hsl(0, 0%, 5%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: var(--transition-1);
}

.overlay.active {
  opacity: 0.8;
  visibility: visible;
  pointer-events: all;
}

.testimonials-modal {
  background: var(--eerie-black-2);
  position: relative;
  padding: 15px;
  margin: 15px 12px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  box-shadow: var(--shadow-5);
  transform: scale(1.2);
  opacity: 0;
  transition: var(--transition-1);
  z-index: 2;
}

.form-input-modal {
  background: var(--smoky-black);
  position: relative;
  padding: 15px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  box-shadow: var(--shadow-5);
  transform: scale(1.2);
  opacity: 0;
  transition: var(--transition-1);
  z-index: 2;
}

.modal-container.active .testimonials-modal {
  transform: scale(1);
  opacity: 1;
}

.modal-container.active .form-input-modal {
  transform: scale(1);
  opacity: 1;
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--onyx);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-2);
  font-size: 18px;
  opacity: 0.7;
}

.modal-close-btn:hover,
.modal-close-btn:focus {
  opacity: 1;
}

.modal-close-btn ion-icon {
  --ionicon-stroke-width: 50px;
}

/* .modal-avatar-box {
  background: var(--bg-gradient-onyx);
  width: max-content;
  border-radius: 50%;
  margin-bottom: 15px;
  box-shadow: var(--shadow-2);
} */

.modal-avatar-box img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 1px solid var(--jet);
}

.modal-img-wrapper>img {
  display: none;
}

.modal-title {
  margin-bottom: 4px;
}

.modal-content time {
  font-size: var(--fs-6);
  color: var(--light-gray-70);
  font-weight: var(--fw-300);
  margin-bottom: 10px;
}

.modal-content p {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

/**
 * #clients 
 */

.clients {
  margin-bottom: 15px;
}

.clients-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin: 0 -15px;
  padding: 25px;
  padding-bottom: 25px;
  overflow-x: auto;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 25px;
}

.clients-item {
  min-width: 50%;
  scroll-snap-align: start;
}

.clients-item img {
  width: 100%;
  filter: grayscale(1);
  transition: var(--transition-1);
}

.clients-item img:hover {
  filter: grayscale(0);
}

/*-----------------------------------*\
  #RESUME
\*-----------------------------------*/

.article-title {
  margin-bottom: 30px;
}

/**
 * education and experience 
 */

.timeline {
  margin-bottom: 30px;
}

.timeline .title-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.timeline-list {
  font-size: var(--fs-6);
  margin-left: 45px;
}

.timeline-item {
  position: relative;
}

.timeline-item:not(:last-child) {
  margin-bottom: 20px;
}

.timeline-item-title {
  font-size: var(--fs-6);
  line-height: 1.3;
  margin-bottom: 7px;
}

.timeline-list span {
  color: var(--vegas-gold);
  font-weight: var(--fw-400);
  line-height: 1.6;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -30px;
  width: 1px;
  height: calc(100% + 50px);
  background: var(--jet);
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -33px;
  height: 6px;
  width: 6px;
  background: var(--text-gradient-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--jet);
}

.timeline-text {
  color: var(--light-gray);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

/**
 * skills 
 */

.skills-title {
  margin-bottom: 20px;
}

.skills-list {
  padding: 20px;
}

.skills-item:not(:last-child) {
  margin-bottom: 15px;
}

.skill .title-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.skill .title-wrapper data {
  color: var(--light-gray);
  font-size: var(--fs-7);
  font-weight: var(--fw-300);
}

.skill-progress-bg {
  background: var(--jet);
  width: 100%;
  height: 8px;
  border-radius: 10px;
}

.skill-progress-fill {
  background: var(--text-gradient-yellow);
  height: 100%;
  border-radius: inherit;
}

/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog.active {
  display: flex;
  flex-direction: column;
}

.blog-posts {
  margin-bottom: 10px;
  flex-grow: 1;
  display: block;
}

.blog-frame-container {
  width: 100%;
}

.blog-posts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.blog-post-item>a {
  position: relative;
  background: var(--border-gradient-onyx);
  height: 100%;
  box-shadow: var(--shadow-4);
  border-radius: 16px;
  z-index: 1;
}

.blog-post-item>a::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--eerie-black-1);
  z-index: -1;
}

.blog-banner-box {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
}

.blog-banner-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-1);
}

.blog-post-item>a:hover .blog-banner-box img {
  transform: scale(1.1);
}

.blog-content {
  padding: 15px;
}

.blog-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.blog-meta :is(.blog-category, time) {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

.blog-meta .dot {
  background: var(--light-gray-70);
  width: 4px;
  height: 4px;
  border-radius: 4px;
}

.blog-item-title {
  margin-bottom: 10px;
  line-height: 1.3;
  transition: var(--transition-1);
}

.blog-post-item>a:hover .blog-item-title {
  color: var(--orange-yellow-crayola);
}

.blog-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.mapbox {
  position: relative;
  height: 250px;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 30px;
  border: 1px solid var(--jet);
  overflow: hidden;
}

.mapbox figure {
  height: 100%;
}

.mapbox iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(1) invert(1);
}

.contact-form {
  margin-bottom: 10px;
}

.form-title {
  margin-bottom: 20px;
}

.input-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

.list-input-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

.form-input {
  color: var(--white-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-400);
  padding: 13px 20px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  outline: none;
}

.form-input::placeholder {
  font-weight: var(--fw-500);
}

.form-input:focus {
  border-color: var(--orange-yellow-crayola);
}

textarea.form-input {
  min-height: 100px;
  height: 120px;
  max-height: 200px;
  resize: vertical;
  margin-bottom: 25px;
}

textarea.form-input::-webkit-resizer {
  display: none;
}

.form-input:focus:invalid {
  border-color: var(--bittersweet-shimmer);
}

.form-btn {
  position: relative;
  width: 100%;
  background: var(--border-gradient-onyx);
  color: var(--orange-yellow-crayola);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: var(--fs-6);
  text-transform: capitalize;
  box-shadow: var(--shadow-3);
  z-index: 1;
  transition: var(--transition-1);
}

.form-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
  transition: var(--transition-1);
}

.form-btn ion-icon {
  font-size: 16px;
}

.form-btn:hover {
  background: var(--bg-gradient-yellow-1);
}

.form-btn:hover::before {
  background: var(--bg-gradient-yellow-2);
}

.form-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-btn:disabled:hover {
  background: var(--border-gradient-onyx);
}

.form-btn:disabled:hover::before {
  background: var(--bg-gradient-jet);
}

/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/

/**
 * responsive larger than 450px screen
 */

@media (min-width: 450px) {

  /**
   * client
   */

  .clients-item {
    min-width: calc(33.33% - 10px);
  }

  /**
   *  BLOG 
   */

  .blog-banner-box {
    height: auto;
  }

  .avatar-box img {
    max-height: 75px;
  }

  .testimonials-avatar-box img {
    max-height: 65px;
  }

  .modal-avatar-box img {
    max-inline-size: fit-content;
  }
}

/**
 * responsive larger than 580px screen
 */

@media (min-width: 580px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-1: 32px;
    --fs-2: 24px;
    --fs-3: 26px;
    --fs-4: 18px;
    --fs-6: 15px;
    --fs-7: 15px;
    --fs-8: 12px;

  }

  /**
   * #REUSED STYLE
   */

  .sidebar,
  article {
    width: 520px;
    margin-inline: auto;
    padding: 30px;
  }

  .article-title {
    font-weight: var(--fw-600);
    padding-bottom: 15px;
  }

  .article-title::after {
    width: 40px;
    height: 5px;
  }

  .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 18px;
  }

  /**
   * #MAIN
   */

  main {
    margin-top: 60px;
    margin-bottom: 100px;
  }

  /**
   * #SIDEBAR
   */

  .sidebar {
    max-height: 180px;
    margin-bottom: 30px;
  }

  .sidebar.active {
    max-height: 584px;
  }

  .sidebar-info {
    gap: 25px;
  }

  .avatar-box {
    border-radius: 30px;
  }

  .avatar-box img {
    width: 120px;
    max-height: max-content;
  }

  .info-content .name {
    margin-bottom: 15px;
  }

  .info-content .title {
    padding: 5px 18px;
  }

  .info_more-btn {
    top: -30px;
    right: -30px;
    padding: 10px 15px;
  }

  .info_more-btn span {
    display: block;
    font-size: var(--fs-8);
  }

  .info_more-btn ion-icon {
    display: none;
  }

  .separator {
    margin: 32px 0;
  }

  .contacts-list {
    gap: 20px;
  }

  .contact-info {
    max-width: calc(100% - 64px);
    width: calc(100% - 64px);
  }

  /**
   * #NAVBAR
   */

  .navbar {
    border-radius: 20px 20px 0 0;
  }

  .navbar-list {
    gap: 20px;
  }

  .navbar-link {
    --fs-8: 14px;
  }

  /**
   * #ABOUT
   */

  .about .article-title {
    margin-bottom: 20px;
  }

  .about-text {
    margin-bottom: 40px;
  }

  /* service */

  .service-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    padding: 30px;
  }

  .service-icon-box {
    margin-bottom: 0;
    margin-top: 5px;
    margin-right: 10px;
  }

  .service-content-box {
    text-align: left;
  }

  /* testimonials */

  .testimonials-title {
    margin-bottom: 25px;
  }

  .testimonials-list {
    gap: 30px;
    margin: 0 -30px;
    padding: 30px;
    padding-bottom: 35px;
  }

  .content-card {
    padding: 30px;
    padding-top: 25px;
  }

  .testimonials-avatar-box {
    transform: translate(30px, -30px);
    border-radius: 20px;
  }

  .testimonials-avatar-box img {
    width: 80px;
    max-height: fit-content;
  }

  .testimonials-item-title {
    margin-bottom: 10px;
    margin-left: 95px;
  }

  .testimonials-text {
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  /* testimonials modal */

  .modal-container {
    padding: 20px;
  }

  .testimonials-modal {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
  }

  .modal-img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .modal-avatar-box {
    border-radius: 18px;
    margin-bottom: 0;
  }

  .modal-avatar-box img {
    width: 65px;
  }

  .modal-img-wrapper>img {
    display: block;
    flex-grow: 1;
    width: 35px;
  }

  /* clients */

  .clients-list {
    gap: 50px;
    margin: 0 -30px;
    padding: 45px;
    scroll-padding-inline: 45px;
  }

  .clients-item {
    min-width: calc(33.33% - 35px);
  }

  /**
   * #RESUME
   */

  .timeline-list {
    margin-left: 65px;
  }

  .timeline-item:not(:last-child)::before {
    left: -40px;
  }

  .timeline-item::after {
    height: 8px;
    width: 8px;
    left: -43px;
  }

  .skills-item:not(:last-child) {
    margin-bottom: 25px;
  }

  /**
   * BLOG
   */

  .blog-banner-box {
    border-radius: 16px;
  }

  .blog-posts-list {
    gap: 30px;
  }

  .blog-content {
    padding: 25px;
  }

  /**
   * #CONTACT
   */

  .mapbox {
    height: 380px;
    border-radius: 18px;
  }

  .input-wrapper {
    gap: 30px;
    margin-bottom: 30px;
  }

  .form-input {
    padding: 15px 20px;
  }

  textarea.form-input {
    margin-bottom: 30px;
  }

  .form-btn {
    --fs-6: 16px;
    padding: 16px 20px;
  }

  .form-btn ion-icon {
    font-size: 18px;
  }

}

/**
 * responsive larger than 768px screen
 */

@media (min-width: 768px) {

  /**
   * REUSED STYLE
   */

  .sidebar,
  article {
    width: 700px;
  }

  .has-scrollbar::-webkit-scrollbar-button {
    width: 100px;
  }

  /**
   * SIDEBAR
   */

  .contacts-list {
    grid-template-columns: 1fr 1fr;
    gap: 30px 15px;
  }

  /**
   * NAVBAR
   */

  .navbar-link {
    --fs-8: 15px;
  }

  /**
   * ABOUT
   */

  /* testimonials modal */

  .testimonials-modal {
    gap: 35px;
    max-width: 680px;
  }

  .modal-avatar-box img {
    width: 80px;
  }

  /**
   * Blog
   */

  .blog-posts-list {
    grid-template-columns: 1fr 1fr;
  }

  /**
   * CONTACT
   */

  .input-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .form-btn {
    width: max-content;
    margin-left: auto;
  }

  .list-form-btn {
    width: auto;
    margin: auto;
  }

}

/**
 * responsive larger than 1024px screen
 */

@media (min-width: 1024px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
    * shadow
    */

    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);

  }

  /**
   * REUSED STYLE
   */

  .sidebar,
  article {
    width: 950px;
    box-shadow: var(--shadow-5);
  }

  /**
   * MAIN 
   */

  main {
    margin-bottom: 60px;
  }

  .main-content {
    position: relative;
    width: max-content;
    margin: auto;
  }

  /**
   * NAVBAR
   */

  .navbar {
    position: absolute;
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    width: max-content;
    border-radius: 0 20px;
    padding: 0 20px;
    box-shadow: none;
  }

  .navbar-list {
    gap: 30px;
    padding: 0 20px;
  }

  .navbar-link {
    font-weight: var(--fw-500);
  }

  /**
   * ABOUT
   */

  /* service */

  .service-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px 25px;
  }

  /* testimonials */

  .testimonials-item {
    min-width: calc(50% - 15px);
  }

  /* clients */

  .clients-item {
    min-width: calc(25% - 38px);
  }

  /**
   * BLOG
   */

  .blog-banner-box {
    height: 230px;
  }

}

/**
 * responsive larger than 1250px screen
 */

@media (min-width: 1250px) {

  /**
   * RESET
   */

  body::-webkit-scrollbar {
    width: 20px;
  }

  body::-webkit-scrollbar-track {
    background: var(--smoky-black);
  }

  body::-webkit-scrollbar-thumb {
    border: 5px solid var(--smoky-black);
    background: hsla(0, 0%, 100%, 0.1);
    border-radius: 20px;
    box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
      inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
  }

  body::-webkit-scrollbar-thumb:hover {
    background: hsla(0, 0%, 100%, 0.15);
  }

  body::-webkit-scrollbar-button {
    height: 60px;
  }

  /**
   * REUSED STYLE
   */

  .sidebar,
  article {
    width: auto;
  }

  article {
    min-height: 100%;
  }

  /**
   * MAIN
   */

  main {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
  }

  .main-content {
    min-width: 75%;
    width: 75%;
    margin: 0;
  }

  /**
   * SIDEBAR
   */

  .sidebar {
    position: sticky;
    top: 60px;
    max-height: max-content;
    height: 100%;
    margin-bottom: 0;
    padding-top: 60px;
    z-index: 1;
  }

  .sidebar-info {
    flex-direction: column;
  }

  .avatar-box img {
    width: 150px;
  }

  .info-content .name {
    white-space: nowrap;
    text-align: center;
  }

  .info-content .title {
    margin: auto;
  }

  .info_more-btn {
    display: none;
  }

  .sidebar-info_more {
    opacity: 1;
    visibility: visible;
  }

  .contacts-list {
    grid-template-columns: 1fr;
  }

  .contact-info :is(.contact-link) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contact-info :is(.contact-link, time, address) {
    --fs-7: 14px;
    font-weight: var(--fw-300);
  }

  .separator:last-of-type {
    margin: 15px 0;
    opacity: 0;
  }

  .social-list {
    justify-content: center;
  }

  /**
     * RESUME
     */

  .timeline-text {
    max-width: 700px;
  }

}

TrdHuy commented 2 months ago

portofilo_ab.css

:root {

     /**
      * colors
      */

     /* gradient */

     --bg-gradient-onyx: linear-gradient(to bottom right,
               hsl(240, 1%, 25%) 3%,
               hsl(0, 0%, 19%) 97%);
     --bg-gradient-jet: linear-gradient(to bottom right,
               hsla(240, 1%, 18%, 0.251) 0%,
               hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
     --bg-gradient-yellow-1: linear-gradient(to bottom right,
               hsl(45, 100%, 71%) 0%,
               hsla(36, 100%, 69%, 0) 50%);
     --bg-gradient-yellow-2: linear-gradient(135deg,
               hsla(45, 100%, 71%, 0.251) 0%,
               hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%);
     --border-gradient-onyx: linear-gradient(to bottom right,
               hsl(0, 0%, 25%) 0%,
               hsla(0, 0%, 25%, 0) 50%);
     --text-gradient-yellow: linear-gradient(to right,
               hsl(45, 100%, 72%),
               hsl(35, 100%, 68%));

     /* solid */

     --jet: hsl(0, 0%, 22%);
     --onyx: hsl(240, 1%, 17%);
     --eerie-black-1: hsl(240, 2%, 13%);
     --eerie-black-2: hsl(240, 2%, 12%);
     --smoky-black: hsl(0, 0%, 7%);
     --white-1: hsl(0, 0%, 100%);
     --white-2: hsl(0, 0%, 98%);
     --orange-yellow-crayola: hsl(45, 100%, 72%);
     --vegas-gold: hsl(45, 54%, 58%);
     --light-gray: hsl(0, 0%, 84%);
     --light-gray-70: hsla(0, 0%, 84%, 0.7);
     --bittersweet-shimmer: hsl(0, 43%, 51%);

     /**
      * typography
      */

     /* font-family */
     --ff-poppins: 'Poppins', sans-serif;

     /* font-size */
     --fs-1: 24px;
     --fs-2: 18px;
     --fs-3: 17px;
     --fs-4: 16px;
     --fs-5: 15px;
     --fs-6: 14px;
     --fs-7: 13px;
     --fs-8: 11px;

     /* font-weight */
     --fw-300: 300;
     --fw-400: 400;
     --fw-500: 500;
     --fw-600: 600;

     /**
      * shadow
      */

     --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
     --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
     --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
     --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
     --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);

     /**
      * transition
      */

     --transition-1: 0.25s ease;
     --transition-2: 0.5s ease-in-out;

}

.description-container {
     min-width: 400px;
}

.portfolio-container {
     background: var(--eerie-black-2);
}

.portfolio-container h1 {
     font-size: var(--fs-3);
}

.portfolio-container h2 {
     font-size: var(--fs-4);
}

.portfolio-container h3 {
     font-size: var(--fs-5);
}

.portfolio-container p {
     font-size: var(--fs-5);
}

.item-title {
     padding-bottom: 5px;
     margin-bottom: 30px;
     position: relative;
}

.item-title::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: var(--text-gradient-yellow);
     border-radius: 3px;
}

.hor-screen-container p,
.hor-screen-container h3 {
     text-align: center;
}

.screen-img {
     max-height: 600px;
     border-radius: 20px;
     border: 5px solid var(--jet);
     box-sizing: border-box;
}

.overview table {
     width: 100%;
     border-collapse: collapse;
}

.overview th,
.overview td {
     padding: 10px;
     text-align: left;
     border-bottom: 1px solid var(--text-gradient-yellow);
     font-size: var(--fs-5);
}

.overview th {
     width: 15%;
}

.overview-container {}

.ver-screen-container {
     display: flex;
     gap: 15px;
     align-items: center
}

.hor-screen-container {
     display: flex;
     gap: 15px;
     padding: 20px;
     align-items: center;
     flex-direction: column;
     max-width: 400px;
}

.content-item-container {
     margin-top: 40px;
}

@media (min-width: 400px) {
     .adaptable-container {
          display: flex;
          flex-direction: column;
     }

     .adaptable-title {
          display: none;
     }
}

@media (min-width: 580px) {
     .screen-img {
          max-height: 550px;
          border-radius: 20px;
          border: 4px solid var(--jet);
     }

     .description-container {
          min-width: 200px;
     }

}

@media (min-width: 768px) {

     .adaptable-title {
          display: block;
     }

     .description-container {
          min-width: 400px;
     }

     .adaptable-container {
          display: flex;
          flex-direction: row;
     }
}

@media (min-width: 1250px) {
     .screen-img {
          max-height: 550px;
          border-radius: 20px;
          border: 5px solid var(--jet);
     }
}

TrdHuy commented 2 months ago

portfolio.css

/*-----------------------------------*\
  #PORTFOLIO
\*-----------------------------------*/

.portfolio-overview-area {
    display: none;
}

.portfolio-overview-area.active {
    display: block;
    animation: scaleUp 0.25s ease forwards;
}

.filter-list {
    display: none;
}

.filter-select-box {
    position: relative;
    margin-bottom: 25px;
}

.filter-select {
    background: var(--eerie-black-2);
    color: var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--jet);
    border-radius: 14px;
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
}

.filter-select.active .select-icon {
    transform: rotate(0.5turn);
}

.select-list {
    background: var(--eerie-black-2);
    position: absolute;
    top: calc(100% + 6px);
    width: 100%;
    padding: 6px;
    border: 1px solid var(--jet);
    border-radius: 14px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.15s ease-in-out;
}

.filter-select.active+.select-list {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.select-item button {
    background: var(--eerie-black-2);
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
    text-transform: capitalize;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
}

.select-item button:hover {
    --eerie-black-2: hsl(240, 2%, 20%);
}

.project-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    margin-bottom: 10px;
}

.project-item {
    display: none;
}

.project-item.active {
    display: block;
    animation: scaleUp 0.25s ease forwards;
}

@keyframes scaleUp {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

.project-item {
    width: 100%;
}

.project-img {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 15px;
}

.project-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    transition: var(--transition-1);
}

.project-item:hover {
    cursor: pointer;
}

.project-item:hover .project-img::before {
    background: hsla(0, 0%, 0%, 0.5);
}

.project-item-icon-box {
    --scale: 0.8;

    background: var(--jet);
    color: var(--orange-yellow-crayola);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--scale));
    font-size: 20px;
    padding: 18px;
    border-radius: 12px;
    opacity: 0;
    z-index: 1;
    transition: var(--transition-1);
}

.project-item:hover .project-item-icon-box {
    --scale: 1;
    opacity: 1;
}

.project-item-icon-box ion-icon {
    --ionicon-stroke-width: 50px;
}

.project-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-1);
}

.project-item:hover img {
    transform: scale(1.1);
}

.project-title,
.project-category {
    margin-left: 10px;
}

.project-title {
    color: var(--white-2);
    font-size: var(--fs-5);
    font-weight: var(--fw-400);
    text-transform: capitalize;
    line-height: 1.3;
}

.project-category {
    color: var(--light-gray-70);
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
}

.portfolio-page-detai {
    display: none;
}

.portfolio-page-detai.active {
    display: block;
    animation: scaleUp 0.25s ease forwards;
}

.icon-btn {
    background: var(--onyx);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-2);
    font-size: 18px;
    opacity: 0.7;
}

.icon-btn:hover {
    opacity: 1;
}

.icon-btn ion-icon {
    --ionicon-stroke-width: 50px;
}

.underline-for-text {
    content: "";
    width: 100%;
    height: 3px;
    background: var(--text-gradient-yellow);
    border-radius: 3px;
}

@media (min-width: 450px) {

    /**
     * #PORTFOLIO 
     */

    .project-img {
        height: auto;
    }
}

@media (min-width: 580px) {

    /**
     * #PORTFOLIO
     */

    .project-img {
        border-radius: 16px;
    }
}

@media (min-width: 768px) {

    /**
     * PORTFOLIO
     */

    .article-title {
        padding-bottom: 20px;
    }

    .filter-select-box {
        display: none;
    }

    .filter-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 25px;
        padding-left: 5px;
        margin-bottom: 30px;
    }

    .filter-item button {
        color: var(--light-gray);
        font-size: var(--fs-5);
        transition: var(--transition-1);
    }

    .filter-item button:hover {
        color: var(--light-gray-70);
    }

    .filter-item button.active {
        color: var(--orange-yellow-crayola);
    }

    /* portfolio grid */

    .project-list {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (min-width: 1024px) {

    /**
   * PORTFOLIO
   */

    .project-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

TrdHuy commented 2 months ago

base.css

.flex-horizontal-layout {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.flex-horizontal-item {
    flex: 1;
}

TrdHuy commented 2 months ago

launch.json

{
    "version": "0.2.0",
    "configurations": [
      // {
      //   "name": "Launch Live Server",
      //   "type": "node",
      //   "request": "launch",
      //   "preLaunchTask": "Run Live Server",
      //   "program": "${workspaceFolder}/${relativeFile}",
      //   "cwd": "${workspaceFolder}",
      //   "runtimeExecutable": "live-server"
      // }
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:5500/${fileBasename}", // Ctrl + F5 in browser to refresh css Cache
        "webRoot": "${workspaceFolder}"
      },
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome current file",
        "url": "file://${file}",
        "webRoot": "${workspaceFolder}"
      }
    ]
  }

TrdHuy commented 2 months ago

settings.json

{
    // Mainly for static files
    "liveServer.settings.useWebExt": true,
    // This means that you change your real URL (current PHP url) 
    // to another URL (which Live Sever starts).
    "liveServer.settings.proxy": {
        "enable": true, //   i. enabled
        "baseUri": "/", //  ii. workspace
        "proxyUri": "http://localhost:8089/TrdHuy.github.io" // iii. actual address,
    },
    "liveServer.settings.watchFiles": [
        "**/*.html",
        "**/*.css",
        "**/*.js"
    ]
}

TrdHuy / TrdHuy.github.io

Portfolio dashboard #5