[
  {
    "path": "README.md",
    "content": "<div align=\"center\">\n  \n  ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/smith-portfolio)\n  ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/smith-portfolio?style=social)\n  ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/smith-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/BbCLWdF3Bnc?style=social)](https://youtu.be/BbCLWdF3Bnc)\n\n  <br />\n  <br />\n\n  <h2 align=\"center\">Smith - Personal Portfolio Website</h2>\n\n  Smith is a fully responsive personal portfolio website, <br />Responsive for all devices, build using HTML, CSS, and JavaScript.\n\n  <a href=\"https://codewithsadee.github.io/smith-portfolio/\"><strong>➥ Live Demo</strong></a>\n\n</div>\n\n<br />\n\n### Demo Screeshots\n\n![Smith-portfolio Desktop Demo](./readme-images/desktop.png \"Desktop 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### Run Locally\n\nTo run **Smith-portfolio** locally, run this command on your git bash:\n\nLinux and macOS:\n\n```bash\nsudo git clone https://github.com/codewithsadee/smith-portfolio.git\n```\n\nWindows:\n\n```bash\ngit clone https://github.com/codewithsadee/smith-portfolio.git\n```\n\n### Contact\n\nIf you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).\n\n### License\n\nThis project is **free to use** and does not contains any license.\n"
  },
  {
    "path": "assets/css/style.css",
    "content": "/*-----------------------------------*\\\n  #style.css\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  --sonic-silver: hsl(0, 0%, 46%);\n  --spanish-gray: hsl(0, 0%, 60%);\n  --theme-color: hsl(10, 100%, 57%);\n  --light-gray: hsl(0, 0%, 80%);\n  --gray-x-11: hsl(0, 0%, 73%);\n  --dim-gray: hsl(0, 0%, 44%);\n  --cultured: hsl(0, 0%, 98%);\n  --black_10: hsl(0, 0%, 0%, 0.1);\n  --black_20: hsl(0, 0%, 0%, 0.2);\n  --black_30: hsl(0, 0%, 0%, 0.3);\n  --black_70: hsl(0, 0%, 0%, 0.7);\n  --white_10: hsl(0, 0%, 100%, 0.1);\n  --white: hsl(0, 0%, 100%);\n  --black: hsl(0, 0%, 0%);\n\n  /**\n   * typography\n   */\n\n  --ff-poppins: 'Poppins', sans-serif;\n  --ff-mulish: 'Mulish', sans-serif;\n\n  --fs-35: 3.5rem;\n  --fs-30: 3rem;\n  --fs-25: 2.5rem;\n  --fs-18: 1.8rem;\n  --fs-17: 1.7rem;\n  --fs-13: 1.3rem;\n\n  --fw-800: 800;\n  --fw-700: 700;\n  --fw-600: 600;\n  --fw-500: 500;\n  --fw-400: 400;\n\n  /**\n   * spacing\n   */\n\n  --section-padding: 80px;\n\n  /**\n   * shadow\n   */\n\n  --shadow: 0 0 20px hsla(0, 0%, 0%, 0.08);\n\n  /**\n   * radius\n   */\n\n  --radius-10: 10px;\n  --radius-8: 8px;\n\n  /**\n   * transition\n   */\n\n  --transition: 0.25s ease;\n  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);\n\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #RESET\n\\*-----------------------------------*/\n\n*,\n*::before,\n*::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nli { list-style: none; }\n\na {\n  text-decoration: none;\n  color: inherit;\n}\n\na,\nimg,\nspan,\ninput,\nbutton,\ntextarea,\nion-icon { display: block; }\n\nimg { height: auto; }\n\ninput,\nbutton,\ntextarea {\n  background: none;\n  border: none;\n  font: inherit;\n}\n\ninput,\ntextarea { width: 100%; }\n\nbutton { cursor: pointer; }\n\nion-icon { pointer-events: none; }\n\naddress { font-style: normal; }\n\nhtml {\n  font-family: var(--ff-mulish);\n  font-size: 10px;\n  scroll-behavior: smooth;\n}\n\nbody {\n  background-color: var(--white);\n  color: var(--sonic-silver);\n  font-size: 1.6rem;\n  line-height: 1.75;\n  letter-spacing: 0.2px;\n}\n\n:focus-visible { outline-offset: 4px; }\n\n::placeholder { color: var(--dim-gray); }\n\n::-webkit-scrollbar {\n  width: 12px;\n  height: 2px;\n}\n\nbody::-webkit-scrollbar-track { background-color: var(--white); }\n\nbody::-webkit-scrollbar-thumb {\n  background-color: var(--spanish-gray);\n  border: 3px solid var(--white);\n  border-radius: 50px;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #REUSED STYLE\n\\*-----------------------------------*/\n\n.container { padding-inline: 30px; }\n\n.section { padding-block: var(--section-padding); }\n\n.img-holder {\n  aspect-ratio: var(--width) / var(--height);\n  background-color: var(--light-gray);\n  overflow: hidden;\n}\n\n.has-before {\n  position: relative;\n  z-index: 1;\n}\n\n.has-before::before {\n  position: absolute;\n  content: \"\";\n}\n\n.img-cover {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.section-subtitle {\n  color: var(--theme-color);\n  font-family: var(--ff-poppins);\n  font-weight: var(--fw-500);\n  margin-block-end: 6px;\n}\n\n.h1,\n.h2,\n.h3 {\n  color: var(--black);\n  font-family: var(--ff-poppins);\n}\n\n.h1 { font-size: var(--fs-30); }\n\n.h1,\n.h2 {\n  font-weight: var(--fw-800);\n  text-transform: uppercase;\n}\n\n.h2 {\n  font-size: var(--fs-25);\n  line-height: 1.2;\n}\n\n.h1,\n.h3 { line-height: 1.4; }\n\n.h3 { font-size: var(--fs-18); }\n\n.section-title { margin-block-end: 40px; }\n\n:is(.portfolio, .news) .section-title { margin-block-end: 60px; }\n\n.card {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--radius-10);\n}\n\n.card-content {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  bottom: 10px;\n  left: 10px;\n  background-color: var(--white);\n  border-radius: var(--radius-8);\n  padding: 20px 25px;\n  display: grid;\n  align-content: flex-end;\n  opacity: 0;\n  transition: var(--transition);\n}\n\n.card:is(:hover, :focus-within, :active) .card-content { opacity: 1; }\n\n.card-content > ion-icon {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  color: var(--black);\n  font-size: 40px;\n  transform: rotate(-45deg);\n}\n\n.card-text { font-family: var(--ff-poppins); }\n\n.has-scrollbar {\n  display: flex;\n  gap: 20px;\n  overflow-x: auto;\n  padding-block-end: 30px;\n  margin-block-end: -15px;\n  scroll-snap-type: inline mandatory;\n}\n\n.scrollbar-item {\n  min-width: 100%;\n  scroll-snap-align: start;\n}\n\n.has-scrollbar::-webkit-scrollbar-track { background-color: var(--black_20); }\n\n.has-scrollbar::-webkit-scrollbar-thumb { background-color: var(--black_70); }\n\n.has-scrollbar::-webkit-scrollbar-button { width: calc(25% - 25px); }\n\n\n\n\n/*-----------------------------------*\\\n  #HEADER\n\\*-----------------------------------*/\n\n.header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background-color: var(--white);\n  padding-block: 15px;\n  border-block-end: 1px solid var(--black_10);\n  z-index: 4;\n}\n\n.header > .container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 50px;\n}\n\n.logo {\n  color: var(--black);\n  font-family: var(--ff-poppins);\n  font-size: 3.2rem;\n  line-height: 0.9;\n  font-weight: var(--fw-700);\n}\n\n.nav-toggle-btn .line {\n  width: 30px;\n  height: 2px;\n  background-color: var(--black);\n  transition: var(--transition);\n}\n\n.nav-toggle-btn .line:not(:last-child) { margin-block-end: 8px; }\n\n.nav-toggle-btn.active .line-1 { transform: translateY(10px) rotate(45deg); }\n\n.nav-toggle-btn.active .line-2 {\n  transform: translateX(-100%);\n  opacity: 0;\n}\n\n.nav-toggle-btn.active .line-3 { transform: translateY(-10px) rotate(-45deg); }\n\n.navbar {\n  position: absolute;\n  top: calc(100% + 1px);\n  left: 0;\n  width: 100%;\n  background-color: var(--white);\n  padding-inline: 30px;\n  max-height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  transition: 0.3s var(--cubic-out);\n}\n\n.navbar.active {\n  max-height: 250px;\n  visibility: visible;\n  transition-duration: 0.5s;\n}\n\n.navbar-list { margin-block: 25px; }\n\n.navbar-link {\n  color: var(--black);\n  font-family: var(--ff-poppins);\n  font-weight: var(--fw-500);\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #HERO\n\\*-----------------------------------*/\n\n.slide-down-btn { display: none; }\n\n.hero {\n  background-color: var(--cultured);\n  padding-block-start: calc(var(--section-padding) + 30px);\n}\n\n.hero-banner {\n  margin-block-end: 60px;\n  max-height: 500px;\n  border-radius: var(--radius-10);\n  margin-inline: auto;\n}\n\n.hero-title { margin-block: 10px 20px; }\n\n.hero-list { margin-block-end: 25px; }\n\n.hero-list .list-link {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 12px;\n  color: var(--black);\n  font-size: var(--fs-17);\n  padding-block: 6px;\n}\n\n.hero-list .list-link:is(:hover, :focus) { color: var(--theme-color); }\n\n.hero-list .list-link .span,\n.hero-list .list-link ion-icon { transition: var(--transition); }\n\n.hero-list .list-link:is(:hover, :focus) ion-icon { transform: rotate(-45deg); }\n\n.exp-list .list-item {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 15px;\n  font-family: var(--ff-poppins);\n  line-height: 1.4;\n}\n\n.exp-list .list-item:not(:last-child) { margin-block-end: 15px; }\n\n.exp-list .strong {\n  color: var(--black);\n  font-size: var(--fs-35);\n  font-weight: var(--fw-600);\n}\n\n.exp-list .span { font-size: var(--fs-13); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #SKILLS\n\\*-----------------------------------*/\n\n.skills-banner { display: none; }\n\n.skills { background-color: var(--black); }\n\n.skills .section-title { color: var(--white); }\n\n.skills .section-text {\n  color: var(--gray-x-11);\n  margin-block: 40px 45px;\n}\n\n.skills-item:not(:last-child) { margin-block-end: 25px; }\n\n.skills-list .wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--white);\n  font-family: var(--ff-poppins);\n  margin-block-end: 10px;\n}\n\n.skill-title {\n  font-size: unset;\n  font-weight: unset;\n}\n\n.skills .progress-box { background-color: var(--white_10); }\n\n.skills .progress {\n  background-color: var(--theme-color);\n  height: 8px;\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #TIMELINE\n\\*-----------------------------------*/\n\n.timeline-item {\n  padding-block: 20px;\n  font-size: var(--fs-18);\n  display: grid;\n  gap: 15px;\n}\n\n.timeline-item:not(:last-child) { border-block-end: 1px solid var(--black_10); }\n\n.timeline-item .item-period { font: unset; }\n\n.timeline-item .item-title { color: var(--black); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #PRICEING\n\\*-----------------------------------*/\n\n.pricing { background-color: var(--cultured); }\n\n.pricing .section-text { margin-block-end: 60px; }\n\n.pricing-list {\n  display: grid;\n  gap: 30px;\n}\n\n.pricing-card {\n  --color: var(--black);\n  --icon-color: var(--theme-color);\n\n  background-color: var(--white);\n  border-radius: var(--radius-10);\n  box-shadow: var(--shadow);\n  line-height: 1.2;\n  padding: 30px;\n  transition: var(--transition);\n}\n\n.pricing-card ion-icon {\n  color: var(--icon-color);\n  flex-shrink: 0;\n  font-size: 25px;\n  transition: var(--transition);\n}\n\n.pricing-card .card-title {\n  color: var(--color);\n  font: unset;\n  font-family: var(--ff-poppins);\n  margin-block: 14px 10px;\n  transition: var(--transition);\n}\n\n.pricing-card .card-price {\n  color: var(--color);\n  font-family: var(--ff-poppins);\n  transition: var(--transition);\n}\n\n.pricing-card:is(:hover, :focus-within) {\n  background-color: var(--theme-color);\n  --color: var(--white);\n  --icon-color: var(--white);\n}\n\n\n\n\n\n/*-----------------------------------*\\\n  #NEWS\n\\*-----------------------------------*/\n\n.news-card .card-text { margin-block-end: 5px; }\n\n\n\n\n\n/*-----------------------------------*\\\n  #CONTACT\n\\*-----------------------------------*/\n\n.contact { background-color: var(--cultured); }\n\n.contact-list { margin-block: 40px 50px; }\n\n.contact-item:not(:last-child) { margin-block-end: 22px; }\n\n.contact-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.contact-item ion-icon {\n  color: var(--theme-color);\n  font-size: 22px;\n  flex-shrink: 0;\n  --ionicon-stroke-width: 25px;\n}\n\n.contact-link {\n  color: var(--black);\n  font-family: var(--ff-poppins);\n}\n\n.input-field {\n  color: var(--black);\n  font-family: var(--ff-poppins);\n  font-size: var(--fs-13);\n  letter-spacing: 1.4px;\n  border: 1px solid var(--black_10);\n  padding: 10px;\n  margin-block-end: 30px;\n  outline: none;\n  transition: border var(--transition);\n}\n\n.input-field:focus { border-color: var(--black_30); }\n\ntextarea.input-field {\n  resize: vertical;\n  min-height: 45px;\n  height: 45px;\n  max-height: 100px;\n}\n\n.submit-btn {\n  background-color: var(--theme-color);\n  color: var(--white);\n  width: 100%;\n  font-size: var(--fs-17);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 20px;\n  transition: var(--transition);\n}\n\n.submit-btn:is(:hover, :focus) { background-color: var(--black); }\n\n.submit-btn ion-icon { transition: var(--transition); }\n\n.submit-btn:is(:hover, :focus) ion-icon { transform: rotate(-45deg); }\n\n\n\n\n\n/*-----------------------------------*\\\n  #FOOTER\n\\*-----------------------------------*/\n\n.footer {\n  background-color: var(--black);\n  color: var(--white);\n  text-align: center;\n  padding-block: 30px;\n}\n\n.copyright { margin-block-end: 10px; }\n\n.copyright-link { display: inline-block; }\n\n.copyright-link:is(:hover, :focus) { text-decoration: underline; }\n\n.social-list {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n}\n\n.social-link { font-size: 17px; }\n\n\n\n\n\n/*-----------------------------------*\\\n  #MEDIA QUERIES\n\\*-----------------------------------*/\n\n/**\n * responsive for larger than 576px screen\n */\n\n@media (min-width: 576px) {\n\n  /**\n   * REUSED STYLE\n   */\n\n  .scrollbar-item { min-width: calc(50% - 20px); }\n\n\n\n  /**\n   * HERO\n   */\n\n  .exp-list {\n    display: flex;\n    justify-content: flex-start;\n    gap: 50px;\n  }\n\n  .exp-list .list-item:not(:last-child) { margin-block-end: 0; }\n\n\n\n  /**\n   * PRICING\n   */\n\n  .pricing-card {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .pricing-card .card-title {\n    margin-block: 0;\n    margin-inline-end: auto;\n  }\n\n}\n\n\n\n\n\n/**\n * responsive for larger than 768px screen\n */\n\n@media (min-width: 768px) {\n\n  /**\n   * CUSTOM PROPERTY\n   */\n\n  :root {\n\n    /**\n     * typography\n     */\n\n    --fs-30: 3.5rem;\n    --fs-25: 3rem;\n\n  }\n\n\n\n  /**\n   * REUSED STYLE\n   */\n\n  .h3 { --fs-18: 2rem; }\n\n  .card-content { padding: 30px 35px; }\n\n  .card-content > ion-icon {\n    top: 30px;\n    right: 30px;\n  }\n\n\n\n  /**\n   * TIMELINE\n   */\n\n  .timeline-item {\n    grid-template-columns: repeat(3, 1fr);\n    gap: 30px;\n  }\n\n\n\n  /**\n   * PRICING, CONTACT\n   */\n\n  .pricing-card,\n  .contact-link { font-size: var(--fs-18); }\n\n\n\n  /**\n   * FOOTER\n   */\n\n  .footer .container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .copyright { margin-block-end: 0; }\n\n}\n\n\n\n\n\n/**\n * responsive for larger than 992px screen\n */\n\n@media (min-width: 992px) {\n\n  /**\n   * CUSTOM PROPERTY\n   */\n\n  :root {\n\n    /**\n     * typography\n     */\n\n    --fs-35: 4.5rem;\n\n    /**\n     * spacing\n     */\n\n    --section-padding: 120px;\n\n  }\n  \n\n\n  /**\n   * REUSED STYLE\n   */\n\n  .container { padding-inline: 50px; }\n\n\n\n  /**\n   * HEADER\n   */\n\n  .header {\n    background-color: transparent;\n    border-block-end: none;\n    padding-block: 25px;\n    transition: var(--transition);\n  }\n\n  .header.active {\n    background-color: var(--white);\n    padding-block: 20px;\n  }\n\n  .navbar,\n  .navbar.active {\n    all: unset;\n    margin-inline-start: auto;\n    transition: var(--transition);\n  }\n\n  .navbar { visibility: hidden; }\n\n  .navbar.active { visibility: visible; }\n\n  .navbar-list {\n    display: flex;\n    gap: 20px;\n    margin-block: 0;\n  }\n\n  .navbar-link {\n    opacity: 0;\n    transform: translateX(20px);\n    font-weight: var(--fw-400);\n    transition: var(--transition);\n  }\n\n  .navbar.active .navbar-link {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  .navbar-link:is(:hover, :focus) { color: var(--theme-color); }\n\n\n\n  /**\n   * HERO\n   */\n\n  .hero {\n    --section-padding: 70px;\n    padding-block-start: calc(var(--section-padding) + 60px);\n    min-height: 100vh;\n    display: grid;\n    align-items: center;\n  }\n\n  .hero .container {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    align-items: center;\n    gap: 150px;\n  }\n\n  .hero-banner {\n    order: 1;\n    width: 250px;\n    margin-inline: auto 80px;\n    margin-block-end: 0;\n    overflow: visible;\n    transform: rotate(7deg);\n  }\n\n  .hero-banner .img-cover { border-radius: inherit; }\n\n  .hero-banner::before {\n    bottom: -40px;\n    left: -95px;\n    width: 90%;\n    height: 100%;\n    background-color: var(--theme-color);\n    z-index: -1;\n    transform: rotate(-15deg);\n    border-radius: var(--radius-10);\n  }\n\n  .exp-list .span { --fs-13: 1.4rem; }\n\n  .slide-down-btn {\n    display: block;\n    color: var(--black);\n    font-size: 40px;\n    max-width: max-content;\n    margin-block-start: 40px;\n    transition: var(--transition);\n    animation: scrollDown 2s ease infinite;\n  }\n\n  .slide-down-btn:is(:hover, :focus) { color: var(--theme-color); }\n\n  @keyframes scrollDown {\n    0% { transform: translateY(0); }\n    30% { transform: translateY(20px); }\n  }\n\n\n\n  /**\n   * SKILLS\n   */\n\n  .skills .container {\n    position: relative;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 150px;\n  }\n\n  .skills-banner {\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 50px;\n    width: 410px;\n    height: 620px;\n    background-image: url('../images/portfolio-2.jpg');\n    background-repeat: no-repeat;\n    background-size: contain;\n    background-position: 105%;\n    background-attachment: fixed;\n    overflow: hidden;\n  }\n\n\n\n  /**\n   * TIMELINE\n   */\n\n  .timeline-item { padding-block: 30px; }\n\n\n\n  /**\n   * PRICING\n   */\n\n  .pricing .container {\n    position: relative;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    align-items: flex-start;\n    gap: 200px;\n  }\n\n  .pricing-content {\n    position: sticky;\n    top: 120px;\n  }\n\n  .pricing .section-text { margin-block-end: 0; }\n\n\n\n  /**\n   * CONTACT\n   */\n\n  .contact .container {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    align-items: center;\n    gap: 200px;\n  }\n\n  .contact-list { margin-block-end: 0; }\n\n}\n\n\n\n\n\n/**\n * responsive for larger than 1200px screen\n */\n\n@media (min-width: 1200px) {\n\n  /**\n   * REUSED STYLE\n   */\n\n  .container {\n    max-width: 1170px;\n    width: 100%;\n    margin-inline: auto;\n  }\n\n  .has-scrollbar { gap: 40px; }\n\n  .scrollbar-item { min-width: calc(33.33% - 26.66px); }\n\n  :is(.portfolio, .news) .section-title { margin-block-end: 80px; }\n\n\n\n  /**\n   * HEADER\n   */\n\n  .header .container { max-width: unset; }\n\n  \n\n  /**\n   * HERO\n   */\n\n  .hero-banner { width: 275px; }\n\n}"
  },
  {
    "path": "assets/js/script.js",
    "content": "'use strict';\n\n\n\n/**\n * add event on element\n */\n\nconst addEventOnElem = function (elem, type, callback) {\n  if (elem.length > 1) {\n    for (let i = 0; i < elem.length; i++) {\n      elem[i].addEventListener(type, callback);\n    }\n  } else {\n    elem.addEventListener(type, callback);\n  }\n}\n\n\n\n/**\n * toggle navbar\n */\n\nconst navbar = document.querySelector(\"[data-navbar]\");\nconst navLinks = document.querySelectorAll(\"[data-nav-link]\");\nconst navToggler = document.querySelector(\"[data-nav-toggler]\");\n\nconst toggleNavbar = function () {\n  navbar.classList.toggle(\"active\");\n  navToggler.classList.toggle(\"active\");\n}\n\naddEventOnElem(navToggler, \"click\", toggleNavbar);\n\nconst closeNavbar = function () {\n  navbar.classList.remove(\"active\");\n  navToggler.classList.remove(\"active\");\n}\n\naddEventOnElem(navLinks, \"click\", closeNavbar);\n\n\n\n/**\n * header active\n */\n\nconst header = document.querySelector(\"[data-header]\");\n\nwindow.addEventListener(\"scroll\", function () {\n  if (window.scrollY > 100) {\n    header.classList.add(\"active\");\n  } else {\n    header.classList.remove(\"active\");\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>Smith - Creative Designer Based In UK</title>\n\n  <!-- \n    - favicon\n  -->\n  <link rel=\"shortcut icon\" href=\"./favicon.svg\" type=\"image/svg+xml\">\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=Mulish&family=Poppins:wght@400;500;600;700;800&display=swap\"\n    rel=\"stylesheet\">\n\n  <!-- \n    - preload images\n  -->\n  <link rel=\"preload\" as=\"image\" href=\"./assets/images/hero-banner.jpg\">\n\n</head>\n\n<body>\n\n  <!-- \n    - #HEADER\n  -->\n\n  <header class=\"header\" data-header>\n    <div class=\"container\">\n\n      <a href=\"#\" class=\"logo\">Smith</a>\n\n      <nav class=\"navbar\" data-navbar>\n        <ul class=\"navbar-list\">\n\n          <li>\n            <a href=\"#home\" class=\"navbar-link\" data-nav-link>Home</a>\n          </li>\n\n          <li>\n            <a href=\"#portfolio\" class=\"navbar-link\" data-nav-link>Portfolio</a>\n          </li>\n\n          <li>\n            <a href=\"#skills\" class=\"navbar-link\" data-nav-link>Skills</a>\n          </li>\n\n          <li>\n            <a href=\"#timeline\" class=\"navbar-link\" data-nav-link>Timeline</a>\n          </li>\n\n          <li>\n            <a href=\"#price\" class=\"navbar-link\" data-nav-link>Price</a>\n          </li>\n\n          <li>\n            <a href=\"#news\" class=\"navbar-link\" data-nav-link>News</a>\n          </li>\n\n          <li>\n            <a href=\"#contact\" class=\"navbar-link\" data-nav-link>Contact</a>\n          </li>\n\n        </ul>\n      </nav>\n\n      <button class=\"nav-toggle-btn\" aria-label=\"toggle menu\" data-nav-toggler>\n        <span class=\"line line-1\"></span>\n        <span class=\"line line-2\"></span>\n        <span class=\"line line-3\"></span>\n      </button>\n\n    </div>\n  </header>\n\n\n\n\n\n  <main>\n    <article>\n\n      <!-- \n        - #HERO\n      -->\n\n      <section class=\"section hero\" id=\"home\" aria-label=\"hero\">\n        <div class=\"container\">\n\n          <figure class=\"hero-banner img-holder has-before\" style=\"--width: 640; --height: 840;\">\n            <img src=\"./assets/images/hero-banner.jpg\" width=\"640\" height=\"840\" alt=\"Bernard Smith\" class=\"img-cover\">\n          </figure>\n\n          <div class=\"hero-content\">\n\n            <p class=\"section-subtitle\">Bernard Smith</p>\n\n            <h1 class=\"h1 hero-title\">Creative Designer Based In UK</h1>\n\n            <ul class=\"hero-list\">\n\n              <li>\n                <a href=\"#\" class=\"list-link\">\n                  <span class=\"span\">Web Development</span>\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"list-link\">\n                  <span class=\"span\">Digital Marketing</span>\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n                </a>\n              </li>\n\n              <li>\n                <a href=\"#\" class=\"list-link\">\n                  <span class=\"span\">Graphic Design</span>\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n                </a>\n              </li>\n\n            </ul>\n\n            <ul class=\"exp-list\">\n\n              <li class=\"list-item\">\n                <strong class=\"strong\">10+</strong>\n\n                <span class=\"span\">\n                  Years of<br>\n                  Experience\n                </span>\n              </li>\n\n              <li class=\"list-item\">\n                <strong class=\"strong\">3K+</strong>\n\n                <span class=\"span\">\n                  Happy<br>\n                  Customers\n                </span>\n              </li>\n\n            </ul>\n\n            <a href=\"#portfolio\" class=\"slide-down-btn\" aria-label=\"scroll down\">\n              <ion-icon name=\"arrow-down\" aria-hidden=\"true\"></ion-icon>\n            </a>\n\n          </div>\n\n        </div>\n      </section>\n\n\n\n\n\n      <!-- \n        - #PORTFOLIO\n      -->\n\n      <section class=\"section portfolio\" id=\"portfolio\" aria-label=\"portfolio\">\n        <div class=\"container\">\n\n          <p class=\"section-subtitle\">Portfolio</p>\n\n          <h2 class=\"h2 section-title\">Selected Works</h2>\n\n          <ul class=\"has-scrollbar\">\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/portfolio-1.jpg\" width=\"600\" height=\"675\" loading=\"lazy\" alt=\"Magic Art\"\n                    class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <h3 class=\"h3 card-title\">Magic Art</h3>\n\n                  <p class=\"card-text\">Vimeo</p>\n\n                </a>\n\n              </div>\n            </li>\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/portfolio-2.jpg\" width=\"600\" height=\"675\" loading=\"lazy\" alt=\"Bona Green\"\n                    class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <h3 class=\"h3 card-title\">Bona Green</h3>\n\n                  <p class=\"card-text\">Youtube</p>\n\n                </a>\n\n              </div>\n            </li>\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/portfolio-3.jpg\" width=\"600\" height=\"675\" loading=\"lazy\" alt=\"Leo Dandora\"\n                    class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <h3 class=\"h3 card-title\">Leo Dandora</h3>\n\n                  <p class=\"card-text\">Soundcloud</p>\n\n                </a>\n\n              </div>\n            </li>\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/portfolio-4.jpg\" width=\"600\" height=\"675\" loading=\"lazy\" alt=\"Folio Grasia\"\n                    class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <h3 class=\"h3 card-title\">Folio Grasia</h3>\n\n                  <p class=\"card-text\">Detail</p>\n\n                </a>\n\n              </div>\n            </li>\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/portfolio-5.jpg\" width=\"600\" height=\"675\" loading=\"lazy\" alt=\"Viva Mercury\"\n                    class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <h3 class=\"h3 card-title\">Viva Mercury</h3>\n\n                  <p class=\"card-text\">Image</p>\n\n                </a>\n\n              </div>\n            </li>\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/portfolio-6.jpg\" width=\"600\" height=\"675\" loading=\"lazy\" alt=\"Santa Onera\"\n                    class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <h3 class=\"h3 card-title\">Santa Onera</h3>\n\n                  <p class=\"card-text\">Image</p>\n\n                </a>\n\n              </div>\n            </li>\n\n          </ul>\n\n        </div>\n      </section>\n\n\n\n\n\n      <!-- \n        - #SKILLS\n      -->\n\n      <section class=\"section skills has-before\" id=\"skills\" aria-label=\"skills\"\n        style=\"background-image: url('./assets/images/skills-bg.png')\">\n        <div class=\"container\">\n\n          <div class=\"skills-content\">\n\n            <p class=\"section-subtitle\">Skills</p>\n\n            <h2 class=\"h2 section-title\">Programming Skills</h2>\n\n            <p class=\"section-text\">\n              For more than 20 years our experts have been accomplishing enough with modern Web Development, new\n              generation web and\n              app programming language.\n            </p>\n\n            <ul class=\"skills-list\">\n\n              <li class=\"skills-item\">\n                <div class=\"wrapper\">\n                  <h3 class=\"skill-title\">HTML & CSS</h3>\n\n                  <data class=\"skill-value\" value=\"95%\">95%</data>\n                </div>\n\n                <div class=\"progress-box\">\n                  <div class=\"progress\" style=\"width: 95%\"></div>\n                </div>\n              </li>\n\n              <li class=\"skills-item\">\n                <div class=\"wrapper\">\n                  <h3 class=\"skill-title\">JavaScript</h3>\n\n                  <data class=\"skill-value\" value=\"80%\">80%</data>\n                </div>\n\n                <div class=\"progress-box\">\n                  <div class=\"progress\" style=\"width: 80%\"></div>\n                </div>\n              </li>\n\n              <li class=\"skills-item\">\n                <div class=\"wrapper\">\n                  <h3 class=\"skill-title\">WordPress</h3>\n\n                  <data class=\"skill-value\" value=\"90%\">90%</data>\n                </div>\n\n                <div class=\"progress-box\">\n                  <div class=\"progress\" style=\"width: 90%\"></div>\n                </div>\n              </li>\n\n            </ul>\n\n          </div>\n\n          <div class=\"skills-banner has-before\"></div>\n\n        </div>\n      </section>\n\n\n\n\n\n      <!-- \n        - #TIMELINE\n      -->\n\n      <section class=\"section timeline\" id=\"timeline\" aria-label=\"timeline\">\n        <div class=\"container\">\n\n          <p class=\"section-subtitle\">Timeline</p>\n\n          <h2 class=\"h2 section-title\">Working Period</h2>\n\n          <ul class=\"timeline-list\">\n\n            <li class=\"timeline-item\">\n\n              <h3 class=\"item-period\">April, 2019 - Today</h3>\n\n              <p class=\"item-title\">Head Designer & Co-founder</p>\n\n              <p class=\"item-address\">Alan Klein Design, London</p>\n\n            </li>\n\n            <li class=\"timeline-item\">\n\n              <h3 class=\"item-period\">September, 2018 - April, 2019</h3>\n\n              <p class=\"item-title\">Creative Director & Senior Designer</p>\n\n              <p class=\"item-address\">Raxuna Poc, New York</p>\n\n            </li>\n\n            <li class=\"timeline-item\">\n\n              <h3 class=\"item-period\">October, 2015 - September, 2018</h3>\n\n              <p class=\"item-title\">Head Designer</p>\n\n              <p class=\"item-address\">Arimana Co. Ltd, Amsterdam</p>\n\n            </li>\n\n            <li class=\"timeline-item\">\n\n              <h3 class=\"item-period\">July, 2012 - October, 2015</h3>\n\n              <p class=\"item-title\">Senior UX & UI Designer</p>\n\n              <p class=\"item-address\">Baxdoro Design, London</p>\n\n            </li>\n\n            <li class=\"timeline-item\">\n\n              <h3 class=\"item-period\">March, 2010 - July, 2012</h3>\n\n              <p class=\"item-title\">Junior UX Designer</p>\n\n              <p class=\"item-address\">Simono Design Group, London</p>\n\n            </li>\n\n          </ul>\n\n        </div>\n      </section>\n\n\n\n\n\n      <!-- \n        - #PRICING\n      -->\n\n      <section class=\"section pricing\" id=\"price\" aria-label=\"price\">\n        <div class=\"container\">\n\n          <div class=\"pricing-content\">\n\n            <p class=\"section-subtitle\">Pricing</p>\n\n            <h2 class=\"h2 section-title\">Service Prices</h2>\n\n            <p class=\"section-text\">\n              For more than 20 years our experts have been accomplishing enough with modern Web Development, new\n              generation web and\n              app programming language.\n            </p>\n\n          </div>\n\n          <ul class=\"pricing-list\">\n\n            <li>\n              <div class=\"pricing-card\">\n                <ion-icon name=\"logo-wordpress\" aria-hidden=\"true\"></ion-icon>\n\n                <h3 class=\"card-title\">WordPress Development</h3>\n\n                <data class=\"card-price\" value=\"500\">$500</data>\n              </div>\n            </li>\n\n            <li>\n              <div class=\"pricing-card\">\n                <ion-icon name=\"logo-html5\" aria-hidden=\"true\"></ion-icon>\n\n                <h3 class=\"card-title\">HTML Development</h3>\n\n                <data class=\"card-price\" value=\"400\">$400</data>\n              </div>\n            </li>\n\n            <li>\n              <div class=\"pricing-card\">\n                <ion-icon name=\"reader\" aria-hidden=\"true\"></ion-icon>\n\n                <h3 class=\"card-title\">Content Writing</h3>\n\n                <data class=\"card-price\" value=\"300\">$300</data>\n              </div>\n            </li>\n\n            <li>\n              <div class=\"pricing-card\">\n                <ion-icon name=\"qr-code\" aria-hidden=\"true\"></ion-icon>\n\n                <h3 class=\"card-title\">Brand Identity</h3>\n\n                <data class=\"card-price\" value=\"200\">$200</data>\n              </div>\n            </li>\n\n            <li>\n              <div class=\"pricing-card\">\n                <ion-icon name=\"image\" aria-hidden=\"true\"></ion-icon>\n\n                <h3 class=\"card-title\">PSD Design</h3>\n\n                <data class=\"card-price\" value=\"100\">$100</data>\n              </div>\n            </li>\n\n          </ul>\n\n        </div>\n      </section>\n\n\n\n\n\n      <!-- \n        - #NEWS\n      -->\n\n      <section class=\"section news\" id=\"news\" aria-label=\"news\">\n        <div class=\"container\">\n\n          <p class=\"section-subtitle\">News</p>\n\n          <h2 class=\"h2 section-title\">Latest News</h2>\n\n          <ul class=\"has-scrollbar\">\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card news-card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/blog-1.jpg\" width=\"600\" height=\"675\" loading=\"lazy\"\n                    alt=\"VS Code Gets New JavaScript Debugger\" class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <time class=\"card-text\" datetime=\"2022-09-02\">September 02, 2022</time>\n\n                  <h3 class=\"h3 card-title\">VS Code Gets New JavaScript Debugger</h3>\n\n                </a>\n\n              </div>\n            </li>\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card news-card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/blog-2.jpg\" width=\"600\" height=\"675\" loading=\"lazy\"\n                    alt=\"Javalin Framework for Kotlin and Java Updated\" class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <time class=\"card-text\" datetime=\"2022-08-17\">August 17, 2022</time>\n\n                  <h3 class=\"h3 card-title\">Javalin Framework for Kotlin and Java Updated</h3>\n\n                </a>\n\n              </div>\n            </li>\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card news-card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/blog-3.jpg\" width=\"600\" height=\"675\" loading=\"lazy\"\n                    alt=\"JavaScript Dominated Open Source in 2022\" class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <time class=\"card-text\" datetime=\"2022-07-05\">July 05, 2022</time>\n\n                  <h3 class=\"h3 card-title\">JavaScript Dominated Open Source in 2022</h3>\n\n                </a>\n\n              </div>\n            </li>\n\n            <li class=\"scrollbar-item\">\n              <div class=\"card news-card\">\n\n                <figure class=\"card-banner img-holder\" style=\"--width: 600; --height: 675;\">\n                  <img src=\"./assets/images/blog-4.jpg\" width=\"600\" height=\"675\" loading=\"lazy\"\n                    alt=\"Perfecto Tests Progressive Web Apps\" class=\"img-cover\">\n                </figure>\n\n                <a href=\"#\" class=\"card-content\">\n\n                  <ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\n                  <time class=\"card-text\" datetime=\"2022-04-22\">April 22, 2022</time>\n\n                  <h3 class=\"h3 card-title\">Perfecto Tests Progressive Web Apps</h3>\n\n                </a>\n\n              </div>\n            </li>\n\n          </ul>\n\n        </div>\n      </section>\n\n\n\n\n\n      <!-- \n        - #CONTACT\n      -->\n\n      <section class=\"section contact\" id=\"contact\" aria-label=\"contact\">\n        <div class=\"container\">\n\n          <div class=\"contact-content\">\n\n            <p class=\"section-subtitle\">Contact</p>\n\n            <h2 class=\"h2 section-title\">Get In Touch</h2>\n\n            <p class=\"section-text\">\n              Please fill out the form on this section to contact with me. Or call between 9:00 a.m. and 8:00 p.m. ET,\n              Monday through\n              Friday\n            </p>\n\n            <ul class=\"contact-list\">\n\n              <li class=\"contact-item\">\n                <ion-icon name=\"location-outline\" aria-hidden=\"true\"></ion-icon>\n\n                <address class=\"contact-link\">\n                  27 City Walls Rd, Clydebank, UK\n                </address>\n              </li>\n\n              <li class=\"contact-item\">\n                <ion-icon name=\"call-outline\" aria-hidden=\"true\"></ion-icon>\n\n                <a href=\"tel:+07742691291\" class=\"contact-link\">+077 4269 1291</a>\n              </li>\n\n              <li class=\"contact-item\">\n                <ion-icon name=\"mail-outline\" aria-hidden=\"true\"></ion-icon>\n\n                <a href=\"mailto:smith@gmail.com\" class=\"contact-link\">smith@gmail.com</a>\n              </li>\n\n              <li class=\"contact-item\">\n                <ion-icon name=\"globe-outline\" aria-hidden=\"true\"></ion-icon>\n\n                <a href=\"www.domain.com\" class=\"contact-link\">www.domain.com</a>\n              </li>\n\n            </ul>\n\n          </div>\n\n          <form action=\"\" class=\"contact-form\">\n\n            <input type=\"text\" name=\"name\" aria-label=\"name\" placeholder=\"Name\" required class=\"input-field\">\n\n            <input type=\"email\" name=\"email_address\" aria-label=\"email\" placeholder=\"Email\" required\n              class=\"input-field\">\n\n            <textarea name=\"message\" aria-label=\"message\" placeholder=\"Message\" required class=\"input-field\"></textarea>\n\n            <button type=\"submit\" class=\"submit-btn\">\n              <span class=\"span\">Submit</span>\n\n              <ion-icon name=\"arrow-forward\" aria-hidden=\"true\"></ion-icon>\n            </button>\n\n          </form>\n\n        </div>\n      </section>\n\n    </article>\n  </main>\n\n\n\n\n\n  <!-- \n    - #FOOTER\n  -->\n\n  <footer class=\"footer\">\n    <div class=\"container\">\n\n      <p class=\"copyright\">\n        &copy; 2022. All rights reserved by <a href=\"#\" class=\"copyright-link\">codewithsadee.</a>\n      </p>\n\n      <ul class=\"social-list\">\n\n        <li>\n          <a href=\"#\" class=\"social-link\">\n            <ion-icon name=\"logo-facebook\"></ion-icon>\n          </a>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"social-link\">\n            <ion-icon name=\"logo-twitter\"></ion-icon>\n          </a>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"social-link\">\n            <ion-icon name=\"logo-instagram\"></ion-icon>\n          </a>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"social-link\">\n            <ion-icon name=\"logo-dribbble\"></ion-icon>\n          </a>\n        </li>\n\n        <li>\n          <a href=\"#\" class=\"social-link\">\n            <ion-icon name=\"logo-tiktok\"></ion-icon>\n          </a>\n        </li>\n\n      </ul>\n\n    </div>\n  </footer>\n\n\n\n\n\n  <!-- \n    - custom js link\n  -->\n  <script src=\"./assets/js/script.js\" defer></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": "Smith - Creative Designer Based In UK\n\n\n\n#---------- HEADER ----------#\n\nSmith\n\nHome\nPortfolio\nSkills\nTimeline\nPrice\nNews\nContact\n\naria-label = toggle menu\n\n\n\n#---------- HERO ----------#\n\nalt = Bernard Smith\n\nBernard Smith\n\nCreative Designer Based In UK\n\nWeb Development\n<ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\nDigital Marketing\nGraphic Design\n\n10+\nYears of\nExperience\n \n3K+\nHappy\nCustomers\n\naria-label = scroll down\n\n<ion-icon name=\"arrow-down\" aria-hidden=\"true\"></ion-icon>\n\n\n\n#---------- PORTFOLIO ----------#\n\nPortfolio\n\nSelected Works\n\nalt = Magic Art\n\n<ion-icon name=\"arrow-forward-outline\" aria-hidden=\"true\"></ion-icon>\n\nMagic Art\nVimeo\n\nBona Green\nYoutube\n\nLeo Dandora\nSoundcloud\n\nFolio Grasia\nDetail\n\nViva Mercury\nImage\n\nSanta Onera\nImage\n\n\n\n\n\n#---------- SKILLS ----------#\n\nSkills\n\nProgramming Skills\n\nFor more than 20 years our experts have been accomplishing enough with modern Web Development, new generation web and app programming language.\n\nHTML & CSS\n95%\n\nJavaScript\n80%\n\nWordPress\n90%\n\n\n\n#---------- HEADER ----------#\n\nTimeline\n\nWorking Period\n\nApril, 2019 - Today\nHead Designer & Co-founder\nAlan Klein Design, London\n\nSeptember, 2018 - April, 2019\nCreative Director & Senior Designer\nRaxuna Poc, New York\n\nOctober, 2015 - September, 2018\nHead Designer\nArimana Co. Ltd, Amsterdam\n\nJuly, 2012 - October, 2015\nSenior UX & UI Designer\nBaxdoro Design, London\n\nMarch, 2010 - July, 2012\nJunior UX Designer\nSimono Design Group, London\n\n\n\n#---------- PRICING ----------#\n\nPricing\n\nService Prices\n\nFor more than 20 years our experts have been accomplishing enough with modern Web Development, new generation web and app programming language.\n\n<ion-icon name=\"logo-wordpress\" aria-hidden=\"true\"></ion-icon>\nWordPress Development\n$500\n\n<ion-icon name=\"logo-html5\" aria-hidden=\"true\"></ion-icon>\nHTML Development\n$400\n\n<ion-icon name=\"reader\" aria-hidden=\"true\"></ion-icon>\nContent Writing\n$300\n\n<ion-icon name=\"qr-code\" aria-hidden=\"true\"></ion-icon>\nBrand Identity\n$200\n\n<ion-icon name=\"image\" aria-hidden=\"true\"></ion-icon>\nPSD Design\n$100\n\n\n\n#---------- NEWS ----------#\n\nNews\n\nLatest News\n\nalt = VS Code Gets New JavaScript Debugger\n\nSeptember 02, 2022\nVS Code Gets New JavaScript Debugger\n\nalt = Javalin Framework for Kotlin and Java Updated\n\nAugust 17, 2022\nJavalin Framework for Kotlin and Java Updated\n\nalt = JavaScript Dominated Open Source in 2022\n\nJuly 05, 2022\nJavaScript Dominated Open Source in 2022\n\natl = Perfecto Tests Progressive Web Apps\n\nApril 22, 2022\nPerfecto Tests Progressive Web Apps\n\n\n\n#---------- CONTACT ----------#\n\nContact\n\nGet In Touch\n\nPlease fill out the form on this section to contact with me. Or call between 9:00 a.m. and 8:00 p.m. ET, Monday through Friday\n\n<ion-icon name=\"location-outline\" aria-hidden=\"true\"></ion-icon>\n27 City Walls Rd, Clydebank, UK\n\n<ion-icon name=\"call-outline\" aria-hidden=\"true\"></ion-icon>\n+077 4269 1291\n\n<ion-icon name=\"mail-outline\" aria-hidden=\"true\"></ion-icon>\nsmith@gmail.com\n\n<ion-icon name=\"globe-outline\" aria-hidden=\"true\"></ion-icon>\nwww.domain.com\n\nplaceholder = Name\nplaceholder = Email\nplaceholder = Message\n\nSubmit\n\n<ion-icon name=\"arrow-forward\" aria-hidden=\"true\"></ion-icon>\n\n\n\n#---------- FOOTER ----------#\n\n&copy; 2022. All rights reserved by codewithsadee.\n\n<ion-icon name=\"logo-facebook\"></ion-icon>\n<ion-icon name=\"logo-twitter\"></ion-icon>\n<ion-icon name=\"logo-instagram\"></ion-icon>\n<ion-icon name=\"logo-dribbble\"></ion-icon>\n<ion-icon name=\"logo-tiktok\"></ion-icon>"
  },
  {
    "path": "style-guide.md",
    "content": "# Essential Stuff\n\n## Html import links\n\nGoogle font\n\n``` html\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=Mulish&family=Poppins:wght@400;500;600;700;800&display=swap\"\n  rel=\"stylesheet\">\n```\n\nIonicon\n\n``` html\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\n---\n\n## Colors\n\n``` css\n--sonic-silver: hsl(0, 0%, 46%);\n--spanish-gray: hsl(0, 0%, 60%);\n--theme-color: hsl(10, 100%, 57%);\n--light-gray: hsl(0, 0%, 80%);\n--gray-x-11: hsl(0, 0%, 73%);\n--dim-gray: hsl(0, 0%, 44%);\n--cultured: hsl(0, 0%, 98%);\n--black_10: hsl(0, 0%, 0%, 0.1);\n--black_20: hsl(0, 0%, 0%, 0.2);\n--black_30: hsl(0, 0%, 0%, 0.3);\n--black_70: hsl(0, 0%, 0%, 0.7);\n--white_10: hsl(0, 0%, 100%, 0.1);\n--white: hsl(0, 0%, 100%);\n--black: hsl(0, 0%, 0%);\n```\n\n## Typography\n\n``` css\n--ff-poppins: 'Poppins', sans-serif;\n--ff-mulish: 'Mulish', sans-serif;\n\n--fs-35: 3.5rem;\n--fs-30: 3rem;\n--fs-25: 2.5rem;\n--fs-18: 1.8rem;\n--fs-17: 1.7rem;\n--fs-13: 1.3rem;\n\n--fw-800: 800;\n--fw-700: 700;\n--fw-600: 600;\n--fw-500: 500;\n--fw-400: 400;\n```\n\n## Spacing\n\n``` css\n--section-padding: 80px;\n```\n\n## Shadow\n\n``` css\n--shadow: 0 0 20px hsla(0, 0%, 0%, 0.08);\n```\n\n## Border Radius\n\n``` css\n--radius-10: 10px;\n--radius-8: 8px;\n```\n\n## Transition\n\n``` css\n--transition: 0.25s ease;\n--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);\n```\n"
  }
]