[
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\npatreon: codewithsadee # Replace with a single Patreon username\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2022 codewithsadee\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# vCard - Personal portfolio\n\n![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/vcard-personal-portfolio)\n![GitHub stars](https://img.shields.io/github/stars/codewithsadee/vcard-personal-portfolio?style=social)\n![GitHub forks](https://img.shields.io/github/forks/codewithsadee/vcard-personal-portfolio?style=social)\n[![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)\n[![YouTube Video Views](https://img.shields.io/youtube/views/SoxmIlgf2zM?style=social)](https://youtu.be/SoxmIlgf2zM)\n\nvCard is a fully responsive personal portfolio website, responsive for all devices, built using HTML, CSS, and JavaScript.\n\n## Demo\n\n![vCard Desktop Demo](./website-demo-image/desktop.png \"Desktop Demo\")\n![vCard Mobile Demo](./website-demo-image/mobile.png \"Mobile Demo\")\n\n## Prerequisites\n\nBefore you begin, ensure you have met the following requirements:\n\n* [Git](https://git-scm.com/downloads \"Download Git\") must be installed on your operating system.\n\n## Installing vCard\n\nTo install **vCard**, follow these steps:\n\nLinux and macOS:\n\n```bash\nsudo git clone https://github.com/codewithsadee/vcard-personal-portfolio.git\n```\n\nWindows:\n\n```bash\ngit clone https://github.com/codewithsadee/vcard-personal-portfolio.git\n```\n\n## Contact\n\nIf you want to contact me you can reach me at [Twitter](https://www.x.com/codewithsadee_).\n\n## License\n\nMIT\n"
  },
  {
    "path": "assets/css/style.css",
    "content": "/*-----------------------------------*\\\n  #style.css\n\\*-----------------------------------*/\n\n\n/**\n * copyright 2022 @codewithsadee\n */\n\n\n\n\n\n/*-----------------------------------*\\\n  #CUSTOM PROPERTY\n\\*-----------------------------------*/\n\n:root {\n\n  /**\n   * colors\n   */\n\n  /* gradient */\n\n  --bg-gradient-onyx: linear-gradient(\n    to bottom right, \n    hsl(240, 1%, 25%) 3%, \n    hsl(0, 0%, 19%) 97%\n  );\n  --bg-gradient-jet: linear-gradient(\n    to bottom right, \n    hsla(240, 1%, 18%, 0.251) 0%, \n    hsla(240, 2%, 11%, 0) 100%\n  ), hsl(240, 2%, 13%);\n  --bg-gradient-yellow-1: linear-gradient(\n    to bottom right, \n    hsl(45, 100%, 71%) 0%, \n    hsla(36, 100%, 69%, 0) 50%\n  );\n  --bg-gradient-yellow-2: linear-gradient(\n    135deg, \n    hsla(45, 100%, 71%, 0.251) 0%, \n    hsla(35, 100%, 68%, 0) 59.86%\n  ), hsl(240, 2%, 13%);\n  --border-gradient-onyx: linear-gradient(\n    to bottom right, \n    hsl(0, 0%, 25%) 0%, \n    hsla(0, 0%, 25%, 0) 50%\n  );\n  --text-gradient-yellow: linear-gradient(\n    to right, \n    hsl(45, 100%, 72%), \n    hsl(35, 100%, 68%)\n  );\n\n  /* solid */\n\n  --jet: hsl(0, 0%, 22%);\n  --onyx: hsl(240, 1%, 17%);\n  --eerie-black-1: hsl(240, 2%, 13%);\n  --eerie-black-2: hsl(240, 2%, 12%);\n  --smoky-black: hsl(0, 0%, 7%);\n  --white-1: hsl(0, 0%, 100%);\n  --white-2: hsl(0, 0%, 98%);\n  --orange-yellow-crayola: hsl(45, 100%, 72%);\n  --vegas-gold: hsl(45, 54%, 58%);\n  --light-gray: hsl(0, 0%, 84%);\n  --light-gray-70: hsla(0, 0%, 84%, 0.7);\n  --bittersweet-shimmer: hsl(0, 43%, 51%);\n\n  /**\n   * typography\n   */\n\n  /* font-family */\n  --ff-poppins: 'Poppins', sans-serif;\n\n  /* font-size */\n  --fs-1: 24px;\n  --fs-2: 18px;\n  --fs-3: 17px;\n  --fs-4: 16px;\n  --fs-5: 15px;\n  --fs-6: 14px;\n  --fs-7: 13px;\n  --fs-8: 11px;\n\n  /* font-weight */\n  --fw-300: 300;\n  --fw-400: 400;\n  --fw-500: 500;\n  --fw-600: 600;\n\n  /**\n   * shadow\n   */\n  \n  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);\n  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);\n  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);\n  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);\n  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);\n\n  /**\n   * transition\n   */\n\n  --transition-1: 0.25s ease;\n  --transition-2: 0.5s ease-in-out;\n\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #RESET\n\\*-----------------------------------*/\n\n*, *::before, *::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\na { text-decoration: none; }\n\nli { list-style: none; }\n\nimg, ion-icon, a, button, time, span { display: block; }\n\nbutton {\n  font: inherit;\n  background: none;\n  border: none;\n  text-align: left;\n  cursor: pointer;\n}\n\ninput, textarea {\n  display: block;\n  width: 100%;\n  background: none;\n  font: inherit;\n}\n\n::selection {\n  background: var(--orange-yellow-crayola);\n  color: var(--smoky-black);\n}\n\n:focus { outline-color: var(--orange-yellow-crayola); }\n\nhtml { font-family: var(--ff-poppins); }\n\nbody { background: var(--smoky-black); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #REUSED STYLE\n\\*-----------------------------------*/\n\n.sidebar,\narticle {\n  background: var(--eerie-black-2);\n  border: 1px solid var(--jet);\n  border-radius: 20px;\n  padding: 15px;\n  box-shadow: var(--shadow-1);\n  z-index: 1;\n}\n\n.separator {\n  width: 100%;\n  height: 1px;\n  background: var(--jet);\n  margin: 16px 0;\n}\n\n.icon-box {\n  position: relative;\n  background: var(--border-gradient-onyx);\n  width: 30px;\n  height: 30px;\n  border-radius: 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 16px;\n  color: var(--orange-yellow-crayola);\n  box-shadow: var(--shadow-1);\n  z-index: 1;\n}\n\n.icon-box::before {\n  content: \"\";\n  position: absolute;\n  inset: 1px;\n  background: var(--eerie-black-1);\n  border-radius: inherit;\n  z-index: -1;\n}\n\n.icon-box ion-icon { --ionicon-stroke-width: 35px; }\n\narticle { display: none; }\n\narticle.active {\n  display: block;\n  animation: fade 0.5s ease backwards;\n}\n\n@keyframes fade {\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n}\n\n.h2,\n.h3,\n.h4,\n.h5 {\n  color: var(--white-2);\n  text-transform: capitalize;\n}\n\n.h2 { font-size: var(--fs-1); }\n\n.h3 { font-size: var(--fs-2); }\n\n.h4 { font-size: var(--fs-4); }\n\n.h5 {\n  font-size: var(--fs-7);\n  font-weight: var(--fw-500);\n}\n\n.article-title {\n  position: relative;\n  padding-bottom: 7px;\n}\n\n.article-title::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 30px;\n  height: 3px;\n  background: var(--text-gradient-yellow);\n  border-radius: 3px;\n}\n\n.has-scrollbar::-webkit-scrollbar {\n  width: 5px; /* for vertical scrollbar */\n  height: 5px; /* for horizontal scrollbar */\n}\n\n.has-scrollbar::-webkit-scrollbar-track {\n  background: var(--onyx);\n  border-radius: 5px;\n}\n\n.has-scrollbar::-webkit-scrollbar-thumb {\n  background: var(--orange-yellow-crayola);\n  border-radius: 5px;\n}\n\n.has-scrollbar::-webkit-scrollbar-button { width: 20px; }\n\n.content-card {\n  position: relative;\n  background: var(--border-gradient-onyx);\n  padding: 15px;\n  padding-top: 45px;\n  border-radius: 14px;\n  box-shadow: var(--shadow-2);\n  cursor: pointer;\n  z-index: 1;\n}\n\n.content-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 1px;\n  background: var(--bg-gradient-jet);\n  border-radius: inherit;\n  z-index: -1;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #MAIN\n\\*-----------------------------------*/\n\nmain {\n  margin: 15px 12px;\n  margin-bottom: 75px;\n  min-width: 259px;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #SIDEBAR\n\\*-----------------------------------*/\n\n.sidebar {\n  margin-bottom: 15px;\n  max-height: 112px;\n  overflow: hidden;\n  transition: var(--transition-2);\n}\n\n.sidebar.active { max-height: 405px; }\n\n.sidebar-info {\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 15px;\n}\n\n.avatar-box {\n  background: var(--bg-gradient-onyx);\n  border-radius: 20px;\n}\n\n.info-content .name {\n  color: var(--white-2);\n  font-size: var(--fs-3);\n  font-weight: var(--fw-500);\n  letter-spacing: -0.25px;\n  margin-bottom: 10px;\n}\n\n.info-content .title {\n  color: var(--white-1);\n  background: var(--onyx);\n  font-size: var(--fs-8);\n  font-weight: var(--fw-300);\n  width: max-content;\n  padding: 3px 12px;\n  border-radius: 8px;\n}\n\n.info_more-btn {\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  border-radius: 0 15px;\n  font-size: 13px;\n  color: var(--orange-yellow-crayola);\n  background: var(--border-gradient-onyx);\n  padding: 10px;\n  box-shadow: var(--shadow-2);\n  transition: var(--transition-1);\n  z-index: 1;\n}\n\n.info_more-btn::before {\n  content: \"\";\n  position: absolute;\n  inset: 1px;\n  border-radius: inherit;\n  background: var(--bg-gradient-jet);\n  transition: var(--transition-1);\n  z-index: -1;\n}\n\n.info_more-btn:hover,\n.info_more-btn:focus { background: var(--bg-gradient-yellow-1); }\n\n.info_more-btn:hover::before,\n.info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); }\n\n.info_more-btn span { display: none; }\n\n.sidebar-info_more {\n  opacity: 0;\n  visibility: hidden;\n  transition: var(--transition-2);\n}\n\n.sidebar.active .sidebar-info_more {\n  opacity: 1;\n  visibility: visible;\n}\n\n.contacts-list {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n}\n\n.contact-item {\n  min-width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.contact-info {\n  max-width: calc(100% - 46px);\n  width: calc(100% - 46px);\n}\n\n.contact-title {\n  color: var(--light-gray-70);\n  font-size: var(--fs-8);\n  text-transform: uppercase;\n  margin-bottom: 2px;\n}\n\n.contact-info :is(.contact-link, time, address) {\n  color: var(--white-2);\n  font-size: var(--fs-7);\n}\n\n.contact-info address { font-style: normal; }\n\n.social-list {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 15px;\n  padding-bottom: 4px;\n  padding-left: 7px;\n}\n\n.social-item .social-link {\n  color: var(--light-gray-70);\n  font-size: 18px;\n}\n\n\n.social-item .social-link:hover { color: var(--light-gray); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #NAVBAR\n\\*-----------------------------------*/\n\n.navbar {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background: hsla(240, 1%, 17%, 0.75);\n  backdrop-filter: blur(10px);\n  border: 1px solid var(--jet);\n  border-radius: 12px 12px 0 0;\n  box-shadow: var(--shadow-2);\n  z-index: 5;\n}\n\n.navbar-list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: 0 10px;\n}\n\n.navbar-link {\n  color: var(--light-gray);\n  font-size: var(--fs-8);\n  padding: 20px 7px;\n  transition: color var(--transition-1);\n}\n\n.navbar-link:hover,\n.navbar-link:focus { color: var(--light-gray-70); }\n\n.navbar-link.active { color: var(--orange-yellow-crayola); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #ABOUT\n\\*-----------------------------------*/\n\n.about .article-title { margin-bottom: 15px; }\n\n.about-text {\n  color: var(--light-gray);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-300);\n  line-height: 1.6;\n}\n\n.about-text p { margin-bottom: 15px; }\n\n\n\n/**\n * #service \n */\n\n.service { margin-bottom: 35px; }\n\n.service-title { margin-bottom: 20px; }\n\n.service-list {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 20px;\n}\n\n.service-item {\n  position: relative;\n  background: var(--border-gradient-onyx);\n  padding: 20px;\n  border-radius: 14px;\n  box-shadow: var(--shadow-2);\n  z-index: 1;\n}\n\n.service-item::before {\n  content: \"\";\n  position: absolute;\n  inset: 1px;\n  background: var(--bg-gradient-jet);\n  border-radius: inherit;\n  z-index: -1;\n}\n\n.service-icon-box { margin-bottom: 10px; }\n\n.service-icon-box img { margin: auto; }\n\n.service-content-box { text-align: center; }\n\n.service-item-title { margin-bottom: 7px; }\n\n.service-item-text {\n  color: var(--light-gray);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-3);\n  line-height: 1.6;\n}\n\n\n/**\n * #testimonials \n */\n\n.testimonials { margin-bottom: 30px; }\n\n.testimonials-title { margin-bottom: 20px; }\n\n.testimonials-list {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 15px;\n  margin: 0 -15px;\n  padding: 25px 15px;\n  padding-bottom: 35px;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  overscroll-behavior-inline: contain;\n  scroll-snap-type: inline mandatory;\n}\n\n.testimonials-item {\n  min-width: 100%;\n  scroll-snap-align: center;\n}\n\n.testimonials-avatar-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translate(15px, -25px);\n  background: var(--bg-gradient-onyx);\n  border-radius: 14px;\n  box-shadow: var(--shadow-1);\n}\n\n.testimonials-item-title { margin-bottom: 7px; }\n\n.testimonials-text {\n  color: var(--light-gray);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-300);\n  line-height: 1.6;\n  display: -webkit-box;\n  line-clamp: 4;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n\n/**\n * #testimonials-modal\n */\n\n.modal-container {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  z-index: 20;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.modal-container::-webkit-scrollbar { display: none; }\n\n.modal-container.active {\n  pointer-events: all;\n  visibility: visible;\n}\n\n.overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background: hsl(0, 0%, 5%);\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  z-index: 1;\n  transition: var(--transition-1);\n}\n\n.overlay.active {\n  opacity: 0.8;\n  visibility: visible;\n  pointer-events: all;\n}\n\n.testimonials-modal {\n  background: var(--eerie-black-2);\n  position: relative;\n  padding: 15px;\n  margin: 15px 12px;\n  border: 1px solid var(--jet);\n  border-radius: 14px;\n  box-shadow: var(--shadow-5);\n  transform: scale(1.2);\n  opacity: 0;\n  transition: var(--transition-1);\n  z-index: 2;\n}\n\n.modal-container.active .testimonials-modal {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.modal-close-btn {\n  position: absolute;\n  top: 15px;\n  right: 15px;\n  background: var(--onyx);\n  border-radius: 8px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--white-2);\n  font-size: 18px;\n  opacity: 0.7;\n}\n\n.modal-close-btn:hover,\n.modal-close-btn:focus { opacity: 1; }\n\n.modal-close-btn ion-icon { --ionicon-stroke-width: 50px; }\n\n.modal-avatar-box {\n  background: var(--bg-gradient-onyx);\n  width: max-content;\n  border-radius: 14px;\n  margin-bottom: 15px;\n  box-shadow: var(--shadow-2);\n}\n\n.modal-img-wrapper > img { display: none; }\n\n.modal-title { margin-bottom: 4px; }\n\n.modal-content time {\n  font-size: var(--fs-6);\n  color: var(--light-gray-70);\n  font-weight: var(--fw-300);\n  margin-bottom: 10px;\n}\n\n.modal-content p {\n  color: var(--light-gray);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-300);\n  line-height: 1.6;\n}\n\n\n/**\n * #clients \n */\n\n.clients { margin-bottom: 15px; }\n\n.clients-list {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 15px;\n  margin: 0 -15px;\n  padding: 25px;\n  padding-bottom: 25px;\n  overflow-x: auto;\n  scroll-behavior: smooth;\n  overscroll-behavior-inline: contain;\n  scroll-snap-type: inline mandatory;\n  scroll-padding-inline: 25px;\n}\n\n.clients-item {\n  min-width: 50%;\n  scroll-snap-align: start;\n}\n\n.clients-item img {\n  width: 100%;\n  filter: grayscale(1);\n  transition: var(--transition-1);\n}\n\n.clients-item img:hover { filter: grayscale(0); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #RESUME\n\\*-----------------------------------*/\n\n.article-title { margin-bottom: 30px; }\n\n\n/**\n * education and experience \n */\n\n.timeline { margin-bottom: 30px; }\n\n.timeline .title-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 15px;\n  margin-bottom: 25px;\n}\n\n.timeline-list {\n  font-size: var(--fs-6);\n  margin-left: 45px;\n}\n\n.timeline-item { position: relative; }\n\n.timeline-item:not(:last-child) { margin-bottom: 20px; }\n\n.timeline-item-title {\n  font-size: var(--fs-6);\n  line-height: 1.3;\n  margin-bottom: 7px;\n}\n\n.timeline-list span {\n  color: var(--vegas-gold);\n  font-weight: var(--fw-400);\n  line-height: 1.6;\n}\n\n.timeline-item:not(:last-child)::before {\n  content: \"\";\n  position: absolute;\n  top: -25px;\n  left: -30px;\n  width: 1px;\n  height: calc(100% + 50px);\n  background: var(--jet);\n}\n\n.timeline-item::after {\n  content: \"\";\n  position: absolute;\n  top: 5px;\n  left: -33px;\n  height: 6px;\n  width: 6px;\n  background: var(--text-gradient-yellow);\n  border-radius: 50%;\n  box-shadow: 0 0 0 4px var(--jet);\n}\n\n.timeline-text {\n  color: var(--light-gray);\n  font-weight: var(--fw-300);\n  line-height: 1.6;\n}\n\n\n/**\n * skills \n */\n\n.skills-title { margin-bottom: 20px; }\n\n.skills-list { padding: 20px; }\n\n\n.skills-item:not(:last-child) { margin-bottom: 15px; }\n\n.skill .title-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  margin-bottom: 8px;\n}\n\n.skill .title-wrapper data {\n  color: var(--light-gray);\n  font-size: var(--fs-7);\n  font-weight: var(--fw-300);\n}\n\n.skill-progress-bg {\n  background: var(--jet);\n  width: 100%;\n  height: 8px;\n  border-radius: 10px;\n}\n\n.skill-progress-fill {\n  background: var(--text-gradient-yellow);\n  height: 100%;\n  border-radius: inherit;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #PORTFOLIO\n\\*-----------------------------------*/\n\n.filter-list { display: none; }\n\n.filter-select-box {\n  position: relative;\n  margin-bottom: 25px;\n}\n\n.filter-select {\n  background: var(--eerie-black-2);\n  color: var(--light-gray);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  padding: 12px 16px;\n  border: 1px solid var(--jet);\n  border-radius: 14px;\n  font-size: var(--fs-6);\n  font-weight: var(--fw-300);\n}\n\n.filter-select.active .select-icon { transform: rotate(0.5turn); }\n\n.select-list {\n  background: var(--eerie-black-2);\n  position: absolute;\n  top: calc(100% + 6px);\n  width: 100%;\n  padding: 6px;\n  border: 1px solid var(--jet);\n  border-radius: 14px;\n  z-index: 2;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: 0.15s ease-in-out;\n}\n\n.filter-select.active + .select-list {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: all;\n}\n\n.select-item button {\n  background: var(--eerie-black-2);\n  color: var(--light-gray);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-300);\n  text-transform: capitalize;\n  width: 100%;\n  padding: 8px 10px;\n  border-radius: 8px;\n}\n\n.select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }\n\n.project-list {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 30px;\n  margin-bottom: 10px;\n}\n\n.project-item { display: none; }\n\n.project-item.active {\n  display: block;\n  animation: scaleUp 0.25s ease forwards;\n}\n\n@keyframes scaleUp {\n  0% { transform: scale(0.5); }\n  100% { transform: scale(1); }\n}\n\n.project-item > a { width: 100%; }\n\n.project-img {\n  position: relative;\n  width: 100%;\n  height: 200px;\n  border-radius: 16px;\n  overflow: hidden;\n  margin-bottom: 15px;\n}\n\n.project-img::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  z-index: 1;\n  transition: var(--transition-1);\n}\n\n.project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }\n\n.project-item-icon-box {\n  --scale: 0.8;\n\n  background: var(--jet);\n  color: var(--orange-yellow-crayola);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(var(--scale));\n  font-size: 20px;\n  padding: 18px;\n  border-radius: 12px;\n  opacity: 0;\n  z-index: 1;\n  transition: var(--transition-1);\n}\n\n.project-item > a:hover .project-item-icon-box {\n  --scale: 1;\n  opacity: 1;\n}\n\n.project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }\n\n.project-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: var(--transition-1);\n}\n\n.project-item > a:hover img { transform: scale(1.1); }\n\n.project-title,\n.project-category { margin-left: 10px; }\n\n.project-title {\n  color: var(--white-2);\n  font-size: var(--fs-5);\n  font-weight: var(--fw-400);\n  text-transform: capitalize;\n  line-height: 1.3;\n}\n\n.project-category {\n  color: var(--light-gray-70);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-300);\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #BLOG\n\\*-----------------------------------*/\n\n.blog-posts { margin-bottom: 10px; }\n\n.blog-posts-list {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 20px;\n}\n\n.blog-post-item > a {\n  position: relative;\n  background: var(--border-gradient-onyx);\n  height: 100%;\n  box-shadow: var(--shadow-4);\n  border-radius: 16px;\n  z-index: 1;\n}\n\n.blog-post-item > a::before {\n  content: \"\";\n  position: absolute;\n  inset: 1px;\n  border-radius: inherit;\n  background: var(--eerie-black-1);\n  z-index: -1;\n}\n\n.blog-banner-box {\n  width: 100%;\n  height: 200px;\n  border-radius: 12px;\n  overflow: hidden;\n}\n\n.blog-banner-box img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: var(--transition-1);\n}\n\n.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }\n\n.blog-content { padding: 15px; }\n\n.blog-meta {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 7px;\n  margin-bottom: 10px;\n}\n\n.blog-meta :is(.blog-category, time) {\n  color: var(--light-gray-70);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-300);\n}\n\n.blog-meta .dot {\n  background: var(--light-gray-70);\n  width: 4px;\n  height: 4px;\n  border-radius: 4px;\n}\n\n.blog-item-title {\n  margin-bottom: 10px;\n  line-height: 1.3;\n  transition: var(--transition-1);\n}\n\n.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }\n\n.blog-text {\n  color: var(--light-gray);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-300);\n  line-height: 1.6;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #CONTACT\n\\*-----------------------------------*/\n\n.mapbox {\n  position: relative;\n  height: 250px;\n  width: 100%;\n  border-radius: 16px;\n  margin-bottom: 30px;\n  border: 1px solid var(--jet);\n  overflow: hidden;\n}\n\n.mapbox figure { height: 100%; }\n\n.mapbox iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  filter: grayscale(1) invert(1);\n}\n\n.contact-form { margin-bottom: 10px; }\n\n.form-title { margin-bottom: 20px; }\n\n.input-wrapper {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 25px;\n  margin-bottom: 25px;\n}\n\n.form-input {\n  color: var(--white-2);\n  font-size: var(--fs-6);\n  font-weight: var(--fw-400);\n  padding: 13px 20px;\n  border: 1px solid var(--jet);\n  border-radius: 14px;\n  outline: none;\n}\n\n.form-input::placeholder { font-weight: var(--fw-500); }\n\n.form-input:focus { border-color: var(--orange-yellow-crayola); }\n\ntextarea.form-input {\n  min-height: 100px;\n  height: 120px;\n  max-height: 200px;\n  resize: vertical;\n  margin-bottom: 25px;\n}\n\ntextarea.form-input::-webkit-resizer { display: none; }\n\n.form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }\n\n.form-btn {\n  position: relative;\n  width: 100%;\n  background: var(--border-gradient-onyx);\n  color: var(--orange-yellow-crayola);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  padding: 13px 20px;\n  border-radius: 14px;\n  font-size: var(--fs-6);\n  text-transform: capitalize;\n  box-shadow: var(--shadow-3);\n  z-index: 1;\n  transition: var(--transition-1);\n}\n\n.form-btn::before {\n  content: \"\";\n  position: absolute;\n  inset: 1px;\n  background: var(--bg-gradient-jet);\n  border-radius: inherit;\n  z-index: -1;\n  transition: var(--transition-1);\n}\n\n.form-btn ion-icon { font-size: 16px; }\n\n.form-btn:hover { background: var(--bg-gradient-yellow-1); }\n\n.form-btn:hover::before { background: var(--bg-gradient-yellow-2); }\n\n.form-btn:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n\n.form-btn:disabled:hover { background: var(--border-gradient-onyx); }\n\n.form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #RESPONSIVE\n\\*-----------------------------------*/\n\n/**\n * responsive larger than 450px screen\n */\n\n@media (min-width: 450px) {\n\n  /**\n   * client\n   */\n\n  .clients-item { min-width: calc(33.33% - 10px); }\n\n\n\n  /**\n   * #PORTFOLIO, BLOG \n   */\n\n  .project-img,\n  .blog-banner-box { height: auto; }\n\n}\n\n\n\n\n\n/**\n * responsive larger than 580px screen\n */\n\n@media (min-width: 580px) {\n\n  /**\n   * CUSTOM PROPERTY\n   */\n\n  :root {\n\n    /**\n     * typography\n     */\n\n    --fs-1: 32px;\n    --fs-2: 24px;\n    --fs-3: 26px;\n    --fs-4: 18px;\n    --fs-6: 15px;\n    --fs-7: 15px;\n    --fs-8: 12px;\n\n  }\n\n\n\n  /**\n   * #REUSED STYLE\n   */\n\n  .sidebar, article {\n    width: 520px;\n    margin-inline: auto;\n    padding: 30px;\n  }\n\n  .article-title {\n    font-weight: var(--fw-600);\n    padding-bottom: 15px;\n  }\n\n  .article-title::after {\n    width: 40px;\n    height: 5px;\n  }\n\n  .icon-box {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    font-size: 18px;\n  }\n\n\n\n  /**\n   * #MAIN\n   */\n\n  main {\n    margin-top: 60px;\n    margin-bottom: 100px;\n  }\n\n\n\n  /**\n   * #SIDEBAR\n   */\n\n  .sidebar {\n    max-height: 180px;\n    margin-bottom: 30px;\n  }\n\n  .sidebar.active { max-height: 584px; }\n\n  .sidebar-info { gap: 25px; }\n\n  .avatar-box { border-radius: 30px; }\n\n  .avatar-box img { width: 120px; }\n\n  .info-content .name { margin-bottom: 15px; }\n\n  .info-content .title { padding: 5px 18px; }\n\n  .info_more-btn {\n    top: -30px;\n    right: -30px;\n    padding: 10px 15px;\n  }\n\n  .info_more-btn span {\n    display: block;\n    font-size: var(--fs-8);\n  }\n\n  .info_more-btn ion-icon { display: none; }\n\n  .separator { margin: 32px 0; }\n\n  .contacts-list { gap: 20px; }\n\n  .contact-info {\n    max-width: calc(100% - 64px);\n    width: calc(100% - 64px);\n  }\n\n\n\n  /**\n   * #NAVBAR\n   */\n\n  .navbar { border-radius: 20px 20px 0 0; }\n\n  .navbar-list { gap: 20px; }\n\n  .navbar-link { --fs-8: 14px; }\n\n\n\n  /**\n   * #ABOUT\n   */\n\n  .about .article-title { margin-bottom: 20px; }\n\n  .about-text { margin-bottom: 40px; }\n\n  /* service */\n\n  .service-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: flex-start;\n    gap: 18px;\n    padding: 30px;\n  }\n\n  .service-icon-box {\n    margin-bottom: 0;\n    margin-top: 5px;\n  }\n\n  .service-content-box { text-align: left; }\n\n  /* testimonials */\n\n  .testimonials-title { margin-bottom: 25px; }\n\n  .testimonials-list {\n    gap: 30px;\n    margin: 0 -30px;\n    padding: 30px;\n    padding-bottom: 35px;\n  }\n\n  .content-card {\n    padding: 30px;\n    padding-top: 25px;\n  }\n\n  .testimonials-avatar-box {\n    transform: translate(30px, -30px);\n    border-radius: 20px;\n  }\n\n  .testimonials-avatar-box img { width: 80px; }\n\n  .testimonials-item-title {\n    margin-bottom: 10px;\n    margin-left: 95px;\n  }\n\n  .testimonials-text {\n    line-clamp: 2;\n    -webkit-line-clamp: 2;\n  }\n\n  /* testimonials modal */\n\n  .modal-container { padding: 20px; }\n\n  .testimonials-modal {\n    display: flex;\n    justify-content: flex-start;\n    align-items: stretch;\n    gap: 25px;\n    padding: 30px;\n    border-radius: 20px;\n  }\n\n  .modal-img-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .modal-avatar-box {\n    border-radius: 18px;\n    margin-bottom: 0;\n  }\n\n  .modal-avatar-box img { width: 65px; }\n\n  .modal-img-wrapper > img {\n    display: block;\n    flex-grow: 1;\n    width: 35px;\n  }\n\n  /* clients */\n\n  .clients-list {\n    gap: 50px;\n    margin: 0 -30px;\n    padding: 45px;\n    scroll-padding-inline: 45px;\n  }\n\n  .clients-item { min-width: calc(33.33% - 35px); }\n\n\n\n  /**\n   * #RESUME\n   */\n\n  .timeline-list { margin-left: 65px; }\n\n  .timeline-item:not(:last-child)::before { left: -40px; }\n\n  .timeline-item::after {\n    height: 8px;\n    width: 8px;\n    left: -43px;\n  }\n\n  .skills-item:not(:last-child) { margin-bottom: 25px; }\n\n\n\n  /**\n   * #PORTFOLIO, BLOG\n   */\n\n  .project-img, .blog-banner-box { border-radius: 16px; }\n\n  .blog-posts-list { gap: 30px; }\n\n  .blog-content { padding: 25px; }\n\n\n\n  /**\n   * #CONTACT\n   */\n\n  .mapbox {\n    height: 380px;\n    border-radius: 18px;\n  }\n\n  .input-wrapper {\n    gap: 30px;\n    margin-bottom: 30px;\n  }\n\n  .form-input { padding: 15px 20px; }\n\n  textarea.form-input { margin-bottom: 30px; }\n\n  .form-btn {\n    --fs-6: 16px;\n    padding: 16px 20px;\n  }\n\n  .form-btn ion-icon { font-size: 18px; }\n\n}\n\n\n\n\n\n/**\n * responsive larger than 768px screen\n */\n\n@media (min-width: 768px) {\n\n  /**\n   * REUSED STYLE\n   */\n\n  .sidebar, article { width: 700px; }\n\n  .has-scrollbar::-webkit-scrollbar-button { width: 100px; }\n\n\n\n  /**\n   * SIDEBAR\n   */\n\n  .contacts-list {\n    grid-template-columns: 1fr 1fr;\n    gap: 30px 15px;\n  }\n\n\n\n  /**\n   * NAVBAR\n   */\n\n  .navbar-link { --fs-8: 15px; }\n\n\n\n  /**\n   * ABOUT\n   */\n\n  /* testimonials modal */\n\n  .testimonials-modal {\n    gap: 35px;\n    max-width: 680px;\n  }\n\n  .modal-avatar-box img { width: 80px; }\n\n\n\n  /**\n   * PORTFOLIO\n   */\n\n  .article-title { padding-bottom: 20px; }\n\n  .filter-select-box { display: none; }\n\n  .filter-list {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 25px;\n    padding-left: 5px;\n    margin-bottom: 30px;\n  }\n\n  .filter-item button {\n    color: var(--light-gray);\n    font-size: var(--fs-5);\n    transition: var(--transition-1);\n  }\n\n  .filter-item button:hover { color: var(--light-gray-70); }\n\n  .filter-item button.active { color: var(--orange-yellow-crayola); }\n\n  /* portfolio and blog grid */\n\n  .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }\n\n\n\n  /**\n   * CONTACT\n   */\n\n  .input-wrapper { grid-template-columns: 1fr 1fr; }\n\n  .form-btn {\n    width: max-content;\n    margin-left: auto;\n  }\n  \n}\n\n\n\n\n\n/**\n * responsive larger than 1024px screen\n */\n\n@media (min-width: 1024px) {\n\n  /**\n   * CUSTOM PROPERTY\n   */\n\n  :root {\n\n    /**\n    * shadow\n    */\n\n    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);\n    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);\n    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);\n\n  }\n\n\n\n  /**\n   * REUSED STYLE\n   */\n\n  .sidebar, article {\n    width: 950px;\n    box-shadow: var(--shadow-5);\n  }\n\n\n\n  /**\n   * MAIN \n   */\n\n  main { margin-bottom: 60px; }\n\n  .main-content {\n    position: relative;\n    width: max-content;\n    margin: auto;\n  }\n\n\n\n  /**\n   * NAVBAR\n   */\n\n  .navbar {\n    position: absolute;\n    bottom: auto;\n    top: 0;\n    left: auto;\n    right: 0;\n    width: max-content;\n    border-radius: 0 20px;\n    padding: 0 20px;\n    box-shadow: none;\n  }\n\n  .navbar-list {\n    gap: 30px;\n    padding: 0 20px;\n  }\n\n  .navbar-link { font-weight: var(--fw-500); }\n\n\n\n  /**\n   * ABOUT\n   */\n\n  /* service */\n\n  .service-list {\n    grid-template-columns: 1fr 1fr;\n    gap: 20px 25px;\n  }\n\n  /* testimonials */\n\n  .testimonials-item { min-width: calc(50% - 15px); }\n\n  /* clients */\n\n  .clients-item { min-width: calc(25% - 38px); }\n\n\n\n  /**\n   * PORTFOLIO\n   */\n\n  .project-list { grid-template-columns: repeat(3, 1fr); }\n\n\n\n  /**\n   * BLOG\n   */\n\n  .blog-banner-box { height: 230px; }\n\n}\n\n\n\n\n\n/**\n * responsive larger than 1250px screen\n */\n\n@media (min-width: 1250px) {\n\n  /**\n   * RESET\n   */\n\n  body::-webkit-scrollbar { width: 20px; }\n\n  body::-webkit-scrollbar-track { background: var(--smoky-black); }\n\n  body::-webkit-scrollbar-thumb {\n    border: 5px solid var(--smoky-black);\n    background: hsla(0, 0%, 100%, 0.1);\n    border-radius: 20px;\n    box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),\n                inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);\n  }\n\n  body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }\n\n  body::-webkit-scrollbar-button { height: 60px; }\n\n\n\n  /**\n   * REUSED STYLE\n   */\n\n  .sidebar, article { width: auto; }\n\n  article { min-height: 100%; }\n\n\n\n  /**\n   * MAIN\n   */\n\n  main {\n    max-width: 1200px;\n    margin-inline: auto;\n    display: flex;\n    justify-content: center;\n    align-items: stretch;\n    gap: 25px;\n  }\n\n  .main-content {\n    min-width: 75%;\n    width: 75%;\n    margin: 0;\n  }\n\n\n\n  /**\n   * SIDEBAR\n   */\n\n  .sidebar {\n    position: sticky;\n    top: 60px;\n    max-height: max-content;\n    height: 100%;\n    margin-bottom: 0;\n    padding-top: 60px;\n    z-index: 1;\n  }\n\n  .sidebar-info { flex-direction: column; }\n\n  .avatar-box img { width: 150px; }\n\n  .info-content .name {\n    white-space: nowrap;\n    text-align: center;\n  }\n\n  .info-content .title { margin: auto; }\n\n  .info_more-btn { display: none; }\n\n  .sidebar-info_more {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .contacts-list { grid-template-columns: 1fr; }\n\n  .contact-info :is(.contact-link) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .contact-info :is(.contact-link, time, address) {\n    --fs-7: 14px;\n    font-weight: var(--fw-300);\n  }\n\n  .separator:last-of-type {\n    margin: 15px 0;\n    opacity: 0;\n  }\n\n  .social-list { justify-content: center; }\n\n\n\n  /**\n\t * RESUME\n\t */\n\n  .timeline-text { max-width: 700px; }\n\n}"
  },
  {
    "path": "assets/js/script.js",
    "content": "'use strict';\n\n\n\n// element toggle function\nconst elementToggleFunc = function (elem) { elem.classList.toggle(\"active\"); }\n\n\n\n// sidebar variables\nconst sidebar = document.querySelector(\"[data-sidebar]\");\nconst sidebarBtn = document.querySelector(\"[data-sidebar-btn]\");\n\n// sidebar toggle functionality for mobile\nsidebarBtn.addEventListener(\"click\", function () { elementToggleFunc(sidebar); });\n\n\n\n// testimonials variables\nconst testimonialsItem = document.querySelectorAll(\"[data-testimonials-item]\");\nconst modalContainer = document.querySelector(\"[data-modal-container]\");\nconst modalCloseBtn = document.querySelector(\"[data-modal-close-btn]\");\nconst overlay = document.querySelector(\"[data-overlay]\");\n\n// modal variable\nconst modalImg = document.querySelector(\"[data-modal-img]\");\nconst modalTitle = document.querySelector(\"[data-modal-title]\");\nconst modalText = document.querySelector(\"[data-modal-text]\");\n\n// modal toggle function\nconst testimonialsModalFunc = function () {\n  modalContainer.classList.toggle(\"active\");\n  overlay.classList.toggle(\"active\");\n}\n\n// add click event to all modal items\nfor (let i = 0; i < testimonialsItem.length; i++) {\n\n  testimonialsItem[i].addEventListener(\"click\", function () {\n\n    modalImg.src = this.querySelector(\"[data-testimonials-avatar]\").src;\n    modalImg.alt = this.querySelector(\"[data-testimonials-avatar]\").alt;\n    modalTitle.innerHTML = this.querySelector(\"[data-testimonials-title]\").innerHTML;\n    modalText.innerHTML = this.querySelector(\"[data-testimonials-text]\").innerHTML;\n\n    testimonialsModalFunc();\n\n  });\n\n}\n\n// add click event to modal close button\nmodalCloseBtn.addEventListener(\"click\", testimonialsModalFunc);\noverlay.addEventListener(\"click\", testimonialsModalFunc);\n\n\n\n// custom select variables\nconst select = document.querySelector(\"[data-select]\");\nconst selectItems = document.querySelectorAll(\"[data-select-item]\");\nconst selectValue = document.querySelector(\"[data-selecct-value]\");\nconst filterBtn = document.querySelectorAll(\"[data-filter-btn]\");\n\nselect.addEventListener(\"click\", function () { elementToggleFunc(this); });\n\n// add event in all select items\nfor (let i = 0; i < selectItems.length; i++) {\n  selectItems[i].addEventListener(\"click\", function () {\n\n    let selectedValue = this.innerText.toLowerCase();\n    selectValue.innerText = this.innerText;\n    elementToggleFunc(select);\n    filterFunc(selectedValue);\n\n  });\n}\n\n// filter variables\nconst filterItems = document.querySelectorAll(\"[data-filter-item]\");\n\nconst filterFunc = function (selectedValue) {\n\n  for (let i = 0; i < filterItems.length; i++) {\n\n    if (selectedValue === \"all\") {\n      filterItems[i].classList.add(\"active\");\n    } else if (selectedValue === filterItems[i].dataset.category) {\n      filterItems[i].classList.add(\"active\");\n    } else {\n      filterItems[i].classList.remove(\"active\");\n    }\n\n  }\n\n}\n\n// add event in all filter button items for large screen\nlet lastClickedBtn = filterBtn[0];\n\nfor (let i = 0; i < filterBtn.length; i++) {\n\n  filterBtn[i].addEventListener(\"click\", function () {\n\n    let selectedValue = this.innerText.toLowerCase();\n    selectValue.innerText = this.innerText;\n    filterFunc(selectedValue);\n\n    lastClickedBtn.classList.remove(\"active\");\n    this.classList.add(\"active\");\n    lastClickedBtn = this;\n\n  });\n\n}\n\n\n\n// contact form variables\nconst form = document.querySelector(\"[data-form]\");\nconst formInputs = document.querySelectorAll(\"[data-form-input]\");\nconst formBtn = document.querySelector(\"[data-form-btn]\");\n\n// add event to all form input field\nfor (let i = 0; i < formInputs.length; i++) {\n  formInputs[i].addEventListener(\"input\", function () {\n\n    // check form validation\n    if (form.checkValidity()) {\n      formBtn.removeAttribute(\"disabled\");\n    } else {\n      formBtn.setAttribute(\"disabled\", \"\");\n    }\n\n  });\n}\n\n\n\n// page navigation variables\nconst navigationLinks = document.querySelectorAll(\"[data-nav-link]\");\nconst pages = document.querySelectorAll(\"[data-page]\");\n\n// add event to all nav link\nfor (let i = 0; i < navigationLinks.length; i++) {\n  navigationLinks[i].addEventListener(\"click\", function () {\n\n    for (let i = 0; i < pages.length; i++) {\n      if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {\n        pages[i].classList.add(\"active\");\n        navigationLinks[i].classList.add(\"active\");\n        window.scrollTo(0, 0);\n      } else {\n        pages[i].classList.remove(\"active\");\n        navigationLinks[i].classList.remove(\"active\");\n      }\n    }\n\n  });\n}"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>vCard - Personal Portfolio</title>\n\n  <!--\n    - favicon\n  -->\n  <link rel=\"shortcut icon\" href=\"./assets/images/logo.ico\" type=\"image/x-icon\">\n\n  <!--\n    - custom css link\n  -->\n  <link rel=\"stylesheet\" href=\"./assets/css/style.css\">\n\n  <!--\n    - google font link\n  -->\n  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  <link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n</head>\n\n<body>\n\n  <!--\n    - #MAIN\n  -->\n\n  <main>\n\n    <!--\n      - #SIDEBAR\n    -->\n\n    <aside class=\"sidebar\" data-sidebar>\n\n      <div class=\"sidebar-info\">\n\n        <figure class=\"avatar-box\">\n          <img src=\"./assets/images/my-avatar.png\" alt=\"Richard hanrick\" width=\"80\">\n        </figure>\n\n        <div class=\"info-content\">\n          <h1 class=\"name\" title=\"Richard hanrick\">Richard hanrick</h1>\n\n          <p class=\"title\">Web developer</p>\n        </div>\n\n        <button class=\"info_more-btn\" data-sidebar-btn>\n          <span>Show Contacts</span>\n\n          <ion-icon name=\"chevron-down\"></ion-icon>\n        </button>\n\n      </div>\n\n      <div class=\"sidebar-info_more\">\n\n        <div class=\"separator\"></div>\n\n        <ul class=\"contacts-list\">\n\n          <li class=\"contact-item\">\n\n            <div class=\"icon-box\">\n              <ion-icon name=\"mail-outline\"></ion-icon>\n            </div>\n\n            <div class=\"contact-info\">\n              <p class=\"contact-title\">Email</p>\n\n              <a href=\"mailto:richard@example.com\" class=\"contact-link\">richard@example.com</a>\n            </div>\n\n          </li>\n\n          <li class=\"contact-item\">\n\n            <div class=\"icon-box\">\n              <ion-icon name=\"phone-portrait-outline\"></ion-icon>\n            </div>\n\n            <div class=\"contact-info\">\n              <p class=\"contact-title\">Phone</p>\n\n              <a href=\"tel:+12133522795\" class=\"contact-link\">+1 (213) 352-2795</a>\n            </div>\n\n          </li>\n\n          <li class=\"contact-item\">\n\n            <div class=\"icon-box\">\n              <ion-icon name=\"calendar-outline\"></ion-icon>\n            </div>\n\n            <div class=\"contact-info\">\n              <p class=\"contact-title\">Birthday</p>\n\n              <time datetime=\"1982-06-23\">June 23, 1982</time>\n            </div>\n\n          </li>\n\n          <li class=\"contact-item\">\n\n            <div class=\"icon-box\">\n              <ion-icon name=\"location-outline\"></ion-icon>\n            </div>\n\n            <div class=\"contact-info\">\n              <p class=\"contact-title\">Location</p>\n\n              <address>Sacramento, California, USA</address>\n            </div>\n\n          </li>\n\n        </ul>\n\n        <div class=\"separator\"></div>\n\n        <ul class=\"social-list\">\n\n          <li class=\"social-item\">\n            <a href=\"#\" class=\"social-link\">\n              <ion-icon name=\"logo-facebook\"></ion-icon>\n            </a>\n          </li>\n\n          <li class=\"social-item\">\n            <a href=\"#\" class=\"social-link\">\n              <ion-icon name=\"logo-twitter\"></ion-icon>\n            </a>\n          </li>\n\n          <li class=\"social-item\">\n            <a href=\"#\" class=\"social-link\">\n              <ion-icon name=\"logo-instagram\"></ion-icon>\n            </a>\n          </li>\n\n        </ul>\n\n      </div>\n\n    </aside>\n\n\n\n\n\n    <!--\n      - #main-content\n    -->\n\n    <div class=\"main-content\">\n\n      <!--\n        - #NAVBAR\n      -->\n\n      <nav class=\"navbar\">\n\n        <ul class=\"navbar-list\">\n\n          <li class=\"navbar-item\">\n            <button class=\"navbar-link  active\" data-nav-link>About</button>\n          </li>\n\n          <li class=\"navbar-item\">\n            <button class=\"navbar-link\" data-nav-link>Resume</button>\n          </li>\n\n          <li class=\"navbar-item\">\n            <button class=\"navbar-link\" data-nav-link>Portfolio</button>\n          </li>\n\n          <li class=\"navbar-item\">\n            <button class=\"navbar-link\" data-nav-link>Blog</button>\n          </li>\n\n          <li class=\"navbar-item\">\n            <button class=\"navbar-link\" data-nav-link>Contact</button>\n          </li>\n\n        </ul>\n\n      </nav>\n\n\n\n\n\n      <!--\n        - #ABOUT\n      -->\n\n      <article class=\"about  active\" data-page=\"about\">\n\n        <header>\n          <h2 class=\"h2 article-title\">About me</h2>\n        </header>\n\n        <section class=\"about-text\">\n          <p>\n            I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.\n            I enjoy\n            turning complex problems into simple, beautiful and intuitive designs.\n          </p>\n\n          <p>\n            My job is to build your website so that it is functional and user-friendly but at the same time attractive.\n            Moreover, I\n            add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring\n            across your\n            message and identity in the most creative way. I created web design for many famous brand companies.\n          </p>\n        </section>\n\n\n        <!--\n          - service\n        -->\n\n        <section class=\"service\">\n\n          <h3 class=\"h3 service-title\">What i'm doing</h3>\n\n          <ul class=\"service-list\">\n\n            <li class=\"service-item\">\n\n              <div class=\"service-icon-box\">\n                <img src=\"./assets/images/icon-design.svg\n                \" alt=\"design icon\" width=\"40\">\n              </div>\n\n              <div class=\"service-content-box\">\n                <h4 class=\"h4 service-item-title\">Web design</h4>\n\n                <p class=\"service-item-text\">\n                  The most modern and high-quality design made at a professional level.\n                </p>\n              </div>\n\n            </li>\n\n            <li class=\"service-item\">\n\n              <div class=\"service-icon-box\">\n                <img src=\"./assets/images/icon-dev.svg\" alt=\"Web development icon\" width=\"40\">\n              </div>\n\n              <div class=\"service-content-box\">\n                <h4 class=\"h4 service-item-title\">Web development</h4>\n\n                <p class=\"service-item-text\">\n                  High-quality development of sites at the professional level.\n                </p>\n              </div>\n\n            </li>\n\n            <li class=\"service-item\">\n\n              <div class=\"service-icon-box\">\n                <img src=\"./assets/images/icon-app.svg\" alt=\"mobile app icon\" width=\"40\">\n              </div>\n\n              <div class=\"service-content-box\">\n                <h4 class=\"h4 service-item-title\">Mobile apps</h4>\n\n                <p class=\"service-item-text\">\n                  Professional development of applications for iOS and Android.\n                </p>\n              </div>\n\n            </li>\n\n            <li class=\"service-item\">\n\n              <div class=\"service-icon-box\">\n                <img src=\"./assets/images/icon-photo.svg\" alt=\"camera icon\" width=\"40\">\n              </div>\n\n              <div class=\"service-content-box\">\n                <h4 class=\"h4 service-item-title\">Photography</h4>\n\n                <p class=\"service-item-text\">\n                  I make high-quality photos of any category at a professional level.\n                </p>\n              </div>\n\n            </li>\n\n          </ul>\n\n        </section>\n\n\n        <!--\n          - testimonials\n        -->\n\n        <section class=\"testimonials\">\n\n          <h3 class=\"h3 testimonials-title\">Testimonials</h3>\n\n          <ul class=\"testimonials-list has-scrollbar\">\n\n            <li class=\"testimonials-item\">\n              <div class=\"content-card\" data-testimonials-item>\n\n                <figure class=\"testimonials-avatar-box\">\n                  <img src=\"./assets/images/avatar-1.png\" alt=\"Daniel lewis\" width=\"60\" data-testimonials-avatar>\n                </figure>\n\n                <h4 class=\"h4 testimonials-item-title\" data-testimonials-title>Daniel lewis</h4>\n\n                <div class=\"testimonials-text\" data-testimonials-text>\n                  <p>\n                    Richard was hired to create a corporate identity. We were very pleased with the work done. She has a\n                    lot of experience\n                    and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt\n                    consectetur adipiscing\n                    elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n                  </p>\n                </div>\n\n              </div>\n            </li>\n\n            <li class=\"testimonials-item\">\n              <div class=\"content-card\" data-testimonials-item>\n\n                <figure class=\"testimonials-avatar-box\">\n                  <img src=\"./assets/images/avatar-2.png\" alt=\"Jessica miller\" width=\"60\" data-testimonials-avatar>\n                </figure>\n\n                <h4 class=\"h4 testimonials-item-title\" data-testimonials-title>Jessica miller</h4>\n\n                <div class=\"testimonials-text\" data-testimonials-text>\n                  <p>\n                    Richard was hired to create a corporate identity. We were very pleased with the work done. She has a\n                    lot of experience\n                    and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt\n                    consectetur adipiscing\n                    elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n                  </p>\n                </div>\n\n              </div>\n            </li>\n\n            <li class=\"testimonials-item\">\n              <div class=\"content-card\" data-testimonials-item>\n\n                <figure class=\"testimonials-avatar-box\">\n                  <img src=\"./assets/images/avatar-3.png\" alt=\"Emily evans\" width=\"60\" data-testimonials-avatar>\n                </figure>\n\n                <h4 class=\"h4 testimonials-item-title\" data-testimonials-title>Emily evans</h4>\n\n                <div class=\"testimonials-text\" data-testimonials-text>\n                  <p>\n                    Richard was hired to create a corporate identity. We were very pleased with the work done. She has a\n                    lot of experience\n                    and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt\n                    consectetur adipiscing\n                    elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n                  </p>\n                </div>\n\n              </div>\n            </li>\n\n            <li class=\"testimonials-item\">\n              <div class=\"content-card\" data-testimonials-item>\n\n                <figure class=\"testimonials-avatar-box\">\n                  <img src=\"./assets/images/avatar-4.png\" alt=\"Henry william\" width=\"60\" data-testimonials-avatar>\n                </figure>\n\n                <h4 class=\"h4 testimonials-item-title\" data-testimonials-title>Henry william</h4>\n\n                <div class=\"testimonials-text\" data-testimonials-text>\n                  <p>\n                    Richard was hired to create a corporate identity. We were very pleased with the work done. She has a\n                    lot of experience\n                    and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt\n                    consectetur adipiscing\n                    elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n                  </p>\n                </div>\n\n              </div>\n            </li>\n\n          </ul>\n\n        </section>\n\n\n        <!--\n          - testimonials modal\n        -->\n\n        <div class=\"modal-container\" data-modal-container>\n\n          <div class=\"overlay\" data-overlay></div>\n\n          <section class=\"testimonials-modal\">\n\n            <button class=\"modal-close-btn\" data-modal-close-btn>\n              <ion-icon name=\"close-outline\"></ion-icon>\n            </button>\n\n            <div class=\"modal-img-wrapper\">\n              <figure class=\"modal-avatar-box\">\n                <img src=\"./assets/images/avatar-1.png\" alt=\"Daniel lewis\" width=\"80\" data-modal-img>\n              </figure>\n\n              <img src=\"./assets/images/icon-quote.svg\" alt=\"quote icon\">\n            </div>\n\n            <div class=\"modal-content\">\n\n              <h4 class=\"h3 modal-title\" data-modal-title>Daniel lewis</h4>\n\n              <time datetime=\"2021-06-14\">14 June, 2021</time>\n\n              <div data-modal-text>\n                <p>\n                  Richard was hired to create a corporate identity. We were very pleased with the work done. She has a\n                  lot of experience\n                  and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt\n                  consectetur adipiscing\n                  elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n                </p>\n              </div>\n\n            </div>\n\n          </section>\n\n        </div>\n\n\n        <!--\n          - clients\n        -->\n\n        <section class=\"clients\">\n\n          <h3 class=\"h3 clients-title\">Clients</h3>\n\n          <ul class=\"clients-list has-scrollbar\">\n\n            <li class=\"clients-item\">\n              <a href=\"#\">\n                <img src=\"./assets/images/logo-1-color.png\" alt=\"client logo\">\n              </a>\n            </li>\n\n            <li class=\"clients-item\">\n              <a href=\"#\">\n                <img src=\"./assets/images/logo-2-color.png\" alt=\"client logo\">\n              </a>\n            </li>\n\n            <li class=\"clients-item\">\n              <a href=\"#\">\n                <img src=\"./assets/images/logo-3-color.png\" alt=\"client logo\">\n              </a>\n            </li>\n\n            <li class=\"clients-item\">\n              <a href=\"#\">\n                <img src=\"./assets/images/logo-4-color.png\" alt=\"client logo\">\n              </a>\n            </li>\n\n            <li class=\"clients-item\">\n              <a href=\"#\">\n                <img src=\"./assets/images/logo-5-color.png\" alt=\"client logo\">\n              </a>\n            </li>\n\n            <li class=\"clients-item\">\n              <a href=\"#\">\n                <img src=\"./assets/images/logo-6-color.png\" alt=\"client logo\">\n              </a>\n            </li>\n\n          </ul>\n\n        </section>\n\n      </article>\n\n\n\n\n\n      <!--\n        - #RESUME\n      -->\n\n      <article class=\"resume\" data-page=\"resume\">\n\n        <header>\n          <h2 class=\"h2 article-title\">Resume</h2>\n        </header>\n\n        <section class=\"timeline\">\n\n          <div class=\"title-wrapper\">\n            <div class=\"icon-box\">\n              <ion-icon name=\"book-outline\"></ion-icon>\n            </div>\n\n            <h3 class=\"h3\">Education</h3>\n          </div>\n\n          <ol class=\"timeline-list\">\n\n            <li class=\"timeline-item\">\n\n              <h4 class=\"h4 timeline-item-title\">University school of the arts</h4>\n\n              <span>2007 — 2008</span>\n\n              <p class=\"timeline-text\">\n                Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et\n                quas molestias\n                exceptur.\n              </p>\n\n            </li>\n\n            <li class=\"timeline-item\">\n\n              <h4 class=\"h4 timeline-item-title\">New york academy of art</h4>\n\n              <span>2006 — 2007</span>\n\n              <p class=\"timeline-text\">\n                Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est\n                omnis..\n              </p>\n\n            </li>\n\n            <li class=\"timeline-item\">\n\n              <h4 class=\"h4 timeline-item-title\">High school of art and design</h4>\n\n              <span>2002 — 2004</span>\n\n              <p class=\"timeline-text\">\n                Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur\n                magni dolores\n                eos.\n              </p>\n\n            </li>\n\n          </ol>\n\n        </section>\n\n        <section class=\"timeline\">\n\n          <div class=\"title-wrapper\">\n            <div class=\"icon-box\">\n              <ion-icon name=\"book-outline\"></ion-icon>\n            </div>\n\n            <h3 class=\"h3\">Experience</h3>\n          </div>\n\n          <ol class=\"timeline-list\">\n\n            <li class=\"timeline-item\">\n\n              <h4 class=\"h4 timeline-item-title\">Creative director</h4>\n\n              <span>2015 — Present</span>\n\n              <p class=\"timeline-text\">\n                Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas\n                molestias\n                exceptur.\n              </p>\n\n            </li>\n\n            <li class=\"timeline-item\">\n\n              <h4 class=\"h4 timeline-item-title\">Art director</h4>\n\n              <span>2013 — 2015</span>\n\n              <p class=\"timeline-text\">\n                Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et\n                quas molestias\n                exceptur.\n              </p>\n\n            </li>\n\n            <li class=\"timeline-item\">\n\n              <h4 class=\"h4 timeline-item-title\">Web designer</h4>\n\n              <span>2010 — 2013</span>\n\n              <p class=\"timeline-text\">\n                Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et\n                quas molestias\n                exceptur.\n              </p>\n\n            </li>\n\n          </ol>\n\n        </section>\n\n        <section class=\"skill\">\n\n          <h3 class=\"h3 skills-title\">My skills</h3>\n\n          <ul class=\"skills-list content-card\">\n\n            <li class=\"skills-item\">\n\n              <div class=\"title-wrapper\">\n                <h5 class=\"h5\">Web design</h5>\n                <data value=\"80\">80%</data>\n              </div>\n\n              <div class=\"skill-progress-bg\">\n                <div class=\"skill-progress-fill\" style=\"width: 80%;\"></div>\n              </div>\n\n            </li>\n\n            <li class=\"skills-item\">\n\n              <div class=\"title-wrapper\">\n                <h5 class=\"h5\">Graphic design</h5>\n                <data value=\"70\">70%</data>\n              </div>\n\n              <div class=\"skill-progress-bg\">\n                <div class=\"skill-progress-fill\" style=\"width: 70%;\"></div>\n              </div>\n\n            </li>\n\n            <li class=\"skills-item\">\n\n              <div class=\"title-wrapper\">\n                <h5 class=\"h5\">Branding</h5>\n                <data value=\"90\">90%</data>\n              </div>\n\n              <div class=\"skill-progress-bg\">\n                <div class=\"skill-progress-fill\" style=\"width: 90%;\"></div>\n              </div>\n\n            </li>\n\n            <li class=\"skills-item\">\n\n              <div class=\"title-wrapper\">\n                <h5 class=\"h5\">WordPress</h5>\n                <data value=\"50\">50%</data>\n              </div>\n\n              <div class=\"skill-progress-bg\">\n                <div class=\"skill-progress-fill\" style=\"width: 50%;\"></div>\n              </div>\n\n            </li>\n\n          </ul>\n\n        </section>\n\n      </article>\n\n\n\n\n\n      <!--\n        - #PORTFOLIO\n      -->\n\n      <article class=\"portfolio\" data-page=\"portfolio\">\n\n        <header>\n          <h2 class=\"h2 article-title\">Portfolio</h2>\n        </header>\n\n        <section class=\"projects\">\n\n          <ul class=\"filter-list\">\n\n            <li class=\"filter-item\">\n              <button class=\"active\" data-filter-btn>All</button>\n            </li>\n\n            <li class=\"filter-item\">\n              <button data-filter-btn>Web design</button>\n            </li>\n\n            <li class=\"filter-item\">\n              <button data-filter-btn>Applications</button>\n            </li>\n\n            <li class=\"filter-item\">\n              <button data-filter-btn>Web development</button>\n            </li>\n\n          </ul>\n\n          <div class=\"filter-select-box\">\n\n            <button class=\"filter-select\" data-select>\n\n              <div class=\"select-value\" data-selecct-value>Select category</div>\n\n              <div class=\"select-icon\">\n                <ion-icon name=\"chevron-down\"></ion-icon>\n              </div>\n\n            </button>\n\n            <ul class=\"select-list\">\n\n              <li class=\"select-item\">\n                <button data-select-item>All</button>\n              </li>\n\n              <li class=\"select-item\">\n                <button data-select-item>Web design</button>\n              </li>\n\n              <li class=\"select-item\">\n                <button data-select-item>Applications</button>\n              </li>\n\n              <li class=\"select-item\">\n                <button data-select-item>Web development</button>\n              </li>\n\n            </ul>\n\n          </div>\n\n          <ul class=\"project-list\">\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"web development\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-1.jpg\" alt=\"finance\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">Finance</h3>\n\n                <p class=\"project-category\">Web development</p>\n\n              </a>\n            </li>\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"web development\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-2.png\" alt=\"orizon\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">Orizon</h3>\n\n                <p class=\"project-category\">Web development</p>\n\n              </a>\n            </li>\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"web design\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-3.jpg\" alt=\"fundo\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">Fundo</h3>\n\n                <p class=\"project-category\">Web design</p>\n\n              </a>\n            </li>\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"applications\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-4.png\" alt=\"brawlhalla\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">Brawlhalla</h3>\n\n                <p class=\"project-category\">Applications</p>\n\n              </a>\n            </li>\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"web design\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-5.png\" alt=\"dsm.\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">DSM.</h3>\n\n                <p class=\"project-category\">Web design</p>\n\n              </a>\n            </li>\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"web design\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-6.png\" alt=\"metaspark\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">MetaSpark</h3>\n\n                <p class=\"project-category\">Web design</p>\n\n              </a>\n            </li>\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"web development\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-7.png\" alt=\"summary\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">Summary</h3>\n\n                <p class=\"project-category\">Web development</p>\n\n              </a>\n            </li>\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"applications\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-8.jpg\" alt=\"task manager\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">Task Manager</h3>\n\n                <p class=\"project-category\">Applications</p>\n\n              </a>\n            </li>\n\n            <li class=\"project-item  active\" data-filter-item data-category=\"web development\">\n              <a href=\"#\">\n\n                <figure class=\"project-img\">\n                  <div class=\"project-item-icon-box\">\n                    <ion-icon name=\"eye-outline\"></ion-icon>\n                  </div>\n\n                  <img src=\"./assets/images/project-9.png\" alt=\"arrival\" loading=\"lazy\">\n                </figure>\n\n                <h3 class=\"project-title\">Arrival</h3>\n\n                <p class=\"project-category\">Web development</p>\n\n              </a>\n            </li>\n\n          </ul>\n\n        </section>\n\n      </article>\n\n\n\n\n\n      <!--\n        - #BLOG\n      -->\n\n      <article class=\"blog\" data-page=\"blog\">\n\n        <header>\n          <h2 class=\"h2 article-title\">Blog</h2>\n        </header>\n\n        <section class=\"blog-posts\">\n\n          <ul class=\"blog-posts-list\">\n\n            <li class=\"blog-post-item\">\n              <a href=\"#\">\n\n                <figure class=\"blog-banner-box\">\n                  <img src=\"./assets/images/blog-1.jpg\" alt=\"Design conferences in 2022\" loading=\"lazy\">\n                </figure>\n\n                <div class=\"blog-content\">\n\n                  <div class=\"blog-meta\">\n                    <p class=\"blog-category\">Design</p>\n\n                    <span class=\"dot\"></span>\n\n                    <time datetime=\"2022-02-23\">Fab 23, 2022</time>\n                  </div>\n\n                  <h3 class=\"h3 blog-item-title\">Design conferences in 2022</h3>\n\n                  <p class=\"blog-text\">\n                    Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.\n                  </p>\n\n                </div>\n\n              </a>\n            </li>\n\n            <li class=\"blog-post-item\">\n              <a href=\"#\">\n\n                <figure class=\"blog-banner-box\">\n                  <img src=\"./assets/images/blog-2.jpg\" alt=\"Best fonts every designer\" loading=\"lazy\">\n                </figure>\n\n                <div class=\"blog-content\">\n\n                  <div class=\"blog-meta\">\n                    <p class=\"blog-category\">Design</p>\n\n                    <span class=\"dot\"></span>\n\n                    <time datetime=\"2022-02-23\">Fab 23, 2022</time>\n                  </div>\n\n                  <h3 class=\"h3 blog-item-title\">Best fonts every designer</h3>\n\n                  <p class=\"blog-text\">\n                    Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.\n                  </p>\n\n                </div>\n\n              </a>\n            </li>\n\n            <li class=\"blog-post-item\">\n              <a href=\"#\">\n\n                <figure class=\"blog-banner-box\">\n                  <img src=\"./assets/images/blog-3.jpg\" alt=\"Design digest #80\" loading=\"lazy\">\n                </figure>\n\n                <div class=\"blog-content\">\n\n                  <div class=\"blog-meta\">\n                    <p class=\"blog-category\">Design</p>\n\n                    <span class=\"dot\"></span>\n\n                    <time datetime=\"2022-02-23\">Fab 23, 2022</time>\n                  </div>\n\n                  <h3 class=\"h3 blog-item-title\">Design digest #80</h3>\n\n                  <p class=\"blog-text\">\n                    Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.\n                  </p>\n\n                </div>\n\n              </a>\n            </li>\n\n            <li class=\"blog-post-item\">\n              <a href=\"#\">\n\n                <figure class=\"blog-banner-box\">\n                  <img src=\"./assets/images/blog-4.jpg\" alt=\"UI interactions of the week\" loading=\"lazy\">\n                </figure>\n\n                <div class=\"blog-content\">\n\n                  <div class=\"blog-meta\">\n                    <p class=\"blog-category\">Design</p>\n\n                    <span class=\"dot\"></span>\n\n                    <time datetime=\"2022-02-23\">Fab 23, 2022</time>\n                  </div>\n\n                  <h3 class=\"h3 blog-item-title\">UI interactions of the week</h3>\n\n                  <p class=\"blog-text\">\n                    Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.\n                  </p>\n\n                </div>\n\n              </a>\n            </li>\n\n            <li class=\"blog-post-item\">\n              <a href=\"#\">\n\n                <figure class=\"blog-banner-box\">\n                  <img src=\"./assets/images/blog-5.jpg\" alt=\"The forgotten art of spacing\" loading=\"lazy\">\n                </figure>\n\n                <div class=\"blog-content\">\n\n                  <div class=\"blog-meta\">\n                    <p class=\"blog-category\">Design</p>\n\n                    <span class=\"dot\"></span>\n\n                    <time datetime=\"2022-02-23\">Fab 23, 2022</time>\n                  </div>\n\n                  <h3 class=\"h3 blog-item-title\">The forgotten art of spacing</h3>\n\n                  <p class=\"blog-text\">\n                    Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                  </p>\n\n                </div>\n\n              </a>\n            </li>\n\n            <li class=\"blog-post-item\">\n              <a href=\"#\">\n\n                <figure class=\"blog-banner-box\">\n                  <img src=\"./assets/images/blog-6.jpg\" alt=\"Design digest #79\" loading=\"lazy\">\n                </figure>\n\n                <div class=\"blog-content\">\n\n                  <div class=\"blog-meta\">\n                    <p class=\"blog-category\">Design</p>\n\n                    <span class=\"dot\"></span>\n\n                    <time datetime=\"2022-02-23\">Fab 23, 2022</time>\n                  </div>\n\n                  <h3 class=\"h3 blog-item-title\">Design digest #79</h3>\n\n                  <p class=\"blog-text\">\n                    Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.\n                  </p>\n\n                </div>\n\n              </a>\n            </li>\n\n          </ul>\n\n        </section>\n\n      </article>\n\n\n\n\n\n      <!--\n        - #CONTACT\n      -->\n\n      <article class=\"contact\" data-page=\"contact\">\n\n        <header>\n          <h2 class=\"h2 article-title\">Contact</h2>\n        </header>\n\n        <section class=\"mapbox\" data-mapbox>\n          <figure>\n            <iframe\n              src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.5651251294!2d-121.58334177520186!3d38.56165006739519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA%2C%20USA!5e0!3m2!1sen!2sbd!4v1647608789441!5m2!1sen!2sbd\"\n              width=\"400\" height=\"300\" loading=\"lazy\"></iframe>\n          </figure>\n        </section>\n\n        <section class=\"contact-form\">\n\n          <h3 class=\"h3 form-title\">Contact Form</h3>\n\n          <form action=\"#\" class=\"form\" data-form>\n\n            <div class=\"input-wrapper\">\n              <input type=\"text\" name=\"fullname\" class=\"form-input\" placeholder=\"Full name\" required data-form-input>\n\n              <input type=\"email\" name=\"email\" class=\"form-input\" placeholder=\"Email address\" required data-form-input>\n            </div>\n\n            <textarea name=\"message\" class=\"form-input\" placeholder=\"Your Message\" required data-form-input></textarea>\n\n            <button class=\"form-btn\" type=\"submit\" disabled data-form-btn>\n              <ion-icon name=\"paper-plane\"></ion-icon>\n              <span>Send Message</span>\n            </button>\n\n          </form>\n\n        </section>\n\n      </article>\n\n    </div>\n\n  </main>\n\n\n\n\n\n\n  <!--\n    - custom js link\n  -->\n  <script src=\"./assets/js/script.js\"></script>\n\n  <!--\n    - ionicon link\n  -->\n  <script type=\"module\" src=\"https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js\"></script>\n  <script nomodule src=\"https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js\"></script>\n\n</body>\n\n</html>"
  },
  {
    "path": "index.txt",
    "content": "vCard - Personal Portfolio\n\n# sidebar\n\nalt = Richard hanrick\nRichard hanrick\nWeb developer\n\nShow Contacts\n\nEmail\nrichard@example.com\n\nPhone\n+1 (213) 352-2795\n\nBirthday\nJune 23, 1982\n\nLocation\nSacramento, California, USA\n\n# navbar\n\nAbout\nResume\nPortfolio\nBlog\nContact\n\n# about\n\nAbout me\n\nI'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs.\n\nMy job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.\n\n\n## service\n\nWhat i'm doing\n\nalt = design icon\nWeb design\nThe most modern and high-quality design made at a professional level.\n\nalt = Web development icon\nWeb development\nHigh-quality development of sites at the professional level.\n\nalt = mobile app icon\nMobile apps\nProfessional development of applications for iOS and Android.\n\nalt = camera icon\nPhotography\nI make high-quality photos of any category at a professional level.\n\n\n## testimonials\n\nTestimonials\n\nalt = Daniel lewis\nDaniel lewis\nRichard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n\nalt = Jessica miller\nJessica miller\nRichard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n\nalt = Emily evans\nEmily evans\nRichard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n\nalt = Henry william\nHenry william\nRichard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.\n\n\n## clients\n\nClients\n\nalt = client logo\n\n\n\n# resume\n\nResume\n\nEducation\n\nUniversity school of the arts\n2007 — 2008\nNemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.\n\nNew york academy of art\n2006 — 2007\nRatione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est omnis..\n\nHigh school of art and design\n2002 — 2004\nDuis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur magni dolores eos.\n\nExperience\n\nCreative director\n2015 — Present\nNemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas molestias exceptur.\n\nArt director\n2013 — 2015\nNemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.\n\nWeb designer\n2010 — 2013\nNemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.\n\nMy skills\n\nWeb design\n80%\nGraphic design\n70%\nBranding\n90%\nWordPress\n50%\n\n\n\n# portfolio\n\nPortfolio\n\nAll\nWeb design\nApplications\nWeb development\n\nSelect category\nAll\nWeb design\nApplications\nWeb development\n\nalt = finance\nFinance\nWeb development\n\nalt = orizon\nOrizon\nWeb development\n\nalt = fundo\nFundo\nWeb design\n\nalt = brawlhalla\nBrawlhalla\nApplications\n\nalt = dsm.\nDSM.\nWeb design\n\nalt = metaspark\nMetaSpark\nWeb design\n\nalt = summary\nSummary\nWeb development\n\nalt = task manager\nTask Manager\nApplications\n\nalt = arrival\nArrival\nWeb development\n\n\n\n# blog\n\nBlog\n\nalt = Design conferences in 2022\nDesign\nFab 23, 2022\nDesign conferences in 2022\nVeritatis et quasi architecto beatae vitae dicta sunt, explicabo.\n\nalt = Best fonts every designer\nDesign\nFab 23, 2022\nBest fonts every designer\nSed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.\n\nalt = Design digest #80\nDesign\nFab 23, 2022\nDesign digest #80\nExcepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.\n\nalt = UI interactions of the week\nDesign\nFab 23, 2022\nUI interactions of the week\nEnim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.\n\nalt = The forgotten art of spacing\nDesign\nFab 23, 2022\nThe Forgotten Art Of Spacing\nMaxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\nalt = Design digest #79\nDesign\nFab 23, 2022\nDesign Digest #79\nOptio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.\n\n\n\n# contact\n\nContact\n\nContact Form\n\nFull name\nEmail address\nYour Message\n\nSend Message"
  }
]