{"version":3,"file":"SectionCaseStudies-C_3iPHJR.js","sources":["../../src/components/CaseStudyModal.vue","../../src/components/SectionCaseStudies.vue"],"sourcesContent":["<template>\n  <v-dialog\n    v-bind=\"dialogProps\"\n    transition=\"dialog-bottom-transition\"\n    max-width=\"800px\"\n  >\n    <v-card class=\"dialog-content-body\">\n      <v-toolbar flat color=\"transparent\">\n\n<!--        <v-toolbar-title class=\"font-weight-bold\">Case Study</v-toolbar-title>-->\n        <v-spacer></v-spacer>\n        <v-btn icon @click=\"emitClose\">\n          <v-icon>mdi-close</v-icon>\n        </v-btn>\n      </v-toolbar>\n      <v-card-text>\n        <div v-html=\"content\" class=\"case-study-content\"></div>\n      </v-card-text>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, computed } from 'vue';\nimport { marked } from 'marked';\n\ninterface Props {\n  caseStudyID: string | null;\n  modelValue: boolean;\n}\n\nconst props = defineProps<Props>();\nconst emit = defineEmits(['update:modelValue']);\n\nconst content = ref('');\n\n// Computed property for dialog props\nconst dialogProps = computed(() => ({\n  modelValue: props.modelValue,\n  'onUpdate:modelValue': (value: boolean) => {\n    emit('update:modelValue', value);\n  },\n}));\n\nwatch(\n  () => props.caseStudyID,\n  async (newID) => {\n    if (newID) {\n      const markdown = await fetchMarkdown(newID);\n      content.value = marked(markdown);  // Convert markdown to HTML\n    }\n  },\n  { immediate: true }\n);\n\nconst emitClose = () => {\n  emit('update:modelValue', false); // Close the modal when the close button is clicked\n};\n\nconst fetchMarkdown = async (id: string) => {\n  try {\n    const response = await fetch(`/case-studies/${id}.md`);  // Path should be relative to the public folder\n    if (!response.ok) throw new Error('Error loading case study');\n    const markdownText = await response.text();\n    //console.log('Markdown loaded:', markdownText); // Debugging output\n    return markdownText;\n  } catch (error) {\n    console.error(error);\n    return 'Unable to load the case study.';\n  }\n};\n\n</script>\n\n<style lang=\"scss\" scoped>\n.case-study-content {\n  white-space: normal;\n  word-wrap: break-word;\n  font-size: 1.25rem;\n\n  ::v-deep {\n    h1 {\n      margin: 0 0 2rem;\n    }\n    h3 {\n      margin: 2rem 0 1rem;\n    }\n    p {\n      margin: 0 0 1rem;\n    }\n    ul {\n      margin-left: 2rem;\n    }\n  }\n}\n</style>\n","<template>\n  <section class=\"spaced\">\n    <v-container max-width=\"1200px\" fluid class=\"container\">\n      <h2 class=\"heading\">Case Studies</h2>\n      <h3 class=\"intro\">\n        Over the past 20+ years, I’ve specialized in developing SaaS applications and paid software for diverse industries.\n        While I can’t share specific client projects due to confidentiality, I’m happy to discuss my process and contributions in detail.\n      </h3>\n\n      <ul class=\"case-study-links\">\n        <li\n          v-for=\"(caseStudy, index) in caseStudies\"\n          :key=\"index\"\n          :class=\"`case-item item-${index}`\"\n        >\n          <router-link\n            class=\"link\"\n            :to=\"{ name: 'case-study', params: { caseStudyID: caseStudy.id } }\"\n          >\n            <v-icon start>mdi-button-pointer</v-icon>\n            <strong>Case Study:</strong> {{ caseStudy.title }}\n          </router-link>\n        </li>\n      </ul>\n\n      <CaseStudyModal\n        v-model=\"isModalOpen\"\n        :caseStudyID=\"currentCaseStudyID\"\n      />\n    </v-container>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport CaseStudyModal from '../components/CaseStudyModal.vue';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst currentCaseStudyID = ref<string | null>(null);\nconst isModalOpen = ref(false);\nconst caseStudies = ref([\n  {\n    id: 'case-study-competitions',\n    title: 'Driving Engagement Through Interactive Classroom Competitions',\n  },\n  {\n    id: 'case-study-liberty',\n    title: 'Transforming a Legacy Insurance Quoting System with Modern Technologies',\n  },\n  {\n    id: 'case-study-algaecal',\n    title: 'Modernizing a Large-Scale E-Commerce Site and Blog for AlgaeCal',\n  },\n]);\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Watch the route for caseStudyID\nwatch(\n  () => route.params.caseStudyID,\n  (caseStudyID) => {\n    if (caseStudyID) {\n      currentCaseStudyID.value = caseStudyID as string;\n      isModalOpen.value = true;\n    } else {\n      currentCaseStudyID.value = null;\n      isModalOpen.value = false;\n    }\n  },\n  { immediate: true }\n);\n\n// Watch the modal's state and handle URL changes\nwatch(isModalOpen, (isOpen) => {\n  if (!isOpen) {\n    router.push({ name: 'home' }); // Reset URL when modal is closed\n  }\n});\n\n// GSAP animations\nonMounted(() => {\n  const items = document.querySelectorAll('.case-item');\n\n  items.forEach((item, index) => {\n    const direction = index % 2 === 0 ? '-100%' : '100%'; // Alternate directions\n    gsap.fromTo(\n      item,\n      { x: direction, opacity: 0 },\n      {\n        x: 0,\n        opacity: 1,\n        duration: 1,\n        ease: 'power3.out',\n        scrollTrigger: {\n          trigger: item,\n          start: 'top 80%',\n          toggleActions: 'play none none reverse',\n        },\n      }\n    );\n  });\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.intro {\n  padding: 1rem 0 2rem;\n}\n\n.case-study-links {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  li {\n    + li {\n      margin-top: 1.5rem;\n    }\n  }\n}\n\n.case-item {\n  opacity: 0; // Start invisible to allow animations\n  transform: translateX(0); // Smooth initial transition\n}\n\n.link {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  padding: 1.5rem;\n  font-size: 1.25rem;\n  font-weight: 400;\n  color: initial;\n  text-decoration: none;\n  letter-spacing: 0.25px;\n  background-color: transparent;\n  overflow: visible;\n  transition: all 0.3s ease;\n  z-index: 0;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    height: 100%;\n    background-color: rgba(var(--v-theme-secondary), 0.5);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.3s ease;\n    border-radius: 8px;\n  }\n\n  &:hover {\n    color: white;\n\n    &::after {\n      transform: translate(-50%, -50%);\n      opacity: 1;\n    }\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) translate(5px, 10px);\n    width: 100%;\n    height: 100%;\n    background-color: rgba(var(--v-theme-primary), 0.05);\n    z-index: -2;\n    transition: transform 0.4s ease-out, background-color 0.4s ease-out;\n    border-radius: 8px;\n  }\n\n  &:hover::before {\n    transform: translate(-50%, -50%) translate(0, 0);\n    background-color: rgba(var(--v-theme-secondary), 1);\n  }\n}\n\n@media (min-width: 600px) {\n  li {\n    + li {\n      margin-top: 1rem;\n    }\n  }\n\n  .link {\n    padding: 2rem;\n    font-size: 1.35rem;\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","content","ref","dialogProps","computed","value","watch","newID","markdown","fetchMarkdown","marked","emitClose","id","response","error","gsap","ScrollTrigger","currentCaseStudyID","isModalOpen","caseStudies","route","useRoute","router","useRouter","caseStudyID","isOpen","onMounted","item","index","direction"],"mappings":"osBA+BA,MAAMA,EAAQC,EACRC,EAAOC,EAEPC,EAAUC,EAAI,EAAE,EAGhBC,EAAcC,EAAS,KAAO,CAClC,WAAYP,EAAM,WAClB,sBAAwBQ,GAAmB,CACzCN,EAAK,oBAAqBM,CAAK,CAAA,CACjC,EACA,EAEFC,EACE,IAAMT,EAAM,YACZ,MAAOU,GAAU,CACf,GAAIA,EAAO,CACH,MAAAC,EAAW,MAAMC,EAAcF,CAAK,EAClCN,EAAA,MAAQS,EAAOF,CAAQ,CAAA,CAEnC,EACA,CAAE,UAAW,EAAK,CACpB,EAEA,MAAMG,EAAY,IAAM,CACtBZ,EAAK,oBAAqB,EAAK,CACjC,EAEMU,EAAgB,MAAOG,GAAe,CACtC,GAAA,CACF,MAAMC,EAAW,MAAM,MAAM,iBAAiBD,CAAE,KAAK,EACrD,GAAI,CAACC,EAAS,GAAU,MAAA,IAAI,MAAM,0BAA0B,EAGrD,OAFc,MAAMA,EAAS,KAAK,QAGlCC,EAAO,CACd,eAAQ,MAAMA,CAAK,EACZ,gCAAA,CAEX,msBC9BAC,EAAK,eAAeC,CAAa,EAE3B,MAAAC,EAAqBf,EAAmB,IAAI,EAC5CgB,EAAchB,EAAI,EAAK,EACvBiB,EAAcjB,EAAI,CACtB,CACE,GAAI,0BACJ,MAAO,+DACT,EACA,CACE,GAAI,qBACJ,MAAO,yEACT,EACA,CACE,GAAI,sBACJ,MAAO,iEAAA,CACT,CACD,EAEKkB,EAAQC,EAAS,EACjBC,EAASC,EAAU,EAGzB,OAAAjB,EACE,IAAMc,EAAM,OAAO,YAClBI,GAAgB,CACXA,GACFP,EAAmB,MAAQO,EAC3BN,EAAY,MAAQ,KAEpBD,EAAmB,MAAQ,KAC3BC,EAAY,MAAQ,GAExB,EACA,CAAE,UAAW,EAAK,CACpB,EAGMZ,EAAAY,EAAcO,GAAW,CACxBA,GACHH,EAAO,KAAK,CAAE,KAAM,MAAA,CAAQ,CAC9B,CACD,EAGDI,EAAU,IAAM,CACA,SAAS,iBAAiB,YAAY,EAE9C,QAAQ,CAACC,EAAMC,IAAU,CAC7B,MAAMC,EAAYD,EAAQ,IAAM,EAAI,QAAU,OACzCb,EAAA,OACHY,EACA,CAAE,EAAGE,EAAW,QAAS,CAAE,EAC3B,CACE,EAAG,EACH,QAAS,EACT,SAAU,EACV,KAAM,aACN,cAAe,CACb,QAASF,EACT,MAAO,UACP,cAAe,wBAAA,CACjB,CAEJ,CAAA,CACD,CAAA,CACF"}