{"version":3,"sources":["webpack:////src/components/Container.vue","webpack:////src/components/Container.vue?f6d5","webpack:////src/components/About.vue?527f","webpack:////src/components/About.vue","webpack:////src/components/About.vue?c61d","webpack:////src/components/Container.vue?1a88"],"names":["class","color","links","title","subtitle","props","render","__scopeId","id","t","content","item","key","j","type","l","components","Container","Svg","setup","messages","en","fr"],"mappings":"8OAEwBA,MAAM,uC,GACnBA,MAAM,sB,SACFA,MAAM,oB,kFAHnB,eAaM,OAbDA,MAAK,CAAC,YAAoB,EAAAC,MAAK,cAAiB,EAAAA,MAAK,K,CAC3C,EAAAC,O,iBAAX,eAAoE,MAApE,I,sBACA,eAUM,MAVN,EAUM,CATkC,EAAAC,O,iBAApC,eAOM,MAPN,EAOM,CANF,eAEK,yBADC,EAAAA,OAAK,GAED,EAAAC,U,iBAAV,eAEK,sBADC,EAAAA,UAAQ,I,+CAGlB,eAAO,uB,MAMF,GACXC,MAAM,CAAC,QAAS,QAAS,WAAY,U,UCdzC,EAAOC,OAASA,EAChB,EAAOC,UAAY,kBAEJ,U,oCCRf,W,8DCEYP,MAAM,S,GAmBDA,MAAM,kB,sGApBpB,eAqCW,GArCAQ,GAAG,QAAQN,MAAM,OAAQC,MAAO,EAAAM,EAAC,SAAYL,SAAU,EAAAK,EAAC,a,yBAC/D,iBAkCM,CAlCN,eAkCM,MAlCN,EAkCM,CAfD,eAcM,MAdN,EAcM,E,mBAbF,eAYM,2BAZc,EAAAC,SAAO,SAAfC,G,wBAAZ,eAYM,OAZwBC,IAAKD,EAAKR,MAAOH,MAAM,2B,CAChD,eAEI,yBADCW,EAAKR,OAAK,I,mBAEhB,eAOW,2BAPgBQ,EAAKD,SAAO,SAArBD,EAAGI,G,mDAA0BA,GAAC,CAC7B,MAANJ,EAAEK,M,iBAAX,eAEI,qBADEL,EAAEC,SAAO,IAEM,OAAND,EAAEK,M,iBAAjB,eAEK,S,mBADD,eAAqC,2BAArBL,EAAEC,SAAO,SAAdK,G,wBAAX,eAAqC,yBAARA,GAAC,M,qIAiB3C,GACXC,WAAW,CACPC,YAAA,KACAC,MAAA,MAEJC,MALW,WAKJ,MACS,eAAQ,CAChBC,SAAS,CACPC,GAAI,EAAQ,QACZC,GAAI,EAAQ,WAHXb,EADJ,EACIA,EAMDC,EAAU,gBAAS,iBAAK,CAC1B,CACIP,MAAOM,EAAE,oBACTC,QAAS,CACL,CACII,KAAM,IACNJ,QAASD,EAAE,uBAEf,CACIK,KAAM,IACNJ,QAASD,EAAE,uBAEf,CACIK,KAAM,IACNJ,QAASD,EAAE,yBAIvB,CACIN,MAAOM,EAAE,oBACTC,QAAS,CACL,CACII,KAAM,IACNJ,QAASD,EAAE,uBAEf,CACIK,KAAM,IACNJ,QAASD,EAAE,uBAEf,CACIK,KAAM,IACNJ,QAASD,EAAE,yBAIvB,CACIN,MAAOM,EAAE,oBACTC,QAAS,CACL,CACII,KAAM,IACNJ,QAASD,EAAE,oBAEf,CACIK,KAAM,KACNJ,QAAS,CACLD,EAAE,wBACFA,EAAE,wBACFA,EAAE,wBACFA,EAAE,wBACFA,EAAE,gCAMtB,MAAM,CACFC,UACAD,O,UChHZ,EAAOH,OAASA,EAED,gB,kCCPf,W","file":"js/chunk-636a7235.ace98898.js","sourcesContent":["<template>\n  <div class=\"container\" :class=\"color ? 'container__'+color : ''\">\n      <div v-if=\"links\" class=\"container__link container__link--up\"></div>\n      <div class=\"container__content\">\n          <div class=\"container__title\" v-if=\"title\">\n              <h2>\n                  {{title}}\n              </h2>\n              <h3 v-if=\"subtitle\">\n                  {{subtitle}}\n              </h3>\n          </div>\n          <slot/>\n      </div>\n  </div>\n</template>\n\n<script>\nexport default {\n    props:['color', 'title', 'subtitle', 'links']\n}\n</script>\n\n<style lang=\"scss\" scoped>\n    @import '@/style/main';\n    .container{\n       position: relative;\n        \n        &__content{\n             max-width: $page-width;\n            margin: 0 auto;\n            padding: 6rem 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n\n            @include respond(tab-land){\n                width: 95%;\n            }\n            @include respond(phone){\n                width: 92%;\n            }\n            @include respond(large-desktop){\n                max-width: $page-width-large;\n            }\n        }\n\n        &__title{\n            text-align: center;\n            margin-bottom: 4rem;\n\n            & h2{\n                text-transform: uppercase;\n                font-weight: 700;\n                font-size: 2.4rem;\n                letter-spacing: .2rem;\n                margin-bottom: 1.4rem;\n            }\n\n            & h3{\n                font-weight: 300;\n                font-size: 1.8rem;\n                letter-spacing: .1rem;\n                margin-bottom: 2rem;\n            }\n        }\n\n        &__blue-dark{\n            background-color: $color-blue-dark;\n            color:$color-white;\n        }\n\n        &__blue-light{\n            background-color: $color-bck-blue-light;\n        }\n\n        &__blue{\n            background-color: $color-blue-main;\n            color: $color-white;\n        }\n\n        &__link{\n            position: absolute;\n            left: 50%;\n            width: 2px;\n            height: 4rem;\n            background-color: $color-text;\n            z-index: 5;\n\n            &--up{\n                top: 0;\n                transform: translateY(-50%);\n            }\n        }\n    }\n</style>","import { render } from \"./Container.vue?vue&type=template&id=60ee86de&scoped=true\"\nimport script from \"./Container.vue?vue&type=script&lang=js\"\nexport * from \"./Container.vue?vue&type=script&lang=js\"\n\nimport \"./Container.vue?vue&type=style&index=0&id=60ee86de&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-60ee86de\"\n\nexport default script","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./About.vue?vue&type=style&index=0&id=7d0dc999&lang=scss\"","<template>\n   <container id=\"about\" links=\"true\" :title=\"t('title')\" :subtitle=\"t('subtitle')\">\n       <div class=\"about\">\n            <!-- <div class=\"about__side\">\n                <img src=\"@/assets/img/sebastien.webp\" width=\"350\" height=\"455\" alt=\"sebastien goldberg web development\">\n                <div class=\"about__side--text\">\n                    <div class=\"about__side--name\">\n                        <h4>\n                            Sébastien Goldberg\n                        </h4>\n                        <h5>\n                            {{t('role')}}\n                        </h5>\n                    </div>\n                    <div class=\"about__side--in\">\n                        <a href=\"https://www.linkedin.com/in/sebastiengoldberg/\" rel=\"noopener\" aria-label=\"linked in profile sebastien goldberg\" target=\"_blank\">\n                            <Svg icon=\"linkedin\" className=\"about__side--svg\"/>\n                        </a>\n                    </div>\n                </div>\n            </div> -->\n            <div class=\"about__content\">\n                <div v-for=\"item in content\" :key=\"item.title\" class=\"about__content--section\">\n                     <h4>\n                        {{item.title}}\n                    </h4>\n                    <template v-for=\"(t, j) in item.content\" :key=\"j\">\n                        <p v-if=\"t.type === 'p'\">\n                            {{t.content}}\n                        </p>\n                        <ul v-else-if=\"t.type === 'ul'\">\n                            <li v-for=\"l in t.content\">{{l}}</li>\n                        </ul>\n                    </template>\n                </div>\n            </div>\n       </div>\n    \n  </container>\n</template>\n\n<script>\nimport {useI18n} from 'vue-i18n';\nimport { computed } from 'vue';\n\nimport Container from './Container'\nimport Svg from './utils/Svg';\n\nexport default {\n    components:{\n        Container,\n        Svg\n    },\n    setup(){\n        const {t} = useI18n({\n            messages:{\n              en: require('../locales/en/about.json'),\n              fr: require('../locales/fr/about.json')\n            }\n        })\n        const content = computed(() =>[\n            {\n                title: t('content[0].title'),\n                content: [\n                    {\n                        type: \"p\",\n                        content: t('content[0].text[0]')\n                    },\n                    {\n                        type: \"p\",\n                        content: t('content[0].text[1]')\n                    },\n                    {\n                        type: \"p\",\n                        content: t('content[0].text[2]')\n                    }\n                ]\n            },\n            {\n                title: t('content[1].title'),\n                content: [\n                    {\n                        type: \"p\",\n                        content: t('content[1].text[0]')\n                    },\n                    {\n                        type: \"p\",\n                        content: t('content[1].text[1]')\n                    },\n                    {\n                        type: \"p\",\n                        content: t('content[1].text[2]')\n                    }\n                ]\n            },\n            {\n                title: t('content[2].title'),\n                content: [\n                    {\n                        type: \"p\",\n                        content: t('content[2].text')\n                    },\n                    {\n                        type: \"ul\",\n                        content: [\n                            t('content[2].values[0]'),\n                            t('content[2].values[1]'),\n                            t('content[2].values[2]'),\n                            t('content[2].values[3]'),\n                            t('content[2].values[4]')\n                        ]\n                    }\n                ]\n            }\n        ]);\n        return{\n            content,\n            t\n        }\n    }\n}\n</script>\n\n<style lang=\"scss\">\n@import '@/style/main';\n\n.about{\n    display: flex;\n    width: 100%;\n\n    @include respond(phone){\n        flex-direction: column;\n    }\n    &__side{\n        flex: 0 0 30%;\n        margin-right: 2rem;\n\n        @include respond(phone){\n            margin-right: 0;\n            margin-bottom: 4rem;\n        }\n\n        & img{\n            width: 100%;\n            height: auto;\n        }\n\n        &--text{\n            margin-top: .8rem;\n            display: flex;\n        }\n\n        &--name{\n            & h4{\n                text-transform: uppercase;\n                letter-spacing: .1rem;\n                font-size: 1.8rem;\n                margin-bottom: .3rem;\n            }\n\n            & h5{\n                font-weight: 300;\n                font-size: 1.6rem;\n                letter-spacing: .1rem;\n            }\n        }\n\n        &--in{\n            margin-left: auto;\n\n            & a{\n                color: inherit;\n            }\n        }\n\n        &--svg{\n            @include svg(2.2rem);\n        }\n    }\n    &__content{\n        flex: 1;\n\n        &--section{\n            & h4{\n                margin-bottom: 1rem;\n                text-transform: uppercase;\n                font-size: 1.8rem;\n                letter-spacing: .2rem;\n            }\n\n            & p{\n                margin-bottom: .6rem;\n                font-size: 1.4rem;\n                text-align: justify;\n            }\n\n            &:not(:last-child){\n                margin-bottom: 2.4rem;\n            }\n\n            & ul{\n                display: flex;\n                flex-wrap: wrap;\n                margin: 2rem 0;\n            }\n\n            & li{\n                list-style: none;\n                padding: .8rem 1.5rem;\n                border: 2px solid currentColor;\n                color:$color-blue-main;\n                text-transform: uppercase;\n                letter-spacing: .1rem;\n                font-weight: 700;\n                margin-bottom: 1rem;\n                box-shadow: .3rem .3rem 0rem #ccc;\n\n                 @include respond(phone){\n                    padding: .6rem 1.2rem;\n                }\n\n                &:not(:last-child){\n                    margin-right: 1rem;\n                }\n            }\n        }\n    }\n}\n\n</style>","import { render } from \"./About.vue?vue&type=template&id=7d0dc999\"\nimport script from \"./About.vue?vue&type=script&lang=js\"\nexport * from \"./About.vue?vue&type=script&lang=js\"\n\nimport \"./About.vue?vue&type=style&index=0&id=7d0dc999&lang=scss\"\nscript.render = render\n\nexport default script","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Container.vue?vue&type=style&index=0&id=60ee86de&lang=scss&scoped=true\""],"sourceRoot":""}