{"version":3,"sources":["webpack:///./src/views/Portfolio.vue?d6e9","webpack:///src/views/Portfolio.vue","webpack:///./src/views/Portfolio.vue?3dfe","webpack:///./src/views/Portfolio.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_m","attrs","portfolioPanels","staticRenderFns","_v","name","components","PanelsList","data","title","description","image","icons","icon","text","content","links","url","component"],"mappings":"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","file":"js/portfolio.c4e97c22.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"experience\"},[_vm._m(0),_vm._m(1),_c('PanelsList',{attrs:{\"panels\":_vm.portfolioPanels,\"sm\":true,\"containImage\":true}})],1)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container-fluid\"},[_c('h1',[_vm._v(\"Portfolio\")]),_c('p',[_vm._v(\" I carry out web development projects on a freelance basis. Below you can find a showcase of a range of website projects! \")]),_c('p',[_vm._v(\" Are you also interested in a high-quality, easy-to-manage, and sustainability-focused website? \"),_c('a',{attrs:{\"href\":\"mailto:quan@vanderknokke.nl\"}},[_vm._v(\"Get in touch!\")])])])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container-fluid\"},[_c('h2',[_vm._v(\"Web development portfolio\")])])}]\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"experience\">\n    <div class=\"container-fluid\">\n      <h1>Portfolio</h1>\n      <p>\n        I carry out web development projects on a freelance basis. Below you can find a showcase of a range of website projects!\n      </p>\n      <p>\n        Are you also interested in a high-quality, easy-to-manage, and sustainability-focused website? <a href=\"mailto:quan@vanderknokke.nl\">Get in touch!</a>\n      </p>\n    </div>\n    <div class=\"container-fluid\">\n      <h2>Web development portfolio</h2>\n    </div>\n    <PanelsList :panels=\"portfolioPanels\" :sm=\"true\" :containImage=\"true\" />\n  </div>\n</template>\n\n<script>\nimport PanelsList from \"@/components/PanelsList\";\n\nexport default {\n  name: \"Portfolio\",\n  components: {\n    PanelsList\n  },\n  data() {\n    return {\n      portfolioPanels: [\n        {\n          title: \"GreenDatabase\",\n          description: {\n            image: \"icon/greentu.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Plain HTML, SCSS, TS, Sheets API\"\n              }\n            ]\n          },\n          content: {\n            text: \"As part of my board year at GreenTU Delft, I developed this web portal to visualise data on sustainable education, research, and groups at the university. All content, as well as formatting settings, are retrieved from a spreadsheet using the Google Sheets API and visualised as a filterable and sortable list of cards. Also supports a special field type depicting SDGs.\",\n            image: \"mockup/greendatabase.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Summer 2023\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Plain HTML, SCSS, TS, Google Sheets API\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit the GreenDatabase\",\n                url: \"https://tudelft.nl/greentu/greendatabase\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"StudioAdmin\",\n          description: {\n            image: \"icon/studioadmin.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 12, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"A web portal used to register and keep track of participants of the Canidream studio. Administrators can use Umbraco to view and edit profiles, and participants are automatically sent a customised QR code, linked to this profile, they can use to identify themselves on accessing the studio.\",\n            image: \"mockup/studioadmin.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Summer 2023\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 12, SCSS\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"Delft Ontdekt\",\n          description: {\n            image: \"icon/delftontdekt.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 11, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"A website that displays a calendar of events for the year commemorating the history of slavery in the city of Delft. Besides a public calendar and information pages, it has Google Forms integrations for event organisers to submit their events for approval and listing.\",\n            image: \"mockup/delftontdekt.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Spring 2023\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 11, SCSS\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit delftontdekt.nl\",\n                url: \"https://delftontdekt.nl/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"Love Me True\",\n          description: {\n            image: \"icon/lovemetrue.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 10, Tailwind\"\n              }\n            ]\n          },\n          content: {\n            text: \"A website for Love Me True, a relationship therapist service. A general-purpose information website with a clean design, based around a homepage with colour-coded sections and subtle animations.\",\n            image: \"mockup/lovemetrue.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Autumn 2022\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 10, Tailwind\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit lovemetrue.nl\",\n                url: \"https://lovemetrue.nl/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"YourMic 2.0\",\n          description: {\n            image: \"icon/yourmic-dark.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 10, Bootstrap 5, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"For the second round of the YourMic contest, its website was redeveloped based on Umbraco based on the organisation's need for easy content management. Also included various other styling and settings improvements, making the website suitable for reuse in future editons of YourMic.\",\n            image: \"mockup/yourmic-v2.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Spring 2022\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 9, Bootstrap 5, SCSS\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit yourmic.nl\",\n                url: \"https://yourmic.nl/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"BASI Stempelkaart\",\n          description: {\n            image: \"icon/basi.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 10, Bootstrap 5, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"A portal for BASI/MDT participants to collect stamps based on attendance of activities. Once logged in, participants can see their collected stamps, stamps that can still be collected, and the accumulated MDT hours in different activity categories shown as dynamic progress bars. Powered by the Umbraco membership system.\",\n            image: \"mockup/stempelkaart.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Spring 2022\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 10, Bootstrap 5, SCSS\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"IE Portal\",\n          description: {\n            image: \"icon/ieportal.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Vue.js 3, Bootstrap 5, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"A startpage website that links to websites relevant for students of Industrial Ecology. Started as a personal startpage, useful in a multi-university programme with multiple study guides, webmail sites and student portals. Made into a full website, being surprisingly well-received by fellow IE students.\",\n            image: \"mockup/ieportal.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Autumn 2021\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Vue.js 3, Bootstrap 5, SCSS\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit ie.quan.cat\",\n                url: \"https://ie.quan.cat/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"Keiryuji 2.0\",\n          description: {\n            image: \"icon/keiryuji.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 9, Bootstrap 5, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"A new website for Keiryuji, a buddhist temple in the Pyrenees. This new site based on Umbraco 9 offers easy editing and various quality improvements over the previous site, including more professional layouts based on the Umbraco grid.\",\n            image: \"mockup/keiryuji-v2.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Summer 2021\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 9, Bootstrap 5, SCSS\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit www.keiryuji.org\",\n                url: \"https://keiryuji.org/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"BASI\",\n          description: {\n            image: \"icon/basi.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 8, Bootstrap 5, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"A website for BASI, a youth social work project by Canidream and partners. This website, which can be administered using Umbraco, allows visitors to obtain information about and sign up for the project.\",\n            image: \"mockup/basi.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Spring 2021\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 8, Bootstrap 5, SCSS\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit www.basi-mdt.nl\",\n                url: \"https://basi-mdt.nl/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"Canidream\",\n          description: {\n            image: \"icon/canidream.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 8, Bootstrap 5, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"A new website for Canidream, a social foundation in Delft. Using Umbraco, Canidream can easily administrate and keep up-to-date information on their project, testimonials, and partners.\",\n            image: \"mockup/canidream.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Spring 2021\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 8, Bootstrap 5, SCSS\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit www.canidream.nl\",\n                url: \"https://canidream.nl/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"YourMic\",\n          description: {\n            image: \"icon/yourmic.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Vue.js, Strapi, Bootstrap 5\"\n              }\n            ]\n          },\n          content: {\n            text: \"This single-page webapp offers information on the Canidream YourMic music contest, as well as media file downloads for participants. Based on Vue.js/Nuxt.js and using Strapi as a separate API, data could be easily changed as the contest progressed.\",\n            image: \"mockup/yourmic.jpg\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Spring 2021\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Vue.js, Strapi, Bootstrap 5\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit www.yourmic.nl\",\n                url: \"https://yourmic.nl/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"Portfolio Site\",\n          description: {\n            image: \"icon/portfoliosite.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Vue.js, Bootstrap 5, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"The website you're currently visiting employs the Vue.js framework, as well as the new version of Bootstrap for the layout. It is responsive and, as is appropriate for 2020, a dark mode stylesheet which is used automatically when using a device preferring dark mode. And a nice CSS-based animation when opening its modals. Thanks for checking it out!\",\n            image: \"mockup/portfoliosite.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Summer 2020\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Vue.js, Bootstrap 5, SCSS\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"Matcha Macha\",\n          description: {\n            image: \"icon/matchamacha.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 8, Bootstrap 4, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"This lunchroom website features a clean design with quick contact information, an image carousel with custom Ken Burns-style transitions, and a description. It also includes a simple contact form, which appears using a flip animation. All content can be easily managed using the Umbraco backoffice.\",\n            image: \"mockup/matchamacha.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Spring 2020\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 8, Bootstrap 4, SCSS\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit www.matchamacha.nl\",\n                url: \"https://matchamacha.nl/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"NOBIS\",\n          description: {\n            image: \"icon/nobis.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Plain HTML and SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"I developed this website to promote NOBIS and our social project, Fingerprint Art. It has a light yet colourful design fitting in with the branding of our presentations and documents, made easy to apply using SCSS mixins and loops. As it is a simple site, it has no CMS, but it does have an Ajax/PHP contact form. It is no longer available, having been integrated into the website of the Canidream foundation.\",\n            image: \"mockup/nobis.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Spring 2019\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"WordPress\"\n              }\n            ],\n            links: [\n            ]\n          }\n        },\n        {\n          title: \"La Forja\",\n          description: {\n            image: \"icon/laforja.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 7, Bootstrap 4, SCSS\"\n              }\n            ]\n          },\n          content: {\n            text: \"The website for La Forja, youth organisation based in Catalonia, has a custom design according to the organisation's brand guidelines. It is responsive, has an embedded Twitter feed, as well as a blog-style list of Publications and a customisable carousel image. The Umbraco backoffice, from which the content can be managed, has a custom translation into Catalan. It is no longer available online.\",\n            image: \"mockup/laforja.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Summer 2018\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"Umbraco 7, Bootstrap 4, SCSS\"\n              }\n            ],\n            links: []\n          }\n        },\n        {\n          title: \"Kind Centraal\",\n          description: {\n            image: \"icon/kc.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"WordPress\"\n              }\n            ]\n          },\n          content: {\n            text: \"This WordPress-based website includes a modernised and responsive design, while remaining in the same style as the previous Kind Centraal website.\",\n            image: \"mockup/kc.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Summer 2017\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"WordPress\"\n              }\n            ],\n            links: [\n              {\n                icon: \"globe2\",\n                title: \"Visit www.kindcentraal.nl\",\n                url: \"http://kindcentraal.nl/\"\n              }\n            ]\n          }\n        },\n        {\n          title: \"Keiryuji\",\n          description: {\n            image: \"icon/keiryuji.png\",\n            icons: [\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"WordPress\"\n              }\n            ]\n          },\n          content: {\n            text: \"This website for Keiryuji, a buddhist temple in the Pyrenees, is based on WordPress and has a design suited for the content of the page, as well as a full-width banner image on every page. It is no longer available, having been replaced with a brand-new experience based on Umbraco 9.\",\n            image: \"mockup/keiryuji.png\",\n            icons: [\n              {\n                icon: \"calendar-check\",\n                title: \"Date\",\n                text: \"Summer 2015\"\n              },\n              {\n                icon: \"box-seam\",\n                title: \"Main technologies\",\n                text: \"WordPress\"\n              }\n            ],\n            links: []\n          }\n        }\n      ]\n    };\n  }\n};\n</script>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Portfolio.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Portfolio.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Portfolio.vue?vue&type=template&id=748dce9a\"\nimport script from \"./Portfolio.vue?vue&type=script&lang=js\"\nexport * from \"./Portfolio.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}