{"version":3,"file":"js/app.a6f03791.js","mappings":"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","sources":["webpack://my-portfolio-singlepage/./src/App.vue","webpack://my-portfolio-singlepage/./src/App.vue?7ccd","webpack://my-portfolio-singlepage/./src/components/layout/TheNavigation.vue","webpack://my-portfolio-singlepage/./src/components/layout/TheNavigation.vue?3905","webpack://my-portfolio-singlepage/./src/components/layout/MainContent.vue","webpack://my-portfolio-singlepage/./src/components/pages/LandSection.vue","webpack://my-portfolio-singlepage/./src/components/pages/LandSection.vue?df42","webpack://my-portfolio-singlepage/./src/components/pages/AboutSection.vue","webpack://my-portfolio-singlepage/./src/components/layout/AboutMe.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/AboutMeContent.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/AboutMeContent.vue?58b4","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/MySkills.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/MySkills.vue?e773","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/MyOtherSkills.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/ProgressBar.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/ProgressBar.vue?67de","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/MyOtherSkills.vue?ee65","webpack://my-portfolio-singlepage/./src/components/layout/AboutMe.vue?f162","webpack://my-portfolio-singlepage/./src/components/pages/AboutSection.vue?dbda","webpack://my-portfolio-singlepage/./src/components/pages/PortfolioSection.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/PortfolioCards.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/PortfolioCards.vue?0c3f","webpack://my-portfolio-singlepage/./src/components/pages/PortfolioSection.vue?4acb","webpack://my-portfolio-singlepage/./src/components/pages/ContactSection.vue","webpack://my-portfolio-singlepage/./src/components/layout/ContactForm.vue","webpack://my-portfolio-singlepage/./src/components/layout/ContactForm.vue?5ad6","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/ContactMe.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/ContactMe.vue?0ff1","webpack://my-portfolio-singlepage/./src/components/pages/ContactSection.vue?e333","webpack://my-portfolio-singlepage/./src/components/layout/MainContent.vue?3df8","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/TheFooter.vue","webpack://my-portfolio-singlepage/./src/components/layout/inner-layouts/TheFooter.vue?6d5a","webpack://my-portfolio-singlepage/./src/components/ui/BaseButton.vue","webpack://my-portfolio-singlepage/./src/components/ui/BaseButton.vue?49dd","webpack://my-portfolio-singlepage/./src/main.js","webpack://my-portfolio-singlepage/webpack/bootstrap","webpack://my-portfolio-singlepage/webpack/runtime/chunk loaded","webpack://my-portfolio-singlepage/webpack/runtime/compat get default export","webpack://my-portfolio-singlepage/webpack/runtime/define property getters","webpack://my-portfolio-singlepage/webpack/runtime/global","webpack://my-portfolio-singlepage/webpack/runtime/hasOwnProperty shorthand","webpack://my-portfolio-singlepage/webpack/runtime/make namespace object","webpack://my-portfolio-singlepage/webpack/runtime/publicPath","webpack://my-portfolio-singlepage/webpack/runtime/jsonp chunk loading","webpack://my-portfolio-singlepage/webpack/startup"],"sourcesContent":["<template>\n  <the-navigation></the-navigation>\n  <main-content></main-content>\n  <the-footer></the-footer>\n</template>\n\n<style lang=\"scss\">\n:root {\n  --primary: #4ade80;\n  --grey: #64748b;\n  --dark: rgb(6, 37, 66);\n  --dark-alt: #334155;\n  --light: #f1f5f9;\n  --sidebar-width: 15rem;\n  --nameColor: rgb(111, 11, 11);\n  --background: url(\"./assets/images/background.jpg\");\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Chivo Mono', monospace;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\nbody {\n  width: 100%;\n  height: 100vh;\n  // background: var(--background);\n  // background-size: cover;\n  // background-position: center;\n  // background-repeat: no-repeat;\n  // background-attachment: fixed;\n}\n</style>\n","import { render } from \"./App.vue?vue&type=template&id=1552119c\"\nconst script = {}\n\nimport \"./App.vue?vue&type=style&index=0&id=1552119c&lang=scss\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","<template>\r\n  <header :class=\"{ 'scrolled-nav': scrollNav }\">\r\n    <nav>\r\n      <div class=\"logo\">\r\n        <img src=\"../../assets/images/logo.jpg\" alt=\"logo of website\">\r\n      </div>\r\n      <ul v-show=\"!mobile\" class=\"navigation\">\r\n        <li class=\"link\"><a href=\"#land\">Home</a></li>\r\n        <li class=\"link\"><a href=\"#about\">About</a></li>\r\n        <li class=\"link\"><a href=\"#portfolio\">Portfolio</a></li>\r\n        <li class=\"link\"><a href=\"#contact\">Contact</a></li>\r\n      </ul>\r\n      <div id=\"burger\" :class=\"{ 'active': mobileNav }\" @click=\"toggleMobileNav\" v-show=\"mobile\">\r\n        <button type=\"button\" class=\"burger-button\" title=\"Menu\">\r\n          <span class=\"burger-bar burger-bar--1\"></span>\r\n          <span class=\"burger-bar burger-bar--2\"></span>\r\n          <span class=\"burger-bar burger-bar--3\"></span>\r\n        </button>\r\n      </div>\r\n      <transition name=\"mobile-nav\">\r\n        <ul v-show=\"mobileNav\" class=\"dropdown-nav\" @click=\"closeNav\">\r\n          <li class=\"link\"><a href=\"#land\">Home</a></li>\r\n          <li class=\"link\"><a href=\"#about\">About</a></li>\r\n          <li class=\"link\"><a href=\"#portfolio\">Portfolio</a></li>\r\n          <li class=\"link\"><a href=\"#contact\">Contact</a></li>\r\n        </ul>\r\n      </transition>\r\n    </nav>\r\n  </header>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'navigation',\r\n  data() {\r\n    return {\r\n      scrollNav: false,\r\n      mobile: false,\r\n      mobileNav: false,\r\n      windowWidth: null,\r\n    };\r\n  },\r\n  created() {\r\n    window.addEventListener('resize', this.checkscreen)\r\n    this.checkscreen()\r\n  },\r\n  mounted() {\r\n    window.addEventListener('scroll', this.updateScroll)\r\n  },\r\n  methods: {\r\n    closeNav() {\r\n      this.mobileNav = false\r\n    },\r\n    toggleMobileNav() {\r\n      this.mobileNav = !this.mobileNav\r\n    },\r\n    checkscreen() {\r\n      this.windowWidth = window.innerWidth;\r\n      if (this.windowWidth <= 750) {\r\n        this.mobile = true\r\n        return;\r\n      }\r\n      this.mobile = false;\r\n      this.mobileNav = false;\r\n      return;\r\n    },\r\n    updateScroll() {\r\n      const scrollPosition = window.scrollY;\r\n      if (scrollPosition > 50) {\r\n        this.scrollNav = true;\r\n        return;\r\n      }\r\n      this.scrollNav = false;\r\n    }\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\nheader {\r\n  position: fixed;\r\n  transition: 0.5s ease all;\r\n  color: #fff;\r\n  top: 0px;\r\n  height: 100px;\r\n  z-index: 100;\r\n  display: flex;\r\n  min-width: 80%;\r\n  left: 50%;\r\n  transform: translate(-50%, 10%);\r\n  background-color: none;\r\n\r\n  @media (max-width: 1100px) {\r\n    position: fixed;\r\n    transition: 0.5s ease all;\r\n    top: 0;\r\n    color: #fff;\r\n    height: 80px;\r\n    z-index: 100;\r\n    display: flex;\r\n    min-width: 100%;\r\n    left: 0;\r\n    transform: translate(0, 0);\r\n    border-radius: 0px;\r\n  }\r\n\r\n  nav {\r\n    display: flex;\r\n    transition: 0.5s ease all;\r\n    color: #FFFFFF;\r\n    width: 100%;\r\n    justify-content: space-between;\r\n\r\n    @media (max-width: 1100px) {\r\n      justify-content: space-around;\r\n    }\r\n    @media (max-width: 750px) {\r\n      display: flex;\r\n      justify-content: center;\r\n  }\r\n\r\n    ul,\r\n    .link a {\r\n      font-weight: 500;\r\n      font-size: 1rem;\r\n      color: white;\r\n      list-style: none;\r\n      text-decoration: none;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    li {\r\n      margin-left: 2rem;\r\n\r\n      &:hover {\r\n        color: #e0a134;\r\n        border-color: #e0a134;\r\n      }\r\n    }\r\n\r\n    .logo {\r\n      display: flex;\r\n      align-items: center;\r\n\r\n      img {\r\n        width: 4rem;\r\n        height: 3.7rem;\r\n        transition: 0.5s ease all;\r\n        padding: .3rem;\r\n      }\r\n    }\r\n\r\n    .link {\r\n      transition: .5s ease all;\r\n      padding-bottom: 4px;\r\n      border-bottom: 1px solid transparent;\r\n    }\r\n\r\n    .dropdown-nav {\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: fixed;\r\n      width: 100vw;\r\n      min-height: 100vh;\r\n      background: linear-gradient(89deg, black, transparent), rgba(0, 0, 0, 0.9);\r\n      justify-content: center;\r\n      padding: 2rem;\r\n      z-index: -1;\r\n      text-align: end;\r\n\r\n      li {\r\n        margin-left: 0;\r\n        padding: 2vh 0;\r\n        font-size: 9vw;\r\n\r\n        .link,\r\n        a {\r\n          text-transform: capitalize;\r\n          color: whitesmoke;\r\n          font-size: 2.5rem;\r\n        }\r\n      }\r\n    }\r\n\r\n    .mobile-nav-enter-active {\r\n      transition: 1s ease all;\r\n    }\r\n\r\n    .mobile-nav-leave-active {\r\n      transition: 1s ease all;\r\n    }\r\n\r\n    .mobile-nav-enter-from,\r\n    .mobile-nav-leave-to {\r\n      transform: translateX(-100%);\r\n    }\r\n\r\n    .mobile-nav-enter-to {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    .navigation {\r\n      display: flex;\r\n      align-items: center;\r\n\r\n      li {\r\n        font-size: larger;\r\n\r\n        .link,\r\n        a {\r\n          color: whitesmoke;\r\n          display: flex;\r\n          width: 100%;\r\n        }\r\n      }\r\n    }\r\n\r\n    button {\r\n      cursor: pointer;\r\n    }\r\n\r\n    button:focus {\r\n      outline: 0;\r\n    }\r\n\r\n    .burger-button {\r\n      position: absolute;\r\n      display: flex;\r\n      height: 1rem;\r\n      width: 3rem;\r\n      border: 0;\r\n      border-radius: 0;\r\n      background-color: transparent;\r\n      pointer-events: all;\r\n      right: 1rem;\r\n      z-index: 99;\r\n      top: 2rem;\r\n      transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n    }\r\n\r\n    .burger-bar {\r\n      background-color: #FFF;\r\n      position: absolute;\r\n      top: 50%;\r\n      right: 6px;\r\n      left: 6px;\r\n      height: 3px;\r\n      width: auto;\r\n      margin-top: -1px;\r\n      transition: transform .6s cubic-bezier(.165, .84, .44, 1), opacity .3s cubic-bezier(.165, .84, .44, 1), background-color .6s cubic-bezier(.165, .84, .44, 1);\r\n    }\r\n\r\n    .burger-bar--1 {\r\n      -webkit-transform: translateY(-6px);\r\n      transform: translateY(-6px);\r\n      top: 40%;\r\n    }\r\n\r\n    .burger-bar--2 {\r\n      transform-origin: 100% 50%;\r\n      transform: scaleX(1);\r\n    }\r\n\r\n    .burger-button:hover .burger-bar--2 {\r\n      transform: scaleX(1);\r\n    }\r\n\r\n    .no-touchevents .burger-bar--2:hover {\r\n      transform: scaleX(1);\r\n    }\r\n\r\n    .burger-bar--3 {\r\n      transform: translateY(6px);\r\n      top: 60%;\r\n    }\r\n\r\n    #burger.active .burger-button {\r\n      transform: rotate(-180deg);\r\n    }\r\n\r\n    #burger.active .burger-bar {\r\n      background-color: var(--light);\r\n    }\r\n\r\n    #burger.active .burger-bar--1 {\r\n      transform: rotate(45deg);\r\n      top: 50%;\r\n    }\r\n\r\n    #burger.active .burger-bar--2 {\r\n      opacity: 0;\r\n    }\r\n\r\n    #burger.active .burger-bar--3 {\r\n      transform: rotate(-45deg);\r\n      top: 50%;\r\n    }\r\n  }\r\n}\r\n\r\n.scrolled-nav {\r\n  -webkit-backdrop-filter: blur(30px);\r\n  -webkit-backdrop-filter: blur(30px);\r\n  backdrop-filter: blur(30px);\r\n  border: 1px solid rgba(67, 73, 71, 0.4);\r\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n  position: fixed;\r\n  transition: 0.5s ease all;\r\n  color: #fff;\r\n  top: 0px;\r\n  height: 80px;\r\n  z-index: 100;\r\n  display: flex;\r\n  min-width: 65%;\r\n  border-radius: 100px;\r\n  left: 50%;\r\n  transform: translate(-50%, 50%);\r\n  @media (max-width: 750px) {\r\n  width: 100%;\r\n  border-radius: 0 10px 0 10px;\r\n  border: none;\r\n  position: fixed;\r\n  transform: none;\r\n  left: 0;\r\n  transition: 0.7s ease all;  \r\n  }\r\n\r\n  nav {\r\n    justify-content: space-around;\r\n    @media (max-width: 750px) {\r\n      justify-content: center;\r\n  }\r\n  }\r\n\r\n  @media (max-width: 1100px) {\r\n    min-width: 80%;\r\n\r\n    #burger .burger-button {\r\n      transition: .5s ease-in-out all;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./TheNavigation.vue?vue&type=template&id=f8abf5ca&scoped=true\"\nimport script from \"./TheNavigation.vue?vue&type=script&lang=js\"\nexport * from \"./TheNavigation.vue?vue&type=script&lang=js\"\n\nimport \"./TheNavigation.vue?vue&type=style&index=0&id=f8abf5ca&lang=scss&scoped=true\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-f8abf5ca\"]])\n\nexport default __exports__","<template>\n    <land-section></land-section>\n    <about-section></about-section>\n    <portfolio-section></portfolio-section>\n    <contact-section></contact-section>\n</template>\n\n<style lang=\"scss\" scoped>\n</style>\n\n<script>\nimport LandSection from '../pages/LandSection.vue'\nimport AboutSection from '../pages/AboutSection.vue'\nimport PortfolioSection from '../pages/PortfolioSection.vue'\nimport ContactSection from '../pages/ContactSection.vue'\n\nexport default {\n  components: {\n    LandSection,\n    AboutSection,\n    PortfolioSection,\n    ContactSection,\n  },\n}\n</script>\n\n","<template>\r\n  <section class=\"banner-section\" id=\"land\" v-motion-fade :delay=\"200\" :initial=\"{ opacity: 0.2 }\">\r\n    <div class=\"content-area\">\r\n      <div class=\"content\">\r\n        <h1 class=\"animate seven\">\r\n          <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span\r\n            class=\"dash-color\">,</span><br /><span>I</span>&nbsp;<span>a</span><span>m</span>&nbsp;<span><span class=\"redColor\">B</span><span class=\"redColor\">e</span><span class=\"redColor\">n</span><span\r\n              class=\"redColor\">j</span><span class=\"redColor\">a</span><span class=\"redColor\">m</span><span\r\n              class=\"redColor\">i</span><span class=\"redColor\">n</span>\r\n          </span>\r\n        </h1>\r\n        <h2 v-motion :initial=\"{\r\n          opacity: 0,\r\n          y: 100,\r\n        }\" :enter=\"{\r\n  opacity: 1,\r\n  y: 0,\r\n  transition: {\r\n    type: 'spring',\r\n    stiffness: 90,\r\n    delay: 1300,\r\n  },\r\n}\">\r\n          a\r\n          self<span class=\"dash-color\">-</span>taught\r\n          frontend developer<span class=\"dash-color exp-mark\">!</span>\r\n        </h2>\r\n      </div>\r\n      <base-button mode=\"outline\" href=\"#portfolio\">Projects</base-button>\r\n      <div class=\"side-text\">\r\n        <p>mikicB92@outlook.com</p>\r\n        <div class=\"container\">\r\n          <div class=\"field\">\r\n            <div class=\"mouse\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.dash-color {\r\n  color: var(--nameColor);\r\n}\r\n.exp-mark {\r\n  font-weight: 700;\r\n}\r\n\r\n.banner-section {\r\n  width: 100%;\r\n  height: 100vh;\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  background: linear-gradient(rgba(8, 17, 14, 0.3), rgba(4, 19, 14, .3),  rgba(13, 25, 21, .3)), url(../../assets/images/camo.jpg);\r\n  background-attachment: fixed;\r\n\r\n  @media (max-width: 280px) {\r\n    padding: 1rem;\r\n  }\r\n  @media (max-width: 500px) {\r\n    padding: 2rem;\r\n  }\r\n\r\n  .content-area {\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    .content {\r\n      // text-align: center;\r\n\r\n      h1 {\r\n        text-align: left;\r\n        font-size: 6rem;\r\n        font-weight: 600;\r\n        color: var(--light);\r\n        margin-bottom: 1rem;\r\n        text-shadow: -5px -5px rgba(0, 0, 0, 0.395);\r\n        .redColor {\r\n          font-size: 7rem;\r\n          color: var(--nameColor);\r\n        }\r\n      }\r\n\r\n      h2 {\r\n        text-align: center;\r\n        font-size: 1.4rem;\r\n        font-weight: 400;\r\n        color: var(--light);\r\n        margin-bottom: 4rem;\r\n        text-shadow: -5px -5px rgb(0 0 0 / 64%);\r\n        code {\r\n          font-family: initial;\r\n          font-weight: 600;\r\n          transform: translateY(20deg);\r\n          letter-spacing: 0.1rem;\r\n\r\n          @media (max-width: 280px) {\r\n            letter-spacing: 0.1rem;\r\n          }\r\n        }\r\n      }\r\n\r\n      a {\r\n        width: 9rem;\r\n        height: 4rem;\r\n        box-shadow: rgb(0 0 0 / 32%) -10px -10px 0px 0px;\r\n\r\n        &:hover {\r\n          box-shadow: none;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 1400px) {\r\n        h1 {\r\n          font-size: 4rem;\r\n          padding-top: 7rem;\r\n\r\n          .redColor {\r\n            font-size: 5rem;\r\n          }\r\n        }\r\n\r\n        h2 {\r\n          font-size: 1.2rem;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 1100px) {\r\n        h1 {\r\n          font-size: 3rem;\r\n          padding-top: 0.5rem;\r\n\r\n\r\n          .redColor {\r\n            font-size: 3.7rem;\r\n          }\r\n        }\r\n\r\n        h2 {\r\n          font-size: 1.2rem;\r\n          margin-bottom: 4rem;\r\n          text-align: end;\r\n          opacity: 0.7;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        h1 {\r\n          margin-bottom: 0rem;\r\n          padding-bottom: .5rem;\r\n          padding-top: 0;\r\n          font-size: 3rem;\r\n\r\n          .redColor {\r\n            font-size: 3.5rem;\r\n          }\r\n        }\r\n        h2 {\r\n          font-size: .9rem;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 280px) {\r\n        h1 {\r\n          font-size: 2.3rem;\r\n          letter-spacing: 0px;\r\n          text-align: left;\r\n          margin-bottom: 0rem;\r\n\r\n          .redColor {\r\n            font-size: 3rem;\r\n          }\r\n        }\r\n\r\n        h2 {\r\n          font-size: 0.9rem;\r\n          color: var(--light);\r\n          margin-bottom: 4rem;\r\n          letter-spacing: 0.2rem;\r\n        }\r\n      }\r\n    }\r\n\r\n    .side-text {\r\n      color: var(--light);\r\n      display: flex;\r\n      width: 100%;\r\n      justify-content: space-between;\r\n      position: absolute;\r\n      bottom: 0;\r\n      padding: 0 2rem 2rem;\r\n      @media (max-width: 1400px) {\r\n          padding: 1rem;\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        padding: 0 0.5rem 4rem 0.5rem;\r\n\r\n      }\r\n\r\n      @media (max-width: 280px) {\r\n        padding: 0 0.5rem 4rem 0.5rem;\r\n      }\r\n\r\n      .container {\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        justify-content: flex-end;\r\n        align-self: flex-end;\r\n\r\n        @media (max-width: 1400px) {\r\n          \r\n\r\n\r\n      }\r\n\r\n      @media (max-width: 1100px) {\r\n        // align-self: flex-end;\r\n\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        padding: 0 0.5rem 0rem 0.5rem;\r\n      }\r\n\r\n      @media (max-width: 280px) {\r\n        // align-self: flex-end;\r\n\r\n      }\r\n        \r\n        .field {\r\n\r\n          .mouse {\r\n            width: 50px;\r\n            height: 90px;\r\n            border: 3px solid #333;\r\n            border-radius: 60px;\r\n            position: relative;\r\n\r\n            &::before {\r\n              content: \"\";\r\n              width: 12px;\r\n              height: 12px;\r\n              position: absolute;\r\n              top: 10px;\r\n              left: 50%;\r\n              transform: translateX(-50%);\r\n              background: var(--nameColor);\r\n              border-radius: 50%;\r\n              opacity: 1;\r\n              -webkit-animation: wheel 2s infinite;\r\n              animation: wheel 2s infinite;\r\n            }\r\n          }\r\n\r\n          @keyframes wheel {\r\n            to {\r\n              opacity: 0;\r\n              top: 60px;\r\n            }\r\n          }\r\n\r\n          @-webkit-keyframes wheel {\r\n            to {\r\n              opacity: 0;\r\n              top: 60px;\r\n            }\r\n          }\r\n        }\r\n      }\r\n\r\n      p {\r\n        writing-mode: vertical-lr;\r\n        color: #e0a1344a;\r\n        letter-spacing: 1px;\r\n        cursor: pointer;\r\n        transition: 0.5s all ease-out;\r\n        &:hover {\r\n          color: #e0a134;\r\n          transition: 0.5s all ease-out;\r\n        }\r\n\r\n      }\r\n    }\r\n\r\n    .animate span {\r\n      display: inline-block;\r\n    }\r\n\r\n    .seven span {\r\n      opacity: 0;\r\n      transform: translate(-150px, 0) scale(0.3);\r\n      -webkit-animation: leftRight 0.8s forwards;\r\n      animation: leftRight 0.8s forwards;\r\n    }\r\n\r\n    @keyframes leftRight {\r\n      40% {\r\n        transform: translate(50px, 0) scale(0.7);\r\n        opacity: 1;\r\n        color: #8fcaec;\r\n      }\r\n\r\n      60% {\r\n        color: #c3d1f3;\r\n      }\r\n\r\n      80% {\r\n        transform: translate(0) scale(2);\r\n        opacity: 0;\r\n      }\r\n\r\n      100% {\r\n        transform: translate(0) scale(1);\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .animate span:nth-of-type(2) {\r\n      -webkit-animation-delay: 0.5s;\r\n      animation-delay: 0.05s;\r\n    }\r\n\r\n    .animate span:nth-of-type(3) {\r\n      -webkit-animation-delay: 0.1s;\r\n      animation-delay: 0.1s;\r\n    }\r\n\r\n    .animate span:nth-of-type(4) {\r\n      -webkit-animation-delay: 0.15s;\r\n      animation-delay: 0.15s;\r\n    }\r\n\r\n    .animate span:nth-of-type(5) {\r\n      -webkit-animation-delay: 0.2s;\r\n      animation-delay: 0.2s;\r\n    }\r\n\r\n    .animate span:nth-of-type(6) {\r\n      -webkit-animation-delay: 0.25s;\r\n      animation-delay: 0.25s;\r\n    }\r\n\r\n    .animate span:nth-of-type(7) {\r\n      -webkit-animation-delay: 0.3s;\r\n      animation-delay: 0.3s;\r\n    }\r\n\r\n    .animate span:nth-of-type(8) {\r\n      -webkit-animation-delay: 0.35s;\r\n      animation-delay: 0.35s;\r\n    }\r\n\r\n    .animate span:nth-of-type(9) {\r\n      -webkit-animation-delay: 0.4s;\r\n      animation-delay: 0.4s;\r\n    }\r\n\r\n    .animate span:nth-of-type(10) {\r\n      -webkit-animation-delay: 0.45s;\r\n      animation-delay: 0.45s;\r\n    }\r\n\r\n    .animate span:nth-of-type(11) {\r\n      -webkit-animation-delay: 0.5s;\r\n      animation-delay: 0.5s;\r\n    }\r\n\r\n    .animate span:nth-of-type(12) {\r\n      -webkit-animation-delay: 0.55s;\r\n      animation-delay: 0.55s;\r\n    }\r\n\r\n    .animate span:nth-of-type(13) {\r\n      -webkit-animation-delay: 0.6s;\r\n      animation-delay: 0.6s;\r\n    }\r\n\r\n    .animate span:nth-of-type(14) {\r\n      -webkit-animation-delay: 0.65s;\r\n      animation-delay: 0.65s;\r\n    }\r\n\r\n    .animate span:nth-of-type(15) {\r\n      -webkit-animation-delay: 0.7s;\r\n      animation-delay: 0.7s;\r\n    }\r\n\r\n    .animate span:nth-of-type(16) {\r\n      -webkit-animation-delay: 0.75s;\r\n      animation-delay: 0.75s;\r\n    }\r\n\r\n    .animate span:nth-of-type(17) {\r\n      -webkit-animation-delay: 0.8s;\r\n      animation-delay: 0.8s;\r\n    }\r\n\r\n    .animate span:nth-of-type(18) {\r\n      -webkit-animation-delay: 0.85s;\r\n      animation-delay: 0.85s;\r\n    }\r\n  }\r\n\r\n}</style>\r\n","import { render } from \"./LandSection.vue?vue&type=template&id=34832c3a&scoped=true\"\nconst script = {}\n\nimport \"./LandSection.vue?vue&type=style&index=0&id=34832c3a&lang=scss&scoped=true\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-34832c3a\"]])\n\nexport default __exports__","<template>\r\n  <section class=\"about-section\" id=\"about\">\r\n    <about-me></about-me>\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport AboutMe from '../layout/AboutMe.vue';\r\nexport default {\r\n  components: {\r\n    AboutMe\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.about-section {\r\n  min-width: 100%;\r\n  min-height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n  padding: 2rem;\r\n  background: linear-gradient( #251C0B , rgb(8, 24, 8), rgb(4, 4, 4)), #7d540d;\r\n  background-attachment: fixed;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  background-size: cover;\r\n  z-index: 0;\r\n  @media (max-width: 280px) {\r\n    padding: 1.5rem;\r\n  }\r\n}\r\n</style>\r\n","<template>\r\n  <about-me-content></about-me-content>\r\n  <my-skills></my-skills>\r\n  <my-other-skills></my-other-skills>\r\n</template>\r\n\r\n<script>\r\nimport AboutMeContent from './inner-layouts/AboutMeContent.vue';\r\nimport MySkills from './inner-layouts/MySkills.vue';\r\nimport MyOtherSkills from './inner-layouts/MyOtherSkills.vue';\r\n\r\nexport default {\r\n  components: {\r\n    AboutMeContent,\r\n    MySkills,\r\n    MyOtherSkills\r\n  }\r\n}\r\n</script>\r\n","<template>\r\n    <div class=\"fake-text\">\r\n      About\r\n    </div>\r\n  <h2 class=\"animateHeader seven\">\r\n    <span>.</span><span>n</span><span>i</span><span>c</span><span>e</span><span>T</span><span>o</span><span>M</span><span>e</span><span>e</span><span>t</span><span>Y</span><span>o</span><span>u</span>\r\n  </h2>\r\n  <div class=\"about-me\">\r\n    <div class=\"left-about-me\">\r\n      <p class=\"about-me-first-text\">\r\n        I'm from Bosnia and Herzegovina, Travnik.<br />\r\n        I have serious passion for UI effects, animation and creating dynamic\r\n        user experiences.<br />\r\n        Love for programming was born in army, where I was on watch, during a\r\n        long and boring day's.\r\n      </p>\r\n      <br>\r\n      <br>\r\n      <p class=\"about-me-sec-text\">\r\n        Since beginning my journey as a <span>self-taught</span> developer\r\n        nearly <span>4</span> years ago, I've done <span>remote</span> work for\r\n        agencie and collaborated with <span>talented</span> people/friends to\r\n        create <span>web sites</span> for learning, business and consumer use.\r\n        I'm quietly confident, naturally curious, and perpetually working on\r\n        <span>improving</span> my developer <span>skills</span>.\r\n      </p>\r\n    </div>\r\n    <div class=\"right-about-me\">\r\n      <img src=\"../../../assets/images/soldier-avatar.jpg\" class=\"avatar-img\" alt=\"avatar\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"scss\">\r\n\r\n    .fake-text {\r\n    font-family: sans-serif;\r\n    font-weight: 600;\r\n    position: absolute;\r\n    left: 22vw;\r\n    z-index: -1;\r\n    font-size: 25vw;\r\n    color: rgba(255, 255, 255, 0.04);\r\n    }\r\nh2 {\r\n  font-size: 3rem;\r\n  padding: 8rem 0rem 2rem 6rem;\r\n  letter-spacing: 1px;\r\n  color: var(--light);\r\n  font-weight: 900;\r\n  width: 100%;\r\n\r\n  @media (max-width: 1400px) {\r\n    padding: 6rem 0rem 0rem 6rem;\r\n    width: 100%;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    padding: 5.4rem 0 2rem 0;\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    font-size: 1.8rem;\r\n    padding: 4rem 0rem 3rem 0rem;\r\n    letter-spacing: 2px;\r\n  }\r\n\r\n  @media (max-width: 280px) {\r\n    font-size: 1.4rem;\r\n    padding: 4rem 0rem 3rem 0rem;\r\n    letter-spacing: 2.3px;\r\n  }\r\n}\r\n\r\n.animateHeader span {\r\n  display: inline-block;\r\n}\r\n\r\n.animateHeader span:nth-of-type(2) {\r\n  animation-delay: .05s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(3) {\r\n  animation-delay: .1s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(4) {\r\n  animation-delay: .15s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(5) {\r\n  animation-delay: .2s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(6) {\r\n  animation-delay: .25s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(7) {\r\n  animation-delay: .3s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(8) {\r\n  animation-delay: .35s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(9) {\r\n  animation-delay: .4s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(10) {\r\n  animation-delay: .45s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(11) {\r\n  animation-delay: .5s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(12) {\r\n  animation-delay: .55s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(13) {\r\n  animation-delay: .6s;\r\n}\r\n\r\n.animateHeader span:nth-of-type(14) {\r\n  animation-delay: .65s;\r\n}\r\n\r\n.seven span {\r\n  animation: leftRight 10s ease-in-out infinite;\r\n}\r\n\r\n@keyframes leftRight {\r\n  30% {\r\n    color: #d8f4d5;\r\n  }\r\n\r\n  40% {\r\n    color: #11611cd2;\r\n  }\r\n\r\n  60% {\r\n    color: #08340ed2;\r\n  }\r\n\r\n  70% {\r\n    color: #11611cd2;\r\n  }\r\n\r\n  90% {\r\n    color: #d8f4d5;\r\n  }\r\n}\r\n\r\n.about-me {\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 3rem;\r\n\r\n  @media (max-width: 1400px) {\r\n    padding: 0 2rem;\r\n  }\r\n\r\n  @media (max-width: 1100px) {\r\n    flex-direction: column-reverse;\r\n    padding: 0rem;\r\n  }\r\n\r\n  .left-about-me {\r\n    flex-direction: column;\r\n    display: flex;\r\n    flex: 1 1 100%;\r\n    padding: 3rem 0;\r\n    align-self: center;\r\n    \r\n    @media (max-width: 1400px) {\r\n      padding: 0  3rem 3rem 3rem;\r\n    }\r\n    @media (max-width: 1100px) {\r\n      padding: 1.5rem 0;\r\n    }\r\n    .about-me-first-text, .about-me-sec-text {\r\n      padding: 2rem 2rem 2rem 20rem;\r\n      font-size: 14pt;\r\n      font-weight: 400;\r\n      line-height: 1.5;\r\n      text-align: right;\r\n      color: var(--light);\r\n\r\n      @media (max-width: 1400px) {\r\n        padding: 0rem;\r\n        text-align: right;\r\n        font-size: 11pt;\r\n      }\r\n\r\n      @media (max-width: 1100px) {\r\n        padding: 0rem;\r\n        line-height: 1.3;\r\n        text-align: center;\r\n      }\r\n\r\n      @media (max-width: 768px) {\r\n        font-size: 11pt\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        font-size: 11pt;\r\n        \r\n      }\r\n\r\n      @media (max-width: 280px) {\r\n        font-size: 11pt;\r\n      }\r\n    }\r\n  }\r\n\r\n  .right-about-me {\r\n    display: flex;\r\n    width: 100%;\r\n    @media (max-width: 1400px) {\r\n      justify-content: center;\r\n      padding: 0 3rem 3rem 3rem\r\n    }\r\n    .avatar-img {\r\n      min-width: 80%;\r\n      min-height: auto;\r\n      object-fit: contain;\r\n      mix-blend-mode: hard-light;  \r\n      aspect-ratio: 1/1;\r\n      border-radius: 50%;\r\n\r\n      @media (max-width: 1400px) {\r\n        width: 90%;\r\n      }\r\n\r\n      @media (max-width: 1100px) {\r\n        width: 50%;\r\n      }\r\n      @media (max-width: 480px) {\r\n        width: 70%;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./AboutMeContent.vue?vue&type=template&id=578421fa&scoped=true\"\nconst script = {}\n\nimport \"./AboutMeContent.vue?vue&type=style&index=0&id=578421fa&scoped=true&lang=scss\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-578421fa\"]])\n\nexport default __exports__","<template>\r\n  <div class=\"my-skills\">\r\n    <div class=\"fake-text\">\r\n      Skills\r\n    </div>\r\n    <h2>Skills <span class=\"dash-color\">&</span> Experiences</h2>\r\n    <p>\r\n      {{ skillFirstPara }}\r\n    </p>\r\n    <p>\r\n      {{ skillSecPara }}\r\n    </p>\r\n  </div>\r\n  <div class=\"circle-bar-leyout\">\r\n    <div class=\"circle-bars\">\r\n      <circle-progress :is-bg-shadow=\"true\" :bg-shadow=\"{\r\n        inset: true,\r\n        vertical: 3,\r\n        horizontal: 2,\r\n        blur: 4,\r\n        opacity: 0.4,\r\n        color: '#000000',\r\n      }\" :transition=\"2000\" :percent=\"85\" :viewport=\"true\" :show-percent=\"true\" :is-gradient=\"true\"\r\n        empty-color=\"#FFFFFF\" :border-width=\"12\" :border-bg-width=\"3\" :gradient=\"{\r\n          angle: 180,\r\n          startColor: 'var(--nameColor)',\r\n          stopColor: '#1D7353',\r\n        }\" />\r\n      <h3>HTML</h3>\r\n    </div>\r\n    <div class=\"circle-bars\">\r\n      <circle-progress :is-bg-shadow=\"true\" :bg-shadow=\"{\r\n        inset: true,\r\n        vertical: -6,\r\n        horizontal: 5,\r\n        blur: 4,\r\n        opacity: 0.4,\r\n        color: '#000000',\r\n      }\" :transition=\"2000\" :percent=\"70\" :viewport=\"true\" :show-percent=\"true\" :is-gradient=\"true\"\r\n        empty-color=\"#ffffff\" :border-width=\"12\" :border-bg-width=\"3\" :gradient=\"{\r\n          angle: 180,\r\n          startColor: 'var(--nameColor)',\r\n          stopColor: '#1D7353',\r\n        }\" />\r\n      <h3>CSS</h3>\r\n    </div>\r\n    <div class=\"circle-bars\">\r\n      <circle-progress :is-bg-shadow=\"true\" :bg-shadow=\"{\r\n        inset: true,\r\n        vertical: 2,\r\n        horizontal: 5,\r\n        blur: 4,\r\n        opacity: 0.4,\r\n        color: '#000000',\r\n      }\" :transition=\"2000\" :percent=\"65\" :viewport=\"true\" :show-percent=\"true\" :is-gradient=\"true\"\r\n        empty-color=\"#FFFFFF\" :border-width=\"12\" :border-bg-width=\"3\" :gradient=\"{\r\n          angle: 180,\r\n          startColor: 'var(--nameColor)',\r\n          stopColor: '#1D7353',\r\n        }\" />\r\n      <h3>JS</h3>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nimport \"vue3-circle-progress/dist/circle-progress.css\";\r\nimport CircleProgress from \"vue3-circle-progress\";\r\nexport default {\r\n  data() {\r\n    return {\r\n      skillFirstPara: \"I create responsive websites that are fast, easy to use, and build with best practic.\",\r\n      skillSecPara: \"The main area of my expertise is front-end development, HTML, CSS, JS, building small and medium web apps, custom plugins, feature, animations, and coding interactive layouts\"\r\n    }\r\n  },\r\n  components: { CircleProgress },\r\n};\r\n</script>\r\n<style scoped lang=\"scss\">\r\n.my-skills {\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 2rem;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  @media (max-width: 1100px) {\r\n    padding: 0rem;\r\n  }\r\n  .fake-text {\r\n    font-family: sans-serif;\r\n    font-weight: 600;\r\n    position: absolute;\r\n    left: 0vw;\r\n    z-index: -1;\r\n    font-size: 25vw;\r\n    color: rgba(255, 255, 255, 0.04);\r\n    @media (max-width: 480px) {\r\n       overflow-wrap: break-word;    \r\n      top: 113vh;\r\n     }\r\n    }\r\n  h2 {\r\n    color: var(--light);\r\n    padding-bottom: 2rem;\r\n    font-size: 24pt;\r\n    font-weight: 900;\r\n    letter-spacing: 1px;\r\n\r\n    .dash-color {\r\n      color: var(--nameColor)\r\n    }\r\n\r\n    @media (max-width: 1100px) {\r\n      font-size: 16pt;\r\n    }\r\n  }\r\n\r\n  p {\r\n    color: var(--light);\r\n    text-align: center;\r\n    font-size: 14pt;\r\n    font-weight: 400;\r\n    line-height: 1.5;\r\n\r\n\r\n    @media (max-width: 1400px) {\r\n        font-size: 11pt;\r\n      }\r\n\r\n      @media (max-width: 768px) {\r\n        font-size: 11pt\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        font-size: 11pt;\r\n      }\r\n\r\n      @media (max-width: 280px) {\r\n        font-size: 11pt;\r\n      }\r\n  }\r\n}\r\n\r\n.circle-bar-leyout {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n\r\n  @media (max-width: 1100px) {\r\n    flex-direction: column;\r\n  }\r\n\r\n  .circle-bars {\r\n    padding: 1rem;\r\n    text-align: center;\r\n    color: white;\r\n    font-size: 24pt;\r\n    align-self: center;\r\n  }\r\n\r\n  h3 {\r\n    color: var(--light);\r\n    font-size: 18pt;\r\n    padding: 1rem;\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./MySkills.vue?vue&type=template&id=b673e76c&scoped=true\"\nimport script from \"./MySkills.vue?vue&type=script&lang=js\"\nexport * from \"./MySkills.vue?vue&type=script&lang=js\"\n\nimport \"./MySkills.vue?vue&type=style&index=0&id=b673e76c&scoped=true&lang=scss\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-b673e76c\"]])\n\nexport default __exports__","<template>\r\n  <h2>other tech<span class=\"dash-color\">'</span>s</h2>\r\n  <div class=\"main-other-skill-container\">\r\n    <div class=\"other-skill-container\">\r\n      <progress-bar :percentage=\"40\" :label=\"`VueJS`\" :color=\"'#41b883'\"></progress-bar>\r\n      <progress-bar :percentage=\"20\" :label=\"`NodeJs`\" :color=\"'#3C873a'\"></progress-bar>\r\n      <progress-bar :percentage=\"70\" :label=\"`Bootstrap`\" :color=\"'#563d7c'\"></progress-bar>\r\n      <progress-bar :percentage=\"50\" :label=\"`Git`\" :color=\"'#FC6D27'\"></progress-bar>\r\n      <progress-bar :percentage=\"30\" :label=\"`Npm`\" :color=\"'#8C929D'\"></progress-bar>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport ProgressBar from './ProgressBar.vue';\r\n\r\nexport default {\r\n  components: {\r\n    ProgressBar,\r\n  },\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n$vue: #41b883;\r\n$node: #3C873a;\r\n$npm: #CC3534;\r\n$git: #8C929D;\r\n$bootstrap: #553C7B;\r\n\r\nh2 {\r\n  color: var(--light);\r\n  padding: 2rem 2rem 0;\r\n  text-align: center;\r\n  font-size: 24pt;\r\n  font-weight: 900;\r\n  letter-spacing: 1px;\r\n  \r\n  .dash-color {\r\n    color: var(--nameColor)\r\n  }\r\n  \r\n  @media (max-width: 1100px) {\r\n    font-size: 16pt;\r\n  }\r\n}\r\n\r\n.main-other-skill-container {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n\r\n  @media (max-width: 1400px) {\r\n    flex-direction: column;\r\n  }\r\n  \r\n  .other-skill-container {\r\n    align-items: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 60%;\r\n    height: 100%;\r\n    padding: 4rem;\r\n\r\n    @media (max-width: 1400px) {\r\n      width: 70%;\r\n      padding: 0 1rem 2rem 1rem;\r\n    }\r\n\r\n    @media (max-width: 1100px) {\r\n      width: 70%;\r\n      padding-bottom: 1rem;\r\n      padding: 0rem;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      width: 90%;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      width: 90vw;\r\n    }\r\n\r\n    @media (max-width: 280px) {\r\n      width: 100vw;\r\n    }\r\n\r\n  }\r\n}\r\n</style>\r\n","<template>\r\n  <div class=\"progress-bar\" ref=\"scrollAnimate\">\r\n    <div class=\"info\">\r\n      <label>{{ label }}</label>\r\n      <label class=\"percentage\">{{ count }}%</label>\r\n    </div>\r\n    <div class=\"background-bar\">\r\n      <transition appear @before-appear=\"beforeEnter\" @after-appear=\"enter\" v-if=\"isScrolled\">\r\n        <div class=\"tracker-bar\"></div>\r\n      </transition>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data() {\r\n    return {\r\n      count: 0,\r\n      isScrolled: false\r\n    }\r\n  },\r\n  props: {\r\n    percentage: Number,\r\n    label: String,\r\n    color: String,\r\n  },\r\n  created() {\r\n    window.addEventListener('scroll', this.onElemenetScroll)\r\n  },\r\n  methods: {\r\n    beforeEnter(el) {\r\n      el.style.width = 0\r\n    },\r\n    enter(el) {\r\n      el.style.width = `${this.percentage}%`\r\n      el.style.background = this.color;\r\n      el.style.transition = `width 1s linear`\r\n      let interval = setInterval(() => {\r\n        if (this.count < this.percentage) {\r\n          this.count += 1\r\n        } else\r\n          clearInterval(interval)\r\n      }, 15)\r\n    },\r\n    onElemenetScroll() {\r\n      const box = this.$refs.scrollAnimate\r\n      if (this.isInViewport(box)) {\r\n        this.isScrolled = true\r\n      }\r\n    },\r\n    isInViewport(el) {\r\n      const rect = el.getBoundingClientRect();\r\n      return (\r\n        rect.top >= 0 &&\r\n        rect.left >= 0 &&\r\n        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\r\n        rect.right <= (window.innerWidth || document.documentElement.clientWidth)\r\n      )\r\n    }\r\n  },\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n$greydark: #c0cac9;\r\n$black: #333;\r\n$screen: #eff3f4;\r\n$pink: #ff298a;\r\n$grey: #dedfe0;\r\n\r\n.progress-bar {\r\n  width: 100%;\r\n  padding: 1rem;\r\n\r\n  @media (max-width: 1100px) {\r\n    width: 100%;\r\n  }\r\n\r\n  label {\r\n    color: var(--light);\r\n    padding-bottom: .5rem;\r\n    font-weight: 600;\r\n  }\r\n\r\n  .info {\r\n    font-size: 17px;\r\n    justify-content: space-between;\r\n    display: flex;\r\n    color: grey;\r\n    line-height: 1.5;\r\n\r\n    .percentage {\r\n      font-weight: bolder;\r\n    }\r\n  }\r\n\r\n  .background-bar {\r\n    background: #cccccc;\r\n    width: 100%;\r\n    height: .7rem;\r\n    border-radius: 3px;\r\n  }\r\n\r\n  .tracker-bar {\r\n    background: grey;\r\n    height: .7rem;\r\n    width: 0;\r\n    transition: width 0.5s linear;\r\n    border-radius: 3px;\r\n  }\r\n}\r\n\r\n.vueColor {\r\n  background: var(--vueColor);\r\n}\r\n</style>\r\n","import { render } from \"./ProgressBar.vue?vue&type=template&id=85bebd42&scoped=true\"\nimport script from \"./ProgressBar.vue?vue&type=script&lang=js\"\nexport * from \"./ProgressBar.vue?vue&type=script&lang=js\"\n\nimport \"./ProgressBar.vue?vue&type=style&index=0&id=85bebd42&scoped=true&lang=scss\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-85bebd42\"]])\n\nexport default __exports__","import { render } from \"./MyOtherSkills.vue?vue&type=template&id=5c4d1e8f&scoped=true\"\nimport script from \"./MyOtherSkills.vue?vue&type=script&lang=js\"\nexport * from \"./MyOtherSkills.vue?vue&type=script&lang=js\"\n\nimport \"./MyOtherSkills.vue?vue&type=style&index=0&id=5c4d1e8f&scoped=true&lang=scss\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-5c4d1e8f\"]])\n\nexport default __exports__","import { render } from \"./AboutMe.vue?vue&type=template&id=10272924\"\nimport script from \"./AboutMe.vue?vue&type=script&lang=js\"\nexport * from \"./AboutMe.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","import { render } from \"./AboutSection.vue?vue&type=template&id=7875e070&scoped=true\"\nimport script from \"./AboutSection.vue?vue&type=script&lang=js\"\nexport * from \"./AboutSection.vue?vue&type=script&lang=js\"\n\nimport \"./AboutSection.vue?vue&type=style&index=0&id=7875e070&lang=scss&scoped=true\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-7875e070\"]])\n\nexport default __exports__","<template>\r\n  <section class=\"portfolio-section\" id=\"portfolio\">\r\n    <h2>Some projects I<span class=\"dash-color\">'</span>ve built</h2>\r\n    <portfolio-cards></portfolio-cards>\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport PortfolioCards from '../layout/inner-layouts/PortfolioCards.vue'\r\nexport default {\r\n  components: {\r\n    PortfolioCards\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.portfolio-section {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 100%;\r\n  background-color: #1D7353;\r\n  // background: linear-gradient(rgba(0, 0, 0, 0.833), rgba(0, 0, 0, 0.7)), #0B1C26;\r\n  background: linear-gradient(rgba(8, 17, 14, 0.3), rgba(4, 19, 14, .3),  rgba(13, 25, 21, .3)), url(../../assets/images/camo.jpg   );\r\n  background-attachment: fixed;\r\n  h2 {\r\n    color: var(--light);\r\n    padding: 9rem 0 1rem 0;\r\n    font-size: 24pt;\r\n    letter-spacing: 1px;\r\n    font-weight: 900;\r\n\r\n    .dash-color {\r\n      color: var(--nameColor)\r\n    }\r\n    @media (max-width: 1400px) {\r\n      padding: 9rem 0 0 0 ;\r\n    }\r\n\r\n    @media (max-width: 1100px) {\r\n      padding: 6rem 4rem 0rem;\r\n      text-align: center;\r\n      font-size: 16pt;\r\n      flex: 0 1 40%;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      padding: 6rem 4rem 1rem;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","<template>\r\n  <div class=\"project-container\" v-for=\"project in projects\" :key=\"project.id\">\r\n    <div class=\"project-card\">\r\n      <div class=\"project-id\">\r\n        #<span class=\"id-numb\">{{ project.id }}</span>\r\n      </div>\r\n      <div class=\"project-card-left\">\r\n        <h4>{{ project.usedSkills }}</h4>\r\n      </div>\r\n      <div class=\"project-card-middle\">\r\n        <figure>\r\n          <img :src=\"project.image\" alt=\"project image\" />\r\n          <figcaption>\r\n            <img src=\"../../../assets/images/soldier-avatar.jpg\" alt=\"on hover avatar image\" />\r\n          </figcaption>\r\n        </figure>\r\n      </div>\r\n      <div class=\"project-card-right\">\r\n        <h2>{{ project.name }}</h2>\r\n        <a href=\"#\">VISIT THE WEBSITE\r\n          <hr />\r\n        </a>\r\n        <div class=\"project-social-icons\">\r\n          <a href=\"https://gitlab.com/MikicB\" class=\"project-social-icons-link\" target=\"_blank\">\r\n            <i class=\"fa-brands fa-square-gitlab\"></i>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport image1 from '../../../assets/images/logo.jpg'\r\nimport image2 from '../../../assets/images/cool-background.jpg'\r\nimport image3 from '../../../assets/images/background-land-page.jpg'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      projects: [\r\n        {\r\n          id: 1,\r\n          name: \"Project in progress 1\",\r\n          usedSkills: \"HTML, CSS, JS, BOOTSTRAP, PHP\",\r\n          image: image1\r\n        },\r\n        {\r\n          id: 2,\r\n          name: \"Project in progress 2\",\r\n          usedSkills: \"HTML, CSS, JS, BOOTSTRAP, VUEJS\",\r\n          image: image2\r\n        },\r\n        {\r\n          id: 3,\r\n          name: \"Skola kosarke Prvi Kos\",\r\n          usedSkills: \"HTML, CSS, JS, BOOTSTRAP, PHP\",\r\n          image: image3\r\n        },\r\n      ],\r\n    };\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.project-container {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 2rem;\r\n\r\n  @media (max-width: 480px) {\r\n    padding: 3rem 1rem 3rem;\r\n  }\r\n  @media (max-width: 280px) {\r\n    padding: 2rem 1rem;\r\n  }\r\n\r\n  .project-card {\r\n    width: 40%;\r\n    display: flex;\r\n    text-align: center;\r\n    align-items: center;\r\n    border: 1px solid #e0a13437;\r\n    background: linear-gradient(180deg,\r\n        rgba(35, 37, 49, 0.5),\r\n        rgba(15, 15, 24, 0.5));\r\n    backdrop-filter: blur(70px);\r\n    padding: 3rem 0rem;\r\n    border-radius: 50px;\r\n    justify-content: space-evenly;\r\n    position: relative;\r\n\r\n    @media (min-width: 1401px) {\r\n      width: 100%;\r\n    }\r\n\r\n    @media (max-width: 1400px) {\r\n      width: 60%;\r\n      padding: 2rem;\r\n    }\r\n\r\n    @media (min-width: 1399px) {\r\n      width: 40%;\r\n    }\r\n\r\n    @media (max-width: 1100px) {\r\n      width: 50%;\r\n      flex-direction: column;\r\n      padding: 1.5rem;\r\n      border-radius: 30px;\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n      width: 100%;\r\n      flex-direction: column;\r\n      padding: 1.5rem;\r\n      border-radius: 30px;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      width: 80%;\r\n    }\r\n\r\n    @media (max-width: 280px) {\r\n      width: 100%;\r\n    }\r\n\r\n    .project-id {\r\n      color: #e0a134;\r\n      font-size: 80pt;\r\n      font-weight: 600;\r\n      position: absolute;\r\n      top: -65px;\r\n      opacity: 0.1;\r\n      right: -40px;\r\n\r\n      @media (max-width: 1400px) {\r\n        font-size: 70pt;\r\n        top: -55px;\r\n      }\r\n\r\n      @media (max-width: 1100px) {\r\n        font-size: 50pt;\r\n        display: block;\r\n        box-sizing: border-box;\r\n        margin: 1rem;\r\n      }\r\n\r\n      @media (max-width: 280px) {\r\n        font-size: 40pt;\r\n        right: -20px;\r\n        ;\r\n      }\r\n    }\r\n\r\n    .project-card-left {\r\n      h4 {\r\n        writing-mode: tb-rl;\r\n        font-size: 0.7rem;\r\n        letter-spacing: 0.17rem;\r\n        color: #e0a134;\r\n        transform: rotate(180deg);\r\n        opacity: 0.7rem;\r\n        cursor: pointer;\r\n        transition: color 1s ease-out;\r\n\r\n        &:hover {\r\n          transition: color 0.3s ease-in-out;\r\n          color: #e0a13498;\r\n        }\r\n\r\n        @media (max-width: 1400px) {\r\n          margin-left: -50px;\r\n          font-size: 0.5rem;\r\n        }\r\n\r\n        @media (max-width: 1100px) {\r\n          display: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    .project-card-middle {\r\n      width: 40%;\r\n      height: 22.5rem;\r\n      position: relative;\r\n      border-radius: 50px;\r\n      overflow: hidden;\r\n      background-size: cover;\r\n      cursor: pointer;\r\n\r\n      figure {\r\n        font-family: \"Raleway\", Arial, sans-serif;\r\n        position: relative;\r\n        overflow: hidden;\r\n        width: 100%;\r\n        color: #000000;\r\n        text-align: center;\r\n        -webkit-perspective: 50em;\r\n        perspective: 50em;\r\n        height: 100%;\r\n      }\r\n\r\n      figure * {\r\n        -webkit-transition: all 0.2s ease-out;\r\n        transition: all 0.2s ease-out;\r\n      }\r\n\r\n      figure img {\r\n        max-width: 100%;\r\n        vertical-align: top;\r\n        position: relative;\r\n      }\r\n\r\n      figure figcaption {\r\n        top: 50%;\r\n        left: 20px;\r\n        right: 20px;\r\n        position: absolute;\r\n        opacity: 0;\r\n        z-index: 1;\r\n      }\r\n\r\n      figure:after {\r\n        background-color: black;\r\n        position: absolute;\r\n        content: \"\";\r\n        display: block;\r\n        top: 20px;\r\n        left: 20px;\r\n        right: 20px;\r\n        bottom: 20px;\r\n        -webkit-transition: all 0.4s ease-in-out;\r\n        transition: all 0.4s ease-in-out;\r\n        -webkit-transform: rotateX(-90deg);\r\n        transform: rotateX(-90deg);\r\n        -webkit-transform-origin: 50% 50%;\r\n        -ms-transform-origin: 50% 50%;\r\n        transform-origin: 50% 50%;\r\n        opacity: 0;\r\n        border-radius: 50px;\r\n      }\r\n\r\n      figure:hover figcaption {\r\n        -webkit-transform: translateY(-50%);\r\n        transform: translateY(-50%);\r\n        opacity: 1;\r\n        -webkit-transition-delay: 0.2s;\r\n        transition-delay: 0.2s;\r\n      }\r\n\r\n      figure:hover:after {\r\n        -webkit-transform: rotateX(0);\r\n        transform: rotateX(0);\r\n        opacity: 0.9;\r\n      }\r\n\r\n      figcaption {\r\n        img {\r\n          width: 50%;\r\n          border-radius: 50%;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 1400px) {\r\n        width: 40%;\r\n        height: 20rem;\r\n      }\r\n\r\n      @media (max-width: 1100px) {\r\n        width: 100%;\r\n        height: 20rem;\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        height: 14rem;\r\n      }\r\n\r\n      @media (max-width: 280px) {\r\n        height: 13rem;\r\n      }\r\n\r\n      img {\r\n        position: absolute;\r\n        background-position: cover;\r\n        width: 100%;\r\n        height: 100%;\r\n      }\r\n    }\r\n\r\n    .project-card-right {\r\n      width: 30%;\r\n      flex: 0 1 30%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      height: 20rem;\r\n      text-align: left;\r\n      padding: 0rem;\r\n      justify-content: space-evenly;\r\n\r\n      @media (max-width: 1100px) {\r\n        width: 100%;\r\n        flex: 0 1 40%;\r\n      }\r\n\r\n      h2 {\r\n        font-size: 2rem;\r\n        letter-spacing: -0.1rem;\r\n        color: var(--light);\r\n\r\n        @media (max-width: 1100px) {\r\n          margin-top: 0.5rem;\r\n          font-size: 1.8rem;\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n          margin-top: 1rem;\r\n          font-size: 1.4rem;\r\n        }\r\n\r\n        @media (max-width: 280px) {\r\n          margin-top: 2rem;\r\n          font-size: 1.3rem;\r\n        }\r\n      }\r\n\r\n      a {\r\n        width: fit-content;\r\n        color: #e0a134;\r\n        text-decoration: none;\r\n        font-size: 10pt;\r\n        display: inline-block;\r\n        position: relative;\r\n        &:hover {\r\n          color: #e0a13498;\r\n        }\r\n\r\n        @media (max-width: 1100px) {\r\n          margin-top: 0.5rem;\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n          font-size: 8pt;\r\n        }\r\n\r\n        @media (max-width: 280px) {\r\n          font-size: 8pt;\r\n        }\r\n\r\n        hr {\r\n          width: 18%;\r\n          margin-top: 0.4rem;\r\n          transition: width 1s ease;\r\n          opacity: 0.7;\r\n        }\r\n\r\n        &:hover {\r\n          hr {\r\n            width: 100%;\r\n            color: #e0a134;\r\n            opacity: 1;\r\n\r\n            // @media (max-width: 1400px) {\r\n            //   width: 78%;\r\n            // }\r\n\r\n            // @media (max-width: 480px) {\r\n            //   width: 64%;\r\n            // }\r\n\r\n            // @media (max-width: 280px) {\r\n            //   width: 64%;\r\n            // }\r\n          }\r\n        }\r\n\r\n        i {\r\n          color: #e0a1348e;\r\n          font-size: 2rem;\r\n          opacity: 0.7;\r\n          transition: transform 1s ease;\r\n\r\n          &:hover {\r\n            transform: scale(1.2);\r\n            transition: transform 1s ease;\r\n            color: #e0a134;\r\n          }\r\n        }\r\n      }\r\n\r\n      .project-social-icons {\r\n        width: fit-content;\r\n        .project-social-icons-link {\r\n          width: fit-content;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./PortfolioCards.vue?vue&type=template&id=a313bb08&scoped=true\"\nimport script from \"./PortfolioCards.vue?vue&type=script&lang=js\"\nexport * from \"./PortfolioCards.vue?vue&type=script&lang=js\"\n\nimport \"./PortfolioCards.vue?vue&type=style&index=0&id=a313bb08&lang=scss&scoped=true\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-a313bb08\"]])\n\nexport default __exports__","import { render } from \"./PortfolioSection.vue?vue&type=template&id=5522720a&scoped=true\"\nimport script from \"./PortfolioSection.vue?vue&type=script&lang=js\"\nexport * from \"./PortfolioSection.vue?vue&type=script&lang=js\"\n\nimport \"./PortfolioSection.vue?vue&type=style&index=0&id=5522720a&lang=scss&scoped=true\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-5522720a\"]])\n\nexport default __exports__","<template>\r\n  <section class=\"contact-section\" id=\"contact\">\r\n    <div class=\"get-in-touch\">\r\n      <h2>{{ contactHeader }}</h2>\r\n      <p class=\"get-in-touch-para\">\r\n        {{ getInTouchPara }}\r\n      </p>\r\n      <div class=\"get-in-touch-field\">\r\n        <contact-me></contact-me>\r\n        <contact-form></contact-form>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</template>\r\n<script>\r\nimport ContactForm from \"../layout/ContactForm.vue\";\r\nimport ContactMe from \"../layout/inner-layouts/ContactMe.vue\"\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      contactHeader: \"Get In Touch\",\r\n      getInTouchPara: \"I'm interested in freelance opportunities - especiallty ambitious or large projects. If you have other requests or questions, please use the form.\"\r\n    }\r\n  },\r\n  components: {\r\n    ContactForm,\r\n    ContactMe\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.contact-section {\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 2rem;\r\n  background-color: #080808;\r\n  background-size: cover;\r\n  min-height: 100vh;\r\n  background-origin: padding-box;\r\n  justify-content: space-evenly;  \r\n\r\n  @media (max-width: 1400px) {\r\n    padding: 1rem;\r\n  }\r\n\r\n  @media (max-width: 280px) {\r\n    padding: 1rem;\r\n  }\r\n\r\n  @media (max-width: 280px) {\r\n    padding: 1rem;\r\n  }\r\n  h2 {\r\n    font-size: 3rem;\r\n    padding: 0rem 0rem 0rem 6rem;\r\n    color: var(--light);\r\n\r\n    @media (max-width: 1400px) {\r\n      padding: 7rem 0rem 0rem 6rem;\r\n    }\r\n\r\n    @media (max-width: 1100px) {\r\n      font-size: 2rem;\r\n      padding: 5rem 0rem 2rem 0rem;\r\n      letter-spacing: 0.1rem;\r\n    }\r\n  }\r\n\r\n  .get-in-touch {\r\n    // display: flex;\r\n    // justify-content: center;\r\n    // flex-direction: column;\r\n\r\n    @media (max-width: 1100px) {\r\n      padding: 0rem;\r\n    }\r\n\r\n    .get-in-touch-para {\r\n      color: var(--light);\r\n      font-size: 14pt;\r\n      text-align: center;\r\n      padding: 1rem;\r\n      \r\n\r\n\r\n      @media (max-width: 1400px) {\r\n        font-size: 11pt;\r\n      }\r\n\r\n      @media (max-width: 768px) {\r\n        font-size: 11pt\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        font-size: 11pt;\r\n      }\r\n\r\n      @media (max-width: 280px) {\r\n        font-size: 11pt;\r\n      }\r\n    }\r\n\r\n    .get-in-touch-field {\r\n      display: flex;\r\n      justify-content: space-evenly;\r\n      padding: 2rem 0 1rem 0rem;\r\n\r\n      @media (max-width: 1400px) {\r\n        padding: 1rem 0rem 1rem 0rem;\r\n      }\r\n\r\n      @media (max-width: 1100px) {\r\n        padding: 1rem 0rem 0rem 0rem;\r\n        flex-direction: column-reverse;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","<template>\r\n  <form @submit.prevent=\"sendEmail\">\r\n    <div class=\"form-control\">\r\n      <input type=\"text\" name=\"name\" id=\"firstname\" :class=\"{ invalid: !firstname.isValid }\" class=\"input-field\"\r\n        placeholder=\"Name\" v-model=\"firstname.val\" @blur=\"clearValidity('firstname')\" />\r\n      <label for=\"firstname\" class=\"label-field\">Name</label>\r\n      <p v-if=\"!firstname.isValid\">Tell me your name</p>\r\n    </div>\r\n    <div class=\"form-control\">\r\n      <input type=\"email\" name=\"email\" id=\"email\" :class=\"{ invalid: !email.isValid }\" class=\"input-field\"\r\n        placeholder=\"Email\" v-model=\"email.val\" @blur=\"clearValidity('email')\" />\r\n      <label for=\"email\" class=\"label-field\">Email</label>\r\n      <p v-if=\"!email.isValid\">Enter your email address</p>\r\n    </div>\r\n    <div class=\"form-control\">\r\n      <textarea name=\"message\" id=\"message\" row=\"100\" :class=\"{ invalid: !message.isValid }\" class=\"input-field\"\r\n        v-model=\"message.val\" placeholder=\"Message\" @blur=\"clearValidity('message')\">Write me</textarea>\r\n      <label for=\"message\" class=\"label-field\">Message</label>\r\n      <p v-if=\"!message.isValid\">Be free to send me message</p>\r\n    </div>\r\n    <base-button mode=\"outline-contactForm\" class=\"success-button\" v-if=\"!isSent\">Send</base-button>\r\n    <p class=\"success-msg\" v-if=\"isSent\">Message sent!</p>\r\n  </form>\r\n</template>\r\n\r\n<script>\r\nimport emailjs from 'emailjs-com';\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      firstname: {\r\n        val: '',\r\n        isValid: true\r\n      },\r\n      email: {\r\n        val: '',\r\n        isValid: true\r\n      },\r\n      message: {\r\n        val: '',\r\n        isValid: true\r\n      },\r\n      formIsValid: true,\r\n      isSent: false\r\n    }\r\n  },\r\n  methods: {\r\n    sendEmail(e) {\r\n      try {\r\n        console.log(this.e);\r\n        this.validateForm();\r\n        if (!this.formIsValid) {\r\n          return;\r\n        }\r\n        emailjs.sendForm('service_5rv5kmq', 'template_9o4s21z', e.target,\r\n          'uS7n73_dDAUPrmbPs', {\r\n          name: this.firstname.val,\r\n          email: this.email.val,\r\n          message: this.message.val\r\n        })\r\n        this.isSent = true\r\n      } catch (error) {\r\n        console.log({ error })\r\n      }\r\n      // Reset form field\r\n      this.firstname.val = ''\r\n      this.email.val = ''\r\n      this.message.val = ''\r\n    },\r\n    clearValidity(input) {\r\n      this[input].isValid = true\r\n    },\r\n    validateForm() {\r\n      this.formIsValid = true;\r\n      if (this.firstname.val == '') {\r\n        this.firstname.isValid = false;\r\n        this.formIsValid = false\r\n        this.clearValidity()\r\n      }\r\n      if (this.email.val == '') {\r\n        this.email.isValid = false;\r\n        this.formIsValid = false\r\n      }\r\n      if (this.message.val == '') {\r\n        this.message.isValid = false;\r\n        this.formIsValid = false\r\n      }\r\n    },\r\n  }\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\nform {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 50%;\r\n  text-align: center;\r\n  padding: 0rem;\r\n  align-items: center;\r\n\r\n  @media (max-width: 1100px) {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n.form-control {\r\n  position: relative;\r\n  padding: 15px 0 0;\r\n  margin-top: 1.5rem;\r\n  width: 80%;\r\n\r\n  @media (max-width: 1400px) {\r\n    padding: .7rem 0 0\r\n  }\r\n\r\n  @media (max-width: 1100px) {\r\n    width: 90%;\r\n    margin-top: 1rem;\r\n  }\r\n}\r\n\r\n.form-control .invalid {\r\n  border-color: var(--nameColor);\r\n}\r\n\r\n.form-control p {\r\n  color: var(--nameColor);\r\n  font-size: small;\r\n  padding: .5rem 0 0 0;\r\n}\r\n\r\n.input-field {\r\n  font-family: inherit;\r\n  width: 100%;\r\n  border: 0;\r\n  border-bottom: 2px solid gray;\r\n  outline: 0;\r\n  font-size: 11pt;\r\n  color: white;\r\n  padding: 7px 0;\r\n  background-color: transparent;\r\n\r\n\r\n  &::placeholder {\r\n    color: transparent;\r\n  }\r\n\r\n  &:placeholder-shown~.label-field {\r\n    font-size: 1.3rem;\r\n    cursor: text;\r\n    top: 20px;\r\n\r\n    @media (max-width: 1400px) {\r\n      font-size: 1rem;\r\n    }\r\n  }\r\n}\r\n\r\n.label-field {\r\n  position: absolute;\r\n  top: 0;\r\n  display: block;\r\n  transition: 0.2s;\r\n  font-size: 1rem;\r\n  color: gray;\r\n}\r\ninput:-webkit-autofill {\r\n  transition: background-color 5000s ease-in-out 0s;\r\n  -webkit-text-fill-color: var(--light);\r\n}\r\ninput:autofill {\r\n  transition: background-color 5000s ease-in-out 0s;\r\n  -webkit-text-fill-color: var(--light);\r\n}\r\n\r\n\r\n.input-field:focus {\r\n  ~.label-field {\r\n    position: absolute;\r\n    top: 0;\r\n    display: block;\r\n    transition: 0.2s;\r\n    font-size: 1rem;\r\n    color: #e0a13498;\r\n    font-weight: 500;\r\n  }\r\n\r\n  padding-bottom: 6px;\r\n  font-weight: 700;\r\n  border-width: 3px;\r\n  border-image: linear-gradient(to right, #e0a13498, rgb(2, 73, 60));\r\n  border-image-slice: 1;\r\n}\r\n\r\n/* reset input */\r\n.input-field {\r\n  &:required,\r\n  &:invalid {\r\n    box-shadow: none;\r\n  }\r\n}\r\n\r\n.success-button {\r\n  margin-top: 2rem;\r\n\r\n  @media (max-width: 1100px) {\r\n    margin: 2rem;\r\n  }\r\n}\r\n\r\n.success-msg {\r\n  color: rgb(17, 142, 153);\r\n  ;\r\n  font-weight: 600;\r\n  margin-top: 2rem;\r\n\r\n  @media (max-width: 1100px) {\r\n    margin: 2rem;\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./ContactForm.vue?vue&type=template&id=736c979a&scoped=true\"\nimport script from \"./ContactForm.vue?vue&type=script&lang=js\"\nexport * from \"./ContactForm.vue?vue&type=script&lang=js\"\n\nimport \"./ContactForm.vue?vue&type=style&index=0&id=736c979a&scoped=true&lang=scss\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-736c979a\"]])\n\nexport default __exports__","<template>\r\n  <div class=\"contact-me\">\r\n    <h2>{{ contactHeader }}</h2>\r\n    <div class=\"contact-info\">\r\n      <div class=\"contact-me-list\">\r\n        <i class=\"fa-solid fa-envelope\"></i>\r\n        <p>{{ email }}</p>\r\n      </div>\r\n      <div class=\"contact-me-list\">\r\n        <i class=\"fa-solid fa-mobile-screen\"></i>\r\n        <p>{{ phone }}</p>\r\n      </div>\r\n      <div class=\"contact-me-list\">\r\n        <i class=\"fa-solid fa-map-location-dot\"></i>\r\n        <p>{{ address }}</p>\r\n      </div>\r\n      <div class=\"contact-me-list\">\r\n        <i class=\"fa-brands fa-slack\"></i>\r\n        <p>{{ slack }}</p>\r\n      </div>\r\n    </div>\r\n    <div class=\"social-icons\">\r\n      <a href=\"https://www.facebook.com/mikic.tr\" target=\"_blank\">\r\n        <i class=\"fa-brands fa-square-facebook\"></i>\r\n      </a>\r\n      <a href=\"https://www.instagram.com/mikic_b\" target=\"_blank\">\r\n        <i class=\"fa-brands fa-square-instagram\"></i>\r\n      </a>\r\n      <a href=\"https://www.linkedin.com/in/benjamin-mikic-1543531b9/\" target=\"_blank\">\r\n        <i class=\"fa-brands fa-linkedin\"></i>\r\n      </a>\r\n      <a href=\"https://gitlab.com/MikicB\" target=\"_blank\">\r\n        <i class=\"fa-brands fa-square-gitlab\"></i>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data() {\r\n    return {\r\n      contactHeader: \"Contact\",\r\n      email: \"mikicb92@outlook.com\",\r\n      phone: \"+38761997311\",\r\n      address: \"Barakovac bb, 88000 Mostar\",\r\n      slack: \"MikicB\"\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.contact-me {\r\n  // background: rgb(5, 8, 8);\r\n  color: var(--light);\r\n  position: relative;\r\n  z-index: 99;\r\n  display: flex;\r\n  flex-direction: column;\r\n  // width: 25%;\r\n  // padding: 3rem;\r\n  font-weight: 400;\r\n\r\n  @media (max-width: 1400px) {\r\n    padding: 1rem;\r\n  }\r\n\r\n  @media (max-width: 1100px) {\r\n    width: 100%;\r\n    padding: 2rem 1rem 0rem 1rem;\r\n  }\r\n\r\n  p {\r\n    color: var(--light);\r\n    padding: 0;\r\n    letter-spacing: 0;\r\n  }\r\n\r\n  .contact-info {\r\n    padding: 1rem;\r\n    width: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n\r\n    @media (max-width: 280px) {\r\n      padding: 0;\r\n      font-size: 10pt;\r\n    }\r\n\r\n    .contact-me-list {\r\n      display: flex;\r\n      width: 100%;\r\n      padding-top: 2rem;\r\n      align-items: center;\r\n\r\n      @media (max-width: 1400px) {\r\n        padding-top: 1rem;\r\n      }\r\n\r\n      i {\r\n        font-size: x-large;\r\n        color: var(--light);\r\n      }\r\n\r\n      p {\r\n        padding-left: 1rem;\r\n        color: var(--light);\r\n      }\r\n    }\r\n  }\r\n\r\n  .social-icons {\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: space-evenly;\r\n    padding: 3rem 0 0 0;\r\n\r\n    @media (max-width: 1400px) {\r\n    padding: 1.5rem;\r\n  }\r\n\r\n    @media (max-width: 1100px) {\r\n      padding: 1rem 0 0 0;\r\n    }\r\n\r\n    p {\r\n      font-size: medium;\r\n    }\r\n\r\n    a {\r\n      color: grey;\r\n\r\n      i {\r\n        transition: transform 0.5s ease-out;\r\n        font-size: 3rem;\r\n\r\n        @media (max-width: 280px) {\r\n          font-size: 1.5rem;\r\n          margin: .5rem 0 0 0;\r\n        }\r\n\r\n        &:hover {\r\n          transform: scale(.9);\r\n          transition: transform 0.5s ease-in-out;\r\n          color: #e0a13474;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./ContactMe.vue?vue&type=template&id=08f2ab85&scoped=true\"\nimport script from \"./ContactMe.vue?vue&type=script&lang=js\"\nexport * from \"./ContactMe.vue?vue&type=script&lang=js\"\n\nimport \"./ContactMe.vue?vue&type=style&index=0&id=08f2ab85&scoped=true&lang=scss\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-08f2ab85\"]])\n\nexport default __exports__","import { render } from \"./ContactSection.vue?vue&type=template&id=0678dd97&scoped=true\"\nimport script from \"./ContactSection.vue?vue&type=script&lang=js\"\nexport * from \"./ContactSection.vue?vue&type=script&lang=js\"\n\nimport \"./ContactSection.vue?vue&type=style&index=0&id=0678dd97&lang=scss&scoped=true\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-0678dd97\"]])\n\nexport default __exports__","import { render } from \"./MainContent.vue?vue&type=template&id=69ba78d6\"\nimport script from \"./MainContent.vue?vue&type=script&lang=js\"\nexport * from \"./MainContent.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","<template>\r\n  <footer> <small>&copy; Copyright {{ currentYear }}, Mikic Benjamin </small> </footer>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data() {\r\n    return {\r\n      currentYear: new Date().getFullYear(),\r\n    };\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\nfooter {\r\n  width: 100%;\r\n  height: auto;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: .5rem;\r\n  background-color: rgba(0, 0, 0, .9);\r\n\r\n  small {\r\n    color: rgba(255, 255, 255, 0.737);\r\n    letter-spacing: .5px;\r\n  }\r\n}\r\n</style>","import { render } from \"./TheFooter.vue?vue&type=template&id=e6342922&scoped=true\"\nimport script from \"./TheFooter.vue?vue&type=script&lang=js\"\nexport * from \"./TheFooter.vue?vue&type=script&lang=js\"\n\nimport \"./TheFooter.vue?vue&type=style&index=0&id=e6342922&lang=scss&scoped=true\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-e6342922\"]])\n\nexport default __exports__","<template>\r\n  <button type=\"submit\">\r\n    <a :href=\"href\" :class=\"mode\" v-motion :initial=\"{\r\n      'box-shadow': '0 0 0px var(--nameColor)'\r\n    }\" :enter=\"{\r\n  'box-shadow': '0 0 15px var(--nameColor)',\r\n  transition: {\r\n    duration: 1000,\r\n    repeat: Infinity,\r\n    repeatType: 'reverse',\r\n  }\r\n}\">\r\n      <slot></slot>\r\n    </a>\r\n  </button>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  props: [\"mode\", \"href\"],\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\nbutton {\r\n  border: none;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-size: 16pt;\r\n  max-width: 9rem;\r\n  max-width: 3rem;\r\n  text-decoration: none;\r\n  background-color: #3a0061;\r\n  cursor: pointer;\r\n  color: white;\r\n  background-size: 200%;\r\n  transition: 0.5s ease-out;\r\n  z-index: 9;\r\n\r\n  a {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 16pt;\r\n    max-width: 9rem;\r\n    max-width: 3rem;\r\n    text-decoration: none;\r\n    background-color: #3a0061;\r\n    border: 2px solid #3a0061;\r\n    cursor: pointer;\r\n    color: white;\r\n    background-size: 200%;\r\n    transition: 0.2s ease-in-out;\r\n\r\n    @media (max-width: 480px) {\r\n      font-size: 14pt;\r\n      width: 8rem;\r\n      height: 3rem;\r\n    }\r\n  }\r\n  &:hover {\r\n        opacity: 0.4;\r\n      }\r\n}\r\n\r\n\r\na:hover,\r\na:active {\r\n  background-position: left;\r\n}\r\n\r\n.flat {\r\n  margin-top: 2rem;\r\n  background-color: transparent;\r\n  color: #c9b9d3;\r\n  border: none;\r\n  border-bottom: 2px solid black;\r\n  border-left: 2px solid black;\r\n  border-radius: 10px;\r\n}\r\n\r\n.outline {\r\n  background-color: var(--nameColor);\r\n  color: var(--light);\r\n  border: none;\r\n  min-width: 9rem;\r\n  min-height: 3rem;\r\n}\r\n\r\n.outline-contactForm {\r\n  background-color: var(--nameColor);\r\n  color: var(--light);\r\n  border: none;\r\n  min-width: 7rem;\r\n  min-height: 3rem;\r\n}\r\n\r\n.flat:hover,\r\n.flat:active {\r\n  background-color: var(--nameColor);\r\n  color: var(--light);\r\n  font-weight: 400;\r\n}\r\n</style>\r\n","import { render } from \"./BaseButton.vue?vue&type=template&id=fea1f67c&scoped=true\"\nimport script from \"./BaseButton.vue?vue&type=script&lang=js\"\nexport * from \"./BaseButton.vue?vue&type=script&lang=js\"\n\nimport \"./BaseButton.vue?vue&type=style&index=0&id=fea1f67c&lang=scss&scoped=true\"\n\nimport exportComponent from \"/var/www/benjamin-mikic.com/source/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-fea1f67c\"]])\n\nexport default __exports__","import { createApp } from \"vue\";\nimport { MotionPlugin } from \"@vueuse/motion\";\nimport App from \"./App.vue\";\nimport TheNavigation from \"./components/layout/TheNavigation.vue\";\nimport MainContent from \"./components/layout/MainContent.vue\";\nimport TheFooter from './components/layout/inner-layouts/TheFooter.vue'\nimport BaseButton from \"./components/ui/BaseButton.vue\";\n\nconst app = createApp(App);\napp.component(\"the-navigation\", TheNavigation);\napp.component(\"main-content\", MainContent);\napp.component(\"base-button\", BaseButton);\napp.component(\"the-footer\", TheFooter);\n\napp.use(MotionPlugin);\n\napp.mount(\"#app\");","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = function(result, chunkIds, fn, priority) {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"/\";","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t143: 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkmy_portfolio_singlepage\"] = self[\"webpackChunkmy_portfolio_singlepage\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [998], function() { return __webpack_require__(9731); })\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n"],"names":["_createVNode","_component_the_navigation","_component_main_content","_component_the_footer","script","__exports__","render","_createElementVNode","class","src","_imports_0","alt","_hoisted_3","type","title","_hoisted_8","href","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_createElementBlock","$data","_hoisted_1","_hoisted_7","id","onClick","$options","_Transition","name","data","scrollNav","mobile","mobileNav","windowWidth","created","window","addEventListener","this","checkscreen","mounted","updateScroll","methods","closeNav","toggleMobileNav","innerWidth","scrollPosition","scrollY","_component_land_section","_component_about_section","_component_portfolio_section","_component_contact_section","initial","enter","delay","opacity","_hoisted_4","_hoisted_6","_component_base_button","mode","_component_about_me","_component_about_me_content","_component_my_skills","_component_my_other_skills","_hoisted_2","_toDisplayString","_component_circle_progress","transition","percent","viewport","gradient","skillFirstPara","skillSecPara","components","CircleProgress","_component_progress_bar","percentage","label","color","ref","$props","_createBlock","appear","onBeforeAppear","onAfterAppear","_hoisted_5","count","isScrolled","props","Number","String","onElemenetScroll","beforeEnter","el","style","width","background","interval","setInterval","clearInterval","box","$refs","scrollAnimate","isInViewport","rect","getBoundingClientRect","top","left","bottom","innerHeight","document","documentElement","clientHeight","right","clientWidth","ProgressBar","AboutMeContent","MySkills","MyOtherSkills","AboutMe","_component_portfolio_cards","target","_Fragment","_renderList","project","key","usedSkills","image","_hoisted_9","projects","image1","image2","image3","PortfolioCards","_component_contact_me","_component_contact_form","for","onSubmit","invalid","isValid","placeholder","val","$event","onBlur","row","firstname","email","message","formIsValid","isSent","sendEmail","e","console","log","validateForm","emailjs","error","clearValidity","input","contactHeader","phone","address","slack","getInTouchPara","ContactForm","ContactMe","LandSection","AboutSection","PortfolioSection","ContactSection","currentYear","Date","getFullYear","Infinity","_renderSlot","_ctx","undefined","app","createApp","App","component","TheNavigation","MainContent","BaseButton","TheFooter","use","MotionPlugin","mount","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","exports","module","__webpack_modules__","call","m","deferred","O","result","chunkIds","fn","priority","notFulfilled","i","length","fulfilled","j","Object","keys","every","splice","r","n","getter","__esModule","d","a","definition","o","defineProperty","enumerable","get","g","globalThis","Function","obj","prop","prototype","hasOwnProperty","Symbol","toStringTag","value","p","installedChunks","chunkId","webpackJsonpCallback","parentChunkLoadingFunction","moreModules","runtime","some","chunkLoadingGlobal","self","forEach","bind","push","__webpack_exports__"],"sourceRoot":""}