├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── assets ├── .DS_Store ├── README.md ├── data.1.json ├── data.json ├── fonts │ ├── .DS_Store │ ├── hawthorn_ef.eot │ ├── hawthorn_ef.svg │ ├── hawthorn_ef.woff │ ├── hawthorn_ef.woff2 │ ├── messina_sans_light.eot │ ├── messina_sans_light.svg │ ├── messina_sans_light.woff │ ├── messina_sans_light.woff2 │ ├── messina_sans_regular.eot │ ├── messina_sans_regular.svg │ ├── messina_sans_regular.woff │ ├── messina_sans_regular.woff2 │ ├── messina_sans_semiBold.eot │ ├── messina_sans_semiBold.svg │ ├── messina_sans_semiBold.woff │ └── messina_sans_semiBold.woff2 ├── images │ ├── .DS_Store │ └── placeholder.jpg ├── js │ ├── PerlinNoise.js │ ├── blobs │ │ ├── BlobMixin.js │ │ ├── BlobMixinNoise.js │ │ ├── DragBlob.js │ │ ├── HomeBlob.js │ │ ├── MenuBlob.js │ │ ├── MenuBustBlobs.js │ │ ├── MenuButtonBlob.js │ │ ├── MouseBlob.js │ │ └── NoisePosition.js │ ├── canvasBlob │ │ ├── Blob.js │ │ ├── BlobPoint.js │ │ ├── BlobTest.js │ │ └── Blobs.js │ ├── events.js │ ├── facts │ │ └── FactImages.js │ ├── mask │ │ ├── Transition.js │ │ ├── _Disappear.js │ │ └── _Transition.js │ ├── noise.js │ ├── pixi │ │ ├── Background.js │ │ ├── Disappear.js │ │ ├── Displacement.js │ │ ├── PixiBlobs.js │ │ ├── Portrait.js │ │ ├── Portraits.js │ │ ├── Title.js │ │ ├── TitleAbout.js │ │ ├── TitleMobile.js │ │ ├── Titles.js │ │ ├── TitlesAbout.js │ │ ├── TitlesMobile.js │ │ ├── Transition.js │ │ └── blobs │ │ │ ├── Blob.js │ │ │ ├── BlobPoint.js │ │ │ ├── Blobs.js │ │ │ ├── MouseBlob.js │ │ │ └── _Blob.js │ ├── utils │ │ ├── MouseHelper.js │ │ ├── ResizeHelper.js │ │ ├── Scroll.js │ │ ├── ScrollHelper.js │ │ ├── SmoothScroll.js │ │ ├── SoundHelper.js │ │ ├── Support.js │ │ └── Utils.js │ └── workers │ │ └── PerlinWorker.js ├── stylus │ ├── base │ │ ├── font.styl │ │ └── reset.styl │ ├── components │ │ ├── button.styl │ │ └── menuIcon.styl │ ├── main.styl │ └── vars │ │ ├── easing.styl │ │ ├── index.styl │ │ └── variables.styl └── variables.json ├── components ├── Desktop.vue ├── HomeCanvas.vue ├── Mobile.vue ├── MobileCanvas.vue ├── README.md ├── ScrollMixins.js ├── about │ ├── AboutCredits.vue │ ├── AboutCreditsImages.vue │ ├── AboutFooter.vue │ ├── AboutText.vue │ └── AboutTop.vue ├── common │ ├── ButtonMenuMixins.js │ ├── Loader.vue │ ├── Logo.vue │ ├── MenuButton.vue │ ├── Mouse.vue │ ├── Noise.vue │ └── Sound.vue ├── facts │ ├── Drag.vue │ ├── Facts.vue │ ├── Slide.vue │ ├── Slider.vue │ ├── Timeline.vue │ └── TimelineDate.vue ├── ioMixins.js ├── layout │ └── ScrollLayout.vue ├── menu │ ├── Menu.vue │ ├── MenuCitation.vue │ ├── MenuCitations.vue │ ├── MenuDraggable.vue │ ├── MenuFooter.vue │ ├── MenuHeader.vue │ └── MenuLink.vue └── story │ ├── StoryContent.vue │ ├── StoryMedia.vue │ ├── StoryPush.vue │ ├── StorySpeech.vue │ ├── StorySpeechPart.vue │ └── StoryTop.vue ├── imagesToPack ├── .DS_Store ├── about │ ├── cara-delevingne.jpg │ ├── emma-watson.jpg │ ├── jennifer-lawrence.jpg │ └── natalie-portman.jpg ├── bust │ ├── .DS_Store │ ├── busts.jpg │ ├── busts@0.5x.jpg │ ├── mask.png │ └── mask@0.5x.png ├── credits │ ├── cara-delevingne │ │ └── amber-fillerup-clark.jpg │ ├── emma-watson │ │ ├── carole-lambert.jpg │ │ ├── cass-bird.jpg │ │ └── malene-birger.jpg │ ├── jennifer-lawrence │ │ ├── ben-hassett.jpg │ │ ├── evelyn-bencicova.jpg │ │ └── mel-and-adam.jpg │ └── natalie-portman │ │ ├── aitken-jolly.jpg │ │ └── luc-besson.jpg ├── displacement.jpg ├── facts │ ├── cara-delevingne-0.jpg │ ├── cara-delevingne-1.jpg │ ├── cara-delevingne-2.jpg │ ├── cara-delevingne-3.jpg │ ├── cara-delevingne-4.jpg │ ├── emma-watson-0.jpg │ ├── emma-watson-1.jpg │ ├── emma-watson-2.jpg │ ├── emma-watson-3.jpg │ ├── emma-watson-4.jpg │ ├── jennifer-lawrence-0.jpg │ ├── jennifer-lawrence-1.jpg │ ├── jennifer-lawrence-2.jpg │ ├── jennifer-lawrence-3.jpg │ ├── jennifer-lawrence-4.jpg │ ├── natalie-portman-0.jpg │ ├── natalie-portman-1.jpg │ ├── natalie-portman-2.jpg │ ├── natalie-portman-3.jpg │ └── natalie-portman-4.jpg ├── mask │ ├── .DS_Store │ ├── disappear.png │ ├── disappear@0.5x.png │ ├── transition.png │ └── transition@0.5x.png ├── menu │ ├── cara-delevingne.png │ ├── emma-watson.png │ ├── jennifer-lawrence.png │ └── natalie-portman.png └── titles │ ├── titles-border.png │ ├── titles-border@0.5x.png │ ├── titles.png │ └── titles@0.5x.png ├── imagesToPackMobile ├── displacement.jpg ├── title-mobile-border.png └── title-mobile.png ├── layouts ├── README.md ├── default.vue └── pageTransition.js ├── middleware ├── README.md └── mobile.js ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── *.vue ├── README.md ├── about.vue ├── index.vue └── story │ └── _pageId.vue ├── plugins ├── README.md └── vuex-router-sync.js ├── static ├── .htaccess ├── .htpasswd ├── README.md ├── favicons │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── manifest.webmanifest │ └── touch │ │ ├── homescreen144.png │ │ ├── homescreen168.png │ │ ├── homescreen192.png │ │ ├── homescreen48.png │ │ ├── homescreen72.png │ │ └── homescreen96.png ├── images │ ├── .DS_Store │ ├── pack-mobile │ │ ├── pack.json │ │ └── pack.pack │ ├── pack │ │ ├── pack.json │ │ └── pack.pack │ ├── placeholder.jpg │ ├── share │ │ ├── cara-delevingne.jpg │ │ ├── emma-watson.jpg │ │ ├── general.jpg │ │ ├── jennifer-lawrence.jpg │ │ └── natalie-portman.jpg │ └── speech │ │ ├── .DS_Store │ │ ├── cara-delevingne-0.png │ │ ├── cara-delevingne-1.gif │ │ ├── cara-delevingne-1.png │ │ ├── cara-delevingne-2.png │ │ ├── emma-watson-0.png │ │ ├── emma-watson-1.gif │ │ ├── emma-watson-1.png │ │ ├── emma-watson-2.png │ │ ├── jennifer-lawrence-0.gif │ │ ├── jennifer-lawrence-0.png │ │ ├── jennifer-lawrence-1.png │ │ ├── jennifer-lawrence-2.png │ │ ├── natalie-portman-0.png │ │ ├── natalie-portman-1.gif │ │ ├── natalie-portman-1.png │ │ └── natalie-portman-2.png ├── sounds │ ├── .DS_Store │ ├── _bg.mp3 │ ├── _intro.mp3 │ ├── _piano.mp3 │ ├── bg.mp3 │ ├── cara-delevigne-0.mp3 │ ├── cara-delevigne-1.mp3 │ ├── cara-delevigne-2.mp3 │ ├── cara-delevigne.mp3 │ ├── cara-delevingne-0.mp3 │ ├── cara-delevingne-1.mp3 │ ├── cara-delevingne-2.mp3 │ ├── emma-watson-0.mp3 │ ├── emma-watson-1.mp3 │ ├── emma-watson-2.mp3 │ ├── intro.mp3 │ ├── jennifer-lawrence-0.mp3 │ ├── jennifer-lawrence-1.mp3 │ ├── jennifer-lawrence-2.mp3 │ ├── natalie-portman-0.mp3 │ ├── natalie-portman-1.mp3 │ ├── natalie-portman-2.mp3 │ └── piano.mp3 └── sw.js ├── store ├── README.md └── index.js └── tools ├── hack └── ship /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential' 14 | ], 15 | // required to lint *.vue files 16 | plugins: [ 17 | 'vue' 18 | ], 19 | // add your custom rules here 20 | rules: {} 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | beyond-beauty 12 | 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # beyond-beauty 2 | [https://beyond-beauty.netlify.app](https://beyond-beauty.netlify.app/) 3 | 4 | > WARNING : This is not supposed to be the best code ever, a lot of mistakes can be in it. Am sure that there is thousand of better ways to do it. The only reason am sharing this code is to help people to find their way into front-end development. 5 | 6 | ## Build Setup 7 | 8 | ``` bash 9 | # install dependencies 10 | $ npm install 11 | 12 | # serve with hot reload at localhost:3000 13 | $ npm run dev 14 | 15 | 16 | ``` 17 | 18 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 19 | -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/.DS_Store -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /assets/fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/.DS_Store -------------------------------------------------------------------------------- /assets/fonts/hawthorn_ef.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/hawthorn_ef.eot -------------------------------------------------------------------------------- /assets/fonts/hawthorn_ef.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/hawthorn_ef.woff -------------------------------------------------------------------------------- /assets/fonts/hawthorn_ef.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/hawthorn_ef.woff2 -------------------------------------------------------------------------------- /assets/fonts/messina_sans_light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_light.eot -------------------------------------------------------------------------------- /assets/fonts/messina_sans_light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_light.woff -------------------------------------------------------------------------------- /assets/fonts/messina_sans_light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_light.woff2 -------------------------------------------------------------------------------- /assets/fonts/messina_sans_regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_regular.eot -------------------------------------------------------------------------------- /assets/fonts/messina_sans_regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_regular.woff -------------------------------------------------------------------------------- /assets/fonts/messina_sans_regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_regular.woff2 -------------------------------------------------------------------------------- /assets/fonts/messina_sans_semiBold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_semiBold.eot -------------------------------------------------------------------------------- /assets/fonts/messina_sans_semiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_semiBold.woff -------------------------------------------------------------------------------- /assets/fonts/messina_sans_semiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/fonts/messina_sans_semiBold.woff2 -------------------------------------------------------------------------------- /assets/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/images/.DS_Store -------------------------------------------------------------------------------- /assets/images/placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/assets/images/placeholder.jpg -------------------------------------------------------------------------------- /assets/js/PerlinNoise.js: -------------------------------------------------------------------------------- 1 | // This is a port of Ken Perlin's Java code. The 2 | // original Java code is at http://cs.nyu.edu/%7Eperlin/noise/. 3 | // Note that in this version, a number from 0 to 1 is returned. 4 | class PerlinNoise { 5 | 6 | 7 | noise(x, y, z){ 8 | 9 | var p = new Array(512) 10 | var permutation = [ 151,160,137,91,90,15, 11 | 131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23, 12 | 190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33, 13 | 88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166, 14 | 77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244, 15 | 102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196, 16 | 135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123, 17 | 5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42, 18 | 223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9, 19 | 129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228, 20 | 251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107, 21 | 49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254, 22 | 138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180 23 | ]; 24 | for (var i=0; i < 256 ; i++) 25 | p[256+i] = p[i] = permutation[i]; 26 | 27 | var X = Math.floor(x) & 255, // FIND UNIT CUBE THAT 28 | Y = Math.floor(y) & 255, // CONTAINS POINT. 29 | Z = Math.floor(z) & 255; 30 | x -= Math.floor(x); // FIND RELATIVE X,Y,Z 31 | y -= Math.floor(y); // OF POINT IN CUBE. 32 | z -= Math.floor(z); 33 | var u = this.fade(x), // COMPUTE FADE CURVES 34 | v = this.fade(y), // FOR EACH OF X,Y,Z. 35 | w = this.fade(z); 36 | var A = p[X ]+Y, AA = p[A]+Z, AB = p[A+1]+Z, // HASH COORDINATES OF 37 | B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z; // THE 8 CUBE CORNERS, 38 | 39 | return this.scale(this.lerp(w, this.lerp(v, this.lerp(u, this.grad(p[AA ], x , y , z ), // AND ADD 40 | this.grad(p[BA ], x-1, y , z )), // BLENDED 41 | this.lerp(u, this.grad(p[AB ], x , y-1, z ), // RESULTS 42 | this.grad(p[BB ], x-1, y-1, z ))),// FROM 8 43 | this.lerp(v, this.lerp(u, this.grad(p[AA+1], x , y , z-1 ), // CORNERS 44 | this.grad(p[BA+1], x-1, y , z-1 )), // OF CUBE 45 | this.lerp(u, this.grad(p[AB+1], x , y-1, z-1 ), 46 | this.grad(p[BB+1], x-1, y-1, z-1 ))))); 47 | } 48 | fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); } 49 | lerp( t, a, b) { return a + t * (b - a); } 50 | grad(hash, x, y, z) { 51 | var h = hash & 15; // CONVERT LO 4 BITS OF HASH CODE 52 | var u = h<8 ? x : y, // INTO 12 GRADIENT DIRECTIONS. 53 | v = h<4 ? y : h==12||h==14 ? x : z; 54 | return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v); 55 | } 56 | scale(n) { return (1 + n)/2; } 57 | } 58 | 59 | export default new PerlinNoise() 60 | -------------------------------------------------------------------------------- /assets/js/blobs/BlobMixinNoise.js: -------------------------------------------------------------------------------- 1 | import NoisePosition from '~/assets/js/blobs/NoisePosition.js' 2 | 3 | class BlobMixinNoise { 4 | constructor(w, h, shapeW = 0) { 5 | this.w = w 6 | this.h = h 7 | this.shapeW = shapeW 8 | this.totalPoints = 40 9 | this.centerX = h / 2 10 | this.centerY = h / 2 11 | this.centerOutsideX = h / 2 12 | this.centerOutsideY = h / 2 13 | this.rotation = 0 14 | this.scale = 0 15 | this.init() 16 | } 17 | 18 | init(){ 19 | this.canvas = document.createElement('canvas') 20 | this.canvas.width = this.w 21 | this.canvas.height = this.h 22 | this.ctx = this.canvas.getContext('2d') 23 | } 24 | 25 | 26 | tick() { 27 | this.noiseValues = NoisePosition.noiseValues 28 | this.ctx.clearRect(0, 0, this.w, this.h) 29 | } 30 | 31 | getNoiseValues(id) { 32 | this.noiseValues = [...NoisePosition.getValuesFrom(id)] 33 | } 34 | 35 | drawShape(radius, centerX, centerY) { 36 | let points = [] 37 | let x = 0, y = 0, angle = 0 38 | const slice = Math.PI * 2 / this.totalPoints 39 | for(let i = 0; i < this.totalPoints; i++) { 40 | x = Math.cos(angle) 41 | y = Math.sin(angle) 42 | x = centerX + (radius + this.noiseValues[i].x * (radius / 50)) * x 43 | y = centerY + (radius + this.noiseValues[i].y * (radius / 50)) * y 44 | points.push({ x, y }) 45 | angle += slice 46 | } 47 | this.ctx.moveTo(points[0].x, points[0].y) 48 | this.curveThrough(points) 49 | } 50 | 51 | curveThrough(points) { 52 | var i, n, a, b, x, y 53 | for (i = 1, n = points.length - 1; i < n; i++) { 54 | a = points[i] 55 | b = points[i + 1] || points[0] 56 | x = (a.x + b.x) * 0.5 57 | y = (a.y + b.y) * 0.5 58 | this.ctx.quadraticCurveTo(a.x, a.y, x, y) 59 | } 60 | a = points[i] 61 | b = points[i + 1] || points[0] 62 | this.ctx.quadraticCurveTo(a.x, a.y, b.x, b.y) 63 | } 64 | 65 | resize(w,h, shapeW = 0) { 66 | this.w = w 67 | this.h = h 68 | this.canvas.width = this.w 69 | this.canvas.height = this.h 70 | this.shapeW = shapeW 71 | } 72 | 73 | } 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | export default BlobMixinNoise 84 | -------------------------------------------------------------------------------- /assets/js/blobs/DragBlob.js: -------------------------------------------------------------------------------- 1 | import { $colors } from '~/assets/variables.json' 2 | 3 | import BlobMixinNoise from '~/assets/js/blobs/BlobMixinNoise' 4 | 5 | class DragBlob extends BlobMixinNoise{ 6 | constructor(w, h, shapeW, centerX, centerY) { 7 | super(w, h, shapeW, centerX, centerY) 8 | this.dOusitdeX = 0 9 | this.scale = 0 10 | this.rotation = 0 11 | } 12 | show(delay) { 13 | this.rotation = 0 14 | TweenMax.to(this, 1, {delay, rotation: '+=30', scale: 1, ease: Power4.easeOut}) 15 | } 16 | hide() { 17 | this.scale = 0 18 | } 19 | doClick() { 20 | TweenMax.to(this, .1, {scale:1, ease: Power4.easeIn, repeat: 1, yoyo:true}) 21 | } 22 | doMouseEnter() { 23 | TweenMax.to(this, 1,{rotation: '+=15', scale: 1.1, ease: Power4.easeOut}) 24 | } 25 | doMouseLeave() { 26 | TweenMax.to(this, 1,{rotation: '+=15', scale: 1, ease: Power4.easeOut}) 27 | } 28 | setDeformation(dist){ 29 | this.dOusitdeX = dist 30 | } 31 | 32 | tick() { 33 | super.tick() 34 | 35 | this.centerOutsideX = this.centerX + this.dOusitdeX * Math.cos(this.rotation * Math.PI / 180) 36 | this.centerOutsideY = this.centerY - this.dOusitdeX * Math.sin(this.rotation * Math.PI / 180) 37 | 38 | this.ctx.save() 39 | this.ctx.translate(this.centerX, this.centerY) 40 | this.ctx.rotate(this.rotation * Math.PI / 180) 41 | this.ctx.scale(this.scale, this.scale) 42 | this.ctx.translate(-this.centerX, -this.centerY) 43 | this.ctx.beginPath() 44 | this.drawShape(this.shapeW + 20, this.centerOutsideX, this.centerOutsideY) 45 | this.ctx.fillStyle = $colors.bgWhite//0XCC0000// 46 | this.ctx.fill() 47 | this.ctx.restore() 48 | 49 | this.ctx.restore() 50 | this.ctx.save() 51 | this.ctx.translate(this.centerX, this.centerY) 52 | this.ctx.rotate(this.rotation * Math.PI / 180) 53 | this.ctx.scale(this.scale, this.scale) 54 | this.ctx.translate(-this.centerX, -this.centerY) 55 | this.ctx.beginPath() 56 | this.drawShape(this.shapeW, this.centerX, this.centerY) 57 | this.ctx.strokeColor = $colors.timelineBlack 58 | this.ctx.lineWidth = 2 59 | this.ctx.fillStyle = $colors.bgWhite 60 | this.ctx.stroke() 61 | this.ctx.fill() 62 | this.ctx.restore() 63 | 64 | 65 | } 66 | } 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | export default DragBlob 77 | -------------------------------------------------------------------------------- /assets/js/blobs/HomeBlob.js: -------------------------------------------------------------------------------- 1 | import { $colors } from '~/assets/variables.json' 2 | 3 | import BlobMixinNoise from '~/assets/js/blobs/BlobMixinNoise' 4 | 5 | class HomeBlob extends BlobMixinNoise{ 6 | constructor(w, h, shapeW) { 7 | super(w, h, shapeW) 8 | } 9 | 10 | tick(rot, scale) { 11 | super.tick() 12 | this.ctx.save() 13 | this.ctx.translate(this.centerX, this.centerY) 14 | this.ctx.rotate(rot * Math.PI / 180) 15 | this.ctx.scale(scale, scale) 16 | this.ctx.translate(-this.centerX, -this.centerY) 17 | this.ctx.beginPath() 18 | this.drawShape(this.shapeW, this.centerOutsideX, this.centerOutsideY) 19 | this.ctx.strokeStyle = '#ffffff'//0XCC0000// 20 | this.ctx.lineWidth = 2 21 | this.ctx.stroke() 22 | this.ctx.restore() 23 | 24 | this.getNoiseValues(20) 25 | 26 | this.ctx.save() 27 | this.ctx.translate(this.centerX, this.centerY) 28 | this.ctx.rotate(rot * Math.PI / 180) 29 | this.ctx.scale(scale, scale) 30 | this.ctx.translate(-this.centerX, -this.centerY) 31 | this.ctx.beginPath() 32 | this.drawShape(this.shapeW * 1.1, this.centerX, this.centerY) 33 | this.ctx.strokeStyle = '#ffffff' 34 | this.ctx.lineWidth = 1 35 | this.ctx.globalAlpha = 0.7 36 | this.ctx.stroke() 37 | this.ctx.restore() 38 | } 39 | } 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | export default HomeBlob 50 | -------------------------------------------------------------------------------- /assets/js/blobs/MenuBlob.js: -------------------------------------------------------------------------------- 1 | import { $colors } from '~/assets/variables.json' 2 | 3 | import BlobMixinNoise from '~/assets/js/blobs/BlobMixinNoise' 4 | 5 | class MenuBlob extends BlobMixinNoise{ 6 | constructor(w, h, radius ) { 7 | super(w, h, radius) 8 | } 9 | 10 | tick(rot, scale) { 11 | super.tick() 12 | this.ctx.save() 13 | this.ctx.beginPath() 14 | this.ctx.translate(this.centerX, this.centerY) 15 | this.ctx.rotate(rot * Math.PI / 180) 16 | this.ctx.scale(scale, scale) 17 | this.ctx.translate(-this.centerX, -this.centerY) 18 | this.drawShape(this.shapeW, this.centerX, this.centerY) 19 | this.ctx.fillStyle = 'white'//0XCC0000// 20 | this.ctx.fill() 21 | this.ctx.restore() 22 | } 23 | } 24 | 25 | 26 | export default MenuBlob 27 | -------------------------------------------------------------------------------- /assets/js/blobs/MenuBustBlobs.js: -------------------------------------------------------------------------------- 1 | import { $colors } from '~/assets/variables.json' 2 | 3 | import BlobMixinNoise from '~/assets/js/blobs/BlobMixinNoise' 4 | 5 | class MenuBustBlob extends BlobMixinNoise{ 6 | constructor(w, h) { 7 | super(w, h) 8 | this.scale = 0 9 | this.translate = -10 10 | this.noiseValue = (Math.round(Math.random() * 40)) 11 | } 12 | setBlobs(blobs) { 13 | this.blobs = blobs 14 | } 15 | setColor(color) { 16 | this.color = color 17 | } 18 | hide() { 19 | this.blobs.forEach((el, i) => { 20 | TweenMax.to(this, .8, {delay: .1, scale: .3, translate: .3, ease: Quart.easeIn}) 21 | }) 22 | } 23 | show(delay) { 24 | this.translate = -.5 25 | this.scale = 0 26 | this.blobs.forEach((el, i) => { 27 | TweenMax.to(this, 1.2, {scale: 1, translate: 0, delay: delay + .6 + i * .15, ease: Quart.easeOut}) 28 | }) 29 | } 30 | tick() { 31 | super.tick() 32 | this.blobs.forEach((el, i) => { 33 | this.ctx.save() 34 | //this.ctx.translate(el.x / 100 * this.w, el.y / 100 * this.h); 35 | //this.ctx.rotate((20 + 20 * i) * Math.PI / 180); 36 | this.ctx.beginPath() 37 | this.getNoiseValues(this.noiseValue + i * 5) 38 | const pourcX = el.x / 100 * this.w * this.translate 39 | const pourcY = el.y / 100 * this.h * (-this.translate) 40 | this.ctx.translate(pourcX + el.x / 100 * this.w, pourcY + el.y / 100 * this.h); 41 | this.ctx.rotate(-Math.PI / 4); 42 | this.ctx.scale(this.scale, this.scale * .8); 43 | this.drawShape(el.shapeW / 100 * this.w, 0, 0) 44 | this.ctx.fillStyle = this.color// 45 | this.ctx.fill() 46 | //this.ctx.rotate(-(20 + 20 * i) * Math.PI / 180); 47 | //this.ctx.translate(-el.x / 100 * this.w, -el.y / 100 * this.h); 48 | this.ctx.restore() 49 | }) 50 | } 51 | } 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | export default MenuBustBlob 62 | -------------------------------------------------------------------------------- /assets/js/blobs/MenuButtonBlob.js: -------------------------------------------------------------------------------- 1 | import { $colors } from '~/assets/variables.json' 2 | import BlobMixinNoise from '~/assets/js/blobs/BlobMixinNoise' 3 | 4 | class MenuButtonBlob extends BlobMixinNoise{ 5 | constructor(w, h, shapeW, centerX, centerY) { 6 | super(w, h, shapeW, centerX, centerY) 7 | } 8 | 9 | tick(rot, scale) { 10 | super.tick() 11 | 12 | this.ctx.save() 13 | this.ctx.beginPath() 14 | this.ctx.translate(this.centerX, this.centerY) 15 | this.ctx.rotate(rot * Math.PI / 180) 16 | this.ctx.scale(scale, scale) 17 | this.ctx.translate(-this.centerX, -this.centerY) 18 | this.drawShape(this.shapeW, this.centerX, this.centerY) 19 | this.ctx.fillStyle = 'white' //$colors.bgWhite//0XCC0000// 20 | this.ctx.fill() 21 | this.ctx.restore() 22 | } 23 | } 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | export default MenuButtonBlob 34 | -------------------------------------------------------------------------------- /assets/js/blobs/MouseBlob.js: -------------------------------------------------------------------------------- 1 | import { $colors } from '~/assets/variables.json' 2 | 3 | import BlobMixinNoise from '~/assets/js/blobs/BlobMixinNoise' 4 | import MouseHelper from '~/assets/js/utils/MouseHelper' 5 | 6 | class MouseBlob extends BlobMixinNoise{ 7 | constructor(w, h, shapeW = 0) { 8 | super(w, h, shapeW) 9 | this.scale = 0 10 | this.rotation = 0 11 | this.color = 'white' 12 | } 13 | setBlobs(blobs) { 14 | this.blobs = blobs 15 | } 16 | setColor(color) { 17 | this.color = color 18 | } 19 | show() { 20 | this.rotation = 0 21 | TweenMax.to(this, 1, {rotation: '+=30', scale: 1, ease: Power4.easeOut}) 22 | } 23 | hide() { 24 | TweenMax.to(this, .5, {rotation: '+=30', scale: 0, ease: Power4.easeOut}) 25 | } 26 | scaleDown() { 27 | TweenMax.to(this, .5,{scale: 0.85, ease: Power4.easeOut}) 28 | } 29 | 30 | scaleUp() { 31 | TweenMax.to(this, .6,{scale: 1, ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.166,1.058 0.324,1.206 0.516,1.386 0.602,1 1,1")}) 32 | } 33 | 34 | tick(follow = false) { 35 | super.tick() 36 | this.ctx.save() 37 | if(follow){ 38 | this.centerX = MouseHelper.easeX 39 | this.centerY = MouseHelper.easeY 40 | } 41 | this.ctx.translate(this.centerX, this.centerY) 42 | this.ctx.rotate(this.rotation * Math.PI / 180) 43 | this.ctx.scale(this.scale, this.scale) 44 | this.ctx.translate(-this.centerX, -this.centerY) 45 | this.ctx.beginPath() 46 | this.drawShape(this.shapeW, this.centerX, this.centerY) 47 | this.ctx.fillStyle = this.color 48 | this.ctx.fill() 49 | this.ctx.restore() 50 | } 51 | } 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | export default MouseBlob 62 | -------------------------------------------------------------------------------- /assets/js/blobs/NoisePosition.js: -------------------------------------------------------------------------------- 1 | import SimplexNoise from 'simplex-noise' 2 | 3 | class NoisePosition { 4 | constructor() { 5 | this.totalPoints = 40 6 | this.noiseValues = [] 7 | this.time = 0 8 | this.init() 9 | } 10 | 11 | init(){ 12 | this.noise = new SimplexNoise(Math.random()) 13 | this.tick() 14 | // console.log(this.noiseValues, this.getValuesFrom(20)) 15 | } 16 | 17 | tick() { 18 | this.time++ 19 | let angle = 0 20 | const slice = Math.PI * 2 / this.totalPoints 21 | let x = 0, y = 0, displacement = 0 22 | this.noiseValues = [] 23 | for(let i = 0; i < this.totalPoints; i++) { 24 | x = Math.cos(angle) 25 | y = Math.sin(angle) 26 | displacement = (this.noise.noise3D(x, y, this.time * 0.008) * 3) 27 | this.noiseValues.push({x: x * displacement, y: y * displacement}) 28 | angle += slice 29 | } 30 | } 31 | 32 | getValuesFrom(id) { 33 | const end = this.noiseValues.slice(0, id) 34 | const begin = this.noiseValues.slice(id) 35 | return [...begin, ...end] 36 | } 37 | } 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | export default new NoisePosition() 48 | -------------------------------------------------------------------------------- /assets/js/canvasBlob/BlobPoint.js: -------------------------------------------------------------------------------- 1 | export default class BlobPoint { 2 | constructor(angle, parent, id, elasticity, friction) { 3 | this.id = id 4 | this.parent = parent; 5 | this.angle = Math.PI - angle 6 | this.elasticity = elasticity 7 | this.velocity = 0 8 | this.spring = 0 9 | this.friction = friction 10 | this.color = 'black' 11 | this.point = { 12 | x: Math.cos(this.angle), 13 | y: Math.sin(this.angle) 14 | } 15 | 16 | this.acceleration = -5 + Math.random() * 10; 17 | this.render() 18 | } 19 | 20 | calcSpring(leftPoint, rightPoint) { 21 | this.acceleration = ((-5 * this.spring) + (leftPoint.spring - this.spring) + (rightPoint.spring - this.spring)) * this.elasticity - this.velocity * this.friction 22 | if (Math.abs(this.spring) < 1) this.acceleration = -.5 + Math.random() 23 | this.render() 24 | } 25 | 26 | render() { 27 | this.velocity += this.acceleration; 28 | this.spring += this.velocity; 29 | this.position = { 30 | x: this.parent.position.x + this.point.x * (this.parent.radius + this.spring), 31 | y: this.parent.position.y + this.point.y * (this.parent.radius + this.spring) 32 | } 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /assets/js/canvasBlob/BlobTest.js: -------------------------------------------------------------------------------- 1 | import NoisePosition from '~/assets/js/blobs/NoisePosition.js' 2 | 3 | class BlobTest { 4 | constructor(ctx, index) { 5 | this.index = index 6 | this.ctx = ctx 7 | this.position = {x:0, y:0} 8 | this.numPoints = 40 9 | this.rotation = 45 10 | } 11 | setBlob() { 12 | this.numPoints = 40 13 | this.radius = 50 + Math.round(Math.random() * 100) 14 | 15 | const cosAngle = Math.random() * Math.PI / 2 + Math.PI / 4 16 | const sinAngle = Math.random() * Math.PI / 2 + Math.PI / 4 17 | this.position.x = Math.cos(cosAngle) * (this.w) - this.w / 2 18 | this.position.y = Math.sin(sinAngle) * (this.h ) + this.h / 2 19 | const x = this.position.x + this.w * Math.cos(Math.PI / 4) + this.w 20 | const y = this.position.y - this.h * Math.sin(Math.PI / 4) - this.h 21 | const time = this.radius / 3 22 | if (!this.firstTime) { 23 | TweenMax.to(this.position, time, { x, y, onComplete: this.setBlob.bind(this) }).progress(this.index / 10) 24 | this.firstTime = true 25 | } else { 26 | TweenMax.to(this.position, time, { x, y, onComplete: this.setBlob.bind(this) }) 27 | } 28 | } 29 | 30 | render(scale, alpha) { 31 | 32 | this.getNoiseValues(this.index * 3) 33 | //this.noiseValues = NoisePosition.noiseValues 34 | //this.ctx.clearRect(0, 0, this.w, this.h) 35 | this.ctx.save() 36 | 37 | this.ctx.translate(this.position.x, this.position.y) 38 | this.ctx.rotate(this.rotation * Math.PI / 180) 39 | this.ctx.scale(scale * .8,scale) 40 | this.ctx.translate(-this.position.x, -this.position.y) 41 | this.ctx.beginPath() 42 | this.drawShape() 43 | this.ctx.stokeStyle = 'white' 44 | this.ctx.fillStyle = 'white' 45 | this.ctx.globalAlpha = alpha 46 | this.ctx.fill() 47 | this.ctx.restore() 48 | 49 | } 50 | 51 | getNoiseValues(id) { 52 | this.noiseValues = [...NoisePosition.getValuesFrom(id)] 53 | } 54 | 55 | drawShape() { 56 | let points = [] 57 | let x = 0, y = 0, angle = 0 58 | const slice = Math.PI * 2 / this.numPoints 59 | for(let i = 0; i < this.numPoints; i++) { 60 | x = Math.cos(angle) 61 | y = Math.sin(angle) 62 | x = this.position.x + (this.radius + this.noiseValues[i].x * (this.radius / 30)) * x 63 | y = this.position.y + (this.radius + this.noiseValues[i].y * (this.radius / 30)) * y 64 | points.push({ x, y }) 65 | angle += slice 66 | } 67 | this.ctx.moveTo(points[0].x, points[0].y) 68 | this.curveThrough(points) 69 | } 70 | 71 | curveThrough(points) { 72 | var i, n, a, b, x, y 73 | for (i = 1, n = points.length - 1; i < n; i++) { 74 | a = points[i] 75 | b = points[i + 1] || points[0] 76 | x = (a.x + b.x) * 0.5 77 | y = (a.y + b.y) * 0.5 78 | this.ctx.quadraticCurveTo(a.x, a.y, x, y) 79 | } 80 | a = points[i] 81 | b = points[i + 1] || points[0] 82 | this.ctx.quadraticCurveTo(a.x, a.y, b.x, b.y) 83 | } 84 | resize(w, h){ 85 | this.w = w 86 | this.h = h 87 | } 88 | 89 | 90 | } 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | export default BlobTest 101 | -------------------------------------------------------------------------------- /assets/js/canvasBlob/Blobs.js: -------------------------------------------------------------------------------- 1 | import Blob from '~/assets/js/canvasBlob/Blob' 2 | import ResizeHelper from '~/assets/js/utils/ResizeHelper'; 3 | 4 | class Blobs { 5 | constructor(debug = false) { 6 | this.debug = debug 7 | this.alpha = 1 8 | this.scale = 1 9 | this.init() 10 | } 11 | init() { 12 | this.canvas = document.createElement('canvas'); 13 | this.ctx = this.canvas.getContext('2d') 14 | this.blobs = [] 15 | const w = ResizeHelper.width() 16 | const h = ResizeHelper.height() 17 | for (let index = 0; index < 10; index++) { 18 | const blob = new Blob(this.ctx, index) 19 | blob.resize(w, h) 20 | blob.setBlob() 21 | this.blobs.push(blob) 22 | } 23 | } 24 | show() { 25 | /*this.alpha = 0 26 | this.scale = 0*/ 27 | TweenMax.to(this, .3, { alpha: 1 }) 28 | TweenMax.to(this, 3, { scale: 1, ease: Elastic.easeOut }) 29 | } 30 | toggle() { 31 | TweenMax.to(this, 1, { scale: 1.2, ease: CustomEase.create("custom", "M0,0,C0.3,0,0.298,1.044,0.498,1.044,0.704,1.044,0.698,0,1,0")/*ease: Power4.easeIn, repeat: 1, yoyo: true, yoyoEase: Bounce.easeOut*/ }) 32 | } 33 | 34 | hide() { 35 | this.alpha = 0 36 | this.scale = 0 37 | } 38 | tick() { 39 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 40 | for (let index = 0; index < this.blobs.length; index++) { 41 | this.blobs[index].render(this.scale, this.alpha);; 42 | } 43 | } 44 | 45 | resize(w, h) { 46 | this.canvas.width = w 47 | this.canvas.height = h 48 | for (let index = 0; index < this.blobs.length; index++) { 49 | this.blobs[index].resize(w, h) 50 | } 51 | } 52 | 53 | } 54 | 55 | export default Blobs 56 | -------------------------------------------------------------------------------- /assets/js/events.js: -------------------------------------------------------------------------------- 1 | 2 | import { EventEmitter } from 'events' 3 | 4 | let emitter = new EventEmitter() 5 | emitter.setMaxListeners(50) 6 | export default emitter 7 | -------------------------------------------------------------------------------- /assets/js/facts/FactImages.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import TransitionMask from '~/assets/js/mask/Transition' 4 | 5 | 6 | class FactImages { 7 | constructor(id) { 8 | this.canvasWidth = 800 9 | this.canvasHeight = 800 10 | this.currentImage = 0 11 | this.currentFrame = 0 12 | this.id = id 13 | this.x = 0 14 | this.y = 0 15 | this.width = 0 16 | this.height = 0 17 | this.image_array = [] 18 | this.init() 19 | } 20 | 21 | init(){ 22 | this.canvas = document.createElement('canvas'); 23 | this.canvas.width = this.canvasWidth 24 | this.canvas.height = this.canvasHeight 25 | this.ctx = this.canvas.getContext('2d') 26 | this.transitionMask = new TransitionMask() 27 | } 28 | 29 | load(getter) { 30 | this.transitionMask.loadMask(getter) 31 | for (let index = 0; index < 5; index++) { 32 | const img = new Image() 33 | img.src = getter(`facts/${this.id}-${index}.jpg`) 34 | this.image_array.push(img) 35 | } 36 | } 37 | show(img) { 38 | this.currentImage = img 39 | this.isVertical = this.image_array[this.currentImage].width < this.image_array[this.currentImage].height 40 | this.transitionMask.show() 41 | } 42 | 43 | hide() { 44 | this.transitionMask.hide() 45 | } 46 | 47 | resize(w, h){ 48 | this.w = w 49 | this.h = h 50 | } 51 | 52 | tick() { 53 | if(this.transitionMask.currentFrame === this.currentFrame) return 54 | this.currentFrame = this.transitionMask.currentFrame 55 | this.x = (this.isVertical ? 160 : 0) 56 | this.y = (this.isVertical ? 0 : 160) 57 | this.width = (this.isVertical ? 480 : 800) 58 | this.height = (this.isVertical ? 800 : 480) 59 | this.ctx.save() 60 | this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight) 61 | 62 | this.ctx.drawImage(this.transitionMask.canvas, 0, 0, this.width, this.height, this.x-5, this.y-5, this.width + 10, this.height + 10); 63 | this.ctx.globalCompositeOperation = 'source-in'; 64 | this.ctx.drawImage(this.image_array[this.currentImage], 0, 0, this.width, this.height, this.x, this.y, this.width, this.height); 65 | this.ctx.globalCompositeOperation = ''; 66 | this.ctx.restore() 67 | 68 | } 69 | 70 | } 71 | 72 | export default FactImages 73 | -------------------------------------------------------------------------------- /assets/js/mask/Transition.js: -------------------------------------------------------------------------------- 1 | import Emitter from '~/assets/js/events' 2 | 3 | class TransitionMask { 4 | constructor() { 5 | this.canvasWidth = 872 6 | this.canvasHeight = 1289 7 | this.imgW = 872 / 4 8 | this.imgH = 1289 / 4 9 | this.frameW = 9 10 | this.isTweening = false 11 | this.currentFrame = -1 12 | this.currentFrameTween = 0 13 | this.direction = 'forward' 14 | this.init() 15 | } 16 | 17 | init() { 18 | this.canvas = document.createElement('canvas'); 19 | this.canvas.width = this.canvasWidth 20 | this.canvas.height = this.canvasHeight 21 | this.ctx = this.canvas.getContext('2d') 22 | } 23 | loadMask(getter) { 24 | this.img = new Image() 25 | this.img.src = getter('mask/transition.png') 26 | this.img.addEventListener('load', this.tweenUpdate.bind(this)) 27 | } 28 | show() { 29 | //if(this.isTweening)return 30 | if(this.isShow)return 31 | this.isShow = true 32 | this.isTweening = true 33 | this.currentFrameTween = 5 34 | TweenMax.to(this, 50, { useFrames: true, currentFrameTween: 35, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this), onComplete: ()=>{ 35 | this.isTweening = false 36 | } }) 37 | this.tweenUpdate() 38 | } 39 | hide() { 40 | if(!this.isShow)return 41 | TweenMax.to(this, 30, { useFrames: true, currentFrameTween: 69, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this), onComplete: ()=>{ 42 | this.currentFrameTween = 0 43 | //this.isTweening = false 44 | this.isShow = false 45 | //if(this.isHideRequested)this.hide() 46 | } }) 47 | this.tweenUpdate() 48 | } 49 | tweenUpdate() { 50 | if (this.currentFrame === Math.round(this.currentFrameTween)) return 51 | this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight) 52 | this.currentFrame = Math.round(this.currentFrameTween) 53 | const x = this.currentFrame % this.frameW * this.imgW 54 | const y = Math.floor(this.currentFrame / this.frameW) * this.imgH 55 | this.ctx.drawImage(this.img, x, y, this.imgW, this.imgH, 0, 0, this.canvasWidth, this.canvasHeight); 56 | } 57 | 58 | 59 | } 60 | 61 | export default TransitionMask 62 | -------------------------------------------------------------------------------- /assets/js/mask/_Disappear.js: -------------------------------------------------------------------------------- 1 | 2 | class DisappearMask { 3 | constructor() { 4 | this.canvasWidth = 1860 5 | this.canvasHeight = 2200 6 | this.imgW = 872 / 4 7 | this.imgH = 1289 / 4 8 | this.frameW = 5 9 | this.currentFrame = -1 10 | this.currentFrameTween = 0 11 | this.init() 12 | } 13 | 14 | init() { 15 | this.canvas = document.createElement('canvas'); 16 | this.canvas.width = this.canvasWidth 17 | this.canvas.height = this.canvasHeight 18 | this.ctx = this.canvas.getContext('2d') 19 | } 20 | loadMask(getter) { 21 | this.img = new Image() 22 | this.img.src = getter('mask/disappear.png') 23 | this.img.addEventListener('load', this.tweenUpdate.bind(this)) 24 | } 25 | disappear() { 26 | this.currentFrameTween = 0 27 | this.tweenUpdate() 28 | TweenMax.to(this, 27, { useFrames: true, currentFrameTween: 27, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 29 | } 30 | appear() { 31 | this.currentFrameTween = 27 32 | this.tweenUpdate() 33 | TweenMax.to(this, 27, { useFrames: true, currentFrameTween: 0, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 34 | } 35 | 36 | tweenUpdate() { 37 | if (this.currentFrame === Math.round(this.currentFrameTween)) return 38 | this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight) 39 | this.currentFrame = Math.round(this.currentFrameTween) 40 | const x = this.currentFrame % this.frameW * this.imgW 41 | const y = Math.floor(this.currentFrame / this.frameW) * this.imgH 42 | this.ctx.drawImage(this.img, x, y, this.imgW, this.imgH, 0, 0, this.canvasWidth, this.canvasHeight); 43 | } 44 | 45 | 46 | } 47 | 48 | export default DisappearMask 49 | -------------------------------------------------------------------------------- /assets/js/mask/_Transition.js: -------------------------------------------------------------------------------- 1 | import Emitter from '~/assets/js/events' 2 | 3 | class TransitionMask { 4 | constructor() { 5 | this.canvasWidth = 872 6 | this.canvasHeight = 1289 7 | this.imgW = 872 / 4 8 | this.imgH = 1289 / 4 9 | this.frameW = 9 10 | this.currentFrame = -1 11 | this.currentFrameTween = 0 12 | this.direction = 'forward' 13 | this.init() 14 | } 15 | 16 | init() { 17 | this.canvas = document.createElement('canvas'); 18 | this.canvas.width = this.canvasWidth 19 | this.canvas.height = this.canvasHeight 20 | this.ctx = this.canvas.getContext('2d') 21 | } 22 | loadMask(getter) { 23 | this.img = new Image() 24 | this.img.src = getter('mask/transition.png') 25 | this.img.addEventListener('load', this.tweenUpdate.bind(this)) 26 | } 27 | playIn(direction = 'forward') { 28 | this.direction = direction 29 | if(direction === 'forward'){ 30 | this.currentFrameTween = 0 31 | TweenMax.to(this, 35, { useFrames: true, currentFrameTween: 35, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 32 | }else{ 33 | this.currentFrameTween = 59 34 | TweenMax.to(this, 23, { useFrames: true, currentFrameTween: 36, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 35 | } 36 | this.tweenUpdate() 37 | } 38 | playOut(direction = 'forward') { 39 | this.direction = direction 40 | if(direction === 'forward'){ 41 | this.currentFrameTween = 36 42 | TweenMax.to(this, 23, { useFrames: true, currentFrameTween: 59, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 43 | }else{ 44 | this.currentFrameTween = 35 45 | TweenMax.to(this, 35, { useFrames: true, currentFrameTween: 0, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 46 | } 47 | this.tweenUpdate() 48 | } 49 | tweenUpdate() { 50 | if (this.currentFrame === Math.round(this.currentFrameTween)) return 51 | this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight) 52 | this.currentFrame = Math.round(this.currentFrameTween) 53 | if(this.currentFrame === 45 && this.direction === 'forward')Emitter.emit('TRANSITION:FINISHED') 54 | if(this.currentFrame === 15 && this.direction !== 'forward')Emitter.emit('TRANSITION:FINISHED') 55 | const x = this.currentFrame % this.frameW * this.imgW 56 | const y = Math.floor(this.currentFrame / this.frameW) * this.imgH 57 | this.ctx.drawImage(this.img, x, y, this.imgW, this.imgH, 0, 0, this.canvasWidth, this.canvasHeight); 58 | } 59 | 60 | 61 | } 62 | 63 | export default TransitionMask 64 | -------------------------------------------------------------------------------- /assets/js/pixi/Background.js: -------------------------------------------------------------------------------- 1 | import { $colors } from '~/assets/variables.json'; 2 | 3 | class Background { 4 | constructor(container) { 5 | this.container = container 6 | this.init() 7 | } 8 | 9 | init() { 10 | this.background = new PIXI.Graphics(); 11 | this.background.beginFill($colors['d-black']); 12 | this.background.drawRect(0, 0, 1000, 600); 13 | this.background.alpha = 0 14 | this.container.addChild(this.background) 15 | 16 | } 17 | 18 | resize(w, h) { 19 | this.background.width = w 20 | this.background.height = h 21 | } 22 | 23 | show(time = 1) { 24 | TweenMax.to(this.background, time, {alpha: 1, ease: Quad.easeInOut}) 25 | } 26 | hide() { 27 | TweenMax.to(this.background, 1, {alpha: 0, ease: Quad.easeInOut}) 28 | } 29 | } 30 | export default Background 31 | -------------------------------------------------------------------------------- /assets/js/pixi/Disappear.js: -------------------------------------------------------------------------------- 1 | 2 | class DisappearMask { 3 | constructor() { 4 | this.imgW = 1990 / 5 5 | this.imgH = 2940 / 5 6 | this.frameW = 5 7 | this.currentFrame = -1 8 | this.currentFrameTween = 0 9 | this.direction = 'forward' 10 | this.divider = 1 11 | if(process.browser) { 12 | if(window.resolution === .5) this.divider = 2 13 | } 14 | } 15 | 16 | 17 | setTexture(base) { 18 | this.sprite = new PIXI.Sprite(new PIXI.Texture.from(base)) 19 | this.sprite.interactive = false 20 | } 21 | 22 | disappear() { 23 | this.currentFrameTween = 0 24 | this.tweenUpdate() 25 | 26 | let divider = 1 27 | if(process.browser) { 28 | if(window.resolution === .5) divider = 2 29 | } 30 | TweenMax.to(this, 24 / divider, { useFrames: true, currentFrameTween: 24, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 31 | } 32 | appear() { 33 | this.currentFrameTween = 24 34 | this.tweenUpdate() 35 | 36 | let divider = 1 37 | if(process.browser) { 38 | if(window.resolution === .5) divider = 2 39 | } 40 | TweenMax.to(this, 24 / divider, { useFrames: true, currentFrameTween: 0, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 41 | } 42 | 43 | tweenUpdate() { 44 | if (this.currentFrame === Math.round(this.currentFrameTween)) return 45 | this.currentFrame = Math.round(this.currentFrameTween) 46 | const x = this.currentFrame % this.frameW * this.imgW 47 | const y = Math.floor(this.currentFrame / this.frameW) * this.imgH 48 | const rect = new PIXI.Rectangle(x / this.divider , y / this.divider, this.imgW / this.divider, this.imgH / this.divider); 49 | // console.log(croped); 50 | this.sprite.texture.frame = rect; 51 | //this.ctx.drawImage(this.img, x, y, this.imgW, this.imgH, 0, 0, this.canvasWidth, this.canvasHeight); 52 | } 53 | 54 | 55 | } 56 | 57 | export default DisappearMask 58 | -------------------------------------------------------------------------------- /assets/js/pixi/Displacement.js: -------------------------------------------------------------------------------- 1 | 2 | class Displacement { 3 | constructor() { 4 | this.time = 0 5 | this.amplitude = 80 6 | this.speed = .11 7 | this.width = 500 8 | this.height = 500 9 | } 10 | 11 | load(getter, renderer) { 12 | PIXI.Texture.addToCache(getter('displacement.jpg')) 13 | this.baseTexture = new PIXI.BaseTexture.fromImage(getter('displacement.jpg')) 14 | this.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; 15 | this.baseTexture.width = 2000 16 | this.baseTexture.height = 2000 17 | 18 | this.texture = new PIXI.Texture(this.baseTexture) 19 | renderer.textureManager.updateTexture(this.texture); 20 | 21 | this.sprite = new PIXI.Sprite(this.texture) 22 | this.sprite.width = 2000 23 | this.sprite.height = 2000 24 | this.sprite.name = 'displacement' 25 | } 26 | 27 | tick() { 28 | this.time += this.speed 29 | const x = this.amplitude + Math.sin(this.time * this.speed) * this.amplitude 30 | const y = this.amplitude + Math.cos(this.time * this.speed) * this.amplitude 31 | const rect = new PIXI.Rectangle(x, y, x + 320, y + 320); 32 | this.texture.frame = rect; 33 | } 34 | 35 | resize(w, h) { 36 | this.sprite.width = 2000 37 | this.sprite.height = 2000 38 | } 39 | 40 | 41 | } 42 | 43 | export default Displacement 44 | -------------------------------------------------------------------------------- /assets/js/pixi/PixiBlobs.js: -------------------------------------------------------------------------------- 1 | 2 | import 'gsap/ColorPropsPlugin'; 3 | import ResizeHelper from '~/assets/js/utils/ResizeHelper' 4 | import Blobs from '~/assets/js/pixi/blobs/Blobs' 5 | import Displacement from '~/assets/js/pixi/Displacement' 6 | 7 | class PixiBlobs { 8 | constructor(stage, titleBorderSprite, titleAboutBorderSprite, renderer, getter, isMobile = false) { 9 | this.stage = stage 10 | this.mask = 'index' 11 | this.titleBorderSprite = titleBorderSprite 12 | this.titleAboutBorderSprite = titleAboutBorderSprite 13 | this.color = 0 14 | this.renderer = renderer 15 | this.blobs = new Blobs(isMobile) 16 | this.setDisplacement(getter) 17 | let divider = 1 18 | if(process.browser) { 19 | if(window.resolution === .5) divider = 2 20 | } 21 | this.renderTexture = new PIXI.RenderTexture.create(ResizeHelper.width()/divider, ResizeHelper.height()/divider, PIXI.SCALE_MODES.LINEAR, 2); 22 | this.renderDispTexture = new PIXI.RenderTexture.create(ResizeHelper.width()/divider, ResizeHelper.height()/divider, PIXI.SCALE_MODES.LINEAR, 2); 23 | 24 | this.init() 25 | } 26 | 27 | setDisplacement(getter){ 28 | this.displacement = new Displacement() 29 | this.displacement.load(getter, this.renderer) 30 | this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacement.sprite); 31 | this.displacementFilter.scale.x = 42 32 | this.displacementFilter.scale.y = 42 33 | this.stage.addChild(this.displacement.sprite) 34 | this.titleBorderSprite.filters = [this.displacementFilter]; 35 | } 36 | 37 | init() { 38 | this.blobContainer = new PIXI.Container() 39 | this.blobSprite = new PIXI.Sprite(this.renderTexture) 40 | this.blobSprite.name ='blobSprite' 41 | this.maskSprite = new PIXI.Sprite(this.renderTexture) 42 | this.maskSprite.name ='maskSprite' 43 | this.dispSprite = new PIXI.Sprite(this.renderDispTexture) 44 | this.stage.addChild(this.blobSprite) 45 | this.stage.addChild(this.dispSprite) 46 | this.dispSprite.mask = this.maskSprite 47 | } 48 | load(getter) { 49 | this.blobs.load(getter) 50 | } 51 | tick() { 52 | this.blobs.tick() 53 | this.displacement.tick() 54 | if(this.mask === 'about') { 55 | this.renderer.render(this.titleAboutBorderSprite, this.renderDispTexture) 56 | this.titleBorderSprite.filters = [] 57 | this.titleAboutBorderSprite.filters = [this.displacementFilter]; 58 | }else{ 59 | this.renderer.render(this.titleBorderSprite, this.renderDispTexture) 60 | this.titleBorderSprite.filters = [this.displacementFilter]; 61 | this.titleAboutBorderSprite.filters = [] 62 | } 63 | this.renderer.render(this.blobs.sprite, this.renderTexture) 64 | } 65 | 66 | show() { 67 | this.blobs.show() 68 | } 69 | showMouse() { 70 | this.blobs.showMouse() 71 | } 72 | hideMouse() { 73 | this.blobs.hideMouse() 74 | } 75 | hide() { 76 | this.blobs.hide() 77 | } 78 | scale(scale) { 79 | this.blobs.scaleTo(scale) 80 | } 81 | resize(w, h, shapeW = 0) { 82 | this.displacement.resize(w, h) 83 | this.renderTexture.resize(w, h) 84 | this.renderDispTexture.resize(w, h) 85 | this.blobs.resize && this.blobs.resize(w, h, shapeW) 86 | } 87 | setTint(color) { 88 | if(this.color && this.color === color) return 89 | this.blobs.toggle && this.blobs.toggle() 90 | this.color = color 91 | TweenMax.to(this.blobSprite, 2, { colorProps: { tint: color, format: "number" } }) 92 | } 93 | 94 | } 95 | 96 | export default PixiBlobs 97 | -------------------------------------------------------------------------------- /assets/js/pixi/Portraits.js: -------------------------------------------------------------------------------- 1 | 2 | import Portrait from "~/assets/js/pixi/Portrait" 3 | import { pages } from '~/assets/data.json' 4 | 5 | 6 | class Portraits { 7 | constructor(stage) { 8 | this.stage = stage 9 | this.portraits = [] 10 | this.init() 11 | } 12 | 13 | init() { 14 | this.setupPortrait() 15 | 16 | } 17 | 18 | setupPortrait() { 19 | this.portraitsprite = new PIXI.Sprite() 20 | this.portraitsprite.name = 'portraitsprite' 21 | pages.forEach((page, i) => { 22 | const portraitContainer = new PIXI.Container() 23 | portraitContainer.name = 'portraitContainer' 24 | const portrait = new Portrait(portraitContainer, page.id, i, page.color) 25 | this.portraitsprite.addChild(portraitContainer) 26 | this.portraits.push(portrait) 27 | }); 28 | this.stage.addChild(this.portraitsprite) 29 | } 30 | 31 | load(getter, renderer) { 32 | this.baseLoaded = false 33 | this.maskLoaded = false 34 | this.transitionLoaded = false 35 | this.disappearLoaded = false 36 | 37 | let urlResolution = '' 38 | if(process.browser) { 39 | if(window.resolution === .5) urlResolution = '@0.5x' 40 | } 41 | this.renderer = renderer 42 | this.baseText = new PIXI.BaseTexture.fromImage(getter('bust/busts'+ urlResolution +'.jpg')) 43 | this.baseMaskText = new PIXI.BaseTexture.fromImage(getter('bust/mask'+ urlResolution +'.png')) 44 | this.transitionText = new PIXI.BaseTexture.fromImage(getter('mask/transition'+ urlResolution +'.png')) 45 | this.disappearText = new PIXI.BaseTexture.fromImage(getter('mask/disappear'+ urlResolution +'.png')) 46 | renderer.textureManager.updateTexture(this.baseText); 47 | renderer.textureManager.updateTexture(this.baseMaskText); 48 | renderer.textureManager.updateTexture(this.transitionText); 49 | renderer.textureManager.updateTexture(this.disappearText); 50 | this._onBaseLoaded = this.onBaseLoaded.bind(this) 51 | this._onMaskLoaded = this.onMaskLoaded.bind(this) 52 | this._onTransitionLoaded = this.onTransitionLoaded.bind(this) 53 | this._onDisappearLoaded = this.onDisappearLoaded.bind(this) 54 | this.baseText.on('loaded', this._onBaseLoaded) 55 | this.baseMaskText.on('loaded', this._onMaskLoaded) 56 | this.transitionText.on('loaded', this._onTransitionLoaded) 57 | this.disappearText.on('loaded', this._onDisappearLoaded) 58 | } 59 | onBaseLoaded() { 60 | this.baseLoaded = true 61 | this.onLoaded() 62 | } 63 | onMaskLoaded() { 64 | this.maskLoaded = true 65 | this.onLoaded() 66 | } 67 | onTransitionLoaded() { 68 | this.transitionLoaded = true 69 | this.onLoaded() 70 | } 71 | onDisappearLoaded() { 72 | this.disappearLoaded = true 73 | this.onLoaded() 74 | } 75 | onLoaded() { 76 | if(!this.baseLoaded) return 77 | if(!this.maskLoaded) return 78 | if(!this.transitionLoaded) return 79 | if(!this.disappearLoaded) return 80 | this.baseText.off('loaded', this._onBaseLoaded) 81 | this.baseMaskText.off('loaded', this._onMaskLoaded) 82 | this.transitionText.off('loaded', this._onTransitionLoaded) 83 | this.disappearText.off('loaded', this._onDisappearLoaded) 84 | this.portraits.forEach(el => { 85 | el.setTexture(this.baseText,this.baseMaskText, this.transitionText, this.disappearText, this.renderer) 86 | }) 87 | } 88 | doReady(){ 89 | this.portraits.forEach(el => { 90 | el.hideAll() 91 | }) 92 | } 93 | resize(w, h) { 94 | this.portraits.forEach(el => { 95 | el.resize(w, h) 96 | }) 97 | } 98 | 99 | hide(id, direction = 'forward') { 100 | this.portraits[id].hide(direction) 101 | } 102 | 103 | show(id, direction = 'forward') { 104 | this.portraits[id].show(direction); 105 | } 106 | 107 | disappear(id) { 108 | this.portraits[id].disappear(); 109 | } 110 | appear(id) { 111 | this.portraits[id].appear(); 112 | } 113 | 114 | } 115 | export default Portraits 116 | -------------------------------------------------------------------------------- /assets/js/pixi/TitleAbout.js: -------------------------------------------------------------------------------- 1 | 2 | class TitleAbout { 3 | constructor(container, idNum, isBordered, pos) { 4 | this.x = pos.x 5 | this.y = pos.y 6 | this.container = container 7 | this.idNum = idNum 8 | this.isBordered = isBordered 9 | } 10 | 11 | setTexture(baseTexture, pos) { 12 | this.pos = pos 13 | let divider = 1 14 | if(process.browser) { 15 | if(window.resolution === .5) divider = 2 16 | } 17 | const texture = new PIXI.Texture.from(baseTexture) 18 | texture.frame = new PIXI.Rectangle(this.pos.x / divider, this.pos.y / divider, this.pos.w / divider, this.pos.h / divider) 19 | this.titleImg = new PIXI.Sprite(texture) 20 | this.posTitle = new PIXI.Sprite() 21 | this.posTitle.addChild(this.titleImg) 22 | this.container.addChild(this.posTitle) 23 | if(this.isBordered) this.container.alpha = .35 24 | } 25 | 26 | resize(w, h) { 27 | this.w = w 28 | this.h = h 29 | this.screenRatioH = w / (2880) 30 | this.screenRatioV = h / (1760) 31 | this.titleImg.width = this.pos.w * this.screenRatioH * 2 32 | this.titleImg.height = this.pos.h * this.screenRatioH * 2 33 | this.posTitle.position.x = this.x * this.screenRatioH 34 | this.posTitle.position.y = this.y * this.screenRatioV 35 | } 36 | 37 | show(delay) { 38 | const from = this.idNum < 2 ? -100 * this.w / (2880) : 100 * this.w / (2880) 39 | TweenMax.fromTo(this.titleImg, 1, {alpha: 0}, {delay, alpha: 1, ease: Quart.easeOut}) 40 | TweenMax.fromTo(this.titleImg.position, 1, {x: from * this.screenRatioH }, {delay, x: 0, ease: Quart.easeOut }) 41 | } 42 | 43 | hide() { 44 | const from = this.idNum < 2 ? 100 * this.w / (2880) : -100 * this.w / (2880) 45 | TweenMax.to(this.titleImg, 1, { alpha: 1, ease: Power4.easeIn}) 46 | TweenMax.to(this.titleImg.position, 1, {x: this.x * this.screenRatioH, ease: Power4.easeIn }) 47 | } 48 | } 49 | export default TitleAbout 50 | -------------------------------------------------------------------------------- /assets/js/pixi/TitleMobile.js: -------------------------------------------------------------------------------- 1 | import ResizeHelper from '../utils/ResizeHelper'; 2 | import { pages } from '~/assets/data.json' 3 | import CustomEase from "gsap/CustomEase"; 4 | 5 | class TitleMobile { 6 | constructor(container, isBordered) { 7 | this.container = container 8 | this.isBordered = isBordered 9 | if(!this.isBordered)this.container.tint = 0xf1f3ee 10 | } 11 | 12 | setTexture(baseTexture) { 13 | this.title = new PIXI.Sprite(new PIXI.Texture.from(baseTexture)) 14 | this.container.addChild(this.title) 15 | this.title.anchor.set(.5, .5) 16 | this.originalW = this.container.width 17 | this.originalH = this.container.height 18 | this.resize(this.w, this.h) 19 | } 20 | 21 | 22 | resize(w, h) { 23 | this.w = w 24 | this.h = h 25 | if(!this.title) return 26 | const ratio = this.originalW / this.originalH 27 | if(this.isBordered) { 28 | this.title.width = w / 2 29 | this.title.height = w / 2 / ratio 30 | }else{ 31 | this.title.width = w / 2 32 | this.title.height = w / 2 / ratio 33 | 34 | } 35 | this.container.position.x = w / 2 36 | this.container.position.y = h / 2 - this.title.height * .5 37 | } 38 | 39 | 40 | } 41 | export default TitleMobile 42 | -------------------------------------------------------------------------------- /assets/js/pixi/TitlesAbout.js: -------------------------------------------------------------------------------- 1 | 2 | import TitleAbout from '~/assets/js/pixi/TitleAbout' 3 | 4 | 5 | class TitlesAbout { 6 | constructor(stage) { 7 | this.stage = stage 8 | this.titles = [] 9 | this.titlesBorder = [] 10 | this.isShown = false 11 | this.init() 12 | } 13 | 14 | init() { 15 | this.position_array = [ 16 | {x: 1600, y: 390}, 17 | {x: 1600, y: 710}, 18 | {x: 135, y: 1220}, 19 | {x: 135, y: 1540} 20 | ] 21 | this.setupTitle() 22 | this.setupTitleBorder() 23 | } 24 | 25 | setupTitle() { 26 | this.titleSprite = new PIXI.Sprite() 27 | this.titleSprite.interactive = false 28 | this.titleSprite.buttonMode = false 29 | for (let index = 0; index < 4; index++) { 30 | const titleContainer = new PIXI.Container() 31 | const title = new TitleAbout(titleContainer, index, false, this.position_array[index]) 32 | this.titleSprite.addChild(titleContainer) 33 | this.titles.push(title) 34 | } 35 | this.stage.addChild(this.titleSprite) 36 | } 37 | 38 | setupTitleBorder() { 39 | this.titleBorderSprite = new PIXI.Container() 40 | this.titleBorderSprite.name = 'titleBorderContainer' 41 | 42 | for (let index = 0; index < 4; index++) { 43 | const titleContainer = new PIXI.Container() 44 | const title = new TitleAbout(titleContainer, index, true, this.position_array[index]) 45 | this.titleBorderSprite.addChild(titleContainer) 46 | this.titlesBorder.push(title) 47 | } 48 | } 49 | 50 | load(getter, renderer) { 51 | this.titleLoaded = false 52 | this.titleBorderLoaded = false 53 | 54 | let urlResolution = '' 55 | if(process.browser) { 56 | if(window.resolution === .5) urlResolution = '@0.5x' 57 | } 58 | this.baseText = new PIXI.BaseTexture.fromImage(getter('titles/titles'+ urlResolution +'.png')) 59 | this.baseBorderText = new PIXI.BaseTexture.fromImage(getter('titles/titles-border'+ urlResolution +'.png')) 60 | renderer.textureManager.updateTexture(this.baseText); 61 | renderer.textureManager.updateTexture(this.baseBorderText); 62 | this._onBaseLoaded = this.onBaseLoaded.bind(this) 63 | this._onBaseBorderLoaded = this.onBaseBorderLoaded.bind(this) 64 | this.baseText.on('loaded', this._onBaseLoaded) 65 | this.baseBorderText.on('loaded', this._onBaseBorderLoaded) 66 | } 67 | 68 | onBaseLoaded() { 69 | this.titleLoaded = true 70 | this.onLoaded() 71 | } 72 | 73 | onBaseBorderLoaded() { 74 | this.titleBorderLoaded = true 75 | this.onLoaded() 76 | } 77 | 78 | onLoaded() { 79 | if(!this.titleLoaded) return 80 | if(!this.titleBorderLoaded) return 81 | this.baseText.off('loaded', this._onBaseLoaded) 82 | this.baseBorderText.off('loaded', this._onBaseBorderLoaded) 83 | 84 | const pos_array = [ 85 | [ 86 | {x: 1200, y: 900, w: 418, h:113}, 87 | {x: 1625, y: 900, w: 733, h:143}, 88 | {x: 1680, y: 1100, w: 493, h:137}, 89 | {x: 1200, y: 1100, w: 456, h:135} 90 | ], 91 | [ 92 | {x: 1100, y: 1150, w: 418, h:113}, 93 | {x: 1600, y: 1150, w: 733, h:142}, 94 | {x: 1600, y: 1300, w: 493, h:137}, 95 | {x: 1100, y: 1300, w: 456, h:135} 96 | ] 97 | ] 98 | 99 | for (let index = 0; index < 4; index++) { 100 | this.titles[index].setTexture(this.baseText, pos_array[0][index]) 101 | this.titlesBorder[index].setTexture(this.baseBorderText, pos_array[1][index]) 102 | } 103 | } 104 | 105 | resize(w, h) { 106 | for (let index = 0; index < 4; index++) { 107 | this.titlesBorder[index].resize(w, h) 108 | this.titles[index].resize(w, h) 109 | } 110 | } 111 | show(delay) { 112 | if(this.isShown) return 113 | this.isShown = true 114 | for (let index = 0; index < 4; index++) { 115 | this.titles[index].show(delay + (index % 2) * .3) 116 | this.titlesBorder[index].show(delay + (index % 2) * .3) 117 | } 118 | } 119 | 120 | hide() { 121 | if(!this.isShown) return 122 | this.isShown = false 123 | for (let index = 0; index < 4; index++) { 124 | this.titles[index].hide() 125 | this.titlesBorder[index].hide() 126 | } 127 | } 128 | 129 | 130 | } 131 | export default TitlesAbout 132 | -------------------------------------------------------------------------------- /assets/js/pixi/TitlesMobile.js: -------------------------------------------------------------------------------- 1 | 2 | import Title from '~/assets/js/pixi/TitleMobile' 3 | 4 | 5 | class TitlesMobile { 6 | constructor(stage) { 7 | this.stage = stage 8 | this.init() 9 | } 10 | 11 | init() { 12 | this.setupTitle() 13 | this.setupTitleBorder() 14 | } 15 | 16 | setupTitle() { 17 | this.titleSprite = new PIXI.Sprite() 18 | this.titleSprite.interactive = false 19 | 20 | const titleContainer = new PIXI.Container() 21 | this.title = new Title(titleContainer, false) 22 | this.titleSprite.addChild(titleContainer) 23 | this.stage.addChild(this.titleSprite) 24 | } 25 | 26 | setupTitleBorder() { 27 | this.titleBorderSprite = new PIXI.Container() 28 | this.titleBorderSprite.name = 'titleBorderContainer' 29 | const titleBorderContainer = new PIXI.Container() 30 | this.titleBorder = new Title(titleBorderContainer, true) 31 | this.titleBorderSprite.addChild(titleBorderContainer) 32 | this.titleBorderAboutSprite = new PIXI.Container() 33 | this.titleBorderAboutSprite.name = 'titleBorderContainer' 34 | const titleBorderAboutContainer = new PIXI.Container() 35 | this.titleBorderAbout = new Title(titleBorderContainer, true) 36 | this.titleBorderAboutSprite.addChild(titleBorderAboutContainer) 37 | } 38 | 39 | load(getter) { 40 | this.titleLoaded = false 41 | this.titleBorderLoaded = false 42 | 43 | 44 | this.baseText = new PIXI.BaseTexture.fromImage(getter('title-mobile.png')) 45 | this.baseBorderText = new PIXI.BaseTexture.fromImage(getter('title-mobile-border.png')) 46 | this._onBaseLoaded = this.onBaseLoaded.bind(this) 47 | this._onBaseBorderLoaded = this.onBaseBorderLoaded.bind(this) 48 | this.baseText.on('loaded', this._onBaseLoaded) 49 | this.baseBorderText.on('loaded', this._onBaseBorderLoaded) 50 | } 51 | 52 | onBaseLoaded() { 53 | this.titleLoaded = true 54 | this.onLoaded() 55 | } 56 | 57 | onBaseBorderLoaded() { 58 | this.titleBorderLoaded = true 59 | this.onLoaded() 60 | } 61 | 62 | onLoaded() { 63 | if(!this.titleLoaded) return 64 | if(!this.titleBorderLoaded) return 65 | this.baseText.off('loaded', this._onBaseLoaded) 66 | this.baseBorderText.off('loaded', this._onBaseBorderLoaded) 67 | this.title.setTexture(this.baseText) 68 | this.titleBorder.setTexture(this.baseBorderText) 69 | this.titleBorderAbout.setTexture(this.baseBorderText) 70 | } 71 | 72 | 73 | resize(w, h) { 74 | this.title.resize(w, h) 75 | this.titleBorder.resize(w, h) 76 | this.titleBorderAbout.resize(w, h) 77 | } 78 | 79 | 80 | 81 | 82 | 83 | 84 | } 85 | export default TitlesMobile 86 | -------------------------------------------------------------------------------- /assets/js/pixi/Transition.js: -------------------------------------------------------------------------------- 1 | import Emitter from '~/assets/js/events' 2 | 3 | class TransitionMask { 4 | constructor() { 5 | this.imgW = 1962 / 9 6 | this.imgH = 2578 / 8 7 | this.frameW = 9 8 | this.currentFrame = -1 9 | this.currentFrameTween = 0 10 | this.direction = 'forward' 11 | 12 | this.divider = 1 13 | if(process.browser) { 14 | if(window.resolution === .5) this.divider = 2 15 | } 16 | } 17 | 18 | setTexture(base) { 19 | this.sprite = new PIXI.Sprite(new PIXI.Texture.from(base)) 20 | this.sprite.interactive = false 21 | } 22 | playIn(direction = 'forward') { 23 | this.direction = direction 24 | 25 | let divider = 1 26 | if(process.browser) { 27 | if(window.resolution === .5) divider = 2 28 | } 29 | if(direction === 'forward'){ 30 | this.currentFrameTween = 0 31 | TweenMax.to(this, 35 / divider, { useFrames: true, currentFrameTween: 35, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 32 | }else{ 33 | this.currentFrameTween = 59 34 | TweenMax.to(this, 23 / divider, { useFrames: true, currentFrameTween: 36, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 35 | } 36 | this.tweenUpdate() 37 | } 38 | playOut(direction = 'forward') { 39 | 40 | let divider = 1 41 | if(process.browser) { 42 | if(window.resolution === .5) divider = 2 43 | } 44 | this.direction = direction 45 | if(direction === 'forward'){ 46 | this.currentFrameTween = 36 47 | TweenMax.to(this, 28 / divider, { useFrames: true, currentFrameTween: 64, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 48 | }else{ 49 | this.currentFrameTween = 35 50 | TweenMax.to(this, 35 / divider, { useFrames: true, currentFrameTween: 0, ease: Linear.easeInOut, onUpdate: this.tweenUpdate.bind(this) }).timeScale(.5) 51 | } 52 | this.tweenUpdate() 53 | } 54 | tweenUpdate() { 55 | if (this.currentFrame === Math.round(this.currentFrameTween)) return 56 | this.currentFrame = Math.round(this.currentFrameTween) 57 | if(this.currentFrame === 45 && this.direction === 'forward')Emitter.emit('TRANSITION:FINISHED') 58 | if(this.currentFrame === 15 && this.direction !== 'forward')Emitter.emit('TRANSITION:FINISHED') 59 | const x = this.currentFrame % this.frameW * this.imgW 60 | const y = Math.floor(this.currentFrame / this.frameW) * this.imgH 61 | const rect = new PIXI.Rectangle(x / this.divider , y / this.divider, this.imgW / this.divider, this.imgH / this.divider); 62 | 63 | this.sprite.texture.frame = rect; 64 | //this.ctx.drawImage(this.img, x, y, this.imgW, this.imgH, 0, 0, this.canvasWidth, this.canvasHeight); 65 | } 66 | 67 | 68 | } 69 | 70 | export default TransitionMask 71 | -------------------------------------------------------------------------------- /assets/js/pixi/blobs/Blob.js: -------------------------------------------------------------------------------- 1 | import BlobPoint from '~/assets/js/pixi/blobs/BlobPoint' 2 | import MouseHelper from '~/assets/js/utils/MouseHelper' 3 | class Blob { 4 | constructor(index, isMobile) { 5 | this.blobGraph = new PIXI.Sprite(); 6 | this.blobHead = new PIXI.Graphics(); 7 | this.blobBottom = new PIXI.Graphics(); 8 | this.blobHeadDisplace = new PIXI.Graphics(); 9 | this.blobGraph.addChild(this.blobHead); 10 | this.blobGraph.addChild(this.blobHeadDisplace); 11 | this.blobGraph.addChild(this.blobBottom); 12 | this.isMobile = isMobile 13 | this.distanceRatio = 0 14 | this.index = index 15 | this.color = 'red' 16 | this.numPoints = 4 + Math.floor(Math.random() * 5) 17 | this.originalRadius = this.radius = 70 + Math.floor(Math.random() * 100) 18 | this.position = { x: 0, y: 0 } 19 | this.hover = false 20 | this.oldMousePoint = { x: 0, y: 0 } 21 | this.tickInt = 0 22 | } 23 | 24 | resize(w, h){ 25 | this.w = w 26 | this.h = h 27 | if(this.angle) this.setPos() 28 | } 29 | setPos() { 30 | this.startX = Math.cos(this.angle) * ((Math.max(this.h, this.w)) + (this.radius * 1.2)) 31 | this.startY = Math.sin(this.angle) * ((Math.max(this.h, this.w)) + (this.radius * 1.2)) 32 | this.endX = Math.cos(this.angleEnd) * ((Math.max(this.h, this.w)) + (this.radius * 1.2)) 33 | this.endY = Math.sin(this.angleEnd) * ((Math.max(this.h, this.w)) + (this.radius * 1.2)) 34 | } 35 | setBlob(setDelay = false) { 36 | TweenMax.killTweensOf(this) 37 | this.numPoints = 5 + Math.floor(Math.random() * 9) 38 | this.radius = 20 + this.numPoints * 10 39 | 40 | const random = Math.random() 41 | this.rotation = ((Math.PI / 8) - (Math.random() * Math.PI / 4)) 42 | this.angle = random * Math.PI / 4 + Math.PI / 2 + Math.PI / 4 43 | this.angleEnd = (1 - random) * Math.PI / 4 - Math.PI / 2 + Math.PI / 4 + this.rotation 44 | this.blobGraph.rotation = Math.PI / 4 + this.rotation 45 | this.setPos() 46 | this.blobBottom.clear() 47 | this.blobBottom.moveTo(0, 0) 48 | this.blobBottom.scale.x = .8 49 | this.blobBottom.scale.y = .75 50 | this.blobBottom.position.y = this.radius * .4 51 | this.blobBottom.position.x = 0 52 | this.blobBottom.beginFill(0xccffff) 53 | this.blobBottom.drawCircle(0, 0, this.radius) 54 | this.blobBottom.endFill(); 55 | this.blobBottom.rotation = Math.random() * Math.PI 56 | 57 | 58 | 59 | this.blobHead.clear() 60 | this.blobHead.moveTo(0, 0) 61 | this.blobHead.beginFill(0xcc0000) 62 | this.blobHead.drawCircle(0, 0, this.radius) 63 | this.blobHead.endFill(); 64 | 65 | this.blobHeadDisplace.clear() 66 | this.blobHeadDisplace.moveTo(0, 0) 67 | this.blobHeadDisplace.scale.x = 1 68 | this.blobHeadDisplace.scale.y = 1.05 69 | this.blobHeadDisplace.position.y = this.radius * .1 70 | this.blobHeadDisplace.beginFill(0xccffcc) 71 | this.blobHeadDisplace.drawCircle(0, 0, this.radius) 72 | this.blobHeadDisplace.endFill(); 73 | this.blobHeadDisplace.rotation = Math.random() * Math.PI 74 | 75 | const time = (this.radius + (this.radius * Math.random() * .2)) / 6 * this.w / 1440 76 | const delay = this.index 77 | this.ratio = 0 78 | 79 | this.blobHead.cacheAsBitmap = true 80 | this.blobBottom.cacheAsBitmap = true 81 | this.blobHeadDisplace.cacheAsBitmap = true 82 | TweenMax.to(this, time, {delay, ratio: 1, onComplete: this.setBlob.bind(this), overwrite: 1, ease: Linear.easeInOut, onUpdate: this.checkBlobPos.bind(this) }) 83 | } 84 | 85 | checkBlobPos() { 86 | if(this.position.x > this.w + this.radius + 50 || this.position.y < -(this.radius + 50) )this.setBlob() 87 | } 88 | 89 | 90 | 91 | lerp(v0, v1, t) { 92 | return (1 - t) * v0 + t * v1; 93 | } 94 | 95 | 96 | kill() { 97 | 98 | } 99 | tick(scale, alpha) { 100 | this.blobGraph.alpha = alpha 101 | this.blobGraph.position.x = this.lerp((this.w * .5) + this.startX, (this.w * .5) + this.endX, this.ratio) 102 | this.blobGraph.position.y = this.lerp((this.h * .5) + this.startY, (this.h * .5) + this.endY, this.ratio) 103 | 104 | this.blobBottom.rotation += this.ratio * Math.PI / 180 * 3 105 | this.blobHeadDisplace.rotation += (this.ratio) * Math.PI / 180 * 3 106 | this.blobGraph.scale.x = scale * .9 107 | this.blobGraph.scale.y = scale 108 | 109 | 110 | } 111 | 112 | } 113 | 114 | export default Blob 115 | -------------------------------------------------------------------------------- /assets/js/pixi/blobs/BlobPoint.js: -------------------------------------------------------------------------------- 1 | export default class BlobPoint { 2 | constructor(angle, parent, id, elasticity, friction) { 3 | this.id = id 4 | this.parent = parent; 5 | this.angle = Math.PI - angle 6 | this.elasticity = elasticity 7 | this.velocity = 0 8 | this.spring = 0 9 | this.friction = friction 10 | this.color = 'black' 11 | this.point = { 12 | x: Math.cos(this.angle), 13 | y: Math.sin(this.angle) 14 | } 15 | 16 | this.acceleration = -5 + Math.random() * 10; 17 | this.tick() 18 | } 19 | 20 | calcSpring(leftPoint, rightPoint) { 21 | this.acceleration = ((-5 * this.spring) + (leftPoint.spring - this.spring) + (rightPoint.spring - this.spring)) * this.elasticity - this.velocity * this.friction 22 | if (Math.abs(this.spring) < 1) this.acceleration = -.5 + Math.random() 23 | this.tick() 24 | } 25 | 26 | tick() { 27 | this.velocity += this.acceleration; 28 | this.spring += this.velocity; 29 | this.position = { 30 | x: this.point.x * (this.parent.radius + this.spring), 31 | y: this.point.y * (this.parent.radius + this.spring) 32 | } 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /assets/js/pixi/blobs/Blobs.js: -------------------------------------------------------------------------------- 1 | import Blob from '~/assets/js/pixi/blobs/Blob' 2 | import ResizeHelper from '~/assets/js/utils/ResizeHelper'; 3 | import MouseBlob from '~/assets/js/pixi/blobs/MouseBlob' 4 | class Blobs { 5 | constructor(isMobile) { 6 | this.sprite = new PIXI.Sprite() 7 | this.sprite.name = 'blobs' 8 | this.alpha = 0 9 | this.scale = 0 10 | this.actualScale = isMobile ? .6 : 1 11 | this.init(isMobile) 12 | } 13 | init(isMobile) { 14 | this.mouseBlob = new MouseBlob() 15 | this.sprite.addChild(this.mouseBlob.sprite) 16 | this.blobs = [] 17 | const w = ResizeHelper.width() 18 | const h = ResizeHelper.height() 19 | const max = isMobile ? 10 : 12 20 | for (let index = 0; index < max; index++) { 21 | const blob = new Blob(index,isMobile) 22 | //blob.resize(w, h) 23 | this.sprite.addChild(blob.blobGraph) 24 | this.blobs.push(blob) 25 | } 26 | 27 | var blurFilter = new PIXI.filters.BlurFilter(); 28 | blurFilter.blur = 10; 29 | var fragSrc = [ 30 | 'precision mediump float;', 31 | 'varying vec2 vTextureCoord;', 32 | 'uniform sampler2D uSampler;', 33 | 'uniform float threshold;', 34 | 'void main(void)', 35 | '{', 36 | ' vec4 color = texture2D(uSampler, vTextureCoord);', 37 | ' vec3 mcolor = vec3(255.0, 255.0, 255.0);', 38 | ' if (color.a > threshold) {', 39 | ' gl_FragColor = vec4(mcolor, 1.0);', 40 | ' } else {', 41 | ' gl_FragColor = vec4(vec3(0.0), 0.0);', 42 | ' }', 43 | '}' 44 | ].join('\n') 45 | const filter = new PIXI.Filter( null, fragSrc ); 46 | filter.apply = function(filterManager, input, output) { 47 | this.uniforms.threshold = .5 48 | filterManager.applyFilter(this, input, output); 49 | } 50 | this.sprite.filters = [blurFilter, filter]; 51 | } 52 | load(getter) { 53 | for (let index = 0; index < this.blobs.length; index++) { 54 | this.blobs[index].load(getter); 55 | } 56 | } 57 | showMouse() { 58 | this.mouseBlob.show() 59 | } 60 | hideMouse() { 61 | this.mouseBlob.hide() 62 | } 63 | show() { 64 | if(this.isShown) return 65 | this.isShown = true 66 | for (let index = 0; index < this.blobs.length; index++) { 67 | this.blobs[index].setBlob(true); 68 | } 69 | this.resize(this.w, this.h, this.shapeW) 70 | this.scale = this.actualScale 71 | this.alpha = 1 72 | //TweenMax.to(this, .3, { alpha: 1 }) 73 | //TweenMax.to(this, 3, { scale: this.actualScale, ease: Power4.easeOut }) 74 | } 75 | toggle() { 76 | if(!this.isShown) return 77 | TweenMax.to(this, 1, { scale: this.actualScale * 1.2, ease: CustomEase.create("custom", "M0,0,C0.3,0,0.298,1.044,0.498,1.044,0.704,1.044,0.698,0,1,0")/*ease: Power4.easeIn, repeat: 1, yoyo: true, yoyoEase: Bounce.easeOut*/ }) 78 | } 79 | scaleTo(scale) { 80 | if(this.isShown) return 81 | this.actualScale = scale 82 | let delay = .5 83 | let time = 1 84 | if(scale === 1) { 85 | delay = .5 86 | time = 1 87 | } 88 | TweenMax.to(this, time, {delay, scale: this.actualScale, ease: Power4.easeOut }) 89 | } 90 | hide() { 91 | this.alpha = 0 92 | this.scale = 0 93 | TweenMax.killTweensOf(this) 94 | this.tick() 95 | this.isShown = false 96 | } 97 | tick() { 98 | this.mouseBlob.tick() 99 | if(!this.isShown) return 100 | for (let index = 0; index < this.blobs.length; index++) { 101 | this.blobs[index].tick(this.scale, this.alpha); 102 | } 103 | } 104 | 105 | resize(w, h, shapeW) { 106 | this.w = w 107 | this.h = h 108 | this.shapeW = shapeW 109 | this.mouseBlob.resize(w, h, shapeW) 110 | for (let index = 0; index < this.blobs.length; index++) { 111 | this.blobs[index].resize(w, h) 112 | } 113 | } 114 | 115 | } 116 | 117 | 118 | 119 | 120 | export default Blobs 121 | -------------------------------------------------------------------------------- /assets/js/pixi/blobs/MouseBlob.js: -------------------------------------------------------------------------------- 1 | import MouseHelper from '~/assets/js/utils/MouseHelper' 2 | class MouseBlob{ 3 | constructor(shapeW = 200, isBlur = false) { 4 | this.scale = 0 5 | this.rotation = 0 6 | this.color = 'white' 7 | this.shapeW = shapeW 8 | this.ticker = 0 9 | this.isBlur = isBlur 10 | this.init() 11 | } 12 | init() { 13 | this.sprite = new PIXI.Sprite() 14 | this.graphs = [ 15 | {graph: new PIXI.Graphics()}, 16 | {graph: new PIXI.Graphics()}, 17 | {graph: new PIXI.Graphics()}, 18 | {graph: new PIXI.Graphics()}, 19 | {graph: new PIXI.Graphics()}, 20 | {graph: new PIXI.Graphics()}, 21 | {graph: new PIXI.Graphics()}, 22 | {graph: new PIXI.Graphics()}, 23 | ] 24 | this.graphs.forEach((element, i) => { 25 | this.sprite.addChild(element.graph) 26 | }) 27 | if(this.isBlur) { 28 | 29 | var blurFilter = new PIXI.filters.BlurFilter(); 30 | blurFilter.blur = 10; 31 | var fragSrc = [ 32 | 'precision mediump float;', 33 | 'varying vec2 vTextureCoord;', 34 | 'uniform sampler2D uSampler;', 35 | 'uniform float threshold;', 36 | 'void main(void)', 37 | '{', 38 | ' vec4 color = texture2D(uSampler, vTextureCoord);', 39 | ' vec3 mcolor = vec3(255.0, 255.0, 255.0);', 40 | ' if (color.a > threshold) {', 41 | ' gl_FragColor = vec4(mcolor, 1.0);', 42 | ' } else {', 43 | ' gl_FragColor = vec4(vec3(0.0), 0.0);', 44 | ' }', 45 | '}' 46 | ].join('\n') 47 | const filter = new PIXI.Filter( null, fragSrc ); 48 | filter.apply = function(filterManager, input, output) { 49 | this.uniforms.threshold = .5 50 | filterManager.applyFilter(this, input, output); 51 | } 52 | this.sprite.filters = [blurFilter, filter]; 53 | } 54 | } 55 | show() { 56 | this.rotation = 0 57 | TweenMax.to(this, 1, {rotation: '+=30', scale: 1, ease: Power4.easeOut}) 58 | } 59 | hide() { 60 | TweenMax.to(this, .5, {rotation: '+=30', scale: 0, ease: Power4.easeOut}) 61 | } 62 | drawShape() { 63 | this.graphs.forEach((element, i) => { 64 | element.graph.clear() 65 | element.graph.beginFill(0xffffff ) 66 | element.graph.drawCircle(0, 0, this.shapeW) 67 | element.direction = 1 - Math.random() * 2 68 | element.posX = (Math.cos(i / 8 * Math.PI * 2) * this.shapeW * .15) 69 | element.posY = (Math.sin(i / 8 * Math.PI * 2) * this.shapeW * .15) 70 | element.rotation = Math.random() * 360 * Math.PI * 2 71 | element.graph.endFill(); 72 | element.graph.cacheAsBitmap = true 73 | }); 74 | } 75 | 76 | resize(w, h, shapeW = 0) { 77 | this.shapeW = shapeW 78 | this.drawShape() 79 | } 80 | 81 | tick(color = 0xFFFFFF) { 82 | this.ticker += .008 83 | this.sprite.position.x = MouseHelper.easeSlowX 84 | this.sprite.position.y = MouseHelper.easeSlowY 85 | for (let index = 0; index < this.graphs.length; index++) { 86 | const element = this.graphs[index]; 87 | element.graph.position.x = element.posX + (Math.cos(this.ticker * (index + 1) / 8 * Math.PI * 2) * this.shapeW * .05) * element.direction 88 | element.graph.position.y = element.posY + (Math.sin(this.ticker * (index + 1) / 8 * Math.PI * 2) * this.shapeW * .05) * element.direction 89 | element.graph.scale.x = .95 + Math.cos(this.ticker * (index + 1) / 10 * Math.PI * 2) * .09 90 | element.graph.scale.y = .9 + Math.sin(this.ticker * (index + 1) / 10 * Math.PI * 2) * .09 91 | element.graph.rotation = element.rotation + element.direction * this.ticker / 360 92 | } 93 | this.sprite.rotation = this.rotation * Math.PI / 180 94 | this.sprite.scale.x = this.scale 95 | this.sprite.scale.y = this.scale 96 | } 97 | } 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | export default MouseBlob 108 | -------------------------------------------------------------------------------- /assets/js/pixi/blobs/_Blob.js: -------------------------------------------------------------------------------- 1 | import BlobPoint from '~/assets/js/pixi/blobs/BlobPoint' 2 | import MouseHelper from '~/assets/js/utils/MouseHelper' 3 | class Blob { 4 | constructor(index, debug = false) { 5 | this.blobGraph = new PIXI.Sprite(); 6 | this.blobGraph.anchor.set(.5,.5) 7 | this.blobGraph.name = "blob" 8 | this.index = index 9 | this.debug = debug 10 | this.color = 'red' 11 | this.numPoints = 4 + Math.floor(Math.random() * 5) 12 | this.originalRadius = this.radius = 70 + Math.floor(Math.random() * 100) 13 | this.position = { x: 0, y: 0 } 14 | this.elasticity = .001 15 | this.friction = .08 16 | this.rotation = 45 17 | this.hover = false 18 | this.oldMousePoint = { x: 0, y: 0 } 19 | } 20 | load(getter) { 21 | this.blob = new PIXI.Sprite(PIXI.Texture.fromImage(getter('blob.png'))); 22 | this.blob.anchor.set(.5,.5) 23 | this.blobGraph.addChild(this.blob) 24 | } 25 | resize(w, h){ 26 | this.w = w 27 | this.h = h 28 | } 29 | 30 | setBlob(setDelay = false) { 31 | TweenMax.killTweensOf(this) 32 | this.radius = 200 + Math.round(Math.random() * 300) 33 | this.blob.width = this.radius 34 | this.blob.height = this.radius 35 | const random = Math.random() 36 | const angle = random * Math.PI / 4 + Math.PI / 2 + Math.PI / 4 37 | const angleEnd = (1 - random) * Math.PI / 4 - Math.PI / 2 + Math.PI / 4 38 | 39 | this.position.x = this.w * .5 + Math.cos(angle) * ((Math.min(this.h, this.w)) + (this.radius * 1.2)) 40 | this.position.y = this.h * .5 + Math.sin(angle) * ((Math.min(this.h, this.w)) + (this.radius * 1.2)) 41 | const x = this.w * .5 + Math.cos(angleEnd) * ((Math.min(this.h, this.w)) + (this.radius * 1.2)) 42 | const y = this.h * .5 + Math.sin(angleEnd) * ((Math.min(this.h, this.w)) + (this.radius * 1.2)) 43 | const time = this.radius / 5 44 | const delay = setDelay ? this.index : 0 45 | TweenMax.to(this.position, time, {delay, x, y, onComplete: this.setBlob.bind(this), overwrite: 1, onUpdate: this.checkBlobPos.bind(this) }) 46 | } 47 | 48 | checkBlobPos() { 49 | if(this.position.x > this.w + this.radius + 50 || this.position.y < -(this.radius + 50) )this.setBlob() 50 | } 51 | 52 | 53 | tick(scale, alpha) { 54 | this.blobGraph.alpha = alpha 55 | if (alpha === 0) return 56 | this.blobGraph.position.x = this.position.x 57 | this.blobGraph.position.y = this.position.y 58 | this.blobGraph.rotation = this.rotation * Math.PI / 180 59 | this.blobGraph.scale.x = scale * .9 60 | this.blobGraph.scale.y = scale 61 | 62 | 63 | } 64 | 65 | } 66 | 67 | export default Blob 68 | -------------------------------------------------------------------------------- /assets/js/utils/MouseHelper.js: -------------------------------------------------------------------------------- 1 | class MouseHelper { 2 | 3 | constructor () { 4 | this.isFirst = true 5 | this.isMouseNeeded = false 6 | this.x = Math.random() * 1200 7 | this.y = Math.random() * 800 8 | this.easeX = this.x 9 | this.easeY = this.y 10 | this.easeSlowX = this.x 11 | this.easeSlowY = this.y 12 | this._mouseMoveHandler = this.mouseMoveHandler.bind(this) 13 | if(process.browser) window.addEventListener('mousemove', this._mouseMoveHandler) 14 | } 15 | 16 | mouseMoveHandler (e) { 17 | this.x = e.clientX 18 | this.y = e.clientY 19 | if(this.isFirst && !this.isMouseNeeded){ 20 | this.easeSlowX = this.easeX = this.x 21 | this.easeSlowY = this.easeY = this.y 22 | } 23 | this.isFirst = false 24 | } 25 | tick() { 26 | const dX = this.x - this.easeX 27 | const dY = this.y - this.easeY 28 | const dSlowX = this.x - this.easeSlowX 29 | const dSlowY = this.y - this.easeSlowY 30 | this.easeX += dX / 10 31 | this.easeY += dY / 10 32 | this.easeSlowX += dSlowX / 11 33 | this.easeSlowY += dSlowY / 11 34 | } 35 | } 36 | 37 | 38 | export default new MouseHelper() 39 | -------------------------------------------------------------------------------- /assets/js/utils/ResizeHelper.js: -------------------------------------------------------------------------------- 1 | import memoize from 'lodash/memoize'; 2 | import Emitter from '~/assets/js/events' 3 | 4 | 5 | class ResizeHelper { 6 | 7 | constructor() { 8 | if (!process.browser) return 9 | this.dimension = memoize(this._dimension); 10 | this.timeout 11 | window.addEventListener('resize', () => { 12 | clearTimeout(this.timeout); 13 | this.timeout = setTimeout(this.onResize.bind(this), 50); 14 | }) 15 | } 16 | 17 | onResize(e) { 18 | this.dimension = memoize(this._dimension) 19 | Emitter.emit('GLOBAL:RESIZE') 20 | } 21 | 22 | clear() { 23 | this.dimension.cache = {}; 24 | } 25 | 26 | _dimension() { 27 | var body = document.body, 28 | html = document.documentElement; 29 | var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); 30 | var dimension = { 31 | width: window.innerWidth, 32 | innerWidth: document.body.clientWidth, 33 | height: window.innerHeight, 34 | docHeight: docHeight 35 | }; 36 | 37 | dimension.ratio = dimension.width / dimension.height; 38 | return dimension; 39 | } 40 | 41 | innerWidth() { 42 | return this.dimension().innerWidth; 43 | } 44 | 45 | width() { 46 | return this.dimension().width; 47 | } 48 | 49 | height() { 50 | return this.dimension().height; 51 | } 52 | 53 | ratio() { 54 | return this.dimension().ratio; 55 | } 56 | 57 | docHeight() { 58 | return this.dimension().docHeight; 59 | } 60 | } 61 | 62 | 63 | export default new ResizeHelper(); 64 | -------------------------------------------------------------------------------- /assets/js/utils/ScrollHelper.js: -------------------------------------------------------------------------------- 1 | class ScrollHelper { 2 | 3 | constructor()  { 4 | this.scrollTop = 0 5 | if(process.browser){ 6 | this.doc = document.documentElement 7 | window.addEventListener('scroll', () => this.onScroll()) 8 | } 9 | } 10 | 11 | onScroll() { 12 | let scroll = (window.pageYOffset || this.doc.scrollTop) - (this.doc.clientTop || 0) 13 | if(scroll != this.scrollTop){ 14 | this.scrollTop = (window.pageYOffset || this.doc.scrollTop) - (this.doc.clientTop || 0) 15 | this.scrollTop = Math.max(this.scrollTop,0) 16 | } 17 | } 18 | } 19 | 20 | 21 | export default new ScrollHelper(); 22 | -------------------------------------------------------------------------------- /assets/js/utils/Support.js: -------------------------------------------------------------------------------- 1 | import {detect} from 'detect-browser' 2 | let browser = detect() 3 | export default { 4 | hasWheelEvent: process.browser ? 'onwheel' in document : null, 5 | hasMouseWheelEvent: process.browser ? 'onmousewheel' in document : null, 6 | hasTouch: process.browser ? 'ontouchstart' in document : null, 7 | hasTouchWin: process.browser ? navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1 : null, 8 | hasPointer: process.browser ? !!window.navigator.msPointerEnabled : null, 9 | hasKeyDown: process.browser ? 'onkeydown' in document : null, 10 | isFirefox: process.browser ? navigator.userAgent.indexOf('Firefox') > -1 : null, 11 | isSafariMac: process.browser ? browser.name === 'safari' && browser.os === 'Mac OS' : null, 12 | isChromeAndroid: process.browser ? browser.name === 'chrome' && browser.os === 'Android OS' : null, 13 | isIOS: process.browser ? browser.os === 'iOS' : null, 14 | isIpad: process.browser ? /iPad/i.test(navigator.userAgent) || /iPhone OS 3_1_2/i.test(navigator.userAgent) || /iPhone OS 3_2_2/i.test(navigator.userAgent) : null, 15 | isAndroid: process.browser ? browser.os === 'Android OS' : null, 16 | isChromeDesktop: process.browser ? browser.name === 'chrome' && browser.os !== 'Android OS' && browser.os !== 'iOS' : null, 17 | hasWebGL: (() => { 18 | try { 19 | var canvas = document.createElement('canvas'); return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))) 20 | } catch (e) { 21 | return false 22 | } 23 | })() 24 | } 25 | 26 | -------------------------------------------------------------------------------- /assets/js/utils/Utils.js: -------------------------------------------------------------------------------- 1 | 2 | class Utils { 3 | 4 | shuffle(array) { 5 | let j, x, i; 6 | for (i = array.length; i; i--) { 7 | j = Math.floor(Math.random() * i); 8 | x = array[i - 1]; 9 | array[i - 1] = array[j]; 10 | array[j] = x; 11 | } 12 | return array 13 | } 14 | 15 | getYoutubeId(url) { 16 | let name = 'v'; 17 | if (!url) { 18 | url = window.location.href; 19 | } 20 | 21 | name = name.replace(/[\[\]]/g, "\\$&"); 22 | var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 23 | results = regex.exec(url); 24 | if (!results) return null; 25 | if (!results[2]) return ''; 26 | return decodeURIComponent(results[2].replace(/\+/g, " ")); 27 | } 28 | 29 | getVimeoId(link){ 30 | let videoLink_array = link.split('/') 31 | return videoLink_array[videoLink_array.length - 1] 32 | } 33 | 34 | setCookie(cookiename, value, hours = 12) { 35 | var date = new Date(); 36 | date.setTime(date.getTime() + Number(hours) * 3600 * 1000); 37 | document.cookie = cookiename + "=" + value + "; path=/;expires = " + date.toGMTString(); 38 | } 39 | 40 | validateEmail(email) { 41 | var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 42 | return re.test(email); 43 | } 44 | 45 | getCookie(cname) { 46 | var name = cname + "="; 47 | var ca = document.cookie.split(';'); 48 | for (var i = 0; i < ca.length; i++) { 49 | var c = ca[i]; 50 | while (c.charAt(0) == ' ') { 51 | c = c.substring(1); 52 | } 53 | if (c.indexOf(name) == 0) { 54 | return c.substring(name.length, c.length); 55 | } 56 | } 57 | return ""; 58 | } 59 | 60 | checkFileSize(file) { 61 | var isFileSizeOk = true 62 | let fileSize = Math.ceil(file.size * 100 / (1024 * 1024)) / 100 63 | if (fileSize > this.maxVideoSize) { 64 | //alert('the file is to large (max : ' + this.maxVideoSize + 'Mo)') 65 | isFileSizeOk = false 66 | } 67 | return isFileSizeOk 68 | } 69 | 70 | checkFileExtension(file, el) { 71 | let acceptAttr = el.accept.split(',') 72 | var isFileExtOk = false 73 | var filename_array = file.name.split('.') 74 | var ext = '.' + filename_array[filename_array.length - 1].toLowerCase() 75 | acceptAttr.forEach((attr) => { 76 | if (ext === attr) isFileExtOk = true 77 | }) 78 | //if (!isFileExtOk) alert('wrong file format (' + ext + ') ' + acceptAttr.join('')) 79 | return isFileExtOk 80 | } 81 | 82 | isTouchDevice() { 83 | try { 84 | document.createEvent("TouchEvent"); 85 | return true; 86 | } catch (e) { 87 | return false; 88 | } 89 | } 90 | 91 | offset(element){ 92 | var top = 0, left = 0; 93 | do { 94 | top += element.offsetTop || 0; 95 | left += element.offsetLeft || 0; 96 | element = element.offsetParent; 97 | } while(element); 98 | 99 | return { 100 | top: top, 101 | left: left 102 | } 103 | } 104 | } 105 | 106 | export default new Utils(); 107 | -------------------------------------------------------------------------------- /assets/js/workers/PerlinWorker.js: -------------------------------------------------------------------------------- 1 | // This is a port of Ken Perlin's Java code. The 2 | // original Java code is at http://cs.nyu.edu/%7Eperlin/noise/. 3 | // Note that in this version, a number from 0 to 1 is returned. 4 | class PerlinNoise { 5 | 6 | 7 | noise(x, y, z){ 8 | 9 | var p = new Array(512) 10 | var permutation = [ 151,160,137,91,90,15, 11 | 131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23, 12 | 190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33, 13 | 88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166, 14 | 77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244, 15 | 102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196, 16 | 135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123, 17 | 5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42, 18 | 223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9, 19 | 129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228, 20 | 251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107, 21 | 49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254, 22 | 138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180 23 | ]; 24 | for (var i=0; i < 256 ; i++) 25 | p[256+i] = p[i] = permutation[i]; 26 | 27 | var X = Math.floor(x) & 255, // FIND UNIT CUBE THAT 28 | Y = Math.floor(y) & 255, // CONTAINS POINT. 29 | Z = Math.floor(z) & 255; 30 | x -= Math.floor(x); // FIND RELATIVE X,Y,Z 31 | y -= Math.floor(y); // OF POINT IN CUBE. 32 | z -= Math.floor(z); 33 | var u = this.fade(x), // COMPUTE FADE CURVES 34 | v = this.fade(y), // FOR EACH OF X,Y,Z. 35 | w = this.fade(z); 36 | var A = p[X ]+Y, AA = p[A]+Z, AB = p[A+1]+Z, // HASH COORDINATES OF 37 | B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z; // THE 8 CUBE CORNERS, 38 | 39 | return this.scale(this.lerp(w, this.lerp(v, this.lerp(u, this.grad(p[AA ], x , y , z ), // AND ADD 40 | this.grad(p[BA ], x-1, y , z )), // BLENDED 41 | this.lerp(u, this.grad(p[AB ], x , y-1, z ), // RESULTS 42 | this.grad(p[BB ], x-1, y-1, z ))),// FROM 8 43 | this.lerp(v, this.lerp(u, this.grad(p[AA+1], x , y , z-1 ), // CORNERS 44 | this.grad(p[BA+1], x-1, y , z-1 )), // OF CUBE 45 | this.lerp(u, this.grad(p[AB+1], x , y-1, z-1 ), 46 | this.grad(p[BB+1], x-1, y-1, z-1 ))))); 47 | } 48 | fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); } 49 | lerp( t, a, b) { return a + t * (b - a); } 50 | grad(hash, x, y, z) { 51 | var h = hash & 15; // CONVERT LO 4 BITS OF HASH CODE 52 | var u = h<8 ? x : y, // INTO 12 GRADIENT DIRECTIONS. 53 | v = h<4 ? y : h==12||h==14 ? x : z; 54 | return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v); 55 | } 56 | scale(n) { return (1 + n)/2; } 57 | } 58 | 59 | export default new PerlinNoise() 60 | 61 | 62 | self.onmessage = function (e) { 63 | var canvasData = e.data.data; 64 | var binaryData = canvasData.data; 65 | 66 | var l = e.data.length; 67 | var index = e.data.index; 68 | 69 | var i, n, prevPoint, currentPoint, nextPoint, x, y; 70 | for (i = 0; i < this.width * this.height; i++) { 71 | currentPoint = this.points[i] 72 | this.ctx.fillStyle = this.color 73 | let noise = PerlinNoise.noise((i % this.width) / (10 * this.scale) + this.time, Math.floor(i / this.width) / (10 * this.scale) + this.time, 0.3) 74 | this.ctx.fillStyle = "rgba(" + Math.floor(noise*255) + "," + Math.floor(noise*255) + "," + Math.floor(noise*255) + "," + 1 + ")"; 75 | this.ctx.fillRect(currentPoint.x, currentPoint.y, 1, 1); 76 | } 77 | 78 | self.postMessage({ result: canvasData, index: index }); 79 | }; 80 | -------------------------------------------------------------------------------- /assets/stylus/base/font.styl: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family:'Messina Sans'; 3 | font-display: swap; 4 | src: url('~/assets/fonts/messina_sans_light.eot'); 5 | src: url('~/assets/fonts/messina_sans_light.eot?#iefix') format('embedded-opentype'), 6 | url('~/assets/fonts/messina_sans_light.woff2') format('woff2'), 7 | url('~/assets/fonts/messina_sans_light.woff') format('woff'), 8 | url('~/assets/fonts/messina_sans_light.svg#messina_sans_light') format('svg'); 9 | font-weight: 300; 10 | font-style: normal; 11 | font-stretch: normal; 12 | unicode-range: U+0020-00FE; 13 | } 14 | 15 | @font-face { 16 | font-family:'Messina Sans'; 17 | font-display: swap; 18 | src: url('~/assets/fonts/messina_sans_regular.eot'); 19 | src: url('~/assets/fonts/messina_sans_regular.eot?#iefix') format('embedded-opentype'), 20 | url('~/assets/fonts/messina_sans_regular.woff2') format('woff2'), 21 | url('~/assets/fonts/messina_sans_regular.woff') format('woff'), 22 | url('~/assets/fonts/messina_sans_regular.svg#messina_sans_regular') format('svg'); 23 | font-weight: 400; 24 | font-style: normal; 25 | font-stretch: normal; 26 | unicode-range: U+0020-00FE; 27 | } 28 | 29 | @font-face { 30 | font-family:'Messina Sans'; 31 | font-display: swap; 32 | src: url('~/assets/fonts/messina_sans_semiBold.eot'); 33 | src: url('~/assets/fonts/messina_sans_semiBold.eot?#iefix') format('embedded-opentype'), 34 | url('~/assets/fonts/messina_sans_semiBold.woff2') format('woff2'), 35 | url('~/assets/fonts/messina_sans_semiBold.woff') format('woff'), 36 | url('~/assets/fonts/messina_sans_semiBold.svg#messina_sans_semiBold') format('svg'); 37 | font-weight: 600; 38 | font-style: normal; 39 | font-stretch: normal; 40 | unicode-range: U+0020-00FE; 41 | } 42 | @font-face { 43 | font-family:'Hawthorn'; 44 | font-display: swap; 45 | src: url('~/assets/fonts/hawthorn_ef.eot'); 46 | src: url('~/assets/fonts/hawthorn_ef.eot?#iefix') format('embedded-opentype'), 47 | url('~/assets/fonts/hawthorn_ef.woff2') format('woff2'), 48 | url('~/assets/fonts/hawthorn_ef.woff') format('woff'), 49 | url('~/assets/fonts/hawthorn_ef.svg#hawthorn_ef') format('svg'); 50 | font-weight: 500; 51 | font-style: normal; 52 | font-stretch: normal; 53 | unicode-range: U+0020-00FC; 54 | } 55 | 56 | -------------------------------------------------------------------------------- /assets/stylus/base/reset.styl: -------------------------------------------------------------------------------- 1 | html,body 2 | width 100% 3 | height 100% 4 | min-height 100% 5 | position relative 6 | margin 0 7 | padding 0 8 | -webkit-font-smoothing antialiased 9 | -moz-osx-font-smoothing grayscale 10 | button 11 | border none 12 | margin 0 13 | padding 0 14 | user-select none 15 | width auto 16 | outline 0 17 | overflow visible 18 | background transparent 19 | color inherit 20 | font inherit 21 | line-height normal 22 | text-align center 23 | text-decoration none 24 | cursor pointer 25 | white-space normal 26 | -webkit-font-smoothing inherit 27 | -moz-osx-font-smoothing inherit 28 | -webkit-appearance none 29 | &:disabled 30 | opacity .5 31 | pointer-events none 32 | figure 33 | margin 0 34 | a 35 | text-decoration none 36 | color black 37 | ul,li 38 | list-style none 39 | margin 0 40 | padding 0 41 | h1,h2,h3,h4,h5,h6,p 42 | margin 0 43 | * 44 | box-sizing border-box 45 | img 46 | width 100% 47 | display block 48 | height auto 49 | -------------------------------------------------------------------------------- /assets/stylus/components/button.styl: -------------------------------------------------------------------------------- 1 | .button 2 | align-items center 3 | display flex 4 | letter-spacing $unitH * 4 5 | font-size 8px 6 | line-height 1 7 | font-weight $semi 8 | justify-content center 9 | left 50% 10 | position absolute 11 | text-transform uppercase 12 | pointer-events auto 13 | transition opacity .5s ease-in-out-quad 14 | padding-top 10px 15 | padding-bottom 10px 16 | overflow hidden 17 | will-change opacity 18 | &:hover 19 | opacity 0.6 20 | .word 21 | position relative 22 | height 7px 23 | margin 0 20 * $unitH 24 | &.black 25 | color $colors-black 26 | &:before, 27 | &:after 28 | background $colors-black 29 | &.white 30 | color $colors-white 31 | &:before, 32 | &:after 33 | background $colors-white 34 | &:before, 35 | &:after 36 | content '' 37 | display block 38 | height 1px 39 | width $unitV * 40 40 | &.top 41 | top 0 42 | transform translate(14px, 0%) rotate(90deg) 43 | transform-origin 0% 0% 44 | &:before 45 | width $unitV * 80 46 | margin-left 0 47 | &.bottom 48 | bottom 0 49 | transform rotate(-90deg) translate(0%, 50%) 50 | transform-origin 0% 100% 51 | &:before 52 | width $unitV * 80 53 | margin-left 0 54 | -------------------------------------------------------------------------------- /assets/stylus/components/menuIcon.styl: -------------------------------------------------------------------------------- 1 | .MenuButton button, .Logo h1 2 | .icon 3 | width 12px 4 | height 7px 5 | overflow hidden 6 | display block 7 | span 8 | height 1px 9 | width 26px 10 | display block 11 | position relative 12 | margin-bottom 2px 13 | &:after, 14 | &:before 15 | display block 16 | content '' 17 | height 100% 18 | width 100% 19 | display block 20 | transition transform .3s ease-in-out-quad 21 | position absolute 22 | top 0 23 | left 0 24 | &:before 25 | background $colors-black 26 | opacity 0 27 | transition opacity 1s ease-out-quart .7s 28 | transform translateX(-14px) 29 | &:after 30 | background linear-gradient(to left, $colors-black, $colors-black 12px, transparent 12px, transparent 14px, $colors-black 14px, $colors-black 26px) 31 | transition transform .3s ease-in-out-quad 32 | transform translateX(-26px) 33 | &:nth-child(2):after 34 | transition-delay .1s 35 | &:nth-child(3):after, 36 | &:nth-child(3):before 37 | margin-left -5px 38 | &:nth-child(3):after 39 | transition-delay .2s 40 | &.opacity .icon span:before 41 | opacity .3 42 | &.show .icon span 43 | &:before 44 | opacity 0 45 | transition opacity 0s ease-out-quart 1s 46 | &:after 47 | transform translateX(-14px) 48 | &.hide .icon span 49 | &:before 50 | opacity 0 51 | &:after 52 | transition transform .3s ease-in-out-quart 53 | transform translateX(-26px) 54 | &.show:hover 55 | .icon 56 | span 57 | &:after 58 | transition transform .3s ease-in-out-quart 59 | transform translateX(0px) 60 | &:nth-child(3):after 61 | transform translateX(10px) 62 | -------------------------------------------------------------------------------- /assets/stylus/main.styl: -------------------------------------------------------------------------------- 1 | 2 | @import 'base/*' 3 | @import 'components/*' 4 | html 5 | -ms-text-size-adjust 100% 6 | -webkit-text-size-adjust 100% 7 | -moz-osx-font-smoothing grayscale 8 | -webkit-font-smoothing antialiased 9 | box-sizing border-box 10 | 11 | *, *:before, *:after 12 | box-sizing border-box 13 | margin 0 14 | 15 | html, 16 | body, 17 | #__nuxt, 18 | #__layout, 19 | .__layout 20 | height 100% 21 | position relative 22 | width 100% 23 | 24 | body 25 | font-family $messina 26 | font-weight 400 27 | color $colors-grey 28 | font-size $test 29 | line-height $lineHeight 30 | -------------------------------------------------------------------------------- /assets/stylus/vars/easing.styl: -------------------------------------------------------------------------------- 1 | // Cubic 2 | ease-in-cubic = cubic-bezier(0.550, 0.055, 0.675, 0.190); 3 | ease-out-cubic = cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | ease-in-out-cubic = cubic-bezier(0.645, 0.045, 0.355, 1.000); 5 | 6 | // Circ 7 | ease-in-circ = cubic-bezier(0.600, 0.040, 0.980, 0.335); 8 | ease-out-circ = cubic-bezier(0.075, 0.820, 0.165, 1.000); 9 | ease-in-out-circ = cubic-bezier(0.785, 0.135, 0.150, 0.860); 10 | 11 | // Expo 12 | ease-in-expo = cubic-bezier(0.950, 0.050, 0.795, 0.035); 13 | ease-out-expo = cubic-bezier(0.190, 1.000, 0.220, 1.000); 14 | ease-in-out-expo = cubic-bezier(1.000, 0.000, 0.000, 1.000); 15 | 16 | // Quad 17 | ease-in-quad = cubic-bezier(0.550, 0.085, 0.680, 0.530); 18 | ease-out-quad = cubic-bezier(0.250, 0.460, 0.450, 0.940); 19 | ease-in-out-quad = cubic-bezier(0.455, 0.030, 0.515, 0.955); 20 | 21 | // Quart 22 | ease-in-quart = cubic-bezier(0.895, 0.030, 0.685, 0.220); 23 | ease-out-quart = cubic-bezier(0.165, 0.840, 0.440, 1.000); 24 | ease-in-out-quart = cubic-bezier(0.770, 0.000, 0.175, 1.000); 25 | 26 | // Quint 27 | ease-in-quint = cubic-bezier(0.755, 0.050, 0.855, 0.060); 28 | ease-out-quint = cubic-bezier(0.230, 1.000, 0.320, 1.000); 29 | ease-in-out-quint = cubic-bezier(0.860, 0.000, 0.070, 1.000); 30 | 31 | // Sine 32 | ease-in-sine = cubic-bezier(0.470, 0.000, 0.745, 0.715); 33 | ease-out-sine = cubic-bezier(0.390, 0.575, 0.565, 1.000); 34 | ease-in-out-sine = cubic-bezier(0.445, 0.050, 0.550, 0.950); 35 | 36 | // Back 37 | ease-in-back = cubic-bezier(0.600, -0.280, 0.735, 0.045); 38 | ease-out-back = cubic-bezier(0.175, 0.885, 0.320, 1.275); 39 | ease-in-out-back = cubic-bezier(0.680, -0.550, 0.265, 1.550); 40 | 41 | // Custom Back 42 | ease-out-back-custom = cubic-bezier(0.175, 0.885, 0.655, 1.650); 43 | -------------------------------------------------------------------------------- /assets/stylus/vars/index.styl: -------------------------------------------------------------------------------- 1 | @import 'easing' 2 | @import 'variables' 3 | -------------------------------------------------------------------------------- /assets/stylus/vars/variables.styl: -------------------------------------------------------------------------------- 1 | json('./../../variables.json') 2 | $test = 15px 3 | $fontSizeUnit = 100vw / 2880 4 | $unitH = 100vw / 2880//1vw / 18 5 | $unitV = 100vh / 1760 //1vh / 11 6 | $lineHeight = 1.25 7 | 8 | $messina = 'Messina Sans', sans-serif 9 | $hawthorn = 'Hawthorn', serif 10 | $light = 300 11 | $semi = 600 12 | -------------------------------------------------------------------------------- /assets/variables.json: -------------------------------------------------------------------------------- 1 | { 2 | "$colors": { 3 | "bgWhite": "#e1dfd7", 4 | "timelineBlack": "#484745", 5 | "dBlack": "#1a1a1a", 6 | "black": "#212121", 7 | "grey": "#4e4e4b", 8 | "dGrey": "#363636", 9 | "speechGrey": "#757575", 10 | "speechdGrey": "#464646", 11 | "white": "#e2e5df", 12 | "natalie-portman": "#f7c8ae", 13 | "emma-watson": "#f7b8b0", 14 | "jennifer-lawrence": "#f7cfae", 15 | "cara-delevingne": "#f5d4a4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/Mobile.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 88 | 89 | 115 | -------------------------------------------------------------------------------- /components/MobileCanvas.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 79 | 80 | 99 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /components/ScrollMixins.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { mapActions } from 'vuex'; 4 | import Emitter from '~/assets/js/events'; 5 | import vScrollLayout from '~/components/layout/ScrollLayout.vue' 6 | 7 | if(process.browser){ 8 | var Hammer = require('hammerjs'); 9 | } 10 | export default { 11 | data(){ 12 | return { 13 | scrollTop: 0, 14 | isReady: false, 15 | isShown: false 16 | } 17 | }, 18 | components: { vScrollLayout }, 19 | methods:{ 20 | ...mapActions(['setCanvasVisible']), 21 | doReady(){ 22 | if(this.isReady) return 23 | this.isReady = true 24 | this.hammerPanel = new Hammer.Manager(this.$root.$el) 25 | this.hammerPanel.add(new Hammer.Swipe()); 26 | if(process.browser)this.setMouseWheelListener() 27 | }, 28 | checkScroll(){ 29 | if(!window.smooth)return 30 | if(this.scrollTop != window.smooth.vars.current.toFixed(1)){ 31 | this.scrollTop = window.smooth.vars.current.toFixed(1) 32 | } 33 | }, 34 | setMouseWheelListener(){ 35 | this.$root.$el.addEventListener("mousewheel", this._doWheel, false); 36 | this.$root.$el.addEventListener("wheel", this._doWheel, false); 37 | this.hammerPanel.on('swipeup', this._checkSwipe) 38 | }, 39 | removeMouseWheelListener(){ 40 | this.$root.$el.removeEventListener("mousewheel", this._doWheel, false); 41 | this.$root.$el.removeEventListener("wheel", this._doWheel, false); 42 | this.hammerPanel.off('swipeup', this._checkSwipe) 43 | }, 44 | 45 | doWheel(e) { 46 | if(this.scrollTop < 50){ 47 | e.preventDefault(); 48 | if(e.deltaY > 0 ){ 49 | this.panDown() 50 | } else { 51 | this.panUp() 52 | } 53 | } 54 | }, 55 | checkSwipe(e) { 56 | if(this.scrollTop < 50){ 57 | e.preventDefault(); 58 | if(e.type === 'swipeup'){ 59 | this.panDown() 60 | } 61 | if(e.type === 'swipedown'){ 62 | this.panUp() 63 | } 64 | } 65 | }, 66 | panDown() { 67 | if(this.isShown)return 68 | 69 | Emitter.emit('PAGE:PANDOWN') 70 | TweenMax.to(this.$refs.scrollContent, 1, {yPercent: 0, clearProps: 'all', ease: Power4.easeInOut, onComplete: () => { 71 | window.smooth.addEvents(true) 72 | this.setCanvasVisible(false) 73 | }}) 74 | this.show() 75 | this.isShown = true 76 | Emitter.emit('GLOBAL:RESIZE') 77 | }, 78 | panUp() { 79 | if(!this.isShown)return 80 | Emitter.emit('PAGE:PANUP') 81 | this.setCanvasVisible(true) 82 | window.smooth.vars.target = 0 83 | window.smooth.removeEvents(true) 84 | TweenMax.to(this.$refs.scrollContent, 1, {yPercent: 100, ease: Power4.easeInOut}) 85 | this.hide() 86 | this.isShown = false 87 | } 88 | }, 89 | beforeDestroy() { 90 | this.removeMouseWheelListener() 91 | Emitter.removeListener('PAGE_SCROLL', this._panDown) 92 | }, 93 | mounted(){ 94 | this._doWheel = this.doWheel.bind(this) 95 | this._checkSwipe = this.checkSwipe.bind(this) 96 | this._panDown = this.panDown.bind(this) 97 | this._panUp = this.panUp.bind(this) 98 | this.isReady = false 99 | 100 | TweenMax.set(this.$refs.scrollContent, {yPercent: 100}) 101 | this.setCanvasVisible(true) 102 | this.$nextTick(()=>{ 103 | window.smooth.removeEvents(true) 104 | window.smooth.resize() 105 | }) 106 | Emitter.on('PAGE_SCROLL', this._panDown) 107 | } 108 | } 109 | 110 | -------------------------------------------------------------------------------- /components/about/AboutCreditsImages.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 60 | 61 | 76 | -------------------------------------------------------------------------------- /components/about/AboutFooter.vue: -------------------------------------------------------------------------------- 1 | 2 | 8 | 33 | 34 | 40 | 55 | -------------------------------------------------------------------------------- /components/about/AboutText.vue: -------------------------------------------------------------------------------- 1 | 2 | 9 | 59 | 60 | 96 | -------------------------------------------------------------------------------- /components/about/AboutTop.vue: -------------------------------------------------------------------------------- 1 | 6 | 23 | 24 | 34 | -------------------------------------------------------------------------------- /components/common/ButtonMenuMixins.js: -------------------------------------------------------------------------------- 1 | import { mapState, mapActions } from 'vuex' 2 | export default { 3 | data() { 4 | return { 5 | readyClass: '', 6 | rotation: 0, 7 | scale: 0 8 | } 9 | }, 10 | computed: { 11 | ...mapState(['isAppReady', 'route']), 12 | canvasSize() { 13 | return {w: 160, h: 160} 14 | } 15 | }, 16 | methods: { 17 | ...mapActions(['setMenuOpen']), 18 | show() { 19 | TweenMax.set(this.$el, {autoAlpha: 1}) 20 | this.resize(null, null) 21 | this.rotation = 0 22 | this.readyClass = 'opacity' 23 | TweenMax.to(this, 1, {rotation: '+=30', scale: 1, ease: Power4.easeOut}) 24 | setTimeout(() => { 25 | this.readyClass = 'show' 26 | }, 1000) 27 | }, 28 | doClick() { 29 | this.setMenuOpen(true) 30 | //TweenMax.to(this, .1, {scale:1, ease: Power4.easeIn, repeat: 1, yoyo:true}) 31 | }, 32 | doMouseEnter() { 33 | TweenMax.to(this, 1,{rotation: '+=15', scale: 1.1, ease: Power4.easeOut}) 34 | }, 35 | doMouseLeave() { 36 | TweenMax.to(this, 1,{rotation: '+=15', scale: 1, ease: Power4.easeOut}) 37 | }, 38 | hide(){ 39 | this.readyClass = 'hide' 40 | TweenMax.to(this, 1,{rotation: '-=30', scale: 0, ease: Power4.easeOut, onComplete: () => { 41 | TweenMax.set(this.$el, {autoAlpha: 0}) 42 | this.readyClass = '' 43 | }}) 44 | }, 45 | tick() { 46 | if(this.scale === 0)return 47 | this.blob.tick(this.rotation, this.scale) 48 | this.ctx.clearRect(0, 0, this.canvasSize.w, this.canvasSize.h) 49 | this.ctx.drawImage(this.blob.canvas, 0, 0, this.canvasSize.w, this.canvasSize.h); 50 | }, 51 | resize(w, h) { 52 | this.$refs.canvas.width = this.canvasSize.w 53 | this.$refs.canvas.height = this.canvasSize.h 54 | this.blob.resize(this.canvasSize.w, this.canvasSize.h, 42) 55 | } 56 | }, 57 | beforeDestroy(){ 58 | }, 59 | mounted() { 60 | TweenMax.set(this.$el, {autoAlpha: 0}) 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /components/common/Logo.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 42 | 43 | 80 | -------------------------------------------------------------------------------- /components/common/MenuButton.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | 30 | 55 | -------------------------------------------------------------------------------- /components/common/Noise.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 65 | 66 | 77 | -------------------------------------------------------------------------------- /components/facts/Facts.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 55 | 56 | 77 | 85 | -------------------------------------------------------------------------------- /components/facts/Timeline.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 82 | 83 | 113 | -------------------------------------------------------------------------------- /components/facts/TimelineDate.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 47 | 48 | 115 | -------------------------------------------------------------------------------- /components/ioMixins.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data() { 3 | return { 4 | active: false 5 | } 6 | }, 7 | 8 | methods: { 9 | ioCb(e){ 10 | if(e[0].intersectionRatio === 0){ 11 | //console.log('IO', this.$options.name, 'inactive') 12 | this.active = false 13 | }else{ 14 | //console.log('IO', this.$options.name, 'active') 15 | this.active = true 16 | } 17 | } 18 | }, 19 | beforeDestroy() { 20 | this.io.unobserve(this.$el); 21 | }, 22 | mounted() { 23 | this.$nextTick(()=>{ 24 | this.io = new IntersectionObserver(this.ioCb.bind(this)) 25 | this.io.observe(this.$el); 26 | }) 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /components/layout/ScrollLayout.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 45 | 46 | 104 | -------------------------------------------------------------------------------- /components/menu/Menu.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 88 | 89 | 115 | -------------------------------------------------------------------------------- /components/menu/MenuCitation.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 38 | 39 | 73 | 74 | -------------------------------------------------------------------------------- /components/menu/MenuCitations.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 58 | 59 | 75 | -------------------------------------------------------------------------------- /components/menu/MenuFooter.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 36 | 37 | 78 | -------------------------------------------------------------------------------- /components/menu/MenuHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 80 | 81 | 135 | -------------------------------------------------------------------------------- /components/menu/MenuLink.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 66 | 67 | 105 | -------------------------------------------------------------------------------- /components/story/StoryContent.vue: -------------------------------------------------------------------------------- 1 | 9 | 57 | 58 | 68 | -------------------------------------------------------------------------------- /components/story/StoryMedia.vue: -------------------------------------------------------------------------------- 1 | 8 | 68 | 69 | 107 | -------------------------------------------------------------------------------- /components/story/StoryPush.vue: -------------------------------------------------------------------------------- 1 | 9 | 48 | 49 | 88 | 89 | 98 | -------------------------------------------------------------------------------- /imagesToPack/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/.DS_Store -------------------------------------------------------------------------------- /imagesToPack/about/cara-delevingne.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/about/cara-delevingne.jpg -------------------------------------------------------------------------------- /imagesToPack/about/emma-watson.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/about/emma-watson.jpg -------------------------------------------------------------------------------- /imagesToPack/about/jennifer-lawrence.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/about/jennifer-lawrence.jpg -------------------------------------------------------------------------------- /imagesToPack/about/natalie-portman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/about/natalie-portman.jpg -------------------------------------------------------------------------------- /imagesToPack/bust/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/bust/.DS_Store -------------------------------------------------------------------------------- /imagesToPack/bust/busts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/bust/busts.jpg -------------------------------------------------------------------------------- /imagesToPack/bust/busts@0.5x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/bust/busts@0.5x.jpg -------------------------------------------------------------------------------- /imagesToPack/bust/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/bust/mask.png -------------------------------------------------------------------------------- /imagesToPack/bust/mask@0.5x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/bust/mask@0.5x.png -------------------------------------------------------------------------------- /imagesToPack/credits/cara-delevingne/amber-fillerup-clark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/cara-delevingne/amber-fillerup-clark.jpg -------------------------------------------------------------------------------- /imagesToPack/credits/emma-watson/carole-lambert.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/emma-watson/carole-lambert.jpg -------------------------------------------------------------------------------- /imagesToPack/credits/emma-watson/cass-bird.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/emma-watson/cass-bird.jpg -------------------------------------------------------------------------------- /imagesToPack/credits/emma-watson/malene-birger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/emma-watson/malene-birger.jpg -------------------------------------------------------------------------------- /imagesToPack/credits/jennifer-lawrence/ben-hassett.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/jennifer-lawrence/ben-hassett.jpg -------------------------------------------------------------------------------- /imagesToPack/credits/jennifer-lawrence/evelyn-bencicova.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/jennifer-lawrence/evelyn-bencicova.jpg -------------------------------------------------------------------------------- /imagesToPack/credits/jennifer-lawrence/mel-and-adam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/jennifer-lawrence/mel-and-adam.jpg -------------------------------------------------------------------------------- /imagesToPack/credits/natalie-portman/aitken-jolly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/natalie-portman/aitken-jolly.jpg -------------------------------------------------------------------------------- /imagesToPack/credits/natalie-portman/luc-besson.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/credits/natalie-portman/luc-besson.jpg -------------------------------------------------------------------------------- /imagesToPack/displacement.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/displacement.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/cara-delevingne-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/cara-delevingne-0.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/cara-delevingne-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/cara-delevingne-1.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/cara-delevingne-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/cara-delevingne-2.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/cara-delevingne-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/cara-delevingne-3.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/cara-delevingne-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/cara-delevingne-4.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/emma-watson-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/emma-watson-0.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/emma-watson-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/emma-watson-1.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/emma-watson-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/emma-watson-2.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/emma-watson-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/emma-watson-3.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/emma-watson-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/emma-watson-4.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/jennifer-lawrence-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/jennifer-lawrence-0.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/jennifer-lawrence-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/jennifer-lawrence-1.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/jennifer-lawrence-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/jennifer-lawrence-2.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/jennifer-lawrence-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/jennifer-lawrence-3.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/jennifer-lawrence-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/jennifer-lawrence-4.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/natalie-portman-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/natalie-portman-0.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/natalie-portman-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/natalie-portman-1.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/natalie-portman-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/natalie-portman-2.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/natalie-portman-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/natalie-portman-3.jpg -------------------------------------------------------------------------------- /imagesToPack/facts/natalie-portman-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/facts/natalie-portman-4.jpg -------------------------------------------------------------------------------- /imagesToPack/mask/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/mask/.DS_Store -------------------------------------------------------------------------------- /imagesToPack/mask/disappear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/mask/disappear.png -------------------------------------------------------------------------------- /imagesToPack/mask/disappear@0.5x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/mask/disappear@0.5x.png -------------------------------------------------------------------------------- /imagesToPack/mask/transition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/mask/transition.png -------------------------------------------------------------------------------- /imagesToPack/mask/transition@0.5x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/mask/transition@0.5x.png -------------------------------------------------------------------------------- /imagesToPack/menu/cara-delevingne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/menu/cara-delevingne.png -------------------------------------------------------------------------------- /imagesToPack/menu/emma-watson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/menu/emma-watson.png -------------------------------------------------------------------------------- /imagesToPack/menu/jennifer-lawrence.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/menu/jennifer-lawrence.png -------------------------------------------------------------------------------- /imagesToPack/menu/natalie-portman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/menu/natalie-portman.png -------------------------------------------------------------------------------- /imagesToPack/titles/titles-border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/titles/titles-border.png -------------------------------------------------------------------------------- /imagesToPack/titles/titles-border@0.5x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/titles/titles-border@0.5x.png -------------------------------------------------------------------------------- /imagesToPack/titles/titles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/titles/titles.png -------------------------------------------------------------------------------- /imagesToPack/titles/titles@0.5x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPack/titles/titles@0.5x.png -------------------------------------------------------------------------------- /imagesToPackMobile/displacement.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPackMobile/displacement.jpg -------------------------------------------------------------------------------- /imagesToPackMobile/title-mobile-border.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPackMobile/title-mobile-border.png -------------------------------------------------------------------------------- /imagesToPackMobile/title-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/imagesToPackMobile/title-mobile.png -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /layouts/pageTransition.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/layouts/pageTransition.js -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /middleware/mobile.js: -------------------------------------------------------------------------------- 1 | export default function (ctx) { 2 | let userAgent = ctx.req ? ctx.req.headers['user-agent'] : navigator.userAgent 3 | ctx.isMobile = /mobile/i.test(userAgent) 4 | } 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "beyond-beauty", 3 | "version": "1.0.0", 4 | "description": "Nuxt.js project", 5 | "author": "Romain Avalle ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env HOST=0.0.0.0 PORT=3000 nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "precommit": "npm run lint", 14 | "pack": "mm-packer -s ./imagesToPack -o static/images/pack", 15 | "packMobile": "mm-packer -s ./imagesToPackMobile -o static/images/pack-mobile" 16 | }, 17 | "dependencies": { 18 | "@merci-michel/mm-sharer": "^1.0.1", 19 | "@merci-michel/mm-utils-math": "^1.0.0", 20 | "@nuxtjs/google-analytics": "^2.0.2", 21 | "@nuxtjs/pwa": "^2.0.8", 22 | "ajv": "^6.4.0", 23 | "dat.gui": "^0.7.1", 24 | "detect-browser": "^2.5.1", 25 | "dom-classes": "^1.0.0", 26 | "dom-transform": "^2.1.0", 27 | "extract-text-webpack-plugin": "^3.0.2", 28 | "gsap": "git+https://manudurgoni:dibsHk2uRKSe9rsbMKjL@gitlab.upian.com/upian/Tools/gsap.git", 29 | "hammerjs": "^2.0.8", 30 | "html-webpack-plugin": "^2.30.1", 31 | "intersection-observer": "^0.5.0", 32 | "load-asset": "^1.2.0", 33 | "lodash": "^4.17.10", 34 | "mini-css-extract-plugin": "^0.4.1", 35 | "mm-unpacker": "^3.0.3", 36 | "nuxt": "^1.4.1", 37 | "pixi.js": "^4.7.3", 38 | "rupture": "^0.7.1", 39 | "simplex-noise": "^2.4.0", 40 | "smooth-scrolling": "^2.3.9", 41 | "sniffer": "github:watsondg/sniffer", 42 | "stats-js": "^1.0.0-alpha1", 43 | "vue-analytics": "^5.12.2" 44 | }, 45 | "devDependencies": { 46 | "babel-eslint": "^8.2.1", 47 | "cross-env": "^5.2.0", 48 | "eslint": "^4.15.0", 49 | "eslint-friendly-formatter": "^3.0.0", 50 | "eslint-loader": "^1.7.1", 51 | "eslint-plugin-vue": "^4.0.0", 52 | "howler": "^2.0.12", 53 | "ify-loader": "^1.1.0", 54 | "mm-packer": "^4.0.5", 55 | "nuxt-stylus-resources-loader": "^1.1.3", 56 | "stylus": "^0.54.5", 57 | "stylus-loader": "^3.0.2", 58 | "vuex-router-sync": "^5.0.0", 59 | "webpack": "^3.12.0" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /pages/*.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /pages/about.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 62 | 63 | 73 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /plugins/vuex-router-sync.js: -------------------------------------------------------------------------------- 1 | 2 | import { sync } from 'vuex-router-sync' 3 | export default ({app: {store, router}}) => { 4 | sync(store, router) 5 | } 6 | -------------------------------------------------------------------------------- /static/.htaccess: -------------------------------------------------------------------------------- 1 | Header add Access-Control-Allow-Origin "*" 2 | Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 3 | Header add Access-Control-Allow-Methods "GET" 4 | 5 | #Gzip 6 | 7 | AddOutputFilterByType DEFLATE text/css 8 | AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml 9 | AddOutputFilterByType DEFLATE application/json application/x-javascript application/javascript text/javascript 10 | AddOutputFilterByType DEFLATE application/vnd.ms-fontobject application/x-font-ttf font/opentype application/x-font-woff image/svg+xml 11 | 12 | #End Gzip 13 | 14 | 15 | ExpiresActive On 16 | ExpiresByType image/jpg "access 1 year" 17 | ExpiresByType image/jpeg "access 1 year" 18 | ExpiresByType image/gif "access 1 year" 19 | ExpiresByType image/png "access 1 year" 20 | ExpiresByType text/css "access 1 month" 21 | ExpiresByType text/html "access 1 month" 22 | ExpiresByType application/pdf "access 1 month" 23 | ExpiresByType text/x-javascript "access 1 month" 24 | ExpiresByType application/x-shockwave-flash "access 1 month" 25 | ExpiresByType image/x-icon "access 1 year" 26 | ExpiresDefault "access 1 month" 27 | 28 | 29 | 30 | Header set Cache-Control "max-age=2678400, public" 31 | 32 | 33 | Header set Cache-Control "max-age=7200, private, must-revalidate" 34 | 35 | 36 | Header set Cache-Control "max-age=86400, public" 37 | 38 | 39 | Header set Cache-Control "max-age=2678400, private" 40 | 41 | 42 | 43 | AddOutputFilterByType DEFLATE text/plain 44 | AddOutputFilterByType DEFLATE text/html 45 | AddOutputFilterByType DEFLATE text/xml 46 | AddOutputFilterByType DEFLATE text/css 47 | AddOutputFilterByType DEFLATE application/xml 48 | AddOutputFilterByType DEFLATE application/xhtml+xml 49 | AddOutputFilterByType DEFLATE application/rss+xml 50 | AddOutputFilterByType DEFLATE application/javascript 51 | AddOutputFilterByType DEFLATE application/x-javascript 52 | 53 | -------------------------------------------------------------------------------- /static/.htpasswd: -------------------------------------------------------------------------------- 1 | bb:$1$JthU9YXu$/ZGTtbXe2E4FjyMai/pzY/ 2 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /static/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /static/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /static/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/favicon.ico -------------------------------------------------------------------------------- /static/favicons/manifest.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Beyond Beauty", 3 | "short_name": "Beyond B", 4 | "start_url": "./?utm_source=web_app_manifest", 5 | "background_color": "#e1dfd7", 6 | "theme_color": "#e1dfd7", 7 | "display": "standalone", 8 | "icons": [{ 9 | "src": "/favicons/touch/homescreen48.png", 10 | "sizes": "48x48", 11 | "type": "image/png" 12 | }, { 13 | "src": "/favicons/touch/homescreen72.png", 14 | "sizes": "72x72", 15 | "type": "image/png" 16 | }, { 17 | "src": "/favicons/touch/homescreen96.png", 18 | "sizes": "96x96", 19 | "type": "image/png" 20 | }, { 21 | "src": "/favicons/touch/homescreen144.png", 22 | "sizes": "144x144", 23 | "type": "image/png" 24 | }, { 25 | "src": "/favicons/touch/homescreen168.png", 26 | "sizes": "168x168", 27 | "type": "image/png" 28 | }, { 29 | "src": "/favicons/touch/homescreen192.png", 30 | "sizes": "192x192", 31 | "type": "image/png" 32 | }], 33 | "related_applications": [{ 34 | "platform": "web" 35 | }] 36 | } 37 | -------------------------------------------------------------------------------- /static/favicons/touch/homescreen144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/touch/homescreen144.png -------------------------------------------------------------------------------- /static/favicons/touch/homescreen168.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/touch/homescreen168.png -------------------------------------------------------------------------------- /static/favicons/touch/homescreen192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/touch/homescreen192.png -------------------------------------------------------------------------------- /static/favicons/touch/homescreen48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/touch/homescreen48.png -------------------------------------------------------------------------------- /static/favicons/touch/homescreen72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/touch/homescreen72.png -------------------------------------------------------------------------------- /static/favicons/touch/homescreen96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/favicons/touch/homescreen96.png -------------------------------------------------------------------------------- /static/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/.DS_Store -------------------------------------------------------------------------------- /static/images/pack-mobile/pack.json: -------------------------------------------------------------------------------- 1 | [["displacement.jpg",0,61908,"image/jpeg"],["title-mobile-border.png",61908,78061,"image/png"],["title-mobile.png",78061,106143,"image/png"]] -------------------------------------------------------------------------------- /static/images/pack-mobile/pack.pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/pack-mobile/pack.pack -------------------------------------------------------------------------------- /static/images/pack/pack.json: -------------------------------------------------------------------------------- 1 | [["about/cara-delevingne.jpg",0,33802,"image/jpeg"],["about/emma-watson.jpg",33802,53281,"image/jpeg"],["about/jennifer-lawrence.jpg",53281,76195,"image/jpeg"],["about/natalie-portman.jpg",76195,104399,"image/jpeg"],["bust/busts.jpg",104399,614551,"image/jpeg"],["bust/busts@0.5x.jpg",614551,772821,"image/jpeg"],["bust/mask.png",772821,1007071,"image/png"],["bust/mask@0.5x.png",1007071,1079687,"image/png"],["credits/cara-delevingne/amber-fillerup-clark.jpg",1079687,1177151,"image/jpeg"],["credits/emma-watson/carole-lambert.jpg",1177151,1241962,"image/jpeg"],["credits/emma-watson/cass-bird.jpg",1241962,1295714,"image/jpeg"],["credits/emma-watson/malene-birger.jpg",1295714,1343806,"image/jpeg"],["credits/jennifer-lawrence/ben-hassett.jpg",1343806,1378208,"image/jpeg"],["credits/jennifer-lawrence/evelyn-bencicova.jpg",1378208,1399526,"image/jpeg"],["credits/jennifer-lawrence/mel-and-adam.jpg",1399526,1498922,"image/jpeg"],["credits/natalie-portman/aitken-jolly.jpg",1498922,1554376,"image/jpeg"],["credits/natalie-portman/luc-besson.jpg",1554376,1596697,"image/jpeg"],["displacement.jpg",1596697,1658605,"image/jpeg"],["facts/cara-delevingne-0.jpg",1658605,1740408,"image/jpeg"],["facts/cara-delevingne-1.jpg",1740408,1752514,"image/jpeg"],["facts/cara-delevingne-2.jpg",1752514,1794865,"image/jpeg"],["facts/cara-delevingne-3.jpg",1794865,1828153,"image/jpeg"],["facts/cara-delevingne-4.jpg",1828153,1875635,"image/jpeg"],["facts/emma-watson-0.jpg",1875635,1897998,"image/jpeg"],["facts/emma-watson-1.jpg",1897998,1921818,"image/jpeg"],["facts/emma-watson-2.jpg",1921818,1998633,"image/jpeg"],["facts/emma-watson-3.jpg",1998633,2072634,"image/jpeg"],["facts/emma-watson-4.jpg",2072634,2096233,"image/jpeg"],["facts/jennifer-lawrence-0.jpg",2096233,2121022,"image/jpeg"],["facts/jennifer-lawrence-1.jpg",2121022,2146392,"image/jpeg"],["facts/jennifer-lawrence-2.jpg",2146392,2191511,"image/jpeg"],["facts/jennifer-lawrence-3.jpg",2191511,2237885,"image/jpeg"],["facts/jennifer-lawrence-4.jpg",2237885,2297057,"image/jpeg"],["facts/natalie-portman-0.jpg",2297057,2486180,"image/jpeg"],["facts/natalie-portman-1.jpg",2486180,2651886,"image/jpeg"],["facts/natalie-portman-2.jpg",2651886,2803228,"image/jpeg"],["facts/natalie-portman-3.jpg",2803228,2907154,"image/jpeg"],["facts/natalie-portman-4.jpg",2907154,3039616,"image/jpeg"],["mask/disappear.png",3039616,3246345,"image/png"],["mask/disappear@0.5x.png",3246345,3316059,"image/png"],["mask/transition.png",3316059,3363239,"image/png"],["mask/transition@0.5x.png",3363239,3382003,"image/png"],["menu/cara-delevingne.png",3382003,3508853,"image/png"],["menu/emma-watson.png",3508853,3650725,"image/png"],["menu/jennifer-lawrence.png",3650725,3767189,"image/png"],["menu/natalie-portman.png",3767189,3890957,"image/png"],["titles/titles-border.png",3890957,4091835,"image/png"],["titles/titles-border@0.5x.png",4091835,4615851,"image/png"],["titles/titles.png",4615851,5039077,"image/png"],["titles/titles@0.5x.png",5039077,5439090,"image/png"]] -------------------------------------------------------------------------------- /static/images/pack/pack.pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/pack/pack.pack -------------------------------------------------------------------------------- /static/images/placeholder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/placeholder.jpg -------------------------------------------------------------------------------- /static/images/share/cara-delevingne.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/share/cara-delevingne.jpg -------------------------------------------------------------------------------- /static/images/share/emma-watson.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/share/emma-watson.jpg -------------------------------------------------------------------------------- /static/images/share/general.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/share/general.jpg -------------------------------------------------------------------------------- /static/images/share/jennifer-lawrence.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/share/jennifer-lawrence.jpg -------------------------------------------------------------------------------- /static/images/share/natalie-portman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/share/natalie-portman.jpg -------------------------------------------------------------------------------- /static/images/speech/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/.DS_Store -------------------------------------------------------------------------------- /static/images/speech/cara-delevingne-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/cara-delevingne-0.png -------------------------------------------------------------------------------- /static/images/speech/cara-delevingne-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/cara-delevingne-1.gif -------------------------------------------------------------------------------- /static/images/speech/cara-delevingne-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/cara-delevingne-1.png -------------------------------------------------------------------------------- /static/images/speech/cara-delevingne-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/cara-delevingne-2.png -------------------------------------------------------------------------------- /static/images/speech/emma-watson-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/emma-watson-0.png -------------------------------------------------------------------------------- /static/images/speech/emma-watson-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/emma-watson-1.gif -------------------------------------------------------------------------------- /static/images/speech/emma-watson-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/emma-watson-1.png -------------------------------------------------------------------------------- /static/images/speech/emma-watson-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/emma-watson-2.png -------------------------------------------------------------------------------- /static/images/speech/jennifer-lawrence-0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/jennifer-lawrence-0.gif -------------------------------------------------------------------------------- /static/images/speech/jennifer-lawrence-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/jennifer-lawrence-0.png -------------------------------------------------------------------------------- /static/images/speech/jennifer-lawrence-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/jennifer-lawrence-1.png -------------------------------------------------------------------------------- /static/images/speech/jennifer-lawrence-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/jennifer-lawrence-2.png -------------------------------------------------------------------------------- /static/images/speech/natalie-portman-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/natalie-portman-0.png -------------------------------------------------------------------------------- /static/images/speech/natalie-portman-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/natalie-portman-1.gif -------------------------------------------------------------------------------- /static/images/speech/natalie-portman-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/natalie-portman-1.png -------------------------------------------------------------------------------- /static/images/speech/natalie-portman-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/images/speech/natalie-portman-2.png -------------------------------------------------------------------------------- /static/sounds/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/.DS_Store -------------------------------------------------------------------------------- /static/sounds/_bg.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/_bg.mp3 -------------------------------------------------------------------------------- /static/sounds/_intro.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/_intro.mp3 -------------------------------------------------------------------------------- /static/sounds/_piano.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/_piano.mp3 -------------------------------------------------------------------------------- /static/sounds/bg.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/bg.mp3 -------------------------------------------------------------------------------- /static/sounds/cara-delevigne-0.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/cara-delevigne-0.mp3 -------------------------------------------------------------------------------- /static/sounds/cara-delevigne-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/cara-delevigne-1.mp3 -------------------------------------------------------------------------------- /static/sounds/cara-delevigne-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/cara-delevigne-2.mp3 -------------------------------------------------------------------------------- /static/sounds/cara-delevigne.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/cara-delevigne.mp3 -------------------------------------------------------------------------------- /static/sounds/cara-delevingne-0.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/cara-delevingne-0.mp3 -------------------------------------------------------------------------------- /static/sounds/cara-delevingne-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/cara-delevingne-1.mp3 -------------------------------------------------------------------------------- /static/sounds/cara-delevingne-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/cara-delevingne-2.mp3 -------------------------------------------------------------------------------- /static/sounds/emma-watson-0.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/emma-watson-0.mp3 -------------------------------------------------------------------------------- /static/sounds/emma-watson-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/emma-watson-1.mp3 -------------------------------------------------------------------------------- /static/sounds/emma-watson-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/emma-watson-2.mp3 -------------------------------------------------------------------------------- /static/sounds/intro.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/intro.mp3 -------------------------------------------------------------------------------- /static/sounds/jennifer-lawrence-0.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/jennifer-lawrence-0.mp3 -------------------------------------------------------------------------------- /static/sounds/jennifer-lawrence-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/jennifer-lawrence-1.mp3 -------------------------------------------------------------------------------- /static/sounds/jennifer-lawrence-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/jennifer-lawrence-2.mp3 -------------------------------------------------------------------------------- /static/sounds/natalie-portman-0.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/natalie-portman-0.mp3 -------------------------------------------------------------------------------- /static/sounds/natalie-portman-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/natalie-portman-1.mp3 -------------------------------------------------------------------------------- /static/sounds/natalie-portman-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/natalie-portman-2.mp3 -------------------------------------------------------------------------------- /static/sounds/piano.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/romainavalle/beyond-beauty/dc832632759a4e919993734c172f45b8471f6acf/static/sounds/piano.mp3 -------------------------------------------------------------------------------- /static/sw.js: -------------------------------------------------------------------------------- 1 | importScripts('/_nuxt/workbox.3de3418b.js') 2 | 3 | const workboxSW = new self.WorkboxSW({ 4 | "cacheId": "beyond-beauty", 5 | "clientsClaim": true, 6 | "directoryIndex": "/" 7 | }) 8 | 9 | workboxSW.precache([ 10 | { 11 | "url": "/_nuxt/app.951b1bee5480921720d1.js", 12 | "revision": "da5b2a9661d8e43197cd44a044c3fc44" 13 | }, 14 | { 15 | "url": "/_nuxt/layouts/default.b3daa0f8c6cdb9e20c1b.js", 16 | "revision": "f9eb98de2920480b7f48d45f8c9afb88" 17 | }, 18 | { 19 | "url": "/_nuxt/layouts/pageTransition.1e659be321d0fc5dbdc9.js", 20 | "revision": "8936c060b2266db9097069a9b5d38426" 21 | }, 22 | { 23 | "url": "/_nuxt/manifest.a9ca5691c923381ae782.js", 24 | "revision": "67652bc29cb2728fd82d81c4f62c39e6" 25 | }, 26 | { 27 | "url": "/_nuxt/pages/*.1146a47a374d022eedcc.js", 28 | "revision": "78376e2b68bf6c03dce68115703d1111" 29 | }, 30 | { 31 | "url": "/_nuxt/pages/about.c337e8c94952d4d7aa6d.js", 32 | "revision": "be649714ad3947a5c54a3db66acd4baf" 33 | }, 34 | { 35 | "url": "/_nuxt/pages/index.c4949fc599aad2cf5b99.js", 36 | "revision": "9fd3ec1949865d3106e3f52980a351b0" 37 | }, 38 | { 39 | "url": "/_nuxt/pages/story/_pageId.501d92103a4d71fa1e00.js", 40 | "revision": "42f4d30bc7e4c66a63d4e6ee6e8af7bc" 41 | }, 42 | { 43 | "url": "/_nuxt/vendor.5e5af47b8e86e21c9942.js", 44 | "revision": "436a7fb408ce33d5fecce4707f19034c" 45 | } 46 | ]) 47 | 48 | 49 | workboxSW.router.registerRoute(new RegExp('/_nuxt/.*'), workboxSW.strategies.cacheFirst({}), 'GET') 50 | 51 | workboxSW.router.registerRoute(new RegExp('/.*'), workboxSW.strategies.networkFirst({}), 'GET') 52 | 53 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex' 2 | import data from '~/assets/data.json' 3 | if(process.browser){ 4 | var sniffer = require('sniffer') 5 | } 6 | const createStore = () => { 7 | return new Vuex.Store({ 8 | state: { 9 | currentHomeSlideId: -1, 10 | packer: null, 11 | isMenuOpen: false, 12 | isMenuVisible: false, 13 | isMenuCompletlyVisible: false, 14 | isAppReady: false, 15 | isAppLoaded: false, 16 | isCanvasVisible: true, 17 | isPageTransition: false, 18 | intro: data.intro, 19 | pages: data.pages, 20 | currentFact: 2, 21 | muteSound: false, 22 | isMobile: null 23 | }, 24 | mutations: { 25 | TOGGLE_SOUND (state) { 26 | state.muteSound = !state.muteSound 27 | }, 28 | SET_CURRENT_FACT (state, id) { 29 | state.currentFact = id 30 | }, 31 | SET_CURRENT_HOME_SLIDE_ID (state, id) { 32 | state.currentHomeSlideId = id 33 | }, 34 | SET_PACKER (state, packer) { 35 | state.packer = packer 36 | }, 37 | SET_MENU_OPEN (state, bool){ 38 | state.isMenuOpen = bool 39 | }, 40 | SET_MENU_VISIBLE (state, bool){ 41 | state.isMenuVisible = bool 42 | }, 43 | SET_MENU_COMPLETLY_VISIBLE (state, bool){ 44 | state.isMenuCompletlyVisible = bool 45 | }, 46 | SET_APP_READY (state){ 47 | state.isAppReady = true 48 | }, 49 | SET_APP_LOADED (state){ 50 | state.isAppLoaded = true 51 | }, 52 | SET_CANVAS_VISIBLE (state, bool){ 53 | state.isCanvasVisible = bool 54 | }, 55 | SET_PAGE_TRANSITION (state, bool){ 56 | state.isPageTransition = bool 57 | }, 58 | CHECK_MOBILE(state) { 59 | state.isMobile = sniffer && sniffer.isPhone ? true : false 60 | } 61 | }, 62 | actions: { 63 | toggleSound ({ commit }) { 64 | commit('TOGGLE_SOUND') 65 | }, 66 | setCurrentFact ({ commit }, id) { 67 | commit('SET_CURRENT_FACT', id) 68 | }, 69 | setMenuOpen ({ commit }, bool) { 70 | commit('SET_MENU_OPEN', bool) 71 | }, 72 | setMenuVisible ({ commit }, bool) { 73 | commit('SET_MENU_VISIBLE', bool) 74 | }, 75 | setMenuCompletlyVisible ({ commit }, bool) { 76 | commit('SET_MENU_COMPLETLY_VISIBLE', bool) 77 | }, 78 | setCurrentHomeSlideId ({ commit }, /*{ commit }, { app, isStatic }*/ id) { 79 | commit('SET_CURRENT_HOME_SLIDE_ID', id) 80 | }, 81 | setPacker ({ commit }, packer) { 82 | commit('SET_PACKER', packer) 83 | }, 84 | setAppReady ({ commit }) { 85 | commit('SET_APP_READY') 86 | }, 87 | setAppLoaded ({ commit }) { 88 | commit('SET_APP_LOADED') 89 | }, 90 | setCanvasVisible ({ commit }, bool) { 91 | commit('SET_CANVAS_VISIBLE', bool) 92 | }, 93 | setPageTransition ({ commit }, bool) { 94 | commit('SET_PAGE_TRANSITION', bool) 95 | }, 96 | checkMobile ({commit}) { 97 | commit('CHECK_MOBILE') 98 | } 99 | }, 100 | getters: { 101 | getURI: (state) => (id) => { 102 | return state.packer.getAsURI(id) 103 | }, 104 | currentPageIdNum: state => { 105 | const page = state.pages.find(p => {return p.pageId === state.route.params.pageId}) 106 | return state.pages.indexOf(page) 107 | }, 108 | currentPageId: (state, getters) => { 109 | return getters.currentPageIdNum !== -1 ? state.pages[getters.currentPageIdNum].id : null 110 | }, 111 | nextPageIdNum: (state, getters) => { 112 | let pageIdNum = getters.currentPageIdNum + 1 113 | if(pageIdNum > 3)pageIdNum = 0 114 | return pageIdNum 115 | }, 116 | getPageIdNum: (state, getters) => (id) => { 117 | const page = state.pages.find(p => {return p.pageId === id}) 118 | return state.pages.indexOf(page) 119 | }, 120 | pageData: (state, getters) => { 121 | return state.pages[getters.currentPageIdNum] 122 | }, 123 | isMobile:(state) => { 124 | return state.isMobile 125 | }, 126 | isTablet:(state) => { 127 | return sniffer ? sniffer.isTablet : false 128 | } 129 | } 130 | }) 131 | } 132 | 133 | export default createStore 134 | -------------------------------------------------------------------------------- /tools/hack: -------------------------------------------------------------------------------- 1 | #!/bin/sh -x 2 | # Git workflow hack script from: http://jonrohan.me/guide/git/dead-simple-git-workflow-for-agile-teams/ 3 | ref=$(git symbolic-ref HEAD 2> /dev/null) || exit 0 4 | CURRENT="${ref#refs/heads/}" 5 | if [ -n "$1" ]; then 6 | master_branch=$1 7 | else 8 | master_branch="master" 9 | fi 10 | git checkout ${master_branch} 11 | git pull origin ${master_branch} 12 | git checkout ${CURRENT} 13 | git rebase ${master_branch} -------------------------------------------------------------------------------- /tools/ship: -------------------------------------------------------------------------------- 1 | #!/bin/sh -x 2 | # Git workflow ship script from: http://jonrohan.me/guide/git/dead-simple-git-workflow-for-agile-teams/ 3 | ref=$(git symbolic-ref HEAD 2> /dev/null) || exit 0 4 | CURRENT="${ref#refs/heads/}" 5 | if [ -n "$1" ]; then 6 | master_branch=$1 7 | else 8 | master_branch="master" 9 | fi 10 | git checkout ${master_branch} 11 | git merge ${CURRENT} 12 | git push origin ${master_branch} 13 | git checkout ${CURRENT} --------------------------------------------------------------------------------