{"version":3,"file":"index.a560b72c.js","sources":["../../../../components/navbar.vue","../../../../components/artworks-index.vue","../../../../components/artworks-gallery.vue","../../../../components/about.vue","../../../../components/landing.vue","../../../../pages/index.vue"],"sourcesContent":["<template>\n  <nav class=\"flex flex-row items-center justify-between w-full min-h-12.5 px-default gap-x-2 z-20\">\n    <!-- Logo -->\n    <logo @click.native=\"setView('artworks')\" />\n\n    <!-- Menu -->\n    <ul class=\"w-1/2 flex flex-row px-default-half gap-x-0.5\">\n      <li @click=\"setView('artworks')\" :class=\"{ active: store.view === 'artworks' }\">Artworks</li>\n      <li>/</li>\n      <li @click=\"setView('index')\" :class=\"{ active: store.view === 'index' }\">Index</li>\n      <li>/</li>\n      <li @click=\"setView('about')\" :class=\"{ active: store.view === 'about' }\">About</li>\n    </ul>\n  </nav>\n</template>\n\n<script setup>\nimport { useStore } from '~/store/index';\nconst store = useStore();\n\nconst setView = (view) => {\n  store.setView(view);\n};\n</script>\n\n<style scoped lang=\"scss\">\nul {\n  @apply text-neutral-400;\n  & > li {\n    &:nth-child(odd) {\n      @apply cursor-pointer md:hover:text-rose-600;\n    }\n    &:nth-child(even) {\n      @apply font-normal;\n    }\n    &.active {\n      @apply text-black;\n    }\n  }\n}\n</style>\n","<template>\n  <div\n    :class=\"\n      $cl('relative h-0 transition-height ease-smooth duration-smooth overflow-hidden px-default', {\n        'h-4/6 md:h-1/2': store.view === 'index'\n      })\n    \"\n    @transitionend=\"onTransitionend\"\n  >\n    <ul class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-default gap-y-default-double md:gap-y-default-triple pb-10 overflow-auto max-h-full\">\n      <li class=\"cursor-pointer\" v-for=\"(artwork, i) in store.artworks\" :key=\"i\">\n        <artwork-info type=\"index\" :artwork=\"artwork\" :id=\"i\" @click.native=\"store.setSelected(artwork)\" />\n      </li>\n    </ul>\n    <div class=\"absolute left-0 bottom-0 w-full h-15 bg-gradient-to-t from-white to-transparent\" />\n  </div>\n</template>\n\n<script setup>\nimport { useStore } from '~/store/index';\n\nconst store = useStore();\n\nconst onTransitionend = () => {\n  store.setIndexStatus(!store.indexIsOpen);\n};\n</script>\n","<template>\n  <div class=\"flex-1 z-10 overflow-scroll -mb-4\">\n    <div class=\"grid grid-cols-1 md:grid-cols-4 gap-default px-default\">\n      <div\n        class=\"relative md:aspect-square md:bg-[rgb(245,245,245)] md:flex md:items-center md:justify-center cursor-pointer last:mb-default\"\n        v-for=\"(artwork, i) in store.artworks\"\n        :key=\"i\"\n        @click=\"setArtwork(artwork)\"\n      >\n        <img\n          :class=\"\n            $cl('w-full md:shadow-artwork', {\n              'md:w-4/5 ': artwork.direction === 'square',\n              'md:w-8/12 ': artwork.direction === 'vertical',\n              'md:w-11/12 ': artwork.direction === 'horizontal',\n              'w-4/12 mx-auto md:mx-0 md:w-1/4': artwork.direction === 'small'\n            })\n          \"\n          :src=\"getArtworkCover(artwork).src\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { useStore } from '~/store/index';\n\nconst store = useStore();\n\nconst getArtworkCover = (artwork) => artwork.images.find((i) => i.type === 'cover');\n\nconst setArtwork = (artwork) => {\n  if (store.view === 'about') {\n    store.setView('artworks');\n  } else {\n    store.setSelected(artwork);\n  }\n};\n</script>\n","<template>\n  <div\n    :class=\"\n      $cl(\n        'fixed top-0 left-full w-full md:w-1/2 h-full transition-transform ease-smooth duration-smooth overflow-hidden flex flex-col px-default md:pl-0',\n        {\n          '-translate-x-full': store.view === 'about'\n        }\n      )\n    \"\n  >\n    <!-- Navbar -->\n    <div class=\"w-full min-h-12.5 h-12.5 flex items-center justify-end\">\n      <p class=\"cursor-pointer\" @click=\"store.setView('artworks')\">Close</p>\n    </div>\n    <!-- About -->\n    <div class=\"flex flex-col overflow-auto pb-default w-full h-full\">\n      <!-- <img\n        class=\"w-full aspect-video mb-default object-cover\"\n        src=\"https://images.thewest.com.au/publication/C-7290670/c6557fad9b034168344ed4f9420467b2dac08866-16x9-x0y0w1280h720.jpg\"\n      /> -->\n\n      <!-- Bio -->\n      <div class=\"grid grid-cols-1 gap-y-6\">\n        <div class=\"flex flex-col bio gap-y-default-quadruple md:gap-y-0\">\n          <p v-html=\"information.about.it.bio\" />\n          <p class=\"text-neutral-500\" v-html=\"information.about.en.bio\" />\n        </div>\n\n        <!-- About Me -->\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-x-default-double gap-y-default-triple bio\">\n          <div>\n            <p class=\"text-xs\">Il processo</p>\n            <p class=\"paragraph\" v-html=\"information.about.it.more\" />\n          </div>\n          <div class=\"text-neutral-500\">\n            <p class=\"text-xs\">The process</p>\n            <p class=\"paragraph\" v-html=\"information.about.en.more\" />\n          </div>\n        </div>\n\n        <!-- Social -->\n        <div>\n          <p class=\"text-xs\">Further information</p>\n          <p class=\"paragraph\">\n            To learn more about my work, please contact me via\n            <span class=\"inline-block hover:text-rose-600\">\n              <a class=\"\" href=\"mailto:kydotu@bluewin.ch\" target=\"_parent\" rel=\"noopener noreferrer\">Email</a>\n            </span>\n            or visit my\n            <span class=\"inline-block hover:text-rose-600\">\n              <a class=\"\" href=\"https://www.instagram.com/materica_mente/\" target=\"_parent\" rel=\"noopener noreferrer\">Instagram</a>\n            </span>\n            profile. I would be delighted to provide further information and discuss potential collaborations.\n          </p>\n        </div>\n\n        <p class=\"text-xs teneutext-neutral-500 mt-5\">\n          Design and Code:\n          <a class=\"text-xs\" href=\"https://www.kerem.ch\" target=\"_blank\" rel=\"noopener noreferrer\"> Kerem Türkyilmaz </a>\n        </p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { useStore } from '~/store/index';\nconst store = useStore();\nconst information = ref(store.information);\n</script>\n\n<style scoped lang=\"scss\">\n.bio {\n  &:first-child {\n    p {\n      @apply text-xl leading-[105%] md:leading-[118%];\n    }\n  }\n  p {\n    letter-spacing: -0.05px;\n    word-spacing: -1.4px;\n  }\n}\n\n.paragraph {\n  @apply text-base leading-[110%] md:leading-[120%];\n  a {\n    @apply text-red-600;\n  }\n}\n</style>\n","<template>\n  <section\n    v-if=\"store.showLanding\"\n    @click=\"closeLanding\"\n    class=\"fixed top-0 left-0 bg-white flex flex-col items-center justify-between cursor-pointer z-20\"\n  >\n    <div class=\"flex flex-1 w-full items-center justify-center\">\n      <div class=\"w-[90%] md:w-[30%] xl:w-[35%] overflow-hidden transition-all ease-smooth duration-smooth\">\n        <img class=\"object-contain aspect-square animate-fadeIn duration-1000\" :src=\"cover.src\" />\n      </div>\n    </div>\n    <div class=\"flex flex-row gap-x-1 min-h-12.5 h-12.5 items-center justify-center animate-translateIn\">\n      <logo />\n      <p class=\"tracking-tight\">by Daniela Türkyilmaz</p>\n    </div>\n  </section>\n</template>\n\n<script setup>\nimport { useStore } from '~/store/index';\n\nconst store = useStore();\n\nconst cover = computed(() => {\n  const artworks = store.artworks;\n  const index = Math.floor(Math.random() * artworks.length);\n  const artwork = artworks[index];\n  return artwork.images.find((i) => i.type === 'cover');\n});\n\nconst closeLanding = () => store.setLandingStatus(false);\n</script>\n","<template>\n  <main class=\"flex flex-row\">\n    <!-- Root -->\n    <div\n      :class=\"\n        $cl('w-full flex flex-col justify-between transition-all ease-smooth duration-smooth z-10 bg-white', {\n          '-translate-x-full md:translate-x-0 md:w-1/2 ': store.view === 'about'\n        })\n      \"\n    >\n      <!-- Main -->\n      <section class=\"flex flex-col\">\n        <!-- Navbar -->\n        <navbar />\n        <artworksIndex />\n        <artworksGallery />\n      </section>\n    </div>\n\n    <!-- About -->\n    <about />\n    <!-- Landing -->\n    <landing />\n  </main>\n</template>\n\n<script setup>\nimport { storeToRefs } from 'pinia';\nimport { useStore } from '~/store/index';\n\nconst store = useStore();\nconst router = useRouter();\n\nconst { canNavigate } = storeToRefs(store);\n\nwatch(canNavigate, () => {\n  if (canNavigate.value) {\n    router.push(`/${store.selected.id}-${store.selected.title}`);\n    store.setSelected(null);\n  }\n});\n</script>\n"],"names":["store","useStore","setView","view","onTransitionend","getArtworkCover","artwork","setArtwork","information","ref","cover","computed","artworks","index","i","closeLanding","router","useRouter","canNavigate","storeToRefs","watch"],"mappings":"sqBAkBA,MAAAA,EAAAC,EAAA,EAEAC,EAAAC,GAAA,CACAH,EAAA,QAAAG,CAAA,CACA,iuBCDA,MAAAH,EAAAC,EAAA,EAEAG,EAAA,IAAA,CACAJ,EAAA,eAAA,CAAAA,EAAA,WAAA,CACA,ulBCGA,MAAMA,EAAQC,EAAQ,EAEhBI,EAAmBC,GAAYA,EAAQ,OAAO,KAAM,GAAM,EAAE,OAAS,OAAO,EAE5EC,EAAcD,GAAY,CAC1BN,EAAM,OAAS,QACjBA,EAAM,QAAQ,UAAU,EAExBA,EAAM,YAAYM,CAAO,CAE7B,q+DC8BA,MAAAN,EAAAC,EAAA,EACAO,EAAAC,EAAAT,EAAA,WAAA,wkCChDA,MAAAA,EAAAC,EAAA,EAEAS,EAAAC,EAAA,IAAA,CACA,MAAAC,EAAAZ,EAAA,SACAa,EAAA,KAAA,MAAA,KAAA,SAAAD,EAAA,MAAA,EAEA,OADAA,EAAAC,CAAA,EACA,OAAA,KAAAC,GAAAA,EAAA,OAAA,OAAA,CACA,CAAA,EAEAC,EAAA,IAAAf,EAAA,iBAAA,EAAA,gbCAA,MAAAA,EAAAC,EAAA,EACAe,EAAAC,EAAA,EAEA,CAAA,YAAAC,CAAA,EAAAC,EAAAnB,CAAA,EAEA,OAAAoB,EAAAF,EAAA,IAAA,CACAA,EAAA,QACAF,EAAA,KAAA,IAAAhB,EAAA,SAAA,MAAAA,EAAA,SAAA,OAAA,EACAA,EAAA,YAAA,IAAA,EAEA,CAAA"}